:root {
            --francia-blue: #0c3181;
            --francia-dark: #082041;
            --francia-gold: #CCA548;
            --francia-white: #ffffff;
            --francia-black: #050a12;
        }
		html {	  
            /* Scroll fluide natif en soutien */
            scroll-behavior: smooth;
        }										
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            scroll-behavior: smooth;
            background-color: var(--francia-white);
            color: var(--francia-dark);
            overflow-x: hidden;
        }

        /* === ARABE / RTL === */
        html[lang="ar"] body {
            font-family: 'Cairo', sans-serif;
            direction: rtl;
            text-align: right;
        }
        html[lang="ar"] .space-x-8 > * + * { margin-left: 0; margin-right: 2rem; }
        html[lang="ar"] .space-x-6 > * + * { margin-left: 0; margin-right: 1.5rem; }
        html[lang="ar"] .space-x-4 > * + * { margin-left: 0; margin-right: 1rem; }
        html[lang="ar"] .space-x-3 > * + * { margin-left: 0; margin-right: 0.75rem; }
        html[lang="ar"] .space-x-2 > * + * { margin-left: 0; margin-right: 0.5rem; }
        html[lang="ar"] .mr-4  { margin-right: 0; margin-left: 1rem; }
        html[lang="ar"] .mr-2  { margin-right: 0; margin-left: 0.5rem; }
        html[lang="ar"] .ml-auto { margin-left: 0; margin-right: auto; }
        html[lang="ar"] .tracking-widest,
        html[lang="ar"] .tracking-tighter,
        html[lang="ar"] .tracking-\[0\.4em\] { letter-spacing: 0; }
        html[lang="ar"] #cookie-popup { left: auto; right: 20px; }
        html[lang="ar"] .gold-text { font-family: 'Cairo', sans-serif; }
        html[lang="ar"] .lang-btn { font-family: 'Segoe UI', sans-serif; }
        html[lang="ar"] .text-xs { font-size: 0.9rem;}
        html[lang="ar"] #slide-text {
            font-family: 'Amiri', serif;
            font-style: italic;
            font-size: 1.9em;
            letter-spacing: 0;
        }
        html[lang="ar"] .space-x-8 > :not([hidden]) ~ :not([hidden]) {
            margin-left: calc(2rem * var(--tw-space-x-reverse));
            margin-right: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
        }
        html[lang="ar"] .space-x-3 > :not([hidden]) ~ :not([hidden]) {
            margin-left: calc(0.75rem * var(--tw-space-x-reverse));
            margin-right: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
        }
        html[lang="ar"] .space-x-4 > :not([hidden]) ~ :not([hidden]) {
            margin-left: calc(1rem * var(--tw-space-x-reverse));
            margin-right: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
        }
        html[lang="ar"] .select-sujet { background-position: left 1.25rem center; }

        /* Navigation Dynamique */
        nav {
            background: transparent;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        nav.scrolled {
            background: rgba(8, 32, 65, 0.95);
            backdrop-filter: blur(10px);
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        }
		.logo{
			width: 100px;
		}
		nav.scrolled .logo{
			transform: scale(0.8);
			transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		}

        /* Menu Mobile */
        #mobile-menu {
            transition: transform 0.4s ease-in-out;
            transform: translateX(100%);
        }
        #mobile-menu.active {
            transform: translateX(0);
        }

        /* Hero Canvas & Arrière-plan */
        #hero-canvas {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: 0;
            opacity: 0.4;
        }

        /* Animations au Scroll (Modern Reveal) */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
            will-change: transform, opacity;
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
        .reveal-left {
            opacity: 0;
            transform: translateX(-50px);
            transition: all 0.8s ease-out;
        }
        .reveal-left.active {
            opacity: 1;
            transform: translateX(0);
        }

        /* Slider Texte Dynamique dans le Hero */
        #slide-text {
            min-height: 2em;
            transition: opacity 0.5s ease-in-out;
            text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
        }

        /* Floating Buttons */
        .float-btns {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 100;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .call-float {
            background: var(--francia-gold);
            color: white;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            transition: transform 0.3s;
        }
        .call-float:hover { transform: scale(1.1); }

        /* Chatbot UI */
        #chatbot-window {
            position: fixed;
            bottom: 100px;
            right: 30px;
            width: 350px;
            max-width: calc(100vw - 60px);
            height: 500px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.3);
            display: none;
            flex-direction: column;
            overflow: hidden;
            z-index: 101;
            border: 1px solid rgba(8, 32, 65, 0.1);
        }
        #chatbot-window.active { display: flex; animation: slideUp 0.4s ease-out; }

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

        .chat-header {
            background: var(--francia-dark);
            color: white;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        #chat-messages {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 12px;
            background: #f8fafc;
        }

        .message {
            max-width: 80%;
            padding: 12px 16px;
            border-radius: 15px;
            font-size: 14px;
            line-height: 1.4;
            position: relative;
        }
        .msg-bot { background: white; color: var(--francia-dark); align-self: flex-start; border-bottom-left-radius: 2px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
        .msg-user { background: var(--francia-gold); color: white; align-self: flex-end; border-bottom-right-radius: 2px; }

        .typing-indicator {
            display: flex;
            gap: 4px;
            padding: 8px;
        }
        .dot {
            width: 6px;
            height: 6px;
            background: #ccc;
            border-radius: 50%;
            animation: bounce 1.4s infinite ease-in-out;
        }
        .dot:nth-child(2) { animation-delay: 0.2s; }
        .dot:nth-child(3) { animation-delay: 0.4s; }

        @keyframes bounce {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1); }
        }

        .chat-input-area {
            padding: 15px;
            border-top: 1px solid #eee;
            display: flex;
            gap: 10px;
        }

        .quick-btn {
            font-size: 11px;
            padding: 6px 12px;
            border: 1px solid var(--francia-gold);
            color: var(--francia-gold);
            border-radius: 20px;
            cursor: pointer;
            transition: 0.2s;
            white-space: nowrap;
        }
        .quick-btn:hover { background: var(--francia-gold); color: white; }

        .gold-text { color: var(--francia-gold); }
        .card-hover:hover {
            transform: translateY(-10px);
            border-color: var(--francia-gold);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .lang-btn { cursor: pointer; opacity: 0.6; transition: 0.3s; }
        .lang-btn.active { opacity: 1; font-weight: bold; border-bottom: 2px solid var(--francia-gold); }



        .dashboards-video{
            border-radius: 10px;
        }

        @keyframes pulse {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(204, 165, 72, 0.7); }
            70% { transform: scale(1.1); box-shadow: 0 0 0 15px rgba(204, 165, 72, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(204, 165, 72, 0); }
        }

        .gold-text { color: var(--francia-gold); }
        .card-hover:hover {
            transform: translateY(-10px);
            border-color: var(--francia-gold);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .lang-btn { cursor: pointer; opacity: 0.6; transition: 0.3s; }
        .lang-btn.active { opacity: 1; font-weight: bold; border-bottom: 2px solid var(--francia-gold); }

		/* CARTES EXPERTISE OPTIMISÉES */
        .expertise-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
        }

        .expertise-card {
            position: relative;
            height: 320px;
            border-radius: 16px;
            overflow: hidden;
            cursor: pointer;
            background: var(--francia-dark);
        }

        .expertise-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
            opacity: 0.7;
        }

        .expertise-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(8, 32, 65, 0.95) 10%, rgba(8, 32, 65, 0.4) 50%, transparent 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 2rem;
            transition: background 0.5s ease;
        }

        .expertise-content {	   
            transform: translateY(40px);
            transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);								
        }

        .expertise-title {
            color: var(--francia-gold);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 0.5rem;
            font-size: 1.25rem;
            transition: transform 0.5s ease;
        }

        .expertise-desc {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9rem;
            line-height: 1.5;
            opacity: 0;							 
            transition: opacity 0.4s ease 0.1s;						 
        }

        /* Effets au Survol */
        .expertise-card:hover .expertise-img { transform: scale(1.1); opacity: 0.5; }
        .expertise-card:hover .expertise-content { transform: translateY(0); }
        .expertise-card:hover .expertise-desc { opacity: 1; }
        .expertise-card:hover .expertise-overlay { background: rgba(8, 32, 65, 0.85); }
		 

        /* Cookie Popup */
        #cookie-popup {
            position: fixed;
            bottom: 20px;
            left: 20px;
            max-width: 350px;
            z-index: 1000;
            display: none;
            animation: slideInUp 0.5s ease-out;
        }

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

        .modal-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.95);
            z-index: 2000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .form-notification {
            padding: 14px 20px;
            border-radius: 10px;
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.03em;
            display: flex;
            align-items: center;
            gap: 10px;
            animation: fadeInDown 0.4s ease;
        }
        .form-notification.hidden { display: none; }
        .form-notification.success {
            background: #f0fdf4;
            color: #166534;
            border: 1px solid #bbf7d0;
        }
        .form-notification.error {
            background: #fef2f2;
            color: #991b1b;
            border: 1px solid #fecaca;
        }
        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-8px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .select-sujet {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 1.25rem center;
        }

        #modal-content::-webkit-scrollbar { width: 5px; }
        #modal-content::-webkit-scrollbar-track { background: transparent; }
        #modal-content::-webkit-scrollbar-thumb { background: #CCA548; border-radius: 4px; }
        #modal-content { scrollbar-width: thin; scrollbar-color: #CCA548 transparent; }



@media screen and (max-width: 1050px) {
	.nav-link {
		margin: 0px !important;
	}
}