/* --- VARIABLES DE STYLE GLOBALES --- */
        :root {
            --fiche-accent-color: #1f78b4; 
            --fiche-border-radius: 8px;
            --fiche-input-bg: #e9ecef;
            --fiche-secondary-accent: red;
            /* Nouvelle couleur pour les champs importants */
            --fiche-required-bg: #d0d7de; 
        }

        /* --- Réglages d'impression A4 & Conteneur Principal (Desktop) --- */
        @page {
            size: A4 portrait;
            margin: 0.5cm;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0; padding: 0; height: 297mm;
        }

        .page-container {
            width: 210mm; height: 100%; padding: 5mm;
            box-sizing: border-box; display: flex; flex-wrap: wrap;
            justify-content: space-between; align-content: space-between;
            position: relative;
        }
        
        /* Lignes de coupe (Desktop) */
        .page-container::before {
            content: ''; position: absolute; top: 5mm; bottom: 5mm; left: 50%;
            transform: translateX(-50%); border-left: 1px dashed #aaa; z-index: 10;
        }
        .page-container::after {
            content: ''; position: absolute; left: 5mm; right: 5mm; top: 50%;
            transform: translateY(-50%); border-top: 1px dashed #aaa; z-index: 10;
        }
        .hidden { display: none !important; }

        /* Styles des Inputs/Textareas */
        input[type="text"], input[type="time"], input[type="tel"], input[type="number"], select, textarea {
            background-color: var(--fiche-input-bg); border: none;
            border-radius: 4px; padding: 3px 6px; font-size: 0.85em;
            color: #333; width: 100%; box-sizing: border-box; outline: none;
        }
        select {
             -webkit-appearance: none;
             -moz-appearance: none;
             appearance: none;
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
             background-repeat: no-repeat;
             background-position: right 0.5rem center;
             background-size: 1.5em;
             padding-right: 2.5rem;
        }
        
        /* Nouvelle classe pour les champs obligatoires avec background foncé */
        .bg-required-field {
            background-color: var(--fiche-required-bg) !important;
        }

        /* Styles spécifiques pour le Compas (Rose des vents) */
        .compas {
            width: 100px; height: 100px; border: 1px solid #555;
            border-radius: 50%; position: relative;
            background-image: repeating-conic-gradient(#333 0deg 1.5deg, transparent 1.5deg 30deg);
            background-repeat: repeat; display: flex; justify-content: center; align-items: center;
        }
        .compas::after {
            content: ''; position: absolute; width: 90%; height: 90%;
            background-color: white; border-radius: 50%; z-index: 1;
        }
        .runway-line { background-color: var(--fiche-required-bg);z-index:99; }
        .rwy-num { color: black;z-index:9999; background-color: transparent; font-size: 0.9rem;}
        .rwy-num.num-piste-1 { top: 8px; } .rwy-num.num-piste-2 { bottom: 8px; } 
        .degree-mark span { top: -20px; }
        .degree-mark.cardinal-mark span { 
             font-weight: bold; 
             color: var(--fiche-accent-color);
        }


        .vol-termine-watermark {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3.5rem;
            font-weight: bold;
            color: var(--fiche-accent-color);
            opacity: 0.15;
            transform: rotate(-35deg);
            pointer-events: none;
            z-index: 100;
            text-transform: uppercase;
            letter-spacing: 2px;
            text-align: center;
        }


        h1 { color: var(--fiche-accent-color);z-index:9999; text-align: center; } /* Aligner le titre au centre */
        
        /* Style pour l'input dynamique en bas de page */
        #dynamic-inputs { margin: 10px 5mm; padding: 10px; border: 1px solid #ddd; background-color: #f8f8f8; border-radius: 5px; }
        
        /* 🔴 Flèche du vent (AJUSTÉE) 🔴 */
        /* Conteneur de rotation de la flèche du vent (fixé au centre) */
        .wind-arrow {
            position: absolute;
            width: 100%; 
            height: 100%; 
            top: 0; left: 0;
            z-index: 50;
            pointer-events: none; 
            transform-origin: center center; 
            transition: transform 0.5s ease-out;
            display: none;
        }

        /* Ligne du vent et pointe (à l'intérieur de .wind-arrow) */
        .wind-line {
            position: absolute;
            width: 4px; 
            height: 50%; 
            background-color: var(--fiche-secondary-accent); 
            border-radius: 2px;
            top: 0; 
            left: 50%;
            transform: translateX(-50%);
            transform-origin: bottom center; 
        }
        
        /* Pointe de la flèche (attachée à la ligne du côté qui représente la source du vent) */
        .wind-line::before {
            content: '';
            position: absolute;
            bottom: -8px; 
            left: -4px;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 8px solid var(--fiche-secondary-accent);
        }

        /* NOUVEAU : Affichage de la valeur du vent de travers */
        .crosswind-value {
            position: absolute;
            top: 50%;
            left: 60%; /* Positionné à droite de la ligne centrale */
            transform: translateY(-50%);
            background-color: rgba(255, 255, 255, 0.85);
            color: var(--fiche-secondary-accent);
            font-weight: bold;
            font-size: 0.7em;
            padding: 1px 4px;
            border-radius: 3px;
            display: none; /* Masqué par défaut */
            z-index: 51; /* Au-dessus de la ligne du vent */
        }

        /* Styles pour l'autocomplétion */
        .autocomplete-items {
            position: absolute;
            border: 1px solid #d4d4d4;
            border-bottom: none;
            border-top: none;
            z-index: 99;
            top: 100%;
            left: 0;
            right: 0;
            background-color: #fff;
            max-height: 200px;
            overflow-y: auto;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            border-radius: 0 0 4px 4px;
        }
        .autocomplete-item {
            padding: 10px;
            cursor: pointer;
            background-color: #fff;
            border-bottom: 1px solid #d4d4d4;
            font-size: 0.9em;
        }
        .autocomplete-item:hover {
            background-color: #e9e9e9;
        }
        .autocomplete-item strong {
            color: var(--fiche-accent-color);
        }
        .autocomplete-active {
            background-color: DodgerBlue !important;
            color: #ffffff;
        }


        /* --- Impression --- */
        @media print {
            body { 
                height: 297mm; /* Hauteur fixe A4 */
                width: 210mm; /* Largeur fixe A4 */
                margin: 0;
                padding: 0;
                background: white; 
                -webkit-print-color-adjust: exact; 
            }
            .page-container { 
                width: 210mm; 
                height: 297mm; 
                padding: 5mm;
                box-sizing: border-box; 
                display: flex; 
                flex-wrap: wrap;
                justify-content: space-between; 
                align-content: space-between;
                position: relative; /* Nécessaire pour les pointillés */
            }
            .fiche, .fiche:not(:first-child) { 
                display: flex !important; /* Rétablir l'affichage et surcharger le 'display: none' */
                flex-direction: column;
                width: 48.5% !important; /* Rétablir la largeur pour 2 colonnes */
                height: 48.5% !important; /* Rétablir la hauteur pour 2 lignes */
                break-inside: avoid; 
                border: 2px solid var(--fiche-accent-color) !important; 
                overflow: hidden; /* Empêcher le contenu de déborder */
            } 
            /* Rétablir les pointillés pour le debug visuel */
            .page-container::before {
                content: ''; position: absolute; top: 5mm; bottom: 5mm; left: 50%;
                transform: translateX(-50%); border-left: 1px dashed #aaa; z-index: 10;
            }
            .page-container::after {
                content: ''; position: absolute; left: 5mm; right: 5mm; top: 50%;
                transform: translateY(-50%); border-top: 1px dashed #aaa; z-index: 10;
            }

            #dynamic-inputs, .add-to-home-screen-btn { 
                display: none !important; 
            }
        }

        /* --- NOUVEAU : Media Query pour Mobile/Tablette (max-width: 1024px) --- */
        @media screen and (max-width: 1024px) {
            
            /* 1. Mettre le body et le conteneur en largeur automatique (pour éviter le 210mm) */
            body {
                height: auto;
                min-height: 100vh; 
                padding: 5px; 
                overflow-x: hidden;
            }

            .page-container {
                width: 100%; 
                height: auto; 
                padding: 0; 
                flex-direction: column; 
                justify-content: flex-start; 
                align-content: stretch;
            }
            
            /* 2. Désactiver les lignes de coupe qui ne sont pas pertinentes sur mobile */
            .page-container::before, .page-container::after {
                content: none; 
                border: none;
            }
            
            /* 3. Changer la taille et l'apparence de LA fiche */
            .fiche { 
                width: 98% !important; /* La fiche prend 98% de la largeur du conteneur */
                height: auto !important; /* La hauteur est dynamique */
                margin: 5px auto; /* Centrer et espacer les fiches */
                border: 1px solid var(--fiche-accent-color); /* Bordure moins épaisse */
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ajouter une ombre pour l'effet "carte" */
            }

            /* 💥 Les fiches supplémentaires sont maintenant masquées via JS en fonction du paramètre 'Nombre de fiches' 💥 */

            /* Le conteneur d'inputs dynamique doit rester visible */
            #dynamic-inputs {
                margin: 10px 5px; 
            }

            #frequency-section {
                width: auto !important; /* Surpasse le style en ligne pour prendre 100% de la largeur */
                margin-left: 5px;
                margin-right: 5px;
            }

            /* Sur mobile et tablette, on n'affiche que la première fiche */
            .fiche:not(:first-child) {
                display: none !important;
            }

            /* NOUVEAU: Forcer la grille de prévol sur 2 colonnes sur mobile */
            .grid-container {
                grid-template-columns: auto 1fr !important;
            }
        }

        /* NOUVEAU : Forcer le masquage du bouton d'installation sur grand écran */
        @media (min-width: 1025px) {
            #add-to-home-screen-btn {
                display: none !important;
            }
        }

        /* --- Mise en page dynamique (1, 2 ou 4 fiches) --- */

        /* Masquer les fiches non utilisées en fonction du layout */
        #fiches-container.layout-2-fiches .fiche:nth-child(n+3) {
            display: none !important;
        }

        /* Pour 2 fiches (mode rotation 90°) */
        #fiches-container.layout-2-fiches {
            flex-direction: column !important;
            justify-content: center !important;
            align-items: center !important;
            flex-wrap: nowrap !important;
        }
        /* On ne masque que la ligne verticale */
        #fiches-container.layout-2-fiches::before {
            display: none;
        }
        #fiches-container.layout-2-fiches .fiche {
            /* Le transform est appliqué par enfant pour un ajustement précis */
            margin: 0;
        }
        #fiches-container.layout-2-fiches .fiche:first-child {
            transform: translateY(-1.5mm) rotate(90deg) scale(1.4);
        }
        #fiches-container.layout-2-fiches .fiche:nth-child(2) {
            transform: translateY(1.5mm) rotate(90deg) scale(1.4);
        }
        
        /* Cacher le contrôle du nombre de fiches sur mobile */
        @media screen and (max-width: 1024px) {
            #fiche-count-control {
                display: none;
            }
        }

        /* Badges Météo (VFR / Marginal / IFR) */
        .badge-GREEN { background-color: #2ecc71; color: white; padding: 2px 6px; border-radius: 4px; font-weight: bold; font-size: 0.8em; margin-left: 5px; vertical-align: middle; }
        .badge-ORANGE { background-color: #f39c12; color: white; padding: 2px 6px; border-radius: 4px; font-weight: bold; font-size: 0.8em; margin-left: 5px; vertical-align: middle; }
        .badge-RED { background-color: #e74c3c; color: white; padding: 2px 6px; border-radius: 4px; font-weight: bold; font-size: 0.8em; margin-left: 5px; vertical-align: middle; }

        /* Masquer le placeholder pour les champs de type 'time' */
        input[type="time"].time-placeholder-hidden {
            color: transparent;
        }

        .rose-wrapper {
            margin-top: -25px;
            float: right;
        }