/* ===== VARIABLES CSS POUR LES INFOBULLES ===== */
        :root {
            --couleur-principale: #4a90e2;
            --couleur-principale-foncee: #357abd;
            --couleur-secondaire: #2c3e50;
            --couleur-accent: #4a90e2;
            --couleur-fond: #f5f7fa;
            --couleur-texte: #333333;
            --couleur-texte-clair: #6c757d;
            --border-radius: 12px;
            --ombre-legere: 0 2px 10px rgba(0,0,0,0.05);
            --ombre-moyenne: 0 5px 15px rgba(0,0,0,0.1);
            --ombre-forte: 0 4px 20px rgba(0,0,0,0.1);
        }
        
        /* Styles spécifiques au viewer */
        body {
            margin: 0;
            padding: 0;
			margin-top:3px;
			font-family: 'Inter', sans-serif;
            background: linear-gradient(to bottom, 
                #4a90e2 0%, 
                #357abd 40%, 
                #2c7cc4 65%, 
                #f8faff 65%, 
                #f8faff 100%);
            background-attachment: fixed;
            min-height: 100vh;
            color: var(--text-dark);
            overflow-x: hidden;
        }
		
		/* Floating elements animation */
        .floating-elements {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
		
		.floating-element {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            animation: float 20s infinite ease-in-out;
        }
		
		.floating-element:nth-child(1) {
            width: 80px;
            height: 80px;
            top: 20%;
            left: 10%;
            animation-delay: 0s;
        }

        .floating-element:nth-child(2) {
            width: 120px;
            height: 120px;
            top: 60%;
            right: 15%;
            animation-delay: -7s;
        }

        .floating-element:nth-child(3) {
            width: 60px;
            height: 60px;
            top: 80%;
            left: 70%;
            animation-delay: -14s;
        }
		
		@keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            33% { transform: translateY(-30px) rotate(120deg); }
            66% { transform: translateY(20px) rotate(240deg); }
        }
        
        /* Assurer que notre nav reste au-dessus */
        .nav-header {
            background: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            position: sticky;
			padding: 15px 0;
            top: 3px;
            z-index: 1000;
        }
        
        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: right;
        }

        .logo {
            color: #4a90e2;
            font-size: 1.5rem;
            font-weight: 700;
            text-decoration: none;
        }

        .back-button {
            color: #4a90e2;
            background: rgba(255, 255, 255, 0.2);
            padding: 10px;
            border-radius: 8px;
            margin-left: 10px;
            text-decoration: none;
            transition: all 0.3s ease;
			border: 1px solid #4a90e2;
        }

        .back-button:hover {
            background: rgba(255, 255, 255, 0.3);
        }
		
		@media (max-width: 768px) {
            .nav-container {
                padding: 0 15px;
            }

            .logo {
                font-size: 1.3rem;
            }

            .back-button {
                padding: 8px;
                margin-left: 8px;
            }
		}
        
        /* Adaptation du logo pour mobile */
        @media (max-width: 768px) {
            .nav-header {
				padding: 0;
			}
            .nav-container {
                padding: 0.8rem 1rem;
                justify-content: right !important; /* Centrer le bouton retour */
            }
        }
        
        .fiche-container {
            max-width: 100%;
            margin: 0;
            background: transparent;
            padding-top: 0px; /* Padding desktop */
			position: relative;
			z-index: 1;
        }
        
        #fiche-content {
            min-height: calc(100vh - 100px);
        }
        
        .loading {
            text-align: center;
            padding: 40px;
            font-size: 1.2rem;
            color: #4a90e2;
            background: white;
            margin: 20px;
            border-radius: 10px;
        }
        
        .error {
            color: #dc3545;
            background: #f8d7da;
            border: 1px solid #f5c6cb;
            padding: 20px;
            margin: 20px;
            border-radius: 5px;
            text-align: center;
        }
		
		.content
		{
			padding-left:0;
			padding-right:0;
		}
        
        .section-principale {
            border-left: 0px solid var(--couleur-principale);
        }
        .section-chapitre {
            border-left: 0px solid var(--couleur-principale);
        }
        
        /* ISOLATION DES STYLES DES FICHES */
        .fiche-content-wrapper {
            position: relative;
            font-family: Arial, sans-serif;
            isolation: isolate;
            padding-top: 0 !important; /* S'assurer qu'il n'y a pas de padding qui cache le titre */
			position: relative;
			z-index: 2; /* Plus bas que le fil d'ariane mais au-dessus du reste */
        }
        
        .fiche-content-wrapper * {
            box-sizing: border-box;
        }

        /* S'assurer que tout le contenu de la fiche est visible */
        .fiche-content-wrapper .container {
            margin-top: 0 !important;
            position: relative !important;
            z-index: 1 !important;
        }

        /* ===== STYLES PRÉSERVÉS POUR LE FIL D'ARIANE ===== */
        .fiche-content-wrapper .fil-ariane-unifie {
            position: fixed !important;
            top: 80px !important; /* Ajusté de 80px à 70px */
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            background: rgba(255, 255, 255, 0.98) !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
            border-bottom: 1px solid #e0e0e0 !important;
            padding: 0 !important;
            z-index: 1001 !important;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
            transform: translateZ(0) !important;
            -webkit-transform: translateZ(0) !important;
            will-change: transform !important;
            -webkit-overflow-scrolling: touch !important;
            display: block !important;
			z-index: 9999 !important; /* Très élevé pour garantir la priorité */
        }
        
        .fiche-content-wrapper .fil-ariane-titre {
            padding: 3px 15px 3px 15px !important;
            text-align: center !important;
            font-size: 20px !important;
            font-weight: 600 !important;
            color: var(--couleur-principale) !important;
            border-bottom: 1px solid #f0f0f0 !important;
            background: rgba(255, 255, 255, 0.9) !important;
        }
        
        .fiche-content-wrapper .fil-ariane-navigation {
            padding: 0px 10px !important;
        }
        
        .fiche-content-wrapper .fil-ariane-container {
            display: flex !important;
            gap: 10px !important;
            overflow-x: auto !important;
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
            padding: 8px 0 !important;
            -webkit-overflow-scrolling: touch !important;
            transform: translateZ(0) !important;
            -webkit-transform: translateZ(0) !important;
            justify-content: center !important; /* Centré par défaut */
            width: 100% !important;
        }
        
        .fiche-content-wrapper .fil-ariane-container::-webkit-scrollbar {
            display: none !important;
        }
        
        /* Support du scroll tactile sur mobile */
        .fiche-content-wrapper .fil-ariane-container {
            -webkit-overflow-scrolling: touch !important;
            scroll-behavior: smooth !important;
        }
        
        .fiche-content-wrapper .fil-ariane-btn {
            background: #f5f5f5 !important;
            border: 2px solid #e0e0e0 !important;
            color: #666 !important;
            padding: 5px 10px !important;
            border-radius: 20px !important;
            font-weight: 500 !important;
            white-space: nowrap !important;
            flex-shrink: 0 !important;
            flex-grow: 0 !important; /* Empêche l'extension */
            transition: all 0.3s ease !important;
            cursor: pointer !important;
            min-width: 150px !important; /* Retirer la largeur minimale */
            max-width: none !important; /* Pas de largeur maximale */
            width: auto !important; /* Largeur automatique basée sur le contenu */
            text-align: center !important;
        }
        
        .fiche-content-wrapper .fil-ariane-btn:hover {
            background: #e8f4f8 !important;
            border-color: #4a90e2 !important;
            transform: translateY(-1px) !important;
        }
        
        .fiche-content-wrapper .fil-ariane-btn.active {
            background: #4a90e2 !important;
            border-color: #4a90e2 !important;
            color: white !important;
            transform: scale(1.05) !important;
            box-shadow: 0 2px 8px rgba(90, 155, 212, 0.3) !important;
        }
        
        /* RENFORCEMENT DES STYLES POUR LES BOUTONS ACTIFS */
        .fiche-content-wrapper .fil-ariane-btn.active,
        .fiche-content-wrapper button.fil-ariane-btn.active,
        .fiche-content-wrapper .fil-ariane-btn[class*="active"] {
            background-color: #4a90e2 !important;
            border-color: #4a90e2 !important;
            color: white !important;
            font-weight: 600 !important;
        }
        
        .fiche-content-wrapper .content-with-breadcrumb {
            margin-top: 0px !important; /* Ajusté pour le nouveau positionnement (70px + hauteur fil d'ariane) */
            padding-top: 20px !important;
        }
        
        .fiche-content-wrapper .content {
            //padding-top: 40px !important;
        }

        /* S'assurer que l'en-tête est visible */
        .fiche-content-wrapper .header {
            margin-top: 0 !important;
            position: relative !important;
            z-index: 1 !important;
        }

        .fiche-content-wrapper .container {
            margin-top: 100px !important;
            position: relative !important;
			border-radius: 20px;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }

        /* ===== AIDE À LA LECTURE PRÉSERVÉE ===== */
        .fiche-content-wrapper .aide-lecture {
            background: linear-gradient(135deg, #e8f4f8, #d1ecf1) !important;
            padding: 20px !important;
            text-align: center !important;
            box-shadow: var(--ombre-legere) !important;
			border-radius: 10px;
        }
        
        .fiche-content-wrapper .aide-lecture h3 {
            color: var(--couleur-principale) !important;
            margin-bottom: 10px !important;
            font-size: 1.1rem !important;
        }
        
        .fiche-content-wrapper .aide-lecture p {
            color: var(--couleur-texte) !important;
            font-size: 0.95rem !important;
            line-height: 1.6 !important;
        }

        /* ===== SYSTÈME D'INFOBULLES PRÉSERVÉ ===== */
        .fiche-content-wrapper .terme-technique {
            position: relative;
            border-bottom: 2px dotted #4a90e2;
            cursor: help;
            color: #4a90e2;
            font-weight: 500;
            transition: all 0.3s ease;
            z-index: 1;
        }
        
        .fiche-content-wrapper .terme-technique:hover {
            background-color: rgba(74, 144, 226, 0.1);
            border-bottom-style: solid;
        }
        
        .fiche-content-wrapper .infobulle {
            position: fixed;
            z-index: 999999;
            pointer-events: none;
            background: linear-gradient(135deg, #2c3e50, #34495e);
            color: white;
            padding: 12px 16px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            font-size: 0.85rem;
            line-height: 1.4;
            font-weight: normal;
            font-family: Arial, sans-serif;
            width: 280px;
            max-width: calc(100vw - 20px);
            opacity: 0;
            visibility: hidden;
            left: -9999px;
            top: -9999px;
            transition: all 0.3s ease;
        }
        
        .fiche-content-wrapper .infobulle.tooltip-visible,
        .fiche-content-wrapper .infobulle.visible {
            opacity: 1;
            visibility: visible;
        }
        
        /* Flèche de l'infobulle */
        .fiche-content-wrapper .infobulle::after {
            content: '';
            position: absolute;
            border: 8px solid transparent;
            border-top-color: #2c3e50;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            margin-top: -1px;
        }
        
        .fiche-content-wrapper .infobulle.position-bottom::after,
        .fiche-content-wrapper .infobulle.position-top::after {
            border-top-color: transparent;
            border-bottom-color: #2c3e50;
            top: -16px;
            bottom: auto;
            margin-top: 0;
        }

        /* ===== INDICATEUR DE PROGRESSION PRÉSERVÉ ===== */
        .fiche-content-wrapper .progress-indicator {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: white;
            z-index: 10000;
        }
        
        .fiche-content-wrapper .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--couleur-principale), var(--couleur-accent));
            width: 0%;
            transition: width 0.3s ease;
        }

        /* ===== STYLES POUR LES SECTIONS ===== */
        .fiche-content-wrapper .section {
            background: white;
            padding: 30px;
            margin-bottom: 30px;
            display: block;
            overflow: visible;
            position: relative;
        }
        
        .fiche-content-wrapper .section.hidden {
            display: none !important;
        }
        
        .fiche-content-wrapper .section.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Gestion tactile pour mobile */
        @media (hover: none) and (pointer: coarse) {
            .fiche-content-wrapper .terme-technique {
                border-bottom-style: solid;
                -webkit-tap-highlight-color: rgba(74, 144, 226, 0.2);
            }
            
            .fiche-content-wrapper .terme-technique.active .infobulle {
                opacity: 1;
                visibility: visible;
            }
        }

        /* Styles pour le mode mobile */
        @media (max-width: 768px) {
            /* Ajustement du padding pour mobile */
            .fiche-container {
                padding-top: 10px !important;
            }
            
            /* Fil d'ariane collé au menu sur mobile aussi */
            .fiche-content-wrapper .fil-ariane-unifie {
                top: 55px !important; /* Ajusté proportionnellement (était 60px) */
            }
            
            .fiche-content-wrapper .nav-simple {
                display: none !important;
            }
            
            .fiche-content-wrapper .nav-btn {
                display: none !important;
            }			
            
            .fiche-content-wrapper .nav-buttons,
            .fiche-content-wrapper .navigation,
            .fiche-content-wrapper .tabs-nav {
                display: none !important;
            }
            
            .fiche-content-wrapper [id*="citation"] {
                display: block !important;
                margin-bottom: 20px !important;
            }
            
            .fiche-content-wrapper {
                padding: 10px !important;
            }
            
            .fiche-content-wrapper button {
                width: 100% !important;
                margin-bottom: 10px !important;
                padding: 12px !important;
                font-size: 12px !important;
            }
            
            .fiche-content-wrapper h1,
            .fiche-content-wrapper h2,
            .fiche-content-wrapper h3 {
                font-size: 1.4em !important;
                margin: 10px 0 !important;
            }
            
            .fiche-content-wrapper table {
                width: 100% !important;
                font-size: 14px !important;
                overflow-x: auto !important;
                display: block !important;
                white-space: nowrap !important;
            }

            .fiche-content-wrapper .infobulle {
                width: 250px !important;
                font-size: 0.8rem !important;
                padding: 10px 14px !important;
            }
            
            .fiche-content-wrapper .fil-ariane-titre {
                padding: 6px 15px 4px 15px !important; /* Padding réduit */
                font-size: 16px !important; /* Taille réduite */
            }
            
            .fiche-content-wrapper .fil-ariane-navigation {
                padding: 6px 10px !important; /* Réduit le padding global */
                overflow: hidden !important; /* Évite le débordement vertical */
            }
            
            .fiche-content-wrapper .fil-ariane-container {
                gap: 8px !important; /* Réduit l'espacement entre boutons */
                justify-content: flex-start !important; /* Alignement à gauche pour permettre le scroll */
                padding: 6px 10px !important; /* Padding réduit */
            }
            
            .fiche-content-wrapper .fil-ariane-btn {
                font-size: 10px !important; /* Encore réduit pour s'adapter */
                padding: 6px 12px !important; /* Padding optimisé */
                min-width: auto !important; /* Pas de largeur minimale forcée */
                max-width: none !important; /* Pas de largeur maximale */
                width: auto !important; /* Largeur basée sur le contenu */
                flex-shrink: 0 !important; /* Ne pas rétrécir */
                flex-grow: 0 !important; /* Ne pas grandir */
                flex-basis: auto !important; /* Base automatique */
                font-weight: 600 !important; /* Police plus grasse pour compenser la taille */
                border-radius: 15px !important; /* Radius réduit pour mobile */
            }
            
            .fiche-content-wrapper .content-with-breadcrumb {
                margin-top: 0px !important; /* Ajusté pour le fil d'ariane plus compact */
            }
            
            .fiche-content-wrapper .aide-lecture {
                margin: 10px 5px !important; /* Réduit les marges latérales */
                padding: 12px !important; /* Réduit le padding */
            }
        }
        
        /* Styles pour très petits écrans */
        @media (max-width: 480px) {
            .fiche-content-wrapper .fil-ariane-btn {
                font-size: 14px !important; /* Encore plus petit pour très petits écrans */
                padding: 5px 10px !important; /* Padding encore plus réduit */
                min-width: 65px !important; /* Largeur minimale légèrement réduite pour très petits écrans */
            }
            
            .fiche-content-wrapper .fil-ariane-container {
                gap: 6px !important; /* Espacement encore plus réduit */
            }
        }

        /* Toutes les sections visibles sur tous les écrans */
        .fiche-content-wrapper .section {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
			border-radius: 20px;
        }

        /* ===== MODAL DE LIMITATION COMPACTE ET VERROUILLÉE ===== */
        .fiche-limit-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            z-index: 10000;
            display: none;
            justify-content: center;
            align-items: center;
            animation: fadeInOverlay 0.4s ease-out;
        }

        @keyframes fadeInOverlay {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .fiche-limit-modal {
            background: white;
            border-radius: 15px;
            padding: 30px;
            max-width: 400px;
            width: 90%;
            text-align: center;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
            position: relative;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            border: 3px solid #4a90e2;
            z-index: 10001;
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        /* Animation d'apparition initiale uniquement */
        .fiche-limit-modal.initial-appear {
            animation: slideInModal 0.5s ease-out;
        }

        @keyframes slideInModal {
            from {
                opacity: 0;
                transform: translateY(-50px) scale(0.8);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* PAS DE BOUTON DE FERMETURE */
        .fiche-limit-close {
            display: none !important;
        }

        .fiche-limit-icon {
            font-size: 48px;
            color: #4a90e2;
            margin-bottom: 20px;
            animation: bounceIn 0.6s ease-out;
        }

        @keyframes bounceIn {
            0% { transform: scale(0); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        .fiche-limit-title {
            font-size: 22px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 12px;
            line-height: 1.2;
        }

        .fiche-limit-subtitle {
            font-size: 16px;
            color: #6c757d;
            margin-bottom: 20px;
            line-height: 1.4;
        }

        .fiche-limit-counter {
            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 25px;
            display: inline-block;
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
        }

        .fiche-limit-buttons {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 20px;
        }

        .fiche-limit-btn {
            padding: 12px 24px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            cursor: pointer;
            font-size: 15px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
        }

        .fiche-limit-btn-primary {
            background: linear-gradient(135deg, #4a90e2, #357abd);
            color: white;
            border-color: #4a90e2;
            box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .fiche-limit-btn-primary:hover {
            background: linear-gradient(135deg, #357abd, #2c5999);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
            animation: none;
        }

        .fiche-limit-btn-secondary {
            background: transparent;
            color: #4a90e2;
            border-color: #4a90e2;
        }

        .fiche-limit-btn-secondary:hover {
            background: #4a90e2;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
        }

        .fiche-limit-footer {
            font-size: 12px;
            color: #999;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #f0f0f0;
        }

        .fiche-limit-lock-icon {
            color: #ff6b6b;
            font-size: 16px;
            margin-right: 5px;
        }

        /* Animation shake pour les tentatives de fermeture */
        .fiche-limit-modal.shake {
            animation: shake 0.5s ease-in-out;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-10px); }
            75% { transform: translateX(10px); }
        }

        /* Responsive mobile */
        @media (max-width: 768px) {
            .fiche-limit-modal {
                padding: 25px 20px;
                margin: 15px;
                max-width: 350px;
            }

            .fiche-limit-title {
                font-size: 20px;
            }

            .fiche-limit-subtitle {
                font-size: 14px;
            }

            .fiche-limit-icon {
                font-size: 40px;
            }

            .fiche-limit-btn {
                font-size: 14px;
                padding: 10px 20px;
            }
        }

        /* Bloquer la sélection */
        .fiche-limit-modal {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* Flou appliqué directement sur le contenu de la page */
        .content-blurred {
            filter: blur(8px) brightness(0.6);
            pointer-events: none;
            transition: filter 0.3s ease;
        }

        /* Flou appliqué sur TOUS les éléments de la page sauf la modal */
        body.modal-open > *:not(#ficheLimitOverlay) {
            filter: blur(6px) brightness(0.7);
            transition: filter 0.3s ease;
        }

        /* Empêcher le scroll */
        body.modal-open {
            overflow: hidden !important;
            height: 100vh;
        }

        /* ===== NOTIF DE CONNEXION RÉUSSIE ===== */
        .auth-success-notification {
            position: fixed;
            top: 20px;
            right: 20px;
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
            padding: 15px 20px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
            z-index: 10002;
            display: none;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            animation: slideInRight 0.5s ease-out;
        }

        @keyframes slideInRight {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        .auth-success-notification .icon {
            margin-right: 10px;
            font-size: 18px;
        }
		
		/* ===== BOUTONS D'ACTION EN BAS DE PAGE ===== */
		.bottom-action-buttons {
			display: none; /* Caché par défaut, affiché après chargement */
			margin: 40px 20px 20px 20px;
			padding: 40px 20px;
			background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
			border-radius: 20px;
			box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
			animation: fadeInUp 0.6s ease-out;
			position: relative;
		}

		@keyframes fadeInUp {
			from {
				opacity: 0;
				transform: translateY(20px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.action-buttons-container {
			max-width: 800px;
			margin: 0 auto;
			text-align: center;
		}

		.action-title {
			color: #2c3e50;
			font-size: 24px;
			font-weight: 700;
			margin-bottom: 10px;
			font-family: 'Inter', sans-serif;
		}

		.action-subtitle {
			color: #6c757d;
			font-size: 16px;
			margin-bottom: 30px;
			font-weight: 400;
		}

		.action-buttons-wrapper {
			display: flex;
			gap: 20px;
			justify-content: center;
			flex-wrap: wrap;
		}

		.action-btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
			padding: 15px 30px;
			border-radius: 25px;
			text-decoration: none;
			font-weight: 600;
			font-size: 16px;
			transition: all 0.3s ease;
			min-width: 220px;
			font-family: 'Inter', sans-serif;
			position: relative;
			overflow: hidden;
		}

		.action-btn i {
			font-size: 18px;
		}

		.action-btn-primary {
			background: linear-gradient(135deg, #4a90e2, #357abd);
			color: white;
			border: 2px solid transparent;
			box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
		}

		.action-btn-primary:hover {
			background: linear-gradient(135deg, #357abd, #2c5999);
			transform: translateY(-2px);
			box-shadow: 0 6px 25px rgba(74, 144, 226, 0.4);
		}

		.action-btn-primary::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 0;
			height: 0;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.3);
			transform: translate(-50%, -50%);
			transition: width 0.6s, height 0.6s;
		}

		.action-btn-primary:hover::before {
			width: 300px;
			height: 300px;
		}

		.action-btn-secondary {
			background: white;
			color: #4a90e2;
			border: 2px solid #4a90e2;
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
		}

		.action-btn-secondary:hover {
			background: #4a90e2;
			color: white;
			transform: translateY(-2px);
			box-shadow: 0 6px 25px rgba(74, 144, 226, 0.3);
		}

		/* Animation au survol */
		.action-btn span {
			position: relative;
			z-index: 1;
		}

		.action-btn i {
			position: relative;
			z-index: 1;
			transition: transform 0.3s ease;
		}

		.action-btn:hover i {
			transform: scale(1.1);
		}

		/* Responsive mobile */
		@media (max-width: 768px) {
			.bottom-action-buttons {
				margin: 30px 10px 15px 10px;
				padding: 30px 15px;
			}
			
			.action-title {
				font-size: 20px;
			}
			
			.action-subtitle {
				font-size: 14px;
				margin-bottom: 20px;
			}
			
			.action-buttons-wrapper {
				flex-direction: column;
				gap: 15px;
			}
			
			.action-btn {
				width: 100%;
				min-width: unset;
				padding: 14px 25px;
				font-size: 15px;
			}
			
			.action-btn i {
				font-size: 16px;
			}
		}

		/* État visible */
		.bottom-action-buttons.visible {
			display: block;
		}

		/* Effet de pulsation pour attirer l'attention */
		@keyframes pulse {
			0% {
				box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
			}
			50% {
				box-shadow: 0 4px 25px rgba(74, 144, 226, 0.5);
			}
			100% {
				box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
			}
		}

		.action-btn-primary {
			animation: pulse 3s infinite;
		}

		.action-btn-primary:hover {
			animation: none;
		}
		
		.liencompte
		{
			text-decoration:none;			
		}
		
		.liencompte:visited
		{
			color:white;
		}
		
		.avertissement-important {
			background: linear-gradient(135deg, #fff8e1, #fff3c4);
			border: 2px solid #ff9800;
			border-radius: 15px;
			padding: 25px;
			display: flex;
			align-items: flex-start;
			gap: 20px;
			box-shadow: 0 4px 15px rgba(255, 152, 0, 0.15);
			position: relative;
		}

		.avertissement-icone {
			font-size: 2rem;
			color: #ff9800;
			flex-shrink: 0;
			animation: pulse 2s infinite;
		}

		@keyframes pulse {
			0% { transform: scale(1); }
			50% { transform: scale(1.1); }
			100% { transform: scale(1); }
		}

		.avertissement-contenu {
			flex: 1;
		}

		.avertissement-contenu h3 {
			color: #e65100;
			margin-bottom: 15px;
			font-size: 1.2rem;
			font-weight: 700;
		}

		.avertissement-contenu p {
			color: #333;
			font-size: 0.95rem;
			line-height: 1.6;
			margin-bottom: 12px;
		}

		.avertissement-contenu p:last-child {
			margin-bottom: 0;
		}

		.avertissement-contenu strong {
			color: #e65100;
			font-weight: 600;
		}

		/* Responsive mobile */
		@media (max-width: 768px) {
			.avertissement-important {
				margin: 15px 5px;
				padding: 20px 15px;
				flex-direction: column;
				text-align: center;
				gap: 15px;
			}
			
			.avertissement-icone {
				font-size: 1.8rem;
				align-self: center;
			}
			
			.avertissement-contenu h3 {
				font-size: 1.1rem;
				margin-bottom: 12px;
			}
			
			.avertissement-contenu p {
				font-size: 0.9rem;
				text-align: left;
			}
		}
		.nav-header {
            top: 3px !important;
        }
		
		@media only screen 
		and (min-device-width: 768px) 
		and (max-device-width: 1024px) 
		and (-webkit-min-device-pixel-ratio: 2) {
			.fiche-content-wrapper .content {
				padding: 20px !important;
			}
		}

		/* Alternative plus simple qui cible les tablettes */
		@media (min-width: 768px) and (max-width: 1024px) {
			.fiche-content-wrapper .content {
				padding: 20px !important;
			}
		}
		/* Watermark de base - non modifiable */
		#visible-watermark-container {
			position: fixed !important;
			top: 0 !important;
			left: 0 !important;
			width: 100% !important;
			height: 100% !important;
			pointer-events: none !important;
			z-index: 9998 !important;
			overflow: hidden !important;
		}

		/* Empêcher la suppression via CSS */
		#visible-watermark-container,
		#visible-watermark-container * {
			display: block !important;
			visibility: visible !important;
			opacity: inherit !important;
		}

		/* Watermark dynamique */
		#dynamic-watermark {
			position: fixed !important;
			background: rgba(74, 144, 226, 0.1) !important;
			color: #4a90e2 !important;
			padding: 5px 10px !important;
			border-radius: 5px !important;
			font-size: 12px !important;
			font-weight: bold !important;
			z-index: 9999 !important;
			pointer-events: none !important;
			transition: all 2s ease !important;
			font-family: Arial, sans-serif !important;
		}

		/* Pixels invisibles de watermarking */
		.invisible-watermark-pixel {
			position: absolute !important;
			width: 1px !important;
			height: 1px !important;
			opacity: 0.01 !important;
			pointer-events: none !important;
			z-index: -1 !important;
			user-select: none !important;
		}

		/* Protection contre l'inspection */
		.invisible-watermark-pixel:hover,
		.invisible-watermark-pixel:focus,
		.invisible-watermark-pixel:active {
			opacity: 0.01 !important;
			background: transparent !important;
		}

		/* Watermark responsive */
		@media (max-width: 768px) {
			#visible-watermark-container div {
				font-size: 14px !important;
				transform: rotate(-30deg) !important;
			}
			
			#dynamic-watermark {
				font-size: 10px !important;
				padding: 3px 6px !important;
			}
		}

		@media print {
			/* Watermark renforcé pour l'impression */
			#visible-watermark-container {
				display: block !important;
				visibility: visible !important;
			}
			
			#visible-watermark-container div {
				opacity: 0.3 !important;
				color: #ff0000 !important;
				font-size: 24px !important;
				font-weight: bold !important;
			}
			
			/* Ajouter un watermark spécial pour l'impression */
			body::before {
				content: "DOCUMENT PROTÉGÉ - IMPRESSION NON AUTORISÉE";
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%) rotate(-45deg);
				font-size: 48px;
				color: rgba(255, 0, 0, 0.5);
				font-weight: bold;
				z-index: 10000;
				pointer-events: none;
			}
		}

		/* Protection contre les sélecteurs CSS malveillants */
		*[style*="display: none"] #visible-watermark-container,
		*[style*="visibility: hidden"] #visible-watermark-container,
		*[style*="opacity: 0"] #visible-watermark-container {
			display: block !important;
			visibility: visible !important;
			opacity: 1 !important;
		}

		/* Animation de protection */
		@keyframes watermark-protection {
			0% { opacity: 0.1; }
			50% { opacity: 0.2; }
			100% { opacity: 0.1; }
		}

		#visible-watermark-container div {
			animation: watermark-protection 10s infinite ease-in-out;
		}

		/* Masquer les éléments de debug */
		[data-wm] {
			/* Les éléments avec watermark invisible restent normaux */
		}

		/* Protection spéciale pour les captures d'écran */
		@media screen and (-webkit-min-device-pixel-ratio: 2) {
			#visible-watermark-container div {
				opacity: 0.15 !important;
				font-size: 20px !important;
			}
		}

		/* Overlay de protection */
		.protection-overlay {
			position: fixed !important;
			top: 0 !important;
			left: 0 !important;
			width: 100% !important;
			height: 100% !important;
			background: rgba(255, 0, 0, 0.3) !important;
			color: white !important;
			display: flex !important;
			justify-content: center !important;
			align-items: center !important;
			font-size: 48px !important;
			font-weight: bold !important;
			z-index: 10001 !important;
			pointer-events: none !important;
		}

		/* Renforcement du watermark */
		.watermark-reinforcement {
			position: fixed !important;
			top: 50% !important;
			left: 50% !important;
			transform: translate(-50%, -50%) rotate(-45deg) !important;
			font-size: 72px !important;
			color: rgba(255, 0, 0, 0.3) !important;
			font-weight: bold !important;
			pointer-events: none !important;
			z-index: 10000 !important;
			text-shadow: 2px 2px 4px rgba(0,0,0,0.5) !important;
		}

		/* Protection contre DevTools */
		@media (max-width: 1px) {
			/* Masqué par défaut, visible seulement si DevTools détectés */
			.devtools-warning {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: red;
				color: white;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24px;
				z-index: 99999;
			}
		}

		/* Watermark dans les éléments modifiés */
		.fiche-content-wrapper *[data-wm]::after {
			content: "";
			position: absolute;
			width: 1px;
			height: 1px;
			background: transparent;
			opacity: 0;
		}

		/* Protection contre l'édition CSS en direct */
		style:not([data-watermark-system]) {
			/* Styles non autorisés masqués */
		}

		/* Marqueur pour identifier les styles légitimes */
		style[data-watermark-system] {
			/* Styles du système de watermarking autorisés */
		}

		/* Animation de sécurité pour les éléments suspects */
		.suspicious-element {
			animation: security-flash 0.5s infinite alternate;
		}

		@keyframes security-flash {
			0% { background-color: rgba(255, 0, 0, 0.1); }
			100% { background-color: rgba(255, 0, 0, 0.3); }
		}

		/* Watermark contextuel selon l'heure */
		.time-based-watermark {
			position: fixed;
			bottom: 10px;
			left: 10px;
			font-size: 10px;
			color: rgba(74, 144, 226, 0.5);
			pointer-events: none;
			z-index: 9997;
		}

		/* Protection contre l'iframe */
		body {
			/* Empêcher l'intégration en iframe */
			position: relative;
		}

		body::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			pointer-events: none;
			z-index: -1;
			/* Signature invisible */
			background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect width='1' height='1' fill='rgba(74,144,226,0.001)'/></svg>");
		}
		@media print {
		  body > * {
			display: none !important;
		  }
		  body::before {
			content: "Impression non autorisée — © PÉDAGOGIE RETRAITE";
			position: fixed;           /* se place par rapport à la page imprimée */
			top: 50%;                  /* milieu vertical */
			left: 50%;                 /* milieu horizontal */
			transform: translate(-50%, -50%); /* centre exact */
			text-align: center;
			font: 700 18pt system-ui;
			color: orange;                /* facultatif pour la visibilité */
		  }
		}