/* =====================================================================
   mobile.css - Renforcements mobile-first
   ---------------------------------------------------------------------
   Cette feuille consolide en un seul endroit les ajustements destines a
   l'experience smartphone. Chargee en dernier dans le layout, elle peut
   surcharger les precedentes sans conflit. Objectifs :
     - Cibles tactiles >= 44x44 px (recommandation Apple/WCAG)
     - Inputs en 16px (eviter le zoom intempestif sur iOS)
     - Hero et sections compactees sur petit ecran
     - Header plus aere et plus tappable
   ===================================================================== */

/* =========================================================
   FONDATIONS - applicables partout (mobile-first)
   ========================================================= */

/* Police de base un peu plus genereuse sur mobile */
html { font-size: 16px; }

/* Empecher le zoom iOS lors du focus sur un input */
input,
textarea,
select {
    font-size: 16px; /* >=16px obligatoire sur iOS */
    line-height: 1.5;
}

/* Tous les boutons et liens cliquables doivent avoir une zone tappable suffisante */
.btn,
.btn--solid,
.btn--outline,
.btn--sm {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

/* Centrer le contenu mobile dans le container sans le coller aux bords */
.container { padding-inline: clamp(1rem, 4vw, 2.5rem); }


/* =========================================================
   HEADER & NAV MOBILE - jusqu'a 860px
   ========================================================= */
@media (max-width: 860px) {

    :root {
        --header-height: 72px; /* legerement plus compact en mobile */
    }

    .site-header__inner {
        height: var(--header-height);
        padding-block: var(--space-3);
    }

    /* Marque : on garde l'eyebrow seulement, plus compact */
    .brand {
        gap: var(--space-3);
        min-width: 0; /* permet la troncature */
    }
    .brand__seal {
        width: 42px;
        height: 42px;
        flex-shrink: 0;
    }
    .brand__text {
        min-width: 0;
        overflow: hidden;
    }
    .brand__line-eyebrow {
        font-size: 0.65rem;
        letter-spacing: 0.1em;
    }
    .brand__line-main {
        font-size: 0.8rem;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 38vw;
    }

    /* Bouton hamburger : zone tappable franche */
    .site-nav__toggle {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        flex-shrink: 0;
    }
    .site-nav__toggle:hover,
    .site-nav__toggle:focus-visible {
        background: rgba(0, 131, 60, 0.06);
    }

    /* Menu deroulant : entrees confortablement tappables */
    .site-nav__list {
        gap: 0;
        padding: var(--space-3) var(--container-pad) var(--space-5);
    }
    .site-nav__list > li {
        border-bottom: 1px solid var(--rule-soft);
    }
    .site-nav__list > li:last-child {
        border-bottom: none;
        padding-top: var(--space-3);
    }
    .site-nav__list a {
        display: block;
        padding: var(--space-4) 0;
        font-size: 1rem;
        font-weight: 500;
        min-height: 44px;
    }
    /* L'item CTA conserve son look bouton */
    .site-nav__cta a {
        padding: var(--space-3) var(--space-5);
        text-align: center;
    }

    /* Selecteur de langue : plus visible et accessible */
    .lang-switcher {
        flex-shrink: 0;
    }
    .lang-switcher__link {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 var(--space-3);
        font-size: 0.875rem;
        font-weight: 500;
        border: 1px solid var(--rule);
        border-radius: 4px;
        background: var(--surface);
    }
}

/* =========================================================
   PETIT MOBILE (jusqu'a 480px)
   ========================================================= */
@media (max-width: 480px) {

    /* Bandeau officiel un poil plus fin */
    :root {
        --official-bar-height: 3px;
        --header-height: 64px;
    }

    /* Marque : on cache le texte sous le seal, on garde un visuel propre */
    .brand__text {
        display: none;
    }
    .brand__seal {
        width: 40px;
        height: 40px;
    }
}


/* =========================================================
   HEROS - paddings et tailles ajustes pour mobile
   ========================================================= */
@media (max-width: 860px) {

    .invest-hero,
    .embassy-hero {
        padding: var(--space-7) 0 var(--space-6);
        margin-bottom: var(--space-6);
    }

    .invest-hero__title,
    .embassy-hero__title {
        font-size: clamp(2rem, 8vw, 2.75rem);
        line-height: 1.1;
        margin-bottom: var(--space-4);
        max-width: 100%;
    }

    .invest-hero__lead,
    .embassy-hero__lead {
        font-size: var(--text-base);
        line-height: 1.65;
    }

    .lang-ar .invest-hero__title,
    .lang-ar .embassy-hero__title {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
        line-height: 1.35;
    }

    /* Stats du hero invest : empilees en mode aere */
    .invest-hero__stats {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        padding-top: var(--space-4);
    }
    .invest-hero__stat {
        flex-direction: row;
        align-items: baseline;
        gap: var(--space-3);
        padding-block: var(--space-3);
        border-bottom: 1px solid var(--rule-soft);
    }
    .invest-hero__stat:last-child {
        border-bottom: none;
    }
    .invest-hero__stat dd {
        order: 0;
        font-size: var(--text-3xl);
        min-width: 5ch;
        flex-shrink: 0;
    }
    .invest-hero__stat dt {
        font-size: 0.7rem;
    }
}


/* =========================================================
   SECTIONS - espacement et grilles
   ========================================================= */
@media (max-width: 860px) {

    /* Reduire l'espacement entre sections */
    .invest-why,
    .invest-sectors,
    .invest-quote,
    .invest-framework,
    .invest-steps,
    .invest-cta,
    .embassy-ambassador,
    .embassy-missions,
    .embassy-cooperation,
    .embassy-community,
    .embassy-practical,
    .home-services,
    .home-info,
    .home-news {
        padding-block: var(--space-7);
    }

    /* Header de section : titres un poil reduits */
    .section-header__title,
    .home-section__title {
        font-size: clamp(1.75rem, 6vw, 2.25rem);
    }

    .section-header__lead,
    .home-section__lead {
        font-size: var(--text-base);
        line-height: 1.6;
    }

    /* Grilles : forcer single-column sur petits ecrans */
    .invest-why__grid,
    .invest-sectors__grid,
    .embassy-missions__grid,
    .embassy-projects__grid,
    .home-services__grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    /* Cards de section : padding raisonnable */
    .invest-pillar,
    .invest-sector,
    .embassy-mission,
    .embassy-project,
    .home-service {
        padding: var(--space-5) var(--space-4);
    }

    /* Citation : marges marquees a reduire */
    .invest-quote__block {
        padding: var(--space-6) var(--space-3);
    }
    .invest-quote__text {
        font-size: var(--text-xl);
        padding: 0 var(--space-3);
    }
    .invest-quote__mark {
        font-size: 4rem;
    }

    /* Steps : ajustement de la numerotation */
    .invest-steps__item {
        grid-template-columns: 44px 1fr;
        gap: var(--space-4);
    }
    .invest-steps__number {
        width: 44px;
        height: 44px;
        font-size: var(--text-lg);
    }
    .invest-steps__item:not(:last-child)::after {
        top: 44px;
        inset-inline-start: 21px;
    }

    /* CTA section : plus compact */
    .invest-cta__card {
        padding: var(--space-6) var(--space-4);
    }
    .invest-cta__title {
        font-size: var(--text-2xl);
    }
    .invest-cta__lead {
        font-size: var(--text-base);
    }
    .invest-cta__actions,
    .embassy-cta {
        flex-direction: column;
        gap: var(--space-3);
        align-items: stretch;
    }
    .invest-cta__actions .btn,
    .embassy-cta .btn {
        justify-content: center;
        width: 100%;
    }

    /* Cadre incitatif investir */
    .invest-framework__grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
    .invest-framework__lead {
        font-size: var(--text-base);
    }
    .invest-framework__item {
        gap: var(--space-3);
    }
    .invest-framework__item h3 {
        font-size: var(--text-lg);
    }

    /* Ambassadeur : photo en haut, texte en dessous */
    .embassy-ambassador__grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
    .embassy-ambassador__card {
        position: static;
        max-width: 240px;
        margin: 0 auto;
    }
    .embassy-ambassador__text p {
        font-size: var(--text-base);
    }
    .embassy-ambassador__text p:first-child::first-letter {
        font-size: 2.5em;
    }

    /* Timeline ambassade */
    .embassy-timeline__item {
        grid-template-columns: 24px 1fr;
        gap: var(--space-4);
        margin-bottom: var(--space-5);
    }
    .embassy-timeline::before {
        inset-inline-start: 8px;
    }
    .embassy-timeline__item::before {
        width: 12px;
        height: 12px;
        top: 6px;
    }
    .embassy-timeline__content h3 {
        font-size: var(--text-lg);
    }

    /* Communaute : pleine largeur */
    .embassy-community__grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
    .embassy-community__lead {
        font-size: var(--text-base);
    }
    .embassy-acms {
        padding: var(--space-5) var(--space-4);
    }
    .embassy-acms__title {
        font-size: var(--text-xl);
    }
    .embassy-acms__abbr {
        font-size: var(--text-2xl);
    }

    /* Coordonnees pratiques : grille en colonne */
    .embassy-contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        padding: var(--space-5) var(--space-4);
    }
}


/* =========================================================
   HOME - mot ambassadeur, hero
   ========================================================= */
@media (max-width: 860px) {

    .hero {
        min-height: auto;
        padding: var(--space-8) 0 var(--space-7);
    }

    .hero__title {
        font-size: clamp(2rem, 8vw, 2.75rem);
    }

    .hero__lead {
        font-size: var(--text-base);
    }

    .hero__actions {
        flex-direction: column;
        gap: var(--space-3);
        align-items: stretch;
    }
    .hero__actions .btn {
        justify-content: center;
        width: 100%;
    }

    /* Mot de l'ambassadeur : photo en haut, texte en dessous */
    .ambassador__grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
        text-align: center;
    }
    .ambassador__portrait {
        max-width: 220px;
        margin: 0 auto;
    }
    .ambassador__quote-wrap {
        text-align: start;
    }
    .ambassador__quote {
        font-size: var(--text-lg);
    }

    /* Infos pratiques */
    .home-info__grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
    .home-info__map {
        min-height: 240px;
    }
}


/* =========================================================
   LANDING (page d'attente) - deja proche du mobile-first
   On verifie juste les details
   ========================================================= */
@media (max-width: 860px) {

    .landing {
        padding: var(--space-6) var(--container-pad) var(--space-4);
    }

    .landing__seal {
        width: 100px;
        height: 100px;
    }

    .landing__status {
        font-size: clamp(2rem, 8vw, 2.75rem);
    }

    .landing__message,
    .landing__signature {
        font-size: var(--text-base);
        line-height: 1.65;
    }

    .landing__contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .landing__contact {
        padding: var(--space-5) var(--space-4);
    }

    /* Inputs login : forcement 16px (anti zoom iOS) */
    .landing__input {
        font-size: 16px;
        padding: 0.85rem;
    }
    .landing__submit {
        padding: 1rem var(--space-5);
        font-size: var(--text-sm);
    }
}


/* =========================================================
   FOOTER - encore plus compact en mobile
   ========================================================= */
@media (max-width: 860px) {

    .site-footer {
        padding-block: var(--space-7) var(--space-5);
    }

    .site-footer__top {
        gap: var(--space-5);
    }
}


/* =========================================================
   TRES PETIT ECRAN - 360px et moins (Galaxy A / Pixel anciens)
   ========================================================= */
@media (max-width: 380px) {

    .container {
        padding-inline: 0.875rem;
    }

    /* Adoucir les hero qui pourraient deborder */
    .invest-hero__title,
    .embassy-hero__title,
    .hero__title {
        font-size: 1.875rem;
    }

    /* Reduire un poil les eyebrow */
    .invest-hero__eyebrow,
    .embassy-hero__eyebrow,
    .section-header__eyebrow {
        font-size: 0.7rem;
        letter-spacing: 0.15em;
    }
}


/* =========================================================
   RTL - adaptations specifiques arabe sur mobile
   ========================================================= */
@media (max-width: 860px) {

    .lang-ar .invest-hero__lead,
    .lang-ar .embassy-hero__lead,
    .lang-ar .hero__lead {
        font-size: var(--text-lg);  /* l'arabe respire mieux un peu plus gros */
        line-height: 1.85;
    }

    .lang-ar .invest-pillar__text,
    .lang-ar .invest-sector__desc,
    .lang-ar .embassy-mission__text,
    .lang-ar .embassy-timeline__content p {
        font-size: var(--text-base);
        line-height: 1.9;
    }
}