/* =========================
   MEDIA QUERIES RESPONSIVE 2025
   ========================= */



:root {
    --background-primary-color: rgba(190, 190, 190);
    --background-op-primary-color: rgba(190, 190, 190, 0.75);
    --background-secondary-color: rgba(248, 185, 148);
    --background-op-secondary-color: rgba(248, 185, 148, 0.5);
}

/* =========================
   MOBILE FIRST - BASE STYLES
   ========================= */

/* Variables pour les breakpoints */
:root {
    --mobile-max: 480px;
    --tablet-min: 481px;
    --tablet-max: 1025px;
    --desktop-min: 1026px;
}

/* =========================
   SMARTPHONE et TABLETTES : max-width 1025
   ========================= */
@media screen and (max-width: 1025px) {

    /* === GRILLES CSS GRID === */
    .grid-container
    {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
        padding: 1rem;
    }

    

    .grid-cell {
        width: 100%;
    }

    /* === TEXTES - ADAPTATION FONT-SIZE === */
    html {
        font-size: 14px;
        /* Base réduite pour mobile */
    }

    h1 {
        font-size: 1.8em;
        /* Au lieu de 2.5em desktop */
    }

    h2 {
        font-size: 3em;
        /* Au lieu de 2em desktop */
    }

    h3 {
        font-size: 1.3em;
        /* Au lieu de 1.5em desktop */
    }

    p {
        font-size: 1em;
        line-height: 1.4;
    }

    /* === IMAGES EN COLONNE MOBILE === */

    /* Désactivation du bouton fullscreen et du modal sur mobile */
    .fullscreen-btn {
        display: none !important;
    }
    #fullscreen-modal {
        display: none !important;
    }

    .slideshow-container {
        margin: 1rem 0;
        overflow: visible;
        cursor: default;
        border: none;
        width:90vw;
        margin: 0 auto;
        background: none;
    }

    .slide-track {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        transition: none;
        gap: 1rem;
    }

    .slide-item {
        flex: none;
        width: 100%;
        height: auto;
        position: relative;
    }

    .slide-img {
        width: 100%;
        height: auto;
        object-fit: contain;
        background: #f5f5f5;
        border: 2px solid black;
        border-radius: 5vw;
    }

    /* Bouton fullscreen adapté */
    .fullscreen-btn {
        position: absolute;
        bottom: 0.5rem;
        right: 0.5rem;
        width: 32px;
        height: 32px;
        padding: 4px;
    }

    /* === HEADER MOBILE === */
    .header-index,
    .header-grid {
        grid-template-columns: 1fr;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 100%;
        padding: 0;
        margin-top: 4rem;
    }

    .header-grid {
        gap: 0.5rem;
    }


    /* Menu burger */
    .burger {
        display: block !important;
        position: fixed;
        top: 3rem;
        left: 1rem;
        z-index: 5000;
        width: 32px;
        height: 32px;
        cursor: pointer;
        border-radius: 4px;
        padding: 6px;
    }

    .burger span {
        display: block;
        position: relative;
        width: 20px;
        height: 2px;
        background: #000;
        margin: 4px 0;
        transition: 0.3s;
    }

    .burger.active span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .burger.active span:nth-child(2) {
        opacity: 0;
    }

    .burger.active span:nth-child(3) {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* Logo mobile - centré */
    .header-page img,
    .header-index img {
        width: auto;
        max-width: 75%;
        margin: 0 auto;
        display: block;
    }

    .header-page,
    .header-index h1 {
        position: static;
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }

    /* Navigation mobile */
    .main-nav.nav-index ul {
        display: none;
    }

    .main-nav.active ul {
        display: block;
    }

    .main-nav.nav-index.scrolled {
        display: none !important;
    }

    .main-nav {
        display: none;
    }

    .main-nav.active {
        left: 0;
        width: 100vw;
        height: 100vh;
        background: var(--background-secondary-color) !important;
        position: fixed;
        z-index: 4999;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: none;
        margin: 0;
    }

    .main-nav ul {
        list-style: none;
        text-align: center;
        margin: 0;
        padding: 0;
    }

    .main-nav li {
        margin: 2rem 0;
    }

    .main-nav a {
        font-size: 1.5em;
        color: #000;
        text-decoration: none;
        font-weight: bold;
        background: none;
    }

    /* Title container mobile */
    .title-container {
        margin-top: 4rem;
        text-align: center;
        padding: 1rem;
        width: 95vw;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 4rem;
        box-sizing: border-box;
    }

    .title-container h2 {
        font-size: 1.3em;
        margin: 0.5rem 0;
    }

    .header-grid h2 {
        font-size: 0.9em;
        margin: 0.5rem 0;
        line-height: 1.5;
    }

    .ornamentTitle img {
        max-width: 30px;
    }

    /* === FOOTER MOBILE === */
    footer {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 1rem;
        padding: 2rem 1rem;
        justify-items: center;
        align-content: center;
    }

    .footer-logo {
        text-align: center;
    }

    .footer-logo img {
        max-width: 80px;
        height: auto;
    }

    /* === CONTENUS PAGE === */
    .explain-container {
        margin: 4rem auto; 
    }

    .paragraphs-container {
        gap: 0;
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center;
    }

    .explain-header {
        flex-direction: column;
        text-align: center;
        gap:2rem;
    }

    .ornament {
        width:65%;
    }

    .image-badge {
        margin-top: 1rem;
        margin-left: 0;
        rotate: 2.5deg;
        width: 265px;
        height: 155px;
    }

    .image-badge small {
       font-size: 1.8em;
    }

    .number-badge {
        width: 60px;
        height: 60px;
        font-size: 1.5em;
    }

    /* === VIDEO MOBILE === */
    .video-container {
        margin: 1rem 0;
        min-height: 200px;
    }

    .main-video {
        width: 100%;
        height: auto;
        min-height: 200px;
    }

    .video-controls-inner {
        width: 95%;
        gap: 10px;
    }

    .control-btn {
        width: 36px;
        height: 36px;
    }

    /* === GRID ITEM MOBILE === */
    .grid-item img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .image-number {
        left: 1rem;
        bottom: 1rem;
        width: 40px;
        height: 40px;
        font-size: 1.2em;
    }

    .status-banner {
        height: 50px;
        font-size: 0.5em;
    }

    .main-caption {
        font-size: 1.25em;
    }

    .secondary-caption {
        font-size: 0.8em;
        padding: 0.25rem;
    }
}


/* =========================
   TABLETTE : 481px à 1025px
   ========================= */
@media screen and (min-width: 481px) and (max-width: 1025px) {



    /* Menu burger */
    .burger span {
        display: block;
        position: relative;
        width: 40px;
        height: 4px;
        background: #000;
        margin: 8px 0;
        transition: 0.3s;
    }

    .burger.active span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .burger.active span:nth-child(2) {
        opacity: 0;
    }

    .burger.active span:nth-child(3) {
        transform: translate(-50%, -50%) rotate(-45deg);
    }



    .main-nav a {
        font-size: 2.2em;
    }

  .header-grid h2 {
        font-size: 2.2em;
        line-height: 1.2;
        margin: 0.5rem 0;
    }

      p {
        font-size: 1.8em;
        line-height: 1.4;
    }

     .number-badge {
        width: 60px;
        height: 60px;
        font-size: 2em;
    }

    .image-badge small {
        font-size: 2em;
    }

    .paragraphs-container{
        font-size: 1em;
        line-height: 1.5;
    }
    h2 {
        font-size: 5em;
        padding-bottom: 0.6vh;
    }

    .ornament {
        padding-bottom: 5vh;
        width: 50%;
    }

     .status-banner {
        height: 65px;
        font-size: 0.8em;
    }

     .main-caption {
        font-size: 1.5em;
    }

    .secondary-caption {
        font-size: 1em;
        padding: 0.4em;
    }

}

/* =========================
   DESKTOP : 1025px et +
   ========================= */
@media screen and (min-width: 1026px) {

    /* === BURGER MASQUE === */
    .burger {
        display: none !important;
    }

    .header-page {
        max-width: 315px;
        min-width: 170px;
        margin-top: 4vh;
        padding: 0 5vw;
    }

    .header-grid h2 {
        font-size: clamp(2rem, 3vw, 5rem);
        line-height: 1.2;
        margin: 0.5rem 0;
    }

    .explain-container h2 {
        font-size: 2.5rem;  
    }    

    /* === NAVIGATION NORMALE === */
    /*  .main-nav.nav-index ul {
        display: block;
    }
    
    .main-nav {
        position: static !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        display: block !important;
    }
    
    .grid-container {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .grid-container .grid-cell {
        display: block !important;
    }*/

    /* === SLIDESHOW NORMAL === */
    .slideshow-container {
        cursor: grab;
        overflow: hidden;
    }

    .slide-track {
        transition: transform 0.5s cubic-bezier(.77, 0, .18, 1);
    }

    /* === FOOTER NORMAL === */
    footer {
        grid-template-columns: repeat(8, 1fr) !important;
    }
}

/* =========================
   UTILITAIRES RESPONSIVE
   ========================= */

/* Masquer sur mobile */
@media screen and (max-width: 480px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Masquer sur tablette */
@media screen and (min-width: 481px) and (max-width: 1024px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Masquer sur desktop */
@media screen and (min-width: 1025px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Afficher seulement sur mobile */
.show-mobile {
    display: none !important;
}

@media screen and (max-width: 480px) {
    .show-mobile {
        display: block !important;
    }
}

/* Touch improvements */
@media (hover: none) and (pointer: coarse) {

    .control-btn,
    .fullscreen-btn,
    .burger {
        min-height: 30px;
        min-width: 30px;
    }

    .grid-link {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
}