/* ========================================
   STYLES MOBILE - Liwe (RÉÉCRITURE COMPLÈTE)
   Pour écrans ≤ 768px
   ======================================== */

@media (max-width: 768px) {

    /* ========================================
       GLOBAL & BACKGROUNDS
       ======================================== */

    /* GARDER LES COULEURS EXACTES DU WEB */
    body {
        background: #1a0f0a; /* Identique au web */
        padding-left: 0; /* Pas de sidebar sur mobile */
        overflow-x: hidden; /* SÉCURITÉ : Pas de scroll horizontal */
        max-width: 100vw; /* SÉCURITÉ : Largeur max viewport */
    }

    body.welcome-mode {
        background: #000000; /* Identique au web */
    }

    /* Garder les gradients de la welcome page */
    body.welcome-mode::before {
        background:
            radial-gradient(ellipse 60% 100% at 50% 0%,
                rgba(255, 127, 92, 0.4) 0%,
                rgba(255, 127, 92, 0.2) 30%,
                rgba(255, 127, 92, 0.08) 50%,
                transparent 70%),
            radial-gradient(ellipse 50% 80% at 50% 100%,
                rgba(245, 245, 247, 0.25) 0%,
                rgba(245, 245, 247, 0.1) 30%,
                rgba(245, 245, 247, 0.03) 50%,
                transparent 70%);
    }

    /* Backgrounds IT/Gov identiques au web */
    body::before {
        background:
            radial-gradient(circle at 20% 20%, rgba(75, 62, 51, 0.08) 0%, rgba(75, 62, 51, 0.03) 30%, transparent 70%),
            radial-gradient(circle at 80% 80%, rgba(255, 127, 92, 0.05) 0%, rgba(255, 127, 92, 0.02) 30%, transparent 70%),
            radial-gradient(circle at 40% 70%, rgba(139, 111, 71, 0.06) 0%, rgba(139, 111, 71, 0.02) 30%, transparent 70%);
    }

    body.theme-gov {
        background: #cbc7be; /* Identique au web */
    }

    /* Désactiver backdrop-filter pour performance mobile */
    * {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* IMAGES RESPONSIVE GLOBAL - Fix débordements */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* SÉCURITÉ SCROLL HORIZONTAL - Aucun élément ne doit déborder */
    * {
        box-sizing: border-box;
    }

    html {
        overflow-x: hidden;
        max-width: 100vw;
    }

    .intro-animation img {
        max-height: 200px !important; /* Limite intro logo */
    }

    /* Compenser l'absence de sidebar */
    body.has-mini-sidebar {
        padding-left: 0;
    }

    body.has-mini-sidebar .main-container,
    body.has-mini-sidebar .work-in-progress,
    body.has-mini-sidebar .site-footer {
        margin-left: 0;
    }

    /* ========================================
       MASQUER RECHERCHE SUR MOBILE
       ======================================== */

    .search-icon-btn,
    .search-sidebar,
    .search-sidebar-overlay {
        display: none !important;
    }

    /* ========================================
       WELCOME SCREEN MOBILE
       ======================================== */

    .welcome-screen {
        padding: 20px;
        padding-top: 100px;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .welcome-content {
        gap: 30px;
    }

    .welcome-title {
        font-size: 60px;
        font-weight: 900;
        letter-spacing: -1px;
        margin-bottom: 0;
    }

    .welcome-question {
        font-size: 16px;
        line-height: 1.5;
        padding: 0 10px;
    }

    .welcome-choices {
        flex-direction: column;
        gap: 15px;
        margin-top: 10px;
    }

    .choice-button {
        padding: 30px 20px;
        max-width: 100%;
        min-height: 160px;
        -webkit-tap-highlight-color: rgba(255, 127, 92, 0.2);
        touch-action: manipulation;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .choice-button:active {
        transform: scale(0.98);
    }

    .choice-title {
        font-size: 28px;
        margin-bottom: 0;
    }

    .choice-desc {
        font-size: 14px;
    }

    .welcome-baseline {
        font-size: 14px;
        line-height: 1.5;
        padding: 0 10px;
        margin-top: 10px;
    }

    .welcome-baseline br {
        display: none;
    }

    .welcome-social {
        margin-top: 30px;
        gap: 15px;
    }

    .social-icon {
        width: 45px;
        height: 45px;
    }

    .social-icon svg {
        width: 20px;
        height: 20px;
    }

    .bubble-title {
        font-size: clamp(1.25rem, 3.5vw, 1.6rem); /* Fluidité */
        font-weight: 800;
        margin-bottom: 6px;
    }

    .bubble-desc {
        font-size: clamp(0.65rem, 1.5vw, 0.8rem); /* RÉDUIT pour "Cloud" sur 1 ligne */
        opacity: 0.75;
        line-height: 1.2;
        max-width: 100%;
        white-space: nowrap; /* Force 1 ligne - pas de retour */
        overflow: hidden;
        text-overflow: ellipsis; /* "..." si trop long */
    }

    /* ========================================
       NAVIGATION HEADER
       ======================================== */

    /* Logo en haut à droite - AGRANDI MOBILE + CENTRÉ VISUELLEMENT */
    .logo-btn {
        position: fixed;
        top: 0px; /* DESCENDU pour centrer visuellement avec hamburger (50px) + island (40px) sur landing */
        right: 20px;
        font-size: 24px;
        font-weight: 900;
        z-index: 10001 !important; /* AU-DESSUS de mobile-menu-overlay (z-index: 10000 dans styles-base.css) */
        pointer-events: auto !important; /* Force le logo à recevoir les clics même avec overlay pointer-events: all */
        /* Zone touch minimum */
        min-width: 60px; /* Augmenté pour plus de clicabilité */
        min-height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(255, 127, 92, 0.2);
    }

    /* OVERRIDE : Logo mobile - Réduit pour éviter débordement iPhone */
    .logo-btn img {
        height: 70px !important; /* Réduit pour éviter débordement */
        width: auto !important;
        max-width: 85vw !important; /* Limite largeur écran */
        object-fit: contain !important;
    }

    /* Logo mobile - Visible - MOVED UP to avoid menu overlap */
    .logo-btn {
        display: flex !important;
        top: 0px !important;
    }

    /* Logo sur welcome page mobile - NewLogo à DROITE */
    body.welcome-mode .logo-btn {
        right: 20px !important;
        left: auto !important;
        background-image: url('../images/NewLogo sans Liwe.png') !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    body.welcome-mode .logo-btn img {
        opacity: 0 !important; /* Cacher l'img HTML, utiliser background */
    }

    /* Logo mobile sur landing pages IT et Gov - Design sans titre copie à DROITE, aligné avec burger */
    body:not(.welcome-mode) .logo-btn {
        right: 20px !important;
        left: auto !important;
        top: 0px !important; /* Même hauteur que welcome, évite chevauchement menu */
        background-image: url('../images/Design sans titre copie.png') !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    body:not(.welcome-mode) .logo-btn img {
        opacity: 0 !important; /* Cacher l'img HTML, utiliser background */
    }

    /* Cacher la mini-sidebar sur mobile */
    .mini-sidebar {
        display: none !important;
    }

    /* Cacher menu hamburger sur welcome page mobile */
    body.welcome-mode .hamburger-button {
        display: none !important;
    }

    /* Dynamic Island - MASQUÉ SUR MOBILE */
    .dynamic-island {
        display: none !important; /* Caché sur mobile pour éviter les overlaps */
    }

    .island-content {
        font-size: 10px; /* RÉDUIT: 12px → 10px pour intitulés longs */
        font-weight: 600;
        /* FIX CENTRAGE CONTENU - RENFORCÉ */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        height: 100%;
        margin: 0 auto;
    }

    /* Texte défilant experts - IDENTIQUE AU WEB */
    .experts-scroll-island {
        display: flex;
        align-items: center;
        /* SUPPRIMÉ: justify-content: center (CASSAIT LE SCROLL) */
        animation: scroll-island 15s linear infinite;
        white-space: nowrap;
    }

    .expert-item-island {
        font-size: 11px; /* Restauré à 11px pour lisibilité */
        margin-right: 30px; /* 25px → 30px pour meilleur espacement */
    }

    /* Site Switcher (IT ↔ Gov) */
    #siteSwitcher {
        top: 75px;
        right: 20px;
        font-size: 13px;
        padding: 8px 16px;
        min-height: 44px;
        border-radius: 20px;
    }

    /* ========================================
       MINI SIDEBAR (Menu hamburger)
       ======================================== */

    .mini-sidebar {
        width: 60px;
        left: 0;
        padding: 20px 10px;
    }

    .mini-sidebar-item {
        width: 40px;
        height: 40px;
        font-size: 12px;
        margin: 15px auto;
        /* Zone touch minimum */
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Hamburger menu */
    .hamburger-menu {
        position: fixed;
        top: 20px;
        left: 20px;
        z-index: 1000;
        width: 44px;
        height: 44px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(255, 127, 92, 0.2);
    }

    .hamburger-line {
        width: 24px;
        height: 2px;
        background: #FF7F5C;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    .hamburger-menu.open .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }

    .hamburger-menu.open .hamburger-line:nth-child(2) {
        opacity: 0;
    }

    .hamburger-menu.open .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    /* ========================================
       MENU HAMBURGER FULLSCREEN - REMPLACE SIDEBAR
       ======================================== */

    /* CACHER l'ancienne sidebar sur mobile - FORCE même avec .visible */
    .sidebar,
    .sidebar.visible,
    .sidebar.open {
        display: none !important;
    }

    .mini-sidebar,
    .mini-sidebar.visible {
        display: none !important;
    }

    /* AFFICHER le hamburger button */
    .hamburger-button {
        display: flex !important;
        position: fixed;
        top: 20px;
        left: 20px;
        width: 50px;
        height: 50px;
        z-index: 1001;
        background: rgba(20, 20, 20, 0.9);
        border: 1px solid rgba(255, 127, 92, 0.3);
        border-radius: 12px;
        backdrop-filter: blur(10px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    body.theme-gov .hamburger-button {
        background: rgba(245, 245, 247, 0.9);
        border-color: rgba(139, 111, 71, 0.3);
    }

    .hamburger-button:active {
        background: rgba(255, 127, 92, 0.2);
        border-color: rgba(255, 127, 92, 0.6);
        transform: scale(0.95);
    }

    .hamburger-button span {
        width: 24px;
        height: 2px;
        background: #FF7F5C;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    body.theme-gov .hamburger-button span {
        background: #8B6F47;
    }

    /* Animation X quand ouvert */
    .hamburger-button.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger-button.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger-button.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Overlay fullscreen moderne - FIX voile noir */
    .mobile-menu-overlay {
        display: none !important; /* FIX: Empêche apparition involontaire */
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(20, 20, 20, 0.98);
        backdrop-filter: none; /* Désactivé mobile */
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    .mobile-menu-overlay.open {
        display: flex !important; /* Seulement quand explicitement ouvert */
        opacity: 1;
        pointer-events: none; /* Laisse passer les clics au logo */
    }

    body.theme-gov .mobile-menu-overlay {
        background: rgba(203, 199, 190, 0.98);
    }

    .fullscreen-menu-content {
        width: 100%;
        padding: 100px 30px 50px;
        overflow-y: auto;
        pointer-events: auto; /* Contenu du menu reste cliquable */
        -webkit-overflow-scrolling: touch;
    }

    /* ========================================
       MOBILE MENU SEARCH (INLINE)
       ======================================== */

    /* Search container */
    .menu-search-container {
        width: 100%;
        margin: 0 0 20px 0;
    }

    /* Search input - THINNER (12px vs 16px) */
    .menu-search-input {
        width: 100%;
        padding: 12px 16px; /* 25% plus fin que menu-action */
        border-radius: 12px;
        background: rgba(255, 127, 92, 0.1);
        border: 1px solid rgba(255, 127, 92, 0.3);
        color: rgba(245, 245, 247, 0.9);
        font-size: 1rem;
        font-family: 'Inter', sans-serif;
        font-weight: 500;
        outline: none;
        transition: all 0.3s ease;
        -webkit-appearance: none;
        appearance: none;
    }

    .menu-search-input::placeholder {
        color: rgba(245, 245, 247, 0.5);
    }

    .menu-search-input:focus {
        background: rgba(255, 127, 92, 0.15);
        border-color: rgba(255, 127, 92, 0.5);
        box-shadow: 0 4px 12px rgba(255, 127, 92, 0.2);
    }

    /* Theme Gov */
    body.theme-gov .menu-search-input {
        background: rgba(160, 82, 45, 0.1);
        border-color: rgba(160, 82, 45, 0.3);
        color: rgba(26, 26, 26, 0.9);
    }

    body.theme-gov .menu-search-input::placeholder {
        color: rgba(26, 26, 26, 0.5);
    }

    body.theme-gov .menu-search-input:focus {
        background: rgba(160, 82, 45, 0.15);
        border-color: rgba(160, 82, 45, 0.5);
        box-shadow: 0 4px 12px rgba(160, 82, 45, 0.2);
    }

    /* Search results container */
    .menu-search-results {
        width: 100%;
        margin: 0 0 20px 0;
        max-height: 400px;
        overflow-y: auto;
    }

    /* Individual result item */
    .menu-search-result-item {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 14px 16px;
        margin-bottom: 10px;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(255, 127, 92, 0.2);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .menu-search-result-item:hover {
        background: rgba(255, 127, 92, 0.15);
        border-color: rgba(255, 127, 92, 0.4);
        transform: scale(1.02);
    }

    body.theme-gov .menu-search-result-item {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(160, 82, 45, 0.2);
    }

    body.theme-gov .menu-search-result-item:hover {
        background: rgba(160, 82, 45, 0.15);
        border-color: rgba(160, 82, 45, 0.4);
    }

    /* Result badge */
    .menu-search-result-badge {
        display: inline-block;
        font-size: 0.7rem;
        padding: 3px 8px;
        border-radius: 12px;
        background: rgba(255, 127, 92, 0.2);
        color: #FF7F5C;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
        align-self: flex-start;
    }

    body.theme-gov .menu-search-result-badge {
        background: rgba(160, 82, 45, 0.2);
        color: #A0522D;
    }

    /* Result title */
    .menu-search-result-title {
        font-size: 1rem;
        font-weight: 600;
        color: #FF7F5C;
        line-height: 1.3;
    }

    body.theme-gov .menu-search-result-title {
        color: #A0522D;
    }

    /* Result subtitle */
    .menu-search-result-subtitle {
        font-size: 0.8rem;
        color: rgba(245, 245, 247, 0.6);
        line-height: 1.3;
    }

    body.theme-gov .menu-search-result-subtitle {
        color: rgba(26, 26, 26, 0.6);
    }

    /* No results message */
    .menu-search-no-results {
        padding: 30px 20px;
        text-align: center;
        font-size: 0.9rem;
        color: rgba(245, 245, 247, 0.6);
        font-style: italic;
    }

    body.theme-gov .menu-search-no-results {
        color: rgba(26, 26, 26, 0.6);
    }

    .sidebar-section {
        margin-bottom: 30px;
    }

    .sidebar-section h3 {
        font-size: 1.1rem;
        margin-bottom: 15px;
    }

    .sidebar-item {
        padding: 12px 15px;
        font-size: 0.95rem;
        min-height: 44px;
    }

    .expertise-tag {
        padding: 10px 14px;
        font-size: 0.9rem;
        margin: 6px 4px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .sidebar-backdrop {
        display: block;
    }

    .sidebar-backdrop.active {
        opacity: 1;
        pointer-events: all;
    }

    /* ========================================
       LANDING PAGES (IT/Gov)
       ======================================== */

    .landing-hero {
        padding: 0 20px;
        height: 100vh !important; /* EXACTEMENT 100vh - pas min-height */
        max-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important; /* Barre de recherche = centre absolu */
        text-align: center !important;
        gap: 20px;
        overflow: hidden !important; /* Cache tout ce qui dépasse */
    }

    /* Centrage parfait du contenu landing mobile */
    .brand-title {
        font-size: clamp(2.5rem, 10vw, 3.5rem) !important;
        margin-bottom: 10px !important;
        margin-top: 0 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .intro-text {
        font-size: clamp(1rem, 2.5vw, 1.2rem) !important;
        margin-bottom: 20px !important;
        text-align: center !important;
        max-width: 90% !important;
        line-height: 1.6 !important;
    }

    .landing-title {
        font-size: clamp(1.9rem, 8vw, 3rem); /* Brand title fluide */
        margin-bottom: 20px;
        line-height: 1.1;
        letter-spacing: clamp(-1.5px, -0.5vw, -0.5px);
        text-align: center; /* Centré comme sur web */
    }

    .landing-subtitle {
        font-size: clamp(1rem, 2.5vw, 1.2rem); /* Fluidité */
        margin-bottom: 30px;
        padding: 0 10px;
        text-align: center; /* Centré */
    }

    .landing-description {
        font-size: clamp(0.9rem, 2vw, 1.1rem); /* Fluidité */
        line-height: 1.6;
        max-width: 100%;
        margin-bottom: 30px;
    }

    .landing-cta {
        padding: 14px 28px;
        font-size: 1rem;
        min-height: 44px;
        border-radius: 25px;
    }

    /* Sections de contenu - "Notre histoire" hors écran initial */
    .landing-sections {
        padding: 40px 20px;
        margin-top: 0 !important; /* Pas de margin - commence juste après hero */
        position: relative;
        z-index: 1;
    }

    .landing-section {
        margin-bottom: 50px;
    }

    .landing-section-title {
        font-size: clamp(1.6rem, 4vw, 2rem); /* Fluidité */
        margin-bottom: 20px;
        text-align: center; /* Centré */
    }

    .landing-section-content {
        padding: clamp(20px, 5vw, 30px) clamp(15px, 3vw, 25px); /* Fluide */
        font-size: clamp(0.9rem, 2vw, 1.05rem); /* Fluidité */
        line-height: 1.7;
    }

    /* Grille de cartes */
    .landing-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .landing-card {
        padding: 25px 20px;
    }

    .landing-card h3 {
        font-size: 1.3rem;
        margin-bottom: 12px;
    }

    .landing-card p {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* ========================================
       SEARCH BAR (Barre de recherche mobile)
       ======================================== */

    .search-bar {
        max-width: 100%;
        width: calc(100% - 40px);
        margin: 0 auto 30px;
    }

    .search-input {
        padding: 16px 55px 16px 20px;
        font-size: 0.95rem;
        border-width: 1.5px;
        min-height: 44px;
        width: 100%;
        border-radius: 25px;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    /* Placeholder adaptatif plus petit pour tenir sur 1 ligne */
    .search-input::placeholder {
        font-size: clamp(0.7rem, 1.8vw, 0.85rem); /* Réduit pour "Comment peut-on vous aider ?" */
        opacity: 0.7;
    }

    .search-input:focus {
        border-color: rgba(255, 127, 92, 0.6);
        box-shadow: 0 0 0 3px rgba(255, 127, 92, 0.1);
    }

    body.theme-gov .search-input:focus {
        border-color: rgba(139, 111, 71, 0.6);
        box-shadow: 0 0 0 3px rgba(139, 111, 71, 0.1);
    }

    .search-submit-btn {
        width: 38px !important;
        height: 38px !important;
        right: 8px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        transition: transform 0.2s ease, background 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border-radius: 50% !important; /* Garder rond, pas 24px */
    }

    .search-submit-btn svg {
        width: 18px !important;
        height: 18px !important;
        stroke: #ffffff !important;
        stroke-width: 2.5 !important;
        fill: none !important;
        display: block !important;
        pointer-events: none !important;
    }

    .search-submit-btn:active {
        transform: translateY(-50%) scale(0.92) !important;
    }

    /* ========================================
       WORK IN PROGRESS PAGES
       ======================================== */

    /* ========================================
       RESET ESPACEMENTS VERTICAUX - MOBILE
       ======================================== */

    /* Éliminer tout espacement au-dessus du contenu */
    .story-container,
    .story-hero,
    .story-title,
    .story-subtitle {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Container commence immédiatement après header */
    .story-container {
        padding: 0 20px 40px !important;  /* 10px → 0 - OVERRIDE TOUTES MEDIA QUERIES */
        max-width: 100%;
        margin-top: 0 !important;         /* Reset explicite - FORCE */
        position: relative;
        top: 0;
    }

    .story-hero {
        padding: 0;                /* 15px → 0 - ÉLIMINATION TOTALE */
        margin-bottom: 0;          /* 20px → 0 - AUCUN ESPACE */
        margin-top: 0;             /* Reset explicite */
    }

    .story-title {
        font-size: 2rem;
        margin-bottom: 8px;        /* 15px → 8px - espace minimal */
        margin-top: 0;             /* Pas de marge héritée */
        line-height: 1.2;
        text-align: center; /* Centré */
        padding-top: 0;            /* Pas de padding hérité */
    }

    .story-subtitle {
        font-size: 1rem;
        margin-bottom: 15px;       /* 30px → 15px */
        text-align: center; /* Centré */
    }

    .story-section {
        margin-bottom: 15px;       /* 40px → 15px - RÉDUCTION MAJEURE bulles serrées */
    }

    .story-card {
        padding: 20px 15px;        /* 25px 20px → 20px 15px */
        margin-bottom: 15px;       /* Ajout explicite - espacement entre cards */
    }

    .story-text {
        font-size: 0.95rem;
        line-height: 1.7;
        margin-bottom: 10px;       /* Ajout - 16px → 10px */
    }

    .section-header {
        font-size: 1.3rem;
        margin-bottom: 12px;       /* 20px → 12px */
    }

    /* ========================================
       TEXTES INTERNES CARDS - COMPACTAGE
       ======================================== */

    /* Paragraphes dans cards plus serrés */
    .story-card p {
        margin-bottom: 10px;
    }

    /* Titres h3/h4 dans cards plus serrés */
    .story-card h3,
    .story-card h4 {
        margin-bottom: 8px;
        margin-top: 12px;
    }

    /* Listes dans cards plus serrées */
    .story-card ul,
    .story-card ol {
        margin-bottom: 10px;
    }

    .story-card li {
        margin-bottom: 5px;
    }

    /* Tous les enfants directs sauf le dernier */
    .story-card > *:not(:last-child) {
        margin-bottom: 12px;
    }

    .expertise-cases {
        gap: 15px;
    }

    .case-item {
        padding: 18px 15px;
    }

    .case-text {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    /* CTA sections */
    .cta-section {
        padding: 35px 20px;
        margin-top: 50px;
    }

    .cta-title {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .cta-subtitle {
        font-size: 0.95rem;
        margin-bottom: 25px;
    }

    .cta-button {
        padding: 14px 28px;
        font-size: 1rem;
        min-height: 44px;
        border-radius: 25px;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(255, 127, 92, 0.2);
    }

    /* ========================================
       MODAL CHAT
       ======================================== */

    .chat-modal {
        padding: 0;
    }

    .chat-modal.active {
        display: flex;
    }

    .chat-container {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .chat-header {
        padding: 20px;
        min-height: 70px;
    }

    .chat-title {
        font-size: 1.3rem;
    }

    /* Croix chat mobile IT + Gov - Style orange unifié */
    .chat-close {
        width: 44px;
        height: 44px;
        font-size: 24px;
        background: rgba(255, 127, 92, 0.12); /* Orange très clair */
        color: #2a1810;                       /* Marron foncé */
        border: 1px solid rgba(255, 127, 92, 0.25); /* Bordure orange subtile */
    }

    .chat-close:hover {
        background: rgba(255, 127, 92, 0.2);
        border-color: rgba(255, 127, 92, 0.4);
    }

    .chat-messages {
        flex: 1;
        padding: 20px 15px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .chat-message {
        max-width: 85%;
        margin-bottom: 15px;
    }

    .message-text {
        padding: 12px 16px;
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .message-time {
        font-size: 0.75rem;
        margin-top: 6px;
    }

    .chat-input-container {
        padding: 15px;
        border-top: 1px solid rgba(255, 127, 92, 0.2);
    }

    .chat-input {
        padding: 12px 16px;
        font-size: 0.95rem;
        min-height: 44px;
        border-radius: 22px;
    }

    .chat-send-btn {
        width: 38px; /* Cohérence avec web */
        height: 38px;
        min-width: 38px;
        min-height: 38px;
    }

    /* ========================================
       SCROLL INDICATOR
       ======================================== */

    .scroll-indicator {
        right: 15px;
        bottom: 80px;
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    /* ========================================
       SOCIAL BUTTONS
       ======================================== */

    .social-buttons {
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px 15px;
        gap: 12px;
        border-radius: 30px;
    }

    .social-button {
        width: 40px;
        height: 40px;
        min-width: 44px;
        min-height: 44px;
    }

    .social-button svg {
        width: 20px;
        height: 20px;
    }

    /* ========================================
       EXPERTISE MODAL
       ======================================== */

    .expertise-modal-content {
        position: relative;
        margin: 40px 15px;
        padding: 30px 20px;
        padding-top: 60px;
        max-width: calc(100% - 30px);
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .expertise-modal-close {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        width: 36px;
        height: 36px;
        font-size: 24px;
        z-index: 10002 !important;
    }

    /* Expertise Modal - Full screen sur mobile */
    .expertise-modal {
        left: 0 !important;
        width: 100% !important;
    }

    .expertise-modal::before,
    .expertise-modal::after {
        left: 0 !important;
        width: 100% !important;
    }

    /* Masquer animations decoratives pour performance */
    .expertise-modal .circuit-lines {
        display: none;
    }

    /* ========================================
       ANIMATIONS & INTRO
       ======================================== */

    .intro-animation {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .intro-logo {
        font-size: 3rem;
        font-weight: 900;
    }

    /* ========================================
       UTILITAIRES
       ======================================== */

    .hidden {
        display: none !important;
    }

    .visible {
        display: block !important;
    }

    /* Supprimer les effets hover sur mobile */
    *:hover {
        /* Les effets hover ne fonctionnent pas bien sur mobile */
    }

    /* Forcer les zones touch-friendly partout */
    a, button, [onclick], .clickable {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(255, 127, 92, 0.2);
        touch-action: manipulation;
    }

    /* Optimisation scroll mobile */
    * {
        -webkit-overflow-scrolling: touch;
    }

    /* Textes lisibles */
    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* ========================================
       POLISH 100% - FINAL 2%
       ======================================== */

    /* Safe area pour notch iPhone X+ (encoche) */
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .dynamic-island {
        display: none !important; /* Caché sur mobile */
    }

    .logo-btn {
        top: calc(0px + env(safe-area-inset-top)); /* DESCENDU pour centrage visuel */
        right: calc(20px + env(safe-area-inset-right));
    }

    .hamburger-button {
        top: calc(20px + env(safe-area-inset-top));
        left: calc(20px + env(safe-area-inset-left));
    }

    .social-buttons {
        bottom: calc(25px + env(safe-area-inset-bottom));
    }

    /* Performances - will-change pour éléments animés */
    .dynamic-island,
    .hamburger-button,
    .choice-bubble,
    .sidebar,
    .mobile-menu-overlay,
    .chat-modal {
        will-change: transform, opacity;
    }

    /* Transitions optimisées - timing plus naturel */
    .choice-bubble,
    .hamburger-button,
    .cta-button,
    .sidebar-item,
    .expertise-tag {
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Focus states accessibilité - keyboard navigation */
    .choice-bubble:focus-visible,
    .hamburger-button:focus-visible,
    .logo-btn:focus-visible,
    #siteSwitcher:focus-visible,
    .cta-button:focus-visible,
    .search-submit-btn:focus-visible {
        outline: 2px solid rgba(255, 127, 92, 0.8);
        outline-offset: 4px;
    }

    body.theme-gov .choice-bubble:focus-visible,
    body.theme-gov .hamburger-button:focus-visible,
    body.theme-gov #siteSwitcher:focus-visible {
        outline-color: rgba(139, 111, 71, 0.8);
    }

    /* Scroll behavior smooth */
    html {
        scroll-behavior: smooth;
    }

    /* Optimisation render - Forcer GPU acceleration */
    .hamburger-button,
    .mobile-menu-overlay,
    .chat-container,
    .choice-bubble {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
    /* Dynamic Island a son propre transform combiné plus haut */

    /* Landing hero - padding ajusté pour équilibre parfait */
    .landing-hero {
        padding: calc(80px + env(safe-area-inset-top)) 20px calc(40px + env(safe-area-inset-bottom));
    }

    /* Chat input area - safe bottom */
    .chat-input-container {
        padding-bottom: calc(15px + env(safe-area-inset-bottom));
    }

    /* Amélioration lisibilité - antialiasing optimal */
    body, .welcome-title, .landing-title, .story-title {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    /* Touch feedback visuel subtil */
    .choice-bubble:active,
    .hamburger-button:active,
    .cta-button:active,
    .sidebar-item:active {
        opacity: 0.9;
    }

    /* Expertise modal - safe area */
    .expertise-modal-close {
        top: calc(15px + env(safe-area-inset-top));
        right: calc(15px + env(safe-area-inset-right));
    }

    /* Loading feedback - préparation pour états de chargement */
    @keyframes pulse-loading {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }

    .loading {
        animation: pulse-loading 1.5s ease-in-out infinite;
    }

    /* Prévention zoom accidentel sur inputs iOS */
    input, textarea, select {
        font-size: 16px !important; /* iOS zoom si < 16px */
    }

    /* Optimisation mémoire - réduire repaints */
    .chat-messages,
    .fullscreen-menu-content,
    .expertise-modal-content {
        contain: layout style paint;
    }

    /* ========================================
       OPTIMISATIONS PERFORMANCE MOBILE
       ======================================== */

    /* Désactiver grille animée (coûteux CPU) */
    @keyframes grid-move {
        0%, 100% { transform: translate(0, 0); }
    }

    body::after {
        animation: none !important; /* Grille statique */
    }

    /* Cacher circuits 3,4,7,8 (garder 1,2,5,6 = 2H + 2V sur mobile) */
    .circuit-line:nth-child(3),
    .circuit-line:nth-child(4),
    .circuit-line:nth-child(7),
    .circuit-line:nth-child(8) {
        display: none !important;
    }

    /* Touch zones minimales partout */
    .dynamic-island,
    #siteSwitcher {
        min-width: 44px;
        min-height: 44px;
    }

    /* Scroll indicator safety */
    .scroll-indicator {
        bottom: 90px; /* Au lieu de 80px - éviter overlap */
    }

    /* Social buttons safety */
    .social-buttons {
        bottom: 25px; /* Au lieu de 20px */
    }

    /* Expertise modal confort */
    .expertise-modal-content {
        max-height: calc(100vh - 100px); /* Au lieu de 80px */
        padding: 35px 22px; /* Plus confortable */
    }

    /* Landing cards spacing */
    .landing-card {
        margin-bottom: 15px;
    }
}

/* ========================================
   IPHONE SE / PETITS ÉCRANS (≤375px)
   Les plus petits devices - Optimisation maximale
   ======================================== */

@media (max-width: 375px) {

    /* Welcome page - Optimisé pour SE */
    .welcome-title {
        font-size: clamp(2rem, 7vw, 2.5rem); /* Override pour SE */
        letter-spacing: -1px;
        line-height: 1.1;
    }

    .welcome-subtitle {
        font-size: 0.95rem;
        padding: 0 5px;
    }

    .choice-bubbles {
        gap: 15px;
    }

    /* Navigation - Logo iPhone SE - AGRANDI + CENTRÉ VISUELLEMENT */
    .logo-btn {
        font-size: 20px;
        top: 0px; /* DESCENDU pour centrage visuel (logo 90px vs island 36px) */
        right: 15px;
        min-width: 55px;
        min-height: 55px;
    }

    .logo-btn img {
        height: 90px !important; /* AGRANDI : bien visible sur petit écran */
    }

    .intro-animation img {
        max-height: 150px !important; /* Intro plus compact */
    }

    .dynamic-island {
        display: none !important; /* Caché sur mobile */
    }

    .island-content {
        font-size: 8px; /* RÉDUIT: 10px → 8px pour intitulés longs */
    }

    #siteSwitcher {
        top: 62px;
        right: 15px;
        font-size: 11px;
        padding: 8px 14px;
        min-width: 60px;
    }

    /* Landing pages */
    .landing-title {
        font-size: 1.9rem;
        line-height: 1.05;
        margin-bottom: 15px;
    }

    .landing-subtitle {
        font-size: 0.95rem;
        margin-bottom: 25px;
    }

    .landing-description {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .landing-cta {
        padding: 12px 24px;
        font-size: 0.95rem;
    }

    .landing-sections {
        padding: 35px 15px;
        margin-top: 40px; /* RÉDUIT: 80px → 40px (iPhone SE) */
    }

    .landing-section-title {
        font-size: 1.6rem;
    }

    .landing-section-content {
        padding: 20px 12px;
        font-size: 0.9rem;
    }

    /* Work in progress pages */
    .story-container {
        padding: 0 15px 35px !important;  /* 70px → 0 - Titre juste après header */
    }

    .story-title {
        font-size: 1.65rem;
        line-height: 1.15;
    }

    .story-subtitle {
        font-size: 0.9rem;
    }

    .story-text {
        font-size: 0.9rem;
        line-height: 1.65;
    }

    .section-header {
        font-size: 1.2rem;
    }

    .case-text {
        font-size: 0.85rem;
    }

    .cta-title {
        font-size: 1.35rem;
    }

    .cta-subtitle {
        font-size: 0.9rem;
    }

    /* Chat - Compact SE */
    .chat-header {
        padding: 20px 16px;
    }

    .chat-title {
        font-size: 1.25rem; /* Augmenté de 1.2rem */
    }

    .message-text {
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    .chat-input {
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    .chat-send-btn {
        width: 36px; /* Plus compact pour SE */
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }

    /* Search bar SE */
    .search-bar {
        width: calc(100% - 30px); /* Plus compact */
    }

    .search-input {
        padding: 14px 50px 14px 18px;
        font-size: 0.9rem;
    }

    .search-submit-btn {
        width: 36px;
        height: 36px;
    }
}

/* ========================================
   IPHONE STANDARD (376px - 428px)
   iPhone 12, 13, 14, 15 standard
   ======================================== */

@media (min-width: 376px) and (max-width: 428px) {

    /* Welcome page - iPhone Standard équilibré */
    .welcome-title {
        font-size: clamp(2.2rem, 7.5vw, 2.8rem); /* Fluidité */
        letter-spacing: -1.2px;
    }

    .welcome-subtitle {
        font-size: 1.05rem;
    }

    /* Navigation - Logo iPhone Standard */
    .logo-btn img {
        height: 95px !important; /* Taille originale */
    }

    .dynamic-island {
        display: none !important; /* Caché sur mobile */
    }

    .island-content {
        font-size: 9px; /* RÉDUIT: 11px → 9px pour intitulés longs */
    }

    #siteSwitcher {
        font-size: 12px;
    }

    /* Chat - Équilibré */
    .chat-send-btn {
        width: 38px; /* Standard */
        height: 38px;
        min-width: 38px;
        min-height: 38px;
    }

    /* Landing pages */
    .landing-title {
        font-size: 2.3rem;
    }

    .landing-subtitle {
        font-size: 1.05rem;
    }

    .landing-description {
        font-size: 0.98rem;
    }

    /* Story pages */
    .story-title {
        font-size: 1.85rem;
    }

    .story-subtitle {
        font-size: 0.98rem;
    }
}

/* ========================================
   IPHONE PRO MAX (429px - 480px)
   iPhone 14 Pro Max, 15 Plus/Pro Max
   ======================================== */

@media (min-width: 429px) and (max-width: 480px) {

    /* Welcome page - Pro Max luxe */
    .welcome-title {
        font-size: clamp(2.5rem, 8vw, 3.2rem); /* Fluidité */
        letter-spacing: -1.5px;
    }

    .welcome-subtitle {
        font-size: 1.15rem;
    }

    /* Navigation - Logo Pro Max - AGRANDI + CENTRÉ VISUELLEMENT */
    .logo-btn {
        font-size: 26px;
        top: 0px; /* DESCENDU pour centrage visuel (logo 105px vs island 42px) */
        right: 20px;
        min-width: 65px;
        min-height: 65px;
    }

    .logo-btn img {
        height: 105px !important; /* Taille originale pour grand écran */
    }

    .dynamic-island {
        display: none !important; /* Caché sur mobile */
    }

    .island-content {
        font-size: 10px; /* RÉDUIT: 12px → 10px pour intitulés longs */
    }

    #siteSwitcher {
        font-size: 13px;
        padding: 10px 18px;
    }

    /* Landing pages */
    .landing-title {
        font-size: 2.6rem;
        margin-bottom: 22px;
    }

    .landing-subtitle {
        font-size: 1.15rem;
    }

    .landing-description {
        font-size: 1.05rem;
    }

    .landing-cta {
        padding: 15px 30px;
        font-size: 1.05rem;
    }

    /* Story pages */
    .story-title {
        font-size: 2.1rem;
    }

    .story-subtitle {
        font-size: 1.05rem;
    }

    .story-text {
        font-size: 1rem;
    }

    .section-header {
        font-size: 1.4rem;
    }

    .case-text {
        font-size: 0.95rem;
    }

    .cta-title {
        font-size: 1.6rem;
    }

    /* Chat - Plus confortable */
    .chat-title {
        font-size: 1.4rem;
    }

    .message-text {
        font-size: 1rem;
    }

    .chat-input {
        font-size: 1rem;
    }
}

/* ========================================
   ANDROID STANDARD (481px - 768px)
   Samsung, Google Pixel, autres Android
   ======================================== */

@media (min-width: 481px) and (max-width: 768px) {

    /* Welcome page - Android / Tablette compacte */
    .welcome-title {
        font-size: clamp(2.8rem, 9vw, 3.8rem); /* Grande fluidité */
        letter-spacing: -1.8px;
    }

    .welcome-subtitle {
        font-size: 1.2rem;
    }

    .choice-bubbles {
        max-width: 500px;
        gap: 25px;
    }

    /* Navigation - Logo Android/Tablette - AGRANDI + CENTRÉ VISUELLEMENT */
    .logo-btn {
        font-size: 28px;
        top: 5px; /* DESCENDU pour centrage visuel (logo 110px vs island 44px) */
        right: 25px;
        min-width: 70px;
        min-height: 70px;
    }

    .logo-btn img {
        height: 110px !important; /* Taille originale pour tablette */
    }

    .dynamic-island {
        display: none !important; /* Caché sur mobile */
    }

    .island-content {
        font-size: 11px; /* RÉDUIT: 13px → 11px pour intitulés longs */
    }

    #siteSwitcher {
        top: 85px;
        right: 25px;
        font-size: 14px;
        padding: 10px 20px;
    }

    /* Landing pages */
    .landing-hero {
        padding: 140px 30px 80px;
    }

    .landing-title {
        font-size: 3rem;
        margin-bottom: 25px;
    }

    .landing-subtitle {
        font-size: 1.25rem;
        margin-bottom: 35px;
    }

    .landing-description {
        font-size: 1.1rem;
        max-width: 90%;
    }

    .landing-cta {
        padding: 16px 35px;
        font-size: 1.1rem;
    }

    .landing-sections {
        padding: 50px 30px;
        margin-top: 60px; /* RÉDUIT: 120px → 60px (Android/Tablette) */
    }

    .landing-section-title {
        font-size: 2rem;
    }

    .landing-section-content {
        padding: 30px 20px;
        font-size: 1.05rem;
    }

    /* Story pages */
    .story-container {
        padding: 0 30px 50px !important;  /* 100px → 0 - Titre juste après header */
    }

    .story-title {
        font-size: 2.4rem;
    }

    .story-subtitle {
        font-size: 1.15rem;
    }

    .story-text {
        font-size: 1.05rem;
        line-height: 1.75;
    }

    .section-header {
        font-size: 1.5rem;
    }

    .case-item {
        padding: 20px 18px;
    }

    .case-text {
        font-size: 1rem;
    }

    .cta-title {
        font-size: 1.7rem;
    }

    .cta-subtitle {
        font-size: 1.05rem;
    }

    .cta-button {
        padding: 16px 32px;
        font-size: 1.05rem;
    }

    /* Chat - Confortable */
    .chat-header {
        padding: 18px;
        min-height: 80px;
    }

    .chat-title {
        font-size: 1.45rem;
    }

    .chat-close {
        width: 48px;
        height: 48px;
    }

    .chat-messages {
        padding: 25px 20px;
    }

    .chat-message {
        max-width: 75%;
    }

    .message-text {
        padding: 14px 18px;
        font-size: 1.05rem;
    }

    .chat-input-container {
        padding: 20px;
    }

    .chat-input {
        padding: 14px 18px;
        font-size: 1.05rem;
    }

    .chat-send-btn {
        width: 48px;
        height: 48px;
    }

    /* Chat Android - Possibilité semi-plein écran */
    .chat-container {
        width: 90%;
        max-width: 500px;
        height: 85vh;
        border-radius: 20px; /* Pas plein écran */
        margin: auto;
    }

    /* Sidebar plus large */
    .sidebar {
        max-width: 380px;
        padding: 100px 30px 40px;
    }

    .sidebar-section h3 {
        font-size: 1.2rem;
    }

    .sidebar-item {
        padding: 14px 18px;
        font-size: 1.05rem;
    }

    .expertise-tag {
        padding: 12px 16px;
        font-size: 0.95rem;
    }

    /* Grilles 2 colonnes possibles sur Android */
    .landing-cards {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
    }

    /* Search bar plus confortable */
    .search-bar {
        width: calc(100% - 50px);
        max-width: 500px;
    }

    .search-input {
        padding: 18px 60px 18px 24px;
        font-size: 1.05rem;
    }

    .search-submit-btn {
        width: 42px;
        height: 42px;
    }

    /* ========================================
       IMAGES STYLÉES - RESPONSIVE MOBILE
       ======================================== */

    /* Simplifier les blobs sur mobile */
    .image-blob-1,
    .image-blob-2,
    .image-blob-3 {
        border-radius: 24px !important; /* Border-radius simple sur mobile */
        box-shadow: 0 10px 30px rgba(255, 127, 92, 0.2) !important;
    }

    /* Désactiver clip-path sur mobile (performance) */
    .image-hexagon,
    .image-pentagon {
        clip-path: none !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 30px rgba(255, 127, 92, 0.25) !important;
    }

    /* Simplifier masked gradients sur mobile */
    .image-masked-gradient {
        mask-image: none !important;
        -webkit-mask-image: none !important;
        border-radius: 20px !important;
    }

    /* Cards sur mobile - pas de backdrop-filter (performance) */
    .image-card-container {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 127, 92, 0.08) !important;
        padding: 15px !important;
    }

    /* Grids → 1 colonne sur mobile */
    .images-grid-2,
    .images-grid-3 {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        margin: 30px 0 !important;
    }

    /* Magazine layout → Stack vertical sur mobile */
    .image-text-layout {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        margin: 30px 0 !important;
    }

    .image-text-layout.reverse {
        direction: ltr !important;
    }

    /* Désactiver hover effects sur mobile */
    .image-wrapper img,
    .image-blob-1:hover img,
    .image-blob-2:hover img,
    .image-blob-3:hover img,
    .image-hexagon:hover img,
    .image-pentagon:hover img,
    .image-masked-gradient:hover img,
    .image-card-container:hover img {
        transform: none !important;
    }

    .image-hexagon:hover,
    .image-pentagon:hover,
    .image-card-container:hover {
        transform: none !important;
    }

}

/* ========================================
   ACCESSIBILITÉ - PREFERS-REDUCED-MOTION
   Respect des préférences utilisateur iOS/Android
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Désactiver animations critiques */
    .intro-animation,
    .choice-bubble,
    .experts-scroll-island,
    .circuit-line {
        animation: none !important;
    }

    /* Garder transitions essentielles mais ultra-rapides */
    .choice-bubble,
    .hamburger-button,
    .cta-button {
        transition: opacity 0.01ms, transform 0.01ms !important;
    }
}

/* ========================================
   OPTIMISATION CLAVIER VIRTUEL iOS/ANDROID
   Gère le resize dynamique du viewport
   ======================================== */

@media (max-width: 768px) {
    /* Chat modal - Gestion clavier iOS */
    .chat-modal.active {
        /* Hauteur dynamique pour s'adapter au clavier */
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height (iOS 15+) */
    }

    .chat-container {
        height: 100vh;
        height: 100dvh;
    }

    /* Input container reste fixé en bas MÊME avec clavier */
    .chat-input-container {
        position: sticky;
        bottom: 0;
        background: inherit;
        z-index: 10;
    }

    /* Messages scrollent au-dessus du clavier */
    .chat-messages {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        /* Scroll jusqu'au clavier, pas en dessous */
        max-height: calc(100dvh - 160px); /* Header + input */
    }

    /* Formulaire fallback - Gestion clavier */
    #fallbackModal {
        height: 100vh !important;
        height: 100dvh !important;
    }

    #fallbackModal > div {
        max-height: 85vh;
        max-height: 85dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Inputs - Auto-scroll iOS lors du focus */
    input:focus,
    textarea:focus {
        /* iOS scrolle automatiquement l'input en vue */
        scroll-margin-top: 20px;
        scroll-margin-bottom: 20px;
    }
}

/* ========================================
   AMÉLIORATION BOUTONS CTA MOBILE
   Touch targets optimaux + feedback visuel
   ======================================== */

@media (max-width: 768px) {
    /* Tous les CTA - Taille minimale confortable */
    .cta-button,
    .chat-send-btn,
    button[type="submit"] {
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 14px 24px !important;
        font-size: 1rem !important;
        border-radius: 24px !important;
        font-weight: 700 !important;
        letter-spacing: 0.3px !important;
    }

    /* Search submit button - Override avec padding 0 pour SVG */
    .search-submit-btn {
        padding: 0 !important;
        border-radius: 50% !important;
        min-width: 38px !important;
        min-height: 38px !important;
        width: 38px !important;
        height: 38px !important;
    }

    /* Feedback tactile amélioré - Plus visible */
    .cta-button:active,
    button:active,
    .choice-bubble:active {
        transform: scale(0.96) !important;
        opacity: 0.9 !important;
        transition: all 0.1s ease-out !important;
    }

    /* Bouton submit formulaire fallback */
    #fallbackModal button[type="submit"] {
        width: 100% !important;
        min-height: 52px !important;
        font-size: 1.05rem !important;
        font-weight: 800 !important;
        margin-top: 10px !important;
    }

    /* Espacer les boutons verticalement */
    .cta-button + .cta-button,
    button + button {
        margin-top: 15px !important;
    }
}

/* ========================================
   OPTIMISATION FORMULAIRE FALLBACK MOBILE
   UX parfaite pour collecte de leads
   ======================================== */

@media (max-width: 768px) {
    /* Modal fallback - Plein écran confortable */
    #fallbackModal {
        padding: 20px !important;
        align-items: flex-start !important;
        padding-top: 40px !important;
    }

    #fallbackModal > div {
        width: 100% !important;
        max-width: 100% !important;
        padding: 30px 20px !important;
        margin: 0 !important;
    }

    /* Titre + description - Lisibilité maximale */
    #fallbackModal h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }

    #fallbackModal p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 25px !important;
    }

    /* Inputs formulaire - Taille confortable iOS */
    #fallbackModal input,
    #fallbackModal textarea {
        width: 100% !important;
        padding: 14px 16px !important;
        font-size: 16px !important; /* Évite zoom iOS */
        border-radius: 12px !important;
        margin-bottom: 15px !important;
        border: 1px solid rgba(255, 127, 92, 0.3) !important;
        background: rgba(26, 20, 16, 0.5) !important;
        color: #f5f5f7 !important;
        min-height: 48px !important;
        box-sizing: border-box !important;
    }

    #fallbackModal textarea {
        min-height: 120px !important;
        resize: vertical !important;
        font-family: inherit !important;
    }

    /* Placeholder plus visible */
    #fallbackModal input::placeholder,
    #fallbackModal textarea::placeholder {
        color: rgba(245, 245, 247, 0.5) !important;
        opacity: 1 !important;
    }

    /* Focus states - Feedback clair */
    #fallbackModal input:focus,
    #fallbackModal textarea:focus {
        outline: none !important;
        border-color: rgba(255, 127, 92, 0.6) !important;
        background: rgba(26, 20, 16, 0.7) !important;
        box-shadow: 0 0 0 3px rgba(255, 127, 92, 0.15) !important;
    }

}

/* ========================================
   PETITS ÉCRANS EXTRÊMES (iPhone SE, etc.)
   ======================================== */

@media (max-width: 375px) {
    /* Réduire padding pour maximiser espace */
    #fallbackModal > div {
        padding: 25px 15px !important;
    }

    #fallbackModal h2 {
        font-size: 1.3rem !important;
    }

    #fallbackModal p {
        font-size: 0.9rem !important;
    }

    /* Inputs plus compacts */
    #fallbackModal input,
    #fallbackModal textarea {
        padding: 12px 14px !important;
        margin-bottom: 12px !important;
    }

    /* Boutons CTA légèrement réduits */
    .cta-button,
    button[type="submit"] {
        padding: 12px 20px !important;
        font-size: 0.95rem !important;
    }
}

/* ========================================
   AMÉLIORATIONS FINALES UX MOBILE
   ======================================== */

@media (max-width: 768px) {
    /* Hamburger button - Feedback tactile premium */
    .hamburger-button {
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        will-change: transform, background-color;
    }

    .hamburger-button:active {
        transform: scale(0.92) !important;
        transition: transform 0.1s ease-out !important;
    }

    /* Menu fullscreen - Animation fluide d'ouverture */
    .mobile-menu-overlay {
        animation: fadeIn 0.25s ease-out forwards;
    }

    .mobile-menu-overlay.open {
        animation: fadeIn 0.25s ease-out forwards !important;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: scale(0.98);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .fullscreen-menu-content {
        animation: slideDown 0.3s ease-out forwards;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Search bar - Éviter zoom iOS (16px minimum) */
    .search-input {
        font-size: 16px !important; /* Critique pour iOS */
    }

    .search-input::placeholder {
        font-size: 15px !important;
    }

    /* Landing hero - Espacement optimal pour tous devices */
    .landing-hero {
        padding-top: max(50px, env(safe-area-inset-top) + 50px) !important;
        padding-bottom: max(30px, env(safe-area-inset-bottom) + 30px) !important;
    }

    /* Landing sections - Scroll plus fluide */
    .landing-sections {
        scroll-margin-top: 100px; /* Offset pour le header fixe */
    }

    /* Cards - Espacement amélioré */
    .landing-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }

    .landing-card:active {
        transform: scale(0.98) !important;
    }

    /* Story pages - Lisibilité optimale */
    .story-container {
        padding-top: 0 !important;  /* OVERRIDE - Titre juste après header */
    }

    /* Sidebar items - Touch feedback */
    .sidebar-item {
        transition: all 0.2s ease !important;
    }

    .sidebar-item:active {
        transform: scale(0.97) !important;
        opacity: 0.8 !important;
    }

    /* Expertise tags - Meilleur feedback */
    .expertise-tag {
        transition: all 0.2s ease !important;
    }

    .expertise-tag:active {
        transform: scale(0.96) !important;
    }

    /* Scroll indicator - Animation subtile */
    .scroll-indicator {
        animation: pulse 2s ease-in-out infinite !important;
    }

    @keyframes pulse {
        0%, 100% {
            opacity: 1;
            transform: translateY(0);
        }
        50% {
            opacity: 0.6;
            transform: translateY(5px);
        }
    }

    /* Chat messages - Apparition fluide */
    .chat-message {
        animation: slideInMessage 0.3s ease-out forwards;
    }

    @keyframes slideInMessage {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Typing indicator - Animation améliorée */
    .typing-indicator {
        animation: fadeInTyping 0.3s ease-out;
    }

    @keyframes fadeInTyping {
        from {
            opacity: 0;
            transform: scale(0.9);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* Social buttons - Feedback individuel */
    .social-button {
        transition: all 0.2s ease !important;
    }

    .social-button:active {
        transform: scale(0.9) !important;
        opacity: 0.8 !important;
    }
}

/* ========================================
   OPTIMISATIONS SPÉCIFIQUES ANDROID
   ======================================== */

@media (max-width: 768px) {
    /* Désactiver surbrillance bleue Android */
    * {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    /* Ré-activer sélection pour inputs et textes */
    input,
    textarea,
    .message-text,
    p,
    h1, h2, h3, h4, h5, h6,
    span,
    .landing-section-content {
        -webkit-user-select: text !important;
        user-select: text !important;
    }

    /* Éviter scroll élastique indésirable sur Android */
    body {
        overscroll-behavior-y: contain;
    }

    /* Scroll fluide natif */
    .chat-messages,
    .fullscreen-menu-content,
    .story-container,
    .landing-sections {
        scroll-behavior: smooth;
        overscroll-behavior: contain;
    }
}

/* ========================================
   POLISH FINAL - MICROINTERACTIONS
   ======================================== */

@media (max-width: 768px) {
    /* Logo button - Animation subtile au hover/focus */
    .logo-btn {
        transition: transform 0.3s ease !important;
    }

    .logo-btn:active {
        transform: scale(0.95) !important;
    }

    /* Site switcher - Feedback premium */
    #siteSwitcher {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    #siteSwitcher:active {
        transform: scale(0.96) !important;
    }

    /* Welcome screen - Apparition des éléments en cascade */
    .welcome-title {
        animation: fadeInUp 0.6s ease-out 0.1s both;
    }

    .welcome-subtitle {
        animation: fadeInUp 0.6s ease-out 0.3s both;
    }

    .choice-bubbles {
        animation: fadeInUp 0.6s ease-out 0.5s both;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Smooth transitions pour changement de thème */
    body {
        transition: background-color 0.4s ease !important;
    }

    body::before {
        transition: background 0.4s ease !important;
    }
}

/* ========================================
   FIXES SPÉCIFIQUES iOS SAFARI
   ======================================== */

@media (max-width: 768px) {
    /* Fix input zoom iOS - 16px minimum PARTOUT */
    input,
    textarea,
    select,
    .search-input,
    .chat-input {
        font-size: 16px !important;
    }

    /* Fix sticky footer iOS */
    .chat-input-container {
        position: -webkit-sticky !important;
        position: sticky !important;
    }

    /* Fix 100vh iOS (barre navigation Safari) */
    .mobile-menu-overlay,
    .chat-modal,
    .landing-hero {
        min-height: -webkit-fill-available !important;
    }

    /* Fix overflow iOS */
    body {
        position: relative;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Fix bounce scroll iOS - Désactivé sur certains éléments */
    .chat-modal,
    #fallbackModal {
        overscroll-behavior: none;
        -webkit-overflow-scrolling: touch;
    }

    /* ========================================
       RESSERRAGE GOUV MOBILE - MINIMAL (MATCH IT)
       ======================================== */

    /* Story container top padding réduit - MINIMAL */
    body.theme-gov .story-container {
        padding-top: 0 !important;  /* 40px → 0 - ÉLIMINATION TOTALE */
    }

    /* Hero plus compact - MINIMAL */
    body.theme-gov .story-hero {
        padding: 0 !important;  /* 10px → 0 - ÉLIMINATION TOTALE */
        margin-bottom: 0 !important;  /* 15px → 0 - AUCUN ESPACE */
    }

    /* Titre moins espacé - MINIMAL */
    body.theme-gov .story-title {
        margin-bottom: 8px !important;  /* 15px → 8px */
    }

    /* Sous-titre moins espacé - MINIMAL */
    body.theme-gov .story-subtitle {
        margin-bottom: 15px !important;  /* 30px → 15px */
    }

    /* Sections encore plus serrées - MINIMAL */
    body.theme-gov .story-section {
        margin-bottom: 10px !important;  /* 12px → 10px */
    }

    /* Cards plus compactes */
    body.theme-gov .story-card {
        padding: 20px 15px !important;   /* 25px 20px → 20px 15px */
        margin-bottom: 15px !important;  /* 22px → 15px */
    }

    /* Headers moins espacés */
    body.theme-gov .section-header {
        margin-bottom: 12px !important;  /* 20px → 12px */
    }

    /* Textes dans les cards plus serrés */
    body.theme-gov .story-text {
        margin-bottom: 15px !important;
    }

    /* Espacements internes réduits */
    body.theme-gov .story-card > *:not(:last-child) {
        margin-bottom: 15px !important;
    }

    /* CTA moins espacé du contenu - MINIMAL */
    body.theme-gov .cta-final {
        margin-top: 20px !important;  /* 25px → 20px */
        margin-bottom: 30px !important;
    }

    /* ========================================
       CTA FONT SIZE MOBILE (IT + GOUV)
       ======================================== */

    .cta-final h3,
    .cta-section h3 {
        font-size: 1.6rem !important;    /* 2.5rem → 1.6rem */
        margin-bottom: 10px !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }

    .cta-final p,
    .cta-section p {
        font-size: 0.95rem !important;   /* 1.2rem → 0.95rem */
        margin-bottom: 20px !important;
    }

    /* Spans internes héritent */
    .cta-final h3 span,
    .cta-section h3 span {
        font-size: inherit !important;
    }

    /* ========================================
       CADRES VISIBLES GOUV
       ======================================== */

    /* Cibler les divs avec inline styles dans Nos Valeurs */
    body.theme-gov .story-card > div[style*="background: rgba(245, 245, 247, 0.03)"] {
        background: rgba(245, 245, 247, 0.15) !important;
        border: 2px solid rgba(203, 199, 190, 0.6) !important;
        box-shadow: 0 4px 12px rgba(203, 199, 190, 0.2) !important;
    }

    /* Alternative: si les boxes sont dans une grid */
    body.theme-gov .story-card [style*="display: grid"] > div {
        background: rgba(245, 245, 247, 0.15) !important;
        border: 2px solid rgba(203, 199, 190, 0.6) !important;
        box-shadow: 0 4px 12px rgba(203, 199, 190, 0.2) !important;
    }

    /* Titres dans les value boxes */
    body.theme-gov .story-card [style*="font-weight: 700"] {
        margin-bottom: 8px !important;  /* 12px → 8px */
    }

    /* Grids de values → 1 colonne sur mobile pour éviter débordement */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Grids de values Gov plus serrées */
    body.theme-gov [style*="grid-template-columns"] {
        gap: 15px !important;
    }

    /* Titres des valeurs → Toujours en gras sur mobile */
    [style*="grid-template-columns"] > div [style*="font-weight: 700"] {
        font-weight: 700 !important;
    }

    /* ========================================
       SWITCHER MOBILE - VISIBILITÉ GOV
       ======================================== */

    /* Switcher "Lab Technique" sur fond Gov beige → Fond orange + texte blanc */
    body.theme-gov .sidebar-switcher {
        background: #FF7F5C !important;
        border-color: #FF7F5C !important;
    }

    body.theme-gov .sidebar-switcher-text {
        color: #ffffff !important;
        font-weight: 600;
    }

    /* ========================================
       IMAGES EXPERTISES - MOBILE
       ======================================== */

    /* Override hauteur images expertise sur mobile */
    .story-card[style*="padding: 0; overflow: hidden;"] img {
        height: 250px !important;      /* Plus grand que auto, homogène */
        max-width: 100% !important;    /* Full width sur mobile */
        margin: 0 !important;          /* Pas de margin auto sur mobile */
    }

    /* Espacement symétrique autour des images */
    .story-section[style*="margin-top: 40px"] {
        margin-bottom: 30px !important;   /* Harmonisé avec margin-top */
    }
}