/*
 * Correctif couleur "bleu clair" (demandé) — sans passer par un rebuild npm.
 *
 * Le fichier compilé par Vite (Views/dist/assets/app-*.css) définit
 * --color-primary dans un @layer Tailwind. En CSS moderne, une règle HORS
 * @layer (comme celle-ci) a toujours priorité sur une règle DANS un @layer,
 * quel que soit l'ordre de chargement des fichiers. Redéfinir la variable
 * ici suffit donc à changer la couleur PARTOUT (tous les boutons "bg-primary",
 * textes "text-primary", bordures "border-primary", etc.) sans toucher au
 * système de build.
 *
 * Pour rester cohérent la prochaine fois que le projet sera reconstruit
 * (`npm run build`), la même valeur a aussi été mise à jour dans
 * Views/style/style.css (la source Tailwind) — ce fichier ici n'est donc
 * qu'un filet de sécurité qui marche immédiatement, sans rebuild.
 */
:root {
    --color-primary: #38bdf8;
}

/*
 * Page Catégorie : le menu des catégories (à gauche) doit rester en place
 * pendant qu'on défile les produits (à droite), et inversement — même
 * filet de sécurité que ci-dessus : du CSS pur, indépendant du build Vite,
 * qui marche tout de suite (même sous WAMP, sans npm run build).
 *
 * - position: sticky + top: 1rem -> le menu se "colle" en haut de l'écran
 *   dès qu'on commence à scroller la page/les produits, au lieu de défiler
 *   avec eux.
 * - align-self: flex-start -> sans ça, le menu (dans un conteneur flex)
 *   s'étire pour égaler la hauteur des produits, ce qui empêche le sticky
 *   de fonctionner correctement.
 * - max-height + overflow-y: auto -> si la liste de catégories dépasse la
 *   hauteur de l'écran, elle défile dans son propre espace.
 * - overscroll-behavior: contain -> empêche que défiler jusqu'au bout de
 *   cette liste ne "déborde" sur le défilement de la page (donc défiler les
 *   catégories ne fait plus bouger les produits).
 */
.categorie-nav-sticky {
    position: -webkit-sticky; /* Safari / anciennes webviews iOS */
    position: sticky;
    top: 1rem;
    align-self: flex-start;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/*
 * Empêche iOS de zoomer automatiquement toute la page quand on touche un
 * champ de saisie (chat, recherche, connexion, code promo du panier...).
 * Safari sur iPhone zoome tout seul dès qu'un champ texte a une taille de
 * police inférieure à 16px au moment où on le touche. Ce zoom brusque
 * donnait l'impression que "écrire ne marche pas" : le clavier s'ouvre,
 * l'écran zoome et bouge d'un coup, et les éléments collés en haut/bas de
 * l'écran se retrouvent décalés. Passer les champs à 16px sur mobile
 * empêche ce zoom, sans changer leur apparence sur ordinateur.
 */
@media screen and (max-width: 768px) {
    input,
    textarea,
    select {
        font-size: 16px !important;
    }
}