/* ==========================================================================
   Beautiful AFRIKA — responsive.css
   Approche mobile first : les styles de base ciblent le smartphone,
   chaque palier enrichit la mise en page.

   ≤359 · 480 · 640 · 768 · 1024 · 1280 · 1440 · 1920 · 2560
   ========================================================================== */

/* --------------------------------------------------------------------------
   Très petits smartphones (320–359 px)
   -------------------------------------------------------------------------- */
@media (max-width: 359px) {
    :root {
        --gutter: 1rem;
    }

    .site-header__brand {
        height: 2rem;
    }

    .btn {
        padding-inline: 1.15rem;
        letter-spacing: .1em;
    }

    .hero__kicker {
        letter-spacing: .2em;
    }

    .hero__kicker::before {
        width: 1.75rem;
    }

    .service-card__body,
    .type-card,
    .value-card {
        padding-inline: 1.2rem;
    }

    /* Sous-titre du hero sur plusieurs lignes : pas de puce orpheline */
    .hero__dot {
        display: none;
    }

    .hero__subtitle {
        gap: .35rem 1rem;
    }

    .choice__label {
        padding-inline: .9rem;
    }

    .contact-panel {
        padding-inline: 1.1rem;
    }

    /* Événement à la une */
    .hero__announce-meta {
        display: none;
    }

    .featured__seal {
        right: -.25rem;
        width: 5.5rem;
        height: 5.5rem;
    }

    .featured__seal-days {
        font-size: 1.15rem;
    }

    .countdown__unit {
        font-size: .54rem;
    }
}

/* --------------------------------------------------------------------------
   Smartphones (< 480 px)
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
    .hero__subtitle {
        gap: .4rem .6rem;
        font-size: .7rem;
        letter-spacing: .16em;
    }

    .hero__announce {
        gap: .6rem;
        padding-right: .9rem;
        font-size: .75rem;
    }

    .hero__announce > .icon,
    .hero__announce-city {
        display: none;
    }

    .countdown__unit {
        letter-spacing: .08em;
    }

    .carousel__bar {
        flex-wrap: wrap;
    }

    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .destination-card__body {
        padding: 1.2rem;
    }
}

@media (min-width: 480px) {
    .intro__values {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.5rem;
    }
}

/* Smartphones et écrans peu hauts : indicateur de défilement réduit à sa ligne */
@media (max-width: 767px), (max-height: 800px) {
    .hero {
        --scroll-cue: 4.5rem;
    }

    .hero__scroll {
        bottom: 1rem;
        gap: 0;
    }

    .hero__scroll-line {
        height: 2.5rem;
    }

    .hero__scroll > span:not([class]) {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Grands smartphones / petites tablettes (≥ 640 px)
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
    .site-header__cta {
        display: inline-flex;
    }

    .hero__actions .btn {
        flex: 0 0 auto;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: dense;
        grid-auto-rows: 14rem;
    }

    .gallery-item,
    .gallery-item--tall,
    .gallery-item--wide {
        aspect-ratio: auto;
    }

    .gallery-item--tall {
        grid-row: span 2;
    }

    .gallery-item--wide {
        grid-column: span 2;
    }

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

    .field--full {
        grid-column: 1 / -1;
    }

    .event-cards,
    .type-grid,
    .values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .value-card--intro {
        grid-column: 1 / -1;
    }

    .featured__fact {
        grid-template-columns: 11rem minmax(0, 1fr);
        gap: 1.5rem;
    }

    .featured__fact-label {
        padding-top: .2rem;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .values-grid .value-card:last-child {
        grid-column: 1 / -1;
    }
}

/* --------------------------------------------------------------------------
   Tablettes (≥ 768 px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    :root {
        --header-h: 5rem;
    }

    .site-header__brand {
        height: 2.5rem;
    }

    .hero__caption,
    .page-hero__caption {
        display: inline-flex;
    }

    .slideshow-ui {
        right: var(--gutter);
        bottom: 1.5rem;
        left: auto;
        gap: .85rem;
    }

    .slideshow-ui__toggle {
        width: 2.25rem;
        height: 2.25rem;
    }

    .slideshow-ui__step {
        padding-inline: .2rem;
    }

    .slideshow-ui__bar {
        width: 1.1rem;
    }

    .slideshow-ui__step[aria-current="true"] .slideshow-ui__bar {
        width: 2.5rem;
    }

    /* Bandeau final : à gauche, le coin droit revient au bouton WhatsApp */
    .cta__slides {
        right: auto;
        left: var(--gutter);
    }

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

    .service-card:last-child {
        grid-column: 1 / -1;
    }

    .service-card:last-child .service-card__media {
        aspect-ratio: 21 / 9;
    }

    .carousel__slide {
        width: min(44vw, 24rem);
    }

    .carousel__progress {
        width: 6rem;
    }

    .events-mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .event-tile--feature {
        grid-column: 1 / -1;
        min-height: 26rem;
    }

    .feature-grid,
    .advantages__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2.5rem;
    }

    .advantage {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
    }

    .advantage__icon {
        grid-row: auto;
        margin-bottom: .9rem;
    }

    .pillars {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
    }

    .logistics__badge {
        top: 2rem;
        left: 2rem;
    }

    .destinations-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .contact-panel {
        padding: 3rem 2.5rem;
    }

    .featured__poster {
        width: min(calc(100% - 1.25rem), 25rem);
    }

    .site-footer__top {
        grid-template-columns: minmax(0, 1fr) auto;
        justify-items: stretch;
    }

    .site-footer__top .btn {
        justify-self: end;
    }

    .site-footer__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .site-footer__col:last-child {
        grid-column: auto;
    }
}

/* --------------------------------------------------------------------------
   Tablettes paysage & portables (≥ 1024 px)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    :root {
        --header-h: 5.5rem;
    }

    .section-head--split {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
        gap: 3rem 5rem;
        align-items: end;
    }

    .section-head--split .section-head__aside {
        padding-bottom: .6rem;
    }

    /* Bienvenue */
    .intro__grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: clamp(4rem, 8vw, 9rem);
        align-items: center;
    }

    .intro__ornament {
        --orbit: 1.2;
    }

    .orbit__halo,
    .orbit__ripple {
        stroke-width: .6;
    }

    .orbit__track,
    .orbit__moon,
    .orbit__words {
        display: inline;
    }

    /* Expertises */
    .services__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .service-card {
        min-height: 36rem;
    }

    .service-card:last-child {
        grid-column: auto;
    }

    .service-card__media,
    .service-card:last-child .service-card__media {
        position: absolute;
        inset: 0;
        z-index: -1;
        aspect-ratio: auto;
    }

    .service-card__media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(33, 45, 86, .5) 0%, rgba(16, 21, 43, .92) 100%);
    }

    .service-card__body {
        padding: 2.5rem 2.25rem;
    }

    .service-card__top {
        margin-bottom: clamp(4.5rem, 9vh, 7.5rem);
    }

    .service-card__tags {
        margin-top: auto;
    }

    .service-card__more {
        margin-top: 0;
    }

    /* Carrousel */
    .carousel__slide {
        width: min(32vw, 26rem);
    }

    /* Expériences */
    .experiences__grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: clamp(3rem, 7vw, 8rem);
        align-items: start;
    }

    .experiences__visual {
        position: sticky;
        top: calc(var(--header-h) + 2.5rem);
        display: block;
    }

    .experiences__frame {
        aspect-ratio: 4 / 5;
    }

    .experiences__visual-item {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity .9s var(--ease-out);
    }

    .experiences__visual-item.is-active {
        opacity: 1;
    }

    .experiences__visual-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.06);
        transition: transform 1.8s var(--ease-out);
    }

    .experiences__visual-item.is-active .experiences__visual-img {
        transform: none;
    }

    .experiences__counter {
        display: flex;
        align-items: baseline;
        gap: .5rem;
        margin-top: 1.25rem;
        font-family: var(--font-serif);
        font-size: 1.6rem;
    }

    .experiences__counter-total {
        color: var(--ink-muted);
        font-size: 1.1rem;
    }

    .experience-item {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 2rem;
        padding: 2.1rem 0;
    }

    .experience-item__media {
        display: none;
    }

    .experience-item__arrow {
        display: grid;
        place-items: center;
        width: 3rem;
        height: 3rem;
        border: 1px solid var(--line-strong);
        border-radius: 50%;
        opacity: 0;
        transform: translate(-.5rem, .5rem);
        transition: opacity var(--t-base) var(--ease-out), transform .6s var(--ease-out);
    }

    .experience-item__arrow .icon {
        width: 1.1rem;
        height: 1.1rem;
    }

    .experience-item.is-active::before {
        transform: scaleX(1);
    }

    .experience-item.is-active .experience-item__arrow {
        opacity: 1;
        transform: none;
    }

    .experience-item.is-active .experience-item__title {
        transform: translateX(.6rem);
    }

    .experience-item:not(.is-active) .experience-item__title {
        opacity: .55;
    }

    .experience-item:not(.is-active) .experience-item__text {
        opacity: .7;
    }

    /* Événementiel */
    .events-mosaic {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: clamp(15rem, 19vw, 21rem);
        gap: 1rem;
    }

    .event-tile,
    .event-tile--feature {
        min-height: 0;
    }

    .event-tile--feature {
        grid-row: span 2;
        grid-column: span 2;
    }

    .event-tile__body {
        padding: 1.75rem;
    }

    .event-tile--feature .event-tile__title {
        font-size: clamp(2.3rem, 1.5rem + 2vw, 3.5rem);
    }

    .steps__rail {
        position: relative;
        display: block;
        height: 1px;
        margin-bottom: 3rem;
        background: var(--line);
    }

    .steps__rail-fill {
        position: absolute;
        inset: 0;
        background: var(--offwhite);
        transform: scaleX(var(--progress, 0));
        transform-origin: 0 50%;
    }

    .steps__list {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2.5rem;
    }

    .steps__list::before,
    .steps__list::after {
        display: none;
    }

    .step {
        padding: 0;
    }

    .step__dot {
        top: calc(-3rem - .475rem);
    }

    /* Logistique */
    .logistics__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(4rem, 7vw, 8rem);
        align-items: center;
    }

    .logistics__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2.25rem;
    }

    .logistics-item {
        grid-template-columns: minmax(0, 1fr);
        gap: .9rem;
        align-content: start;
    }

    /* Pourquoi nous & processus */
    .advantages__grid,
    .process__grid {
        gap: clamp(3rem, 7vw, 7.5rem);
        align-items: start;
    }

    .advantages__grid {
        grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    }

    .process__grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .advantages__intro,
    .process__head {
        position: sticky;
        top: calc(var(--header-h) + 3rem);
    }

    .timeline__list {
        gap: 4.5rem;
    }

    .timeline__item {
        grid-template-columns: 4rem minmax(0, 1fr);
        gap: 2.5rem;
    }

    .timeline__marker {
        width: 4rem;
        height: 4rem;
    }

    .timeline__track {
        top: 2rem;
        bottom: 2rem;
        left: 2rem;
    }

    /* Galerie */
    .gallery-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: clamp(11rem, 14vw, 17rem);
        gap: 1rem;
    }

    /* Pages intérieures */
    .split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(3.5rem, 7vw, 8rem);
    }

    .split--reverse .split__media {
        order: 2;
    }

    .feature-grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .feature-grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .feature-grid--stacked .feature {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        padding: 2rem 0;
    }

    .feature-grid--stacked .feature__icon {
        grid-row: auto;
        margin-bottom: .9rem;
    }

    .type-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .type-card {
        min-height: 22rem;
        padding: 2.25rem 2rem;
    }

    .event-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4rem 2rem;
    }

    .values-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .value-card--intro {
        grid-column: span 2;
    }

    .destination-row {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: clamp(3rem, 7vw, 7.5rem);
    }

    .destination-row.is-reverse {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    }

    .destination-row.is-reverse .destination-row__media {
        order: 2;
    }

    .contact-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: clamp(3rem, 6vw, 6.5rem);
        align-items: start;
    }

    .contact-panel {
        position: sticky;
        top: calc(var(--header-h) + 2rem);
        padding: 3rem;
    }

    /* Événement à la une : affiche fixe pendant la lecture des informations */
    .featured__grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "poster head"
            "poster body";
        column-gap: clamp(4rem, 8vw, 9rem);
        row-gap: 3rem;
    }

    .featured__poster {
        position: sticky;
        top: calc(var(--header-h) + 3rem);
        align-self: start;
        justify-self: start;
        width: max(17rem, min(calc(100% - 1.25rem), 30rem, calc((100vh - var(--header-h) - 7rem) * .5625)));
        margin-top: 1rem;
    }

    .featured__seal {
        top: -2.5rem;
        right: -2.25rem;
        width: 7.25rem;
        height: 7.25rem;
    }

    .featured__seal-days {
        font-size: 1.5rem;
    }

    .featured__seal-month {
        font-size: .56rem;
    }

    .featured__title {
        font-size: clamp(4.5rem, 9vw, 8rem);
    }

    .slideshow-ui__caption {
        display: inline-flex;
    }

    .affiliate__grid {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
        gap: clamp(4rem, 8vw, 9rem);
        align-items: center;
    }

    .site-footer__grid {
        grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    }

    .site-footer__brand {
        grid-column: auto;
    }
}

/* Survol enrichi (souris / trackpad) sur grands écrans */
@media (min-width: 1024px) and (hover: hover) {
    .service-card__media {
        opacity: 0;
        transition: opacity .8s var(--ease-out);
    }

    .service-card__img {
        transform: scale(1.1);
    }

    .service-card:hover,
    .service-card:focus-within {
        border-color: var(--line-strong);
        transform: translateY(-.4rem);
    }

    .service-card:hover::after,
    .service-card:focus-within::after {
        transform: scaleX(1);
    }

    .service-card:hover .service-card__media,
    .service-card:focus-within .service-card__media {
        opacity: 1;
    }

    .service-card:hover .service-card__img,
    .service-card:focus-within .service-card__img {
        transform: none;
    }

    .service-card:hover .service-card__num::after {
        width: 3.5rem;
    }

    .service-card:hover .service-card__icon {
        border-color: var(--offwhite);
        background: var(--offwhite);
        color: var(--navy);
        transform: rotate(-10deg);
    }

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

    .destination-card__cta {
        opacity: 0;
        transform: translateY(.75rem);
    }

    .destination-card:hover .destination-card__cta,
    .destination-card:focus-within .destination-card__cta {
        border-color: var(--offwhite);
        background: var(--offwhite);
        color: var(--navy);
        opacity: 1;
        transform: none;
    }

    .destination-card:hover .destination-card__img {
        transform: scale(1.1);
    }

    .destination-card:hover .destination-card__body {
        transform: translateY(-.35rem);
    }

    .event-tile:not(.event-tile--feature) .event-tile__text {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(.5rem);
        transition: max-height .7s var(--ease-out), opacity var(--t-base) var(--ease-out), transform .7s var(--ease-out);
    }

    .event-tile:hover .event-tile__text,
    .event-tile:focus-within .event-tile__text {
        max-height: 8rem;
        opacity: 1;
        transform: none;
    }

    .event-tile:hover .event-tile__img {
        transform: scale(1.07);
    }
}

/* --------------------------------------------------------------------------
   Ordinateurs (≥ 1280 px) : navigation complète
   (en dessous, menu plein écran : place laissée au sélecteur FR / EN et au devis)
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
    .nav {
        display: block;
    }

    .menu-toggle,
    .mobile-menu {
        display: none;
    }

    .site-header__inner {
        gap: 2rem;
    }
}

/* Navigation complète resserrée tant que l'écran reste étroit */
@media (min-width: 1280px) and (max-width: 1439px) {
    .nav__list {
        gap: 1rem;
    }

    .nav__link {
        letter-spacing: .08em;
    }

    .site-header__actions {
        gap: .75rem;
    }
}

@media (min-width: 1280px) {
    .hero__inner {
        grid-template-columns: minmax(0, 1fr) 19rem;
        gap: 5rem;
    }

    .hero__aside {
        display: block;
    }
}

/* --------------------------------------------------------------------------
   Grands écrans
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
    /* Le titre du hero garde ses deux lignes quand la typographie grandit */
    .hero__content {
        max-width: 72rem;
    }

    .carousel__slide {
        width: 26rem;
    }

    .service-card {
        min-height: 40rem;
    }

    .gallery-grid {
        gap: 1.25rem;
    }
}

@media (min-width: 1920px) {
    :root {
        --container: 90rem;
        --section-y: 12rem;
    }

    html {
        font-size: 106.25%;
    }

    .carousel__slide {
        width: 28rem;
    }
}

@media (min-width: 2560px) {
    html {
        font-size: 118.75%;
    }
}

/* --------------------------------------------------------------------------
   Écrans peu hauts (smartphones en paysage, petits portables)
   -------------------------------------------------------------------------- */
/* Portables 1366×768, 1280×720… : le hero tient dans la hauteur de l'écran */
@media (min-width: 768px) and (max-height: 800px) {
    .hero {
        padding-top: calc(var(--header-h) + 2rem);
    }

    .hero__title {
        font-size: min(var(--fs-display), 13vh);
    }

    .hero__announce {
        margin-bottom: 1.25rem;
    }
}

@media (min-width: 768px) and (max-height: 700px) {
    .hero {
        padding-top: calc(var(--header-h) + 1.5rem);
    }

    .hero__title {
        font-size: min(var(--fs-display), 12vh);
    }

    .hero__announce,
    .hero__kicker {
        margin-bottom: 1rem;
    }

    .hero__subtitle {
        margin-top: 1.2rem;
    }

    .hero__text {
        margin-top: .8rem;
    }

    .hero__actions {
        margin-top: 1.6rem;
    }
}

@media (max-height: 700px) {
    .mobile-menu__contact {
        display: none;
    }

    .featured__poster {
        position: relative;
        top: auto;
    }
}

@media (max-height: 540px) and (orientation: landscape) {
    .hero,
    .page-hero,
    .cta {
        min-height: 0;
    }

    .hero {
        padding-top: calc(var(--header-h) + 2.5rem);
        padding-bottom: 4.5rem;
    }

    .hero__announce {
        margin-bottom: 1rem;
    }

    .hero__scroll {
        display: none;
    }

    .mobile-menu__link {
        padding-block: .3rem;
        font-size: 1.6rem;
    }
}

/* Pointeur précis : curseur « saisir » sur le carrousel */
@media (pointer: fine) {
    .carousel__viewport {
        cursor: grab;
    }
}

/* Sélecteur de langue : dans le menu plein écran sur petits smartphones */
@media (max-width: 479px) {
    .lang-switch--header {
        display: none;
    }
}