/* ==========================================================
   ESSENTIELLE ENTREPRISE GUINÉE SARL
   SITE V2 — FICHIER AUTONOME FINAL
   Fusion de l’ancienne base style.css + site-v2.css
   Un seul fichier CSS à charger dans toutes les pages.
========================================================== */

/* ==========================================================
   ESSENTIELLE ENTREPRISE GUINÉE SARL
   STYLE PRINCIPAL V2
   Accueil + Vols + Responsive
========================================================== */


/* ==========================================================
   1. VARIABLES
========================================================== */

:root {
    --navy: #062b50;
    --navy-dark: #031c35;
    --navy-deep: #021629;
    --navy-light: #0b477c;

    --gold: #d49a24;
    --gold-dark: #b77b12;
    --gold-light: #f0c45e;

    --cream: #faf8f3;
    --white: #ffffff;

    --text: #172334;
    --gray: #697586;
    --gray-light: #9aa4af;

    --light-gray: #f3f5f7;
    --border: #e3e8ed;

    --success: #25d366;

    --radius-sm: 10px;
    --radius: 18px;
    --radius-lg: 26px;

    --shadow-sm: 0 8px 25px rgba(3, 28, 53, 0.07);
    --shadow-md: 0 18px 45px rgba(3, 28, 53, 0.11);
    --shadow-lg: 0 30px 80px rgba(3, 28, 53, 0.16);
}


/* ==========================================================
   2. RESET
========================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: "DM Sans", sans-serif;
    color: var(--text);
    background: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

input,
select,
textarea {
    color: var(--text);
}

.container {
    width: min(1180px, 90%);
    margin-left: auto;
    margin-right: auto;
}



/* MOBILE MENU BUTTON */

.menu-toggle {
    display: none;
    padding: 7px;
    border: 0;
    background: transparent;
    color: var(--navy);
    font-size: 28px;
    line-height: 1;
}


/* ==========================================================
   5. BOUTONS GÉNÉRAUX
========================================================== */

.btn {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 27px;
    border: 0;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 700;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;
}

.btn-gold {
    color: var(--navy-dark);
    background: linear-gradient(
        135deg,
        var(--gold),
        var(--gold-light)
    );
    box-shadow: 0 10px 27px rgba(212, 154, 36, 0.22);
}

.btn-gold:hover {
    transform: translateY(-3px);
    box-shadow: 0 17px 35px rgba(212, 154, 36, 0.32);
}

.btn-light {
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.48);
    background: rgba(255, 255, 255, 0.04);
}

.btn-light:hover {
    color: var(--navy);
    background: var(--white);
    transform: translateY(-3px);
}


/* ==========================================================
   6. TITRES GÉNÉRAUX
========================================================== */

.section-label {
    display: inline-block;
    margin-bottom: 15px;
    color: var(--gold);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.6px;
    text-transform: uppercase;
}

.section-label.gold {
    color: var(--gold-light);
}

.center-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.center-heading .section-label {
    margin-bottom: 18px;
}

.center-heading h2 {
    color: var(--navy);
    font-family: "Playfair Display", serif;
    font-size: clamp(38px, 4vw, 56px);
    line-height: 1.08;
}

.center-heading h2 span {
    color: var(--gold);
}

.center-heading p {
    max-width: 650px;
    margin: 20px auto 0;
    color: var(--gray);
    font-size: 16px;
    line-height: 1.75;
}


/* ==========================================================
   7. ACCUEIL - HERO
========================================================== */

.hero {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    overflow: hidden;

    background-image:
        linear-gradient(
            90deg,
            rgba(3, 28, 53, 0.97) 0%,
            rgba(3, 28, 53, 0.88) 29%,
            rgba(3, 28, 53, 0.53) 58%,
            rgba(3, 28, 53, 0.12) 100%
        ),
        url("../images/hero.jpg");

    background-size: cover;
    background-position: center;
}

.hero::after {
    content: "";
    position: absolute;
    left: -250px;
    bottom: -350px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: rgba(212, 154, 36, 0.08);
    filter: blur(20px);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(3, 28, 53, 0.18),
        transparent 45%
    );
}

.hero-content {
    position: relative;
    z-index: 2;
    padding-top: 85px;
    padding-bottom: 155px;
    color: var(--white);
}

.hero-badge {
    min-height: 35px;
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    margin-bottom: 25px;

    border: 1px solid rgba(240, 196, 94, 0.60);
    border-radius: 50px;

    color: var(--gold-light);
    background: rgba(3, 28, 53, 0.20);

    font-size: 12px;
    font-weight: 700;
}

.hero h1 {
    max-width: 760px;
    margin-bottom: 25px;

    font-family: "Playfair Display", serif;
    font-size: clamp(48px, 6vw, 78px);
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -1px;
}

.hero h1 span {
    display: block;
    color: var(--gold-light);
}

.hero p {
    max-width: 620px;
    margin-bottom: 35px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 17px;
    line-height: 1.75;
}

.hero-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}


/* ==========================================================
   8. ACCUEIL - MOTEUR DE RECHERCHE
========================================================== */

.search-wrapper {
    position: relative;
    z-index: 20;
    margin-top: -82px;
}

.search-box {
    padding: 27px;

    border: 1px solid rgba(3, 28, 53, 0.05);
    border-radius: 19px;

    background: var(--white);

    box-shadow: var(--shadow-lg);
}

.search-tabs {
    display: flex;
    align-items: center;
    gap: 5px;

    margin-bottom: 22px;

    border-bottom: 1px solid #e4e8ec;

    overflow-x: auto;
    scrollbar-width: none;
}

.search-tabs::-webkit-scrollbar {
    display: none;
}

.search-tab {
    position: relative;
    flex-shrink: 0;

    padding: 12px 18px;

    border: 0;
    background: transparent;

    color: var(--gray);

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;

    transition: color 0.25s ease;
}

.search-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;

    height: 3px;

    background: transparent;
}

.search-tab:hover,
.search-tab.active {
    color: var(--navy);
}

.search-tab.active::after {
    background: var(--gold);
}

.flight-type {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;

    margin-bottom: 20px;

    color: var(--text);
    font-size: 13px;
}

.flight-type label {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

.flight-type input {
    accent-color: var(--navy);
}

.search-fields {
    display: grid;

    grid-template-columns:
        1.2fr
        1.2fr
        1fr
        1fr
        0.9fr
        auto;

    gap: 12px;
    align-items: end;
}

.field label {
    display: block;
    margin-bottom: 7px;

    color: var(--gray);

    font-size: 11px;
    font-weight: 700;
}

.field input,
.field select {
    width: 100%;
    height: 52px;

    padding: 0 13px;

    border: 1px solid #dfe4e8;
    border-radius: 9px;

    outline: none;
    background: var(--white);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.field input::placeholder {
    color: #9aa4af;
}

.field input:focus,
.field select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212, 154, 36, 0.10);
}

.search-button {
    height: 52px;
    padding: 0 25px;

    border: 0;
    border-radius: 9px;

    color: var(--white);
    background: var(--navy);

    font-size: 13px;
    font-weight: 700;

    transition:
        transform 0.25s ease,
        color 0.25s ease,
        background 0.25s ease;
}

.search-button:hover {
    color: var(--navy-dark);
    background: var(--gold);
    transform: translateY(-2px);
}


/* ==========================================================
   9. ACCUEIL - INTRODUCTION
========================================================== */

.intro-section {
    padding: 135px 0 95px;
    background: var(--white);
}

.intro {
    max-width: 850px;
    text-align: center;
}

.intro h2 {
    color: var(--navy);

    font-family: "Playfair Display", serif;
    font-size: clamp(38px, 4vw, 55px);
    line-height: 1.12;
}

.intro h2 span {
    color: var(--gold);
}

.intro p {
    max-width: 710px;
    margin: 25px auto 0;

    color: var(--gray);

    font-size: 16px;
    line-height: 1.8;
}


/* ==========================================================
   10. ACCUEIL - SERVICES
========================================================== */

.services-section {
    padding: 105px 0 115px;
    background: var(--cream);
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;
    margin-bottom: 52px;
}

.section-heading > div {
    max-width: 680px;
}

.section-heading h2 {
    color: var(--navy);

    font-family: "Playfair Display", serif;
    font-size: clamp(38px, 4vw, 55px);
    line-height: 1.12;
}

.section-heading h2 span {
    color: var(--gold);
}

.section-heading > p {
    max-width: 400px;

    color: var(--gray);

    font-size: 14px;
    line-height: 1.75;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.service-card {
    position: relative;
    min-height: 325px;

    padding: 35px;

    overflow: hidden;

    border: 1px solid #ece8df;
    border-radius: 18px;

    background: var(--white);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.service-card:hover {
    transform: translateY(-8px);

    border-color: rgba(212, 154, 36, 0.30);

    box-shadow: var(--shadow-md);
}

.service-card.featured {
    color: var(--white);
    border-color: var(--navy);

    background: linear-gradient(
        145deg,
        var(--navy),
        var(--navy-dark)
    );
}

.service-icon {
    width: 55px;
    height: 55px;

    margin-bottom: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: var(--gold);
    background: rgba(212, 154, 36, 0.12);

    font-size: 23px;
}

.service-card.featured .service-icon {
    color: var(--gold-light);
    background: rgba(255, 255, 255, 0.08);
}

.service-number {
    position: absolute;
    top: 35px;
    right: 35px;

    color: #bdc6cf;

    font-size: 11px;
    letter-spacing: 1px;
}

.service-card.featured .service-number {
    color: rgba(255, 255, 255, 0.60);
}

.service-card h3 {
    margin-bottom: 13px;

    color: var(--navy);

    font-family: "Playfair Display", serif;
    font-size: 25px;
    line-height: 1.25;
}

.service-card.featured h3 {
    color: var(--white);
}

.service-card p {
    margin-bottom: 25px;

    color: var(--gray);

    font-size: 14px;
    line-height: 1.75;
}

.service-card.featured p {
    color: rgba(255, 255, 255, 0.72);
}

.service-card a {
    display: inline-flex;
    align-items: center;

    color: var(--gold);

    font-size: 12px;
    font-weight: 700;

    transition: transform 0.25s ease;
}

.service-card a:hover {
    transform: translateX(5px);
}


/* ==========================================================
   11. ACCUEIL - DESTINATIONS
========================================================== */

.destinations-section {
    padding: 115px 0 125px;
    background: var(--white);
}

.destinations-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.destination {
    position: relative;

    height: 450px;

    display: flex;
    align-items: flex-end;

    padding: 30px;

    overflow: hidden;

    border-radius: 21px;

    color: var(--white);

    background-size: cover;
    background-position: center;

    box-shadow: 0 12px 35px rgba(3, 28, 53, 0.10);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.destination::after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        to bottom,
        rgba(3, 28, 53, 0.01) 22%,
        rgba(3, 28, 53, 0.14) 52%,
        rgba(3, 28, 53, 0.94) 100%
    );

    transition: background 0.4s ease;
}

.destination::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background: linear-gradient(
        135deg,
        rgba(212, 154, 36, 0.11),
        transparent 45%
    );

    pointer-events: none;
}

.destination:hover {
    transform: translateY(-10px);
    box-shadow: 0 26px 55px rgba(3, 28, 53, 0.20);
}

.destination:hover::after {
    background: linear-gradient(
        to bottom,
        rgba(3, 28, 53, 0) 22%,
        rgba(3, 28, 53, 0.08) 50%,
        rgba(3, 28, 53, 0.97) 100%
    );
}

.destination-content {
    position: relative;
    z-index: 3;
    width: 100%;
}

.destination-content > span {
    display: inline-block;

    margin-bottom: 5px;

    color: var(--gold-light);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.2px;
}

.destination-content h3 {
    margin: 5px 0 18px;

    color: var(--white);

    font-family: "Playfair Display", serif;
    font-size: 34px;
    line-height: 1.1;
}

.destination-content a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding-bottom: 5px;

    border-bottom: 1px solid rgba(240, 196, 94, 0.70);

    color: var(--white);

    font-size: 11px;
    font-weight: 700;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}

.destination-content a:hover {
    gap: 13px;
    color: var(--gold-light);
}

.canada {
    background-image: url("../images/canada.jpg");
}

.france {
    background-image: url("../images/france.jpg");
}

.turquie {
    background-image: url("../images/turquie.jpg");
}

.chine {
    background-image: url("../images/chine.jpg");
}


/* ==========================================================
   12. ACCUEIL - POURQUOI ESSENTIELLE
========================================================== */

.why-section {
    position: relative;

    padding: 120px 0;

    overflow: hidden;

    color: var(--white);

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(212, 154, 36, 0.10),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #031c35 0%,
            #062b50 55%,
            #083d69 100%
        );
}

.why-section::before {
    content: "";

    position: absolute;

    top: -220px;
    left: -120px;

    width: 420px;
    height: 420px;

    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.why-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1fr 0.92fr;

    align-items: center;

    gap: 90px;
}

.why-content h2 {
    max-width: 650px;

    color: var(--white);

    font-family: "Playfair Display", serif;
    font-size: clamp(40px, 4vw, 58px);
    line-height: 1.08;
}

.why-content h2 span {
    display: block;
    color: var(--gold-light);
}

.why-content > p {
    max-width: 610px;

    margin: 27px 0 45px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 15px;
    line-height: 1.85;
}

.advantages {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 35px;
}

.advantages div {
    padding: 22px 0 24px;

    border-top: 1px solid rgba(255, 255, 255, 0.14);

    transition: padding-left 0.3s ease;
}

.advantages div:hover {
    padding-left: 8px;
}

.advantages strong {
    display: block;

    margin-bottom: 8px;

    color: var(--gold-light);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.advantages p {
    color: var(--white);

    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
}

.why-visual {
    position: relative;

    min-height: 560px;

    overflow: hidden;

    border-radius: 26px;

    background-image:
        linear-gradient(
            to top,
            rgba(3, 28, 53, 0.50),
            rgba(3, 28, 53, 0.02) 60%
        ),
        url("../images/voyage.jpg");

    background-size: cover;
    background-position: center;

    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
}

.why-visual::before {
    content: "";

    position: absolute;
    inset: 14px;

    border: 1px solid rgba(240, 196, 94, 0.45);
    border-radius: 18px;

    pointer-events: none;
}

.experience-card {
    position: absolute;

    left: 30px;
    bottom: 30px;

    width: 195px;

    padding: 25px;

    display: flex;
    flex-direction: column;

    border-radius: 16px;

    color: var(--navy-dark);

    background: linear-gradient(
        135deg,
        var(--gold),
        var(--gold-light)
    );

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.22);
}

.experience-card strong {
    font-family: "Playfair Display", serif;
    font-size: 55px;
    line-height: 0.9;
}

.experience-card span {
    margin-top: 10px;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* ==========================================================
   13. ACCUEIL - PARTENAIRES
========================================================== */

.partners-section {
    padding: 100px 0;
    overflow: hidden;
    background: var(--white);
}

.partners-slider {
    position: relative;

    margin-top: 48px;

    overflow: hidden;

    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );

    mask-image: linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );
}

.partners-track {
    width: max-content;

    display: flex;
    align-items: center;

    animation: partners-scroll 28s linear infinite;
}

.partners-slider:hover .partners-track {
    animation-play-state: paused;
}

.partner {
    width: 220px;
    height: 105px;

    margin: 0 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: var(--white);

    color: #9ca6b1;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;

    box-shadow: 0 5px 20px rgba(3, 28, 53, 0.04);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.partner:hover {
    transform: translateY(-4px);

    border-color: rgba(212, 154, 36, 0.40);

    box-shadow: 0 12px 28px rgba(3, 28, 53, 0.09);
}

.partner img {
    width: auto;
    height: auto;

    max-width: 145px;
    max-height: 60px;

    object-fit: contain;

    filter: grayscale(100%);
    opacity: 0.70;

    transition:
        filter 0.3s ease,
        opacity 0.3s ease,
        transform 0.3s ease;
}

.partner:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.04);
}

@keyframes partners-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


/* ==========================================================
   14. ACCUEIL - CTA
========================================================== */

.cta-section {
    position: relative;

    padding: 75px 0;

    overflow: hidden;

    background: var(--cream);
}

.cta-section::after {
    content: "";

    position: absolute;

    top: -140px;
    right: -120px;

    width: 300px;
    height: 300px;

    border: 1px solid rgba(212, 154, 36, 0.16);
    border-radius: 50%;
}

.cta-content {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;
}

.cta-content > div {
    max-width: 720px;
}

.cta-content span {
    color: var(--gold);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.cta-content h2 {
    margin-top: 7px;

    color: var(--navy);

    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 3.5vw, 44px);
    line-height: 1.15;
}


/* ==========================================================
   15. FOOTER
========================================================== */

.footer {
    padding: 85px 0 25px;

    color: var(--white);

    background: linear-gradient(
        135deg,
        #02182d,
        var(--navy-dark)
    );
}

.footer-grid {
    display: grid;

    grid-template-columns:
        2fr
        1fr
        1fr
        1.5fr;

    gap: 55px;
}

.footer h3 {
    color: var(--white);

    font-family: "Playfair Display", serif;
    font-size: 29px;
    line-height: 1.2;
}

.footer-brand > span {
    display: block;

    margin-top: 5px;

    color: var(--gold);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.footer-brand p {
    max-width: 280px;

    margin-top: 22px;

    color: rgba(255, 255, 255, 0.58);

    line-height: 1.7;
}

.footer h4 {
    margin-bottom: 19px;

    color: var(--gold-light);

    font-size: 14px;
}

.footer a,
.footer p {
    display: block;

    margin: 9px 0;

    color: rgba(255, 255, 255, 0.63);

    font-size: 13px;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.footer a:hover {
    color: var(--white);
    transform: translateX(3px);
}

.whatsapp-link {
    margin-top: 17px !important;
    color: var(--gold-light) !important;
    font-weight: 700;
}

.footer-bottom {
    margin-top: 65px;
    padding-top: 25px;

    display: flex;
    justify-content: space-between;

    gap: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.10);

    color: rgba(255, 255, 255, 0.38);

    font-size: 11px;
}

.footer-email-line {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.footer-email-line strong,
.footer-email-line a {
    margin: 0;
}

/* ==========================================================
   FOOTER FINAL
   Essentielle Entreprise Guinée SARL
========================================================== */

.site-footer {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;

    background: #021b30;
    color: #ffffff;
}


/* ==========================================================
   1. CONTENU PRINCIPAL — DESKTOP
========================================================== */

.footer-main {
    width: min(1340px, calc(100% - 80px));

    margin: 0 auto;
    padding: 30px 0 26px;

    display: grid;

    grid-template-columns:
        260px
        360px
        360px;

    justify-content: space-between;
    align-items: start;

    column-gap: 60px;
}


/* ==========================================================
   2. TITRES
========================================================== */

.footer-main h3 {
    margin: 0 0 13px;
    padding: 0;

    color: #ffffff;

    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}


/* ==========================================================
   3. MARQUE / LOGO
========================================================== */

.footer-brand {
    width: 100%;

    margin: 0;
    padding: 0;
}


.footer-brand-text {
    display: flex;
    flex-direction: column;

    margin: 0;
    padding: 0;

    line-height: 1.2;
}

.footer-brand-text strong {
    margin: 0;
    padding: 0;

    color: #ffffff;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.footer-brand-text span {
    margin: 2px 0 0;
    padding: 0;

    color: rgba(255, 255, 255, 0.65);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.footer-brand > p {
    max-width: 250px;

    margin: 9px 0 0;
    padding: 0;

    color: rgba(255, 255, 255, 0.76);

    font-size: 12px;
    line-height: 1.4;
}


/* ==========================================================
   4. RÉSEAUX SOCIAUX
========================================================== */

.footer-social {
    display: flex;
    align-items: center;

    gap: 7px;

    margin: 12px 0 0;
    padding: 0;
}

.footer-social a {
    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;

    color: #ffffff;

    font-size: 13px;

    text-decoration: none;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.footer-social a:hover {
    color: var(--gold-light);
    border-color: var(--gold-light);

    transform: translateY(-2px);
}


/* ==========================================================
   5. SERVICES — DESKTOP
   2 COLONNES × 3 LIGNES
========================================================== */

.footer-services {
    width: 100%;

    margin: 0;
    padding: 0;
}

.footer-services-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap: 40px;
    row-gap: 8px;

    margin: 0 !important;
    padding: 0 !important;
}

.footer-services-grid a {
    display: block;

    margin: 0 !important;
    padding: 2px 0 !important;

    color: rgba(255, 255, 255, 0.76);

    font-size: 12px;
    line-height: 1.3;

    text-decoration: none;
    white-space: nowrap;

    transition: color 0.2s ease;
}

.footer-services-grid a:hover {
    color: var(--gold-light);
}


/* ==========================================================
   6. CONTACT
========================================================== */

.footer-contact {
    width: 100%;

    margin: 0;
    padding: 0;
}

.footer-contact-grid {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 7px;

    margin: 0;
    padding: 0;
}

.footer-contact-item {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 7px;

    margin: 0 !important;
    padding: 0 !important;
}

.footer-contact-item > i {
    width: 15px;

    flex: 0 0 15px;

    margin: 0;
    padding: 0;

    color: var(--gold-light);

    font-size: 12px;
    text-align: center;
}

.footer-contact-item > div {
    min-width: 0;

    margin: 0;
    padding: 0;
}

.footer-contact-item strong {
    display: inline;

    margin: 0;
    padding: 0;

    color: #ffffff;

    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
}

.footer-contact-item a {
    display: inline;

    margin: 0 !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.76);

    font-size: 11px;
    line-height: 1.3;

    text-decoration: none;

    transition: color 0.2s ease;
}

.footer-contact-item a:hover {
    color: var(--gold-light);
}


/* ==========================================================
   7. E-MAIL SUR LA MÊME LIGNE
========================================================== */

.footer-email-line {
    display: flex;
    align-items: center;

    gap: 4px;

    margin: 0;
    padding: 0;

    white-space: nowrap;
}

.footer-email-line strong,
.footer-email-line a {
    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
   8. BARRE INFÉRIEURE
========================================================== */

.footer-bottom {
    width: 100%;

    margin: 0;
    padding: 0;

    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom-inner {
    width: min(1340px, calc(100% - 80px));

    margin: 0 auto;
    padding: 10px 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.footer-bottom-inner p {
    margin: 0 !important;
    padding: 0;

    color: rgba(255, 255, 255, 0.58);

    font-size: 10px;
    line-height: 1.3;
}

.footer-legal {
    display: flex;
    align-items: center;

    gap: 20px;

    margin: 0;
    padding: 0;
}

.footer-legal a {
    display: inline-block;

    margin: 0 !important;
    padding: 0;

    color: rgba(255, 255, 255, 0.65);

    font-size: 10px;

    text-decoration: none;

    transition: color 0.2s ease;
}

.footer-legal a:hover {
    color: var(--gold-light);
}


/* ==========================================================
   9. WHATSAPP FLOTTANT
========================================================== */

.whatsapp-float {
    position: fixed;

    right: 20px;
    bottom: 20px;

    z-index: 1000;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin: 0;
    padding: 0;

    border-radius: 50%;

    background: #00c96b;
    color: #ffffff;

    font-size: 22px;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);

    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.whatsapp-float span {
    display: none;
}

.whatsapp-float:hover {
    transform: translateY(-2px);

    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}


/* ==========================================================
   10. TABLETTE
========================================================== */

@media (max-width: 1050px) {

    .footer-main {
        width: calc(100% - 50px);

        grid-template-columns:
            220px
            320px
            280px;

        column-gap: 30px;
    }

    .footer-services-grid {
        column-gap: 20px;
    }

    .footer-bottom-inner {
        width: calc(100% - 50px);
    }
}


/* ==========================================================
   11. MOBILE
   VERTICAL + TOUT CENTRÉ + COMPACT
========================================================== */

@media (max-width: 760px) {

    .site-footer {
        text-align: center;
    }


    /* ======================================================
       CONTENEUR
    ====================================================== */

    .footer-main {
        width: calc(100% - 28px);

        margin: 0 auto;
        padding: 26px 0 20px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 18px;

        text-align: center;
    }


    /* ======================================================
       MARQUE
    ====================================================== */

    .footer-brand {
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        margin: 0 auto;
        padding: 0;

        text-align: center;
    }


/* Le nouveau logo contient déjà le nom de l'entreprise */

.footer-brand-text {
    display: none !important;
}


/* Texte sous le logo */

.footer-brand > p {
    max-width: 280px;

    margin: 8px 0 0;

    text-align: left;
}
    /* ======================================================
       RÉSEAUX SOCIAUX
    ====================================================== */

    .footer-social {
        width: 100%;

        display: flex;
        align-items: center;
        justify-content: center;

        margin: 9px auto 0;
        padding: 0;
    }


    /* ======================================================
       SERVICES
       2 COLONNES × 3 LIGNES
       SANS GROS ESPACEMENT
    ====================================================== */

    .footer-services {
        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;

        text-align: center;
    }

    .footer-services h3 {
        margin: 0 0 6px !important;
        padding: 0;

        text-align: center;
    }

    .footer-services-grid {
        width: 100%;
        max-width: 330px;

        margin: 0 auto !important;
        padding: 0 !important;

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 18px;
        row-gap: 0 !important;

        text-align: center;
    }

    .footer-services-grid a {
        display: block;

        margin: 0 !important;
        padding: 3px 0 !important;

        font-size: 11px;
        line-height: 1.25;

        text-align: center;
        white-space: normal;
    }


    /* ======================================================
       CONTACT
    ====================================================== */

    .footer-contact {
        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;

        text-align: center;
    }

    .footer-contact h3 {
        margin: 0 0 5px !important;
        padding: 0;

        text-align: center;
    }

    .footer-contact-grid {
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 4px;

        margin: 0;
        padding: 0;
    }

    .footer-contact-item {
        width: auto;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 6px;

        margin: 0 auto !important;
        padding: 0 !important;

        text-align: center;
    }

    .footer-contact-item > i {
        width: auto;

        flex: 0 0 auto;

        margin: 0;
        padding: 0;

        text-align: center;
    }

    .footer-contact-item > div {
        width: auto;

        margin: 0;
        padding: 0;

        text-align: center;
    }

    .footer-contact-item strong {
        margin: 0;
        padding: 0;

        text-align: center;
    }


    /* ======================================================
       EMAIL
    ====================================================== */

    .footer-email-line {
        width: auto;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 4px;

        margin: 0 auto;
        padding: 0;

        text-align: center;
        white-space: nowrap;
    }

    .footer-email-line strong,
    .footer-email-line a {
        margin: 0 !important;
        padding: 0 !important;

        text-align: center;
    }


    /* ======================================================
       BARRE INFÉRIEURE — TOUT CENTRÉ
    ====================================================== */

    .footer-bottom {
        width: 100%;

        margin: 0;
        padding: 0;

        text-align: center;
    }

    .footer-bottom-inner {
        width: 100%;

        margin: 0 auto;
        padding: 10px 15px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 5px;

        text-align: center;
    }

    .footer-bottom-inner p {
        width: 100%;

        margin: 0 auto !important;
        padding: 0;

        color: rgba(255, 255, 255, 0.58);

        font-size: 10px;
        line-height: 1.35;

        text-align: center !important;
    }


    /* ======================================================
       CONFIDENTIALITÉ + CONDITIONS
    ====================================================== */

    .footer-legal {
        width: 100%;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 18px;

        margin: 0 auto;
        padding: 0;

        text-align: center;
    }

    .footer-legal a {
        display: inline-block;

        margin: 0 !important;
        padding: 0;

        font-size: 10px;

        text-align: center;
    }


    /* ======================================================
       WHATSAPP
    ====================================================== */

    .whatsapp-float {
        right: 14px;
        bottom: 14px;

        width: 46px;
        height: 46px;
    }
}


/* ==========================================================
   WHATSAPP FLOTTANT
========================================================== */

.whatsapp-float {
    position: fixed;

    right: 20px;
    bottom: 20px;

    z-index: 1000;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin: 0;
    padding: 0;

    border-radius: 50%;

    background: #00c96b;
    color: #ffffff;

    font-size: 22px;

    box-shadow: 0 8px 24px rgba(0,0,0,.20);

    text-decoration: none;
}

.whatsapp-float span {
    display: none;
}


/* ==========================================================
   TABLETTE
========================================================== */

@media (max-width: 1050px) {

    .footer-main {
        width: calc(100% - 50px);

        grid-template-columns: 220px 320px 280px;

        gap: 30px;
    }

    .footer-bottom-inner {
        width: calc(100% - 50px);
    }

    .footer-services-grid {
        column-gap: 20px;
    }
}


/* ==========================================================
   MOBILE
   TOUT VERTICAL + CENTRÉ + COMPACT
========================================================== */

@media (max-width: 760px) {

    .footer-main {
        width: calc(100% - 28px);

        margin: 0 auto;
        padding: 26px 0 20px;

        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 18px;

        text-align: center;
    }


    /* MARQUE */

    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;

        text-align: center;
    }


    .footer-brand-text {
        align-items: center;

        text-align: center;
    }

    .footer-brand > p {
        margin: 6px 0 0;

        text-align: center;
    }

    .footer-social {
        justify-content: center;

        margin-top: 9px;
    }


    /* SERVICES */

    .footer-services {
        width: 100%;

        text-align: center;
    }

    .footer-services h3 {
        margin: 0 0 6px !important;

        text-align: center;
    }

    .footer-services-grid {
        width: 100%;
        max-width: 330px;

        margin: 0 auto !important;

        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));

        column-gap: 18px;

        /* IMPORTANT :
           presque aucun espace vertical */
        row-gap: 0 !important;
    }

    .footer-services-grid a {
        margin: 0 !important;

        /* C'est ici qu'on enlève le gros espace */
        padding: 3px 0 !important;

        font-size: 11px;
        line-height: 1.25;

        text-align: center;

        white-space: normal;
    }


    /* CONTACT */

    .footer-contact {
        width: 100%;

        text-align: center;
    }

    .footer-contact h3 {
        margin: 0 0 5px !important;

        text-align: center;
    }

    .footer-contact-grid {
        width: 100%;

        align-items: center;

        gap: 4px;
    }

    .footer-contact-item {
        width: auto;

        justify-content: center;

        gap: 6px;

        margin: 0 !important;

        text-align: center;
    }

    .footer-contact-item > i {
        width: auto;

        flex-basis: auto;
    }

    .footer-contact-item > div {
        width: auto;
    }

    .footer-email-line {
        justify-content: center;

        gap: 4px;
    }


    /* BAS DU FOOTER */

    .footer-bottom-inner {
        width: calc(100% - 28px);

        padding: 9px 0;

        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 4px;

        text-align: center;
    }

    .footer-bottom-inner p {
        text-align: center;
    }

    .footer-legal {
        justify-content: center;

        gap: 18px;
    }


    /* WHATSAPP */

    .whatsapp-float {
        right: 14px;
        bottom: 14px;

        width: 46px;
        height: 46px;
    }
}


/* ==========================================================
   PETITS MOBILES
========================================================== */

@media (max-width: 420px) {

    .footer-main {
        width: calc(100% - 22px);

        gap: 16px;
    }

    .footer-services-grid {
        max-width: 320px;

        column-gap: 12px;
        row-gap: 0 !important;
    }

    .footer-services-grid a {
        margin: 0 !important;
        padding: 2px 0 !important;

        font-size: 10.5px;
        line-height: 1.2;
    }

    .footer-email-line {
        white-space: normal;
        flex-wrap: wrap;
    }

    .footer-bottom-inner {
        width: calc(100% - 22px);
    }
}

/* ==========================================================
   16. WHATSAPP FLOTTANT
========================================================== */

.whatsapp-float {
    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 2000;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 9px 17px 9px 9px;

    border: 2px solid rgba(255, 255, 255, 0.90);
    border-radius: 50px;

    color: var(--white);
    background: var(--success);

    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.23);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.whatsapp-float:hover {
    transform: translateY(-4px);
    box-shadow: 0 19px 45px rgba(0, 0, 0, 0.29);
}

.whatsapp-icon {
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.17);

    font-size: 20px;
}

.whatsapp-text {
    display: flex;
    flex-direction: column;

    line-height: 1.15;
}

.whatsapp-text small {
    font-size: 9px;
    opacity: 0.85;
}

.whatsapp-text strong {
    margin-top: 3px;
    font-size: 12px;
}


/* ==========================================================
   17. PAGE VOLS - HERO
========================================================== */

.flight-hero {
    position: relative;

    min-height: 430px;

    display: flex;
    align-items: center;

    overflow: hidden;

    color: var(--white);

    background:
        linear-gradient(90deg, rgba(2,24,45,.92) 0%, rgba(3,43,78,.76) 50%, rgba(3,43,78,.42) 100%),
        url("../images/flight-hero.jpg") center center / cover no-repeat;
}


/* AVION DÉCORATIF */

.flight-hero::after {
    content: "✈";

    position: absolute;

    right: 8%;
    top: 46%;

    transform: translateY(-50%) rotate(-12deg);

    color: rgba(255, 255, 255, 0.07);

    font-size: 245px;
    line-height: 1;

    pointer-events: none;
}


/* LIGNES DÉCORATIVES */

.flight-hero::before {
    content: "";

    position: absolute;

    right: -80px;
    top: -170px;

    width: 520px;
    height: 520px;

    border: 1px solid rgba(240, 196, 94, 0.12);
    border-radius: 50%;

    box-shadow:
        0 0 0 80px rgba(255, 255, 255, 0.012),
        0 0 0 160px rgba(255, 255, 255, 0.008);
}

.flight-hero-content {
    position: relative;
    z-index: 2;

    padding-top: 85px;
    padding-bottom: 135px;
}

.flight-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 17px;

    color: var(--gold-light);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.6px;
}

.flight-eyebrow::before {
    content: "";

    width: 28px;
    height: 1px;

    background: var(--gold);
}

.flight-hero h1 {
    max-width: 700px;

    font-family: "Playfair Display", serif;
    font-size: clamp(48px, 6vw, 72px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.8px;
}

.flight-hero h1 span {
    color: var(--gold-light);
}

.flight-hero p {
    max-width: 620px;

    margin-top: 22px;

    color: rgba(255, 255, 255, 0.75);

    font-size: 16px;
    line-height: 1.75;
}


/* ==========================================================
   18. PAGE VOLS - CARTE DE RECHERCHE
========================================================== */

.flight-search-section {
    position: relative;
    z-index: 20;

    margin-top: -88px;

    padding-bottom: 110px;

    background: linear-gradient(
        to bottom,
        transparent 0,
        transparent 88px,
        #ffffff 88px,
        #ffffff 100%
    );
}

.flight-search-card {
    position: relative;

    padding: 38px 40px 40px;

    overflow: hidden;

    border: 1px solid rgba(3, 28, 53, 0.07);
    border-radius: 24px;

    background: var(--white);

    box-shadow: 0 30px 80px rgba(3, 28, 53, 0.17);
}

.flight-search-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background: linear-gradient(
        90deg,
        var(--gold),
        var(--gold-light),
        var(--gold)
    );
}

.flight-search-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 30px;
    padding-bottom: 25px;

    border-bottom: 1px solid #edf0f3;
}

.flight-search-top .section-label {
    margin-bottom: 8px;
}

.flight-search-top h2 {
    color: var(--navy);

    font-family: "Playfair Display", serif;
    font-size: 31px;
    line-height: 1.2;
}

.secure-search {
    flex-shrink: 0;

    padding: 9px 14px;

    border: 1px solid #e4eee8;
    border-radius: 50px;

    color: #3f7158;
    background: #f4faf6;

    font-size: 10px;
    font-weight: 700;
}


/* ==========================================================
   19. PAGE VOLS - TYPE DE TRAJET
========================================================== */

.trip-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 30px;
}

.trip-option {
    position: relative;
}

.trip-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.trip-option span {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 19px;

    border: 1px solid #dde3e8;
    border-radius: 50px;

    color: var(--gray);
    background: var(--white);

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.trip-option span:hover {
    color: var(--navy);
    border-color: #aab7c3;
}

.trip-option.active span,
.trip-option input:checked + span {
    color: var(--white);
    border-color: var(--navy);
    background: var(--navy);
    box-shadow: 0 7px 18px rgba(3, 28, 53, 0.14);
}


/* ==========================================================
   20. PAGE VOLS - DÉPART / DESTINATION
========================================================== */

.flight-route-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        52px
        minmax(0, 1fr);

    align-items: center;

    gap: 14px;

    margin-bottom: 23px;
}

.flight-input-group {
    min-width: 0;
}

.flight-input-group label {
    display: block;

    margin-bottom: 8px;

    color: #586678;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.flight-input-group small {
    display: block;

    min-height: 16px;

    margin-top: 6px;

    color: #9aa4af;

    font-size: 9px;
}

.flight-input {
    min-height: 62px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 0 16px;

    border: 1px solid #dce3e8;
    border-radius: 11px;

    background: #ffffff;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.flight-input:hover {
    border-color: #bdc8d1;
}

.flight-input:focus-within {
    border-color: var(--gold);

    background: #fffefa;

    box-shadow: 0 0 0 4px rgba(212, 154, 36, 0.10);
}

.flight-input > span {
    flex-shrink: 0;

    color: var(--gold);

    font-size: 18px;
}

.flight-input input,
.flight-input select {
    width: 100%;
    min-width: 0;

    border: 0;
    outline: 0;

    color: var(--text);
    background: transparent;

    font-size: 14px;
    font-weight: 500;
}

.flight-input input::placeholder {
    color: #a4adb7;
    font-weight: 400;
}

.flight-input select {
    cursor: pointer;
}

.swap-airports {
    width: 44px;
    height: 44px;

    margin-top: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    justify-self: center;

    border: 1px solid #dce3e8;
    border-radius: 50%;

    color: var(--navy);
    background: var(--white);

    font-size: 19px;

    box-shadow: 0 5px 15px rgba(3, 28, 53, 0.06);

    transition:
        transform 0.35s ease,
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}

.swap-airports:hover {
    color: var(--navy-dark);
    border-color: var(--gold);
    background: var(--gold-light);
    transform: rotate(180deg);
}


/* ==========================================================
   21. PAGE VOLS - DATES / VOYAGEURS / CLASSE
========================================================== */

.flight-details-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 15px;

    margin-top: 22px;
}

.flight-details-grid .flight-input {
    min-height: 58px;
}


/* ENFANTS / BÉBÉS */

.passenger-extras {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;

    gap: 15px;

    margin-top: 25px;
    padding-top: 24px;

    border-top: 1px solid #edf0f2;
}

.passenger-extras > div {
    width: 190px;
}

.passenger-extras label {
    display: block;

    margin-bottom: 7px;

    color: #586678;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.passenger-extras select {
    width: 100%;
    height: 45px;

    padding: 0 12px;

    border: 1px solid #dce3e8;
    border-radius: 9px;

    outline: none;

    color: var(--text);
    background: var(--white);

    cursor: pointer;
}

.passenger-extras select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212, 154, 36, 0.10);
}


/* ==========================================================
   22. PAGE VOLS - BOUTON RECHERCHER
========================================================== */

.flight-search-action {
    margin-top: 31px;
    padding-top: 28px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    border-top: 1px solid #edf0f2;
}

.flight-search-button {
    min-width: 235px;
    min-height: 58px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 0 30px;

    border: 0;
    border-radius: 11px;

    color: var(--navy-dark);

    background: linear-gradient(
        135deg,
        var(--gold),
        var(--gold-light)
    );

    font-size: 13px;
    font-weight: 700;

    box-shadow: 0 13px 28px rgba(212, 154, 36, 0.24);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.flight-search-button span {
    font-size: 17px;
}

.flight-search-button:hover {
    transform: translateY(-3px);

    box-shadow: 0 18px 35px rgba(212, 154, 36, 0.34);
}

.flight-search-action p {
    max-width: 470px;

    color: var(--gray);

    font-size: 10px;
    line-height: 1.65;

    text-align: right;
}


/* ==========================================================
   23. PAGE VOLS - AVANTAGES
========================================================== */

.flight-benefits {
    padding: 105px 0 115px;
    background: var(--cream);
}

.flight-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}

.flight-benefit {
    position: relative;

    min-height: 250px;

    padding: 35px;

    overflow: hidden;

    border: 1px solid #ece8df;
    border-radius: 17px;

    background: var(--white);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.flight-benefit::after {
    content: "";

    position: absolute;

    right: -55px;
    bottom: -65px;

    width: 130px;
    height: 130px;

    border: 1px solid rgba(212, 154, 36, 0.11);
    border-radius: 50%;
}

.flight-benefit:hover {
    transform: translateY(-7px);

    border-color: rgba(212, 154, 36, 0.32);

    box-shadow: var(--shadow-md);
}

.flight-benefit > span {
    color: var(--gold);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.flight-benefit h3 {
    margin: 18px 0 12px;

    color: var(--navy);

    font-family: "Playfair Display", serif;
    font-size: 23px;
}

.flight-benefit p {
    color: var(--gray);

    font-size: 13px;
    line-height: 1.75;
}


/* ==========================================================
   24. PAGE VOLS - ASSISTANCE
========================================================== */

.flight-help {
    position: relative;

    padding: 90px 0;

    overflow: hidden;

    color: var(--white);

    background:
        radial-gradient(
            circle at 90% 50%,
            rgba(212, 154, 36, 0.11),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #031c35,
            #062b50
        );
}

.flight-help::after {
    content: "✈";

    position: absolute;

    right: 5%;
    bottom: -70px;

    color: rgba(255, 255, 255, 0.035);

    font-size: 220px;

    transform: rotate(-15deg);
}

.flight-help-content {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 50px;
}

.flight-help-content > div {
    max-width: 720px;
}

.flight-help-content span {
    color: var(--gold-light);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.flight-help-content h2 {
    margin-top: 9px;

    font-family: "Playfair Display", serif;
    font-size: clamp(30px, 4vw, 43px);
    line-height: 1.15;
}

.flight-help-content p {
    max-width: 600px;

    margin-top: 15px;

    color: rgba(255, 255, 255, 0.66);

    font-size: 14px;
    line-height: 1.75;
}


/* ==========================================================
   25. TABLETTE / LAPTOP
========================================================== */

@media (max-width: 1100px) {

    /* NAV */

    .nav-menu {
        display: none;

        position: absolute;

        top: 88px;
        left: 0;
        right: 0;

        padding: 24px 5%;

        flex-direction: column;
        align-items: flex-start;

        gap: 8px;

        border-top: 1px solid var(--border);

        background: var(--white);

        box-shadow: 0 20px 35px rgba(3, 28, 53, 0.12);
    }

    .nav-menu.show {
        display: flex;
    }

    .nav-menu a {
        width: 100%;
    }

    .menu-toggle {
        display: block;
    }


    /* ACCUEIL SEARCH */

    .search-fields {
        grid-template-columns: repeat(2, 1fr);
    }

    .search-button {
        width: 100%;
    }


    /* SERVICES */

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* DESTINATIONS */

    .destinations-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .destination {
        height: 430px;
    }


    /* WHY */

    .why-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .why-visual {
        min-height: 520px;
    }


    /* FOOTER */

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* VOLS */

    .flight-details-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ==========================================================
   26. TABLETTE
========================================================== */

@media (max-width: 900px) {

    .section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

    .flight-benefits-grid {
        grid-template-columns: 1fr;
    }

    .flight-benefit {
        min-height: auto;
    }

    .flight-search-action {
        align-items: flex-start;
        flex-direction: column;
    }

    .flight-search-action p {
        text-align: left;
    }
}


/* ==========================================================
   27. MOBILE
========================================================== */

@media (max-width: 700px) {

    .container {
        width: 92%;
    }


    /* TOP BAR */

    .top-bar {
        display: none;
    }


    /* HEADER */

    .navbar {
        min-height: 76px;
    }

    .brand img {
        width: 57px;
        height: 57px;
    }

    .brand-text strong {
        font-size: 18px;
    }

    .brand-text span {
        font-size: 7px;
    }

    .nav-menu {
        top: 76px;
    }


    /* ACCUEIL HERO */

    .hero {
        min-height: 620px;
        background-position: 63% center;
    }

    .hero-content {
        padding-top: 75px;
        padding-bottom: 130px;
    }

    .hero-badge {
        font-size: 10px;
    }

    .hero h1 {
        max-width: 500px;
        font-size: clamp(43px, 13vw, 58px);
    }

    .hero p {
        max-width: 500px;
        font-size: 15px;
    }

    .hero-buttons {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
    }


    /* ACCUEIL SEARCH */

    .search-wrapper {
        margin-top: -65px;
    }

    .search-box {
        padding: 20px;
    }

    .search-fields {
        grid-template-columns: 1fr;
    }


    /* INTRO */

    .intro-section {
        padding: 115px 0 75px;
    }


    /* SERVICES */

    .services-section {
        padding: 80px 0;
    }

    .section-heading {
        margin-bottom: 38px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        min-height: auto;
    }


    /* DESTINATIONS */

    .destinations-section {
        padding: 85px 0;
    }

    .center-heading {
        margin-bottom: 40px;
    }

    .destinations-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .destination {
        height: 400px;
    }

    .destination-content h3 {
        font-size: 32px;
    }


    /* WHY */

    .why-section {
        padding: 85px 0;
    }

    .advantages {
        grid-template-columns: 1fr;
    }

    .why-visual {
        min-height: 440px;
    }

    .experience-card {
        left: 20px;
        bottom: 20px;

        width: 170px;

        padding: 20px;
    }

    .experience-card strong {
        font-size: 48px;
    }


    /* PARTENAIRES */

    .partners-section {
        padding: 75px 0;
    }

    .partner {
        width: 180px;
        height: 90px;
    }


    /* CTA */

    .cta-section {
        padding: 60px 0;
    }

    .cta-content {
        align-items: flex-start;
        flex-direction: column;
    }


    /* FOOTER */

    .footer {
        padding-top: 70px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .footer-bottom {
        margin-top: 45px;

        flex-direction: column;

        gap: 8px;
    }


    /* WHATSAPP */

    .whatsapp-float {
        right: 15px;
        bottom: 15px;

        padding: 7px;
    }

    .whatsapp-text {
        display: none;
    }

    .whatsapp-icon {
        width: 46px;
        height: 46px;
    }


    /* ==============================================
       PAGE VOLS MOBILE
    ============================================== */

    .flight-hero {
        min-height: 370px;
    }

    .flight-hero::after {
        right: -40px;
        font-size: 165px;
    }

    .flight-hero-content {
        padding-top: 65px;
        padding-bottom: 115px;
    }

    .flight-hero h1 {
        font-size: clamp(43px, 12vw, 57px);
    }

    .flight-hero p {
        font-size: 14px;
    }

    .flight-search-section {
        margin-top: -65px;
    }

    .flight-search-card {
        padding: 25px 20px 27px;
        border-radius: 19px;
    }

    .flight-search-top {
        align-items: flex-start;
        flex-direction: column;

        gap: 15px;
    }

    .flight-search-top h2 {
        font-size: 27px;
    }

    .trip-options {
        gap: 7px;
    }

    .trip-option span {
        min-height: 39px;
        padding: 0 14px;
        font-size: 11px;
    }

    .flight-route-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .swap-airports {
        margin: 0 auto;
        transform: rotate(90deg);
    }

    .swap-airports:hover {
        transform: rotate(270deg);
    }

    .flight-details-grid {
        grid-template-columns: 1fr;
    }

    .passenger-extras {
        flex-direction: column;
        align-items: stretch;
    }

    .passenger-extras > div {
        width: 100%;
    }

    .flight-search-action {
        align-items: stretch;
        flex-direction: column;

        gap: 15px;
    }

    .flight-search-button {
        width: 100%;
    }

    .flight-search-action p {
        text-align: left;
    }

    .flight-benefits {
        padding: 80px 0;
    }

    .flight-help {
        padding: 75px 0;
    }

    .flight-help-content {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==========================================================
   AUTOCOMPLÉTION DES AÉROPORTS
========================================================== */

.airport-field {
    position: relative;
}


/* LISTE */

.airport-suggestions {

    position: absolute;

    top: calc(100% - 18px);
    left: 0;
    right: 0;

    z-index: 100;

    display: none;

    max-height: 340px;

    overflow-y: auto;

    border: 1px solid #e1e6ea;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 20px 50px rgba(3, 28, 53, .16);
}


/* QUAND LA LISTE EST OUVERTE */

.airport-suggestions.show {
    display: block;
}


/* UNE PROPOSITION */

.airport-option {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 14px 16px;

    border-bottom: 1px solid #f0f2f4;

    cursor: pointer;

    transition:
        background .2s ease,
        padding-left .2s ease;
}


.airport-option:last-child {
    border-bottom: none;
}


.airport-option:hover {
    padding-left: 20px;

    background: #faf8f3;
}


/* GAUCHE */

.airport-option-main {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 12px;
}


.airport-option-icon {

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #d49a24;

    background: rgba(212,154,36,.10);

    font-size: 15px;
}


.airport-option-text {
    min-width: 0;
}


.airport-option-city {

    display: block;

    color: #062b50;

    font-size: 13px;
    font-weight: 700;
}


.airport-option-name {

    display: block;

    margin-top: 2px;

    overflow: hidden;

    color: #7c8794;

    font-size: 10px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* CODE AÉROPORT */

.airport-code {

    flex-shrink: 0;

    padding: 7px 10px;

    border-radius: 7px;

    color: #062b50;

    background: #f2f5f7;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1px;
}


/* AUCUN RÉSULTAT */

.airport-empty {

    padding: 17px;

    color: #697586;

    font-size: 11px;

    text-align: center;
}


/* MOBILE */

@media (max-width: 700px) {

    .airport-suggestions {
        max-height: 280px;
    }

    .airport-option {
        padding: 12px;
    }

    .airport-option-name {
        max-width: 190px;
    }
}
/* ==========================================================
   SÉLECTEUR DE VOYAGEURS - ESSENTIELLE
========================================================== */

.passenger-field {
    position: relative;
}


/* BOUTON PRINCIPAL */

.passenger-selector {
    width: 100%;
    height: 53px;
    padding: 0 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border: 1px solid #d7e0e7;
    border-radius: 11px;

    background: #ffffff;
    color: #172334;

    font-family: "DM Sans", sans-serif;
    font-size: 13px;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.passenger-selector:hover {
    border-color: #d49a24;
}


.passenger-selector.open {
    border-color: #d49a24;

    box-shadow:
        0 0 0 3px rgba(212, 154, 36, 0.10);
}


.passenger-selector-left {
    display: flex;
    align-items: center;
    gap: 11px;
}


.passenger-icon {
    color: #d49a24;
    font-size: 16px;
}


.passenger-arrow {
    color: #062b50;
    font-size: 12px;

    transition: transform 0.2s ease;
}


.passenger-selector.open .passenger-arrow {
    transform: rotate(180deg);
}



/* ==========================================================
   MENU DÉROULANT
========================================================== */

.passenger-dropdown {
    position: absolute;

    top: calc(100% + 8px);
    left: 0;

    width: 330px;

    z-index: 500;

    display: none;

    padding: 8px 18px 14px;

    background: #ffffff;

    border: 1px solid #e1e7ec;
    border-radius: 15px;

    box-shadow:
        0 20px 45px rgba(3, 28, 53, 0.16);
}


.passenger-dropdown.show {
    display: block;
}



/* ==========================================================
   LIGNES ADULTES / ENFANTS / BÉBÉS
========================================================== */

.passenger-row {
    min-height: 78px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    border-bottom: 1px solid #edf0f2;
}


.passenger-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.passenger-info strong {
    color: #062b50;

    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 700;
}


.passenger-info span {
    color: #7b8794;

    font-family: "DM Sans", sans-serif;
    font-size: 10px;
}



/* ==========================================================
   COMPTEURS + / -
========================================================== */

.passenger-counter {
    display: flex;
    align-items: center;
    gap: 11px;
}


.passenger-counter > span {
    width: 20px;

    color: #062b50;

    font-size: 13px;
    font-weight: 700;

    text-align: center;
}


.counter-btn {
    width: 31px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid #d7e0e7;
    border-radius: 50%;

    background: #ffffff;

    color: #062b50;

    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.counter-btn:hover {
    background: #062b50;
    border-color: #062b50;
    color: #ffffff;

    transform: scale(1.05);
}


.counter-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}



/* ==========================================================
   BAS DU MENU
========================================================== */

.passenger-dropdown-footer {
    padding-top: 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}


.passenger-dropdown-footer > span {
    color: #8a949f;
    font-size: 9px;
}


#passengerDone {
    padding: 9px 17px;

    border: none;
    border-radius: 8px;

    background: #062b50;
    color: #ffffff;

    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


#passengerDone:hover {
    background: #d49a24;
    transform: translateY(-1px);
}



/* ==========================================================
   LES INPUTS CACHÉS NE DOIVENT JAMAIS PRENDRE DE PLACE
========================================================== */

.passenger-field input[type="hidden"] {
    display: none !important;
}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 700px) {

    .passenger-dropdown {
        width: 100%;
        min-width: 290px;
    }

}
/* ==========================================================
   28. TRÈS PETITS TÉLÉPHONES
========================================================== */

@media (max-width: 480px) {

    .brand-text {
        display: none;
    }

    .hero {
        min-height: 590px;
    }

    .hero h1 {
        font-size: 42px;
    }

    .hero p {
        font-size: 14px;
    }

    .search-tabs {
        margin-left: -5px;
        margin-right: -5px;
    }

    .search-tab {
        padding-left: 13px;
        padding-right: 13px;
    }

    .intro h2,
    .section-heading h2,
    .center-heading h2,
    .why-content h2 {
        font-size: 36px;
    }

    .destination {
        height: 370px;
        padding: 25px;
    }

    .flight-hero h1 {
        font-size: 42px;
    }

    .flight-search-card {
        padding-left: 17px;
        padding-right: 17px;
    }

    .trip-options {
        align-items: stretch;
        flex-direction: column;
    }

    .trip-option span {
        width: 100%;
    }
}

/* ==========================================================
   29. MISE À JOUR - VOLS.HTML ACTUEL
   Compatibilité avec les nouvelles classes du formulaire
========================================================== */

.flight-search-heading{
    display:flex;align-items:center;justify-content:space-between;gap:30px;
    margin-bottom:30px;padding-bottom:25px;border-bottom:1px solid #edf0f3;
}
.flight-search-heading .section-kicker{
    display:inline-block;margin-bottom:8px;color:var(--gold);
    font-size:10px;font-weight:700;letter-spacing:2.2px;
}
.flight-search-heading h2{
    color:var(--navy);font-family:"Playfair Display",serif;
    font-size:31px;line-height:1.2;
}
.flight-search-status{
    flex-shrink:0;padding:9px 14px;border:1px solid #e4eee8;border-radius:50px;
    color:#3f7158;background:#f4faf6;font-size:10px;font-weight:700;
}

.flight-route-row{
    display:grid;grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);
    align-items:end;gap:14px;margin-bottom:23px;
}
.flight-field{min-width:0}
.flight-field>label{
    display:block;margin-bottom:8px;color:#586678;font-size:10px;
    font-weight:700;letter-spacing:.9px;text-transform:uppercase;
}
.flight-field>small{
    display:block;min-height:16px;margin-top:6px;color:#9aa4af;font-size:9px;
}
.input-icon-wrap{
    position:relative;min-height:58px;display:flex;align-items:center;
    border:1px solid #dce3e8;border-radius:11px;background:#fff;
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.input-icon-wrap:hover{border-color:#bdc8d1}
.input-icon-wrap:focus-within{
    border-color:var(--gold);background:#fffefa;
    box-shadow:0 0 0 4px rgba(212,154,36,.10);
}
.field-icon{
    position:absolute;left:16px;top:50%;z-index:2;transform:translateY(-50%);
    color:var(--gold);font-size:16px;pointer-events:none;
}
.input-icon-wrap input,.input-icon-wrap select{
    width:100%;min-width:0;height:58px;padding:0 16px 0 43px;border:0;outline:0;
    border-radius:11px;color:var(--text);background:transparent;
    font-size:14px;font-weight:500;
}
.input-icon-wrap input::placeholder{color:#a4adb7;font-weight:400}
.input-icon-wrap select{cursor:pointer}
.flight-route-row .swap-airports{margin-top:0;margin-bottom:22px}

.flight-details-row{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:15px;margin-top:22px;align-items:start;
}
.flight-details-row .input-icon-wrap,
.flight-details-row .passenger-selector{min-height:58px;height:58px}

.passenger-field{position:relative}
.passenger-selector{
    width:100%;height:58px;padding:0 16px;display:flex;align-items:center;
    justify-content:space-between;border:1px solid #dce3e8;border-radius:11px;
    background:#fff;color:var(--text);font-family:"DM Sans",sans-serif;
    font-size:13px;cursor:pointer;
}
.passenger-selector:hover,.passenger-selector.open{border-color:var(--gold)}
.passenger-selector.open{box-shadow:0 0 0 4px rgba(212,154,36,.10)}
.passenger-selector-left{display:flex;align-items:center;gap:11px}
.passenger-icon{color:var(--gold);font-size:16px}
.passenger-arrow{color:var(--navy);font-size:12px;transition:transform .2s ease}
.passenger-selector.open .passenger-arrow{transform:rotate(180deg)}
.passenger-dropdown{
    position:absolute;top:calc(100% + 8px);left:0;z-index:9999;display:none;
    width:330px;padding:8px 18px 14px;border:1px solid #e1e7ec;
    border-radius:15px;background:#fff;box-shadow:0 20px 45px rgba(3,28,53,.16);
}
.passenger-dropdown.show{display:block}
.passenger-row{
    min-height:78px;display:flex;align-items:center;justify-content:space-between;
    gap:20px;border-bottom:1px solid #edf0f2;
}
.passenger-info{display:flex;flex-direction:column;gap:3px}
.passenger-info strong{color:var(--navy);font-size:13px;font-weight:700}
.passenger-info span{color:#7b8794;font-size:10px}
.passenger-counter{display:flex;align-items:center;gap:11px}
.passenger-counter>span{width:20px;color:var(--navy);font-size:13px;font-weight:700;text-align:center}
.counter-btn{
    width:31px;height:31px;display:flex;align-items:center;justify-content:center;
    padding:0;border:1px solid #d7e0e7;border-radius:50%;background:#fff;
    color:var(--navy);font-size:18px;line-height:1;cursor:pointer;
}
.counter-btn:hover{border-color:var(--navy);background:var(--navy);color:#fff}
.counter-btn:disabled{opacity:.35;cursor:not-allowed}
.passenger-dropdown-footer{
    padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:15px;
}
.passenger-dropdown-footer>span{color:#8a949f;font-size:9px}
#passengerDone{
    padding:9px 17px;border:0;border-radius:8px;background:var(--navy);
    color:#fff;font-size:10px;font-weight:700;cursor:pointer;
}
#passengerDone:hover{background:var(--gold)}
.passenger-field input[type="hidden"]{display:none!important}

.flight-search-note{
    max-width:470px;margin:0;color:var(--gray);font-size:10px;
    line-height:1.65;text-align:right;
}

/* Sections inférieures du nouveau HTML */
.section-heading.centered{
    display:block;max-width:760px;margin:0 auto 55px;text-align:center;
}
.section-heading.centered .section-kicker{
    display:inline-block;margin-bottom:15px;color:var(--gold);
    font-size:10px;font-weight:700;letter-spacing:2.2px;
}
.section-heading.centered h2{
    color:var(--navy);font-family:"Playfair Display",serif;
    font-size:clamp(38px,4vw,55px);line-height:1.12;
}
.section-heading.centered p{
    max-width:650px;margin:18px auto 0;color:var(--gray);font-size:14px;
}
.flight-benefit-card{
    position:relative;min-height:250px;padding:35px;overflow:hidden;
    border:1px solid #ece8df;border-radius:17px;background:var(--white);
    transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.flight-benefit-card:hover{
    transform:translateY(-7px);border-color:rgba(212,154,36,.32);box-shadow:var(--shadow-md);
}
.flight-benefit-icon{
    width:52px;height:52px;display:flex;align-items:center;justify-content:center;
    margin-bottom:22px;border-radius:50%;color:var(--gold);
    background:rgba(212,154,36,.11);font-size:20px;
}
.flight-benefit-card h3{
    margin-bottom:12px;color:var(--navy);font-family:"Playfair Display",serif;font-size:23px;
}
.flight-benefit-card p{color:var(--gray);font-size:13px;line-height:1.75}
.flight-help-inner{
    position:relative;z-index:2;display:flex;align-items:center;
    justify-content:space-between;gap:50px;
}
.flight-help-inner>div{max-width:720px}
.flight-help-inner .section-kicker{color:var(--gold-light);font-size:10px;font-weight:700;letter-spacing:2px}
.flight-help-inner h2{margin-top:9px;font-family:"Playfair Display",serif;font-size:clamp(30px,4vw,43px);line-height:1.15}
.flight-help-inner p{max-width:600px;margin-top:15px;color:rgba(255,255,255,.66);font-size:14px;line-height:1.75}

/* Header du nouveau vols.html */
.main-nav{display:flex;align-items:center;gap:25px;font-size:13px;font-weight:600}
.main-nav>a:not(.btn){position:relative;padding:11px 0;color:#253244}
.main-nav>a.active:not(.btn),.main-nav>a:not(.btn):hover{color:var(--gold)}


@media(max-width:1100px){
    .main-nav{
        display:none;position:absolute;top:88px;left:0;right:0;padding:24px 5%;
        flex-direction:column;align-items:flex-start;gap:8px;border-top:1px solid var(--border);
        background:#fff;box-shadow:0 20px 35px rgba(3,28,53,.12);
    }
    .main-nav.show{display:flex}
    .main-nav a{width:100%}
    .flight-details-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
    .flight-search-heading{align-items:flex-start;flex-direction:column;gap:15px}
    .flight-help-inner{align-items:flex-start;flex-direction:column}
}
@media(max-width:700px){
    .topbar{display:none}
    .header-inner{min-height:76px}
    .brand-logo{width:57px;height:57px}
    .main-nav{top:76px}
    .flight-route-row{grid-template-columns:1fr;gap:8px}
    .flight-route-row .swap-airports{margin:0 auto;transform:rotate(90deg)}
    .flight-route-row .swap-airports:hover{transform:rotate(270deg)}
    .flight-details-row{grid-template-columns:1fr}
    .passenger-dropdown{width:100%;min-width:290px}
    .flight-search-note{max-width:none;text-align:left}
    .site-footer .footer-grid{grid-template-columns:1fr;gap:38px}
}
/* ==========================================================
   CORRECTION AFFICHAGE MENU VOYAGEURS
========================================================== */

.flight-search-card {
    overflow: visible !important;
}

.flight-search-section {
    overflow: visible !important;
}

.passenger-field {
    position: relative;
    z-index: 50;
}

.passenger-dropdown {
    z-index: 9999 !important;
}

/* Laisse de l'espace au menu lorsqu'il est ouvert */
.flight-search-card:has(.passenger-dropdown.show) {
    padding-bottom: 230px;
}
/* ==========================================================
   30. PAGE HÔTELS
   ESSENTIELLE ENTREPRISE GUINÉE SARL
========================================================== */


/* ==========================================================
   HERO HÔTELS
========================================================== */

.hotel-hero {
    position: relative;
    min-height: 380px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(2,24,45,.92) 0%, rgba(3,43,78,.74) 50%, rgba(3,43,78,.40) 100%),
        url("../images/hotel-hero.jpg") center center / cover no-repeat;
}

.hotel-hero::before {
    content: "\f594";
    position: absolute;
    right: 9%;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 210px;
    color: rgba(255, 255, 255, 0.045);
    pointer-events: none;
}

.hotel-hero::after {
    content: "";
    position: absolute;
    right: -100px;
    bottom: -180px;
    width: 470px;
    height: 470px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}

.hotel-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 75px;
}

.hotel-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
    color: var(--gold-light);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.hotel-eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--gold);
}

.hotel-hero h1 {
    max-width: 720px;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: clamp(48px, 5vw, 72px);
    line-height: 1.03;
}

.hotel-hero h1 span {
    color: var(--gold-light);
}

.hotel-hero p {
    max-width: 620px;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 14px;
    line-height: 1.75;
}


/* ==========================================================
   SECTION RECHERCHE
========================================================== */

.hotel-search-section {
    position: relative;
    z-index: 20;
    margin-top: -78px;
    padding-bottom: 85px;
    overflow: visible;
}

.hotel-search-card {
    position: relative;
    overflow: visible;
    padding: 34px 38px 38px;
    border: 1px solid rgba(3, 28, 53, 0.07);
    border-radius: 19px;
    background: #ffffff;
    box-shadow: 0 25px 65px rgba(3, 28, 53, 0.14);
}


/* ==========================================================
   TITRE DU MOTEUR
========================================================== */

.hotel-search-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 29px;
    padding-bottom: 24px;
    border-bottom: 1px solid #edf0f3;
}

.hotel-search-heading .section-kicker {
    display: inline-block;
    margin-bottom: 7px;
    color: var(--gold);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.hotel-search-heading h2 {
    color: var(--navy);
    font-family: "Playfair Display", serif;
    font-size: 30px;
    line-height: 1.2;
}

.hotel-search-status {
    flex-shrink: 0;
    padding: 9px 14px;
    border: 1px solid #e3eee7;
    border-radius: 50px;
    color: #417158;
    background: #f5faf6;
    font-size: 10px;
    font-weight: 700;
}

.hotel-search-status i {
    margin-right: 5px;
}


/* ==========================================================
   CHAMPS GÉNÉRAUX
========================================================== */

.hotel-field {
    min-width: 0;
}

.hotel-field > label {
    display: block;
    margin-bottom: 8px;
    color: #586678;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.9px;
}

.hotel-field > small {
    display: block;
    min-height: 16px;
    margin-top: 6px;
    color: #9aa4af;
    font-size: 9px;
}

.hotel-input-wrap {
    position: relative;
    min-height: 58px;
    display: flex;
    align-items: center;
    border: 1px solid #dce3e8;
    border-radius: 11px;
    background: #ffffff;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.hotel-input-wrap:hover {
    border-color: #bdc8d1;
}

.hotel-input-wrap:focus-within {
    border-color: var(--gold);
    background: #fffefa;
    box-shadow: 0 0 0 4px rgba(212, 154, 36, 0.10);
}

.hotel-field-icon {
    position: absolute;
    left: 17px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    color: var(--gold);
    font-size: 15px;
    pointer-events: none;
}

.hotel-input-wrap input {
    width: 100%;
    min-width: 0;
    height: 58px;
    padding: 0 17px 0 45px;
    border: 0;
    outline: 0;
    border-radius: 11px;
    color: var(--text);
    background: transparent;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.hotel-input-wrap input::placeholder {
    color: #a4adb7;
    font-weight: 400;
}


/* ==========================================================
   DESTINATION
========================================================== */

.hotel-destination-row {
    width: 100%;
}

.hotel-destination-field {
    position: relative;
    width: 100%;
}

.hotel-destination-field .hotel-input-wrap {
    width: 100%;
}


/* Suggestions futures */

.hotel-suggestions {
    position: absolute;
    top: calc(100% - 13px);
    left: 0;
    right: 0;
    z-index: 5000;
    display: none;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #e1e6ea;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(3, 28, 53, 0.16);
}

.hotel-suggestions.show {
    display: block;
}


/* ==========================================================
   DATES + CHAMBRES/VOYAGEURS
========================================================== */

.hotel-details-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1.5fr);
    gap: 15px;
    align-items: start;
    margin-top: 23px;
}


/* ==========================================================
   CHAMBRES & VOYAGEURS
========================================================== */

.hotel-guests-field {
    position: relative;
    z-index: 50;
}

.hotel-guests-selector {
    width: 100%;
    height: 58px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #dce3e8;
    border-radius: 11px;
    outline: none;
    background: #ffffff;
    color: var(--text);
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.hotel-guests-selector:hover,
.hotel-guests-selector.open {
    border-color: var(--gold);
}

.hotel-guests-selector.open {
    box-shadow: 0 0 0 4px rgba(212, 154, 36, 0.10);
}

.hotel-guests-selector-left {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.hotel-guests-icon {
    flex-shrink: 0;
    color: var(--gold);
    font-size: 14px;
}

#hotelGuestsSummary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hotel-guests-arrow {
    flex-shrink: 0;
    margin-left: 10px;
    color: var(--navy);
    font-size: 10px;
    transition: transform 0.2s ease;
}

.hotel-guests-selector.open .hotel-guests-arrow {
    transform: rotate(180deg);
}


/* ==========================================================
   MENU CHAMBRES & VOYAGEURS
========================================================== */

.hotel-guests-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 9999;
    display: none;
    width: 355px;
    padding: 8px 19px 15px;
    border: 1px solid #e1e7ec;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 20px 45px rgba(3, 28, 53, 0.17);
}

.hotel-guests-dropdown.show {
    display: block;
}

.hotel-guest-row {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid #edf0f2;
}

.hotel-guest-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hotel-guest-info strong {
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;
}

.hotel-guest-info span {
    color: #7b8794;
    font-size: 10px;
}

.hotel-guest-counter {
    display: flex;
    align-items: center;
    gap: 11px;
}

.hotel-guest-counter > span {
    width: 20px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.hotel-counter-btn {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #d7e0e7;
    border-radius: 50%;
    background: #ffffff;
    color: var(--navy);
    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.hotel-counter-btn:hover {
    border-color: var(--navy);
    background: var(--navy);
    color: #ffffff;
    transform: scale(1.05);
}

.hotel-counter-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}


/* Footer du menu */

.hotel-guests-footer {
    padding-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.hotel-guests-footer > span {
    max-width: 190px;
    color: #8a949f;
    font-size: 9px;
    line-height: 1.45;
}

#hotelGuestsDone {
    flex-shrink: 0;
    padding: 9px 17px;
    border: 0;
    border-radius: 8px;
    background: var(--navy);
    color: #ffffff;
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

#hotelGuestsDone:hover {
    background: var(--gold);
    transform: translateY(-1px);
}

.hotel-guests-field input[type="hidden"] {
    display: none !important;
}


/* Lorsque le menu est ouvert, donner de la place */

.hotel-search-card:has(.hotel-guests-dropdown.show) {
    padding-bottom: 250px;
}


/* ==========================================================
   ACTION DE RECHERCHE
========================================================== */

.hotel-search-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 27px;
    padding-top: 24px;
    border-top: 1px solid #edf0f3;
}

.hotel-search-button {
    min-width: 245px;
    min-height: 53px;
    padding: 0 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 10px;
    color: var(--navy-dark);
    background: linear-gradient(
        135deg,
        var(--gold),
        var(--gold-light)
    );
    box-shadow: 0 11px 24px rgba(212, 154, 36, 0.21);
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.hotel-search-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(212, 154, 36, 0.27);
}

.hotel-search-note {
    max-width: 470px;
    margin: 0;
    color: var(--gray);
    font-size: 10px;
    line-height: 1.65;
    text-align: right;
}


/* ==========================================================
   DESTINATIONS HÔTELS
========================================================== */

.hotel-destinations {
    padding: 95px 0;
    background: var(--cream);
}

.hotel-destination-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.hotel-destination-card {
    overflow: hidden;
    border: 1px solid #e9e5dc;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(3, 28, 53, 0.05);
    cursor: pointer;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.hotel-destination-card:hover {
    transform: translateY(-7px);
    border-color: rgba(212, 154, 36, 0.35);
    box-shadow: 0 18px 38px rgba(3, 28, 53, 0.12);
}

.hotel-destination-image,
.hotel-destination-placeholder {
    height: 185px;
    overflow: hidden;
}

.hotel-destination-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.hotel-destination-card:hover
.hotel-destination-image img {
    transform: scale(1.06);
}

.hotel-destination-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(240, 196, 94, 0.22),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--navy-dark),
            var(--navy-light)
        );
    font-size: 52px;
}

.hotel-destination-content {
    padding: 24px 23px 27px;
}

.hotel-destination-content > span {
    color: var(--gold);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.hotel-destination-content h3 {
    margin-top: 6px;
    color: var(--navy);
    font-family: "Playfair Display", serif;
    font-size: 25px;
}

.hotel-destination-content p {
    margin-top: 10px;
    color: var(--gray);
    font-size: 12px;
    line-height: 1.7;
}


/* ==========================================================
   AVANTAGES HÔTELS
========================================================== */

.hotel-benefits {
    padding: 100px 0;
    background: #ffffff;
}

.hotel-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.hotel-benefit-card {
    min-height: 255px;
    padding: 35px;
    border: 1px solid #ece8df;
    border-radius: 17px;
    background: #ffffff;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.hotel-benefit-card:hover {
    transform: translateY(-7px);
    border-color: rgba(212, 154, 36, 0.32);
    box-shadow: var(--shadow-md);
}

.hotel-benefit-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 50%;
    color: var(--gold);
    background: rgba(212, 154, 36, 0.11);
    font-size: 20px;
}

.hotel-benefit-card h3 {
    margin-bottom: 12px;
    color: var(--navy);
    font-family: "Playfair Display", serif;
    font-size: 23px;
}

.hotel-benefit-card p {
    color: var(--gray);
    font-size: 13px;
    line-height: 1.75;
}


/* ==========================================================
   TYPES DE VOYAGES
========================================================== */

.hotel-travel-types {
    padding: 90px 0;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(212, 154, 36, 0.15),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            var(--navy-dark),
            var(--navy)
        );
}

.hotel-travel-types-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: center;
}

.hotel-travel-types .section-kicker {
    color: var(--gold-light);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.hotel-travel-types h2 {
    max-width: 570px;
    margin-top: 10px;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: clamp(35px, 4vw, 48px);
    line-height: 1.1;
}

.hotel-travel-types p {
    max-width: 620px;
    margin-top: 17px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 13px;
    line-height: 1.8;
}

.hotel-travel-types-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.hotel-travel-types-list > div {
    min-height: 70px;
    padding: 15px 17px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.055);
}

.hotel-travel-types-list i {
    width: 28px;
    color: var(--gold-light);
    font-size: 18px;
    text-align: center;
}

.hotel-travel-types-list span {
    font-size: 12px;
    font-weight: 600;
}


/* ==========================================================
   AIDE
========================================================== */

.hotel-help {
    position: relative;
    overflow: hidden;
    padding: 80px 0;
    color: #ffffff;
    background: var(--navy);
}

.hotel-help::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -150px;
    width: 390px;
    height: 390px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}

.hotel-help-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.hotel-help-inner > div {
    max-width: 720px;
}

.hotel-help-inner .section-kicker {
    color: var(--gold-light);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.hotel-help-inner h2 {
    margin-top: 9px;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: clamp(30px, 4vw, 43px);
    line-height: 1.15;
}

.hotel-help-inner p {
    max-width: 600px;
    margin-top: 15px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 14px;
    line-height: 1.75;
}


/* ==========================================================
   RESPONSIVE HÔTELS
========================================================== */

@media (max-width: 1100px) {

    .hotel-destination-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hotel-travel-types-inner {
        gap: 45px;
    }

}


@media (max-width: 900px) {

    .hotel-hero {
        min-height: 350px;
    }

    .hotel-search-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .hotel-details-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hotel-guests-field {
        grid-column: 1 / -1;
    }

    .hotel-benefits-grid {
        grid-template-columns: 1fr;
    }

    .hotel-travel-types-inner {
        grid-template-columns: 1fr;
    }

    .hotel-help-inner {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 700px) {

    .hotel-hero {
        min-height: 330px;
    }

    .hotel-hero-content {
        padding-bottom: 70px;
    }

    .hotel-hero::before {
        right: -30px;
        font-size: 150px;
    }

    .hotel-search-section {
        margin-top: -55px;
        padding-bottom: 65px;
    }

    .hotel-search-card {
        padding: 27px 20px 30px;
        border-radius: 15px;
    }

    .hotel-search-heading h2 {
        font-size: 25px;
    }

    .hotel-details-row {
        grid-template-columns: 1fr;
    }

    .hotel-guests-field {
        grid-column: auto;
    }

    .hotel-guests-dropdown {
        left: 0;
        right: auto;
        width: 100%;
        min-width: 290px;
    }

    .hotel-search-action {
        align-items: stretch;
        flex-direction: column;
    }

    .hotel-search-button {
        width: 100%;
        min-width: 0;
    }

    .hotel-search-note {
        max-width: none;
        text-align: center;
    }

    .hotel-destination-grid {
        grid-template-columns: 1fr;
    }

    .hotel-destination-image,
    .hotel-destination-placeholder {
        height: 220px;
    }

    .hotel-travel-types-list {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 480px) {

    .hotel-hero h1 {
        font-size: 42px;
    }

    .hotel-guests-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .hotel-guests-footer > span {
        max-width: none;
    }

}
/* ==========================================================
   31. PAGE ÉTUDES À L'ÉTRANGER
   ESSENTIELLE ENTREPRISE GUINÉE SARL
========================================================== */


/* ==========================================================
   HERO ÉTUDES
========================================================== */

.study-hero {
    position: relative;
    overflow: hidden;
    min-height: 560px;
    display: flex;
    align-items: center;
    color: #ffffff;
    background:
        linear-gradient(90deg, rgba(2,24,45,.94) 0%, rgba(3,43,78,.78) 52%, rgba(3,43,78,.43) 100%),
        url("../images/study-hero.jpg") center center / cover no-repeat;
}

.study-hero::before {
    content: "";
    position: absolute;
    right: -130px;
    top: -170px;
    width: 560px;
    height: 560px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
}

.study-hero::after {
    content: "";
    position: absolute;
    right: 80px;
    bottom: -230px;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(212, 154, 36, 0.10);
    border-radius: 50%;
}

.study-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 80px;
    align-items: center;
}

.study-hero-content {
    padding: 90px 0;
}

.study-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color: var(--gold-light);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.study-eyebrow::before {
    content: "";
    width: 34px;
    height: 1px;
    background: var(--gold);
}

.study-hero h1 {
    max-width: 720px;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: clamp(50px, 6vw, 76px);
    line-height: 1.02;
}

.study-hero h1 span {
    display: block;
    color: var(--gold-light);
}

.study-hero-content > p {
    max-width: 620px;
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    line-height: 1.8;
}

.study-hero-actions {
    margin-top: 32px;
    display: flex;
    align-items: center;
    gap: 27px;
}

.study-hero-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.study-secondary-link {
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.study-secondary-link:hover {
    color: var(--gold-light);
}


/* ==========================================================
   VISUEL HERO
========================================================== */

.study-hero-visual {
    position: relative;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.study-hero-visual::before {
    content: "\f19d";
    position: absolute;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 290px;
    color: rgba(255, 255, 255, 0.035);
}

.study-hero-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 355px;
    padding: 40px 35px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 23px;
    background: rgba(255, 255, 255, 0.075);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.17);
    backdrop-filter: blur(12px);
}

.study-hero-icon {
    width: 66px;
    height: 66px;
    margin-bottom: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: var(--navy-dark);
    background: linear-gradient(
        135deg,
        var(--gold),
        var(--gold-light)
    );
    font-size: 27px;
}

.study-hero-card > span {
    display: block;
    margin-bottom: 8px;
    color: var(--gold-light);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.study-hero-card > strong {
    display: block;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: 27px;
    line-height: 1.2;
}

.study-hero-card > p {
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
}


/* ==========================================================
   INTRODUCTION
========================================================== */

.study-intro {
    padding: 95px 0 55px;
    background: var(--cream);
}


/* ==========================================================
   DESTINATIONS ÉTUDES
========================================================== */

.study-destinations {
    padding: 20px 0 110px;
    background: var(--cream);
}

.study-country-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 23px;
}

.study-country-card {
    overflow: hidden;
    border: 1px solid #e7e3da;
    border-radius: 19px;
    background: #ffffff;
    box-shadow: 0 9px 28px rgba(3, 28, 53, 0.055);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.study-country-card:hover {
    transform: translateY(-8px);
    border-color: rgba(212, 154, 36, 0.42);
    box-shadow: 0 22px 45px rgba(3, 28, 53, 0.13);
}

.study-country-image {
    position: relative;
    height: 210px;
    overflow: hidden;
}

.study-country-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.study-country-card:hover
.study-country-image img {
    transform: scale(1.07);
}

.study-country-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 20px;
    background:
        linear-gradient(
            to top,
            rgba(3, 28, 53, 0.78),
            transparent 65%
        );
}

.study-country-overlay span {
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.study-country-content {
    position: relative;
    padding: 30px 24px 27px;
}

.study-country-flag {
    position: absolute;
    top: -25px;
    right: 21px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #ffffff;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(3, 28, 53, 0.15);
    font-size: 25px;
}

.study-country-content h3 {
    color: var(--navy);
    font-family: "Playfair Display", serif;
    font-size: 23px;
    line-height: 1.2;
}

.study-country-content > p {
    min-height: 83px;
    margin-top: 12px;
    color: var(--gray);
    font-size: 11px;
    line-height: 1.75;
}

.study-country-content ul {
    margin: 19px 0 24px;
    padding: 18px 0;
    list-style: none;
    border-top: 1px solid #edf0f2;
    border-bottom: 1px solid #edf0f2;
}

.study-country-content li {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 9px 0;
    color: #566474;
    font-size: 10px;
}

.study-country-content li i {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #3d7655;
    background: #edf7f0;
    font-size: 7px;
}

.study-country-button {
    width: 100%;
    min-height: 45px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #dfe4e8;
    border-radius: 9px;
    color: var(--navy);
    background: #ffffff;
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.study-country-button:hover {
    border-color: var(--navy);
    color: #ffffff;
    background: var(--navy);
}


/* ==========================================================
   PROCESSUS
========================================================== */

.study-process {
    padding: 105px 0;
    background: #ffffff;
}

.study-process-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.study-process-grid::before {
    content: "";
    position: absolute;
    top: 54px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: #e4e8eb;
}

.study-process-card {
    position: relative;
    z-index: 2;
    min-height: 245px;
    padding: 27px;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    background: #ffffff;
}

.study-process-number {
    position: absolute;
    top: 22px;
    right: 22px;
    color: #e4e8eb;
    font-family: "Playfair Display", serif;
    font-size: 35px;
    font-weight: 700;
}

.study-process-icon {
    width: 55px;
    height: 55px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(212, 154, 36, 0.25);
    border-radius: 50%;
    color: var(--gold);
    background: #fffaf0;
    font-size: 19px;
}

.study-process-card h3 {
    color: var(--navy);
    font-family: "Playfair Display", serif;
    font-size: 21px;
}

.study-process-card p {
    margin-top: 11px;
    color: var(--gray);
    font-size: 11px;
    line-height: 1.75;
}


/* ==========================================================
   SECTION ÉVALUATION
========================================================== */

.study-evaluation {
    padding: 110px 0;
    background:
        linear-gradient(
            135deg,
            #f7f5ef,
            #ffffff
        );
}

.study-evaluation-grid {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 75px;
    align-items: start;
}


/* ==========================================================
   TEXTE ÉVALUATION
========================================================== */

.study-evaluation-intro {
    position: sticky;
    top: 135px;
    padding-top: 15px;
}

.study-evaluation-intro .section-kicker {
    color: var(--gold);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.study-evaluation-intro h2 {
    margin-top: 13px;
    color: var(--navy);
    font-family: "Playfair Display", serif;
    font-size: clamp(35px, 4vw, 48px);
    line-height: 1.1;
}

.study-evaluation-intro > p {
    margin-top: 20px;
    color: var(--gray);
    font-size: 13px;
    line-height: 1.8;
}

.study-evaluation-benefits {
    margin-top: 32px;
}

.study-evaluation-benefits > div {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 14px 0;
}

.study-evaluation-benefits > div > span {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #3d7655;
    background: #eaf5ed;
    font-size: 9px;
}

.study-evaluation-benefits p {
    color: #465666;
    font-size: 11px;
}

.study-evaluation-notice {
    margin-top: 35px;
    padding: 17px;
    display: flex;
    gap: 12px;
    border: 1px solid #eadfca;
    border-radius: 11px;
    background: #fffaf0;
}

.study-evaluation-notice > i {
    margin-top: 2px;
    color: var(--gold);
    font-size: 14px;
}

.study-evaluation-notice p {
    margin: 0;
    color: #776b55;
    font-size: 9px;
    line-height: 1.6;
}


/* ==========================================================
   CARTE FORMULAIRE
========================================================== */

.study-form-card {
    padding: 40px;
    border: 1px solid #e6e9ec;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 22px 60px rgba(3, 28, 53, 0.10);
}

.study-form-heading {
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #edf0f2;
}

.study-form-heading > span {
    color: var(--gold);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.study-form-heading h3 {
    margin-top: 7px;
    color: var(--navy);
    font-family: "Playfair Display", serif;
    font-size: 30px;
}

.study-form-heading p {
    margin-top: 6px;
    color: var(--gray);
    font-size: 10px;
}


/* ==========================================================
   FORMULAIRE
========================================================== */

.study-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.study-form-group {
    margin-bottom: 18px;
}

.study-form-group > label {
    display: block;
    margin-bottom: 7px;
    color: #586678;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.study-input-wrap,
.study-select-wrap {
    position: relative;
    min-height: 53px;
    display: flex;
    align-items: center;
    border: 1px solid #dce3e8;
    border-radius: 10px;
    background: #ffffff;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.study-input-wrap:focus-within,
.study-select-wrap:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(212, 154, 36, 0.09);
}

.study-input-wrap > i,
.study-select-wrap > i {
    position: absolute;
    left: 16px;
    z-index: 2;
    color: var(--gold);
    font-size: 13px;
    pointer-events: none;
}

.study-input-wrap input,
.study-select-wrap select {
    width: 100%;
    height: 53px;
    padding: 0 15px 0 43px;
    border: 0;
    outline: 0;
    border-radius: 10px;
    color: var(--text);
    background: transparent;
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
}

.study-select-wrap select {
    padding-right: 35px;
    cursor: pointer;
}

.study-input-wrap input::placeholder {
    color: #a1aab4;
}

.study-form-group textarea {
    width: 100%;
    min-height: 125px;
    padding: 15px;
    border: 1px solid #dce3e8;
    border-radius: 10px;
    outline: none;
    resize: vertical;
    color: var(--text);
    background: #ffffff;
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    line-height: 1.6;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.study-form-group textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(212, 154, 36, 0.09);
}

.study-form-group textarea::placeholder {
    color: #a1aab4;
}


/* ==========================================================
   CONSENTEMENT
========================================================== */

.study-consent {
    margin: 5px 0 22px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #66727e;
    font-size: 9px;
    line-height: 1.55;
    cursor: pointer;
}

.study-consent input {
    width: 15px;
    height: 15px;
    margin-top: 1px;
    accent-color: var(--gold);
    flex-shrink: 0;
}


/* ==========================================================
   BOUTON FORMULAIRE
========================================================== */

.study-submit-button {
    width: 100%;
    min-height: 54px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border: 0;
    border-radius: 10px;
    color: var(--navy-dark);
    background: linear-gradient(
        135deg,
        var(--gold),
        var(--gold-light)
    );
    box-shadow: 0 12px 25px rgba(212, 154, 36, 0.22);
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.study-submit-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(212, 154, 36, 0.28);
}

.study-form-note {
    margin-top: 12px;
    color: #929ca6;
    font-size: 8px;
    line-height: 1.5;
    text-align: center;
}


/* ==========================================================
   POURQUOI ESSENTIELLE
========================================================== */

.study-why {
    padding: 105px 0;
    background: #ffffff;
}

.study-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.study-why-grid article {
    min-height: 245px;
    padding: 35px;
    border: 1px solid #e9ecef;
    border-radius: 17px;
    background: #ffffff;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.study-why-grid article:hover {
    transform: translateY(-7px);
    border-color: rgba(212, 154, 36, 0.35);
    box-shadow: 0 18px 40px rgba(3, 28, 53, 0.10);
}

.study-why-grid article > div {
    width: 55px;
    height: 55px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--gold);
    background: rgba(212, 154, 36, 0.10);
    font-size: 19px;
}

.study-why-grid h3 {
    color: var(--navy);
    font-family: "Playfair Display", serif;
    font-size: 22px;
}

.study-why-grid p {
    margin-top: 11px;
    color: var(--gray);
    font-size: 11px;
    line-height: 1.75;
}


/* ==========================================================
   CTA ÉTUDES
========================================================== */

.study-cta {
    position: relative;
    overflow: hidden;
    padding: 85px 0;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--navy-dark),
            var(--navy)
        );
}

.study-cta::after {
    content: "\f19d";
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: rgba(255, 255, 255, 0.035);
    font-size: 180px;
}

.study-cta-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.study-cta-inner > div {
    max-width: 700px;
}

.study-cta-inner > div > span {
    color: var(--gold-light);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.study-cta h2 {
    margin-top: 9px;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 4vw, 45px);
}

.study-cta p {
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
}

.study-cta .btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}


/* ==========================================================
   RESPONSIVE - ÉTUDES
========================================================== */

@media (max-width: 1150px) {

    .study-country-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .study-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .study-process-grid::before {
        display: none;
    }

}


@media (max-width: 950px) {

    .study-hero-inner {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .study-hero-content {
        padding: 75px 0 30px;
    }

    .study-hero-visual {
        min-height: 260px;
        justify-content: flex-start;
        padding-bottom: 70px;
    }

    .study-hero-card {
        max-width: 430px;
    }

    .study-evaluation-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .study-evaluation-intro {
        position: static;
        max-width: 700px;
    }

}


@media (max-width: 750px) {

    .study-hero {
        min-height: auto;
    }

    .study-hero h1 {
        font-size: 48px;
    }

    .study-hero-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .study-country-grid {
        grid-template-columns: 1fr;
    }

    .study-country-image {
        height: 260px;
    }

    .study-country-content > p {
        min-height: auto;
    }

    .study-process-grid {
        grid-template-columns: 1fr;
    }

    .study-form-card {
        padding: 28px 20px;
    }

    .study-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .study-why-grid {
        grid-template-columns: 1fr;
    }

    .study-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 480px) {

    .study-hero h1 {
        font-size: 41px;
    }

    .study-hero-card {
        padding: 30px 24px;
    }

    .study-country-image {
        height: 220px;
    }

    .study-evaluation {
        padding: 75px 0;
    }

}
/* ==========================================================
   32. PAGE VOYAGE MÉDICAL
   ESSENTIELLE ENTREPRISE GUINÉE SARL
========================================================== */


/* ==========================================================
   HERO MÉDICAL
========================================================== */

.medical-hero {
    position: relative;
    min-height: 570px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #ffffff;
    background: #031c35;
}

.medical-hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("../images/medical-hero.jpg") center center / cover no-repeat;
    transform: scale(1.02);
}

.medical-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(2,24,45,.95) 0%, rgba(3,43,78,.82) 52%, rgba(3,43,78,.46) 100%);
}

.medical-hero::before {
    content: "\f21e";
    position: absolute;
    right: 7%;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 270px;
    color: rgba(255, 255, 255, 0.035);
    pointer-events: none;
}

.medical-hero::after {
    content: "";
    position: absolute;
    right: -180px;
    bottom: -260px;
    width: 600px;
    height: 600px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
}

.medical-hero-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 80px;
    align-items: center;
}

.medical-hero-content {
    padding: 90px 0;
}

.medical-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color: var(--gold-light);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.4px;
}

.medical-eyebrow::before {
    content: "";
    width: 34px;
    height: 1px;
    background: var(--gold);
}

.medical-hero h1 {
    max-width: 760px;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: clamp(49px, 5.5vw, 73px);
    line-height: 1.03;
}

.medical-hero h1 span {
    display: block;
    color: var(--gold-light);
}

.medical-hero-content > p {
    max-width: 640px;
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.8;
}

.medical-hero-actions {
    margin-top: 33px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.medical-hero-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.medical-secondary-link {
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.medical-secondary-link:hover {
    color: var(--gold-light);
}


/* ==========================================================
   CARTE DU HERO
========================================================== */

.medical-hero-visual {
    position: relative;
    min-height: 370px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.medical-hero-card {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 370px;
    padding: 40px 36px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 23px;
    background: rgba(255, 255, 255, 0.075);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(13px);
}

.medical-hero-card-icon {
    width: 67px;
    height: 67px;
    margin-bottom: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: var(--navy-dark);
    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-light)
        );
    font-size: 27px;
}

.medical-hero-card > span {
    display: block;
    margin-bottom: 8px;
    color: var(--gold-light);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.medical-hero-card > strong {
    display: block;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: 32px;
}

.medical-hero-card > p {
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.67);
    font-size: 10px;
    line-height: 1.6;
}

.medical-hero-card-line {
    height: 1px;
    margin: 25px 0 19px;
    background: rgba(255, 255, 255, 0.12);
}

.medical-hero-card-bottom {
    display: flex;
    align-items: center;
    gap: 11px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 10px;
}

.medical-hero-card-bottom i {
    color: var(--gold-light);
}


/* ==========================================================
   INTRODUCTION
========================================================== */

.medical-intro {
    padding: 100px 0 80px;
    background: #ffffff;
}


/* ==========================================================
   TURQUIE
========================================================== */

.medical-turkey {
    padding: 30px 0 110px;
    background: #ffffff;
}

.medical-turkey-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 75px;
    align-items: center;
}


/* IMAGE */

.medical-turkey-image {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    border-radius: 22px;
    box-shadow: 0 24px 55px rgba(3, 28, 53, 0.14);
}

.medical-turkey-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.medical-turkey-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(3, 28, 53, 0.65),
            transparent 55%
        );
}

.medical-turkey-badge {
    position: absolute;
    left: 28px;
    bottom: 28px;
    z-index: 3;
    min-width: 160px;
    padding: 17px 20px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: rgba(3, 28, 53, 0.82);
    backdrop-filter: blur(8px);
}

.medical-turkey-badge span {
    display: block;
    color: var(--gold-light);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.medical-turkey-badge strong {
    display: block;
    margin-top: 3px;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: 25px;
}


/* TEXTE */

.medical-turkey-content .section-kicker {
    color: var(--gold);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.medical-turkey-content > h2 {
    max-width: 580px;
    margin-top: 12px;
    color: var(--navy);
    font-family: "Playfair Display", serif;
    font-size: clamp(37px, 4vw, 49px);
    line-height: 1.1;
}

.medical-turkey-content > p {
    max-width: 610px;
    margin-top: 19px;
    color: var(--gray);
    font-size: 13px;
    line-height: 1.8;
}

.medical-turkey-features {
    margin: 29px 0 32px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.medical-turkey-features > div {
    min-height: 105px;
    padding: 18px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    border: 1px solid #e7ebee;
    border-radius: 12px;
    background: #ffffff;
}

.medical-turkey-features > div > span {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--gold);
    background: rgba(212, 154, 36, 0.10);
    font-size: 14px;
}

.medical-turkey-features strong {
    display: block;
    color: var(--navy);
    font-size: 11px;
}

.medical-turkey-features p {
    margin-top: 5px;
    color: var(--gray);
    font-size: 9px;
    line-height: 1.55;
}

.medical-turkey-content > .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}


/* ==========================================================
   SPÉCIALITÉS
========================================================== */

.medical-specialties {
    padding: 105px 0;
    background: var(--cream);
}

.medical-specialties-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.medical-specialty-card {
    position: relative;
    min-height: 280px;
    padding: 29px 26px 25px;
    display: flex;
    flex-direction: column;
    border: 1px solid #e6e2d9;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(3, 28, 53, 0.045);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.medical-specialty-card:hover {
    transform: translateY(-7px);
    border-color: rgba(212, 154, 36, 0.40);
    box-shadow: 0 18px 38px rgba(3, 28, 53, 0.11);
}

.medical-specialty-icon {
    width: 53px;
    height: 53px;
    margin-bottom: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: var(--gold);
    background: rgba(212, 154, 36, 0.10);
    font-size: 20px;
}

.medical-specialty-card h3 {
    color: var(--navy);
    font-family: "Playfair Display", serif;
    font-size: 21px;
    line-height: 1.25;
}

.medical-specialty-card > p {
    margin: 10px 0 22px;
    color: var(--gray);
    font-size: 10px;
    line-height: 1.7;
}

.medical-specialty-button {
    width: 100%;
    min-height: 42px;
    margin-top: auto;
    padding: 0 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #dde3e7;
    border-radius: 8px;
    color: var(--navy);
    background: #ffffff;
    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.medical-specialty-button:hover {
    border-color: var(--navy);
    color: #ffffff;
    background: var(--navy);
}


/* ==========================================================
   PROCESSUS
========================================================== */

.medical-process {
    padding: 105px 0;
    background: #ffffff;
}

.medical-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 21px;
}

.medical-process-grid article {
    position: relative;
    min-height: 245px;
    padding: 29px 27px;
    overflow: hidden;
    border: 1px solid #e7ebee;
    border-radius: 16px;
    background: #ffffff;
}

.medical-process-number {
    position: absolute;
    right: 21px;
    top: 17px;
    color: #e7eaed;
    font-family: "Playfair Display", serif;
    font-size: 39px;
    font-weight: 700;
}

.medical-process-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(212, 154, 36, 0.25);
    border-radius: 50%;
    color: var(--gold);
    background: #fffaf1;
    font-size: 18px;
}

.medical-process-grid h3 {
    color: var(--navy);
    font-family: "Playfair Display", serif;
    font-size: 21px;
}

.medical-process-grid p {
    margin-top: 10px;
    color: var(--gray);
    font-size: 10px;
    line-height: 1.75;
}


/* ==========================================================
   DEMANDE D'ORIENTATION
========================================================== */

.medical-request {
    padding: 110px 0;
    background:
        linear-gradient(
            135deg,
            #f7f5ef,
            #ffffff
        );
}

.medical-request-grid {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 75px;
    align-items: start;
}


/* ==========================================================
   TEXTE GAUCHE
========================================================== */

.medical-request-intro {
    position: sticky;
    top: 135px;
    padding-top: 15px;
}

.medical-request-intro .section-kicker {
    color: var(--gold);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.medical-request-intro > h2 {
    margin-top: 13px;
    color: var(--navy);
    font-family: "Playfair Display", serif;
    font-size: clamp(36px, 4vw, 49px);
    line-height: 1.1;
}

.medical-request-intro > p {
    margin-top: 20px;
    color: var(--gray);
    font-size: 13px;
    line-height: 1.8;
}

.medical-request-points {
    margin-top: 31px;
}

.medical-request-points > div {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 14px 0;
}

.medical-request-points > div > span {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #3d7655;
    background: #eaf5ed;
    font-size: 8px;
}

.medical-request-points p {
    color: #465666;
    font-size: 10px;
}


/* AVERTISSEMENT */

.medical-warning {
    margin-top: 35px;
    padding: 19px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    border: 1px solid #eadfca;
    border-radius: 12px;
    background: #fffaf0;
}

.medical-warning > i {
    margin-top: 2px;
    color: var(--gold);
    font-size: 18px;
}

.medical-warning strong {
    display: block;
    margin-bottom: 5px;
    color: var(--navy);
    font-size: 10px;
}

.medical-warning p {
    margin: 0;
    color: #746b5d;
    font-size: 9px;
    line-height: 1.65;
}


/* ==========================================================
   CARTE FORMULAIRE
========================================================== */

.medical-form-card {
    padding: 40px;
    border: 1px solid #e4e8eb;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 22px 60px rgba(3, 28, 53, 0.10);
}

.medical-form-heading {
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #edf0f2;
}

.medical-form-heading > span {
    color: var(--gold);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.medical-form-heading h3 {
    margin-top: 7px;
    color: var(--navy);
    font-family: "Playfair Display", serif;
    font-size: 30px;
}

.medical-form-heading p {
    margin-top: 6px;
    color: var(--gray);
    font-size: 10px;
}


/* ==========================================================
   FORMULAIRE MÉDICAL
========================================================== */

.medical-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.medical-form-group {
    margin-bottom: 18px;
}

.medical-form-group > label {
    display: block;
    margin-bottom: 7px;
    color: #586678;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.75px;
}

.medical-input-wrap,
.medical-select-wrap {
    position: relative;
    min-height: 53px;
    display: flex;
    align-items: center;
    border: 1px solid #dce3e8;
    border-radius: 10px;
    background: #ffffff;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.medical-input-wrap:focus-within,
.medical-select-wrap:focus-within {
    border-color: var(--gold);
    box-shadow:
        0 0 0 4px rgba(212, 154, 36, 0.09);
}

.medical-input-wrap > i,
.medical-select-wrap > i {
    position: absolute;
    left: 16px;
    z-index: 2;
    color: var(--gold);
    font-size: 13px;
    pointer-events: none;
}

.medical-input-wrap input,
.medical-select-wrap select {
    width: 100%;
    height: 53px;
    padding: 0 15px 0 43px;
    border: 0;
    outline: 0;
    border-radius: 10px;
    color: var(--text);
    background: transparent;
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
}

.medical-select-wrap select {
    padding-right: 34px;
    cursor: pointer;
}

.medical-input-wrap input::placeholder {
    color: #a1aab4;
}


/* TEXTAREA */

.medical-form-group textarea {
    width: 100%;
    min-height: 130px;
    padding: 15px;
    border: 1px solid #dce3e8;
    border-radius: 10px;
    outline: none;
    resize: vertical;
    color: var(--text);
    background: #ffffff;
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    line-height: 1.65;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.medical-form-group textarea:focus {
    border-color: var(--gold);
    box-shadow:
        0 0 0 4px rgba(212, 154, 36, 0.09);
}

.medical-form-group textarea::placeholder {
    color: #a1aab4;
}

.medical-textarea-help {
    display: block;
    margin-top: 7px;
    color: #8b959f;
    font-size: 8px;
    line-height: 1.5;
}


/* ==========================================================
   INFORMATION DOCUMENTS
========================================================== */

.medical-documents-info {
    margin: 3px 0 21px;
    padding: 17px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    border: 1px solid #dbe6ed;
    border-radius: 11px;
    background: #f6fafc;
}

.medical-documents-info > div {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--navy);
    background: #e6f0f6;
    font-size: 12px;
}

.medical-documents-info p {
    margin: 0;
    color: #667480;
    font-size: 9px;
    line-height: 1.6;
}

.medical-documents-info strong {
    display: block;
    margin-bottom: 3px;
    color: var(--navy);
    font-size: 10px;
}


/* ==========================================================
   CONSENTEMENT
========================================================== */

.medical-consent {
    margin: 5px 0 22px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #66727e;
    font-size: 9px;
    line-height: 1.55;
    cursor: pointer;
}

.medical-consent input {
    width: 15px;
    height: 15px;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: var(--gold);
}


/* ==========================================================
   BOUTON ENVOI
========================================================== */

.medical-submit-button {
    width: 100%;
    min-height: 54px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border: 0;
    border-radius: 10px;
    color: var(--navy-dark);
    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-light)
        );
    box-shadow:
        0 12px 25px rgba(212, 154, 36, 0.22);
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.medical-submit-button:hover {
    transform: translateY(-2px);
    box-shadow:
        0 16px 30px rgba(212, 154, 36, 0.28);
}

.medical-form-note {
    margin-top: 12px;
    color: #929ca6;
    font-size: 8px;
    line-height: 1.5;
    text-align: center;
}


/* ==========================================================
   SERVICES AUTOUR DU VOYAGE
========================================================== */

.medical-travel-services {
    padding: 105px 0;
    background: #ffffff;
}

.medical-travel-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.medical-travel-services-grid article {
    min-height: 270px;
    padding: 34px;
    display: flex;
    flex-direction: column;
    border: 1px solid #e8ebee;
    border-radius: 17px;
    background: #ffffff;
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.medical-travel-services-grid article:hover {
    transform: translateY(-7px);
    border-color: rgba(212, 154, 36, 0.36);
    box-shadow: 0 18px 40px rgba(3, 28, 53, 0.10);
}

.medical-travel-services-grid article > div {
    width: 55px;
    height: 55px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--gold);
    background: rgba(212, 154, 36, 0.10);
    font-size: 19px;
}

.medical-travel-services-grid h3 {
    color: var(--navy);
    font-family: "Playfair Display", serif;
    font-size: 23px;
}

.medical-travel-services-grid p {
    margin: 11px 0 22px;
    color: var(--gray);
    font-size: 11px;
    line-height: 1.75;
}

.medical-travel-services-grid a {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--navy);
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
}

.medical-travel-services-grid a i {
    color: var(--gold);
    transition: transform 0.2s ease;
}

.medical-travel-services-grid a:hover i {
    transform: translateX(4px);
}


/* ==========================================================
   CTA MÉDICAL
========================================================== */

.medical-cta {
    position: relative;
    overflow: hidden;
    padding: 85px 0;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 85% 25%,
            rgba(212, 154, 36, 0.15),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--navy-dark),
            var(--navy)
        );
}

.medical-cta::after {
    content: "\f21e";
    position: absolute;
    right: 7%;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: rgba(255, 255, 255, 0.035);
    font-size: 180px;
}

.medical-cta-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.medical-cta-inner > div {
    max-width: 720px;
}

.medical-cta-inner > div > span {
    color: var(--gold-light);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.medical-cta h2 {
    margin-top: 9px;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: clamp(32px, 4vw, 45px);
    line-height: 1.15;
}

.medical-cta p {
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
    line-height: 1.7;
}

.medical-cta .btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}


/* ==========================================================
   SÉLECTION TEMPORAIRE D'UNE SPÉCIALITÉ
========================================================== */

.medical-field-highlight {
    border-color: var(--gold) !important;
    box-shadow:
        0 0 0 5px rgba(212, 154, 36, 0.14) !important;
}


/* ==========================================================
   MESSAGE DE VALIDATION TEMPORAIRE
========================================================== */

.medical-demo-message {
    margin-bottom: 25px;
    padding: 17px 18px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    border: 1px solid #cfe4d5;
    border-radius: 11px;
    background: #f3faf5;
}

.medical-demo-message-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    background: #417158;
    font-size: 10px;
}

.medical-demo-message strong {
    display: block;
    margin-bottom: 3px;
    color: #315c44;
    font-size: 11px;
}

.medical-demo-message p {
    margin: 0;
    color: #617267;
    font-size: 9px;
    line-height: 1.6;
}


/* ==========================================================
   RESPONSIVE MÉDICAL
========================================================== */

@media (max-width: 1150px) {

    .medical-specialties-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .medical-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 950px) {

    .medical-hero-inner {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .medical-hero-content {
        padding: 75px 0 30px;
    }

    .medical-hero-visual {
        min-height: 280px;
        justify-content: flex-start;
        padding-bottom: 70px;
    }

    .medical-hero-card {
        max-width: 440px;
    }

    .medical-turkey-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .medical-turkey-image {
        min-height: 460px;
    }

    .medical-request-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .medical-request-intro {
        position: static;
        max-width: 720px;
    }

}


@media (max-width: 750px) {

    .medical-hero {
        min-height: auto;
    }

    .medical-hero h1 {
        font-size: 47px;
    }

    .medical-hero-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .medical-turkey-image {
        min-height: 380px;
    }

    .medical-turkey-features {
        grid-template-columns: 1fr;
    }

    .medical-specialties-grid {
        grid-template-columns: 1fr;
    }

    .medical-process-grid {
        grid-template-columns: 1fr;
    }

    .medical-form-card {
        padding: 28px 20px;
    }

    .medical-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .medical-travel-services-grid {
        grid-template-columns: 1fr;
    }

    .medical-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 480px) {

    .medical-hero h1 {
        font-size: 40px;
    }

    .medical-hero-card {
        padding: 30px 24px;
    }

    .medical-turkey-image {
        min-height: 320px;
    }

    .medical-turkey-badge {
        left: 18px;
        bottom: 18px;
    }

    .medical-request {
        padding: 75px 0;
    }

}
/* ==========================================================
   PAGE OMRA
   ESSENTIELLE ENTREPRISE GUINÉE SARL
========================================================== */


/* ==========================================================
   HERO OMRA
========================================================== */

.omra-hero {
    position: relative;
    min-height: 610px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 82% 28%,
            rgba(212, 154, 36, 0.22),
            transparent 27%
        ),
        radial-gradient(
            circle at 15% 90%,
            rgba(11, 71, 124, 0.55),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #02182d 0%,
            #062b50 60%,
            #083c69 100%
        );
}

.omra-hero::before {
    content: "\f66b";
    position: absolute;
    right: 6%;
    top: 48%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 285px;
    color: rgba(255, 255, 255, 0.025);
    pointer-events: none;
}

.omra-hero::after {
    content: "";
    position: absolute;
    right: -170px;
    bottom: -320px;
    width: 650px;
    height: 650px;
    border: 1px solid rgba(240, 196, 94, 0.12);
    border-radius: 50%;
}

.omra-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.omra-hero-content {
    width: 100%;
    max-width: 780px;

    margin: 0 auto;
    padding: 95px 20px;

    text-align: center;
}

.omra-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 21px;
    color: var(--gold-light);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.omra-eyebrow::before {
    content: "";
    width: 35px;
    height: 1px;
    background: var(--gold);
}

.omra-hero h1 {
    max-width: 720px;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: clamp(50px, 5.5vw, 75px);
    line-height: 1.02;
}

.omra-hero h1 span {
    display: block;
    color: var(--gold-light);
}

.omra-hero-content > p {
    max-width: 620px;
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.8;
}

.omra-hero-actions {
    margin-top: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 28px;
}

.omra-hero-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.omra-secondary-link {
    color: rgba(255, 255, 255, 0.80);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.omra-secondary-link:hover {
    color: var(--gold-light);
}


/* PETITES INFORMATIONS HERO */

.omra-hero-features {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.omra-hero-features span {
    min-height: 37px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 30px;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.05);
    font-size: 9px;
}

.omra-hero-features i {
    color: var(--gold-light);
}


/* ==========================================================
   CARTE HERO
========================================================== */

.omra-hero-visual {
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.omra-hero-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 43px 37px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.075);
    box-shadow: 0 30px 75px rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(13px);
}

.omra-hero-card::before {
    content: "";
    position: absolute;
    right: -50px;
    top: -50px;
    width: 160px;
    height: 160px;
    border: 1px solid rgba(240, 196, 94, 0.13);
    border-radius: 50%;
}

.omra-hero-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: var(--navy-dark);
    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-light)
        );
    box-shadow: 0 13px 30px rgba(212, 154, 36, 0.20);
    font-size: 29px;
}

.omra-hero-card-label {
    display: block;
    color: var(--gold-light);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.omra-hero-card > strong {
    display: block;
    margin-top: 6px;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: 38px;
}

.omra-hero-card > p {
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 11px;
}

.omra-hero-card-line {
    height: 1px;
    margin: 27px 0 22px;
    background: rgba(255, 255, 255, 0.12);
}

.omra-hero-route {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
}

.omra-hero-route > div > span {
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.46);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.omra-hero-route strong {
    color: #ffffff;
    font-size: 10px;
}

.omra-hero-route > i {
    color: var(--gold-light);
    font-size: 13px;
}


/* ==========================================================
   INTRODUCTION
========================================================== */

.omra-intro {
    padding: 100px 0 75px;
    background: #ffffff;
}


/* ==========================================================
   SERVICES OMRA
========================================================== */

.omra-services {
    padding: 15px 0 105px;
    background: #ffffff;
}

.omra-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.omra-services-grid article {
    min-height: 230px;
    padding: 30px 25px;
    border: 1px solid #e6e9ec;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(3, 28, 53, 0.045);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.omra-services-grid article:hover {
    transform: translateY(-6px);
    border-color: rgba(212, 154, 36, 0.38);
    box-shadow: 0 18px 38px rgba(3, 28, 53, 0.10);
}

.omra-service-icon {
    width: 55px;
    height: 55px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: var(--gold);
    background: rgba(212, 154, 36, 0.10);
    font-size: 20px;
}

.omra-services-grid h3 {
    color: var(--navy);
    font-family: "Playfair Display", serif;
    font-size: 20px;
}

.omra-services-grid p {
    margin-top: 10px;
    color: var(--gray);
    font-size: 10px;
    line-height: 1.7;
}


/* ==========================================================
   LA MECQUE / MÉDINE
========================================================== */

.omra-destinations {
    padding: 105px 0;
    background: var(--cream);
}

.omra-destination-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.omra-destination-card {
    overflow: hidden;
    border: 1px solid #e4e1d8;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 14px 35px rgba(3, 28, 53, 0.07);
}

.omra-destination-visual {
    position: relative;
    min-height: 285px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(
            circle at center,
            rgba(212, 154, 36, 0.20),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #02182d,
            #062b50
        );
}

.omra-destination-visual.medina {
    background:
        radial-gradient(
            circle at center,
            rgba(240, 196, 94, 0.20),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #062b50,
            #0b477c
        );
}

.omra-destination-visual::before {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(240, 196, 94, 0.13);
    border-radius: 50%;
}

.omra-destination-symbol {
    position: relative;
    z-index: 2;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(240, 196, 94, 0.22);
    border-radius: 50%;
    color: var(--gold-light);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(7px);
    font-size: 45px;
}

.omra-destination-visual > span {
    position: absolute;
    left: 27px;
    bottom: 23px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
}

.omra-destination-content {
    padding: 29px;
}

.omra-destination-content > span {
    color: var(--gold);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.omra-destination-content h3 {
    margin-top: 6px;
    color: var(--navy);
    font-family: "Playfair Display", serif;
    font-size: 29px;
}

.omra-destination-content p {
    margin-top: 9px;
    color: var(--gray);
    font-size: 10px;
    line-height: 1.7;
}


/* ==========================================================
   FORFAITS OMRA
========================================================== */

.omra-packages {
    padding: 110px 0;
    background: #ffffff;
}

.omra-package-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

.omra-package-card {
    position: relative;
    min-height: 470px;
    padding: 35px 30px 30px;
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e7ea;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(3, 28, 53, 0.06);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.omra-package-card:hover {
    transform: translateY(-7px);
    border-color: rgba(212, 154, 36, 0.45);
    box-shadow: 0 22px 48px rgba(3, 28, 53, 0.12);
}

.omra-package-card.featured {
    border: 2px solid var(--gold);
    box-shadow: 0 20px 48px rgba(212, 154, 36, 0.15);
}

.omra-package-popular {
    position: absolute;
    top: 0;
    right: 27px;
    padding: 7px 13px;
    border-radius: 0 0 8px 8px;
    color: var(--navy-dark);
    background: var(--gold-light);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.omra-package-top > span {
    color: var(--gold);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.omra-package-top h3 {
    margin-top: 7px;
    color: var(--navy);
    font-family: "Playfair Display", serif;
    font-size: 31px;
}

.omra-package-top p {
    margin-top: 10px;
    color: var(--gray);
    font-size: 10px;
    line-height: 1.7;
}

.omra-package-features {
    margin: 27px 0;
    padding-top: 23px;
    border-top: 1px solid #edf0f2;
}

.omra-package-features p {
    margin: 13px 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #586675;
    font-size: 10px;
    line-height: 1.5;
}

.omra-package-features i {
    margin-top: 2px;
    color: var(--gold);
    font-size: 9px;
}

.omra-package-button {
    width: 100%;
    min-height: 48px;
    margin-top: auto;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--navy);
    border-radius: 9px;
    color: var(--navy);
    background: #ffffff;
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.omra-package-button:hover,
.omra-package-card.featured .omra-package-button {
    color: #ffffff;
    background: var(--navy);
}

.omra-package-card.featured .omra-package-button:hover {
    color: var(--navy-dark);
    border-color: var(--gold);
    background: var(--gold-light);
}

.omra-package-note {
    max-width: 850px;
    margin: 30px auto 0;
    color: #8a949e;
    font-size: 9px;
    line-height: 1.6;
    text-align: center;
}

.omra-package-note i {
    margin-right: 6px;
    color: var(--gold);
}


/* ==========================================================
   ÉTAPES
========================================================== */

.omra-process {
    padding: 105px 0;
    background: var(--cream);
}

.omra-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 21px;
}

.omra-process-grid article {
    position: relative;
    min-height: 245px;
    padding: 29px 27px;
    overflow: hidden;
    border: 1px solid #e6e2d9;
    border-radius: 16px;
    background: #ffffff;
}

.omra-process-number {
    position: absolute;
    right: 20px;
    top: 16px;
    color: #e9e7df;
    font-family: "Playfair Display", serif;
    font-size: 40px;
    font-weight: 700;
}

.omra-process-icon {
    width: 55px;
    height: 55px;
    margin-bottom: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(212, 154, 36, 0.24);
    border-radius: 50%;
    color: var(--gold);
    background: #fffaf1;
    font-size: 18px;
}

.omra-process-grid h3 {
    color: var(--navy);
    font-family: "Playfair Display", serif;
    font-size: 21px;
}

.omra-process-grid p {
    margin-top: 10px;
    color: var(--gray);
    font-size: 10px;
    line-height: 1.7;
}


/* ==========================================================
   FORMULAIRE OMRA
========================================================== */

.omra-request {
    padding: 110px 0;
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f8f6f0
        );
}

.omra-request-grid {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 75px;
    align-items: start;
}

.omra-request-intro {
    position: sticky;
    top: 135px;
    padding-top: 15px;
}

.omra-request-intro .section-kicker {
    color: var(--gold);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.omra-request-intro > h2 {
    margin-top: 13px;
    color: var(--navy);
    font-family: "Playfair Display", serif;
    font-size: clamp(37px, 4vw, 49px);
    line-height: 1.1;
}

.omra-request-intro > p {
    margin-top: 20px;
    color: var(--gray);
    font-size: 13px;
    line-height: 1.8;
}


/* POINTS */

.omra-request-points {
    margin-top: 31px;
}

.omra-request-points > div {
    margin: 14px 0;
    display: flex;
    align-items: center;
    gap: 13px;
}

.omra-request-points > div > span {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #3d7655;
    background: #eaf5ed;
    font-size: 8px;
}

.omra-request-points p {
    color: #465666;
    font-size: 10px;
}


/* INFO VISA / RÉSERVATION */

.omra-information-box {
    margin-top: 34px;
    padding: 19px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    border: 1px solid #eadfca;
    border-radius: 12px;
    background: #fffaf0;
}

.omra-information-box > i {
    margin-top: 2px;
    color: var(--gold);
    font-size: 17px;
}

.omra-information-box strong {
    display: block;
    margin-bottom: 5px;
    color: var(--navy);
    font-size: 10px;
}

.omra-information-box p {
    margin: 0;
    color: #746b5d;
    font-size: 9px;
    line-height: 1.65;
}


/* ==========================================================
   CARTE FORMULAIRE
========================================================== */

.omra-form-card {
    padding: 40px;
    border: 1px solid #e4e8eb;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 22px 60px rgba(3, 28, 53, 0.10);
}

.omra-form-heading {
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #edf0f2;
}

.omra-form-heading > span {
    color: var(--gold);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.omra-form-heading h3 {
    margin-top: 7px;
    color: var(--navy);
    font-family: "Playfair Display", serif;
    font-size: 30px;
}

.omra-form-heading p {
    margin-top: 6px;
    color: var(--gray);
    font-size: 10px;
}


/* ==========================================================
   CHAMPS
========================================================== */

.omra-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.omra-form-group {
    margin-bottom: 18px;
}

.omra-form-group > label {
    display: block;
    margin-bottom: 7px;
    color: #586678;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.75px;
}

.omra-input-wrap,
.omra-select-wrap {
    position: relative;
    min-height: 53px;
    display: flex;
    align-items: center;
    border: 1px solid #dce3e8;
    border-radius: 10px;
    background: #ffffff;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.omra-input-wrap:focus-within,
.omra-select-wrap:focus-within {
    border-color: var(--gold);
    box-shadow:
        0 0 0 4px rgba(212, 154, 36, 0.09);
}

.omra-input-wrap > i,
.omra-select-wrap > i {
    position: absolute;
    left: 16px;
    z-index: 2;
    color: var(--gold);
    font-size: 13px;
    pointer-events: none;
}

.omra-input-wrap input,
.omra-select-wrap select {
    width: 100%;
    height: 53px;
    padding: 0 15px 0 43px;
    border: 0;
    outline: 0;
    border-radius: 10px;
    color: var(--text);
    background: transparent;
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
}

.omra-select-wrap select {
    padding-right: 35px;
    cursor: pointer;
}

.omra-input-wrap input::placeholder {
    color: #a1aab4;
}


/* TEXTAREA */

.omra-form-group textarea {
    width: 100%;
    min-height: 120px;
    padding: 15px;
    border: 1px solid #dce3e8;
    border-radius: 10px;
    outline: none;
    resize: vertical;
    color: var(--text);
    background: #ffffff;
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    line-height: 1.65;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.omra-form-group textarea:focus {
    border-color: var(--gold);
    box-shadow:
        0 0 0 4px rgba(212, 154, 36, 0.09);
}

.omra-form-group textarea::placeholder {
    color: #a1aab4;
}


/* ==========================================================
   VOYAGEURS
========================================================== */

.omra-travelers {
    margin-bottom: 21px;
    overflow: hidden;
    border: 1px solid #dce3e8;
    border-radius: 12px;
    background: #ffffff;
}

.omra-travelers-heading {
    min-height: 58px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid #edf0f2;
    background: #fafbfc;
}

.omra-travelers-heading > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.omra-travelers-heading i {
    color: var(--gold);
    font-size: 13px;
}

.omra-travelers-heading span {
    color: #586678;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.omra-travelers-heading > strong {
    color: var(--navy);
    font-size: 10px;
}

.omra-traveler-row {
    min-height: 72px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    border-bottom: 1px solid #edf0f2;
}

.omra-traveler-row:last-of-type {
    border-bottom: 0;
}

.omra-traveler-row > div:first-child strong {
    display: block;
    color: var(--navy);
    font-size: 10px;
}

.omra-traveler-row > div:first-child span {
    display: block;
    margin-top: 3px;
    color: #929ca6;
    font-size: 8px;
}


/* COMPTEUR */

.omra-counter {
    display: flex;
    align-items: center;
    gap: 13px;
}

.omra-counter-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9e0e5;
    border-radius: 50%;
    color: var(--navy);
    background: #ffffff;
    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    cursor: pointer;
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.omra-counter-btn:hover {
    border-color: var(--gold);
    color: var(--navy-dark);
    background: var(--gold-light);
}

.omra-counter > span {
    min-width: 18px;
    color: var(--navy);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}


/* ==========================================================
   CONSENTEMENT
========================================================== */

.omra-consent {
    margin: 4px 0 22px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #66727e;
    font-size: 9px;
    line-height: 1.55;
    cursor: pointer;
}

.omra-consent input {
    width: 15px;
    height: 15px;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: var(--gold);
}


/* ==========================================================
   BOUTON FORMULAIRE
========================================================== */

.omra-submit-button {
    width: 100%;
    min-height: 55px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border: 0;
    border-radius: 10px;
    color: var(--navy-dark);
    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-light)
        );
    box-shadow:
        0 12px 25px rgba(212, 154, 36, 0.22);
    font-family: "DM Sans", sans-serif;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.omra-submit-button:hover {
    transform: translateY(-2px);
    box-shadow:
        0 16px 30px rgba(212, 154, 36, 0.29);
}

.omra-form-note {
    margin-top: 12px;
    color: #929ca6;
    font-size: 8px;
    line-height: 1.55;
    text-align: center;
}


/* ==========================================================
   INFORMATIONS PRATIQUES
========================================================== */

.omra-practical {
    padding: 105px 0;
    background: #ffffff;
}

.omra-practical-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 23px;
}

.omra-practical-grid article {
    min-height: 190px;
    padding: 29px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    border: 1px solid #e6eaed;
    border-radius: 16px;
    background: #ffffff;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.omra-practical-grid article:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(3, 28, 53, 0.08);
}

.omra-practical-grid article > span {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: var(--gold);
    background: rgba(212, 154, 36, 0.10);
    font-size: 17px;
}

.omra-practical-grid h3 {
    color: var(--navy);
    font-family: "Playfair Display", serif;
    font-size: 20px;
}

.omra-practical-grid p {
    margin-top: 8px;
    color: var(--gray);
    font-size: 10px;
    line-height: 1.7;
}


/* ==========================================================
   CTA OMRA
========================================================== */

.omra-cta {
    position: relative;
    overflow: hidden;
    padding: 85px 0;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 82% 25%,
            rgba(212, 154, 36, 0.17),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #02182d,
            var(--navy)
        );
}

.omra-cta::after {
    content: "\f66b";
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: rgba(255, 255, 255, 0.035);
    font-size: 180px;
}

.omra-cta-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.omra-cta-inner > div {
    max-width: 700px;
}

.omra-cta-inner > div > span {
    color: var(--gold-light);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.omra-cta h2 {
    margin-top: 9px;
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: clamp(33px, 4vw, 45px);
}

.omra-cta p {
    margin-top: 11px;
    color: rgba(255, 255, 255, 0.67);
    font-size: 12px;
}

.omra-cta .btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}


/* ==========================================================
   EFFET SÉLECTION FORMULE
========================================================== */

.omra-field-highlight {
    border-color: var(--gold) !important;
    box-shadow:
        0 0 0 5px rgba(212, 154, 36, 0.14) !important;
}


/* ==========================================================
   MESSAGE TEMPORAIRE
========================================================== */

.omra-demo-message {
    margin-bottom: 25px;
    padding: 17px 18px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    border: 1px solid #cfe4d5;
    border-radius: 11px;
    background: #f3faf5;
}

.omra-demo-message-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    background: #417158;
    font-size: 10px;
}

.omra-demo-message strong {
    display: block;
    margin-bottom: 3px;
    color: #315c44;
    font-size: 11px;
}

.omra-demo-message p {
    margin: 0;
    color: #617267;
    font-size: 9px;
    line-height: 1.6;
}


/* ==========================================================
   RESPONSIVE OMRA
========================================================== */

@media (max-width: 1150px) {

    .omra-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .omra-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 950px) {

    .omra-hero-inner {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .omra-hero-content {
        padding: 75px 0 25px;
    }

    .omra-hero-visual {
        min-height: 320px;
        justify-content: flex-start;
        padding-bottom: 70px;
    }

    .omra-hero-card {
        max-width: 450px;
    }

    .omra-package-grid {
        grid-template-columns: 1fr;
    }

    .omra-package-card {
        min-height: auto;
    }

    .omra-request-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .omra-request-intro {
        position: static;
        max-width: 720px;
    }

}


@media (max-width: 750px) {

    .omra-hero {
        min-height: auto;
    }

    .omra-hero h1 {
        font-size: 47px;
    }

    .omra-hero-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .omra-destination-grid {
        grid-template-columns: 1fr;
    }

    .omra-services-grid {
        grid-template-columns: 1fr;
    }

    .omra-process-grid {
        grid-template-columns: 1fr;
    }

    .omra-form-card {
        padding: 28px 20px;
    }

    .omra-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .omra-practical-grid {
        grid-template-columns: 1fr;
    }

    .omra-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 480px) {

    .omra-hero h1 {
        font-size: 39px;
    }

    .omra-hero-card {
        padding: 30px 23px;
    }

    .omra-hero-route {
        gap: 10px;
    }

    .omra-destination-visual {
        min-height: 240px;
    }

    .omra-traveler-row {
        padding: 0 13px;
    }

    .omra-counter {
        gap: 8px;
    }

    .omra-request {
        padding: 75px 0;
    }

}

/* ==========================================================
   SITE V2 — SURCHARGES ET STYLES DE PAGES
========================================================== */

/* ==========================================================
   ESSENTIELLE ENTREPRISE GUINÉE SARL
   SITE V2 — CSS GLOBAL COMPLET
   Desktop / Tablette / Mobile
========================================================== */


/* ==========================================================
   1. VARIABLES
========================================================== */

:root {
    --navy: #062b50;
    --navy-dark: #031c35;
    --navy-deep: #02182d;
    --navy-light: #0b477c;

    --gold: #d49a24;
    --gold-light: #f0c45e;

    --cream: #faf8f3;
    --white: #ffffff;

    --text: #172334;
    --gray: #697586;
    --gray-light: #f3f5f7;

    --border: #e3e8ed;

    --shadow-sm:
        0 8px 25px rgba(3, 28, 53, 0.07);

    --shadow-md:
        0 18px 45px rgba(3, 28, 53, 0.13);

    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 26px;

    --container: 1180px;
}


/* ==========================================================
   2. RESET
========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    color: var(--text);
    background: var(--white);

    font-size: 16px;
    line-height: 1.6;

    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

input,
select,
textarea,
button {
    box-sizing: border-box;
}


/* ==========================================================
   3. CONTAINER GLOBAL
========================================================== */

.container {
    width: min(
        calc(100% - 48px),
        var(--container)
    );

    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================
   4. TYPOGRAPHIE GLOBALE
========================================================== */

h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}

h1,
h2 {
    color: var(--navy-dark);
}

.section-kicker,
.home-section-kicker {
    display: block;

    margin-bottom: 8px;

    color: var(--gold);

    font-size: 0.70rem;
    font-weight: 800;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


/* ==========================================================
   5. BOUTONS
========================================================== */

.btn {
    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 0 24px;

    border: 0;
    border-radius: 11px;

    font-size: 0.88rem;
    font-weight: 800;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.btn-primary {
    color: var(--navy-dark);

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold)
        );

    box-shadow:
        0 10px 24px rgba(212, 154, 36, 0.22);
}

.btn-primary:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 30px rgba(212, 154, 36, 0.30);
}


/* ==========================================================
   6. TOPBAR
========================================================== */

.topbar {
    min-height: 34px;

    display: flex;
    align-items: center;

    color: rgba(255, 255, 255, 0.90);
    background: var(--navy-dark);

    font-size: 0.73rem;
}

.topbar-inner {
    min-height: 34px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.topbar-location,
.topbar-links,
.topbar-links a {
    display: flex;
    align-items: center;
}

.topbar-location,
.topbar-links a {
    gap: 7px;
}

.topbar-links {
    gap: 22px;
}

.topbar i {
    color: var(--gold-light);
}

.topbar-links a {
    transition: color 0.2s ease;
}

.topbar-links a:hover {
    color: var(--gold-light);
}


/* ==========================================================
   7. HEADER PRINCIPAL
========================================================== */

.site-header {
    position: relative;

    z-index: 1000;

    background: rgba(255, 255, 255, 0.98);

    border-bottom:
        1px solid rgba(6, 43, 80, 0.07);

    box-shadow:
        0 3px 16px rgba(3, 28, 53, 0.04);

    backdrop-filter: blur(12px);
}


/* ==========================================================
   HEADER COMPLET FIGÉ AU DÉFILEMENT
   Topbar + logo + navigation
========================================================== */

#header-placeholder {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    z-index: 99999 !important;

    background: #ffffff;
}

body {
    padding-top: 110px !important;
}

/* ==========================================================
   8. LOGO HEADER
========================================================== */

.site-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}


/* Logo horizontal complet */

.site-logo {
    display: block;

    width: 230px;
    height: auto;

    max-width: none;

    object-fit: contain;
}


/* Le nouveau logo contient déjà ESSENTIELLE
   + ENTREPRISE GUINÉE SARL */

.site-brand .brand-text {
    display: none;
}

/* ==========================================================
   9. NAVIGATION
========================================================== */

.main-nav {
    display: flex;
    align-items: center;

    gap: 17px;
}

.main-nav > a {
    position: relative;

    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 0;

    color: #344256;

    font-size: 0.82rem;
    font-weight: 650;

    white-space: nowrap;

    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.main-nav > a:hover {
    color: var(--gold);
}

.main-nav > a.active {
    color: var(--gold);
}

.main-nav > a.active:not(.nav-contact)::after {
    content: "";

    position: absolute;

    left: 2px;
    right: 2px;
    bottom: 0;

    height: 2px;

    border-radius: 20px;

    background: var(--gold);
}


/* BOUTON CONTACT */

.main-nav .nav-contact {
    min-width: 94px;
    min-height: 42px;

    margin-left: 5px;

    padding: 0 17px;

    border-radius: 10px;

    color: var(--white);

    background: var(--navy);

    box-shadow:
        0 5px 14px rgba(3, 28, 53, 0.14);
}

.main-nav .nav-contact:hover,
.main-nav .nav-contact.active {
    color: var(--navy-dark);

    background: var(--gold);
}


/* ==========================================================
   10. BOUTON MENU MOBILE
========================================================== */

.menu-toggle {
    display: none;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: var(--white);

    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 5px;
}

.menu-toggle span {
    width: 20px;
    height: 2px;

    border-radius: 20px;

    background: var(--navy);

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* ==========================================================
   11. HERO ACCUEIL
========================================================== */

.home-hero {
    position: relative;

    min-height: 500px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        var(--navy-dark)
        url("../images/hero.jpg")
        center / cover
        no-repeat;
}

.home-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3, 28, 53, 0.96) 0%,
            rgba(3, 28, 53, 0.86) 38%,
            rgba(3, 28, 53, 0.42) 66%,
            rgba(3, 28, 53, 0.08) 100%
        );
}

.home-hero-inner {
    position: relative;

    z-index: 2;

    width: min(
        calc(100% - 48px),
        var(--container)
    );

    margin-inline: auto;
}

.home-hero-content {
    max-width: 620px;

    padding: 68px 0 108px;
}

.home-hero-kicker {
    display: inline-block;

    margin-bottom: 17px;

    color: var(--gold-light);

    font-size: 0.70rem;
    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}

.home-hero h1 {
    max-width: 600px;

    margin: 0;

    color: var(--white);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(
            3rem,
            4.3vw,
            4.25rem
        );

    font-weight: 700;

    line-height: 1.03;

    letter-spacing: -0.03em;
}

.home-hero p {
    max-width: 540px;

    margin: 22px 0 30px;

    color: rgba(255, 255, 255, 0.88);

    font-size: 1rem;
}

.home-hero-actions {
    display: flex;
    align-items: center;

    gap: 24px;
}

.home-hero-link {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: var(--white);

    font-size: 0.88rem;
    font-weight: 700;
}

.home-hero-link i {
    color: var(--gold-light);
}



/* ==========================================================
   18. TITRES SECTIONS
========================================================== */

.home-section-heading {
    margin-bottom: 34px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 35px;
}

.home-section-heading > div {
    max-width: 620px;
}

.home-section-heading span {
    display: block;

    margin-bottom: 8px;

    color: var(--gold);

    font-size: 0.70rem;
    font-weight: 800;

    letter-spacing: 0.15em;
}

.home-section-heading h2,
.home-trust-content h2,
.home-final-cta h2 {
    margin: 0;

    color: var(--navy-dark);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(
            2rem,
            3.4vw,
            3rem
        );

    line-height: 1.12;
}

.home-section-heading > p {
    max-width: 380px;

    margin: 0;

    color: var(--gray);

    font-size: 0.90rem;
}


/* ==========================================================
   19. SERVICES
========================================================== */

.home-services {
    padding: 15px 0 85px;
}

.home-services-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 16px;
}

.home-service-card {
    min-height: 120px;

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 16px;

    padding: 20px;

    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    background: var(--white);

    box-shadow:
        0 6px 20px
        rgba(3, 28, 53, 0.04);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.home-service-card:hover {
    transform: translateY(-4px);

    border-color:
        rgba(212, 154, 36, 0.5);

    box-shadow: var(--shadow-sm);
}

.home-service-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 14px;

    color: var(--gold);

    background: #fff8e9;

    font-size: 1.15rem;
}

.home-service-card h3 {
    margin: 0 0 4px;

    color: var(--navy);

    font-size: 0.98rem;
}

.home-service-card p {
    margin: 0;

    color: var(--gray);

    font-size: 0.78rem;

    line-height: 1.45;
}

.home-service-card > i {
    color: #aab2bd;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.home-service-card:hover > i {
    color: var(--gold);

    transform: translateX(3px);
}


/* ==========================================================
   20. DESTINATIONS
========================================================== */

.home-destinations {
    padding: 78px 0;

    background: var(--cream);
}

.home-destinations-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 16px;
}

.home-destination-card {
    position: relative;

    height: 320px;

    overflow: hidden;

    border-radius: var(--radius-md);

    box-shadow:
        0 10px 30px
        rgba(3, 28, 53, 0.08);
}

.home-destination-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}

.home-destination-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(3, 28, 53, 0.94),
            rgba(3, 28, 53, 0.06) 65%
        );
}

.home-destination-content {
    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 19px;

    color: var(--white);
}

.home-destination-content > span {
    display: block;

    margin-bottom: 5px;

    color: var(--gold-light);

    font-size: 0.60rem;
    font-weight: 800;

    letter-spacing: 0.12em;
}

.home-destination-content h3 {
    display: flex;
    align-items: center;

    margin: 0;

    color: var(--white);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 1.65rem;

    line-height: 1.15;
}

.country-flag {
    display: inline-block;

    margin-right: 8px;

    font-family:
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Noto Color Emoji",
        sans-serif;

    font-size: 0.72em;

    font-weight: 400;

    line-height: 1;
}

.home-destination-card:hover img {
    transform: scale(1.055);
}


/* ==========================================================
   21. POURQUOI ESSENTIELLE
========================================================== */

.home-trust {
    padding: 85px 0;
}

.home-trust-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(350px, 0.9fr);

    align-items: center;

    gap: 65px;
}

.home-trust-content h2 {
    max-width: 580px;
}

.home-trust-points {
    margin: 30px 0 32px;

    display: grid;

    gap: 18px;
}

.home-trust-points > div {
    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 14px;

    align-items: flex-start;
}

.home-trust-points > div > span {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: var(--gold);

    background: #fff8e9;
}

.home-trust-points strong {
    display: block;

    margin-bottom: 3px;

    color: var(--navy);

    font-size: 0.93rem;
}

.home-trust-points p {
    max-width: 440px;

    margin: 0;

    color: var(--gray);

    font-size: 0.83rem;
}

.home-trust-image {
    position: relative;

    min-height: 400px;

    overflow: hidden;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);
}

.home-trust-image img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ==========================================================
   22. CTA AVANT FOOTER
========================================================== */

.home-final-cta {
    padding: 38px 0;

    background:
        linear-gradient(
            135deg,
            var(--navy-dark),
            var(--navy)
        );
}

.home-final-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 35px;
}

.home-final-cta span {
    display: block;

    margin-bottom: 5px;

    color: var(--gold-light);

    font-size: 0.67rem;
    font-weight: 800;

    letter-spacing: 0.15em;
}

.home-final-cta h2 {
    max-width: 650px;

    color: var(--white);

    font-size:
        clamp(
            1.9rem,
            3vw,
            2.45rem
        );
}


/* ==========================================================
   FOOTER UNIQUE — VERSION COMPACTE ET PLUS LISIBLE
========================================================== */

.site-footer {
    width: 100%;
    margin: 0;
    padding: 0;

    color: rgba(255, 255, 255, 0.82);
    background: var(--navy-deep);
}


/* ==========================================================
   CONTENU PRINCIPAL FOOTER
========================================================== */

.site-footer .footer-main {
    width: min(calc(100% - 48px), var(--container));
    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.25fr
        0.80fr
        0.75fr
        1.10fr;

    align-items: start;

    gap: 55px;

    /* IMPORTANT : réduction forte de la hauteur */
    padding: 16px 0 14px;
}


/* ==========================================================
   MARQUE / LOGO
========================================================== */

.footer-brand {
    min-width: 0;
}



.footer-brand-text {
    display: flex;
    flex-direction: column;

    line-height: 1.1;
}

.footer-brand-text strong {
    color: var(--white);

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    /* Police agrandie */
    font-size: 0.96rem;

    font-weight: 800;
    letter-spacing: 0.06em;
}

.footer-brand-text span {
    margin-top: 3px;

    color: rgba(255, 255, 255, 0.60);

    font-size: 0.62rem;
    font-weight: 700;

    letter-spacing: 0.06em;
}

.footer-brand > p {
    max-width: 280px;

    /* Très peu d'espace vertical */
    margin: 6px 0 8px;

    color: rgba(255, 255, 255, 0.72);

    /* Plus lisible */
    font-size: 0.80rem;

    line-height: 1.35;
}


/* ==========================================================
   RÉSEAUX SOCIAUX
========================================================== */

.footer-social {
    display: flex;

    gap: 7px;

    margin: 0;
}

.footer-social a {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius: 8px;

    color: var(--white);

    background:
        rgba(255, 255, 255, 0.04);

    font-size: 0.82rem;

    transition:
        0.2s ease;
}

.footer-social a:hover {
    color: var(--navy-dark);

    border-color: var(--gold);

    background: var(--gold);

    transform: translateY(-2px);
}


/* ==========================================================
   COLONNES FOOTER
========================================================== */

.footer-column {
    min-width: 0;
}

.footer-column h3 {
    margin: 0 0 6px;

    color: var(--white);

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    /* Plus lisible */
    font-size: 0.84rem;

    font-weight: 800;
}

.footer-column nav {
    display: flex;
    flex-direction: column;

    /* Réduit fortement la hauteur */
    gap: 2px;
}

.footer-column nav a {
    width: fit-content;

    color: rgba(255, 255, 255, 0.72);

    /* Plus gros qu'avant */
    font-size: 0.78rem;

    line-height: 1.35;

    transition:
        color 0.2s ease;
}

.footer-column nav a:hover {
    color: var(--gold-light);
}


/* ==========================================================
   CONTACT FOOTER
========================================================== */

.footer-contact {
    min-width: 0;
}

.footer-contact-item {
    display: grid;

    grid-template-columns:
        19px
        1fr;

    gap: 7px;

    /* Réduction verticale */
    margin: 0 0 4px;
}

.footer-contact-item:last-child {
    margin-bottom: 0;
}

.footer-contact-item > i {
    margin-top: 3px;

    color: var(--gold-light);

    font-size: 0.84rem;
}

.footer-contact-item div {
    min-width: 0;
}

.footer-contact-item strong {
    display: block;

    margin: 0;

    color: var(--white);

    font-size: 0.80rem;

    font-weight: 750;

    line-height: 1.3;
}

.footer-contact-item span,
.footer-contact-item a {
    display: block;

    color: rgba(255, 255, 255, 0.70);

    font-size: 0.76rem;

    line-height: 1.3;

    overflow-wrap: anywhere;
}

.footer-contact-item a:hover {
    color: var(--gold-light);
}


/* ==========================================================
   BAS DU FOOTER
========================================================== */

.footer-bottom {
    width: 100%;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.09);
}

.site-footer .footer-bottom-inner {
    width: min(calc(100% - 48px), var(--container));

    /* Plus de grande hauteur forcée */
    min-height: 0;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    /* Très compact */
    padding: 8px 0;
}

.footer-bottom p {
    margin: 0;

    color: rgba(255, 255, 255, 0.58);

    font-size: 0.71rem;

    line-height: 1.3;
}

.footer-legal {
    display: flex;

    gap: 18px;
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.62);

    font-size: 0.71rem;

    line-height: 1.3;

    transition:
        color 0.2s ease;
}

.footer-legal a:hover {
    color: var(--gold-light);
}


/* ==========================================================
   FOOTER — TABLETTE
========================================================== */

@media (max-width: 980px) {

    .site-footer .footer-main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px 40px;

        padding: 18px 0;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-brand > p {
        max-width: 450px;
    }

    .footer-contact {
        grid-column: 1 / -1;
    }
}


/* ==========================================================
   FOOTER — MOBILE
========================================================== */

@media (max-width: 540px) {

    .site-footer .footer-main {
        width: calc(100% - 32px);

        /* Tout en colonne sur téléphone */
        grid-template-columns: 1fr;

        gap: 17px;

        padding: 20px 0 17px;
    }

    .site-footer .footer-brand,
    .site-footer .footer-column,
    .site-footer .footer-contact {
        grid-column: auto;

        width: 100%;
    }


    .footer-brand-text strong {
        font-size: 0.96rem;
    }

    .footer-brand-text span {
        font-size: 0.62rem;
    }

    .footer-brand > p {
        max-width: 100%;

        margin: 6px 0 8px;

        font-size: 0.82rem;
    }

    .footer-column h3 {
        margin-bottom: 5px;

        font-size: 0.86rem;
    }

    .footer-column nav {
        gap: 2px;
    }

    .footer-column nav a {
        font-size: 0.80rem;
    }

    .footer-contact-item {
        margin-bottom: 5px;
    }

    .footer-contact-item strong {
        font-size: 0.82rem;
    }

    .footer-contact-item span,
    .footer-contact-item a {
        font-size: 0.78rem;
    }

    .site-footer .footer-bottom-inner {
        width: calc(100% - 32px);

        min-height: 0;

        padding: 10px 0;

        flex-direction: column;
        align-items: flex-start;

        gap: 5px;
    }

    .footer-bottom p,
    .footer-legal a {
        font-size: 0.72rem;
    }

    .footer-legal {
        flex-wrap: wrap;

        gap: 6px 15px;
    }
}
/* ==========================================================
   WHATSAPP FLOTTANT — VERSION FINALE
========================================================== */

.whatsapp-float {
    position: fixed !important;
    right: 26px !important;
    bottom: 26px !important;
    z-index: 9999 !important;

    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #00d26a !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 50% !important;

    text-decoration: none !important;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;

    overflow: hidden !important;

    transform: none;
}


/* ICÔNE WHATSAPP PARFAITEMENT CENTRÉE */

.whatsapp-float > i,
.whatsapp-float .fa-whatsapp {
    position: static !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    color: #ffffff !important;

    font-size: 25px !important;
    line-height: 1 !important;
}


/* CACHER LE TEXTE */

.whatsapp-float > span {
    display: none !important;
}


/* SUPPRIMER TOUT ÉLÉMENT AJOUTÉ */

.whatsapp-float::before,
.whatsapp-float::after {
    display: none !important;
    content: none !important;
}


/* SURVOL */

.whatsapp-float:hover {
    background: #00bd5e !important;

    transform: translateY(-2px) !important;

    box-shadow: 0 11px 28px rgba(0, 0, 0, 0.22) !important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 760px) {

    .whatsapp-float {
        right: 16px !important;
        bottom: 16px !important;

        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
    }

    .whatsapp-float > i,
    .whatsapp-float .fa-whatsapp {
        font-size: 24px !important;
    }

}
/* ==========================================================
   31. PAGES INTERNES — BASE COMMUNE
========================================================== */

.page-hero {
    position: relative;

    min-height: 340px;

    display: flex;
    align-items: center;

    overflow: hidden;

    color: var(--white);

    background:
        linear-gradient(
            135deg,
            var(--navy-dark),
            var(--navy)
        );
}

.page-hero .container {
    position: relative;

    z-index: 2;
}

.page-hero-content {
    max-width: 700px;

    padding: 65px 0;
}

.page-hero-kicker {
    display: block;

    margin-bottom: 10px;

    color: var(--gold-light);

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}

.page-hero h1 {
    margin: 0;

    color: var(--white);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(
            2.4rem,
            4.5vw,
            3.8rem
        );

    line-height: 1.08;
}

.page-hero p {
    max-width: 620px;

    margin: 18px 0 0;

    color:
        rgba(255, 255, 255, 0.84);

    font-size: 0.96rem;
}


/* ==========================================================
   32. CARTES / FORMULAIRES COMMUNS
========================================================== */

.form-card,
.search-card,
.content-card {
    background: var(--white);

    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);
}

.form-card {
    padding: 28px;
}

.form-group {
    min-width: 0;
}

.form-group label {
    display: block;

    margin-bottom: 7px;

    color: #445266;

    font-size: 0.78rem;
    font-weight: 700;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    border: 1px solid #dce2e8;
    border-radius: 10px;

    outline: none;

    color: var(--text);
    background: #fbfcfd;

    font-size: 0.86rem;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.form-group input,
.form-group select {
    min-height: 50px;

    padding: 0 14px;
}

.form-group textarea {
    min-height: 130px;

    padding: 13px 14px;

    resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--gold);

    box-shadow:
        0 0 0 3px
        rgba(212, 154, 36, 0.11);
}

.form-row {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


/* ==========================================================
   33. PETITS ORDINATEURS
========================================================== */

@media (max-width: 1100px) {

    .header-inner {
        gap: 22px;
    }

    .main-nav {
        gap: 10px;
    }

    .main-nav > a {
        font-size: 0.77rem;
    }

    .main-nav .nav-contact {
        min-width: 84px;

        padding-inline: 13px;
    }


    /* RECHERCHE VOL */

    .home-flight-form {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .home-flight-form
    .home-search-submit {
        grid-column: 1 / -1;
    }


    /* RECHERCHE HÔTEL */

    .home-hotel-form {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .home-hotel-form
    .home-search-field:first-child {
        grid-column: 1 / -1;
    }

    .home-hotel-form
    .home-search-submit {
        grid-column: 1 / -1;
    }


    /* DESTINATIONS */

    .home-destinations-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    /* TRUST */

    .home-trust-grid {
        gap: 45px;
    }
}


/* ==========================================================
   34. TABLETTE / MENU MOBILE
========================================================== */

@media (max-width: 980px) {

    /* HEADER */

    .menu-toggle {
        display: flex;
    }

    .main-nav {
        position: fixed;

        top: 108px;
        right: 20px;

        width:
            min(
                350px,
                calc(100vw - 40px)
            );

        max-height:
            calc(100vh - 130px);

        overflow-y: auto;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 4px;

        padding: 12px;

        border: 1px solid var(--border);
        border-radius: 16px;

        background: var(--white);

        box-shadow: var(--shadow-md);

        opacity: 0;
        visibility: hidden;

        transform: translateY(-10px);

        pointer-events: none;

        transition:
            opacity 0.2s ease,
            visibility 0.2s ease,
            transform 0.2s ease;
    }

    .main-nav.show {
        opacity: 1;
        visibility: visible;

        transform: translateY(0);

        pointer-events: auto;
    }

    .main-nav > a {
        width: 100%;

        min-height: 46px;

        justify-content: flex-start;

        padding: 11px 14px;

        border-radius: 9px;

        font-size: 0.87rem;
    }

    .main-nav > a.active:not(.nav-contact)::after {
        display: none;
    }

    .main-nav > a.active:not(.nav-contact) {
        color: var(--navy);

        background: #fff7e5;
    }

    .main-nav .nav-contact {
        width: 100%;

        min-width: 0;
        min-height: 46px;

        margin: 5px 0 0;

        justify-content: center;
    }


    /* SERVICES */

    .home-services-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    /* TRUST */

    .home-trust-grid {
        grid-template-columns: 1fr;
    }

    .home-trust-image {
        min-height: 360px;
    }


    /* FOOTER TABLETTE */

    .site-footer .footer-main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 28px 45px;

        padding: 30px 0 27px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-brand > p {
        max-width: 430px;
    }

    .footer-contact {
        grid-column: 1 / -1;
    }
}


/* ==========================================================
   35. TABLETTE VERTICALE
========================================================== */

@media (max-width: 760px) {

    .flight-hero,
    .hotel-hero,
    .study-hero {
        background-position: center center;
    }

    .medical-hero-background {
        background-position: 62% center;
    }

    .flight-hero h1,
    .hotel-hero h1,
    .study-hero h1,
    .medical-hero h1,
    .omra-hero h1,
    .transfer-hero h1,
    .contact-hero h1 {
        overflow-wrap: anywhere;
    }

    .container {
        width:
            min(
                calc(100% - 32px),
                var(--container)
            );
    }


    /* TOPBAR */

    .topbar-links a:first-child {
        display: none;
    }


    /* HEADER */

    .header-inner {
        min-height: 68px;
    }

    .site-logo {
        width: 48px;
        height: 48px;
    }

    .brand-text strong {
        font-size: 0.82rem;
    }

    .brand-text span {
        font-size: 0.50rem;
    }

    .main-nav {
        top: 100px;
    }


    /* HERO */

    .home-hero {
        min-height: 450px;

        background-position:
            64% center;
    }

    .home-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(3, 28, 53, 0.96),
                rgba(3, 28, 53, 0.78)
            );
    }

    .home-hero-inner {
        width:
            calc(100% - 32px);
    }

    .home-hero-content {
        max-width: 540px;

        padding: 52px 0 96px;
    }

    .home-hero h1 {
        font-size:
            clamp(
                2.35rem,
                10vw,
                3.6rem
            );
    }

    .home-hero p {
        font-size: 0.92rem;
    }


    /* MOTEUR */

    .home-search-section {
        margin-top: -52px;

        padding-bottom: 65px;
    }

    .home-search-box {
        border-radius: 20px;
    }

    .home-search-tabs {
        overflow-x: auto;

        grid-template-columns:
            repeat(
                5,
                minmax(90px, 1fr)
            );

        scrollbar-width: none;
    }

    .home-search-tabs::-webkit-scrollbar {
        display: none;
    }

    .home-search-tab {
        min-height: 61px;

        padding: 0 12px;

        font-size: 0.76rem;

        white-space: nowrap;
    }

    .home-search-panel {
        padding: 22px 19px 23px;
    }

    .home-search-heading {
        align-items: flex-start;
    }

    .home-search-heading h2 {
        font-size: 1.32rem;
    }

    .home-search-heading > a {
        display: none;
    }


    /* FORMULAIRES */

    .home-flight-form,
    .home-hotel-form,
    .home-study-form,
    .home-omra-form,
    .home-medical-form {
        grid-template-columns:
            1fr 1fr;

        max-width: none;
    }

    .home-hotel-form
    .home-search-field:first-child {
        grid-column: 1 / -1;
    }

    .home-flight-form
    .home-search-submit,
    .home-hotel-form
    .home-search-submit,
    .home-study-form
    .home-search-submit,
    .home-omra-form
    .home-search-submit,
    .home-medical-form
    .home-search-submit {
        grid-column: 1 / -1;
    }


    /* SECTIONS */

    .home-section-heading {
        display: block;
    }

    .home-section-heading > p {
        margin-top: 11px;
    }

    .home-services {
        padding-bottom: 70px;
    }

    .home-destinations {
        padding: 68px 0;
    }

    .home-destination-card {
        height: 280px;
    }

    .home-trust {
        padding: 70px 0;
    }

    .home-trust-image {
        min-height: 330px;
    }


    /* CTA */

    .home-final-cta {
        padding: 36px 0;
    }

    .home-final-cta-inner {
        display: block;
    }

    .home-final-cta .btn {
        margin-top: 22px;
    }


    /* PAGE HERO */

    .page-hero {
        min-height: 300px;
    }

    .page-hero-content {
        padding: 55px 0;
    }


    /* FOOTER */

    .site-footer .footer-main {
        width:
            min(
                calc(100% - 32px),
                var(--container)
            );

        grid-template-columns:
            1fr 1fr;

        gap: 28px 34px;

        padding: 30px 0 27px;
    }

    .site-footer .footer-bottom-inner {
        width:
            min(
                calc(100% - 32px),
                var(--container)
            );
    }
}


/* ==========================================================
   36. MOBILE
========================================================== */

@media (max-width: 540px) {

    /* CONTAINER */

    .container {
        width: calc(100% - 28px);
    }


    /* TOPBAR */

    .topbar {
        min-height: 32px;

        font-size: 0.67rem;
    }

    .topbar-inner {
        min-height: 32px;
    }


    /* HEADER */

    .header-inner {
        min-height: 66px;

        gap: 10px;
    }

    .site-brand {
        gap: 8px;
    }

.site-logo {
    width: 175px;
    height: auto;
    max-width: none;
}

    .brand-text strong {
        font-size: 0.72rem;
    }

    .brand-text span {
        max-width: 145px;

        font-size: 0.47rem;
    }

    .menu-toggle {
        width: 41px;
        height: 41px;

        flex-shrink: 0;
    }

    .main-nav {
        top: 92px;

        left: 14px;
        right: 14px;

        width: auto;

        max-height:
            calc(100vh - 110px);
    }


    /* HERO */

    .home-hero {
        min-height: 420px;

        background-position:
            68% center;
    }

    .home-hero-inner {
        width:
            calc(100% - 28px);
    }

    .home-hero-content {
        padding: 45px 0 88px;
    }

    .home-hero-kicker {
        margin-bottom: 12px;

        font-size: 0.60rem;
    }

    .home-hero h1 {
        max-width: 390px;

        font-size:
            clamp(
                2.15rem,
                12vw,
                3rem
            );

        line-height: 1.05;
    }

    .home-hero p {
        max-width: 370px;

        margin: 17px 0 23px;

        font-size: 0.86rem;
    }

    .home-hero-actions {
        align-items: flex-start;

        flex-direction: column;

        gap: 14px;
    }

    .home-hero-actions .btn {
        min-height: 47px;

        padding-inline: 18px;
    }


    /* MOTEUR */

    .home-search-section {
        margin-top: -46px;

        padding-bottom: 55px;
    }

    .home-search-tabs {
        grid-template-columns:
            repeat(5, 84px);
    }

    .home-search-tab {
        min-height: 59px;

        flex-direction: column;

        gap: 2px;

        padding-inline: 6px;

        font-size: 0.67rem;
    }

    .home-search-tab i {
        font-size: 0.92rem;
    }

    .home-search-panel {
        padding: 19px 15px 18px;
    }

    .home-search-heading {
        margin-bottom: 15px;
    }

    .home-search-heading h2 {
        font-size: 1.22rem;
    }


    /* FORMULAIRES UNE COLONNE */

    .home-flight-form,
    .home-hotel-form,
    .home-study-form,
    .home-omra-form,
    .home-medical-form,
    .form-row {
        grid-template-columns: 1fr;
    }

    .home-hotel-form
    .home-search-field:first-child,
    .home-flight-form
    .home-search-submit,
    .home-hotel-form
    .home-search-submit,
    .home-study-form
    .home-search-submit,
    .home-omra-form
    .home-search-submit,
    .home-medical-form
    .home-search-submit {
        grid-column: auto;
    }

    .home-search-submit {
        width: 100%;
    }


    /* SECTIONS */

    .home-section-heading {
        margin-bottom: 25px;
    }

    .home-section-heading h2,
    .home-trust-content h2,
    .home-final-cta h2 {
        font-size: 1.9rem;
    }

    .home-services {
        padding-bottom: 60px;
    }

    .home-services-grid {
        grid-template-columns: 1fr;

        gap: 11px;
    }

    .home-service-card {
        min-height: 102px;

        padding: 16px;

        border-radius: 15px;
    }


    /* DESTINATIONS UNE COLONNE */

    .home-destinations {
        padding: 58px 0;
    }

    .home-destinations-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .home-destination-card {
        height: 245px;

        border-radius: 16px;
    }

    .home-destination-content {
        left: 17px;
        right: 17px;
        bottom: 16px;
    }

    .home-destination-content h3 {
        font-size: 1.45rem;
    }


    /* TRUST */

    .home-trust {
        padding: 58px 0;
    }

    .home-trust-grid {
        gap: 34px;
    }

    .home-trust-points {
        margin: 25px 0 28px;
    }

    .home-trust-image {
        min-height: 270px;

        border-radius: 18px;
    }


    /* CTA */

    .home-final-cta {
        padding: 34px 0;
    }


    /* PAGE HERO */

    .page-hero {
        min-height: 270px;
    }

    .page-hero-content {
        padding: 45px 0;
    }

    .page-hero h1 {
        font-size: 2.15rem;
    }

    .page-hero p {
        font-size: 0.86rem;
    }


    /* FORM CARD */

    .form-card {
        padding: 20px 16px;
    }


    /* ======================================================
       FOOTER MOBILE
       UNE COLONNE PROPRE ET LISIBLE
    ====================================================== */

    .site-footer .footer-main {
        width: calc(100% - 28px);

        grid-template-columns: 1fr;

        gap: 24px;

        padding: 28px 0 25px;
    }

    .site-footer .footer-brand,
    .site-footer .footer-column,
    .site-footer .footer-contact {
        grid-column: auto;

        width: 100%;
    }

    .footer-brand-text strong {
        font-size: 0.90rem;
    }

    .footer-brand-text span {
        font-size: 0.56rem;
    }

    .footer-brand > p {
        max-width: 100%;

        margin: 9px 0 11px;

        font-size: 0.78rem;
    }

    .footer-column h3 {
        margin-bottom: 8px;

        font-size: 0.82rem;
    }

    .footer-column nav {
        gap: 5px;
    }

    .footer-column nav a {
        font-size: 0.77rem;
    }

    .footer-contact-item {
        margin-bottom: 8px;
    }

    .footer-contact-item strong {
        font-size: 0.77rem;
    }

    .footer-contact-item span,
    .footer-contact-item a {
        font-size: 0.74rem;
    }

    .footer-social a {
        width: 36px;
        height: 36px;
    }


    /* COPYRIGHT MOBILE */

    .site-footer
    .footer-bottom-inner {
        width: calc(100% - 28px);

        min-height: auto;

        padding: 13px 0;

        flex-direction: column;
        align-items: flex-start;

        gap: 7px;
    }

    .footer-bottom p,
    .footer-legal a {
        font-size: 0.68rem;
    }

    .footer-legal {
        flex-wrap: wrap;

        gap: 8px 16px;
    }


    /* WHATSAPP MOBILE */

    .whatsapp-float {
        right: 13px;
        bottom: 13px;

        width: 48px;
        height: 48px;

        min-height: 48px;

        padding: 0;
    }

    .whatsapp-float span {
        display: none;
    }

    .whatsapp-float i {
        font-size: 1.25rem;
    }
}


/* ==========================================================
   37. TRÈS PETITS MOBILES
========================================================== */

@media (max-width: 360px) {

    .container {
        width: calc(100% - 22px);
    }

    .brand-text span {
        display: none;
    }

    .brand-text strong {
        font-size: 0.68rem;
    }

    .home-hero-inner {
        width:
            calc(100% - 22px);
    }

    .home-hero h1 {
        font-size: 2.05rem;
    }

    .home-search-tabs {
        grid-template-columns:
            repeat(5, 78px);
    }

    .home-destination-card {
        height: 230px;
    }

    .site-footer .footer-main {
        width: calc(100% - 22px);

        gap: 21px;

        padding: 25px 0 22px;
    }

    .site-footer
    .footer-bottom-inner {
        width: calc(100% - 22px);
    }
}


/* ==========================================================
   38. ACCESSIBILITÉ
========================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }
}
/* ==========================================================
   ESSENTIELLE — AJUSTEMENTS FINAUX DESKTOP
========================================================== */


/* ==========================================================
   1. HEADER — NAVIGATION + BOUTON CONTACT
========================================================== */

.site-header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-header .main-nav {
    display: flex;
    align-items: center;

    gap: 22px;

    margin-left: auto;
}

.site-header .main-nav > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    white-space: nowrap;

    font-size: 0.92rem;
    font-weight: 650;

    padding: 8px 0;

    color: var(--text);
}


/* VRAI BOUTON CONTACT */

.site-header .main-nav > a.nav-contact {
    margin-left: 10px;

    padding: 12px 22px !important;

    border-radius: 10px;

    color: var(--navy-dark) !important;
    background: var(--gold) !important;

    font-weight: 800;

    box-shadow:
        0 8px 20px
        rgba(212, 154, 36, 0.20);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


/* Pas de ligne sous Contact */

.site-header .main-nav > a.nav-contact::after {
    display: none !important;
}


.site-header .main-nav > a.nav-contact:hover {
    background: var(--gold-light) !important;

    transform: translateY(-1px);

    box-shadow:
        0 10px 24px
        rgba(212, 154, 36, 0.28);
}


/* ==========================================================
   2. DESTINATIONS — CARTES PLUS LARGES
========================================================== */

.destinations-section .container {
    width: min(calc(100% - 60px), 1180px);
    max-width: 1180px;
}


.destinations-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

    width: 100%;
}


.destination-card {
    width: 100%;

    min-width: 0;

    border-radius: 17px;

    overflow: hidden;
}


.destination-card img {
    width: 100%;
    height: 310px;

    display: block;

    object-fit: cover;
}


/* ==========================================================
   3. FOOTER — VERSION DÉFINITIVE COMPACTE
========================================================== */

.site-footer {
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ---------- CTA ---------- */

.site-footer .footer-cta {
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;

    padding: 22px 0 !important;
}


.site-footer .footer-cta-inner {
    min-height: 0 !important;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;
}


.site-footer .footer-cta .eyebrow {
    margin: 0 0 5px !important;
}


.site-footer .footer-cta h2 {
    margin: 0 !important;

    font-size: clamp(1.8rem, 2.3vw, 2.45rem);

    line-height: 1.05;
}


/* ---------- CONTENU PRINCIPAL ---------- */

.site-footer .footer-main {
    width: min(calc(100% - 48px), 1120px) !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 auto !important;

    /*
       C'est cette valeur qui supprime
       le grand espace bleu de ta capture.
    */
    padding: 18px 0 !important;

    display: grid !important;

    grid-template-columns:
        1.15fr
        0.75fr
        0.75fr
        1fr !important;

    align-items: start !important;
    align-content: start !important;

    gap: 45px !important;
}


.site-footer .footer-brand,
.site-footer .footer-column,
.site-footer .footer-contact {
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    align-self: start !important;
}


/* ---------- TITRES ---------- */

.site-footer .footer-column h3,
.site-footer .footer-contact h3 {
    margin: 0 0 6px !important;

    font-size: 0.84rem !important;

    line-height: 1.2;
}


/* ---------- LIENS ---------- */

.site-footer .footer-column nav {
    display: flex !important;
    flex-direction: column !important;

    gap: 3px !important;
}


.site-footer .footer-column nav a {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 0.78rem !important;

    line-height: 1.35 !important;
}


/* ---------- CONTACT ---------- */

.site-footer .footer-contact-item {
    margin: 0 0 5px !important;

    gap: 7px !important;
}


.site-footer .footer-contact-item strong {
    font-size: 0.80rem !important;

    line-height: 1.25 !important;
}


.site-footer .footer-contact-item span,
.site-footer .footer-contact-item a {
    font-size: 0.76rem !important;

    line-height: 1.3 !important;
}


/* ---------- RÉSEAUX ---------- */

.site-footer .footer-social {
    margin: 0 !important;

    gap: 6px !important;
}


.site-footer .footer-social a {
    width: 30px !important;
    height: 30px !important;
}


/* ---------- COPYRIGHT ---------- */

.site-footer .footer-bottom {
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


.site-footer .footer-bottom-inner {
    width: min(calc(100% - 48px), 1120px) !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 auto !important;

    padding: 8px 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;
}


.site-footer .footer-bottom p,
.site-footer .footer-legal a {
    margin: 0 !important;

    font-size: 0.71rem !important;

    line-height: 1.2 !important;
}


/* ==========================================================
   TABLETTE
========================================================== */

@media (max-width: 1050px) {

    .site-header .main-nav {
        gap: 14px;
    }

    .site-header .main-nav > a {
        font-size: 0.86rem;
    }

    .site-header .main-nav > a.nav-contact {
        margin-left: 4px;

        padding: 10px 15px !important;
    }


    .destinations-section .container {
        width: min(calc(100% - 40px), 900px);
    }

    .destinations-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }

    .destination-card img {
        height: 300px;
    }


    .site-footer .footer-main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 20px 45px !important;

        padding: 20px 0 !important;
    }
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 760px) {

    /*
       Le menu principal sera géré par
       ton bouton hamburger.
    */

    .site-header .main-nav {
        gap: 0;
    }

    .site-header .main-nav > a.nav-contact {
        width: 100%;

        margin: 8px 0 0 !important;

        padding: 12px 18px !important;
    }


    /* DESTINATIONS EN COLONNE */

    .destinations-section .container {
        width: calc(100% - 32px);
    }

    .destinations-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .destination-card img {
        height: 330px;
    }


    /* FOOTER */

    .site-footer .footer-cta {
        padding: 20px 0 !important;
    }

    .site-footer .footer-cta-inner {
        flex-direction: column;

        align-items: flex-start;

        gap: 14px;
    }


    .site-footer .footer-main {
        width: calc(100% - 32px) !important;

        grid-template-columns: 1fr !important;

        gap: 18px !important;

        padding: 20px 0 !important;
    }


    .site-footer .footer-brand,
    .site-footer .footer-column,
    .site-footer .footer-contact {
        grid-column: auto !important;
    }


    .site-footer .footer-bottom-inner {
        width: calc(100% - 32px) !important;

        padding: 10px 0 !important;

        flex-direction: column;

        align-items: flex-start !important;

        gap: 6px;
    }
}
/* ==========================================================
   PAGE VOLS — CORRECTIONS FINALES DES COULEURS
========================================================== */


/* ==========================================================
   1. HERO VOLS
========================================================== */

.flight-hero {
    color: #ffffff;
}


/* Petit titre ESSENTIELLE VOYAGES */

.flight-hero .flight-eyebrow {
    color: #f0b33f !important;
}


/* Titre principal */

.flight-hero h1 {
    color: #ffffff !important;
}


/* Partie dorée : "aller ?" */

.flight-hero h1 span {
    color: #f0b33f !important;
}


/* Description */

.flight-hero p {
    color: rgba(255, 255, 255, 0.90) !important;
}


/* ==========================================================
   2. PETITE LIGNE AVANT "ESSENTIELLE VOYAGES"
========================================================== */

.flight-hero .flight-eyebrow::before {
    background: #f0b33f !important;
}


/* ==========================================================
   3. SUPPRIMER LA GRANDE LIGNE DORÉE AU-DESSUS DU FORMULAIRE
========================================================== */

.flight-search-card {
    border-top: none !important;
}


/* Certaines anciennes règles peuvent utiliser ::before */

.flight-search-card::before {
    display: none !important;
    content: none !important;
}


/* ==========================================================
   4. SECTION BLEUE AVANT LE FOOTER
========================================================== */

.flight-help {
    color: #ffffff !important;
}


/* Petit titre */

.flight-help .section-kicker {
    color: #f0b33f !important;
}


/* Gros titre */

.flight-help h2 {
    color: #ffffff !important;
}


/* Description */

.flight-help p {
    color: rgba(255, 255, 255, 0.84) !important;
}


/* ==========================================================
   5. BOUTON DE LA SECTION
========================================================== */

.flight-help .btn,
.flight-help .btn-gold {
    background: #e8a62b !important;
    color: #031c35 !important;

    border: none !important;
}


/* Survol */

.flight-help .btn:hover,
.flight-help .btn-gold:hover {
    background: #f0c45e !important;
    color: #031c35 !important;
}


/* ==========================================================
   6. RESPONSIVE
========================================================== */

@media (max-width: 760px) {

    .flight-hero h1 {
        color: #ffffff !important;
    }

    .flight-hero h1 span {
        color: #f0b33f !important;
    }

    .flight-help h2 {
        color: #ffffff !important;
    }

}
/* ==========================================================
   PAGE HÔTELS — CORRECTIONS FINALES
========================================================== */


/* HERO */

.hotel-hero {
    color: #ffffff !important;
}

.hotel-hero .hotel-eyebrow {
    color: #f0b33f !important;
}

.hotel-hero h1 {
    color: #ffffff !important;
}

.hotel-hero h1 span {
    color: #f0b33f !important;
}

.hotel-hero p {
    color: rgba(255, 255, 255, 0.90) !important;
}


/* Petite ligne décorative */

.hotel-hero .hotel-eyebrow::before {
    background: #f0b33f !important;
}


/* Retirer une éventuelle grande ligne sur le moteur */

.hotel-search-card {
    border-top: none !important;
}

.hotel-search-card::before {
    display: none !important;
    content: none !important;
}


/* ==========================================================
   SECTION AIDE AVANT FOOTER
========================================================== */

.hotel-help {
    color: #ffffff !important;
}

.hotel-help .section-kicker {
    color: #f0b33f !important;
}

.hotel-help h2 {
    color: #ffffff !important;
}

.hotel-help p {
    color: rgba(255, 255, 255, 0.84) !important;
}


/* Bouton */

.hotel-help .btn,
.hotel-help .btn-gold {
    background: #e8a62b !important;
    color: #031c35 !important;
    border: none !important;
}

.hotel-help .btn:hover,
.hotel-help .btn-gold:hover {
    background: #f0c45e !important;
    color: #031c35 !important;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 760px) {

    .hotel-hero h1 {
        color: #ffffff !important;
    }

    .hotel-hero h1 span {
        color: #f0b33f !important;
    }

    .hotel-help h2 {
        color: #ffffff !important;
    }

}
/* ==========================================================
   PAGE ÉTUDES — CORRECTIONS FINALES
========================================================== */


/* HERO */

.study-hero {
    color: #ffffff !important;
}

.study-hero .study-eyebrow {
    color: #f0b33f !important;
}

.study-hero h1 {
    color: #ffffff !important;
}

.study-hero h1 span {
    color: #f0b33f !important;
}

.study-hero-content > p {
    color: rgba(255, 255, 255, 0.88) !important;
}

.study-hero .study-secondary-link {
    color: #ffffff !important;
}


/* Carte du hero */

.study-hero-card {
    color: #ffffff;
}

.study-hero-card > span {
    color: #f0b33f !important;
}

.study-hero-card strong {
    color: #ffffff !important;
}

.study-hero-card p {
    color: rgba(255, 255, 255, 0.78) !important;
}


/* ==========================================================
   SECTION AIDE AVANT FOOTER
========================================================== */

.study-help {
    background: #062b50;
    color: #ffffff !important;
}

.study-help-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-top: 48px;
    padding-bottom: 48px;
}

.study-help .section-kicker {
    color: #f0b33f !important;
}

.study-help h2 {
    color: #ffffff !important;
    margin: 7px 0 10px;
}

.study-help p {
    color: rgba(255, 255, 255, 0.82) !important;
    margin: 0;
}


/* ==========================================================
   CODES PAYS
========================================================== */

.study-country-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 34px;
    height: 26px;

    margin-bottom: 8px;

    padding: 0 8px;

    border-radius: 6px;

    background: rgba(212, 154, 36, 0.12);

    color: #b77b08;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}


/* ==========================================================
   CHAMP SÉLECTIONNÉ
========================================================== */

.study-field-highlight {
    outline: 2px solid #d49a24 !important;
    outline-offset: 3px;

    transition: outline 0.2s ease;
}


/* ==========================================================
   CONFIRMATION FORMULAIRE
========================================================== */

.study-demo-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-bottom: 22px;
    padding: 16px 18px;

    background: #f1faf5;
    border: 1px solid #cce8d6;
    border-radius: 12px;

    color: #173b29;
}

.study-demo-message-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 32px;
    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: #dff4e7;
}

.study-demo-message p {
    margin: 4px 0 0;

    color: #52675b;
    line-height: 1.5;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 760px) {

    .study-hero h1 {
        color: #ffffff !important;
    }

    .study-hero h1 span {
        color: #f0b33f !important;
    }

    .study-help-inner {
        flex-direction: column;
        align-items: flex-start;

        gap: 20px;

        padding-top: 36px;
        padding-bottom: 36px;
    }

    .study-help h2 {
        color: #ffffff !important;
    }

}
/* ==========================================================
   PAGE MÉDICAL — CORRECTIONS FINALES
========================================================== */


/* HERO */

.medical-hero {
    color: #ffffff !important;
}

.medical-hero .medical-eyebrow {
    color: #f0b33f !important;
}

.medical-hero h1 {
    color: #ffffff !important;
}

.medical-hero h1 span {
    color: #f0b33f !important;
}

.medical-hero-content > p {
    color: rgba(255, 255, 255, 0.88) !important;
}

.medical-hero .medical-secondary-link {
    color: #ffffff !important;
}


/* CARTE HERO */

.medical-hero-card {
    color: #ffffff !important;
}

.medical-hero-card > span {
    color: #f0b33f !important;
}

.medical-hero-card strong {
    color: #ffffff !important;
}

.medical-hero-card p,
.medical-hero-card-bottom {
    color: rgba(255, 255, 255, 0.82) !important;
}


/* CHAMP MIS EN ÉVIDENCE */

.medical-field-highlight {
    outline: 2px solid #d49a24 !important;
    outline-offset: 3px;
}


/* CONFIRMATION */

.medical-demo-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-bottom: 22px;
    padding: 16px 18px;

    background: #f1faf5;
    border: 1px solid #cce8d6;
    border-radius: 12px;

    color: #173b29;
}

.medical-demo-message-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 32px;
    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: #dff4e7;
}

.medical-demo-message p {
    margin: 4px 0 0;
    color: #52675b;
}


/* ==========================================================
   SECTION AVANT FOOTER
========================================================== */

.medical-help {
    background: #062b50;
    color: #ffffff !important;
}

.medical-help-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;

    padding-top: 46px;
    padding-bottom: 46px;
}

.medical-help .section-kicker {
    color: #f0b33f !important;
}

.medical-help h2 {
    margin: 7px 0 10px;
    color: #ffffff !important;
}

.medical-help p {
    margin: 0;
    color: rgba(255, 255, 255, 0.84) !important;
}


/* RESPONSIVE */

@media (max-width: 760px) {

    .medical-hero h1 {
        color: #ffffff !important;
    }

    .medical-hero h1 span {
        color: #f0b33f !important;
    }

    .medical-help-inner {
        flex-direction: column;
        align-items: flex-start;

        gap: 20px;

        padding-top: 34px;
        padding-bottom: 34px;
    }

    .medical-help h2 {
        color: #ffffff !important;
    }

}
/* ==========================================================
   OMRA — HERO PHOTOS DÉFILANTES
========================================================== */

.omra-hero {
    position: relative;
    min-height: 650px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #031c35;
}


/* PHOTOS */

.omra-hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.omra-hero-slide {
    position: absolute;
    inset: 0;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    opacity: 0;

    transform: scale(1.04);

    transition:
        opacity 1.3s ease,
        transform 7s ease;
}

.omra-hero-slide.active {
    opacity: 1;
    transform: scale(1);
}


/* OVERLAY */

.omra-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(2, 19, 37, .94) 0%,
            rgba(3, 28, 53, .82) 38%,
            rgba(3, 28, 53, .48) 68%,
            rgba(3, 28, 53, .30) 100%
        );
}


/* CONTENU */

.omra-hero-inner {
    position: relative;
    z-index: 2;

    width: 100%;
}

.omra-hero-content {
    max-width: 680px;
    padding: 100px 0;
}

.omra-hero .omra-eyebrow {
    color: #f0b33f !important;
}

.omra-hero h1 {
    color: #ffffff !important;
}

.omra-hero h1 span {
    color: #f0b33f !important;
}

.omra-hero-content > p {
    max-width: 620px;
    margin: 24px auto 0;

    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.8;

    text-align: center;
}

.omra-secondary-link {
    color: #ffffff !important;
}


/* PETITES INFORMATIONS */

.omra-hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 25px;

    margin-top: 35px;
}

.omra-hero-features span {
    color: rgba(255,255,255,.90);
}

.omra-hero-features i {
    color: #f0b33f;
    margin-right: 7px;
}


/* INDICATEURS */

.omra-slider-controls {
    position: absolute;

    left: 50%;
    bottom: 30px;

    z-index: 5;

    display: flex;
    gap: 9px;

    transform: translateX(-50%);
}

.omra-slider-dot {
    width: 9px;
    height: 9px;

    padding: 0;

    border: 1px solid rgba(255,255,255,.85);
    border-radius: 50%;

    background: transparent;

    cursor: pointer;

    transition: .25s ease;
}

.omra-slider-dot.active {
    width: 28px;

    border-radius: 10px;

    border-color: #d49a24;

    background: #d49a24;
}


/* ==========================================================
   LA MECQUE / MÉDINE
========================================================== */

.omra-destination-photo {
    position: relative;

    height: 350px;

    overflow: hidden;

    background: #031c35;
}

.omra-destination-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .6s ease;
}

.omra-destination-card:hover
.omra-destination-photo img {
    transform: scale(1.05);
}

.omra-destination-photo::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(3,28,53,.88),
            rgba(3,28,53,.05) 65%
        );
}

.omra-destination-photo-overlay {
    position: absolute;

    left: 28px;
    right: 28px;
    bottom: 25px;

    z-index: 2;

    color: #ffffff;
}

.omra-destination-photo-overlay span {
    display: block;

    margin-bottom: 4px;

    color: #f0b33f;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .14em;
}

.omra-destination-photo-overlay h3 {
    margin: 0;

    color: #ffffff !important;

    font-family: "Playfair Display", serif;
    font-size: 32px;
}


/* MOBILE */

@media (max-width: 760px) {

    .omra-hero {
        min-height: 620px;
    }

    .omra-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(2,19,37,.92),
                rgba(3,28,53,.68)
            );
    }

    .omra-hero-content {
        padding: 80px 0 100px;
    }

    .omra-hero h1 {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        color: #ffffff !important;
    }

    .omra-hero h1 span {
        color: #f0b33f !important;
    }

    .omra-destination-photo {
        height: 290px;
    }

}

/* ==========================================================
   GARANTIES FINALES — WHATSAPP CIRCULAIRE
========================================================== */
.whatsapp-float {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #00d26a !important;
    color: #fff !important;
}

.whatsapp-float span,
.whatsapp-float::before,
.whatsapp-float::after {
    display: none !important;
    content: none !important;
}

.whatsapp-float i {
    margin: 0 !important;
    font-size: 25px !important;
}

@media (max-width: 540px) {
    .whatsapp-float {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        right: 14px !important;
        bottom: 14px !important;
    }
}

/* ==========================================================
   PAGE TRANSFERT — STYLES COMPLETS
========================================================== */

.transfer-hero{
    position:relative;
    min-height:610px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:var(--navy-dark);
    color:#fff;
}

.transfer-hero-background{
    position:absolute;
    inset:0;
    background:url('../images/transfer-hero.jpg') center/cover no-repeat;
    transform:scale(1.02);
}

.transfer-hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(3,28,53,.96) 0%,
        rgba(3,28,53,.86) 43%,
        rgba(3,28,53,.42) 72%,
        rgba(3,28,53,.2) 100%
    );
}

.transfer-hero-inner{
    position:relative;
    z-index:2;
    width:100%;
    padding:95px 0;
    display:flex;
    justify-content:center;
}

.transfer-hero-content{
    width:100%;
    max-width:780px;
    margin:0 auto;
    text-align:center;
}

/* TITRE HERO TRANSFERT — CORRIGÉ */
.transfer-hero-content h1{
    color:#ffffff;
    font-family:"Playfair Display",serif;
    font-size:clamp(44px,5.4vw,70px);
    line-height:1.04;
    letter-spacing:-1px;
}

.transfer-hero-content h1 span{
    display:block;
    color:var(--gold-light);
}

.transfer-eyebrow,
.contact-eyebrow{
    display:inline-flex;
    align-items:center;
    margin-bottom:18px;
    color:var(--gold-light);
    font-size:11px;
    font-weight:800;
    letter-spacing:2.4px;
    text-transform:uppercase;
}

.transfer-hero-content>p{
    max-width:650px;
    margin:22px auto 0;
    color:rgba(255,255,255,.84);
    font-size:16px;
    line-height:1.75;
}

.transfer-hero-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:18px;
    margin-top:30px;
}

.transfer-secondary-link{
    color:#fff;
    font-size:13px;
    font-weight:700;
    border-bottom:1px solid rgba(255,255,255,.45);
    padding:8px 0;
}

.transfer-secondary-link:hover{
    color:var(--gold-light);
    border-color:var(--gold-light);
}

.transfer-hero-features{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:22px;
    margin-top:34px;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.18);
    text-align:center;
}

.transfer-hero-features span{
    display:flex;
    align-items:center;
    gap:8px;
    color:rgba(255,255,255,.86);
    font-size:12px;
    font-weight:600;
}

.transfer-hero-features i{
    color:var(--gold-light);
}


/* ==========================================================
   TRANSFERT — SERVICES
========================================================== */

.transfer-services,
.transfer-process,
.transfer-request{
    padding:90px 0;
}

.transfer-services{
    background:#fff;
}

.transfer-services-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
}

.transfer-service-card{
    display:flex;
    flex-direction:column;
    min-height:360px;
    padding:26px;
    border:1px solid var(--border);
    border-radius:18px;
    background:#fff;
    box-shadow:var(--shadow-sm);
    transition:.25s;
}

.transfer-service-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-md);
    border-color:rgba(212,154,36,.35);
}

.transfer-service-logo{
    height:66px;
    display:flex;
    align-items:center;
    margin-bottom:20px;
}

.transfer-service-logo img{
    max-width:145px;
    max-height:54px;
    object-fit:contain;
}

.transfer-service-type{
    width:max-content;
    margin-bottom:12px;
    padding:5px 9px;
    border-radius:999px;
    background:rgba(212,154,36,.11);
    color:var(--gold-dark);
    font-size:9px;
    font-weight:800;
    letter-spacing:1.2px;
}

.transfer-service-card h3{
    font-family:"Playfair Display",serif;
    color:var(--navy);
    font-size:24px;
}

.transfer-service-card p{
    margin:10px 0 22px;
    color:var(--gray);
    font-size:13px;
    line-height:1.7;
}

.transfer-service-button{
    margin-top:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:13px 15px;
    border:0;
    border-radius:10px;
    background:var(--navy);
    color:#fff;
    font-size:12px;
    font-weight:700;
}

.transfer-service-button:hover{
    background:var(--gold);
    color:var(--navy-dark);
}

.transfer-services-note{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:9px;
    max-width:820px;
    margin:28px auto 0;
    color:var(--gray);
    font-size:12px;
    text-align:center;
}

.transfer-services-note i{
    margin-top:3px;
    color:var(--gold);
}


/* ==========================================================
   TRANSFERT — PARTENAIRES
========================================================== */

.transfer-partners{
    padding:48px 0;
    background:var(--cream);
    overflow:hidden;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

.transfer-partners-heading{
    text-align:center;
    margin-bottom:28px;
}

.transfer-partners-heading span{
    color:var(--navy);
    font-size:10px;
    font-weight:800;
    letter-spacing:2px;
}

.transfer-partners-heading p{
    margin-top:8px;
    color:var(--gray);
    font-size:12px;
}

.transfer-partners-slider{
    overflow:hidden;
}

.transfer-partners-track{
    width:max-content;
    display:flex;
    gap:18px;
    animation:transferScroll 28s linear infinite;
}

.transfer-partner-item,
.transfer-partner-placeholder{
    width:180px;
    height:82px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:15px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
}

.transfer-partner-item img{
    max-width:135px;
    max-height:48px;
    object-fit:contain;
}

.transfer-partner-placeholder{
    gap:8px;
    color:var(--gray);
    font-size:11px;
}

.transfer-partner-placeholder i{
    color:var(--gold);
}

@keyframes transferScroll{
    to{
        transform:translateX(-50%);
    }
}

@media(prefers-reduced-motion:reduce){
    .transfer-partners-track{
        animation:none;
    }
}


/* ==========================================================
   TRANSFERT — PROCESSUS
========================================================== */

.transfer-process{
    background:#fff;
}

.transfer-process-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
}

.transfer-process-grid article{
    position:relative;
    padding:28px 24px;
    border-radius:16px;
    background:var(--cream);
    border:1px solid var(--border);
}

.transfer-process-number{
    position:absolute;
    right:18px;
    top:14px;
    color:rgba(6,43,80,.12);
    font-family:"Playfair Display",serif;
    font-size:38px;
    font-weight:700;
}

.transfer-process-icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    margin-bottom:18px;
    border-radius:12px;
    background:var(--navy);
    color:var(--gold-light);
}

.transfer-process-grid h3{
    color:var(--navy);
    font-size:16px;
}

.transfer-process-grid p{
    margin-top:8px;
    color:var(--gray);
    font-size:12px;
    line-height:1.7;
}


/* ==========================================================
   TRANSFERT — FORMULAIRE
========================================================== */

.transfer-request{
    background:var(--cream);
}

.transfer-request-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:55px;
    align-items:start;
}

.transfer-request-intro h2{
    margin-top:8px;
    color:var(--navy);
    font-family:"Playfair Display",serif;
    font-size:clamp(34px,4vw,48px);
    line-height:1.1;
}

.transfer-request-intro>p{
    margin-top:18px;
    color:var(--gray);
    font-size:14px;
    line-height:1.75;
}

.transfer-request-points{
    display:grid;
    gap:12px;
    margin-top:25px;
}

.transfer-request-points>div{
    display:flex;
    align-items:center;
    gap:11px;
}

.transfer-request-points>div>span{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(212,154,36,.14);
    color:var(--gold-dark);
    font-size:10px;
}

.transfer-request-points p{
    color:var(--navy);
    font-size:13px;
    font-weight:700;
}

.transfer-security-box{
    display:flex;
    gap:14px;
    margin-top:28px;
    padding:18px;
    border:1px solid rgba(6,43,80,.1);
    border-radius:14px;
    background:#fff;
}

.transfer-security-icon{
    flex:0 0 40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:var(--navy);
    color:var(--gold-light);
}

.transfer-security-box p{
    color:var(--gray);
    font-size:12px;
    line-height:1.6;
}


/* ==========================================================
   FORMULAIRES TRANSFERT + CONTACT
========================================================== */

.transfer-form-card,
.contact-form-card{
    padding:32px;
    border:1px solid var(--border);
    border-radius:20px;
    background:#fff;
    box-shadow:var(--shadow-md);
}

.transfer-form-heading,
.contact-form-heading{
    margin-bottom:24px;
}

.transfer-form-heading>span,
.contact-form-heading>span{
    color:var(--gold);
    font-size:9px;
    font-weight:800;
    letter-spacing:2px;
}

.transfer-form-heading h3,
.contact-form-heading h3{
    margin-top:4px;
    color:var(--navy);
    font-family:"Playfair Display",serif;
    font-size:30px;
}

.transfer-form-heading p,
.contact-form-heading p{
    margin-top:7px;
    color:var(--gray);
    font-size:12px;
}

.transfer-form-row,
.contact-form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.transfer-form-group,
.contact-form-group{
    margin-bottom:16px;
}

.transfer-form-group label,
.contact-form-group label{
    display:block;
    margin-bottom:7px;
    color:var(--navy);
    font-size:9px;
    font-weight:800;
    letter-spacing:.8px;
}

.transfer-input-wrap,
.transfer-select-wrap,
.contact-input-wrap,
.contact-select-wrap{
    position:relative;
}

.transfer-input-wrap i,
.transfer-select-wrap i,
.contact-input-wrap i,
.contact-select-wrap i{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:var(--gold);
    font-size:13px;
    pointer-events:none;
}

.transfer-input-wrap input,
.transfer-select-wrap select,
.contact-input-wrap input,
.contact-select-wrap select,
.transfer-form-group textarea,
.contact-form-group textarea{
    width:100%;
    min-height:50px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff;
    outline:none;
    font-size:12px;
    transition:.2s;
}

.transfer-input-wrap input,
.transfer-select-wrap select,
.contact-input-wrap input,
.contact-select-wrap select{
    padding:0 14px 0 40px;
}

.transfer-form-group textarea,
.contact-form-group textarea{
    padding:13px 14px;
    resize:vertical;
}

.transfer-input-wrap input:focus,
.transfer-select-wrap select:focus,
.contact-input-wrap input:focus,
.contact-select-wrap select:focus,
.transfer-form-group textarea:focus,
.contact-form-group textarea:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(212,154,36,.10);
}

.transfer-consent,
.contact-consent{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:var(--gray);
    font-size:11px;
    line-height:1.5;
}

.transfer-consent input,
.contact-consent input{
    margin-top:3px;
    accent-color:var(--gold);
}

.transfer-submit-button,
.contact-submit-button{
    width:100%;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin-top:18px;
    border:0;
    border-radius:10px;
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:var(--navy-dark);
    font-size:12px;
    font-weight:800;
}

.transfer-submit-button:hover,
.contact-submit-button:hover{
    box-shadow:0 12px 28px rgba(212,154,36,.24);
    transform:translateY(-2px);
}

.transfer-form-note,
.contact-form-note,
.transfer-textarea-help{
    margin-top:10px;
    color:var(--gray-light);
    font-size:10px;
    line-height:1.5;
}


/* ==========================================================
   TRANSFERT — BANDEAU FINAL
========================================================== */

.transfer-confidence{
    padding:38px 0;
    background:var(--navy);
}

.transfer-confidence-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    color:#fff;
}

/* CORRECTION : TITRE BLANC */
.transfer-confidence-inner h2{
    color:#ffffff;
    font-family:"Playfair Display",serif;
    font-size:28px;
}

.transfer-confidence-inner p{
    color:rgba(255,255,255,.72);
    font-size:12px;
}


/* ==========================================================
   PAGE CONTACT — STYLES COMPLETS
========================================================== */

.contact-hero{
    position:relative;
    min-height:520px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:var(--navy-dark);
    color:#fff;
}

.contact-hero-background{
    position:absolute;
    inset:0;
    background:url('../images/contact-hero.jpg') center/cover no-repeat;
    transform:scale(1.02);
}

.contact-hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(3,28,53,.97) 0%,
        rgba(3,28,53,.85) 48%,
        rgba(3,28,53,.35) 100%
    );
}

.contact-hero-inner{
    position:relative;
    z-index:2;
    width:100%;
    padding:85px 0;
    display:flex;
    justify-content:center;
}

.contact-hero-content{
    width:100%;
    max-width:790px;
    margin:0 auto;
    text-align:center;
}

/* TITRE HERO CONTACT — CORRIGÉ */
.contact-hero-content h1{
    color:#ffffff;
    font-family:"Playfair Display",serif;
    font-size:clamp(44px,5.4vw,70px);
    line-height:1.04;
    letter-spacing:-1px;
}

.contact-hero-content h1 span{
    display:block;
    color:var(--gold-light);
}

.contact-hero-content>p{
    max-width:650px;
    margin:22px auto 0;
    color:rgba(255,255,255,.84);
    font-size:16px;
    line-height:1.75;
}

.contact-hero-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:18px;
    margin-top:30px;
}

.contact-hero-link{
    color:#fff;
    font-size:13px;
    font-weight:700;
    border-bottom:1px solid rgba(255,255,255,.45);
    padding:8px 0;
}

.contact-hero-link:hover{
    color:var(--gold-light);
    border-color:var(--gold-light);
}

.btn-primary{
    min-height:52px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 25px;
    border-radius:10px;
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:var(--navy-dark);
    font-size:12px;
    font-weight:800;
}

.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(212,154,36,.25);
}


/* ==========================================================
   CONTACT — CONTENU
========================================================== */

.contact-main{
    padding:90px 0;
    background:var(--cream);
}

.contact-layout{
    display:grid;
    grid-template-columns:.88fr 1.12fr;
    gap:58px;
    align-items:start;
}

.section-eyebrow{
    display:inline-block;
    color:var(--gold);
    font-size:10px;
    font-weight:800;
    letter-spacing:2px;
}

.contact-info h2{
    margin-top:8px;
    color:var(--navy);
    font-family:"Playfair Display",serif;
    font-size:clamp(34px,4vw,48px);
    line-height:1.12;
}

.contact-info-intro{
    margin:17px 0 28px;
    color:var(--gray);
    font-size:14px;
    line-height:1.75;
}

.contact-detail{
    display:flex;
    align-items:center;
    gap:14px;
    padding:15px 0;
    border-bottom:1px solid var(--border);
}

.contact-detail-icon{
    flex:0 0 42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:var(--navy);
    color:var(--gold-light);
}

.contact-detail>div:last-child{
    display:flex;
    flex-direction:column;
}

.contact-detail span{
    color:var(--gray);
    font-size:8px;
    font-weight:800;
    letter-spacing:1.4px;
}

.contact-detail strong,
.contact-detail a{
    margin-top:2px;
    color:var(--navy);
    font-size:13px;
    font-weight:700;
}

.contact-detail a:hover{
    color:var(--gold-dark);
}

.contact-info-note{
    display:flex;
    gap:12px;
    margin-top:24px;
    padding:16px;
    border-radius:12px;
    background:#fff;
    border:1px solid var(--border);
}

.contact-info-note i{
    margin-top:3px;
    color:var(--gold);
}

.contact-info-note p{
    color:var(--gray);
    font-size:11px;
    line-height:1.6;
}


/* ==========================================================
   CONTACT — BANDEAU FINAL
========================================================== */

.contact-bottom{
    padding:55px 0;
    background:var(--navy);
    color:#fff;
}

.contact-bottom-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
}

.contact-bottom-inner>div:first-child>span{
    color:var(--gold-light);
    font-size:9px;
    font-weight:800;
    letter-spacing:2px;
}

/* CORRECTION : TITRE BLANC */
.contact-bottom h2{
    max-width:540px;
    margin-top:5px;
    color:#ffffff;
    font-family:"Playfair Display",serif;
    font-size:32px;
    line-height:1.15;
}

.contact-bottom-items{
    display:flex;
    align-items:center;
    gap:12px;
}

.contact-bottom-items>div{
    min-width:82px;
    padding:13px 10px;
    text-align:center;
    border:1px solid rgba(255,255,255,.13);
    border-radius:11px;
    background:rgba(255,255,255,.04);
}

.contact-bottom-items i{
    display:block;
    margin-bottom:5px;
    color:var(--gold-light);
}

.contact-bottom-items span{
    color:#ffffff;
    font-size:9px;
    font-weight:700;
}


/* ==========================================================
   TRANSFERT + CONTACT — RESPONSIVE
========================================================== */

@media(max-width:980px){

    .transfer-services-grid,
    .transfer-process-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .transfer-request-grid,
    .contact-layout{
        grid-template-columns:1fr;
        gap:38px;
    }

    .transfer-request-intro,
    .contact-info{
        max-width:720px;
    }

    .contact-bottom-inner{
        align-items:flex-start;
        flex-direction:column;
    }

    .transfer-confidence-inner{
        align-items:flex-start;
        flex-direction:column;
    }
}


@media(max-width:700px){

    .transfer-hero,
    .contact-hero{
        min-height:auto;
    }

    .transfer-hero-inner,
    .contact-hero-inner{
        padding:70px 0;
    }

    .transfer-hero-content,
    .contact-hero-content{
        max-width:100%;
        padding-left:4px;
        padding-right:4px;
    }

    .transfer-hero-background,
    .contact-hero-background{
        background-position:center center;
    }

    .transfer-hero-content h1,
    .contact-hero-content h1{
        font-size:clamp(38px,11vw,52px);
    }

    .transfer-hero-overlay,
    .contact-hero-overlay{
        background:linear-gradient(
            90deg,
            rgba(3,28,53,.96),
            rgba(3,28,53,.76)
        );
    }

    .transfer-hero-features{
        gap:13px;
    }

    .transfer-services,
    .transfer-process,
    .transfer-request,
    .contact-main{
        padding:65px 0;
    }

    .transfer-services-grid,
    .transfer-process-grid{
        grid-template-columns:1fr;
    }

    .transfer-form-row,
    .contact-form-row{
        grid-template-columns:1fr;
        gap:0;
    }

    .transfer-form-card,
    .contact-form-card{
        padding:24px 18px;
    }

    .contact-bottom-items{
        width:100%;
        display:grid;
        grid-template-columns:repeat(2,1fr);
    }

    .contact-bottom-items>div{
        min-width:0;
    }

    .transfer-confidence-inner h2{
        font-size:24px;
    }
}


@media(max-width:480px){

    .transfer-hero-actions,
    .contact-hero-actions{
        align-items:stretch;
        flex-direction:column;
    }

    .transfer-hero-actions .btn,
    .contact-hero-actions .btn-primary{
        width:100%;
    }

    .transfer-secondary-link,
    .contact-hero-link{
        text-align:center;
        border:0;
    }

    .transfer-hero-features{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .transfer-service-card{
        min-height:0;
    }

    .transfer-partner-item,
    .transfer-partner-placeholder{
        width:145px;
        height:72px;
    }

    .contact-bottom h2{
        font-size:27px;
    }
}
/* ==========================================================
   TRANSFERT — MOBILE FINAL
   IMPORTANT :
   - Les zones de présentation sont centrées
   - "Demande d'assistance" reste comme actuellement
========================================================== */

@media (max-width: 760px) {

    /* ======================================================
       1. HERO
       INTERNATIONAL / MOBILE MONEY / ASSISTANCE
       UNE SEULE LIGNE
    ====================================================== */

    .transfer-hero-features {
        width: 100%;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 10px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }

    .transfer-hero-features span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 4px;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 10px;
        line-height: 1.2;

        white-space: nowrap;
    }

    .transfer-hero-features span i {
        flex: 0 0 auto;
        font-size: 10px;
    }


    /* ======================================================
       2. RIA / MONEYGRAM / ORANGE MONEY / MOBILE MONEY
       2 CARTES PAR LIGNE
    ====================================================== */

    .transfer-services-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;
    }

    .transfer-service-card {
        width: 100%;
        min-width: 0;
        min-height: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;

        padding: 18px 10px !important;

        text-align: center !important;
    }

    .transfer-service-logo {
        width: 100%;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 auto 12px !important;

        text-align: center !important;
    }

    .transfer-service-logo img {
        display: block;

        width: auto;
        max-width: 105px;
        max-height: 45px;

        margin: 0 auto !important;

        object-fit: contain;
        object-position: center;
    }

    .transfer-service-type {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 auto 8px !important;

        font-size: 8px;
        line-height: 1.2;

        text-align: center !important;
    }

    .transfer-service-card h3 {
        width: 100%;

        margin: 0 0 7px !important;

        font-size: 17px;
        line-height: 1.2;

        text-align: center !important;
    }

    .transfer-service-card p {
        width: 100%;

        margin: 0 auto 12px !important;

        font-size: 10px;
        line-height: 1.45;

        text-align: center !important;
    }

    .transfer-service-button {
        width: 100%;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 5px;

        margin-top: auto;

        padding: 9px 5px;

        font-size: 9px;

        text-align: center !important;
    }


    /* ======================================================
       3. COMMENT ÇA MARCHE
       4 ÉTAPES SUR UNE SEULE LIGNE
    ====================================================== */

    .transfer-process-grid {
        width: 100%;

        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

        gap: 6px !important;
    }

    .transfer-process-grid article {
        min-width: 0;
        min-height: 0;

        padding: 14px 5px !important;

        text-align: center !important;
    }

    .transfer-process-number {
        text-align: center !important;
        font-size: 8px;
    }

    .transfer-process-icon {
        width: 34px !important;
        height: 34px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 8px auto !important;

        font-size: 13px !important;
    }

    .transfer-process-grid article h3 {
        margin: 0 0 5px !important;

        font-size: 10px !important;
        line-height: 1.2;

        text-align: center !important;
    }

    .transfer-process-grid article p {
        margin: 0 !important;

        font-size: 8px !important;
        line-height: 1.3;

        text-align: center !important;
    }


    /* ======================================================
       4. VOTRE TRANSFERT
       COMMENT POUVONS-NOUS VOUS AIDER ?
       CENTRÉ
    ====================================================== */

    .transfer-request-grid {
        width: 100%;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .transfer-request-intro {
        width: 100%;
        max-width: 620px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }

    .transfer-request-intro .transfer-eyebrow,
    .transfer-request-intro .section-kicker {
        display: block;

        width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }

    .transfer-request-intro h2 {
        width: 100%;
        max-width: 540px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }

    .transfer-request-intro > p {
        width: 100%;
        max-width: 540px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    /* LISTE AVEC LES COCHES :
       centrée comme bloc mais texte lisible à gauche */

    .transfer-request-points {
        width: fit-content;
        max-width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: left !important;
    }

    .transfer-request-points li {
        text-align: left !important;
    }


    /* CARTE SÉCURITÉ */

    .transfer-security-note {
        width: 100%;
        max-width: 520px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: left !important;
    }


    /* ======================================================
       5. DEMANDE D'ASSISTANCE
       NE PAS MODIFIER SON ALIGNEMENT
    ====================================================== */

    .transfer-form-card {
        width: 100%;
        max-width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        /* PAS de text-align:center ici */
    }

    /*
       On conserve volontairement les styles existants de :

       .transfer-form-heading
       .transfer-form
       .transfer-form-group
       label
       input
       select
       textarea

       Ainsi la section "Demande d'assistance"
       reste exactement comme sur ta capture.
    */


    /* ======================================================
       6. BLOC FINAL
       ESSENTIELLE TRANSFERT
       BESOIN D'AIDE POUR VOTRE OPÉRATION ?
       CENTRÉ
    ====================================================== */

    .transfer-confidence {
        text-align: center !important;
    }

    .transfer-confidence-inner {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }

    .transfer-confidence-content {
        width: 100% !important;
        max-width: 620px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }

    .transfer-confidence .transfer-eyebrow,
    .transfer-confidence .section-kicker {
        display: block;

        width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }

    .transfer-confidence h2 {
        width: 100%;
        max-width: 520px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }

    .transfer-confidence p {
        width: 100%;
        max-width: 520px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }

    .transfer-confidence .btn,
    .transfer-confidence a {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* ==========================================================
   TRÈS PETITS MOBILES
========================================================== */

@media (max-width: 430px) {

    /* ======================================================
       HERO
    ====================================================== */

    .transfer-hero-features {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        justify-content: center !important;

        gap: 7px !important;
    }

    .transfer-hero-features span {
        font-size: 8.5px !important;
    }

    .transfer-hero-features span i {
        font-size: 9px !important;
    }


    /* ======================================================
       SERVICES
    ====================================================== */

    .transfer-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 8px !important;
    }

    .transfer-service-card {
        padding: 15px 7px !important;
    }

    .transfer-service-logo img {
        max-width: 90px;
        max-height: 40px;
    }

    .transfer-service-card h3 {
        font-size: 15px;
    }

    .transfer-service-card p {
        font-size: 9px;
    }


    /* ======================================================
       COMMENT ÇA MARCHE
    ====================================================== */

    .transfer-process-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

        gap: 4px !important;
    }

    .transfer-process-grid article {
        padding: 12px 3px !important;
    }

    .transfer-process-icon {
        width: 30px !important;
        height: 30px !important;

        font-size: 11px !important;
    }

    .transfer-process-grid article h3 {
        font-size: 8.5px !important;
    }

    .transfer-process-grid article p {
        font-size: 7px !important;
        line-height: 1.25;
    }


    /* ======================================================
       VOTRE TRANSFERT
    ====================================================== */

    .transfer-request-intro {
        text-align: center !important;
    }

    .transfer-request-intro h2 {
        font-size: clamp(28px, 9vw, 38px);
        line-height: 1.05;

        text-align: center !important;
    }

    .transfer-request-intro > p {
        text-align: center !important;
    }


    /* ======================================================
       DEMANDE D'ASSISTANCE
       ON LA LAISSE TELLE QUELLE
    ====================================================== */

    .transfer-form-card {
        width: 100%;
        max-width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* ======================================================
       BLOC FINAL
    ====================================================== */

    .transfer-confidence,
    .transfer-confidence-inner,
    .transfer-confidence-content {
        text-align: center !important;
    }

    .transfer-confidence h2,
    .transfer-confidence p {
        text-align: center !important;
    }
}
/* ==========================================================
   OMRA — MOBILE FINAL
   ==========================================================
   - Hero centré
   - Vol / Hébergement / La Mecque / Médine sur 1 ligne
   - Services centrés
   - Destinations centrées
   - Formules en défilement horizontal
   - 1 formule visible à la fois
   - Comment ça marche : 4 étapes sur 1 ligne
   - Hauteur des étapes adaptée au contenu
   - Préparons votre voyage centré
   - Demande de voyage NON MODIFIÉE
   - Informations pratiques centrées
   - CTA final centré
========================================================== */

@media (max-width: 760px) {


    /* ======================================================
       1. HERO OMRA
    ====================================================== */

    .omra-hero-inner {
        width: 100% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 auto !important;

        text-align: center !important;
    }


    .omra-hero-content {
        width: 100% !important;
        max-width: 680px !important;

        margin: 0 auto !important;

        padding-left: 14px !important;
        padding-right: 14px !important;

        text-align: center !important;
    }


    .omra-eyebrow {
        display: block;

        width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .omra-hero h1 {
        width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .omra-hero-content > p {
        width: 100% !important;
        max-width: 560px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* ======================================================
       2. BOUTONS DU HERO
    ====================================================== */

    .omra-hero-actions {
        width: 100%;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        flex-wrap: wrap;

        gap: 12px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* ======================================================
       3. HERO :
       VOL / HÉBERGEMENT / LA MECQUE / MÉDINE
       UNE SEULE LIGNE
    ====================================================== */

    .omra-hero-features {
        width: 100% !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 10px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .omra-hero-features span {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 4px !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 9px !important;
        line-height: 1.2;

        white-space: nowrap;
    }


    .omra-hero-features i {
        flex: 0 0 auto;

        font-size: 9px !important;
    }



    /* ======================================================
       4. TITRES DES SECTIONS
    ====================================================== */

    .omra-intro .section-heading,
    .omra-destinations .section-heading,
    .omra-packages .section-heading,
    .omra-process .section-heading,
    .omra-practical .section-heading {

        width: 100% !important;
        max-width: 650px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .omra-intro .section-heading h2,
    .omra-intro .section-heading p,

    .omra-destinations .section-heading h2,
    .omra-destinations .section-heading p,

    .omra-packages .section-heading h2,
    .omra-packages .section-heading p,

    .omra-process .section-heading h2,
    .omra-process .section-heading p,

    .omra-practical .section-heading h2,
    .omra-practical .section-heading p {

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* ======================================================
       5. SERVICES OMRA
    ====================================================== */

    .omra-services-grid {
        text-align: center !important;
    }


    .omra-services-grid article {
        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;

        text-align: center !important;
    }


    .omra-service-icon {
        margin-left: auto !important;
        margin-right: auto !important;
    }


    .omra-services-grid h3,
    .omra-services-grid p {
        width: 100%;

        text-align: center !important;
    }



    /* ======================================================
       6. LA MECQUE / MÉDINE
    ====================================================== */

    .omra-destination-grid {
        text-align: center !important;
    }


    .omra-destination-card {
        text-align: center !important;
    }


    .omra-destination-content {
        text-align: center !important;
    }


    .omra-destination-content p {
        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* ======================================================
       7. FORMULES OMRA
       DÉFILEMENT HORIZONTAL
    ====================================================== */

    .omra-packages {
        overflow: hidden;
    }


    .omra-package-grid {
        width: 100% !important;

        display: flex !important;
        grid-template-columns: none !important;

        align-items: stretch !important;

        gap: 14px !important;

        overflow-x: auto !important;
        overflow-y: visible !important;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;

        padding: 8px 20px 18px !important;

        margin: 0 !important;

        scrollbar-width: none;
    }


    /* CACHE LA BARRE DE DÉFILEMENT */

    .omra-package-grid::-webkit-scrollbar {
        display: none;
    }



    /* ======================================================
       CHAQUE FORMULE
    ====================================================== */

    .omra-package-card {
        flex: 0 0 calc(100% - 40px) !important;

        width: calc(100% - 40px) !important;
        min-width: calc(100% - 40px) !important;
        max-width: none !important;

        min-height: 0 !important;
        height: auto !important;

        scroll-snap-align: center;

        display: flex !important;
        flex-direction: column !important;

        padding: 25px 20px !important;

        margin: 0 !important;

        text-align: center !important;
    }



    /* ======================================================
       CARTE CONFORT
    ====================================================== */

    .omra-package-card.featured {
        transform: none !important;
    }



    /* ======================================================
       FORMULE / TITRE
    ====================================================== */

    .omra-package-top {
        width: 100%;

        text-align: center !important;
    }


    .omra-package-top > span {
        display: block;

        width: 100%;

        font-size: 9px !important;
        letter-spacing: 1.5px;

        text-align: center !important;
    }


    .omra-package-top h3 {
        width: 100%;

        margin: 8px 0 10px !important;

        font-size: 24px !important;
        line-height: 1.15;

        text-align: center !important;
    }


    .omra-package-top p {
        width: 100%;
        max-width: 300px;

        margin: 0 auto !important;

        font-size: 12px !important;
        line-height: 1.5;

        text-align: center !important;
    }



    /* ======================================================
       BADGE POPULAIRE
    ====================================================== */

    .omra-package-popular {
        font-size: 8px !important;
        letter-spacing: 1px;

        text-align: center !important;
    }



    /* ======================================================
       PRESTATIONS DES FORMULES
    ====================================================== */

    .omra-package-features {
        width: 100%;
        max-width: 290px;

        margin: 20px auto !important;

        text-align: left !important;
    }


    .omra-package-features p {
        width: 100%;

        display: flex !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

        gap: 8px;

        margin: 8px 0 !important;

        font-size: 11px !important;
        line-height: 1.35;

        text-align: left !important;
    }


    .omra-package-features p i {
        flex: 0 0 auto;

        margin-top: 2px;

        font-size: 9px !important;
    }



    /* ======================================================
       BOUTON DES FORMULES
    ====================================================== */

    .omra-package-button {
        width: 100%;
        max-width: 290px;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 7px;

        margin: auto auto 0 !important;

        padding: 13px 12px !important;

        font-size: 11px !important;

        text-align: center !important;
    }



    /* ======================================================
       NOTE SOUS LES FORMULES
    ====================================================== */

    .omra-package-note {
        width: calc(100% - 30px);
        max-width: 620px;

        margin: 12px auto 0 !important;

        font-size: 10px;
        line-height: 1.4;

        text-align: center !important;
    }



    /* ======================================================
       8. COMMENT ÇA MARCHE
       4 ÉTAPES SUR UNE SEULE LIGNE
    ====================================================== */

    .omra-process-grid {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap: 5px !important;

        align-items: start !important;
    }



    /* CHAQUE ÉTAPE */

    .omra-process-grid article {
        width: 100% !important;
        min-width: 0 !important;

        min-height: 0 !important;
        height: auto !important;

        align-self: start !important;

        padding: 12px 4px 14px !important;

        text-align: center !important;
    }



    /* NUMÉRO */

    .omra-process-number {
        display: block;

        width: 100%;

        margin: 0 0 4px !important;

        font-size: 7px !important;
        line-height: 1;

        text-align: center !important;
    }



    /* ICÔNE */

    .omra-process-icon {
        width: 30px !important;
        height: 30px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 4px auto 7px !important;

        font-size: 11px !important;
    }



    /* TITRE */

    .omra-process-grid article h3 {
        margin: 0 0 5px !important;

        font-size: 8px !important;
        line-height: 1.15;

        text-align: center !important;
    }



    /* TEXTE */

    .omra-process-grid article p {
        margin: 0 !important;
        padding: 0 !important;

        font-size: 6.5px !important;
        line-height: 1.25;

        text-align: center !important;
    }



    /* ======================================================
       9. PRÉPARONS VOTRE VOYAGE
       CENTRÉ
    ====================================================== */

    .omra-request-grid {
        width: 100%;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    .omra-request-intro {
        width: 100%;
        max-width: 620px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .omra-request-intro > .section-kicker {
        display: block;

        width: 100%;

        text-align: center !important;
    }


    .omra-request-intro > h2 {
        width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .omra-request-intro > p {
        width: 100%;
        max-width: 540px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* ======================================================
       POINTS DE LA DEMANDE
       BLOC CENTRÉ
    ====================================================== */

    .omra-request-points {
        width: fit-content;
        max-width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: left !important;
    }


    .omra-request-points > div {
        text-align: left !important;
    }



    /* ======================================================
       INFORMATION IMPORTANTE
    ====================================================== */

    .omra-information-box {
        width: 100%;
        max-width: 540px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: left !important;
    }



    /* ======================================================
       10. DEMANDE DE VOYAGE
       ON NE TOUCHE PAS AU CONTENU DU FORMULAIRE
    ====================================================== */

    .omra-form-card {
        width: 100%;
        max-width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /*
       VOLONTAIREMENT AUCUN text-align:center SUR :

       .omra-form-heading
       .omra-form-group
       .omra-form-row
       .omra-input-wrap
       .omra-select-wrap
       .omra-travelers
       .omra-consent
       .omra-submit-button

       "Demande de voyage" conserve donc
       sa présentation actuelle.
    */



    /* ======================================================
       11. INFORMATIONS PRATIQUES
    ====================================================== */

    .omra-practical-grid {
        text-align: center !important;
    }


    .omra-practical-grid article {
        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;

        text-align: center !important;
    }


    .omra-practical-grid article > span {
        margin-left: auto !important;
        margin-right: auto !important;
    }


    .omra-practical-grid article div,
    .omra-practical-grid h3,
    .omra-practical-grid p {
        width: 100%;

        text-align: center !important;
    }



    /* ======================================================
       12. CTA FINAL
    ====================================================== */

    .omra-cta {
        text-align: center !important;
    }


    .omra-cta-inner {
        width: 100%;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 18px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .omra-cta-inner > div {
        width: 100%;

        text-align: center !important;
    }


    .omra-cta-inner > div > span {
        display: block;

        width: 100%;

        text-align: center !important;
    }


    .omra-cta-inner h2,
    .omra-cta-inner p {
        width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .omra-cta-inner > a {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}



/* ==========================================================
   OMRA — PETITS MOBILES
========================================================== */

@media (max-width: 430px) {


    /* ======================================================
       HERO : 4 INFOS SUR UNE LIGNE
    ====================================================== */

    .omra-hero-features {
        gap: 6px !important;
    }


    .omra-hero-features span {
        font-size: 8px !important;
    }


    .omra-hero-features i {
        font-size: 8px !important;
    }



    /* ======================================================
       FORMULES
       UNE GRANDE CARTE À LA FOIS
    ====================================================== */

    .omra-package-grid {
        gap: 12px !important;

        padding-left: 16px !important;
        padding-right: 16px !important;
    }


    .omra-package-card {
        /*
           Environ 90 % de la largeur.
           On voit légèrement la carte suivante :
           cela indique naturellement qu'on peut glisser.
        */

        flex: 0 0 90% !important;

        width: 90% !important;
        min-width: 90% !important;

        padding: 24px 18px !important;
    }


    .omra-package-top h3 {
        font-size: 23px !important;
    }


    .omra-package-top p {
        font-size: 11px !important;
    }


    .omra-package-features p {
        font-size: 10px !important;
    }


    .omra-package-button {
        font-size: 10px !important;
    }



    /* ======================================================
       COMMENT ÇA MARCHE
       4 CASES SUR UNE LIGNE
       HAUTEUR ADAPTÉE AU CONTENU
    ====================================================== */

    .omra-process-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap: 4px !important;

        align-items: start !important;
    }


    .omra-process-grid article {
        min-height: 0 !important;
        height: auto !important;

        align-self: start !important;

        padding: 10px 3px 12px !important;
    }


    .omra-process-number {
        margin-bottom: 3px !important;

        font-size: 6.5px !important;
    }


    .omra-process-icon {
        width: 28px !important;
        height: 28px !important;

        margin: 3px auto 6px !important;

        font-size: 10px !important;
    }


    .omra-process-grid article h3 {
        margin-bottom: 4px !important;

        font-size: 7.5px !important;
        line-height: 1.15;
    }


    .omra-process-grid article p {
        font-size: 6px !important;
        line-height: 1.2;
    }



    /* ======================================================
       PRÉPARONS VOTRE VOYAGE
    ====================================================== */

    .omra-request-intro,
    .omra-request-intro > h2,
    .omra-request-intro > p {
        text-align: center !important;
    }



    /* ======================================================
       DEMANDE DE VOYAGE
       INCHANGÉE
    ====================================================== */

    .omra-form-card {
        width: 100%;
        max-width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;
    }



    /* ======================================================
       CTA FINAL
    ====================================================== */

    .omra-cta-inner,
    .omra-cta-inner > div,
    .omra-cta-inner h2,
    .omra-cta-inner p {
        text-align: center !important;
    }
}
/* ==========================================================
   MÉDICAL — MOBILE FINAL
   ==========================================================
   - Hero centré
   - 3 avantages Hero sur une seule ligne
   - Turquie centrée
   - Spécialités : 2 par ligne
   - Contenu des spécialités centré
   - Processus : 3 étapes sur une ligne
   - Demande d'orientation centrée
   - Formulaire "Demande d'information" NON MODIFIÉ
   - CTA final centré
========================================================== */

@media (max-width: 760px) {


    /* ======================================================
       1. HERO MÉDICAL
    ====================================================== */

    .medical-hero-inner {
        width: 100% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 auto !important;

        text-align: center !important;
    }


    .medical-hero-content {
        width: 100% !important;
        max-width: 680px !important;

        margin: 0 auto !important;

        padding-left: 14px !important;
        padding-right: 14px !important;

        text-align: center !important;
    }


    .medical-eyebrow {
        display: block !important;

        width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .medical-hero h1 {
        width: 100% !important;
        max-width: 650px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .medical-hero h1 span {
        text-align: center !important;
    }


    .medical-hero-content > p {
        width: 100% !important;
        max-width: 560px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* ======================================================
       2. BOUTONS DU HERO
    ====================================================== */

    .medical-hero-actions {
        width: 100%;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex-wrap: wrap;

        gap: 12px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .medical-secondary-link {
        text-align: center !important;
    }



    /* ======================================================
       3. HERO
       ACCOMPAGNEMENT / VOYAGE / SUIVI PERSONNALISÉ
       SUR UNE SEULE LIGNE
    ====================================================== */

    .medical-hero-features {
        width: 100% !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 12px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .medical-hero-features span {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 4px !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 10px !important;
        line-height: 1.2;

        white-space: nowrap;

        text-align: center !important;
    }


    .medical-hero-features span i {
        flex: 0 0 auto;

        font-size: 10px !important;
    }



    /* ======================================================
       4. TURQUIE
    ====================================================== */

    .medical-turkey-grid {
        width: 100%;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;

        text-align: center !important;
    }


    .medical-turkey-image {
        width: 100%;
        max-width: 560px;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    .medical-turkey-content {
        width: 100%;
        max-width: 620px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .medical-turkey-content > .section-kicker {
        display: block;

        width: 100%;

        text-align: center !important;
    }


    .medical-turkey-content > h2 {
        width: 100%;
        max-width: 540px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .medical-turkey-content > p {
        width: 100%;
        max-width: 520px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* ======================================================
       5. ORIENTATION / VOYAGE / HÉBERGEMENT /
       ACCOMPAGNEMENT
       2 PAR LIGNE ET CENTRÉS
    ====================================================== */

    .medical-turkey-features {
        width: 100%;
        max-width: 540px;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    .medical-turkey-features > div {
        min-width: 0;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 7px !important;

        text-align: center !important;
    }


    .medical-turkey-features > div > span {
        margin-left: auto !important;
        margin-right: auto !important;
    }


    .medical-turkey-features > div > div {
        width: 100%;

        text-align: center !important;
    }


    .medical-turkey-features strong,
    .medical-turkey-features p {
        width: 100%;

        text-align: center !important;
    }


    .medical-turkey-content > .btn {
        margin-left: auto !important;
        margin-right: auto !important;
    }



    /* ======================================================
       6. TITRE DES SPÉCIALITÉS
    ====================================================== */

    .medical-specialties .section-heading {
        width: 100%;
        max-width: 620px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .medical-specialties .section-heading .section-kicker {
        display: block;

        width: 100%;

        text-align: center !important;
    }


    .medical-specialties .section-heading h2,
    .medical-specialties .section-heading p {
        width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* ======================================================
       7. SPÉCIALITÉS
       2 CARTES PAR LIGNE
    ====================================================== */

    .medical-specialties-grid {
        width: 100%;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;

        align-items: stretch !important;
    }



    /* ======================================================
       CHAQUE SPÉCIALITÉ
    ====================================================== */

    .medical-specialty-card {
        width: 100%;
        min-width: 0;
        min-height: 0 !important;
        height: auto !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: flex-start !important;

        padding: 18px 9px !important;

        text-align: center !important;
    }



    /* ICÔNE */

    .medical-specialty-icon {
        width: 42px !important;
        height: 42px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 auto 10px !important;

        font-size: 16px !important;
    }



    /* TITRE */

    .medical-specialty-card h3 {
        width: 100%;

        margin: 0 0 7px !important;

        font-size: 16px !important;
        line-height: 1.2;

        text-align: center !important;
    }



    /* DESCRIPTION */

    .medical-specialty-card > p {
        width: 100%;

        margin: 0 auto 12px !important;

        font-size: 10px !important;
        line-height: 1.4;

        text-align: center !important;
    }



    /* BOUTON */

    .medical-specialty-button {
        width: 100%;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 5px;

        margin-top: auto !important;

        padding: 9px 5px !important;

        font-size: 9px !important;
        line-height: 1.2;

        text-align: center !important;
    }



    /* ======================================================
       8. PROCESSUS
       TITRE CENTRÉ
    ====================================================== */

    .medical-process .section-heading {
        width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .medical-process .section-heading .section-kicker {
        display: block;

        width: 100%;

        text-align: center !important;
    }


    .medical-process .section-heading h2 {
        width: 100%;

        text-align: center !important;
    }



    /* ======================================================
       9. PROCESSUS
       3 ÉTAPES SUR UNE SEULE LIGNE
    ====================================================== */

    .medical-process-grid {
        width: 100%;

        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 6px !important;

        align-items: start !important;
    }


    .medical-process-grid article {
        width: 100%;
        min-width: 0 !important;

        min-height: 0 !important;
        height: auto !important;

        align-self: start !important;

        padding: 14px 5px !important;

        text-align: center !important;
    }



    /* NUMÉRO */

    .medical-process-number {
        display: block;

        width: 100%;

        margin: 0 0 4px !important;

        font-size: 8px !important;
        line-height: 1;

        text-align: center !important;
    }



    /* ICÔNE */

    .medical-process-icon {
        width: 34px !important;
        height: 34px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 5px auto 8px !important;

        font-size: 12px !important;
    }



    /* TITRE */

    .medical-process-grid article h3 {
        margin: 0 0 5px !important;

        font-size: 10px !important;
        line-height: 1.2;

        text-align: center !important;
    }



    /* TEXTE */

    .medical-process-grid article p {
        margin: 0 !important;
        padding: 0 !important;

        font-size: 7.5px !important;
        line-height: 1.3;

        text-align: center !important;
    }



    /* ======================================================
       10. DEMANDE D'ORIENTATION
       TEXTE GAUCHE DE LA SECTION :
       CENTRÉ SUR MOBILE
    ====================================================== */

    .medical-request-grid {
        width: 100%;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    .medical-request-intro {
        width: 100%;
        max-width: 620px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .medical-request-intro > .section-kicker {
        display: block;

        width: 100%;

        text-align: center !important;
    }


    .medical-request-intro > h2 {
        width: 100%;
        max-width: 540px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .medical-request-intro > p {
        width: 100%;
        max-width: 540px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* ======================================================
       11. POINTS DE LA DEMANDE
       LE BLOC EST CENTRÉ,
       MAIS LES LIGNES RESTENT LISIBLES
    ====================================================== */

    .medical-request-points {
        width: fit-content;
        max-width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: left !important;
    }


    .medical-request-points > div {
        text-align: left !important;
    }



    /* ======================================================
       12. AVERTISSEMENT
    ====================================================== */

    .medical-warning {
        width: 100%;
        max-width: 540px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: left !important;
    }



    /* ======================================================
       13. FORMULAIRE
       DEMANDE D'INFORMATION
       NE PAS CENTRER SON CONTENU
    ====================================================== */

    .medical-form-card {
        width: 100%;
        max-width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        /*
           PAS DE text-align:center ICI.

           Le formulaire conserve sa présentation actuelle.
        */
    }


    /*
       ON NE MODIFIE PAS :

       .medical-form-heading
       .medical-form-group
       .medical-form-row
       .medical-input-wrap
       .medical-select-wrap
       .medical-consent
       .medical-submit-button
       .medical-form-note

       Le formulaire "Demande d'information"
       reste donc comme actuellement.
    */



    /* ======================================================
       14. CTA FINAL
       ESSENTIELLE MÉDICAL
    ====================================================== */

    .medical-help {
        text-align: center !important;
    }


    .medical-help-inner {
        width: 100%;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 18px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .medical-help-inner > div {
        width: 100%;
        max-width: 600px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .medical-help-inner .section-kicker {
        display: block;

        width: 100%;

        text-align: center !important;
    }


    .medical-help-inner h2 {
        width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .medical-help-inner p {
        width: 100%;
        max-width: 500px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .medical-help-inner > a {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}



/* ==========================================================
   MÉDICAL — PETITS MOBILES
========================================================== */

@media (max-width: 430px) {


    /* ======================================================
       HERO : 3 AVANTAGES SUR UNE LIGNE
    ====================================================== */

    .medical-hero-features {
        gap: 7px !important;
    }


    .medical-hero-features span {
        font-size: 8.5px !important;
    }


    .medical-hero-features span i {
        font-size: 8.5px !important;
    }



    /* ======================================================
       SPÉCIALITÉS
       TOUJOURS 2 PAR LIGNE
    ====================================================== */

    .medical-specialties-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 8px !important;
    }


    .medical-specialty-card {
        padding: 15px 7px !important;
    }


    .medical-specialty-icon {
        width: 38px !important;
        height: 38px !important;

        margin-bottom: 8px !important;

        font-size: 14px !important;
    }


    .medical-specialty-card h3 {
        font-size: 14px !important;
    }


    .medical-specialty-card > p {
        font-size: 9px !important;
    }


    .medical-specialty-button {
        font-size: 8px !important;

        padding: 8px 3px !important;
    }



    /* ======================================================
       PROCESSUS
       3 ÉTAPES SUR UNE LIGNE
    ====================================================== */

    .medical-process-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 4px !important;

        align-items: start !important;
    }


    .medical-process-grid article {
        min-height: 0 !important;
        height: auto !important;

        padding: 11px 3px !important;
    }


    .medical-process-number {
        font-size: 7px !important;
    }


    .medical-process-icon {
        width: 30px !important;
        height: 30px !important;

        margin: 4px auto 6px !important;

        font-size: 10px !important;
    }


    .medical-process-grid article h3 {
        font-size: 8.5px !important;
        line-height: 1.15;
    }


    .medical-process-grid article p {
        font-size: 6.5px !important;
        line-height: 1.25;
    }



    /* ======================================================
       DEMANDE D'ORIENTATION
    ====================================================== */

    .medical-request-intro,
    .medical-request-intro > h2,
    .medical-request-intro > p {
        text-align: center !important;
    }



    /* ======================================================
       FORMULAIRE :
       TOUJOURS INCHANGÉ
    ====================================================== */

    .medical-form-card {
        width: 100%;
        max-width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;
    }



    /* ======================================================
       CTA FINAL
    ====================================================== */

    .medical-help,
    .medical-help-inner,
    .medical-help-inner > div,
    .medical-help-inner h2,
    .medical-help-inner p {
        text-align: center !important;
    }
}
/* ==========================================================
   ÉTUDES — MOBILE FINAL
   ==========================================================
   - Hero centré
   - Carte "Votre projet" centrée
   - Destinations : 2 par ligne
   - Contenu des destinations centré
   - Comment ça marche : 4 étapes sur 1 ligne
   - Évaluation du projet centrée
   - Formulaire NON centré / NON modifié
   - CTA final centré
========================================================== */

@media (max-width: 760px) {


    /* ======================================================
       1. HERO ÉTUDES
    ====================================================== */

    .study-hero-inner {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 24px !important;

        margin: 0 auto !important;

        text-align: center !important;
    }


    .study-hero-content {
        width: 100% !important;
        max-width: 650px !important;

        margin: 0 auto !important;

        text-align: center !important;
    }


    .study-eyebrow {
        display: block !important;

        width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .study-hero h1 {
        width: 100% !important;
        max-width: 620px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .study-hero h1 span {
        text-align: center !important;
    }


    .study-hero-content > p {
        width: 100% !important;
        max-width: 540px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* ======================================================
       2. BOUTONS DU HERO
    ====================================================== */

    .study-hero-actions {
        width: 100% !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        flex-wrap: wrap !important;

        gap: 12px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .study-secondary-link {
        text-align: center !important;
    }



    /* ======================================================
       3. CARTE DU HERO
       "VOTRE PROJET"
    ====================================================== */

    .study-hero-visual {
        width: 100% !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 auto !important;
    }


    .study-hero-card {
        width: calc(100% - 30px) !important;
        max-width: 380px !important;

        margin: 0 auto !important;

        text-align: center !important;
    }


    .study-hero-icon {
        margin-left: auto !important;
        margin-right: auto !important;
    }


    .study-hero-card > span,
    .study-hero-card > strong,
    .study-hero-card > p {
        width: 100%;

        text-align: center !important;
    }



    /* ======================================================
       4. TITRE DESTINATIONS
    ====================================================== */

    .study-destinations .section-heading {
        width: 100%;
        max-width: 620px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .study-destinations .section-heading .section-kicker {
        display: block;

        width: 100%;

        text-align: center !important;
    }


    .study-destinations .section-heading h2,
    .study-destinations .section-heading p {
        width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* ======================================================
       5. DESTINATIONS
       2 CARTES PAR LIGNE
    ====================================================== */

    .study-country-grid {
        width: 100%;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;

        align-items: stretch !important;
    }



    /* ======================================================
       CARTE DESTINATION
    ====================================================== */

    .study-country-card {
        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        overflow: hidden;

        text-align: center !important;
    }



    /* ======================================================
       IMAGE DESTINATION
    ====================================================== */

    .study-country-image {
        width: 100% !important;

        height: 125px !important;

        overflow: hidden;
    }


    .study-country-image img {
        width: 100% !important;
        height: 100% !important;

        display: block;

        object-fit: cover !important;
    }



    /* NOM SUR L'IMAGE */

    .study-country-overlay {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;
    }


    .study-country-overlay span {
        text-align: center !important;
    }



    /* ======================================================
       CONTENU DESTINATION
    ====================================================== */

    .study-country-content {
        width: 100%;

        flex: 1;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;

        padding: 15px 8px !important;

        text-align: center !important;
    }



    /* CODE CA / FR / TR / CN */

    .study-country-code {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* TITRE */

    .study-country-content h3 {
        width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        font-size: 16px !important;
        line-height: 1.2;

        text-align: center !important;
    }



    /* DESCRIPTION */

    .study-country-content p {
        width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        font-size: 10px !important;
        line-height: 1.4;

        text-align: center !important;
    }



    /* BOUTON */

    .study-country-button {
        width: 100%;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 5px;

        margin-top: auto !important;

        padding: 9px 5px !important;

        font-size: 9px !important;
        line-height: 1.2;

        text-align: center !important;
    }



    /* ======================================================
       6. COMMENT ÇA MARCHE
       TITRE
    ====================================================== */

    .study-process .section-heading {
        width: 100%;
        max-width: 650px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .study-process .section-heading .section-kicker {
        display: block;

        width: 100%;

        text-align: center !important;
    }


    .study-process .section-heading h2,
    .study-process .section-heading p {
        width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* ======================================================
       7. COMMENT ÇA MARCHE
       4 ÉTAPES SUR UNE SEULE LIGNE
    ====================================================== */

    .study-process-grid {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap: 5px !important;

        align-items: start !important;
    }



    /* CHAQUE ÉTAPE */

    .study-process-card {
        width: 100% !important;
        min-width: 0 !important;

        min-height: 0 !important;
        height: auto !important;

        align-self: start !important;

        padding: 12px 4px 14px !important;

        text-align: center !important;
    }



    /* NUMÉRO */

    .study-process-number {
        display: block;

        width: 100%;

        margin: 0 0 4px !important;

        font-size: 7px !important;
        line-height: 1;

        text-align: center !important;
    }



    /* ICÔNE */

    .study-process-icon {
        width: 30px !important;
        height: 30px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 4px auto 7px !important;

        font-size: 11px !important;
    }



    /* TITRE ÉTAPE */

    .study-process-card h3 {
        width: 100%;

        margin: 0 0 5px !important;

        font-size: 8px !important;
        line-height: 1.15;

        text-align: center !important;
    }



    /* TEXTE ÉTAPE */

    .study-process-card p {
        width: 100%;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 6.5px !important;
        line-height: 1.25;

        text-align: center !important;
    }



    /* ======================================================
       8. ÉVALUATION DU PROJET
       TEXTE CENTRÉ
    ====================================================== */

    .study-evaluation-grid {
        width: 100%;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    .study-evaluation-intro {
        width: 100%;
        max-width: 620px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .study-evaluation-intro > .section-kicker {
        display: block;

        width: 100%;

        text-align: center !important;
    }


    .study-evaluation-intro > h2 {
        width: 100%;
        max-width: 540px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .study-evaluation-intro > p {
        width: 100%;
        max-width: 540px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* ======================================================
       9. AVANTAGES DE L'ÉVALUATION
       BLOC CENTRÉ
    ====================================================== */

    .study-evaluation-benefits {
        width: fit-content;
        max-width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: left !important;
    }


    .study-evaluation-benefits > div {
        text-align: left !important;
    }



    /* ======================================================
       10. MESSAGE D'INFORMATION
    ====================================================== */

    .study-evaluation-notice {
        width: 100%;
        max-width: 540px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: left !important;
    }



    /* ======================================================
       11. FORMULAIRE
       NE PAS CENTRER
    ====================================================== */

    .study-form-card {
        width: 100%;
        max-width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        /*
           VOLONTAIREMENT :
           PAS DE text-align:center
        */
    }


    /*
       ON NE MODIFIE PAS :

       .study-form-heading
       .study-form-group
       .study-form-row
       .study-input-wrap
       .study-select-wrap
       .study-consent
       .study-submit-button
       .study-form-note

       Donc le formulaire :
       "DEMANDE D'INFORMATION — Votre projet"
       conserve sa présentation actuelle.
    */



    /* ======================================================
       12. CTA FINAL
    ====================================================== */

    .study-help {
        text-align: center !important;
    }


    .study-help-inner {
        width: 100%;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 18px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .study-help-inner > div {
        width: 100%;
        max-width: 600px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .study-help-inner .section-kicker {
        display: block;

        width: 100%;

        text-align: center !important;
    }


    .study-help-inner h2,
    .study-help-inner p {
        width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .study-help-inner p {
        max-width: 500px;
    }


    .study-help-inner > a {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}



/* ==========================================================
   ÉTUDES — PETITS MOBILES
========================================================== */

@media (max-width: 430px) {


    /* ======================================================
       HERO
    ====================================================== */

    .study-hero-inner {
        gap: 20px !important;
    }


    .study-hero-card {
        width: calc(100% - 20px) !important;

        padding-left: 15px !important;
        padding-right: 15px !important;
    }



    /* ======================================================
       DESTINATIONS
       TOUJOURS 2 PAR LIGNE
    ====================================================== */

    .study-country-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 8px !important;
    }


    .study-country-image {
        height: 105px !important;
    }


    .study-country-content {
        padding: 13px 6px !important;
    }


    .study-country-content h3 {
        font-size: 14px !important;
    }


    .study-country-content p {
        font-size: 9px !important;
    }


    .study-country-button {
        padding: 8px 3px !important;

        font-size: 8px !important;
    }



    /* ======================================================
       COMMENT ÇA MARCHE
       4 ÉTAPES SUR UNE SEULE LIGNE
    ====================================================== */

    .study-process-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap: 4px !important;

        align-items: start !important;
    }


    .study-process-card {
        min-height: 0 !important;
        height: auto !important;

        padding: 10px 3px 12px !important;
    }


    .study-process-number {
        margin-bottom: 3px !important;

        font-size: 6.5px !important;
    }


    .study-process-icon {
        width: 28px !important;
        height: 28px !important;

        margin: 3px auto 6px !important;

        font-size: 10px !important;
    }


    .study-process-card h3 {
        margin-bottom: 4px !important;

        font-size: 7.5px !important;
        line-height: 1.15;
    }


    .study-process-card p {
        font-size: 6px !important;
        line-height: 1.2;
    }



    /* ======================================================
       ÉVALUATION DU PROJET
    ====================================================== */

    .study-evaluation-intro,
    .study-evaluation-intro > h2,
    .study-evaluation-intro > p {
        text-align: center !important;
    }



    /* ======================================================
       FORMULAIRE
       RESTE INCHANGÉ
    ====================================================== */

    .study-form-card {
        width: 100%;
        max-width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;
    }



    /* ======================================================
       CTA FINAL
    ====================================================== */

    .study-help,
    .study-help-inner,
    .study-help-inner > div,
    .study-help-inner h2,
    .study-help-inner p {
        text-align: center !important;
    }
}
/* ==========================================================
   HÔTELS — MOBILE FINAL
   ==========================================================
   - Hero centré
   - Formulaire de recherche NON modifié
   - Destinations : 2 par ligne
   - Contenu des destinations centré
   - Avantages : 3 sur une ligne
   - CTA final centré
========================================================== */

@media (max-width: 760px) {


    /* ======================================================
       1. HERO HÔTELS
    ====================================================== */

    .hotel-hero {
        text-align: center !important;
    }


    .hotel-hero-content {
        width: 100% !important;
        max-width: 680px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .hotel-eyebrow {
        display: block !important;

        width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .hotel-hero h1 {
        width: 100% !important;
        max-width: 620px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .hotel-hero h1 span {
        text-align: center !important;
    }


    .hotel-hero-content > p {
        width: 100% !important;
        max-width: 540px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* ======================================================
       2. MOTEUR DE RECHERCHE
       CARTE CENTRÉE MAIS FORMULAIRE INCHANGÉ
    ====================================================== */

    .hotel-search-section .container {
        display: flex;
        justify-content: center;
    }


    .hotel-search-card {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        /*
           IMPORTANT :
           aucun text-align:center ici.

           Destination, arrivée, départ,
           voyageurs, etc. conservent leur
           présentation de formulaire.
        */
    }


    /*
       ON NE MODIFIE PAS :

       .hotel-field
       .hotel-input-wrap
       .hotel-destination-row
       .hotel-details-row
       .hotel-guests-selector
       .hotel-guests-dropdown
       .hotel-search-action
       .hotel-search-button

       Le moteur de recherche reste donc
       fonctionnel et lisible.
    */



    /* ======================================================
       3. DESTINATIONS — TITRE
    ====================================================== */

    .hotel-destinations .section-heading {
        width: 100%;
        max-width: 620px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .hotel-destinations .section-heading .section-kicker {
        display: block;

        width: 100%;

        text-align: center !important;
    }


    .hotel-destinations .section-heading h2,
    .hotel-destinations .section-heading p {
        width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* ======================================================
       4. DESTINATIONS
       ISTANBUL / PARIS / MONTRÉAL / DUBAÏ
       2 PAR LIGNE
    ====================================================== */

    .hotel-destination-grid {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;

        align-items: stretch !important;
    }



    /* ======================================================
       CARTE DESTINATION
    ====================================================== */

    .hotel-destination-card {
        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        overflow: hidden;

        text-align: center !important;
    }



    /* ======================================================
       IMAGE
    ====================================================== */

    .hotel-destination-image,
    .hotel-destination-placeholder {
        width: 100% !important;
        height: 125px !important;

        overflow: hidden;
    }


    .hotel-destination-image img {
        display: block;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center !important;
    }



    /* DUBAÏ — PLACEHOLDER */

    .hotel-destination-placeholder {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;
    }



    /* ======================================================
       CONTENU DESTINATION
    ====================================================== */

    .hotel-destination-content {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        padding: 13px 7px !important;

        text-align: center !important;
    }


    .hotel-destination-content span {
        display: block;

        width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        font-size: 8px !important;
        line-height: 1.2;

        text-align: center !important;
    }


    .hotel-destination-content h3 {
        width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        font-size: 17px !important;
        line-height: 1.2;

        text-align: center !important;
    }



    /* ======================================================
       5. AVANTAGES — TITRE
    ====================================================== */

    .hotel-benefits .section-heading {
        width: 100%;
        max-width: 620px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .hotel-benefits .section-heading .section-kicker {
        display: block;

        width: 100%;

        text-align: center !important;
    }


    .hotel-benefits .section-heading h2,
    .hotel-benefits .section-heading p {
        width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* ======================================================
       6. AVANTAGES
       3 SUR UNE SEULE LIGNE
    ====================================================== */

    .hotel-benefits-grid {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 6px !important;

        align-items: start !important;
    }



    /* CHAQUE AVANTAGE */

    .hotel-benefit-card {
        width: 100% !important;
        min-width: 0 !important;

        min-height: 0 !important;
        height: auto !important;

        align-self: start !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;

        padding: 14px 5px !important;

        text-align: center !important;
    }



    /* ICÔNE */

    .hotel-benefit-icon {
        width: 34px !important;
        height: 34px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 auto 8px !important;

        font-size: 12px !important;
    }



    /* TITRE */

    .hotel-benefit-card h3 {
        width: 100%;

        margin: 0 0 5px !important;

        font-size: 10px !important;
        line-height: 1.2;

        text-align: center !important;
    }



    /* TEXTE */

    .hotel-benefit-card p {
        width: 100%;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 7.5px !important;
        line-height: 1.3;

        text-align: center !important;
    }



    /* ======================================================
       7. AIDE / CTA FINAL
    ====================================================== */

    .hotel-help {
        text-align: center !important;
    }


    .hotel-help-inner {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 18px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .hotel-help-inner > div {
        width: 100%;
        max-width: 600px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .hotel-help-inner .section-kicker {
        display: block;

        width: 100%;

        text-align: center !important;
    }


    .hotel-help-inner h2 {
        width: 100%;
        max-width: 520px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .hotel-help-inner p {
        width: 100%;
        max-width: 500px;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .hotel-help-inner > a {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}



/* ==========================================================
   HÔTELS — PETITS MOBILES
========================================================== */

@media (max-width: 430px) {


    /* ======================================================
       DESTINATIONS
       2 PAR LIGNE
    ====================================================== */

    .hotel-destination-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 8px !important;
    }


    .hotel-destination-image,
    .hotel-destination-placeholder {
        height: 105px !important;
    }


    .hotel-destination-content {
        padding: 11px 5px !important;
    }


    .hotel-destination-content span {
        font-size: 7px !important;
    }


    .hotel-destination-content h3 {
        font-size: 15px !important;
    }



    /* ======================================================
       AVANTAGES
       3 SUR UNE SEULE LIGNE
    ====================================================== */

    .hotel-benefits-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 4px !important;

        align-items: start !important;
    }


    .hotel-benefit-card {
        min-height: 0 !important;
        height: auto !important;

        padding: 11px 3px !important;
    }


    .hotel-benefit-icon {
        width: 30px !important;
        height: 30px !important;

        margin-bottom: 6px !important;

        font-size: 10px !important;
    }


    .hotel-benefit-card h3 {
        font-size: 8.5px !important;
        line-height: 1.15;
    }


    .hotel-benefit-card p {
        font-size: 6.5px !important;
        line-height: 1.25;
    }



    /* ======================================================
       CTA FINAL
    ====================================================== */

    .hotel-help,
    .hotel-help-inner,
    .hotel-help-inner > div,
    .hotel-help-inner h2,
    .hotel-help-inner p {
        text-align: center !important;
    }
}
/* ==========================================================
   VOLS — MOBILE FINAL
   ==========================================================
   - Hero centré
   - Moteur de recherche NON centré / NON modifié
   - Titre des avantages centré
   - 3 avantages sur une seule ligne
   - Hauteur adaptée au contenu
   - CTA final centré
========================================================== */

@media (max-width: 760px) {


    /* ======================================================
       1. HERO VOLS
    ====================================================== */

    .flight-hero {
        text-align: center !important;
    }


    .flight-hero-content {
        width: 100% !important;
        max-width: 680px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 14px !important;
        padding-right: 14px !important;

        text-align: center !important;
    }


    .flight-eyebrow {
        display: block !important;

        width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .flight-hero h1 {
        width: 100% !important;
        max-width: 620px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .flight-hero h1 span {
        text-align: center !important;
    }


    .flight-hero-content > p {
        width: 100% !important;
        max-width: 540px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* ======================================================
       2. MOTEUR DE RECHERCHE
       CARTE CENTRÉE MAIS FORMULAIRE INCHANGÉ
    ====================================================== */

    .flight-search-section .container {
        width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    .flight-search-card {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        /*
           IMPORTANT :
           PAS DE text-align:center.

           Le moteur de recherche garde son
           alignement normal.
        */
    }


    /*
       ON NE CENTRE PAS :

       .flight-search-heading
       .trip-options
       .flight-route-row
       .flight-field
       .input-icon-wrap
       .flight-details-row
       .passenger-selector
       .passenger-dropdown
       .flight-search-action
       .flight-search-button

       Le formulaire reste donc lisible
       et fonctionnel.
    */



    /* ======================================================
       3. TITRE DES AVANTAGES
    ====================================================== */

    .flight-benefits .section-heading {
        width: 100% !important;
        max-width: 620px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .flight-benefits .section-heading .section-kicker {
        display: block !important;

        width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .flight-benefits .section-heading h2 {
        width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .flight-benefits .section-heading p {
        width: 100% !important;
        max-width: 520px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* ======================================================
       4. AVANTAGES
       3 CARTES SUR UNE SEULE LIGNE
    ====================================================== */

    .flight-benefits-grid {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 6px !important;

        align-items: start !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }



    /* ======================================================
       5. CHAQUE AVANTAGE
    ====================================================== */

    .flight-benefit-card {
        width: 100% !important;
        min-width: 0 !important;

        min-height: 0 !important;
        height: auto !important;

        align-self: start !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: flex-start !important;

        padding: 14px 5px !important;

        margin: 0 !important;

        text-align: center !important;
    }



    /* ======================================================
       6. ICÔNE AVANTAGE
    ====================================================== */

    .flight-benefit-icon {
        width: 34px !important;
        height: 34px !important;

        flex: 0 0 34px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 auto 8px !important;

        font-size: 12px !important;

        text-align: center !important;
    }


    .flight-benefit-icon i {
        margin: 0 !important;

        font-size: 12px !important;
    }



    /* ======================================================
       7. TITRE AVANTAGE
    ====================================================== */

    .flight-benefit-card h3 {
        width: 100% !important;

        margin: 0 0 5px !important;
        padding: 0 !important;

        font-size: 10px !important;
        line-height: 1.2 !important;

        text-align: center !important;
    }



    /* ======================================================
       8. TEXTE AVANTAGE
    ====================================================== */

    .flight-benefit-card p {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 7.5px !important;
        line-height: 1.3 !important;

        text-align: center !important;
    }



    /* ======================================================
       9. CTA FINAL
       BESOIN D'ACCOMPAGNEMENT
    ====================================================== */

    .flight-help {
        text-align: center !important;
    }


    .flight-help-inner {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 18px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .flight-help-inner > div {
        width: 100% !important;
        max-width: 600px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* KICKER */

    .flight-help-inner .section-kicker {
        display: block !important;

        width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* TITRE */

    .flight-help-inner h2 {
        width: 100% !important;
        max-width: 520px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* DESCRIPTION */

    .flight-help-inner p {
        width: 100% !important;
        max-width: 500px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* BOUTON */

    .flight-help-inner > a {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}



/* ==========================================================
   VOLS — PETITS MOBILES
   430 PX ET MOINS
========================================================== */

@media (max-width: 430px) {


    /* ======================================================
       HERO
    ====================================================== */

    .flight-hero-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }



    /* ======================================================
       AVANTAGES
       TOUJOURS 3 SUR UNE LIGNE
    ====================================================== */

    .flight-benefits-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 4px !important;

        align-items: start !important;
    }



    /* CARTE */

    .flight-benefit-card {
        min-height: 0 !important;
        height: auto !important;

        padding: 11px 3px !important;
    }



    /* ICÔNE */

    .flight-benefit-icon {
        width: 30px !important;
        height: 30px !important;

        flex-basis: 30px !important;

        margin-bottom: 6px !important;

        font-size: 10px !important;
    }


    .flight-benefit-icon i {
        font-size: 10px !important;
    }



    /* TITRE */

    .flight-benefit-card h3 {
        margin-bottom: 4px !important;

        font-size: 8.5px !important;
        line-height: 1.15 !important;
    }



    /* DESCRIPTION */

    .flight-benefit-card p {
        font-size: 6.5px !important;
        line-height: 1.25 !important;
    }



    /* ======================================================
       CTA FINAL
    ====================================================== */

    .flight-help,
    .flight-help-inner,
    .flight-help-inner > div,
    .flight-help-inner h2,
    .flight-help-inner p {
        text-align: center !important;
    }
}
/* ==========================================================
   ACCUEIL — MOBILE FINAL
   ==========================================================
   - Hero centré
   - Moteur de recherche conservé
   - 5 onglets sur une seule ligne
   - Services : 2 colonnes
   - Destinations : 2 colonnes
   - Pourquoi Essentielle : centré
   - 3 avantages sur une seule ligne
========================================================== */

@media (max-width: 760px) {


    /* ======================================================
       1. HERO
    ====================================================== */

    .home-hero-inner {
        width: 100% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 auto !important;

        text-align: center !important;
    }


    .home-hero-content {
        width: 100% !important;
        max-width: 650px !important;

        margin: 0 auto !important;

        padding-left: 14px !important;
        padding-right: 14px !important;

        text-align: center !important;
    }


    .home-hero-kicker {
        display: block !important;

        width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .home-hero h1 {
        width: 100% !important;
        max-width: 620px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .home-hero-content > p {
        width: 100% !important;
        max-width: 520px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* ======================================================
       2. BOUTONS HERO
    ====================================================== */

    .home-hero-actions {
        width: 100% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex-wrap: wrap !important;

        gap: 12px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .home-hero-link {
        text-align: center !important;
    }



    /* ======================================================
       3. MOTEUR PRINCIPAL
       CARTE CENTRÉE MAIS FORMULAIRES INCHANGÉS
    ====================================================== */

    .home-search-section .container {
        width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    .home-search-box {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        /*
           PAS DE text-align:center.

           Les formulaires gardent leur
           présentation normale.
        */
    }



    /* ======================================================
       4. ONGLETS
       VOLS / HÔTELS / ÉTUDES / OMRA / MÉDICAL
       UNE SEULE LIGNE
    ====================================================== */

    .home-search-tabs {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(5, minmax(0, 1fr)) !important;

        gap: 0 !important;

        overflow: visible !important;
    }


    .home-search-tab {
        min-width: 0 !important;
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 4px !important;

        padding: 10px 2px !important;

        margin: 0 !important;

        font-size: 9px !important;
        line-height: 1.1 !important;

        text-align: center !important;

        white-space: nowrap;
    }


    .home-search-tab i {
        margin: 0 !important;

        font-size: 12px !important;
    }


    .home-search-tab span {
        display: block;

        width: 100%;

        text-align: center !important;
    }



    /* ======================================================
       5. CONTENU DU MOTEUR
       NE PAS CENTRER LES CHAMPS
    ====================================================== */

    /*
       ON NE MODIFIE PAS :

       .home-search-control
       .home-airport-suggestions
       .home-search-submit

       Les formulaires Vols, Hôtels,
       Études, Omra et Médical restent
       donc faciles à utiliser.
    */



    /* ======================================================
       6. TITRES GÉNÉRAUX DES SECTIONS
    ====================================================== */

    .home-services .home-section-heading,
    .home-destinations .home-section-heading {
        width: 100% !important;
        max-width: 620px !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 8px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .home-services .home-section-heading > div,
    .home-destinations .home-section-heading > div {
        width: 100% !important;

        text-align: center !important;
    }


    .home-section-heading span {
        display: block;

        width: 100%;

        text-align: center !important;
    }


    .home-section-heading h2 {
        width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .home-section-heading > p {
        width: 100% !important;
        max-width: 500px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* ======================================================
       7. SERVICES
       2 CARTES PAR LIGNE
    ====================================================== */

    .home-services-grid {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 9px !important;

        align-items: stretch !important;
    }



    /* ======================================================
       8. CHAQUE SERVICE
    ====================================================== */

    .home-service-card {
        width: 100% !important;
        min-width: 0 !important;

        min-height: 0 !important;
        height: auto !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 8px !important;

        padding: 16px 8px !important;

        text-align: center !important;
    }



    /* ICÔNE PRINCIPALE */

    .home-service-icon {
        width: 40px !important;
        height: 40px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 40px !important;

        margin: 0 auto !important;

        font-size: 15px !important;
    }


    .home-service-card > div {
        width: 100% !important;

        text-align: center !important;
    }


    .home-service-card h3 {
        width: 100%;

        margin: 0 0 4px !important;

        font-size: 15px !important;
        line-height: 1.2;

        text-align: center !important;
    }


    .home-service-card p {
        width: 100%;

        margin: 0 !important;

        font-size: 9px !important;
        line-height: 1.35;

        text-align: center !important;
    }



    /* FLÈCHE DE CHAQUE SERVICE */

    .home-service-card > .fa-arrow-right {
        margin: 2px auto 0 !important;

        font-size: 10px !important;
    }



    /* ======================================================
       9. DESTINATIONS
       2 × 2
    ====================================================== */

    .home-destinations-grid {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 9px !important;
    }


    .home-destination-card {
        width: 100% !important;
        min-width: 0 !important;

        height: 190px !important;

        text-align: center !important;
    }


    .home-destination-card img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center !important;
    }



    /* ======================================================
       10. CONTENU DESTINATION
    ====================================================== */

    .home-destination-content {
        width: 100% !important;

        left: 0 !important;
        right: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        padding-left: 7px !important;
        padding-right: 7px !important;

        text-align: center !important;
    }


    .home-destination-content > span {
        width: 100%;

        font-size: 8px !important;

        text-align: center !important;
    }


    .home-destination-content h3 {
        width: 100%;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 5px;

        margin-left: auto !important;
        margin-right: auto !important;

        font-size: 17px !important;

        text-align: center !important;
    }


    .country-code {
        flex: 0 0 auto;
    }



    /* ======================================================
       11. POURQUOI ESSENTIELLE
       TOUT LE BLOC CENTRÉ
    ====================================================== */

    .home-trust-grid {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 24px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .home-trust-content {
        width: 100% !important;
        max-width: 650px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .home-section-kicker {
        display: block !important;

        width: 100%;

        text-align: center !important;
    }


    .home-trust-content > h2 {
        width: 100% !important;
        max-width: 540px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }



    /* ======================================================
       12. LES 3 AVANTAGES
       DE "POURQUOI ESSENTIELLE"
       SUR UNE SEULE LIGNE
    ====================================================== */

    .home-trust-points {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 6px !important;

        align-items: start !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    .home-trust-points > div {
        width: 100% !important;
        min-width: 0 !important;

        min-height: 0 !important;
        height: auto !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 6px !important;

        margin: 0 !important;
        padding: 12px 4px !important;

        text-align: center !important;
    }



    /* ICÔNE */

    .home-trust-points > div > span {
        width: 32px !important;
        height: 32px !important;

        flex: 0 0 32px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 auto 3px !important;

        font-size: 11px !important;
    }


    .home-trust-points > div > div {
        width: 100% !important;

        text-align: center !important;
    }



    /* TITRE */

    .home-trust-points strong {
        display: block;

        width: 100%;

        margin: 0 0 4px !important;

        font-size: 9px !important;
        line-height: 1.2;

        text-align: center !important;
    }



    /* TEXTE */

    .home-trust-points p {
        width: 100%;

        margin: 0 !important;

        font-size: 6.5px !important;
        line-height: 1.3;

        text-align: center !important;
    }



    /* ======================================================
       13. BOUTON NOUS CONTACTER
    ====================================================== */

    .home-trust-content > .btn {
        display: inline-flex !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }



    /* ======================================================
       14. IMAGE FINALE
    ====================================================== */

    .home-trust-image {
        width: 100% !important;
        max-width: 560px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    .home-trust-image img {
        display: block;

        width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        object-fit: cover !important;
        object-position: center !important;
    }
}



/* ==========================================================
   ACCUEIL — PETITS MOBILES
   430 PX ET MOINS
========================================================== */

@media (max-width: 430px) {


    /* ======================================================
       HERO
    ====================================================== */

    .home-hero-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }



    /* ======================================================
       5 ONGLETS
       TOUJOURS SUR UNE LIGNE
    ====================================================== */

    .home-search-tab {
        gap: 3px !important;

        padding: 9px 1px !important;

        font-size: 8px !important;
    }


    .home-search-tab i {
        font-size: 10px !important;
    }



    /* ======================================================
       SERVICES
       TOUJOURS 2 PAR LIGNE
    ====================================================== */

    .home-services-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 7px !important;
    }


    .home-service-card {
        padding: 14px 6px !important;

        gap: 6px !important;
    }


    .home-service-icon {
        width: 36px !important;
        height: 36px !important;

        flex-basis: 36px !important;

        font-size: 13px !important;
    }


    .home-service-card h3 {
        font-size: 14px !important;
    }


    .home-service-card p {
        font-size: 8px !important;
    }



    /* ======================================================
       DESTINATIONS
       TOUJOURS 2 × 2
    ====================================================== */

    .home-destinations-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 7px !important;
    }


    .home-destination-card {
        height: 165px !important;
    }


    .home-destination-content > span {
        font-size: 7px !important;
    }


    .home-destination-content h3 {
        font-size: 15px !important;
    }



    /* ======================================================
       POURQUOI ESSENTIELLE
       3 SUR UNE SEULE LIGNE
    ====================================================== */

    .home-trust-points {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 4px !important;

        align-items: start !important;
    }


    .home-trust-points > div {
        min-height: 0 !important;
        height: auto !important;

        padding: 10px 2px !important;

        gap: 5px !important;
    }


    .home-trust-points > div > span {
        width: 29px !important;
        height: 29px !important;

        flex-basis: 29px !important;

        font-size: 10px !important;
    }


    .home-trust-points strong {
        font-size: 8px !important;
    }


    .home-trust-points p {
        font-size: 6px !important;
        line-height: 1.25;
    }



    /* ======================================================
       IMAGE FINALE
    ====================================================== */

    .home-trust-image {
        width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* =====================================================
   VOLS - BOUTON RÉSERVATION
===================================================== */

.flight-booking-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;

    margin-top: 28px;
    padding-top: 28px;

    border-top: 1px solid #e5e9ed;
}

.flight-booking-text {
    flex: 1;
}

.flight-booking-label {
    display: block;
    margin-bottom: 8px;

    color: #e3a22b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.flight-booking-text p {
    margin: 0;
    max-width: 620px;

    color: #53606d;
    font-size: 15px;
    line-height: 1.6;
}

.flight-booking-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 15px 26px;

    background: #e3a22b !important;
    color: #031c35 !important;

    border-radius: 9px;

    font-size: 15px;
    font-weight: 800;
    text-decoration: none !important;

    white-space: nowrap;

    box-shadow: 0 7px 18px rgba(227, 162, 43, 0.22);

    transition: 0.2s ease;
}

.flight-booking-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(227, 162, 43, 0.30);
}


/* MOBILE */

@media (max-width: 760px) {

    .flight-booking-action {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;

        margin-top: 22px;
        padding-top: 22px;
    }

    .flight-booking-text {
        text-align: center;
    }

    .flight-booking-btn {
        width: 100%;
    }
}