@media (max-width: 900px) {
    /* Bento : 2 colonnes sur tablette (réinitialise les zones desktop) */
    .bento-structure {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
        grid-template-areas: none;
        gap: var(--gap-lg);
    }

    .bento-item:nth-child(1) {
        grid-area: auto;
        grid-column: 1 / 3;
        grid-row: auto;
    }

    .bento-item:nth-child(2),
    .bento-item:nth-child(3),
    .bento-item:nth-child(4),
    .bento-item:nth-child(5) {
        grid-area: auto;
        grid-column: auto;
        grid-row: auto;
    }

    .bento-item:nth-child(6),
    .bento-item:nth-child(7),
    .bento-item:nth-child(8) {
        grid-area: auto;
        grid-column: 1 / 3;
        grid-row: auto;
    }
}

@media (max-width: 1024px) {
    /* Dropdown Sommaire : remplacer les liens à gauche */
    .nav-links-left {
        display: none;
    }

    .nav-sommaire-dropdown {
        display: block;
    }

    .navbar,
    .nav-container,
    .nav-left-wrapper {
        overflow: visible;
    }

    .universe-item,
    .universe-reverse {
        flex-direction: column;
        gap: 2.5rem;
        margin-bottom: 7rem;
    }

    /* Cartes stages : espacement géré par .stages-list { gap } */
    .stages-list .universe-item.stage-public-card {
        margin-bottom: 0;
    }

    /* Colonne : pleine largeur (évite un align-items: center qui rétrécit le texte) */
    .universe-item.universe-ethologie {
        align-items: stretch;
    }

    .universe-image {
        width: 100%;
        height: 300px;
    }

    /* Stages mobile/tablette : le cadre image a une hauteur réelle et l'image le remplit. */
    .universe-image.stage-media-panel {
        height: 230px;
        max-height: none;
    }

    .universe-image.stage-media-panel .stage-media-image {
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .universe-content {
        padding: 0;
        text-align: left;
    }

    .universe-content-ethologie-ffe {
        padding: 0;
    }

    .controls input,
    .controls select,
    .controls textarea {
        max-width: 100%;
    }

    .gift-creator-wrapper {
        padding: var(--padding-sm) 0;
        flex-direction: column;
    }

    .card-preview {
        flex: auto;
        margin-top: 30px;
        width: 100%;
        max-width: 100%;
    }

    .controls {
        max-width: 100%;
        min-width: 0;
    }

    #gift-card {
        border-width: 5px;
        aspect-ratio: auto;
        min-height: auto;
        height: auto;
        flex-direction: column;
    }

    .card-image {
        width: 100%;
        height: 200px;
    }

    .overlay {
        width: 100%;
        background: var(--bg-white);
        padding: var(--padding-sm);
        border-left: none;
    }

    .overlay::before {
        top: 5px;
        font-size: 1rem;
    }
}




@media (max-width: 768px) {
    .nav-container {
        grid-template-columns: auto 1fr auto;
    }

    .nav-container .logo {
        grid-column: 1;
        justify-self: start;
    }

    .nav-container .hamburger {
        grid-column: 3;
    }

    /* Mobile : liens directs, pas de dropdown Sommaire */
    .nav-links-left {
        display: flex;
    }

    .nav-sommaire-dropdown {
        display: none;
    }

    .nav-menu.nav-links {
        display: flex;
        position: fixed;
        right: -100%;
        top: var(--navbar-height);
        height: calc(100vh - var(--navbar-height));
        background-color: #fcfcfb;
        flex-direction: column;
        align-items: center;
        width: 100%;
        text-align: center;
        padding-top: 50px;
        gap: var(--gap-xl);
        transition: var(--transition);
        z-index: 600;
    }

    .nav-menu.nav-links.active {
        right: 0;
    }

    body.has-promo-banner .nav-menu.nav-links {
        top: calc(var(--promo-banner-height) + var(--navbar-height));
        height: calc(100vh - var(--promo-banner-height) - var(--navbar-height));
    }

    .nav-menu.nav-links .nav-left-wrapper {
        align-items: center;
    }

    .nav-links-left,
    .nav-links-right {
        flex-direction: column;
        align-items: center;
        gap: var(--gap-xl);
    }

    .hamburger {
        display: block;
    }

    /* Contact caché dans la barre, mais visible dans le menu burger */
    .btn-contact {
        display: none;
    }

    .nav-menu.nav-links .btn-contact {
        display: inline-flex;
    }

    .nav-menu.nav-links .nav-item-contact,
    .nav-menu.nav-links .nav-item-contact.nav-item-contact-hidden {
        max-width: none;
        opacity: 1;
        padding: 0;
        margin: 0;
    }

    .nav-menu.nav-links .nav-item-contact .btn-contact,
    .nav-menu.nav-links .nav-item-contact.nav-item-contact-hidden .btn-contact {
        transform: none;
        opacity: 1;
    }

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

    .pension-intro-block {
        grid-template-columns: 1fr;
        gap: var(--gap-xl);
    }

    .pension-carousel,
    .pension-carousel-track {
        min-height: 260px;
    }

    .pension-intro-text {
        max-width: none;
    }

    .pension-structure-list {
        grid-template-columns: 1fr;
    }

    .pension-structure-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pension-structure-block {
        grid-template-columns: 1fr;
        gap: var(--gap-xl);
    }

    .pension-structure-image img {
        max-height: 260px;
    }

    .pension-description {
        max-width: none;
    }

    .bento-structure {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-template-areas: none;
        gap: var(--gap-lg);
    }

    .bento-item:nth-child(1),
    .bento-item:nth-child(2),
    .bento-item:nth-child(3),
    .bento-item:nth-child(4),
    .bento-item:nth-child(5),
    .bento-item:nth-child(6),
    .bento-item:nth-child(7),
    .bento-item:nth-child(8) {
        grid-area: auto;
        grid-column: 1;
        grid-row: auto;
    }

    .bento-item .bento-image {
        aspect-ratio: 16/10;
    }

    .bento-item.bento-tall .bento-image {
        aspect-ratio: 16/10;
    }

    .visite-map-container iframe,
    .visite-map-container .leaflet-map {
        height: 350px;
    }

    #contact.section {
        padding: var(--section-padding-mobile);
    }

    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: var(--gap-3xl);
    }

    .contact-info {
        order: 2;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--gap-lg);
        padding: var(--padding-sm);
    }

    .contact-info .info-item {
        flex: 1 1 100%;
        max-width: none;
        margin: 0 auto;
    }

    .contact-form {
        order: 1;
        padding: var(--padding-sm);
    }

    .contact-form .form-group {
        margin-bottom: 1rem;
    }

    .profile-credits-breakdown {
        grid-template-columns: 1fr;
    }

    .offers-cards-v2 {
        grid-template-columns: minmax(0, 420px);
        justify-content: center;
    }

    .offers-card-v2 {
        width: 100%;
    }

    .offers-selection-bar {
        flex-wrap: wrap;
    }

    .admin-users-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
        margin-bottom: 0.5rem;
        min-width: 0;
    }

    .admin-users-toolbar .admin-filter-search {
        flex: 1 1 100%;
    }

    .admin-users-toolbar .admin-users-filters {
        flex-direction: column;
        gap: 0.4rem;
        width: 100%;
        min-width: 0;
    }

    .admin-users-toolbar .admin-filter-select {
        flex: 0 0 auto;
        width: 100%;
    }

    .admin-sort-wrap {
        display: flex;
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 0;
        box-sizing: border-box;
    }

    .admin-sort-wrap .admin-filter-select {
        flex: 1 1 0;
        min-width: 0;
    }

    .reverse-mobile {
        display: flex;
        flex-direction: column-reverse;
    }

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

    .footer-content {
        flex-direction: column;
        gap: var(--gap-xl);
    }
}