/* Fix global pour éviter le scroll horizontal */
        html, body {
            overflow-x: hidden !important;
            max-width: 100vw !important;
        }

        ol, ul, menu {
            all: revert;
        }

        :root {
            --ink: #0e1116;
            --blue: #0B2B5A;
            --blue-2: #143F86;
            --blue-3: #1E56B3;
            --blue-light: #2563eb;
            --sky: #E8F1FF;
            --sky-soft: #F0F6FF;
            --accent: #FFC940;
            --bg: #F7F9FC;
            --bg-soft: #FAFCFE;
            --card: #FFFFFF;
            --muted: #5E6B7A;
            --line: #E5EDF6;
            --green: #1FA37B;
            --red: #D04A4A;
            --warn: #B97400;
            --radius: 14px;
            --shadow: 0 6px 22px rgba(10, 35, 80, .08);
            --shadow-sm: 0 4px 14px rgba(10, 35, 80, .06);
            --shadow-hover: 0 12px 32px rgba(10, 35, 80, .15);
            --focus: 0 0 0 4px rgba(30, 86, 179, .18);
        }

        * {
            box-sizing: border-box
        }

        html, body {
            overflow-x: hidden;
            max-width: 100vw;
        }

        img {
            max-width: 100%;
            display: block
        }

        .container {
            max-width: 1220px;
            margin: 0 auto;
            /* padding: 0 22px */
        }


        /* Topbar avec animation */
        .topbar {
            position: sticky;
            top: 0;
            z-index: 20;
            background: linear-gradient(180deg, #fafcfe, #f8fbff);
            border-bottom: 1px solid var(--line);
            padding-top: 5px;
            transition: all 0.3s ease;
        }

        .topbar:hover {
            box-shadow: 0 4px 16px rgba(10, 35, 80, 0.1);
        }

        .topbar .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 68px
        }

        /* Brand avec animation */
        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.3s ease;
        }

        .brand:hover {
            transform: translateX(5px);
        }

        .logo {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: linear-gradient(135deg, var(--blue), var(--blue-2));
            display: grid;
            place-items: center;
            color: #fff;
            font-weight: 900;
            letter-spacing: .5px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .brand:hover .logo {
            transform: rotate(360deg) scale(1.1);
            box-shadow: 0 4px 12px rgba(11, 43, 90, 0.3);
        }

        .brand-title {
            font-weight: 900;
            letter-spacing: .2px;
            transition: color 0.3s ease;
        }

        .brand:hover .brand-title {
            color: var(--blue-3);
        }

        /* Tags avec animation */
        .tag {
            font-size: 12px;
            padding: 4px 10px;
            border-radius: 999px;
            background: var(--sky);
            color: var(--blue-2);
            border: 1px solid var(--line);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .tag:hover {
            background: var(--blue-3);
            color: white;
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 4px 12px rgba(30, 86, 179, 0.2);
        }

        /* Boutons avec animations avancées */
        .btn {
            border: 0;
            border-radius: 12px;
            padding: 12px 16px;
            font-weight: 800;
            letter-spacing: .2px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

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

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

        .btn.primary {
            background: var(--blue-3);
            color: #fff;
            box-shadow: var(--shadow-sm);
        }

        .btn.primary:hover {
            background: var(--blue-2);
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 8px 20px rgba(30, 86, 179, 0.3);
        }

        .btn.secondary {
            background: #fff;
            color: var(--blue-3);
            border: 2px solid var(--blue-3);
        }

        .btn.secondary:hover {
            background: var(--blue-3);
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 6px 16px rgba(30, 86, 179, 0.2);
        }

        .btn.warn {
            background: var(--accent);
            color: #5a3d00;
        }

        .btn.warn:hover {
            background: #ffdb70;
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 6px 16px rgba(255, 201, 64, 0.3);
        }

        .btn.ghost {
            background: #fff;
            border: 2px solid var(--line);
            color: var(--blue);
        }

        .btn.ghost:hover {
            background: var(--sky-soft);
            border-color: var(--blue-3);
            transform: translateY(-2px);
        }

        .btn:focus {
            outline: none;
            box-shadow: var(--focus)
        }

        /* Hero avec animation */
        .hero {
            padding: 20px 0 28px;
            background: linear-gradient(180deg, #fafcfe, #f0f6ff);
            border-bottom: 1px solid var(--line);
            transition: all 0.4s ease;
        }

        .hero:hover {
            background: linear-gradient(180deg, #ffffff, #f5f9ff);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(10, 35, 80, 0.08);
        }

        .hero h1 {
            font-size: 42px;
            line-height: 1.15;
            margin: 8px 0 10px;
            transition: all 0.3s ease;
        }

        .hero:hover h1 {
            color: var(--blue-3);
            transform: scale(1.02);
        }

        .hero p {
            max-width: 860px;
            color: var(--muted);
            font-size: 18px;
            transition: color 0.3s ease;
        }

        .hero:hover p {
            color: var(--ink);
        }

        .badges {
            margin-top: 14px
        }

        /* Pills avec animation */
        .pill {
            padding: 6px 12px;
            border-radius: 999px;
            background: linear-gradient(135deg, #F0F6FF, #E8F1FF);
            border: 1px solid var(--line);
            font-size: 12px;
            color: #223a67;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: inline-block;
        }

        .pill:hover {
            background: var(--blue-3);
            color: white;
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 4px 12px rgba(30, 86, 179, 0.2);
        }

        /* Subnav avec animation */
        .subnav {
            position: sticky;
            top: 68px;
            z-index: 19;
            background: linear-gradient(180deg, #ffffff, #fafcfe);
            border-bottom: 1px solid var(--line);
            transition: all 0.3s ease;
        }

        .subnav:hover {
            box-shadow: 0 4px 12px rgba(10, 35, 80, 0.08);
        }

        .subnav .container {
            padding: 10px 0;
        }

        /* Tabs avec animation */
        .tab {
            padding: 10px 14px;
            border-radius: 999px;
            background: #fff;
            border: 1px solid var(--line);
            cursor: pointer;
            font-weight: 700;
            color: #223a67;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .tab::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(30, 86, 179, 0.1), transparent);
            transition: left 0.6s ease;
        }

        .tab:hover::before {
            left: 100%;
        }

        .tab:hover {
            background: var(--sky-soft);
            border-color: var(--blue-3);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(30, 86, 179, 0.15);
        }

        .tab.active {
            background: var(--blue-3);
            border-color: var(--blue-3);
            color: #fff;
            box-shadow: 0 4px 12px rgba(30, 86, 179, 0.25);
        }

        .tab.active:hover {
            transform: translateY(-3px) scale(1.02);
        }

        .section {
            display: none;
            padding: 26px 0;

    max-width: 1220px !important;
    margin: 0 auto;
    /* padding: 0 22px */
}

        .section.active {
            display: block;
            animation: fadeIn 0.4s ease;
        }

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

        #projectGrid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 18px;
        }

        /* Cartes avec animations avancées */
        .card {
            grid-column: span 4;
            background: linear-gradient(135deg, #ffffff 0%, #fafcfe 100%);
            border: 1px solid var(--line);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--blue), var(--blue-3));
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }

        .card:hover::before {
            transform: scaleX(1);
        }

        .card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: var(--shadow-hover);
            border-color: var(--blue-3);
            background: linear-gradient(135deg, #ffffff 0%, #f5f9ff 100%);
        }

        .card .media {
            height: 150px;
            background: linear-gradient(135deg, #dfe9ff, #f0f6ff);
            display: grid;
            place-items: center;
            color: #6d7c90;
            font-weight: 800;
            transition: all 0.4s ease;
        }

        .card:hover .media {
            transform: scale(1.05);
            background: linear-gradient(135deg, #d0e2ff, #e8f1ff);
        }

        .card .content {
            padding: 14px
        }

        /* Meta avec animation */
        .meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #6b778a;
            font-size: 12px;
            margin-bottom: 6px
        }

        /* Status avec animation */
        .status {
            font-size: 12px;
            font-weight: 900;
            padding: 4px 8px;
            border-radius: 999px;
            transition: all 0.3s ease;
        }

        .status.pending {
            color: var(--warn);
            background: #fff3e6;
        }

        .card:hover .status.pending {
            background: var(--warn);
            color: white;
            transform: scale(1.05);
        }

        .status.validated {
            color: var(--green);
            background: #e8f5f0;
        }

        .card:hover .status.validated {
            background: var(--green);
            color: white;
            transform: scale(1.05);
        }

        .status.rejected {
            color: var(--red);
            background: #fee;
        }

        .card:hover .status.rejected {
            background: var(--red);
            color: white;
            transform: scale(1.05);
        }

        .status.in_progress {
            color: var(--blue-3);
            background: var(--sky);
        }

        .card:hover .status.in_progress {
            background: var(--blue-3);
            color: white;
            transform: scale(1.05);
        }

        .status.completed {
            color: var(--green);
            background: #e8f5f0;
        }

        .card:hover .status.completed {
            background: var(--green);
            color: white;
            transform: scale(1.05);
        }

        /* Progress bar avec animation */
        .progress {
            height: 8px;
            background: #edf3ff;
            border-radius: 999px;
            overflow: hidden;
            margin-top: 8px;
            transition: all 0.3s ease;
        }

        .card:hover .progress {
            transform: scaleY(1.2);
            box-shadow: 0 2px 8px rgba(30, 86, 179, 0.2);
        }

        .progress>div {
            height: 8px;
            background: linear-gradient(90deg, var(--accent), #ffe487);
            width: 0%;
            transition: width 0.6s ease;
        }

        /* Panel avec animation */
        .panel {
            background: linear-gradient(135deg, #fafcfe 0%, #f5f9ff 100%);
            border: 1px solid var(--line);
            border-radius: 16px;
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .panel:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-hover);
            border-color: rgba(30, 86, 179, 0.2);
            background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
        }

        .panel header {
            padding: 12px 16px;
            border-bottom: 1px solid var(--line);
            font-weight: 900;
            color: #143F86;
            transition: all 0.3s ease;
        }

        .panel:hover header {
            color: var(--blue-3);
            background: var(--sky-soft);
        }

        .panel .body {
            padding: 16px;
        }

        /* KPIs avec animation */
        .kpis {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
        }

        .kpi {
            background: linear-gradient(135deg, #ffffff, #fafcfe);
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 14px;
            box-shadow: var(--shadow-sm);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: default;
        }

        .kpi:hover {
            transform: translateY(-8px) scale(1.05);
            box-shadow: 0 8px 24px rgba(30, 86, 179, 0.15);
            border-color: var(--blue-3);
            background: linear-gradient(135deg, #ffffff, #f0f6ff);
        }

        .kpi .v {
            font-size: 26px;
            font-weight: 900;
            color: var(--blue-3);
            transition: all 0.3s ease;
        }

        .kpi:hover .v {
            transform: scale(1.1);
            color: var(--blue-light);
        }

        .legend {
            font-size: 12px;
            color: #6b7688
        }

        /* Liste items avec animation */
        .list .item {
            border: 1px dashed var(--line);
            border-radius: 12px;
            padding: 12px;
            margin: 10px 0;
            background: linear-gradient(135deg, #fbfdff, #f8fbff);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .list .item:hover {
            transform: translateX(10px);
            box-shadow: 0 4px 16px rgba(10, 35, 80, 0.1);
            border-color: var(--blue-3);
            border-style: solid;
            background: white;
        }

        /* Formulaire avec animations */
        .form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px
        }

        .field {
            display: flex;
            flex-direction: column;
            gap: 6px
        }

        .label {
            font-size: 13px;
            color: #2d3b52;
            font-weight: 700
        }

        .control {
            position: relative
        }

        .input,
        .select,
        .textarea {
            width: 100%;
            border: 1.6px solid #cfdef3;
            border-radius: 12px;
            padding: 12px 14px;
            font-size: 14px;
            background: #fff;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .input:hover,
        .select:hover,
        .textarea:hover {
            border-color: var(--blue-3);
            box-shadow: 0 2px 8px rgba(30, 86, 179, 0.08);
            transform: translateY(-2px);
        }

        .input:focus,
        .select:focus,
        .textarea:focus {
            border-color: var(--blue-3);
            box-shadow: var(--focus);
            outline: none;
            transform: translateY(-2px);
        }

        .textarea {
            min-height: 130px;
            resize: vertical
        }

        .hint {
            font-size: 12px;
            color: #6b7688
        }

        .error {
            color: var(--red);
            font-size: 12px;
            display: none
        }

        .invalid .input,
        .invalid .textarea,
        .invalid .select {
            border-color: var(--red)
        }

        .invalid .error {
            display: block
        }

        .counter {
            position: absolute;
            right: 12px;
            bottom: -18px;
            font-size: 12px;
            color: #6b7688
        }

        /* Upload zone avec animation */
        .upload {
            border: 2px dashed #cfe0ff;
            border-radius: 14px;
            padding: 18px;
            text-align: center;
            background: linear-gradient(135deg, #f5f9ff, #f0f6ff);
            color: #4a5b77;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }

        .upload:hover {
            background: linear-gradient(135deg, #e8f1ff, #dfe9ff);
            border-color: var(--blue-3);
            transform: scale(1.02);
            box-shadow: 0 4px 16px rgba(30, 86, 179, 0.12);
        }

        .upload.drag {
            background: linear-gradient(135deg, #e8f1ff, #d0e2ff);
            border-color: var(--blue-3);
            border-style: solid;
            transform: scale(1.05);
        }

        .upload input {
            display: none
        }

        .divider {
            height: 1px;
            background: var(--line);
            margin: 14px 0
        }

        .actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: flex-end;
            margin-top: 6px
        }

        /* Modal avec animation */
        .modal {
            position: fixed;
            inset: 0;
            display: none;
            background: rgba(13, 23, 41, .5);
            align-items: center;
            justify-content: center;
            padding: 18px;
            z-index: 50;
            backdrop-filter: blur(4px);
        }

        .modal.open {
            display: flex;
            animation: fadeInModal 0.3s ease;
        }

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

        .modal .box {
            background: #fff;
            border-radius: 16px;
            max-width: 940px;
            width: 100%;
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
            overflow: hidden;
            animation: slideUpModal 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes slideUpModal {
            from {
                opacity: 0;
                transform: translateY(50px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .modal header {
            padding: 14px 16px;
            border-bottom: 1px solid var(--line);
            display: flex;
            align-items: center;
            gap: 10px
        }

        .modal .content {
            padding: 16px
        }

        /* Responsive */
        @media (max-width:980px) {
            .grid .card {
                grid-column: span 6
            }

            .form {
                grid-template-columns: 1fr
            }

            .kpis {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width:600px) {
            .grid .card {
                grid-column: span 12
            }

            .kpis {
                grid-template-columns: 1fr;
            }
        }

        /* Conteneur de notifications avec animation */
        #notification-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: 400px;
        }

        /* Style des alertes avec animation */
        .alert {
            padding: 16px 20px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            animation: slideIn 0.3s ease-out;
            transition: all 0.3s ease;
        }

        .alert:hover {
            transform: translateX(-5px) scale(1.02);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
        }

        .alert-success {
            background-color: #10b981;
            color: white;
            border-left: 4px solid #059669;
        }

        .alert-error {
            background-color: #ef4444;
            color: white;
            border-left: 4px solid #dc2626;
        }

        .alert-close {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            padding: 0;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.8;
            transition: all 0.3s ease;
        }

        .alert-close:hover {
            opacity: 1;
            transform: rotate(90deg) scale(1.2);
        }

        @keyframes slideIn {
            from {
                transform: translateX(400px);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        /* Modal Guide éditorial avec animation */
        .guide-modal {
            position: fixed;
            inset: 0;
            display: none;
            background: rgba(0, 0, 0, 0.5);
            align-items: center;
            justify-content: center;
            padding: 20px;
            z-index: 9999;
            backdrop-filter: blur(4px);
        }

        .guide-modal.open {
            display: flex;
            animation: fadeInModal 0.3s ease;
        }

        .guide-modal-container {
            background: white;
            border-radius: 16px;
            max-width: 600px;
            width: 100%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            animation: slideUpModal 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .guide-modal-header {
            padding: 16px 20px;
            border-bottom: 1px solid #e5e5e5;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: linear-gradient(135deg, var(--sky-soft), var(--sky));
        }

        .guide-modal-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--blue);
        }

        .guide-modal-body {
            padding: 20px 20px 24px;
            overflow-y: auto;
            background: var(--bg-soft);
        }

        .guide-section {
            margin-bottom: 24px;
            background: white;
            padding: 16px;
            border-radius: 12px;
            border: 1px solid var(--line);
            transition: all 0.3s ease;
        }

        .guide-section:hover {
            transform: translateY(-4px);
            box-shadow: 0 4px 16px rgba(10, 35, 80, 0.1);
            border-color: var(--blue-3);
        }

        .guide-section:last-child {
            margin-bottom: 0;
        }

        .guide-section-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--blue);
            margin-bottom: 12px;
            transition: all 0.3s ease;
        }

        .guide-section:hover .guide-section-title {
            color: var(--blue-3);
            transform: translateX(5px);
        }

        .guide-list {
            margin: 0;
            padding-left: 24px;
            list-style-position: outside;
        }

        .guide-list li {
            margin-bottom: 8px;
            color: #333;
            line-height: 1.5;
            transition: all 0.3s ease;
        }

        .guide-list li:hover {
            color: var(--blue-3);
            transform: translateX(5px);
        }

        .guide-text {
            color: #333;
            line-height: 1.6;
            margin: 0;
        }

        /* Titre de carte avec animation */
        .card h3 {
            transition: all 0.3s ease;
        }

        .card:hover h3 {
            color: var(--blue-3);
            transform: translateX(5px);
        }

        /* Effets de lumière sur les sections - DÉSACTIVÉ pour éviter le scroll horizontal */
        /* .section::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(30, 86, 179, 0.03) 1px, transparent 1px);
            background-size: 50px 50px;
            animation: drift 20s linear infinite;
            pointer-events: none;
        }

        @keyframes drift {
            0% { transform: translate(0, 0); }
            100% { transform: translate(50px, 50px); }
        } */