/* =========================================================
   B612 — NOTICE
   RESPONSIVE MOBILE
   ========================================================= */


/* =========================================================
   TABLETTE / PETIT ÉCRAN
   ========================================================= */

@media (max-width: 900px) {

    /* -----------------------------------------------------
       CADRE PRINCIPAL
    ----------------------------------------------------- */

    .b612-notice {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 auto !important;

        border-radius: 0;
    }


    .b612-notice .b612-notice-container,
    .b612-notice .b612-wrapper {
        width: calc(100% - 40px) !important;
        max-width: none !important;
    }


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .b612-notice-hero {
        height: auto;
        min-height: 0;
        border-radius: 0 !important;
    }

    .b612-notice-topbar {
        flex-wrap: wrap;
        gap: 20px;
    }


    .b612-hero-main {
        grid-template-columns: 1fr;

        column-gap: 0;
        row-gap: 35px;

        min-height: 0;
    }


    .b612-notice-cover {
        width: 100%;
    }


    .b612-notice-content {
        max-width: none;
    }


    .b612-notice-status {
        display: none;
    }


    /* -----------------------------------------------------
       GRILLES
    ----------------------------------------------------- */

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


    .b612-summary-grid {
        grid-template-columns: 1fr;

        gap: 24px;
    }


    .b612-summary-right {
        padding-left: 0;
    }


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


    .b612-related-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    /* -----------------------------------------------------
       CADRE
    ----------------------------------------------------- */

    .b612-notice {
        width: 100% !important;
        max-width: none !important;
    }


    .b612-notice .b612-notice-container,
    .b612-notice .b612-wrapper {
        width: calc(100% - 32px) !important;
        max-width: none !important;
    }


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .b612-notice-hero {
        height: auto;
        min-height: 0;
    }


    .b612-notice-topbar {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 18px;
    }


    .b612-breadcrumb {
        max-width: 100%;

        overflow: hidden;
    }


    .b612-notice-actions {
        width: 100%;

        display: flex;
        flex-wrap: wrap;

        gap: 8px;
    }


    .b612-hero-action {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       HERO CONTENT
    ----------------------------------------------------- */

    .b612-hero-main {
        display: flex;
        flex-direction: column;

        row-gap: 30px;

        min-height: 0;
    }


    /* -----------------------------------------------------
       COUVERTURE
    ----------------------------------------------------- */

    .b612-notice-cover {
        width: 100%;

        display: flex;
        justify-content: center;
    }


    .b612-notice-cover::before {
        width: 280px;
        height: 280px;

        transform: translate(-5px, 15px);
    }


    .b612-notice-cover img {
        width: min(235px, 72vw);
        max-width: 100%;
    }


    /* -----------------------------------------------------
       CONTENU HERO
    ----------------------------------------------------- */

    .b612-notice-content {
        width: 100%;
        max-width: none;
    }


    .b612-notice-type {
        max-width: 100%;

        box-sizing: border-box;
    }


    .b612-notice-content h1 {
        font-size: 2.6rem;
        line-height: .96;
        letter-spacing: 0;
    }


    .b612-notice-author {
        font-size: 1.45rem;
    }


    .b612-notice-rating {
        flex-wrap: wrap;

        gap: 8px;
    }


    .b612-notice-description {
        max-width: none;

        font-size: .95rem;
        line-height: 1.6;
    }


    .b612-notice-actions-row {
        flex-direction: column;
        align-items: stretch;

        gap: 8px;
    }


    .b612-notice-actions-row > * {
        width: 100%;
        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       INFORMATIONS
    ----------------------------------------------------- */

    .b612-notice-infos {
        padding: 28px 0;
    }


    .b612-grid {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .b612-card {
        min-width: 0;
    }


    /* -----------------------------------------------------
       DISPONIBILITÉ
    ----------------------------------------------------- */

    .b612-notice-availability {
        padding: 0 0 28px;
    }


    .b612-availability-card {
        padding: 20px;

        border-radius: 13px;
    }


    .b612-availability-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 15px;

        margin-bottom: 18px;
    }


    .b612-availability-header h2 {
        font-size: 1.5rem;
    }


    .b612-toggle {
        width: 100%;

        box-sizing: border-box;
    }


    .b612-copy {
        display: grid;

        grid-template-columns: 1fr;

        gap: 7px;

        padding: 14px 16px;
    }


    /* -----------------------------------------------------
       RÉSUMÉ
    ----------------------------------------------------- */

    .b612-notice-summary {
        padding: 28px 0;
    }


    .b612-summary-grid {
        grid-template-columns: 1fr;

        gap: 18px;

        padding: 22px;
    }


    .b612-summary-left {
        display: block;
    }


    .b612-summary-left h2 {
        font-size: 1.8rem;
    }


    .b612-summary-right {
        padding-left: 0;

        font-size: .95rem;
        line-height: 1.65;
    }


    /* -----------------------------------------------------
       AVIS
    ----------------------------------------------------- */

    .b612-notice-reviews {
        padding: 28px 0;
    }


    .b612-reviews-header {
        margin-bottom: 18px;
    }


    .b612-reviews-header h2 {
        font-size: 1.8rem;
    }


    .b612-reviews-grid {
        grid-template-columns: 1fr;

        gap: 0;

        padding: 12px;
    }


    .b612-review-card {
        min-height: 0;

        padding: 18px;

        border-left: 0;
        border-top: 1px solid #e8e9ed;
    }


    .b612-review-card:first-child {
        border-top: 0;
    }


    /* -----------------------------------------------------
       DOCUMENTS SIMILAIRES
    ----------------------------------------------------- */

    .b612-notice-related {
        padding: 0 0 35px;
    }


    .b612-related-grid {
        display: grid;

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

        gap: 16px;
    }


    .b612-related-card {
        min-width: 0;
    }


    .b612-related-card img {
        width: 100%;
        height: auto;
    }

}


/* =========================================================
   PETIT MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .b612-notice .b612-notice-container,
    .b612-notice .b612-wrapper {
        width: calc(100% - 32px) !important;
    }


    .b612-notice-content h1 {
        font-size: 2.35rem;
    }


    .b612-notice-author {
        font-size: 1.3rem;
    }


    .b612-notice-cover img {
        width: min(220px, 72vw);
    }


    .b612-summary-grid {
        padding: 18px;
    }


    .b612-availability-card {
        padding: 18px;
    }



    /* =========================================================
       NOTICE — COLLAGE AU HEADER SUR SMARTPHONE
       ========================================================= */

    @media (max-width: 600px) {

        body:has(.b612-notice) {
            background: #071524 !important;
        }

    }
}