/* =========================================
   ÉQUIPMENTS BIÈRE
   TRANSITIONS ENTRE LES PAGES
========================================= */


/* =========================================
   PRÉPARATION À L'ARRIVÉE
========================================= */

html.eb-arriving body > :not(#eb-transition) {
    visibility: hidden;
}


/* =========================================
   CONTENEUR PRINCIPAL
========================================= */

#eb-transition {
    position: fixed;
    inset: 0;

    z-index: 2147483647;

    pointer-events: none;
    visibility: hidden;

    overflow: hidden;
    touch-action: none;

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

@media (max-width: 768px) {
    #eb-transition {
        inset: 0 0 auto;
        height: 100vh;
        height: 100lvh;
    }
}

#eb-transition.active {
    visibility: visible;
    pointer-events: auto;
}

/* Avoid Safari's fixed-layer clipping above its floating bottom toolbar.
   The page-positioned layer is kept aligned with the visible viewport by JS. */
#eb-transition[data-mobile-safari] {
    display: none;
    position: absolute;
    inset: var(--eb-transition-page-top, 0px) 0 auto;
    height: 100vh;
    height: 100lvh;
    min-height: var(--eb-transition-viewport-height, 0px);
}

#eb-transition[data-mobile-safari].active {
    display: block;
}


/* =========================================
   PERSONNALISATION
   TRANSITION EN ŒILLETON
========================================= */

/*
   Permet d'animer proprement
   le rayon du trou circulaire.
*/

@property --eb-hole {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

.eb-iris {
    position: absolute;
    inset: 0;

    background: #080808;

    visibility: hidden;
    pointer-events: none;
}


/* DÉPART :
   UN CERCLE NOIR GRANDIT
   JUSQU'À RECOUVRIR L'ANCIENNE PAGE
*/

#eb-transition.iris-out .eb-iris {
    visibility: visible;

    clip-path: circle(0% at 50% 50%);

    animation:
        ebIrisClose .8s
        cubic-bezier(.76, 0, .24, 1)
        forwards;
}

@keyframes ebIrisClose {

    0% {
        clip-path: circle(0% at 50% 50%);
    }

    100% {
        clip-path: circle(75vmax at 50% 50%);
    }

}


/* ARRIVÉE :
   LE FOND NOIR EST PERCÉ PAR UN
   TROU CIRCULAIRE QUI S'AGRANDIT
*/

#eb-transition.iris-in .eb-iris {
    visibility: visible;

    --eb-hole: 0px;

    -webkit-mask-image:
        radial-gradient(
            circle at center,
            transparent 0,
            transparent var(--eb-hole),
            #000 calc(var(--eb-hole) + 1px)
        );

    mask-image:
        radial-gradient(
            circle at center,
            transparent 0,
            transparent var(--eb-hole),
            #000 calc(var(--eb-hole) + 1px)
        );

    animation:
        ebIrisOpen 1.05s
        cubic-bezier(.65, 0, .2, 1)
        forwards;
}

@keyframes ebIrisOpen {

    0% {
        --eb-hole: 0px;
    }

    100% {
        --eb-hole: 150vmax;
    }

}


/* =========================================
   ENTRETIEN
   STYLE ÉDITORIAL
========================================= */

.eb-editorial {
    position: absolute;
    inset: 0;

    background: #080808;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 24px;
    padding: 25px;

    text-align: center;

    opacity: 0;
    visibility: hidden;
}


/* APPARITION DU FOND */

#eb-transition.editorial-out .eb-editorial {
    visibility: visible;

    animation:
        ebEditorialEnter .5s ease both;
}

@keyframes ebEditorialEnter {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


/* LOUPE */

.eb-search-icon {
    color: #d6a348;
    font-size: 42px;

    animation:
        ebSearch .8s ease-in-out both;
}

@keyframes ebSearch {

    0% {
        transform:
            translate(-24px, 12px)
            rotate(-30deg);

        opacity: 0;
    }

    65% {
        transform:
            translate(7px, -4px)
            rotate(12deg);

        opacity: 1;
    }

    100% {
        transform:
            translate(0, 0)
            rotate(0deg);

        opacity: 1;
    }

}


/* NOM DE L'ENTREPRISE */

.eb-editorial-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 5px;

    color: #d6a348;

    text-transform: uppercase;
}


/* TITRE */

.eb-editorial-title {
    font-size: clamp(42px, 9vw, 100px);
    font-weight: 900;

    color: #ffffff;

    letter-spacing: -3px;
    line-height: 1;

    transform: translateY(20px);
    opacity: 0;

    animation:
        ebTitle .7s .2s ease forwards;
}

@keyframes ebTitle {

    to {
        transform: translateY(0);
        opacity: 1;
    }

}


/* LIGNE DORÉE */

.eb-editorial-line {
    height: 2px;
    width: min(300px, 65vw);

    background: #d6a348;

    transform: scaleX(0);

    animation:
        ebLine .8s .3s ease forwards;
}

@keyframes ebLine {

    to {
        transform: scaleX(1);
    }

}


/* OUVERTURE À L'ARRIVÉE */

#eb-transition.editorial-in .eb-editorial {
    visibility: visible;
    opacity: 1;

    animation:
        ebEditorialExit 1s
        cubic-bezier(.7, 0, .2, 1)
        forwards;
}

@keyframes ebEditorialExit {

    0%, 15% {
        clip-path: inset(0 0 0 0);
    }

    100% {
        clip-path: inset(0 0 0 100%);
    }

}


/* =========================================
   LOUPE AU SURVOL DU BOUTON
========================================= */

.btn-book .search-icon {
    display: inline-block;

    color: #000000 !important;

    transform-origin: center;
}

.btn-book:hover .search-icon {
    animation:
        ebHoverSearch 1s
        ease-in-out infinite !important;
}

@keyframes ebHoverSearch {

    0%, 100% {
        transform:
            translate(0, 0)
            rotate(-12deg);
    }

    35% {
        transform:
            translate(5px, -3px)
            rotate(12deg)
            scale(1.15);
    }

    70% {
        transform:
            translate(-3px, 2px)
            rotate(-8deg);
    }

}


/* =========================================
   TRANSITION DÉPANNAGE
========================================= */

.eb-repair {
    position: absolute;
    inset: 0;

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

    overflow: hidden;
}

.eb-repair-panel {
    position: absolute;
    left: 0;

    width: 100%;
    height: 51%;

    background:
        repeating-linear-gradient(
            135deg,
            transparent 0,
            transparent 24px,
            rgba(214, 163, 72, .035) 25px,
            rgba(214, 163, 72, .035) 26px
        ),
        #101010;

    border-color: #d6a348;
    border-style: solid;

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

.eb-repair-panel.top {
    top: 0;

    border-width: 0 0 2px;

    transform: translateY(-105%);
}

.eb-repair-panel.bottom {
    bottom: 0;

    border-width: 2px 0 0;

    transform: translateY(105%);
}


/* FERMETURE DES PANNEAUX */

#eb-transition.repair-out .eb-repair-panel.top {
    animation:
        ebRepairTopClose .65s ease-in-out forwards;
}

#eb-transition.repair-out .eb-repair-panel.bottom {
    animation:
        ebRepairBottomClose .65s ease-in-out forwards;
}

@keyframes ebRepairTopClose {

    to {
        transform: translateY(0);
    }

}

@keyframes ebRepairBottomClose {

    to {
        transform: translateY(0);
    }

}


/* CENTRE DE LA TRANSITION */

.eb-repair-center {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 18px;

    color: #ffffff;

    opacity: 0;
}

#eb-transition.repair-out .eb-repair-center {
    animation:
        ebRepairCenterIn .35s .65s forwards;
}

@keyframes ebRepairCenterIn {

    to {
        opacity: 1;
    }

}


/* MÉCANISME */

.eb-repair-mechanism {
    position: relative;

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

    width: 105px;
    height: 105px;

    border: 2px solid #d6a348;
    border-radius: 50%;

    background: #181818;

    box-shadow:
        0 0 35px rgba(214, 163, 72, .25);
}

.eb-repair-nut {
    font-size: 38px;
    color: #d6a348;
}

.eb-repair-wrench {
    position: absolute;

    top: -15px;
    right: -18px;

    font-size: 43px;
    color: #ffffff;

    transform-origin: 25% 75%;
}

#eb-transition.repair-out .eb-repair-wrench {
    animation:
        ebMechanicTighten .65s .72s
        ease-in-out both;
}

@keyframes ebMechanicTighten {

    0% {
        transform:
            rotate(-55deg)
            translateY(-20px);

        opacity: 0;
    }

    30% {
        transform: rotate(12deg);
        opacity: 1;
    }

    55% {
        transform: rotate(-25deg);
    }

    80% {
        transform: rotate(12deg);
    }

    100% {
        transform: rotate(0deg);
    }

}

.eb-repair-title {
    font-size: clamp(35px, 8vw, 76px);
    font-weight: 900;
    letter-spacing: 3px;
}

.eb-repair-subtitle {
    color: #d6a348;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 4px;
}


/* OUVERTURE SUR LA PAGE DÉPANNAGE */

#eb-transition.repair-in .eb-repair-panel.top,
#eb-transition.repair-in .eb-repair-panel.bottom {
    transform: translateY(0);
}

#eb-transition.repair-in .eb-repair-panel.top {
    animation:
        ebRepairTopOpen 1s ease-in-out forwards;
}

#eb-transition.repair-in .eb-repair-panel.bottom {
    animation:
        ebRepairBottomOpen 1s ease-in-out forwards;
}

#eb-transition.repair-in .eb-repair-center {
    opacity: 1;

    animation:
        ebRepairCenterOut .4s ease forwards;
}

@keyframes ebRepairTopOpen {

    0%, 15% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-105%);
    }

}

@keyframes ebRepairBottomOpen {

    0%, 15% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(105%);
    }

}

@keyframes ebRepairCenterOut {

    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }

}


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

@media (max-width: 600px) {

    .eb-editorial {
        gap: 20px;
    }

    .eb-search-icon {
        font-size: 35px;
    }

    .eb-editorial-label {
        font-size: 9px;
        letter-spacing: 3px;
    }

    .eb-editorial-title {
        font-size: clamp(38px, 12vw, 65px);
        letter-spacing: -1px;
    }

    .eb-editorial-line {
        width: 60vw;
    }

}


/* =========================================
   ACCESSIBILITÉ
========================================= */

@media (prefers-reduced-motion: reduce) {

    html.eb-arriving body > :not(#eb-transition) {
        visibility: visible;
    }

    .btn-book:hover .search-icon {
        animation: none !important;
    }

    #eb-transition,
    #eb-transition * {
        animation: none !important;
        transition: none !important;
    }

}

/* =========================================
   TRANSITION ŒILLETON
   PERSONNALISATION
========================================= */

/* PROPRIÉTÉ ANIMABLE POUR LE TROU CIRCULAIRE */

@property --iris-radius {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}


/* CONTENEUR */

.eb-iris {
    position: absolute;
    inset: 0;

    background: #080808;

    visibility: hidden;
    pointer-events: none;
}


/* =========================================
   1. FERMETURE DE L'ŒILLETON
========================================= */

#eb-transition.iris-out .eb-iris {

    visibility: visible;

    clip-path: circle(0px at 50% 50%);

    animation:
        irisClose 0.8s
        cubic-bezier(.76, 0, .24, 1)
        forwards;

}

@keyframes irisClose {

    0% {
        clip-path: circle(0px at 50% 50%);
    }

    100% {
        clip-path: circle(150vmax at 50% 50%);
    }

}


/* =========================================
   2. OUVERTURE DE L'ŒILLETON
========================================= */

#eb-transition.iris-in .eb-iris {

    visibility: visible;

    --iris-radius: 0px;

    -webkit-ma: radial-gradient(
        circle at center,
        transparent 0px,
        transparent var(--iris-radius),
        #000000 calc(var(--iris-radius) + 1px)
    );

    mask-image: radial-gradient(
        circle at center,
        transparent 0px,
        transparent var(--iris-radius),
        #000000 calc(var(--iris-radius) + 1px)
    );

    animation:
        irisOpen 1.1s
        cubic-bezier(.65, 0, .2, 1)
        forwards;

}

@keyframes irisOpen {

    0% {
        --iris-radius: 0px;
    }

    100% {
        --iris-radius: 150vmax;
    }

}


/* =========================================
   ACCESSIBILITÉ
========================================= */

@media (prefers-reduced-motion: reduce) {

    #eb-transition.iris-out .eb-iris,
    #eb-transition.iris-in .eb-iris {
        animation: none !important;
    }

}

/* =========================================
   PERSONNALISATION
   TRANSITION ROULEAU DE PEINTURE
========================================= */

.eb-custom {
    position: absolute;
    inset: 0;

    overflow: hidden;

    visibility: hidden;
    pointer-events: none;
}


/* RIDEAU NOIR ET DORÉ */

.eb-custom-curtain {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            #080808 0%,
            #151008 65%,
            #30200b 100%
        );

    transform: translateY(-105%);

    border-bottom: 5px solid #d6a348;

    box-shadow:
        0 10px 35px rgba(214, 163, 72, .35);
}


/* CONTENU CENTRAL */

.eb-custom-content {
    position: absolute;
    inset: 0;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 20px;
    padding: 25px;

    text-align: center;
    color: #ffffff;

    opacity: 0;
}


/* GRAND ROULEAU */

.eb-custom-roller {
    font-size: 65px;
    color: #d6a348;

    filter:
        drop-shadow(0 0 15px rgba(214, 163, 72, .45));
}


/* NOM */

.eb-custom-brand {
    font-size: 11px;
    font-weight: 800;

    letter-spacing: 5px;
    color: #d6a348;
}


/* TITRE */

.eb-custom-title {
    font-size: clamp(28px, 7vw, 75px);
    font-weight: 900;

    letter-spacing: 2px;
    line-height: 1.1;

    overflow-wrap: anywhere;
}


/* LIGNE */

.eb-custom-line {
    width: min(320px, 65vw);
    height: 3px;

    background: #d6a348;

    transform: scaleX(0);
}


/* =========================================
   DÉPART
========================================= */

#eb-transition.custom-out .eb-custom {
    visibility: visible;
}

#eb-transition.custom-out .eb-custom-curtain {
    animation:
        ebCustomClose .7s
        cubic-bezier(.7, 0, .2, 1)
        forwards;
}

@keyframes ebCustomClose {

    from {
        transform: translateY(-105%);
    }

    to {
        transform: translateY(0);
    }

}


/* LE CONTENU APPARAÎT APRÈS LE RIDEAU */

#eb-transition.custom-out .eb-custom-content {
    animation:
        ebCustomContentIn .4s .7s ease forwards;
}

@keyframes ebCustomContentIn {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* LE ROULEAU DESCEND ET REMONTE */

#eb-transition.custom-out .eb-custom-roller {
    animation:
        ebCustomRoller 1s .35s ease-in-out both;
}

@keyframes ebCustomRoller {

    0% {
        transform: translateY(-45px) rotate(-15deg);
        opacity: 0;
    }

    40% {
        transform: translateY(15px) rotate(8deg);
        opacity: 1;
    }

    70% {
        transform: translateY(-8px) rotate(-5deg);
    }

    100% {
        transform: translateY(0) rotate(0);
        opacity: 1;
    }

}


/* LIGNE DORÉE */

#eb-transition.custom-out .eb-custom-line {
    animation:
        ebCustomLine .55s .85s ease forwards;
}

@keyframes ebCustomLine {

    to {
        transform: scaleX(1);
    }

}


/* =========================================
   ARRIVÉE SUR PERSONNALISATION
========================================= */

#eb-transition.custom-in .eb-custom {
    visibility: visible;
}

#eb-transition.custom-in .eb-custom-curtain {
    transform: translateY(0);

    animation:
        ebCustomOpen 1s
        cubic-bezier(.7, 0, .2, 1)
        forwards;
}

@keyframes ebCustomOpen {

    0%, 15% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(105%);
    }

}


/* LE TITRE DISPARAÎT AVEC LE RIDEAU */

#eb-transition.custom-in .eb-custom-content {
    opacity: 1;

    animation:
        ebCustomContentOut .35s ease forwards;
}

@keyframes ebCustomContentOut {

    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }

}


/* ACCESSIBILITÉ */

@media (prefers-reduced-motion: reduce) {

    #eb-transition.custom-out *,
    #eb-transition.custom-in * {
        animation: none !important;
    }

}