/*
 * Styles spécifiques pour l'interface tactile
 * Optimise l'expérience utilisateur sur les écrans tactiles (bornes)
 */

/* --- TACTILE GENERAL --- */
html {
    font-size: 18px; /* Taille de police plus grande pour les écrans tactiles */
}

body {
    touch-action: manipulation; /* Évite le délai de 300ms sur les appareils tactiles */
    -webkit-overflow-scrolling: touch; /* Défilement fluide sur iOS */
}

/* Agrandir les zones cliquables */
button, 
.btn,
.menu-item,
a {
    min-height: 44px; /* Taille minimale recommandée pour les éléments tactiles */
    min-width: 44px;
}

/* Éviter le texte trop petit */
p, 
li, 
span, 
input, 
select, 
textarea {
    font-size: 1rem;
}

/* Désactiver la sélection de texte et le zoom sur double-tap */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

/* Permettre la sélection de texte dans les champs de formulaire */
input, 
textarea {
    user-select: text;
}

/* --- MENU TACTILE --- */
.menu-item {
    padding: 15px 10px;
}

.menu-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.menu-label {
    font-size: 1rem;
}

/* --- BOUTONS TACTILES --- */
.btn {
    padding: 15px 25px;
    font-size: 1.1rem;
}

.btn-sm {
    padding: 10px 15px;
    font-size: 1rem;
}

/* --- FORMULAIRES TACTILES --- */
.form-control {
    padding: 15px;
    font-size: 1.1rem;
    height: auto;
}

/* Agrandir les cases à cocher et boutons radio */
input[type="checkbox"],
input[type="radio"] {
    transform: scale(1.5);
    margin-right: 10px;
}

/* Agrandir les sélecteurs */
select {
    padding: 15px;
    font-size: 1.1rem;
    height: auto;
    background-size: 20px;
}

/* --- CALENDRIER TACTILE --- */
.calendar-day {
    font-size: 1.2rem;
}

.calendar-day.has-event {
    transition: background-color 0.3s;
}

.calendar-day.has-event:hover,
.calendar-day.has-event:active {
    transform: none; /* Éviter les transformations sur tactile */
    background-color: #c3e6cb;
    box-shadow: none;
}

/* --- CARTES ET ÉLÉMENTS INTERACTIFS --- */
.document-card,
.activity-card,
.subsidy-card,
.news-item,
.subvention-item,
.product-item,
.order-item {
    transition: background-color 0.3s;
}

.document-card:hover,
.activity-card:hover,
.subsidy-card:hover,
.news-item:hover,
.subvention-item:hover,
.product-item:hover,
.order-item:hover {
    transform: none; /* Éviter les transformations sur tactile */
    box-shadow: none;
    background-color: #f0f0f0;
}

/* --- FEEDBACK TACTILE --- */
.document-card:active,
.activity-card:active,
.subsidy-card:active,
.news-item:active,
.subvention-item:active,
.product-item:active,
.order-item:active,
.btn:active,
.menu-item:active {
    opacity: 0.7; /* Feedback visuel au toucher */
}

/* --- MODIFICATIONS POUR MODE PORTRAIT --- */
.portrait-mode {
    font-size: 20px; /* Police encore plus grande en mode portrait */
}

.portrait-mode .header {
    padding: 20px;
}

.portrait-mode .header h1 {
    font-size: 1.5rem;
}

.portrait-mode .content-container {
    padding: 15px;
}

.portrait-mode .menu-item {
    padding: 20px 10px;
    width: 50%; /* 2 items par rangée en mode portrait */
}

.portrait-mode .menu-icon {
    font-size: 2.5rem;
}

.portrait-mode .page {
    padding: 20px;
}

.portrait-mode .btn {
    padding: 20px 30px;
    font-size: 1.2rem;
}

.portrait-mode .form-control {
    padding: 20px;
    font-size: 1.2rem;
}

.portrait-mode .calendar-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.portrait-mode .calendar-view {
    min-width: 700px; /* Assurer que le calendrier reste lisible */
}

.portrait-mode .calendar-day {
    font-size: 1.3rem;
}

/* --- CLAVIER VIRTUEL --- */
/* Ajuster l'interface quand le clavier virtuel apparaît */
@media (max-height: 600px) {
    .portrait-mode .content-container {
        padding: 10px;
    }
    
    .portrait-mode .page {
        padding: 15px;
    }
    
    .portrait-mode .main-menu {
        display: none; /* Cacher le menu quand le clavier est visible */
    }
}

/* --- GESTES TACTILES --- */
/* Styles pour les éléments qui peuvent être manipulés par gestes */
.swipeable {
    touch-action: pan-y; /* Permet le swipe vertical */
}

.pinchable {
    touch-action: pinch-zoom; /* Permet le pinch to zoom */
}

/* --- FEEDBACK VISUEL --- */
/* Ripple effect pour le feedback tactile */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.5s, opacity 1s;
}

.ripple:active:after {
    transform: scale(0, 0);
    opacity: 0.3;
    transition: 0s;
}

/* --- ACCESSIBILITÉ TACTILE --- */
/* Augmenter la taille des contrôles de zoom pour le PDF */
.portrait-mode .pdf-controls button {
    padding: 15px;
    font-size: 1.2rem;
}

.portrait-mode .pdf-control-group {
    margin-bottom: 10px;
}

/* Fixes spécifiques pour iOS */
@supports (-webkit-touch-callout: none) {
    /* Styles spécifiques à iOS */
    input, 
    textarea, 
    select {
        font-size: 16px; /* Évite le zoom automatique lors de la sélection des champs */
    }
    
    .fixed-element {
        /* Évite les problèmes avec les éléments fixed sur iOS */
        position: absolute;
    }
}