/*======================================================
MOBILE.CSS
CJJD Responsive
======================================================*/

@media screen and (max-width:768px){

    /* ==========================
       RESET
    ========================== */

    *{
        box-sizing:border-box;
    }

    html{
        overflow-x:hidden;
        scroll-behavior:smooth;
    }

    body{

        margin:0;

        overflow-x:hidden;

        font-size:16px;

        line-height:1.6;

        -webkit-text-size-adjust:100%;

    }

    img{

        max-width:100%;

        height:auto;

        display:block;

    }

}
/*======================================================
HEADER
======================================================*/

@media screen and (max-width:768px){

    #header{

        width:100%;

        padding:16px;

    }

    #header .container{

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:center;

        gap:18px;

        text-align:center;

    }

    /* Logo */

    #header .logo{

        margin:0;

    }

    #header .logo img{

        width:80px;

        height:auto;

    }

    /* Identité */

    #header .identity{

        margin:0;

    }

    #header .identity h1{

        margin:0;

        font-size:1.75rem;

        line-height:1.25;

    }

    #header .identity p{

        margin-top:8px;

        font-size:1rem;

    }

    /* Recherche */

    #header .search-box{

        width:100%;

        max-width:480px;

        display:flex;

    }

    #header .search-box input{

        flex:1;

        min-width:0;

    }

    /* Réseaux sociaux */

    #header .social{

        display:flex;

        justify-content:center;

        gap:18px;

    }

}
/*======================================================
MENU TOGGLE
======================================================*/

@media screen and (max-width:768px){

    #menuToggle{

        display:flex;

        align-items:center;

        justify-content:center;

        width:52px;

        height:52px;

        margin:15px auto;

        background:#0b2e63;

        border:none;

        border-radius:10px;

        cursor:pointer;

    }

    #menuToggle svg{

        width:28px;

        height:28px;

    }

}
/*======================================================
HAMBURGER
======================================================*/

@media screen and (max-width:768px){

    .menu-toggle{

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:6px;

        width:54px;

        height:54px;

        margin:20px auto;

        padding:0;

        border:none;

        border-radius:10px;

        background:#0b2e63;

        cursor:pointer;

        transition:.25s;

    }

    .menu-toggle span{

        display:block;

        width:28px;

        height:3px;

        border-radius:2px;

        background:#fff;

        transition:.30s;

    }

    /* Animation */

    .menu-toggle.active span:nth-child(1){

        transform:translateY(9px) rotate(45deg);

    }

    .menu-toggle.active span:nth-child(2){

        opacity:0;

    }

    .menu-toggle.active span:nth-child(3){

        transform:translateY(-9px) rotate(-45deg);

    }

}
/*======================================================
MENU MOBILE
======================================================*/

@media screen and (max-width:768px){

    #mainNav{

        display:none;

        width:100%;

        margin-top:8px;

        background:#ffffff;

        border-radius:10px;

        box-shadow:0 6px 20px rgba(0,0,0,.08);

    }

    #mainNav.open{

        display:block;

    }

}
@media screen and (max-width:768px){

    #mainNav ul{

        margin:0;

        padding:0;

        list-style:none;

    }

    #mainNav li{

        margin:0;

        padding:0;

    }

    #mainNav li>a{

        display:flex;

        justify-content:space-between;

        align-items:center;

        min-height:52px;

        padding:0 18px;

        background:#ffffff;

        color:#163d7a;

        text-decoration:none;

        font-weight:600;

        border-bottom:1px solid #ececec;

        transition:.25s;

    }

    #mainNav li>a:hover{

        background:#f5f7fb;

    }

}
.arrow{

    margin-left:auto;

    font-size:18px;

    transition:.25s;

}

.has-mega.open>.arrow,
.has-mega.open>a>.arrow{

    transform:rotate(90deg);

}
/*======================================================
SOUS-MENUS MOBILE
======================================================*/

@media screen and (max-width:768px){

    .mega-menu{

        display:none;

        width:100%;

        margin:0;

        padding:0;

        background:#f8f9fb;

        border-left:4px solid #0b2e63;

    }

    .has-mega.open>.mega-menu{

        display:block;

    }

    .mega-column{

        width:100%;

        margin:0;

        padding:0;

    }

    .mega-column h4{

        display:none;

    }

    .mega-column a{

        display:flex;

        align-items:center;

        min-height:46px;

        padding:0 25px;

        color:#163d7a;

        background:#f8f9fb;

        text-decoration:none;

        border-bottom:1px solid #e7e7e7;

        font-size:.95rem;

    }

    .mega-column a:hover{

        background:#eef4fb;

    }

}
/*======================================================
ACCES RAPIDES
======================================================*/

@media screen and (max-width:768px){

    .portal-grid{

        display:grid;

        grid-template-columns:repeat(2,1fr);

        gap:14px;

        padding:15px;

    }

    .portal-card{

        min-height:120px;

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        text-align:center;

        padding:15px;

        border-radius:14px;

        background:#fff;

        box-shadow:0 4px 15px rgba(0,0,0,.08);

        transition:.25s;

    }

    .portal-card i{

        font-size:30px;

        margin-bottom:12px;

        color:#c8a12a;

    }

    .portal-card h3{

        font-size:15px;

        margin:0;

        line-height:1.3;

    }

}
/*======================================================
TICKER
======================================================*/

@media screen and (max-width:768px){

    #news-ticker{

        padding:0;

        margin:0;

    }

    .ticker-wrapper{

        min-height:46px;

        display:flex;

        align-items:center;

    }

    .ticker-label{

        flex:0 0 120px;

        font-size:14px;

    }

    .ticker-content{

        font-size:14px;

    }

}
/*======================================================
GRILLES
======================================================*/

@media screen and (max-width:768px){

    .cards,
    .news-grid,
    .publication-grid,
    .platform-grid,
    .coverage-container,
    .identity-grid,
    .library-grid,
    .video-grid,
    .partner-grid,
    .members-grid,
    .org-grid,
    .footer-container,
    .pre-footer-container{

        display:grid;

        grid-template-columns:1fr;

        gap:20px;

    }

}