Manager VIAPARIOTE

📄 Titre de la ligne (titre 2 - h2)

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Viapariote - Alerte Rouge Canicule : Gratuité et Adaptations</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap');
        
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
        }
        .font-title {
            font-family: 'Space Grotesk', sans-serif;
        }
    </style>
</head>

<header class="bg-white border-b border-slate-200 sticky top-0 z-40 shadow-sm">
        <div class="max-w-6xl mx-auto px-4 py-4 flex flex-col sm:flex-row justify-between items-center gap-4">
            <div class="flex items-center space-x-4">
                
                <img src="https://gestion-des-bus-et-tram-et-tream-train.e-monsite.com/medias/images/text180049.png" alt="Logo Info Trafic Viapariote" class="h-16 w-auto object-contain rounded-lg">
                <div>
                    <h1 class="font-title font-bold text-xl tracking-tight text-slate-900">
                        viapariote <span class="text-red-600 font-sans font-extrabold">Urgence</span>
                    </h1>
                    <p class="text-[10px] text-slate-500 font-bold uppercase tracking-wider">Plan d'urgence environnemental régional</p>
                </div>
            </div>
            
            <div class="flex flex-wrap items-center gap-2">
                <span class="px-3 py-1 bg-red-100 border border-red-200 text-red-700 rounded-full text-xs font-bold font-title">
 ️ Vigilance Rouge 43°C
                </span>
                <span class="px-3 py-1 bg-emerald-100 border border-emerald-200 text-emerald-700 rounded-full text-xs font-bold font-title">
                    Gratuité Prolongée jusqu'à lundi inclus
                </span>
            </div>
        </div>
    </header>

<main class="max-w-6xl mx-auto px-4 py-8 w-full flex-grow space-y-8">
        
        
        <section class="bg-red-50 border-2 border-red-200 rounded-3xl p-6 shadow-sm space-y-4">
            <div class="flex items-center gap-3 text-red-700">
                <span class="text-2xl">⚠️</span>
                <h2 class="font-title text-xl md:text-2xl font-extrabold tracking-tight">
                    Dernière Minute : Directives Transports Scolaires du Vendredi 26 Juin
                </h2>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                
                <div class="bg-white p-5 rounded-2xl border border-red-100 shadow-sm space-y-3">
                    <div class="flex items-center gap-2 text-red-600">
                        <span class="text-lg"></span>
                        <h3 class="font-bold text-sm">Écoles Maternelles & Primaires</h3>
                    </div>
                    <p class="text-xs text-slate-600 leading-relaxed">
                        En raison des risques liés aux températures extrêmes (43°C), **les transports scolaires pour les élèves du primaire et de maternelle sont intégralement suspendus** ce vendredi 26 juin. Les familles sont invitées à garder leurs enfants si possible.
                    </p>
                    <span class="inline-block text-[10px] font-bold bg-red-100 text-red-800 px-2 py-0.5 rounded uppercase">
 Aucun bus scolaire primaire
                    </span>
                </div>

<div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm space-y-3">
                    <div class="flex items-center gap-2 text-slate-700">
                        <span class="text-lg"></span>
                        <h3 class="font-bold text-sm">Collèges & Épreuves du Brevet</h3>
                    </div>
                    <p class="text-xs text-slate-600 leading-relaxed">
                        Pour les collégiens (dont les épreuves du Brevet), le service de transport reste actif avec les adaptations suivantes :
                        **Départ normal le matin**, puis **retour anticipé à 13h30** après le déjeuner à la cantine.
                    </p>
                    <span class="inline-block text-[10px] font-bold bg-slate-100 text-slate-700 px-2 py-0.5 rounded uppercase">
 Matin normal • Retour à 13h30
                    </span>
                </div>
            </div>
        </section>

<section class="bg-white border border-slate-200 rounded-3xl p-6 md:p-8 shadow-sm grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
            
            <div class="lg:col-span-7 space-y-5">
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold bg-emerald-100 text-emerald-800">
 gratuité du réseau prolongée
                </div>
                <h2 class="font-title text-2xl md:text-4xl font-extrabold text-slate-950 leading-tight">
                    Dispositif de gratuité maintenu jusqu'au lundi 29 juin inclus !
                </h2>
                
                <div class="text-slate-600 text-sm leading-relaxed space-y-4">
                    <p>
                        Face à l'intensité de la canicule qui se prolonge ce week-end, le comité de crise de l'agglomération et la direction générale de Viapariote annoncent la **prolongation de la gratuité totale sur les réseaux urbains jusqu'à lundi inclus**.
                    </p>
                    <p>
                        L'accès aux réseaux **TCLM**, **TAN** ainsi qu'au réseau **Triangle** (marqué en rouge sur l'affichage) est entièrement gratuit et libre, sans validation. Pour le reste des lignes régionales et interurbaines, le tarif réduit exceptionnel "Alerte pollution" reste fixé à **2,00 € par jour**.
                    </p>
                    <p class="font-semibold text-slate-900">
 Les parcs relais (P+R) restent en accès gratuit durant toute cette période. Pensez à conserver votre ticket pour la sortie du parking.
                    </p>
                </div>

<div class="bg-slate-50 border p-4 rounded-2xl text-xs space-y-2 text-slate-600">
                    <p class="font-bold text-slate-900 flex items-center gap-1"> Candidats au Brevet des collèges :</p>
                    <p>
                        Anticipez impérativement vos trajets et munissez-vous d'une gourde d'eau fraîche pour vous rendre dans vos centres d'examen. Les rames de Tram C et de bus sont climatisées en priorité pour assurer votre confort thermique.
                    </p>
                </div>
            </div>

<div class="lg:col-span-5 space-y-3">
                <div class="bg-slate-100 p-2 rounded-2xl border border-slate-200 shadow-inner">
                    
                    <img src="https://gestion-des-bus-et-tram-et-tream-train.e-monsite.com/medias/images/252102210111.png" alt="Affiche Officielle Gratuité Canicule Ozonspitze" class="w-full h-auto rounded-xl object-contain shadow-md hover:scale-[1.01] transition-transform duration-300">
                </div>
                <p class="text-[10px] text-slate-400 text-center italic">
                    Affiche officielle : Réseau TCLM, TAN et Triangle gratuit (en rouge), reste des transports à 2,00 € par jour.
                </p>
            </div>

</section>

<section class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            
            
            <div class="bg-white border border-slate-200 rounded-3xl p-6 shadow-sm flex flex-col justify-between space-y-4">
                <div>
                    <h3 class="font-title text-lg font-bold text-slate-900 mb-2"> Simulateur de tarif Canicule</h3>
                    <p class="text-xs text-slate-500 leading-relaxed">
                        Vérifiez instantanément la gratuité de votre ligne habituelle du mardi au lundi inclus selon les réseaux partenaires.
                    </p>
                </div>

<div class="space-y-3 font-sans-ui">
                    <label class="block text-xs font-bold text-slate-700">Sélectionnez la ligne ou le réseau :</label>
                    <select id="line-select" onchange="calculateTariff()" class="w-full bg-slate-50 border border-slate-200 focus:border-red-500 focus:ring-1 focus:ring-red-500 rounded-xl px-4 py-3 text-sm text-slate-800 focus:outline-none transition">
                        <option value="TCLM">Lignes urbaines TCLM (Tram C, D / Bus N1, N2, N3 / 1 à 30)</option>
                        <option value="TAN">Lignes urbaines TAN (Réseau de Vénissieux)</option>
                        <option value="TRIANGLE">Réseau Triangle (Marqué avec du rouge sur l'affiche)</option>
                        <option value="INTER">Lignes interurbaines RMV/TCL 580 et 857</option>
                        <option value="RMV">Autres Lignes suburbaines RMV (20, 22, 25, 26)</option>
                    </select>
                </div>

<div class="lg:col-span-2 bg-white border border-slate-200 rounded-3xl p-6 shadow-sm space-y-5">
                <div class="flex items-center gap-3 pb-3 border-b border-slate-100">
                    <span class="text-xl">✉️</span>
                    <div>
                        <h3 class="font-title text-base font-bold text-slate-900">Message de la Préfecture & Direction Académique</h3>
                        <p class="text-[10px] text-slate-500 uppercase tracking-wider">Signé : O. Kroenig - Direction Académique</p>
                    </div>
                </div>
                
                <div class="text-xs text-slate-700 leading-relaxed space-y-3 font-serif-journal italic bg-slate-50 p-5 rounded-2xl border border-slate-200">
                    <p>« Chers parents, chers élèves, »</p>
                    <p>
                        Les températures continuent à grimper, il en va de même dans nos salles de classe malgré les aérations dès 6h30. Il devient de plus en plus difficile de trouver des lieux qui n’atteignent pas 28° ou 29° dès 9h.
                    </p>
                    <p>En accord avec les consignes de la Direction Académique, de nouvelles dispositions exceptionnelles sont appliquées :</p>
                    <ul class="list-disc list-inside space-y-1.5 pl-2 font-sans-ui text-[11px] not-italic text-slate-800">
                        <li><strong>Accueil des élèves :</strong> Présence possible uniquement en matinée. Les élèves doivent impérativement venir avec une gourde d’eau fraîche.</li>
                        <li><strong>Cours de l'après-midi :</strong> Annulation des cours pour les collégiens les après-midis du jeudi 25 et vendredi 26 juin.</li>
                        <li><strong>Horaires des bus scolaires :</strong> Départ normal le matin, retour assuré à **13h30** (après le repas de la cantine en demi-pension) pour les collèges.</li>
                        <li><strong>Lignes Scolaires TCLM :</strong> Les bus scolaires de la **Ligne Rouge** et de la **Ligne Gris** s'alignent également sur ce retour anticipé à **13h30**.</li>
                        <li><strong>Accueil minimal l'après-midi :</strong> Organisé sans cours pour les familles sans solution. Attention, le transport du retour après 16h15 sera entièrement à la charge des parents.</li>
                    </ul>
                    <p class="pt-2 text-right not-italic font-sans-ui text-xs font-bold text-slate-900">— O. Kroenig</p>
                </div>
            </div>

</section>

</main>

<footer class="max-w-6xl mx-auto px-4 py-6 border-t border-slate-200 text-center text-xs text-slate-400">
        <p>© 2026 Viapariote / TCLM S.A. - Tous droits réservés.</p>
        <p class="mt-1 text-slate-500">Plan de prévention d'urgence contre la pollution et l'ozone en coordination avec la Métropole.</p>
    </footer>

<script>
        function calculateTariff() {
            const select = document.getElementById('line-select');
            const feedback = document.getElementById('tariff-feedback');
            const val = select.value;

feedback.className = "p-4 rounded-2xl text-center space-y-2 transition-all duration-300 ";

if (val === 'TCLM' || val === 'TAN' || val === 'TRIANGLE' || val === 'INTER') {
                feedback.classList.add('bg-emerald-100/60', 'border', 'border-emerald-200', 'text-emerald-950');
                if (val === 'INTER') {
                    feedback.innerHTML = `
                        <p class="text-sm font-bold"> GRATUITE EXCEPTIONNELLE</p>
                        <p class="text-[11px] text-emerald-800">Les lignes RMV/TCL 580 et 857 sont intégrées au dispositif de gratuité totale canicule. Pas de ticket requis.</p>
                    `;
                } else if (val === 'TRIANGLE') {
                    feedback.innerHTML = `
                        <p class="text-sm font-bold"> RÉSEAU TRIANGLE GRATUIT</p>
                        <p class="text-[11px] text-emerald-800">Le réseau Triangle (avec marquage rouge sur l'affiche) est 100% gratuit du mardi au lundi inclus.</p>
                    `;
                } else {
                    feedback.innerHTML = `
                        <p class="text-sm font-bold"> ACCÈS LIBRE (0,00 €)</p>
                        <p class="text-[11px] text-emerald-800">Accès gratuit et sans validation jusqu'à lundi inclus pour préserver la santé des usagers.</p>
                    `;
                }
            } else {
                feedback.classList.add('bg-orange-100/60', 'border', 'border-orange-200', 'text-orange-950');
                feedback.innerHTML = `
                    <p class="text-sm font-bold"> PASS ALERTE : 2,00 €</p>
                    <p class="text-[11px] text-orange-800">Tarif spécial de 2,00 € par jour applicable pour le reste du réseau de bus régional.</p>
                `;
            }
        }

window.onload = function() {
            calculateTariff();
        }
    </script>
</body>
</html>