/* =========================================================
   PREUVE DE TRAVAIL
   FICHIER UNIQUE : CSS/zurich.css
========================================================= */


/* =========================================================
   BASE
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#f5f4f1;
    color:#1d2b44;
    font-family:"Poppins",sans-serif;
}

.zurichPage{
    width:100%;
    min-height:100vh;
    padding:25px;
}


/* =========================================================
   CONTAINER
========================================================= */

.zurichContainer{
    width:min(1200px,100%);
    margin:auto;
}


/* =========================================================
   HERO
========================================================= */

.zurichHero{
    position:relative;
    min-height:300px;
    border-radius:22px;
    overflow:hidden;

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

    padding:50px 30px;

    background:
    linear-gradient(
        90deg,
        rgba(255,255,255,.96),
        rgba(255,255,255,.86),
        rgba(255,255,255,.58)
    ),
    url("../Gallerie/suisse/preuve_hero.jpg");

    background-size:cover;
    background-position:center;

    border:1px solid rgba(200,140,50,.18);

    box-shadow:
    0 15px 45px rgba(27,38,58,.10);
}

.zurichHeroContent{
    position:relative;
    z-index:2;

    width:100%;
    max-width:800px;

    text-align:center;
}


/* =========================================================
   BADGE
========================================================= */

.zurichBadge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:8px 18px;

    border-radius:50px;

    font-size:13px;
    font-weight:600;
    letter-spacing:.5px;

    color:#c47b16;

    border:1px solid rgba(196,123,22,.35);

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

    margin-bottom:18px;
}


/* =========================================================
   HERO TITLE
========================================================= */

.zurichHero h1{
    font-size:52px;
    font-weight:800;
    letter-spacing:1px;

    color:#202d46;

    line-height:1.1;

    margin-bottom:18px;
}

.zurichHeroText{
    max-width:620px;

    margin:0 auto;

    color:#4c5667;

    font-size:16px;

    line-height:1.7;
}


/* =========================================================
   STATISTICS
========================================================= */

.zurichStats{
    display:flex;

    justify-content:center;

    gap:45px;

    margin-top:28px;

    flex-wrap:wrap;
}

.zurichStat{
    display:flex;

    align-items:center;

    gap:12px;
}

.zurichStatIcon{
    width:38px;
    height:38px;

    border-radius:50%;

    display:flex;

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

    border:1px solid #d69a45;

    color:#c47b16;

    background:#fff;
}

.zurichStatContent strong{
    display:block;

    font-size:17px;

    color:#26334b;
}

.zurichStatContent span{
    display:block;

    font-size:12px;

    color:#697386;
}


/* =========================================================
   PREUVES GRID
========================================================= */

.zurichGrid{
    display:grid;

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

    gap:18px;

    margin-top:38px;
}


/* =========================================================
   CARD
========================================================= */

.zurichCard{
    position:relative;

    min-height:215px;

    display:grid;

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

    gap:18px;

    padding:12px;

    border-radius:12px;

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

    border:
    1px solid
    rgba(211,151,59,.55);

    box-shadow:
    0 8px 25px
    rgba(25,35,50,.06);

    transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

.zurichCard:hover{
    transform:
    translateY(-4px);

    border-color:#d78c22;

    box-shadow:
    0 18px 40px
    rgba(25,35,50,.12);
}


/* =========================================================
   NUMERO
========================================================= */

.zurichNumber{
    font-size:58px;

    font-weight:800;

    color:
    rgba(30,45,70,.12);

    line-height:1;

    padding-top:10px;

    text-align:center;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.zurichCardContent{
    padding:10px 0;

    display:flex;

    flex-direction:column;

    min-width:0;
}

.zurichCardTitle{
    font-size:17px;

    font-weight:700;

    color:#27344b;

    line-height:1.35;

    margin-bottom:12px;
}

.zurichCardDescription{
    font-size:12px;

    color:#4f5968;

    line-height:1.7;

    margin-bottom:16px;
}


/* =========================================================
   DATE
========================================================= */

.zurichDate{
    display:flex;

    align-items:center;

    gap:7px;

    font-size:11px;

    color:#586273;

    margin-bottom:15px;
}


/* =========================================================
   ACTIONS
========================================================= */

.zurichActions{
    display:flex;

    gap:9px;

    margin-top:auto;
}

.zurichAction{
    display:inline-flex;

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

    gap:6px;

    padding:8px 12px;

    border-radius:9px;

    border:
    1px solid
    rgba(50,60,75,.15);

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

    color:#3f4b5e;

    font-family:inherit;

    font-size:11px;

    cursor:pointer;

    transition:.25s ease;
}

.zurichAction:hover{
    transform:
    translateY(-2px);

    border-color:#d38b28;

    box-shadow:
    0 7px 16px
    rgba(25,35,50,.10);
}


/* =========================================================
   IMAGE
========================================================= */

.zurichVisual{
    position:relative;

    height:100%;

    min-height:190px;

    border-radius:10px;

    overflow:hidden;

    cursor:pointer;

    background:#ddd;
}

.zurichVisual img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
    transform .4s ease;
}

.zurichCard:hover
.zurichVisual img{
    transform:
    scale(1.06);
}


/* =========================================================
   PLUS BUTTON
========================================================= */

.zurichOpen{
    position:absolute;

    right:12px;
    bottom:12px;

    width:45px;
    height:45px;

    border-radius:50%;

    border:
    2px solid
    rgba(255,255,255,.9);

    background:#e69a2c;

    color:white;

    font-size:29px;

    line-height:1;

    display:flex;

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

    cursor:pointer;

    box-shadow:
    0 8px 20px
    rgba(0,0,0,.22);

    transition:.25s ease;
}

.zurichOpen:hover{
    transform:
    scale(1.08);

    background:#ce8017;
}


/* =========================================================
   MODAL
========================================================= */

.zurichModal{
    position:fixed;

    inset:0;

    display:none;

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

    padding:25px;

    background:
    rgba(15,24,38,.78);

    backdrop-filter:
    blur(8px);

    z-index:999999;
}

.zurichModal.active{
    display:flex;
}


/* =========================================================
   MODAL BOX
========================================================= */

.zurichModalBox{
    position:relative;

    width:min(950px,100%);

    max-height:90vh;

    overflow-y:auto;

    padding:18px;

    border-radius:16px;

    background:
    #ffffff;

    box-shadow:
    0 30px 90px
    rgba(0,0,0,.45);

    animation:
    zurichPopup .3s ease;
}


/* =========================================================
   CLOSE
========================================================= */

.zurichClose{
    position:absolute;

    top:14px;
    right:14px;

    width:40px;
    height:40px;

    z-index:5;

    border:none;

    border-radius:50%;

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

    color:#222;

    font-size:24px;

    cursor:pointer;

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


/* =========================================================
   MODAL CONTENT
========================================================= */

.zurichModalContent{
    display:grid;

    grid-template-columns:
    1.1fr .9fr;

    gap:25px;

    padding:20px;
}


/* =========================================================
   MAIN GALLERY IMAGE
========================================================= */

.zurichMainMedia{
    width:100%;

    height:420px;

    overflow:hidden;

    border-radius:10px;

    background:#111;
}

.zurichMainMedia img,
.zurichMainMedia video{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}


/* =========================================================
   GALLERY THUMBNAILS
========================================================= */

.zurichGallery{
    display:flex;

    gap:10px;

    margin-top:12px;

    flex-wrap:wrap;
}

.zurichThumb{
    width:70px;
    height:55px;

    border-radius:7px;

    overflow:hidden;

    cursor:pointer;

    border:
    2px solid transparent;

    transition:.2s;
}

.zurichThumb:hover,
.zurichThumb.active{
    border-color:#d88d25;
}

.zurichThumb img{
    width:100%;
    height:100%;

    object-fit:cover;
}


/* =========================================================
   MODAL DETAILS
========================================================= */

.zurichDetails{
    padding-top:8px;
}

.zurichModalNumber{
    font-size:48px;

    font-weight:800;

    color:
    rgba(34,47,71,.18);

    margin-bottom:6px;
}

.zurichModalTitle{
    font-size:22px;

    color:#253149;

    margin-bottom:15px;
}

.zurichModalDescription{
    font-size:13px;

    color:#586273;

    line-height:1.8;

    margin-bottom:20px;
}


/* =========================================================
   MODAL DATE
========================================================= */

.zurichModalDate{
    display:flex;

    align-items:center;

    gap:8px;

    font-size:12px;

    color:#566173;

    margin-bottom:20px;
}


/* =========================================================
   MODAL ACTIONS
========================================================= */

.zurichModalActions{
    display:flex;

    gap:12px;

    margin-top:25px;
}

.zurichModalShare,
.zurichModalLike{
    border:none;

    border-radius:9px;

    padding:11px 18px;

    font-family:inherit;

    font-size:12px;

    cursor:pointer;
}

.zurichModalShare{
    background:#fff;

    color:#394457;

    border:
    1px solid
    rgba(40,50,70,.15);
}

.zurichModalLike{
    background:#e69a2c;

    color:white;

    min-width:130px;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes zurichPopup{

    from{

        opacity:0;

        transform:
        translateY(20px)
        scale(.97);

    }

    to{

        opacity:1;

        transform:
        translateY(0)
        scale(1);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:950px){

    .zurichGrid{

        grid-template-columns:
        1fr;

    }

    .zurichHero h1{

        font-size:42px;

    }

}


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

@media(max-width:650px){

    .zurichPage{

        padding:14px;

    }

    .zurichHero{

        padding:
        45px 20px;

    }

    .zurichHero h1{

        font-size:31px;

    }

    .zurichHeroText{

        font-size:13px;

    }

    .zurichStats{

        gap:18px;

    }

    .zurichCard{

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

    }

    .zurichVisual{

        grid-column:
        1 / -1;

        grid-row:3;

        min-height:220px;

    }

    .zurichNumber{

        font-size:45px;

    }

    .zurichModal{

        padding:10px;

    }

    .zurichModalBox{

        max-height:95vh;

        padding:10px;

    }

    .zurichModalContent{

        grid-template-columns:
        1fr;

        padding:10px;

    }

    .zurichMainMedia{

        height:260px;

    }

}