/* ==========================================================================
   B612 — NOTICE DESKTOP
   Largeur de référence : 1000px
   ========================================================================== */


/* ==========================================================================
   1. PAGE
   ========================================================================== */


body:has(.b612-notice) #page,
body:has(.b612-notice) .site,
body:has(.b612-notice) .site-content,
body:has(.b612-notice) main,
body:has(.b612-notice) .content-area {
    background: transparent !important;
}

/* ==========================================================
   FOND PAPIER B612 — NOTICE
========================================================== */

body:has(.b612-notice) {

    background-color: #F7F3EA !important;

    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(120, 105, 85, .045) 0px,
            rgba(120, 105, 85, .045) 1px,
            transparent 1px,
            transparent 4px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, .28) 0px,
            rgba(255, 255, 255, .28) 1px,
            transparent 1px,
            transparent 9px
        );

    background-size:
        auto,
        auto;
}


/* ==========================================================================
   2. CONTENEURS
   ========================================================================== */

.b612-notice {
    width: 1000px !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    box-sizing: border-box;
}

.b612-notice-container,
.b612-wrapper {
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}


/* ==========================================================
   NAVIGATION ENTRE LES ANIMATIONS
========================================================== */

.b612-event-navigation {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    margin:
        0 0 28px;

    box-sizing: border-box;
}


/* ----------------------------------------------------------
   Liens
---------------------------------------------------------- */

.b612-event-navigation__prev,
.b612-event-navigation__next {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-width: 42px;
    height: 42px;

    padding: 0 14px;

    box-sizing: border-box;

    border: 1px solid
        rgba(23, 24, 44, .18);

    border-radius: 50%;

    background:
        rgba(247, 243, 234, .72);

    color: #17182c;

    text-decoration: none;

    font-family: 'Inter', sans-serif;

    font-size: 16px;

    line-height: 1;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


/* ----------------------------------------------------------
   Flèches
---------------------------------------------------------- */

.b612-event-navigation__prev span:first-child,
.b612-event-navigation__next span:last-child {

    font-size: 18px;

    line-height: 1;
}


/* ----------------------------------------------------------
   Texte
---------------------------------------------------------- */

.b612-event-navigation__prev span:last-child,
.b612-event-navigation__next span:first-child {

    display: none;
}


/* ----------------------------------------------------------
   Hover
---------------------------------------------------------- */

.b612-event-navigation__prev:hover,
.b612-event-navigation__next:hover {

    background:
        rgba(247, 243, 234, .95);

    border-color:
        rgba(23, 24, 44, .35);

    transform:
        scale(1.05);
}

/* ==========================================================================
   3. HERO
   ========================================================================== */

   .b612-notice-hero {

       position: relative;

       overflow: hidden;

       min-height: 360px;

       color: #ffffff;

       background: #071524;

       border-radius: 16px 16px 0 0;
   }


.b612-notice-hero::before {
    content: "";

    position: absolute;

    width: 760px;
    height: 760px;

    left: -330px;
    bottom: -430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(224, 157, 83, .42) 0%,
            rgba(224, 157, 83, .16) 42%,
            transparent 70%
        );

    pointer-events: none;
    z-index: 1;
}

.b612-notice-hero::after {
    content: "";

    position: absolute;

    width: 900px;
    height: 900px;

    right: -420px;
    top: -470px;

    border-radius: 50%;

    border: 1px solid rgba(107, 174, 208, .14);

    box-shadow:
        0 0 0 90px rgba(80, 145, 182, .035),
        0 0 0 180px rgba(80, 145, 182, .025);

    pointer-events: none;
    z-index: 1;
}

.b612-hero-background {

    position: absolute;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            90deg,
            rgba(7, 21, 36, .35),
            rgba(7, 21, 36, .10)
        ),
        url("/wp-content/themes/b612/assets/img/fond_notice.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}




/* ==========================================================================
   4. HERO — BARRE SUPÉRIEURE
   ========================================================================== */

.b612-notice-topbar {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 42px;

    padding-top: 28px;

    margin-bottom: 34px;
}

.b612-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 0;

    color: rgba(255, 255, 255, .66);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .78rem;
    line-height: 1.4;
}

.b612-breadcrumb a {
    color: rgba(255, 255, 255, .9);
    text-decoration: none;
}

.b612-breadcrumb span {
    color: rgba(255, 255, 255, .38);
}

.b612-breadcrumb strong {
    max-width: 300px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: rgba(255, 255, 255, .9);

    font-weight: 500;
}

.b612-notice-actions {
    display: flex;
    align-items: center;
    gap: 24px;
}

.b612-hero-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 0;

    border: 0;
    background: transparent;

    color: rgba(255, 255, 255, .9);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .78rem;

    cursor: pointer;
}

.b612-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 23px;
    height: 23px;

    font-size: 1.35rem;
    line-height: 1;
}


/* ==========================================================================
   5. HERO — CONTENU
   ========================================================================== */

.b612-hero-main {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: 340px minmax(0, 1fr);

    column-gap: 35px;

    align-items: center;

    min-height: 350px;
    margin-bottom: 40px;
}

.b612-notice-cover {
    display: flex;

    align-items: center;
    justify-content: center;
}

.b612-notice-cover img {
    display: block;

    width: 200px;
    max-height: 400px;

    object-fit: contain;

    border-radius: 10px;

    box-shadow:
        0 24px 50px rgba(0, 0, 0, .30);
}


/* ==========================================================================
   CONTENU TEXTE DU HERO
   ========================================================================== */

.b612-notice-content {
    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

.b612-notice-type {
    display: inline-block;

    padding: 7px 13px;

    border-radius: 999px;

    background: rgba(48, 133, 174, .48);

    color: #d8f0f8;

    text-transform: uppercase;

    letter-spacing: .08em;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .67rem;

    font-weight: 600;

    margin-bottom: 10px;
}


/* ==========================================================================
   TITRE
   ========================================================================== */

.b612-notice-content h1 {
    margin: 0;
    color: #ffffff;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 3rem;
    line-height: .95;
    font-weight: 500;
    letter-spacing: -1px;
    max-width: 800px;
}


/* ==========================================================================
   SOUS-TITRE
   ========================================================================== */

.b612-notice-content h2 {
    margin: 12px 0 0;

    color: rgba(255, 255, 255, .76);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.45rem;

    font-weight: 400;
}


/* ==========================================================================
   AUTEUR
   ========================================================================== */

.b612-notice-author {
    margin-top: 8px;

    color: #f2c16b;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.7rem;

    line-height: 1.15;

    font-weight: 600;
}


/* ==========================================================================
   NOTATION
   ========================================================================== */

.b612-rating {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 20px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

.b612-stars {
    display: flex;

    align-items: center;

    gap: 2px;
}

.b612-stars .star {
    color: rgba(255, 255, 255, .25);

    font-size: 1.28rem;

    line-height: 1;
}

.b612-stars .star.filled {
    color: #f5bb55;
}

.b612-rating strong {
    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .95rem;

    font-weight: 600;
}

.b612-review-count {
    color: rgba(255, 255, 255, .62);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .88rem;
}


/* ==========================================================================
   RÉSUMÉ COURT
   ========================================================================== */

.b612-notice-intro {
    max-width: 660px;

    margin: 23px 0 0;

    color: rgba(255, 255, 255, .84);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 1rem;

    line-height: 1.65;
}


/* ==========================================================================
   6. LIGNE DISPONIBILITÉ / ACTIONS
   ========================================================================== */

   .b612-hero-bottom {
       display: flex;

       align-items: center;

       gap: 10px;

       margin-top: 27px;

       font-family:
           Arial,
           Helvetica,
           sans-serif;
   }

/* ==========================================================================
   DISPONIBILITÉ
   ========================================================================== */

.b612-availability-badge {
    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 40px;

    padding: 8px 20px 8px 13px;

    border: 1px solid rgba(129, 222, 155, .16);

    border-radius: 15px;

    box-shadow:
        0 12px 25px rgba(0, 0, 0, .16);

    box-sizing: border-box;
}

.availability-dot {
    flex: 0 0 17px;

    width: 17px;
    height: 17px;

    border-radius: 50%;
}

.availability-dot.is-available {
    background: #b9dc72;

    box-shadow:
        0 0 0 5px rgba(185, 220, 114, .12);
}

.availability-dot.is-unavailable {
    background: #c95757;

    box-shadow:
        0 0 0 5px rgba(201, 87, 87, .12);
}



.b612-availability-badge strong {
    display: block;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .86rem;

    line-height: 1.25;

    font-weight: 600;
}

.b612-availability-badge small {
    display: block;

    margin-top: 3px;

    color: rgba(255, 255, 255, .66);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .72rem;

    line-height: 1.25;
}


/* ==========================================================================
   DATE DE RETOUR
   ========================================================================== */

.b612-return-date {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    min-height: 40px;

    padding: 0 15px;

    box-sizing: border-box;

    border: 1px solid rgba(255, 255, 255, .16);

    border-radius: 15px;

    background: rgba(255, 255, 255, .04);

    color: rgba(255, 255, 255, .88);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .76rem;

    font-weight: 500;

    line-height: 1;

    white-space: nowrap;
}


.return-date-icon {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    font-size: .85rem;

    color: rgba(255, 255, 255, .82);
}




/* ==========================================================================
   BOUTON RÉSERVER
   ========================================================================== */

.b612-reserve-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 40px;

    padding: 0 22px;

    border: 0;

    border-radius: 999px;

    background: #f2c16b;

    color: #17243b;


    font-size: 0.75rem;

    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 12px 25px rgba(0, 0, 0, .14);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.b612-reserve-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 17px 30px rgba(0, 0, 0, .20);
}

.reserve-icon {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .9rem;
}


/* ==========================================================================
   BOUTON FAVORI
   ========================================================================== */

.b612-favorite-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, .30);

    border-radius: 50%;

    background: transparent;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 1.7rem;

    line-height: 1;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease;
}

.b612-favorite-button:hover {
    background: rgba(255, 255, 255, .08);

    border-color: rgba(255, 255, 255, .55);
}


/* ==========================================================================
   7. INFORMATIONS
   ========================================================================== */

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

.b612-grid {
    display: grid;

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

    gap: 10px;
}

.b612-card {

    display: flex;
    align-items: center;

    min-width: 0;

    background: rgba(255, 255, 255, .92);

    border-radius: 13px;

    padding: 18px;

    box-shadow:
        0 4px 16px rgba(18, 31, 58, .045);

    box-sizing: border-box;
}

.b612-card-icon {
    flex: 0 0 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin-right: 13px;

    border-radius: 50%;

    font-size: 1.25rem;
}

.b612-card-icon.blue {
    background: #e4eef7;
    color: #176194;
}

.b612-card-icon.purple {
    background: #eeeafd;
    color: #5d50a5;
}

.b612-card-icon.orange {
    background: #fce9df;
    color: #e66a32;
}

.b612-card-icon.green {
    background: #e6f3ed;
    color: #19845a;
}

.b612-card-icon.gold {
    background: #fbf0d9;
    color: #d58b16;
}

.b612-card-icon.red {
    background: #f9e6e7;
    color: #b64b50;
}

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

.b612-card .label {
    display: block;

    margin-bottom: 7px;

    color: #7f899c;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .62rem;

    letter-spacing: .20em;

    text-transform: uppercase;
}

.b612-card .value {
    display: block;

    color: #18233f;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.15rem;

    line-height: 1.15;

    font-weight: 600;
}

.b612-empty-value {
    color: #a4acbc;

    font-style: italic;
}

/* ==========================================================================
   8. DISPONIBILITÉ
   ========================================================================== */

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

.b612-availability-card {

    padding: 20px 22px 11px;

    border-radius: 13px;

    background: #ffffff;

    box-shadow:
        0 4px 16px rgba(18, 31, 58, .045);

    box-sizing: border-box;
}

.b612-availability-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 12px;
}

.b612-availability-header h2 {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 0;

    color: #18233f;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.15;
}

.b612-availability-icon {
    flex: 0 0 auto;

    width: 22px;
    height: 22px;

    color: #b84e52;
}

.b612-availability-count {
    margin-left: 8px;

    color: #68748a;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .72rem;
    font-weight: 400;
    line-height: 1;
}

.b612-toggle {
    width: 32px;
    height: 32px;

    padding: 0;

    border: 0;
    background: #f7f1e5;

    color: #263247;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 1.15rem;
    line-height: 32px;

    cursor: pointer;
}


/* --------------------------------------------------------------------------
   EXEMPLAIRE
   -------------------------------------------------------------------------- */

   .b612-copy {
       display: grid;
       grid-template-columns:
           1.15fr
           1fr
           2fr
           .7fr
           .9fr;
       column-gap: 30px;

       align-items: center;

       padding: 15px 18px;
       box-sizing: border-box;
   }

/* --------------------------------------------------------------------------
   INTITULÉS
   -------------------------------------------------------------------------- */

.b612-copy-label {
    display: block;

    margin-bottom: 4px;

    color: #7f899b;

    text-transform: uppercase;
    letter-spacing: .12em;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .58rem;
    font-weight: 700;
    line-height: 1.1;
}


/* --------------------------------------------------------------------------
   VALEURS
   -------------------------------------------------------------------------- */

.b612-copy strong {
    display: block;

    min-width: 0;

    overflow: hidden;

    color: #18233f;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .76rem;
    font-weight: 600;
    line-height: 1.25;

    white-space: nowrap;
    text-overflow: ellipsis;
}


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

   .b612-copy-status {
       display: flex;
       align-items: center;
       gap: 12px;

       min-width: 0;

       color: #18233f;

       font-family:
           Arial,
           Helvetica,
           sans-serif;

       font-size: .76rem;
       font-weight: 700;
   }

   .b612-copy-status strong {
       display: block;

       color: #18233f;

       font-family:
           Arial,
           Helvetica,
           sans-serif;

       font-size: .76rem;
       font-weight: 700;
       line-height: 1.25;
   }

   .b612-copy-location strong,
   .b612-copy-shelf strong {
       font-weight: 700;
   }


   .b612-copy-status-dot {
       flex: 0 0 auto;

       width: 13px;
       height: 13px;

       border-radius: 50%;
   }


   /* Disponible */

   .b612-copy-status-dot.is-available {
       background: #80b84a;

       box-shadow:
           0 0 0 5px rgba(128, 184, 74, .15);
   }


   /* Emprunté */

   .b612-copy-status-dot.is-loaned {
       background: #e0a84f;

       box-shadow:
           0 0 0 5px rgba(224, 168, 79, .15);
   }


   /* Indisponible */

   .b612-copy-status-dot.is-unavailable {
       background: #c95757;

       box-shadow:
           0 0 0 5px rgba(201, 87, 87, .15);
   }



.b612-copy-status > div {
    min-width: 0;
}


/* --------------------------------------------------------------------------
   LOCALISATION / SECTION / SUPPORT / CODE-BARRES
   -------------------------------------------------------------------------- */

.b612-copy-location,
.b612-copy-shelf {
    min-width: 0;

    color: #18233f;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .76rem;
}


/* --------------------------------------------------------------------------
   DONNÉE INDISPONIBLE
   -------------------------------------------------------------------------- */

.b612-copy-empty {
    color: #8992a4;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .76rem;

    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   ACTION
   -------------------------------------------------------------------------- */

.b612-copy-action {
    justify-self: end;

    min-width: 0;
}

.b612-copy-action-available,
.b612-copy-action-reservable {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 76px;

    padding: 8px 12px;

    border-radius: 999px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .68rem;
    font-weight: 600;

    white-space: nowrap;
}

.b612-copy-action-available {
    background: #edf6ee;

    color: #16864d;
}

.b612-copy-action-reservable {
    border: 1px solid #f0b36b;

    background: #ffffff;

    color: #e56e28;
}


/* --------------------------------------------------------------------------
   EXEMPLAIRES SUCCESSIFS
   -------------------------------------------------------------------------- */

.b612-copy + .b612-copy {
    margin-top: 0;
}


/* --------------------------------------------------------------------------
   ÉTAT VIDE
   -------------------------------------------------------------------------- */

.b612-empty {
    padding: 20px 14px;

    color: #8992a4;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .78rem;
}
/* ==========================================================================
   9. RÉSUMÉ
   ========================================================================== */


.b612-summary-grid {
    display: grid;

    grid-template-columns: 230px 1fr;

    gap: 45px;

    align-items: center;
}

.b612-section-title {
    display: block;

    margin-bottom: 8px;
    color: #9ca4b4;
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .55rem;
    letter-spacing: .20em;

    text-transform: uppercase;
}

.b612-summary-left h2 {
    margin: 0;

    color: #18233f;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 0.25rem;

    line-height: 1.05;
}

.b612-summary-right {
    color: #44516b;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .92rem;

    line-height: 1.65;
}

.b612-summary-right p {
    margin: 0;
}


/* ==========================================================================
   10. AVIS
   ========================================================================== */

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

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

.b612-reviews-header h2 {
    margin: 0;

    color: #18233f;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.75rem;

    font-weight: 600;
}

.b612-reviews-grid {
    display: grid;

    grid-template-columns: 180px repeat(3, 1fr);

    gap: 10px;

    padding: 18px;

    border-radius: 13px;

    background: #ffffff;

    box-shadow:
        0 5px 18px rgba(18, 31, 58, .06);

    box-sizing: border-box;
}

.b612-review-card {
    min-height: 150px;

    padding: 12px 18px;

    border-left: 1px solid #e7e9ed;
}

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

.b612-review-stars {
    color: #f2ad2f;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 1rem;

    letter-spacing: 1px;
}

.b612-review-card p {
    margin: 12px 0 0;

    color: #3d485c;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .78rem;

    line-height: 1.55;
}

.b612-review-card span {
    display: block;

    margin-top: 12px;

    color: #18233f;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .75rem;

    font-weight: 600;
}

/* ============================================================
   11. DOCUMENTS SIMILAIRES
   ============================================================ */

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

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

.b612-related-header .b612-section-title {
    margin-bottom: 7px;
}

.b612-related-header h2 {
    margin: 0;

    color: #18233f;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
}

.b612-related-grid {
    display: flex;

    gap: 20px;

    margin-top: 0;

    overflow: hidden;
}

.b612-related-card {
    width: 145px;
    flex: 0 0 145px;

    display: flex;
    flex-direction: column;
}

.b612-related-cover {
    width: 145px;
    height: 205px;

    margin-bottom: 10px;

    overflow: hidden;

    border-radius: 9px;

    background: #e9ecf2;
}

.b612-related-cover img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.b612-related-content h3 {
    margin: 0;

    color: #18233f;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .78rem;
    font-weight: 700;
    line-height: 1.3;
}

.b612-related-content p {
    margin: 4px 0 0;

    color: #6b7488;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .70rem;
    line-height: 1.3;
}

.b612-related-content .b612-empty-value {
    color: #9aa2b1;
}

/* ==========================================================================
   12. ÉTATS VIDES
   ========================================================================== */

.b612-empty-state {
    margin: 0;

    padding: 20px;

    border: 1px dashed #d4dae5;

    border-radius: 12px;

    background: #fafbfe;

    color: #8f98aa;

    text-align: center;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .78rem;
}


/* ==========================================================
   NAVIGATION ENTRE LES ANIMATIONS
========================================================== */

.b612-event-navigation {

    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 100%;

    margin: 28px 0 24px;

    padding: 0;

    box-sizing: border-box;
}


/* ----------------------------------------------------------
   Liens
---------------------------------------------------------- */

.b612-event-navigation__prev,
.b612-event-navigation__next {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #17182c;

    text-decoration: none;

    font-size: 22px;

    line-height: 1;

    transition:
        transform .2s ease,
        opacity .2s ease;
}


/* ----------------------------------------------------------
   Masquer les libellés
---------------------------------------------------------- */

.b612-event-navigation__prev span:last-child,
.b612-event-navigation__next span:first-child {

    display: none;
}


/* ----------------------------------------------------------
   Flèche
---------------------------------------------------------- */

.b612-event-navigation__prev span:first-child,
.b612-event-navigation__next span:last-child {

    display: block;

    line-height: 1;
}


/* ----------------------------------------------------------
   Hover
---------------------------------------------------------- */

.b612-event-navigation__prev:hover {

    transform: translateX(-3px);

    opacity: .65;
}


.b612-event-navigation__next:hover {

    transform: translateX(3px);

    opacity: .65;
}


/* ==========================================================================
   13. RESPONSIVE DESKTOP ÉTROIT
   ========================================================================== */

@media (max-width: 1040px) {

    .b612-notice {
        width: calc(100% - 40px) !important;
        max-width: 1000px !important;
        min-width: 0 !important;
    }

    .b612-notice-container,
    .b612-wrapper {
        width: 100%;
    }

    .b612-hero-main {
        grid-template-columns: 340px minmax(0, 1fr);

        column-gap: 35px;
    }

    .b612-notice-cover img {
        width: 210px;
    }
}

/* ==========================================================================
   NOTICE — CADRE ÉDITORIAL
   ========================================================================== */

.b612-notice {

    width: 1000px !important;
    max-width: 1000px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box;

    /* Fond très légèrement plus clair que le papier extérieur */
    background: #faf9f6;

    border-radius: 16px;

    overflow: visible;

    box-shadow:
        0 18px 50px rgba(24, 35, 63, .08);
}


/* ----------------------------------------------------------
   CONTENU INTERNE
---------------------------------------------------------- */

.b612-notice .b612-notice-container,
.b612-notice .b612-wrapper {

    width: calc(100% - 40px) !important;

    max-width: 960px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box;
}


/* ----------------------------------------------------------
   SECTIONS DE LA FICHE
---------------------------------------------------------- */

.b612-notice-infos,
.b612-notice-availability,
.b612-notice-summary,
.b612-notice-reviews,
.b612-notice-related {

    width: 100%;

    box-sizing: border-box;

    background: transparent;
}


/* ==========================================================
   INFORMATIONS INDISPONIBLES
   Pas d'italique
   ========================================================== */

.b612-empty-value,
.b612-unavailable,
.b612-unavailable em,
.b612-meta-value.b612-unavailable,
.b612-meta-value em {
    font-style: normal !important;
}

/* =========================================================
   RÉSUMÉ
   ========================================================= */

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



.b612-notice-summary .b612-wrapper {
    width: 100%;
}

.b612-summary-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    align-items: center;
    min-height: 136px;
    padding: 24px 28px;
    box-sizing: border-box;
    background: #f7f1e5;
    border-radius: 10px;
}


/* ---------------------------------------------------------
   PARTIE GAUCHE
   --------------------------------------------------------- */

   .b612-summary-left {
       display: flex;
       align-items: center;
       gap: 28px;
   }


   .b612-summary-left .b612-section-title {
       display: block;
       margin-bottom: 6px;
   }


   .b612-summary-left h2 {
       margin: 0;
       font-family: Georgia, "Times New Roman", serif;
       font-size: 28px;
       line-height: 1.15;
       font-weight: 700;
       color: #101b35;
   }


/* ---------------------------------------------------------
   PARTIE DROITE
   --------------------------------------------------------- */
   .b612-summary-right {
       padding-left: 20px;
   }



   .b612-summary-right p {
       margin: 0;
       font-size: 15px;
       line-height: 1.55;
       font-weight: 400;
       color: #171717;
   }

/* ---------------------------------------------------------
   ABSENCE DE RÉSUMÉ
   --------------------------------------------------------- */

.b612-summary-right .b612-empty-state {
    margin: 0;
    font-style: normal;
}



/* ==========================================================
   NAVIGATION ENTRE LES NOTICES
========================================================== */

.b612-notice-navigation {

    display: flex;

    justify-content: space-between;
    align-items: center;

    margin: 18px 0 24px;
    padding: 0 8px;
}


.b612-notice-navigation a {

    display: inline-flex;
    align-items: center;
    gap: 10px;

    min-width: 42px;
    height: 42px;

    padding: 0 16px;

    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 22px;

    background: rgba(255, 255, 255, .06);

    color: #ffffff;

    text-decoration: none;

    font-family: 'Inter', sans-serif;
    font-size: 11px;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.b612-notice-navigation a:hover {

    background: rgba(255, 255, 255, .12);

    border-color: rgba(255, 255, 255, .40);

    transform: translateY(-1px);
}


.b612-notice-navigation__prev span:first-child,
.b612-notice-navigation__next span:last-child {

    font-size: 18px;
    line-height: 1;
}
/* ==========================================================
   NAVIGATION ENTRE LES NOTICES
========================================================== */

.b612-notice-navigation {

    display: flex;

    align-items: center;
    justify-content: space-between;

    margin: 0;
    padding: 12px 18px;

    background: #faf9f6;
}


/* ----------------------------------------------------------
   LIENS
---------------------------------------------------------- */

.b612-notice-navigation a {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 1px solid rgba(10, 29, 50, .18);

    border-radius: 50%;

    background: #ffffff;

    color: #0a1d32;

    text-decoration: none;

    font-family: Arial, Helvetica, sans-serif;

    box-shadow:
        0 4px 12px rgba(18, 35, 63, .08);

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}


/* ----------------------------------------------------------
   FLÈCHE
---------------------------------------------------------- */

.b612-notice-navigation a span {

    font-size: 20px;

    line-height: 1;

    font-family: Arial, Helvetica, sans-serif;
}


/* ----------------------------------------------------------
   TEXTE — ON LE CACHE
---------------------------------------------------------- */

.b612-notice-navigation a span:not([aria-hidden="true"]) {

    display: none;
}


/* ----------------------------------------------------------
   HOVER
---------------------------------------------------------- */

.b612-notice-navigation a:hover {

    background: #0a1d32;

    border-color: #0a1d32;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(18, 35, 63, .14);
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .b612-summary-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .b612-summary-right {
        padding-left: 0;
    }
}
/* ----------------------------------------------------------
   CAS SANS RÉSUMÉ
   ---------------------------------------------------------- */

.b612-summary-right .b612-empty-state {
    margin: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.5;

    color: #555;

    font-style: normal;
}

.b612-summary-icon {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 50%;
    background: #c9a15b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.b612-summary-icon svg {
    width: 30px;
    height: 30px;
}

.b612-copy[hidden],
.b612-empty[hidden] {
    display: none;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .b612-summary-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 24px;
    }

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

    .b612-summary-left h2 {
        font-size: 25px;
    }

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



/* ==========================================================
   NOTICE — SUPPRESSION DE L'ESPACE SOUS LE HEADER
========================================================== */

body:has(.b612-notice) main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body:has(.b612-notice) .content-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body:has(.b612-notice) .site-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =========================================================
   NOTICE — FONDU DU BAS DE LA CARTE
   Desktop uniquement
   ========================================================= */

@media (min-width: 901px) {

  .b612-notice {
      position: relative;
  }


  .b612-notice::after {

      content: "";

      position: absolute;

      left: 0;
      right: 0;
      bottom: -170px;

      height: 170px;

      pointer-events: none;

      background:
          linear-gradient(
              to bottom,
              #faf9f6 0%,
              rgba(250, 249, 246, .97) 15%,
              rgba(250, 249, 246, .88) 32%,
              rgba(250, 249, 246, .68) 50%,
              rgba(250, 249, 246, .42) 68%,
              rgba(250, 249, 246, .20) 84%,
              rgba(250, 249, 246, 0) 100%
          );

      z-index: 0;
  }

  .b612-footer__illustration {
    position: relative;
    z-index: 10;
  }

}