@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Outfit:wght@100..900&display=swap');
/* ==========RESET ========== */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;   
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
        
    }
/* ============ MY CSS =============================*/
body{
    background-color: #0F0331 ;
    width: 100%;
    overflow-x: hidden;
}
/*=== COULEURS ===*/
    .c-grey-blue, .hover\:c-grey-blue:hover, .active\:c-grey-blue:active{color:#F2F5FF;}
	.bg-grey-blue, .hover\:bg-grey-blue:hover, .active\:bg-grey-blue:active {background-color:#F2F5FF;}
	.border-grey-blue, .hover\:border-grey-blue:hover, .active\:border-grey-blue:active {border-color:#F2F5FF;} 

	.c-red, .hover\:c-red:hover, .active\:c-red:active{color:#dc2f02;}
	.bg-red, .hover\:bg-red:hover, .active\:bg-red:active {background-color:#dc2f02;}
	.border-red, .hover\:border-red:hover, .active\:border-red:active {border-color:#dc2f02;}

	.c-dark-blue, .hover\:c-dark-blue:hover, .active\:c-dark-blue:active{color:#0047AB;}
	.bg-dark-blue, .hover\:bg-dark-blue:hover,.active\:bg-dark-blue:active{background-color:#0047AB;}
	.border-dark-blue, .hover\:border-dark-blue:hover,.active\:border-dark-blue:active{border-color:#0047AB;}
	
	.c-light-blue, .hover\:c-light-blue:hover, .active\:c-light-blue:active{color:#4cc9f0;}
	.bg-light-blue, .hover\:bg-light-blue:hover, .active\:bg-light-blue:active{background-color:#4cc9f0;}
	.border-light-blue, .hover\:border-light-blue:hover, .active\:border-light-blue:active{border-color:#4cc9f0;}

	.c-green, .hover\:c-green:hover, .active\:c-green:active{color:#70e000;}
	.bg-green, .hover\:bg-green:hover, .active\:bg-green:active{background-color:#70e000;}
	.border-green, .hover\:border-green:hover, .active\:border-green:active{border-color:#70e000;}
    
    .c-light-green, .hover\:c-green:hover, .active\:c-green:active{color:#CCFF00;}
	.bg-light-green, .hover\:bg-green:hover, .active\:bg-green:active{background-color:#CCFF00;}
	.border-light-green, .hover\:border-green:hover, .active\:border-green:active{border-color:#CCFF00;}

	.c-yellow, .hover\:c-yellow:hover, .active\:c-yellow:active{color:#ffba08;}
	.bg-yellow, .hover\:bg-yellow:hover, .active\:bg-yellow:active{background-color:#ffba08;}
	.border-yellow, .hover\:border-yellow:hover, .active\:border-yellow:active{border-color:#ffba08;}

	.c-white, .hover\:c-white:hover, .active\:c-white:active{color:#FFF;}
	.bg-white, .hover\:bg-white:hover, .active\:bg-white:active{background-color:#FFF;}
	.border-white, .hover\:border-white:hover, .active\:border-white:active{border-color:#FFF;}

	.c-black, .hover\:c-black:hover, .active\:c-black:active{color:#0F0331;}
	.bg-black, .hover\:bg-black:hover, .active\:bg-black:active{background-color:#0F0331;}
	.border-black, .hover\:border-black:hover, .active\:border-black:active{border-color:#0F0331;}

	.c-light-grey, .hover\:c-light-grey:hover, .active\:c-light-grey:active{color:#dcdcf3;}
	.bg-light-grey, .hover\:bg-light-grey:hover, .active\:bg-light-grey:active{background-color:#dcdcf3;}
	.border-light-grey, .hover\:border-light-grey:hover, .active\:border-light-grey:active{border-color:#dcdcf3;}

	.c-purple, .hover\:c-purple:hover, .active\:c-purple:active{color:#b5179e;}
	.bg-purple, .hover\:bg-purple:hover, .active\:bg-purple:active{background-color:#b5179e;}
	.border-purple, .hover\:border-purple:hover, .active\:border-purple:active{border-color:#b5179e;}

	.c-pink, .hover\:c-pink:hover, .active\:c-pink:active{color:#FE62AE;}
	.bg-pink, .hover\:bg-pink:hover, .active\:bg-pink:active{background-color:#FE62AE;}
	.border-pink, .hover\:border-pink:hover, .active\:border-pink:active{border-color:#FE62AE;}

    .mainContent, .connected-main-content, .connected-side-bar{
        color:#FFF
    }

@media (min-width:320px) {
    /* ====== GENERAL ====== */
    .mob-hidden{
        display: none;
    }
    .tab-only{
        display: none;
    }
    .desktop-only{
        display: none;
    }
    /* ====== messages ====== */
    .info{
        color: #0F0331;
        font-size: 14px;
        font-style: italic;
    }
    /* =====TYPO ======= */
    h1{
        font-family: 'League Spartan', sans-serif;
        font-size: 30px ;
        font-stretch: ultra-condensed;
        font-weight:800;
        line-height: 50px;
        margin: 20px 0px 10px 0px;
    }
    h2{
        font-family: 'League Spartan', sans-serif;
        font-size: 25px ;
        font-stretch:ultra-condensed;
        font-weight:700;
        line-height: 25px;
        margin: 20px 0px 10px 0px
    }
    h3{
        font-family: 'League Spartan', sans-serif;
        font-size: 20px ;
        font-stretch:ultra-condensed;
        font-weight:600;
        line-height: 20px;
        margin: 20px 0px 10px 0px
    }
    p, ol, ul, li, button, select, option, .checkbox, th, span, .text-muted, .body-wysiwyg{
        font-family: 'Outfit', sans-serif;
        font-size: 16px ;
        font-weight:400;
        line-height: 20px;
        /* margin: 10px 0px 5px 0px; */
        
    }
    input{
        font-family: 'Outfit', sans-serif;
        font-size: 16px ;
        font-weight:400;
        line-height: 20px;
    }
    .wysiwyg-container .body-wysiwyg{
        margin-top: 0;
        font-size: 16px ;
        padding: 20px 0px;
    }
    
    
    th{
        text-align: left;
        color: #0F0331;
        /* padding-left: 10px; */
    }
    
    a{
        font-family: 'Outfit', sans-serif;
        font-size: 16px ;
        text-decoration: none;
        font-weight:500;
        line-height: 20px;
    }
    ol, ul{
        margin: 10px 20px;
    }
    ol li{
        list-style: decimal;

    }
    
    ul li{
        list-style: square;

    }
    label, figcaption{
        font-family: 'Outfit', sans-serif;
        font-size: 13px ;
        font-style: italic;
        display: block;
        font-weight:400;
        line-height: 16px;
        text-align: left;
        margin-bottom: 0;
        
    }
    
    .error{
        color: #dc2f02;
        font-family: 'Outfit', sans-serif;
        font-size: 13px ;
        font-style: italic;
        display: block;
        font-weight:400;
        line-height: 16px;
        text-align: left;
        margin-left: 3px;
        
    }
    .alert-success{
        background-color: #70e000;
        height: 60px;
        margin: 30px 10px;
        position: absolute;
        bottom: 20px;
        right: 0;
        z-index: 2;
    }
    .alert-success p{
        color: #0F0331;
        padding: 20px;

    }

    /* =========== BOUTONS =================== */
    .primary{
        background-color: #FE62AE;
        color: #FFF;
        border-radius: 5px;
        padding: 12px 14px;
        border:none;
        margin: 10px 20px 10px 0px;
    }
    .secondary{
        background-color: #CCFF00;
        border-radius: 5px;
        margin: 10px 20px 10px 0px;
        padding: 12px 14px;
        border:none;
    }
    .tertiary{
        background-color: #0047AB;
        border-radius: 5px;
        margin: 10px 20px 10px 0px;
        color: #FFF;
        padding: 12px 14px;
        border:none;
    }
    .primary:hover, .secondary:hover, .tertiary:hover{
        background-color: #0F0331;
        color: #FFF;
    }
    /* =========== FORMULAIRE =================== */
    form{
        width: 100%;   
    }
    .field-half{
        margin-top:10px;
        margin-bottom: 20px;
        display: inline-block;
        width: 99%;
    }
    .half{
        width: 98%;
        border-radius: 5px;
        height: 40px;
        border: #0F0331 solid 2px;
    }
    .field-full{
        margin-top:10px;
        margin-bottom: 20px;
        display: inline-block;
        width: 95%;
    }
    input[type=text], input[type=email],input[type=number], input[type="range"], input[type=password], input[type=date], input[type=tel], input[type=url]{
        width: 98%;
        border-radius: 5px;
        height: 40px;
        border: #0F0331 solid 2px;
        padding: 0px 5px;
    }
    .multiple{
        height: 90px;
    }
    
    select{
        width: 100%;
        border-radius: 5px;
        height: 40px;
        border: #0F0331 solid 2px;
    }
    input[type=color]{
        width: 100%;
        border-radius: 5px;
        height: 46px;
        border: #0F0331 solid 2px;
    }

    textarea {
        width: 98%;
        border-radius: 5px;
        height: 22vh;
        border: #0F0331 solid 2px;
    }
    .full-area{
        width: 98%;
        height: 60vh;
    }
    .body-wysiwyg{
        width: 98%;
        border: #0F0331 solid 2px;
        border-radius: 5px;
    }
    /* ///// customized checkbox ///// */
    input[type=checkbox]{
	display: inline-block;
	width: 25px;
    height: 25px;
    }
    /* Customize the label (the container) */
    .container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 20px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-style: normal!important;
    }
    
    /* Hide the browser's default radio button */
    .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    }

    /* Create a custom radio button */
    .checkmark {
    position: absolute;
    top: -4px;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: #FFF;
    border: 2px solid #0047AB;
    border-radius: 0%;
    margin: 0;
    }

    /* On mouse-over, add a grey background color */
    .container:hover input ~ .checkmark {
    background-color: #4cc9f0;
    }

    /* When the radio button is checked, add a blue background */
    .container input:checked ~ .checkmark {
    background-color: #0047AB;
    }

    /* Create the indicator (the dot/circle - hidden when not checked) */
    .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    }

    /* Show the indicator (dot/circle) when checked */
    .container input:checked ~ .checkmark:after {
    display: block;
    }

    /* Style the indicator (dot/circle) */
    .container .checkmark:after {
    top: 0px;
    left: 7px;
    color: #FFF;
    content: "x";
    }
    /* ///// END customized checkbox ///// */

    /* ================ MODALE ================= */
    .modal, .modal-fullpage{
        display: none;
        background-color: #FFF;
        height: 95vh;
        padding: 16px;
        border-radius: 10px 10px 0px 0px ;
        position: fixed;
        bottom: 0;
        right: 0;
        z-index: 2;
        min-width: 90%;
        
        /* tuto  */
        overflow-x: hidden; /* Disable horizontal scroll */
        transition: 0.3s; /* 0.5 second transition effect to slide in the sidenav */
        
    }
    
    .cdx-notifies{
        z-index: 3;
    }
    .modal-header{
        padding-top: 30px;
    }
    .modal-header h2{
        text-align: left;
        display: inline-block;
        width: 80%;
    }
    .modal-dialog{
        text-align: left;
    }

    .modal span,.modal label{
        color: #0F0331;
    }
    .closebtn{
        text-align: right;
        cursor: pointer;
        vertical-align: top;
        background-color: #FFF;
        border: none;
        
    }
    .overlay{
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        overflow-y: hidden;
        opacity: 0.8;
        background-color: #0F0331;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
        z-index: 1;
    }
    .body-view-only{
        width: 90%;
    }

    /* ================ END MODALE ================= */
    /* ================ TABLEAUX ================= */
    /* ================ table ================= */
        table{
            width: 99%;
            table-layout: fixed; 
        }
        th{
            font-family: 'Outfit', sans-serif;
            font-size: 13px ;
            font-style: italic;
            font-weight:400;
            line-height: 16px;
            text-align: left;
            margin-left: 3px;
        }
        tr{
            max-height: 30px;
        }
        .td-5{
            width: 48px;
        }
        .td-10{
            width: 10%;
        }
        .td-20{
            width: 20%;
        }
        .td-30{
            width: 30%;
        }
        .td-40{
            width: 40%;
        }
        .td-50{
            width: 50%;
        }
        .td-60{
            width: 60%;
        }
        .td-70{
            width: 70%;
        }
        .td-80{
            width: 80%;
        }
        .td-90{
            width: 90%;
        }
        .td-100{
            width: 100%;
        }
        td{
            border: 2px solid #0F0331;
            background-color: #FFF;
            color: #0F0331;
            font-size: 16px;
            padding: 0 8px;
            height: 48px;
            vertical-align: middle;
            text-align: left;
            font-family: 'Outfit', sans-serif;
                font-size: 16px ;
                font-weight:400;
                line-height: 20px;

        }
        .action-link:hover,.action-doc:hover, .action-edit:hover, .action-view:hover, .action-delete:hover, a.material-symbols-outlined:hover, .td-edit:hover, .td-edit:hover .action-edit, .td-doc:hover, .td-doc:hover .action-doc, .td-view:hover, .td-view:hover .action-view, .td-delete:hover, .td-delete:hover .action-delete,  .td-link:hover, .td-link:hover .action-link, .td-archive:hover .action-archive, .td-archive:hover, .action-copy:hover,  .td-copy:hover, .result-buttons:hover, .activation-buttons:hover{
            background-color: #FFF ;
            color: #0F0331;
        }
        .td-link, .action-link, .action-link .material-symbols-outlined{
            background-color: #0047AB;
            color: #FFF;
            cursor : pointer;
            text-align: center;
            padding: 0;

        }
        .action-doc, .td-doc{
            background-color: #b5179e;
            color: #FFF;
            cursor : pointer;
            text-align: center;
            padding: 0;
        }

        .action-edit, .td-edit{
            background-color: #f5f3f4;
            cursor : pointer;
            font-size: 22px;
            text-align: center;
            padding: 0;
        }
        .action-copy, .td-copy, .action-view, .td-view{
            background-color: #ffba08;
            color: #0F0331;
            cursor : pointer;
            font-size: 22px;
            text-align: center;
            padding: 0;
            
        }
    
        .action-archive, .td-archive, .copied{
            background-color: #00e08a;
            color: #0F0331;
            cursor : pointer;
            text-align: center;
            padding: 0;
        }
        .action-delete, .td-delete{
            background-color: #dc2f02;
            color: #FFF;
            cursor : pointer;
            text-align: center;
            padding: 0;
        }
        .action-edit, .action-link, .action-view, .action-delete, .action-doc, .action-link .material-symbols-outlined, .action-copy, .action-archive{
                border: none!important;
        }

        .statut{
            cursor : pointer;
            border: none;
        }
       
    /* ================ END TABLEAUX ================= */
    /* ================ GENERAL LAYOUT  ==================== */
    .wrapper{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        
        grid-gap:0px;
        min-height: 100vh;
        padding: 0;
    }
    .paginate{
        width: 89%;
        padding: 20px;

    }
    .paginate nav{
        text-align: center;
        width: 90%;
    }
    .pagination{
        margin-left: 0px;
    }
    .pagination .page-item{
        display: inline-block;
        margin: 6px;
    }
    .page-link{
        color: #0F0331;
        font-size: 20px;
    }
    
    .active .page-link{
        color: #FE62AE;
        font-weight: 700;
    }
    /* ================ END GENERAL LAYOUT  ==================== */
    /* ================ LAYOUT CONNECTED ==================== */
        /* ================== MENU SPACE ================== */
        .space{
            grid-column: 1/2;
            background-color: #231251;
            height: 100vh;
            position: fixed;
        }
        .space-last-block{
            position: absolute;
            left: 4%;
            bottom: 0;
        }
        .spaces-bottom-buttons{
            margin-bottom:20px;
        }
        .spaces-bottom-buttons a{
            color: #FFF;
        }
        /* ================== END MENU SPACE ================== */
        /* ================== MENU TOOLS ================== */
        .tool{
            grid-column: 1;
            grid-row: 1;
            padding: 20px;
        }
        .tool-menu{
            margin: 20px 0px;
        }
        hr{
            height: 2px;
            background-color: #0047AB;
            border: none;
            border-radius: 2px;
        }
        .pages-block{
            margin-top: 20px;
            
        }
        
        .item-menu{
            margin: 14px 0px;
            color: #FFF;
            cursor: pointer;
            
        }
        .active{
            color: #ffba08!important;
        }
        .item-name{
            vertical-align: super;
            
        }
        
    
        .menu{
            padding: 10px 20px;
        }
        .menu-backward{
            font-size: 40px!important;
            color: #4cc9f0;
            transform: rotate(-90deg);
            transition: 0.5s;
        }
        .h1-name{
        color: #FFF;
        font-family: 'League Spartan', sans-serif;
        font-size: 50px ;
        font-stretch:ultra-condensed;
        font-weight:400;
        line-height: 40px;
        text-align: left;
        vertical-align: top;
        width: 86%;
        display: inline-block;
       
    }
        /* ================== END MENU TOOLS ================== */
    .connected-main-content, .connected-main-content-columns, .connected-main-content-full{
        margin-top: 90px;
        grid-column: 1;
        grid-row: 1;
        transition: 0.5s;
        background-color: #FFF;
        border-radius: 10px 10px 0px 0px;
        padding: 30px 10px;
        /* min-height: 100vh; */
    }
    .connected-main-content-column-1, .connected-main-content-column-2, .with-margin-top{
        margin-top: 30px;
    }

    .connected-side-bar{
        grid-column: 1;
        grid-row: 1;
        background-color: #F2F5FF; 
        color: #0F0331;
           
    }

    /* ================ END LAYOUT CONNECTED ==================== */
    /* ================ LAYOUT PUBLIC ==================== */
    .body-public{
        background-color: #0F0331;
                min-height: 100vh;
        align-content: end;
        width: 100%;
    }
    .mainContent-public-page{
        width: 89%;
        min-height: 100vh;
        margin: 0 auto;
        background-color: #FFF;
        position: relative;
        bottom: 0;
        margin-top: 10px;
        border-radius: 10px 10px 0px 0px;
        padding: 20px;
        padding-bottom: 30px;
    }
    .mainContent-public-form{
        width: 89%;
        min-height: 80vh;
        margin: 0 auto;
        background-color: #FFF;
        position: relative;
        bottom: 0;
        margin-top: 20px;
        border-radius: 10px 10px 0px 0px;
        padding: 20px;
        padding-bottom: 30px;
    }
    .mainContent-public-form h2{
        padding-top: 20px;
    }
    .h1-public-name, .h1-public-name span{
        color: #FFF;
        font-family: 'League Spartan', sans-serif;
        font-size: 50px ;
        width: 100%;
        font-weight:700;
        text-align: center;
        padding-top: 50px;
       
    }
    .h1-public-name span{
        color: #4cc9f0;
    }
    /* ================ END LAYOUT PUBLIC ==================== */
    /* =================== COMPOSANTS - TOOL - FRAMEWORK  =================== */
    /* ===COMPOSANT RESULT === */
        .result-block{
            min-width: 75%;
            padding: 20px 16px;
            margin: 30px;
            border-radius: 10px;
        }
        .result-buttons{
            width: 40px;
            height: 40px;
            display: inline-block;
            align-content: center;
            border: #0F0331 2px solid;
            margin: 10px;
        }
        .activation-buttons{
            width: 120px;
            height: 40px;
            display: inline-block;
            align-content: center;
            border: #0F0331 2px solid;
            margin: 10px;
        }
        .column-small{
        
            width: 100%;
        }
        .etiquette{
            margin: 10px 0px;
        }  
    /* =================== END COMPOSANTS - TOOL - FRAMEWORK  =================== */
     /* =================== COMPOSANTS - TOOL - knowledge  =================== */   
    .apercu-note {
        font-family: 'Outfit';
        display: -webkit-box;
        -webkit-line-clamp: 10; /* Le nombre de lignes exact que tu souhaites */
        line-clamp: 10;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-top: 20px;

    } 
    .cdx-block {
        max-width: 100% !important;
    }
    #editorjs {
        padding-left: 50px;
    }

    /* 2. Positionne les actions de la barre d'outils (bouton + et réglages) à gauche */
    .ce-toolbar__actions {
        right: auto !important;
        left: -60px !important; /* Ajustez cette valeur selon la marge souhaitée */
        /* top:3px; */
            /* align-items: baseline; */
    }
    .ce-settings {
        left: 0 !important;
        right: auto !important;
    }
    .search-container{
        margin-top: 20px;
        margin-left: 30px;
        width: 84%;
    }
    /* blocs -- visualisation
     */
    .cdx-alert-primary, .cdx-alert-secondary, .cdx-alert-info, .cdx-alert-warning, .cdx-alert-success, .cdx-alert-danger, .cdx-alert-light, .cdx-alert-dark{
        font-family: 'Outfit', sans-serif;
        border-radius: 5px;
        margin: 10px 0px;
        padding: 10px 5px;
        font-size: 16px;
    }
    b{
        font-weight: 700;
    }
    .ul-check-list{
        margin: 10px 0px 20px 0px;
    }
    li.check-list{
        list-style: none;
        display: flex;
        align-items: flex-start; /* Aligne verticalement au centre */
        gap: 8px; /* Espace entre la case et le texte */
    }
    .check-list, 
    .cdx-checklist__item {
        display: flex;
        align-items: flex-start; /* Aligne la checkbox avec la 1ère ligne de texte */
        gap: 0.5rem;             /* Espacement entre la checkbox et le texte */
    }

    /* La checkbox elle-même */
    .check-list input[type="checkbox"],
    .cdx-checklist__item-checkbox {
        flex-shrink: 0; /* 👈 Empêche la checkbox de réduire sa taille */
        width: 1.1em;   /* Taille fixe explicite */
        height: 1.1em;
        margin-top: 0.15em; /* Ajustement fin pour l'aligner parfaitement au texte */
    }
    li.check-list span{
        font-size: 16px ;
    }
    pre{
        margin: 20px 0px;
        font-family: 'Outfit', sans-serif;
        font-size: 16px;
    }
    .jseditor-table{
        margin:20px 0px;
    }
}

@media (min-width:392px){
    .modal-header h2{
        width: 88%;
    }
    .body-public{
        width: 100%;
        /* padding: 0px 20px; */
    }
    .mainContent-public-form{
        min-height: fit-content;
        
    }
}
@media (min-width:600px) {
    .tab-only{
        display: block;
    }
    h1{
        font-family: 'League Spartan', sans-serif;
        color: initial;
        font-size: 48px ;
        font-stretch: ultra-condensed;
        font-weight:800;
    }
    h2{
        font-family: 'League Spartan', sans-serif;
        color: initial;
        font-size: 40px ;
        font-stretch:ultra-condensed;
        font-weight:700;
    }
    h3{
        font-family: 'League Spartan', sans-serif;
        color: initial;
        font-size: 36px ;
        font-stretch:ultra-condensed;
        font-weight:600;
    }
    p,ol, ul, li, .full, .half{
        font-family: 'Outfit', sans-serif;
        font-size: 16px ;
        font-weight:400;
        
    }
    a{
        font-family: 'Outfit', sans-serif;
        font-size: 16px ;
        text-decoration: none;
        font-weight:500;
    }
    .modal{
        /* height: 0vh; */
        display: none;
        height: 95vh;
        width: 70%;
        min-width: 0%;
        border-radius: 10px 0px 0px 0px;
        left: auto;
        /* right: -40px; */
        right: 0;
        overflow-y: scroll;
    }
    
    .modal-header h2{
        line-height: 40px;
        width: 90%;
    }
    
    /* ===COMPOSANT RESULT === */
    .result-buttons{
        display: block; 
    }
    .small-buttons .column-big{
        width: 91%;
        padding-right: 1%;
        display: inline-block;
        vertical-align: top ;
    }
    .small-buttons .column-small{
        width: 7%;
        display: inline-block;
    }
    .column-big{
        width: 84%;
        padding-right: 4%;
        display: inline-block;
        vertical-align: top ;
    }
    .column-small{
       
        width: 10%;
        display: inline-block;
    }
    /* ===== mainContent-public-form ===== */
    .mainContent-public-form{
        width: 70%;
        /* min-height: 86vh; */
    }
    /* blocs - wysiyg view */
    .cdx-alert-primary, .cdx-alert-secondary, .cdx-alert-info, .cdx-alert-warning, .cdx-alert-success, .cdx-alert-danger, .cdx-alert-light, .cdx-alert-dark{
        font-size: 16px;
    }    
}
@media (min-width: 651px) {
    .ce-block__content, .ce-toolbar__content {
    max-width: calc(100% - 120px) !important;
    margin: 0 60px;
    }
}

    
    
@media (min-width:768px) {
    .mainContent-public-form{
        width: 90%;
        /* min-height: 65vh; */
    }
    
    
}
@media (min-width:800px) {
    .modal{  
        width: 60%; 
    }

    .modal-fullpage{
        width: 80%; 
        border-radius: 10px 0px 0px 0px ;
        padding: 70px;
    }
    .mainContent-public-form{
        width: 80%;
        /* min-height: 86vh; */
    }
    
    
}
@media (min-width:820px) {
    .body-public{
        width: 100%;
    }
    
    
    
}
@media (min-width:1024px) {
    .mob-hidden{
        display: revert;
    }
    .tab-hidden, .desktop-hidden{
        display: none;
    }
    
    
    select{
        width: 100%;
    }
    .first-half{
        margin-right: 11%;
    }
    .field-half{
        width: 41%;
        display: inline-block;
        vertical-align: bottom;
    }
    .half{
        width: 100%;
    }      
    .menu{
        padding: 10px 30px;
    } 
    .h1-public-name{
        width: 100%;
    }
    .mainContent .h1-name{
        width: 94%;
    }
    .small-menu{
        display: none;
    }
    .paginate{
        width: 95%;
    }
    .modal-header h2{
        width: 93%;
    }
    
    
   
}
@media (min-width:1279px) {
    h2{
        line-height: 40px;
    }
    .tab-only{
        display: none;
    }
    .body-public{
        align-content: start;
    }
    .mainContent-public-form{
        border-radius: 10px;
    }
    .mainContent.h1-name{
        width: 80%;
    }
    .modal{  
        width: 41%; 
       
    }
    .modal-header h2{
        width: 92%;
    }
    
    .wrapper{
        grid-template-columns: repeat(28, 1fr);
        grid-row: 2;
        padding: 0;
    }

    .space{
        grid-column: 1/2;
        background-color: #231251;
        height: 100vh;
        position: fixed;
    }
    .tool{
        position: fixed;
        margin-top: 10px;
        grid-column: 2/6;
        grid-row: 1;
        left: 4%;
        width: 13%;
        padding: 5px;
        
    }
    .last-block{
        position: fixed;
        grid-column: 2/6;
        grid-row: 2;
        left: 4%;
        bottom: 0;
    }
    .connected-main-content{
        margin-top: 10px;
        grid-column: 1/20;
        grid-row: 1/2;
        border-radius: 10px 0px 0px 0px;
        background-color: #FFF;
        padding: 20px 30px;
        color: #0F0331;
        
    }
    .connected-main-content-full{
        margin-top: 10px;
        grid-column: 6/29;
        grid-row: 1/2;
        border-radius: 10px 0px 0px 0px;
        background-color: #FFF;
        padding: 20px 30px;
        
    }
    .connected-side-bar{
        width: 25%;
        margin-top: 20px;
        padding: 20px;
        grid-column: 20/29;
        grid-row: 1;
        border-top: solid #0F0331 2px;
        border-left: solid #0F0331 2px;
        border-radius: 10px 0px 0px 0px;
        position: fixed;
        bottom: 0;
        right: 0;
        min-height: 93vh;    
    }
    .connected-main-content-columns{
        grid-column: 6/29;
        margin-top: 15px;
        border-radius: 10px 0px 0px 0px;
        display: grid;
        grid-template-rows: repeat(2, 0.25fr);
        grid-template-columns: repeat(28, 1fr);
        padding: 0;
        background-color: #FFF;
        color: #0F0331;
    }
    .connected-main-content-columns h1{
        grid-column: 1/29;
        color: #0F0331;
        grid-row-start: 1;
        grid-row-end: 2;
        padding: 20px 0px;
    }
    .connected-main-content-column-1{
        margin-top: 10px;
        grid-column: 1/14;
        grid-row-start: 2;
        grid-row-end: 3;
        border-radius: 10px 0px 0px 0px;
        padding: 20px 30px;
        color: #0F0331;
        
    }
    .connected-main-content-column-2{
        margin-top: 10px;
        grid-column: 15/29;
        grid-row-start: 2;
        grid-row-end: 3;
        border-radius: 10px 0px 0px 0px;
        background-color: #FFF;
        color: #0F0331;
        padding: 20px 30px;
    }
    .with-margin-top{
        margin-top: 50px;
    }
    
    /* Menu */
    .space-name{
        background-color: initial;
        border:none;
        color: #FFF;
        font-size: 12px;
        text-align: center;
        width: 100%;
        cursor: pointer;
    }
    .space{
        width: 60px;
        background-color: #231251;
        height: 100vh;
    }
    .space-div{
        margin: auto;
        width: 50px;
        margin-top: 20px;
    }
    .space-square{
        width: 50px;
        height: 50px;
        border-radius: 5px;
        display: flex;
        align-items: center;      /* Centre verticalement */
        justify-content: center;  /* Centre horizontalement */
        text-align: center;       /* Aligne le texte sur plusieurs lignes si besoin */
        font-size: 12px;
        margin-bottom: 10px;
    }
    .space-square-icon{
        text-align: center;
        width: 60px;
        color: #FFF;
    }

     .inline{
        display: inline-block;
        vertical-align: top;
    }
    .menu{
        margin: 20px 0px;
        padding:0px 5px;
        width: 75%;
        
    }
    .menu-backward{
        transform: rotate(0deg);
    }
    .mainContent-public-form{
        width: 50%;
        /* min-height: 86vh; */
        padding:30px 60px;
    }
    .search-container{
        width: 95%;
    }
    
    
}
@media (min-width:1365px){
    .tab-hidden{
        display: revert;
    }
    .column-big{
        width: 82%;
        
    }
    /* =======structure page ======= */

    .menu{
        width: 67%;
    }
   /* .connected-side-bar{
    grid-column: 10 / 13;
   } */

    /* .connected-side-bar>div{
        margin: 0 auto;
    } */
    .field-half, .field-full{
        margin-bottom: 10px;
    }
    
    
    hr{
        height: 2px;
        background-color: #0047AB;
        border: none;
        border-radius: 2px;
    }
    .pages-block{
        margin-top: 20px;
        
    }
    
    .item-menu{
        
        color: #FFF;
        cursor: pointer;
        
    }
    .active{
        color: #ffba08!important;
    }
    .item-name{
        vertical-align: super;
        
    }
    
    .tool-menu{
        margin-top: 20px;
    }
    /* === Composant result === */
    .result-block{
        width: 90%;
        min-width: 62%;
    }
    .paginate{
        width: 100%;
    }
    .mainContent-public-form{
        width: 50%;
        /* min-height: 86vh; */
        /* padding:80px; */
    }
    
    
    

}
@media (min-width:1439px){
    /* =======structure page ======= */

    .mainContent.h1-name{
        width: 73%;
    }
    /* .tool{
        grid-column: 1/4;
        grid-row: 1;
        height: 100vh;
        width: 25%;
    }
    .connected-main-content{
        grid-column: 4/13;
        grid-row: 1;
        
        
    }
    .connected-side-bar{
        grid-column: 10/13;
        grid-row: 1;
    } */
    /* menu */
    .menu{
        padding:0px 5px;
        width: 69%;
    }
    .menu-backward{
        left: 60px;
    }
     /* === Composant result === */
    .result-block{
        width: 90%;
        min-width: 52%;
    }
    .space{
        width: 50px;
    }
    .space-div{
        width: 50px;
    }
    .space-square{
        width: 40px;
        height: 40px;
        margin: 0 auto;
        margin-bottom: 10px;
    }
    .tool{
        grid-column: 2/7;
        width: 16%;
    }
    .connected-main-content-full{
        grid-column: 7/29;
    }

    
   
}
@media (min-width:1500px){
    
    /* menu */
    .menu{
        padding:0px 5px;
        width: 76%;
    }
    .menu-backward{
        left: 140px;
    }
    /* === Composant result === */
    .result-block{
        padding: 20px 30px;
        
    }
    .modal{
        width: 30%;
    }
    .modal-fullpage{
        min-width: 50%;
        width: 50%;
    }
    .space{
        width: 60px;
    }
    .space-div{
        width: 60px;
    }
    .space-square{
        width: 50px;
        height: 50px;

    }
    .tool{
        grid-column: 2/6;
        width: 13%;
    }
    .connected-main-content-full{
        grid-column: 6/29;
    }
   
    
}
@media (min-width:1727px){
    .result-block{
        width: 89%;
    }
}
@media (min-width:1920px){
    
    .mainContent.h1-name{
        width: 81%;
    }
    .mainContent-public-form{
        width: 30%;

    }
    
}