/* =====================================================================
   WebApp — corrections mobiles
   Chargée en dernier : elle n'enrichit que, sans toucher au CSS du socle.
   Constat de l'audit (375 × 667) : sept commandes sous 44 px, dont le
   bouton du menu (40 px) et la bascule de thème (38 px).
   ===================================================================== */

@media (max-width: 940px) {
    /*
       PIÈGE À CONNAÎTRE — backdrop-filter fait de l'en-tête le bloc conteneur
       de ses descendants « position: fixed ». Le panneau du menu, déclaré
       « inset: 70px 0 auto 0 », se cale donc sur l'en-tête et non sur l'écran.
       Cela fonctionne par coïncidence tant que l'en-tête mesure 70 px, mais
       toute évolution casse le calcul. On neutralise le filtre ici, où
       l'en-tête est de toute façon opaque, et on borne le panneau pour qu'il
       défile au lieu de déborder sur un écran court (iPhone SE : 667 px).
       Ne réintroduire ni backdrop-filter, ni transform, ni filter sur
       .site-header dans ce point d'arrêt.
    */
    .site-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--surface);
    }
    /*
       Note de vérification : mesuré dans l'outil de prévisualisation, le
       panneau semblait rester à translateY(-130%) une fois ouvert. C'était
       un artefact — ce moteur de rendu n'avance jamais les transitions.
       Transition coupée, le panneau se place bien à top:70 avec transform
       nul. Aucune correction n'est nécessaire ici : ne pas ajouter de
       !important sur .nav__menu.open.
    */
    .nav__menu {
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Commandes de l'en-tête : au doigt, 44 px minimum. */
    .nav__toggle,
    .theme-toggle,
    .lang__btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .lang__btn { padding-inline: 12px; }

    .brand {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    /* Entrées du menu déroulé : bandeaux pleine largeur, faciles à viser. */
    .nav__menu .nav__link,
    .nav__sub a {
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    /* Liens de contenu les plus utilisés au doigt. */
    a[href^="tel:"],
    a[href^="mailto:"],
    a[href*="wa.me"] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Liens « En savoir plus », pied de page, listes latérales. */
    .footer-links a,
    .aside-list a,
    .card a:not(.btn),
    .post-card__body a:not(.btn) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Même les petits boutons restent des cibles réglementaires. */
    .btn { min-height: 44px; }

    /* Liens d'action isolés (« En savoir plus », « Tout voir ») : 44 px.
       ATTENTION : ne jamais viser « .section a » globalement — les cartes
       sont elles-mêmes des <a class="card"> et passer en inline-flex casse
       la grille, avec 8 px de débordement à la clé.

       « .aside-list a » et « .footer-links a » étaient déjà couverts par la
       règle précédente : la répétition ne changeait rien au rendu, mais elle
       fait croire à deux intentions distinctes quand on relit. */
    .section__head a:not(.btn),
    .card__more,
    a.link-more {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

}

/* PIED DE PAGE — deux colonnes plutôt qu'une pile.

   Quinze liens à 52 px (44 de cible tactile + 8 de marge) faisaient près de
   800 px de défilement pour une zone qu'on parcourt du regard. La cible
   tactile est une exigence d'accessibilité et ne bouge pas ; on arrête
   simplement de l'empiler.

   POURQUOI 520 ET PAS 940. Au-dessus de 520 px la grille du pied passe
   elle-même à deux colonnes (site.css), puis à quatre : mettre les liens sur
   deux colonnes à l'intérieur donnerait des colonnes de 155 px, où
   « Applications de gestion au Maroc » se casserait en quatre lignes. Le
   dédoublement n'a de sens que là où la grille est retombée sur une colonne
   et où la cellule occupe toute la largeur. */
@media (max-width: 520px) {
    .footer-links {
        columns: 2;
        column-gap: 20px;
    }
    .footer-links li {
        /* La marge basse disparaît : la hauteur de la cible sépare déjà les
           liens, l'ajouter revenait à compter deux fois. */
        margin-bottom: 0;
        /* Sans cela un lien sur deux lignes se coupe en bas de colonne. */
        break-inside: avoid;
    }
    .footer-links a { width: 100%; }
}

@media (max-width: 640px) {
    /* Le bandeau ne doit pas pousser le premier contenu hors de l'écran. */
    .hero { padding-block: clamp(40px, 9vw, 72px); }
    .hero__cta .btn { width: 100%; justify-content: center; }

    /* La maquette en perspective coûte cher et se lit mal sur 375 px. */
    .mock { transform: none; }

    /* Grilles : une colonne, sans exception. */
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
    .stats { grid-template-columns: 1fr 1fr; }

    /* Tableaux d'administration : défilement horizontal explicite. */
    .dtable { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 400px) {
    .stats { grid-template-columns: 1fr; }
    .lang__btn span { display: none; }   /* le code de langue suffit */
}

/* Mesure sur /contact et /partenaires en 375 px : le lien « En savoir plus »
   du bandeau cookies faisait 272 x 41 px, soit 3 px sous le seuil tactile. */
@media (max-width: 940px) {
    .cookie-banner a:not(.btn) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* =====================================================================
   Selecteur de langue inaccessible — deux causes distinctes.

   1. Sous 940 px, le bloc .lang se trouve DANS .nav__menu, le panneau
      deroulant. Ce panneau est « overflow: auto » : un enfant en position
      absolue y est ROGNE, et il porte un transform, ce qui en fait le bloc
      conteneur. Mesure : les liens sortaient a -49 px, hors ecran, et
      elementFromPoint renvoyait le logo a leur place.
      Solution : sur telephone le menu de langue n'est plus un menu flottant,
      il se deplie dans le flux. Rien a rogner, rien a superposer.

   2. Sur grand ecran, .lang__menu n'avait aucun z-index et passait derriere
      le contenu de l'en-tete.
   ===================================================================== */
@media (max-width: 940px) {
    .lang { width: 100%; }
    .lang__btn { width: 100%; justify-content: space-between; }
    .lang__menu {
        position: static;
        display: block;          /* toujours deplie : un cran de moins a franchir */
        min-width: 0;
        margin-block-start: 6px;
        box-shadow: none;
        background: transparent;
        border: 0;
        padding: 0;
    }
    .lang__menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
        border: 1px solid var(--line);
        margin-block-end: 6px;
        background: var(--surface);
    }
}

/* =====================================================================
   Barre d'actions dans le menu deroulant (telephone).

   Constat : .nav__actions est un « display:flex » en RANGEE. Dans le panneau
   deroulant, large de ~250 px, il tassait sur une meme ligne la bascule de
   theme, le selecteur de langue — devenu une liste de trois entrees depuis
   qu'il ne flotte plus — et le bouton « Reserver un appel ». Resultat : le
   libelle du bouton se cassait sur trois lignes dans une pastille etroite, et
   il chevauchait la liste des langues.

   Sous 940 px, ces actions s'empilent donc en COLONNE, chacune sur toute la
   largeur. Un bouton d'appel a l'action est le dernier endroit ou economiser
   de la place.
   ===================================================================== */
@media (max-width: 940px) {
    .nav__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
        padding-block-start: 12px;
        margin-block-start: 4px;
        border-block-start: 1px solid var(--line);
    }

    /* Le bouton principal : pleine largeur, texte sur une seule ligne. */
    .nav__actions .btn {
        width: 100%;
        justify-content: center;
        white-space: nowrap;
        min-height: 48px;
        padding-inline: 16px;
    }

    /* La bascule de theme reste un carre, mais alignee avec le reste. */
    .nav__actions .theme-toggle {
        align-self: flex-start;
        width: 44px;
        min-width: 44px;
        flex: 0 0 auto;
    }
}