/*======================================================
SITE-RESPONSIVE.CSS
Couche d'adaptation finale : téléphone, tablette, ordinateur,
grands écrans. À charger APRES style.css et responsive.css.
Ce fichier complète les feuilles existantes sans les modifier.
======================================================*/

/*======================================================
1. BASES COMMUNES
======================================================*/

html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    scroll-padding-top:16px;
}

body{
    min-height:100vh;
    min-height:100dvh;
    overflow-wrap:break-word;
    -webkit-tap-highlight-color:rgba(11,46,99,.12);
}

img,video,canvas,svg,iframe{
    max-width:100%;
}

img{
    height:auto;
}

/* Les tableaux défilent au lieu de déborder */
table{
    max-width:100%;
}

@media (max-width:760px){
    table{
        display:block;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
}

/* Focus visible au clavier */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
    outline:3px solid #d4af37;
    outline-offset:2px;
}

/* Encoches (iPhone) : le contenu ne passe jamais dessous */
@supports (padding:max(0px)){
    body{
        padding-left:env(safe-area-inset-left);
        padding-right:env(safe-area-inset-right);
    }
}

/* Écrans tactiles : cibles assez grandes, pas de zoom automatique dans les champs */
@media (pointer:coarse){

    input:not([type=checkbox]):not([type=radio]),
    select,
    textarea{
        font-size:16px;
    }

    button,
    .btn,
    [role=button],
    input[type=submit],
    input[type=button]{
        min-height:44px;
    }

}

/*======================================================
2. EN-TETE ET MENU  (téléphone + tablette : jusqu'à 1024 px)
======================================================*/

@media (max-width:1024px){

    /* l'en-tête défile avec la page : le bouton flottant prend le relais */
    header,
    #header{
        position:relative;
        top:auto;
    }

    #header{
        display:grid;
        grid-template-columns:auto minmax(0,1fr) auto;
        grid-template-areas:
            "logo identity toggle"
            "search search search"
            "ticker ticker ticker"
            "quick quick quick";
        align-items:center;
        gap:8px 12px;
        padding:10px 14px 0;
        width:100%;
    }

    #header .container{
        display:contents;
    }

    #header .logo{
        grid-area:logo;
        margin:0;
    }

    #header .container{
        width:auto !important;
        max-width:none !important;
        padding:0 !important;
    }

    #header .logo img{
        width:52px;
        height:52px;
        object-fit:contain;
    }

    #header .identity{
        grid-area:identity;
        margin:0;
        min-width:0;
        text-align:left;
    }

    #header .identity h1{
        font-size:clamp(.95rem,3.6vw,1.35rem) !important;
        line-height:1.2 !important;
        margin:0;
    }

    #header .identity p{
        margin:2px 0 0;
        font-size:clamp(.75rem,2.6vw,.95rem);
        line-height:1.3;
    }

    #header .search-box{
        grid-area:search;
        width:100%;
        max-width:none;
        margin:0;
        min-width:0;
        display:flex;
    }

    #header .search-box input{
        flex:1;
        min-width:0;
        width:100%;
        padding:10px 14px;
        font-size:16px;
    }

    #header .search-box{
        height:48px;
        border-radius:14px;
        overflow:hidden;
    }

    #header .search-box input{
        height:48px;
        padding-top:0;
        padding-bottom:0;
    }

    #header .search-box button{
        flex:0 0 52px;
        width:52px;
        min-width:52px;
        height:48px;
        min-height:48px;
        padding:0;
    }

    /* les liens Facebook / YouTube restent disponibles dans le pied de page */
    #header .social{
        display:none;
    }

    /* bouton hamburger */
    #menuToggle{
        grid-area:toggle;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        width:48px;
        height:48px;
        margin:0;
        padding:0;
        border:0;
        border-radius:12px;
        background:#0b2e63;
        cursor:pointer;
    }

    #menuToggle span{
        display:block;
        width:24px;
        height:3px;
        border-radius:2px;
        background:#fff;
        transition:transform .25s,opacity .25s;
    }

    #menuToggle.active span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
    #menuToggle.active span:nth-child(2){ opacity:0; }
    #menuToggle.active span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

    #header #news-ticker{
        grid-area:ticker;
        margin:0 -14px;
        width:calc(100% + 28px);
    }

    #header #quick-access-zone,
    #header > #quick-access{
        grid-area:quick;
        margin:0 -14px;
        width:calc(100% + 28px);
    }

    #header > #quick-access{
        padding:12px 14px;
        box-sizing:border-box;
    }

    /* menu : panneau plein écran */
    #mainNav{
        display:none;
        position:fixed;
        inset:0;
        z-index:1500;
        margin:0;
        padding:76px 0 32px;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
        background:#0b2e63;
        border-radius:0;
        box-shadow:none;
    }

    #mainNav.open{
        display:block;
    }

    #mainNav > ul{
        display:block;
        width:min(640px,100%);
        margin:0 auto;
        padding:0 12px;
        list-style:none;
    }

    #mainNav > ul > li{
        position:static;
        border-bottom:1px solid rgba(255,255,255,.12);
    }

    #mainNav > ul > li > a{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        min-height:54px;
        padding:0 14px;
        background:transparent;
        color:#fff;
        font-size:1.05rem;
        font-weight:700;
    }

    #mainNav > ul > li > a:hover,
    #mainNav > ul > li.open > a{
        background:rgba(255,255,255,.08);
        color:#fff;
    }

    #mainNav .arrow{
        margin-left:auto;
        display:inline-block;
        transition:transform .25s;
    }

    #mainNav .has-mega.open > a .arrow{
        transform:rotate(90deg);
    }

    #mainNav .has-mega > a::after{
        content:none;
    }

    /* sous-menus : accordéon */
    #mainNav .mega-menu{
        display:none;
        position:static;
        transform:none;
        opacity:1;
        visibility:visible;
        width:100%;
        gap:0;
        padding:4px 0 10px;
        border-radius:12px;
        background:#fff;
        box-shadow:none;
        flex-direction:column;
    }

    #mainNav .has-mega.open > .mega-menu{
        display:flex;
    }

    #mainNav .mega-column{
        width:100%;
        padding:6px 0;
    }

    #mainNav .mega-column h4{
        display:block;
        margin:6px 18px 4px;
        padding:0 0 6px;
        font-size:.8rem;
        letter-spacing:.06em;
        text-transform:uppercase;
        color:#0b2e63;
        border-bottom:2px solid #d4af37;
    }

    #mainNav .mega-column a{
        display:flex;
        align-items:center;
        gap:10px;
        min-height:46px;
        padding:0 22px;
        color:#26364f;
        background:transparent;
        font-size:.98rem;
        border-bottom:1px solid #eef1f6;
    }

    #mainNav .mega-column a:hover,
    #mainNav .mega-column a:active{
        background:#eef4fb;
        padding-left:22px;
        color:#0b2e63;
    }

    /* pas de défilement derrière le menu ouvert */
    html.menu-open,
    html.menu-open body{
        overflow:hidden;
    }

}

/* bouton menu flottant (créé par site-nav.js) */
.nav-fab{
    display:none;
    position:fixed;
    top:max(12px,env(safe-area-inset-top));
    right:max(12px,env(safe-area-inset-right));
    z-index:1600;
    width:52px;
    height:52px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#0b2e63;
    box-shadow:0 8px 22px rgba(0,0,0,.28);
    cursor:pointer;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
}

.nav-fab span{
    display:block;
    width:22px;
    height:3px;
    border-radius:2px;
    background:#fff;
    transition:transform .25s,opacity .25s;
}

.nav-fab.active span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-fab.active span:nth-child(2){ opacity:0; }
.nav-fab.active span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

@media (max-width:1024px){
    .nav-fab.show{
        display:flex;
    }
}

/* très petits téléphones */
@media (max-width:360px){
    #header .identity p{
        display:none;
    }
}

/*======================================================
3. ORDINATEUR : sous-menus qui ne sortent jamais de l'écran
======================================================*/

@media (min-width:1025px){

    #mainNav > ul{
        flex-wrap:wrap;
    }

    #mainNav > ul > li:nth-last-child(-n+2) .mega-menu{
        left:auto;
        right:0;
        transform:translateY(20px);
    }

    #mainNav > ul > li:nth-last-child(-n+2):hover .mega-menu,
    #mainNav > ul > li:nth-last-child(-n+2).open .mega-menu{
        transform:translateY(0);
    }

    /* écrans tactiles larges (tablette paysage) : ouverture au toucher */
    #mainNav .has-mega.open .mega-menu{
        opacity:1;
        visibility:visible;
    }

}

@media (min-width:1025px) and (max-width:1200px){
    #mainNav > ul > li > a{
        padding:18px 16px;
    }
}

/* Les sous-menus peuvent être plus étroits que 650 px */
@media (min-width:1025px) and (max-width:1250px){
    .mega-menu{
        width:min(650px,90vw);
    }
}

/*======================================================
4. PIED DE PAGE
======================================================*/

@media (max-width:1024px){

    #footer .footer-container,
    footer .footer-container{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:28px;
        padding-left:20px;
        padding-right:20px;
    }

}

@media (max-width:640px){

    #footer .footer-container,
    footer .footer-container{
        grid-template-columns:1fr;
        gap:24px;
        text-align:left;
    }

    .footer-bottom{
        padding:16px;
        font-size:.85rem;
        text-align:center;
    }

}

/*======================================================
5. GRANDS ECRANS
======================================================*/

@media (min-width:1700px){
    html{ font-size:112.5%; }
}

@media (min-width:2300px){
    html{ font-size:130%; }
}

/*======================================================
6. MOUVEMENT REDUIT
======================================================*/

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}

/*======================================================
7. IMPRESSION
======================================================*/

@media print{
    header,#header,#mainNav,.nav-fab,.back-to-top,#backToTop{
        display:none !important;
    }
}

/*======================================================
8. CORRECTIONS PAR PAGE
======================================================*/

/* RJJD : menu de la revue sur téléphone et tablette */
@media (max-width:1024px){

    header.navbar .navbar-container{
        gap:12px;
    }

    header.navbar .logo{
        min-width:0;
        gap:12px;
    }

    header.navbar .logo-text{
        min-width:0;
    }

    header.navbar .logo-subtitle{
        display:block;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        max-width:46vw;
    }

    header.navbar .menu-button{
        display:flex;
        flex:0 0 auto;
        cursor:pointer;
    }

    header.navbar .navigation{
        display:none;
        position:fixed;
        inset:0;
        z-index:10001;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:92px 22px 32px;
        overflow-y:auto;
        background:#0b1e3d;
    }

    header.navbar .navigation.open{
        display:flex;
    }

    header.navbar .navigation a{
        padding:16px 8px;
        font-size:1.05rem;
        border-bottom:1px solid rgba(255,255,255,.14);
    }

    header.navbar .navigation a::after{
        display:none;
    }

    header.navbar .navbar-actions{
        position:relative;
        z-index:10002;
        gap:10px;
    }

}

@media (min-width:1025px){
    header.navbar .menu-button{
        display:none;
    }
}

@media (max-width:480px){
    header.navbar .logo-icon{
        width:46px;
        height:46px;
    }
}

/* Pages à deux colonnes qui passent sur une seule colonne */
@media (max-width:900px){

    .showroom{
        grid-template-columns:minmax(0,1fr) !important;
    }

    .presentation{
        grid-template-columns:minmax(0,1fr) !important;
    }

    .presentation-right::before{
        width:min(500px,100%);
        height:auto;
        aspect-ratio:1;
    }

    .presentation-right img{
        width:min(100%,560px);
    }

}

@media (max-width:768px){

    .applicationContainer,
    .uploadGrid{
        grid-template-columns:minmax(0,1fr) !important;
    }

    .applicationSidebar,
    .applicationWizard,
    label.uploadCard{
        width:100% !important;
        max-width:100% !important;
        min-width:0;
        box-sizing:border-box;
    }

}

/* Filet de sécurité : jamais de défilement horizontal de la page */
@media (max-width:1024px){
    html,
    body{
        overflow-x:clip;
    }
}

/* RJJD : la page n'avait aucune adaptation aux petits écrans */
@media (max-width:1024px){

    .hero-container{
        grid-template-columns:minmax(0,1fr) !important;
        gap:48px !important;
    }

    .hero-content{
        text-align:center;
    }

    .hero-buttons{
        justify-content:center;
    }

    .journal-cover{
        width:min(350px,78vw);
    }

    .statistics-container{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:18px !important;
    }

    .section-header{
        margin-bottom:44px;
    }

}

@media (max-width:760px){

    .articles-grid{
        grid-template-columns:minmax(0,1fr) !important;
        gap:22px !important;
    }

    .hero h1{
        font-size:clamp(2rem,9vw,3rem) !important;
        overflow-wrap:anywhere;
    }

    .hero-container,
    .issue-container,
    .statistics-container{
        width:calc(100% - 32px) !important;
    }

    .hero-buttons .btn{
        width:100%;
        justify-content:center;
    }

}

@media (max-width:340px){
    .statistics-container{
        grid-template-columns:minmax(0,1fr) !important;
    }
}

/*======================================================
9. BOUTONS PRÉCÉDENT / SUIVANT (site-shell.js)
======================================================*/

.page-flow{
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    gap:12px;
    width:min(1100px,calc(100% - 32px));
    margin:40px auto;
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
    position:relative;
    z-index:5;
}

.page-flow .flow-btn{
    display:flex;
    align-items:center;
    gap:14px;
    flex:1 1 0;
    min-width:0;
    max-width:calc(50% - 60px);
    min-height:64px;
    padding:12px 18px;
    border-radius:16px;
    background:#0b2e63;
    color:#fff;
    text-decoration:none;
    box-shadow:0 8px 22px rgba(11,46,99,.22);
    transition:transform .2s,box-shadow .2s,background .2s;
}

.page-flow .flow-btn:hover,
.page-flow .flow-btn:focus-visible{
    background:#184a9c;
    transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(11,46,99,.3);
}

.page-flow .flow-next{
    justify-content:flex-end;
    text-align:right;
    margin-left:auto;
}

.page-flow .flow-text{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.page-flow .flow-text small{
    font-size:.72rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#d4af37;
}

.page-flow .flow-text strong{
    font-size:1rem;
    line-height:1.25;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.page-flow .flow-arrow{
    font-size:1.5rem;
    line-height:1;
    flex:0 0 auto;
}

.page-flow .flow-home{
    flex:0 0 auto;
    align-self:center;
    padding:10px 18px;
    border-radius:999px;
    border:2px solid #0b2e63;
    background:#fff;
    color:#0b2e63;
    font-weight:700;
    text-decoration:none;
    white-space:nowrap;
}

.page-flow .flow-home:hover{
    background:#0b2e63;
    color:#fff;
}

.page-flow .flow-spacer{
    flex:1 1 0;
}

@media (max-width:640px){

    .page-flow{
        flex-wrap:wrap;
        margin:28px auto;
    }

    .page-flow .flow-btn{
        max-width:none;
        flex:1 1 100%;
        min-height:60px;
    }

    .page-flow .flow-next{
        order:1;
    }

    .page-flow .flow-prev{
        order:2;
    }

    .page-flow .flow-home{
        order:3;
        flex:1 1 100%;
        text-align:center;
    }

    .page-flow .flow-spacer{
        display:none;
    }

}

/* pages de texte (mentions légales, confidentialité, recherche, quiz) */
.legal-text{
    width:min(860px,calc(100% - 32px));
    margin:0 auto;
    padding:28px clamp(18px,4vw,40px);
    border-radius:20px;
    background:#fff;
    box-shadow:0 8px 30px rgba(0,0,0,.08);
    line-height:1.7;
    color:#263238;
}

.legal-text h3{
    margin:28px 0 8px;
    color:#0b2e63;
}

.legal-text ul{
    margin:8px 0 8px 22px;
    list-style:disc;
}

.coming-soon{
    text-align:center;
    padding:12px 0;
}

.coming-soon > i{
    font-size:3rem;
    color:#d4af37;
}

.coming-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    margin-top:22px;
}

.btn-flow{
    display:inline-flex;
    align-items:center;
    min-height:46px;
    padding:0 20px;
    border-radius:999px;
    background:#0b2e63;
    color:#fff;
    font-weight:700;
    text-decoration:none;
}

.search-page-form{
    display:flex;
    gap:10px;
    margin-bottom:22px;
}

.search-page-form input{
    flex:1;
    min-width:0;
    height:50px;
    padding:0 16px;
    border:2px solid #d9e1ee;
    border-radius:14px;
    font-size:16px;
}

.search-page-form button{
    height:50px;
    padding:0 22px;
    border:0;
    border-radius:14px;
    background:#0b2e63;
    color:#fff;
    font-weight:700;
    cursor:pointer;
}

.search-results{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.search-item{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:14px 16px;
    border:1px solid #e3e9f3;
    border-radius:14px;
    background:#fff;
    color:#263238;
    text-decoration:none;
}

.search-item:hover{
    border-color:#184a9c;
    background:#f3f7fd;
}

.search-item small{
    color:#5b6b7f;
}

.search-type{
    align-self:flex-start;
    padding:2px 10px;
    border-radius:999px;
    background:#fbf3d4;
    color:#6b5200;
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.search-empty{
    color:#5b6b7f;
}

@media print{
    .page-flow{
        display:none !important;
    }
}