@font-face {

    font-family: 'PP Mori';
    src:
        url(/Asset/Fonts/PPMori-SemiBold.woff2) format('woff2'),
        url(/Asset/Fonts/PPMori-SemiBold.woff) format('woff');

    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


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


html {

    height: 100vh;
    width: 100vw;

    padding: 0;
    margin: 0;

    overflow: hidden;
    touch-action: manipulation;    
}



/*-----------------> BODY <----------------*/


:root {

    --spacing: 2%;   /* CONTROLE GLOBALE DU PADDING ET GAP */
}


body {

    height: 100vh;
    width: 100vw;
    padding: var(--spacing);

    display: flex;
    flex-direction: column;

    font-family: PP mori, sans-serif;
    background-color: rgb(242, 242, 242);

    overflow: hidden;    
}



/*-----------------> HEADER <----------------*/


header {

    flex: 0 0 20px; /* Hauteur fixe */
    display: flex;
    justify-content: flex-start;
    align-items: center;

    margin-bottom: var(--spacing);
}


.logo svg {

    height: 10vh;
    width: auto;
    display: block;

    fill: rgb(0, 0, 0);

    cursor: pointer;
}



/*-----------------> MAIN-CONTAINER <----------------*/


.Main-Container {

    flex: 10;
    display: flex;

    position: relative;
}



/*-----------------> CONTENTS <----------------*/


.Content-Texte {

    flex: 0.8;
    position:relative;
}


.Content-Texte h1 {

    position: absolute;
    bottom: 0;
    left: 0;

    flex-wrap: wrap;

    font-feature-settings: "kern" 1;
    font-size: clamp(2rem, 12vw, 8rem); 
    
    opacity: 1;
    line-height: 1; 

    transition:
        line-height 0.3s ease; 

    text-indent: clamp(2rem, 8vw, 6rem);
    text-wrap: balance;
    text-box: trim-both cap alphabetic;

    z-index: 1;
}


h1.active {

    opacity: 0;
    transition:
        opacity 1s ease-in-out; 
}



/*-----------------> Rotate <----------------*/


.Rotate {

    position: absolute;
    top: -14%;
    right: 10%;

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

    width: clamp(360px, 50vw, 680px);
    height: clamp(360px, 50vw, 680px);

    transform: rotate(-22deg);

    border-width: 36px;
    border-style: solid;
    border-color: transparent;

    z-index: 0;

    transition:
        z-index 0.4s ease-in;
}


.Rotate:hover {

    animation: rotateRebound 0.8s cubic-bezier(.44,.24,.27,.92) 0.1s forwards;

    z-index: 2;
}

   @keyframes rotateRebound {
        0% {
            transform: rotate(-22deg);
        }
        50% {
            transform: rotate(18deg);
        }
        75% {
            transform: rotate(4deg);
        }
        100% {
            transform: rotate(8deg);
        }
}


.Rotate:not(hover) {

    animation: rotateBack 0.6s ease-out forwards;
}

    @keyframes rotateBack {
        0% {
            transform: rotate(8deg);
        }
        100% {
            transform: rotate(-22deg);
        }
}



/*-----------------> Square + Triangle <----------------*/


.Square {

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

    transform: scale(1.26);

    transition:
        transform 0.6s cubic-bezier(.47,0,.17,.17);

    cursor: pointer;
    pointer-events: bounding-box;
    touch-action: manipulation;
}


.Square:hover {

    transform: scale(1.2);

    .extern-Spath {  fill: rgb(255, 0, 106);  }   /* extern-Spath = Square path */

    .extern-path {  fill:rgb(0, 0, 0);  }   /* extern-path = Triangle */
    
}


.Square.active {

    .inner-Spath {  fill:rgb(255, 0, 106); }   /* inner-Spath = Square path */

    transition-delay: 0.25s;
    transform: scale(50);
}


.extern-Spath {

    fill: rgb(186, 186, 186);
    stroke-width: 0;

    cursor: pointer;
}


.inner-Spath {

    fill: rgb(242, 242, 242);
    stroke-width: 0;
   
    transform-box: view-box;
    transform-origin: 50% 50%; 
    transform: scale(0.86);      /* gestion de l'épaisseur du stroke */

    cursor: pointer;
}



/*-----------------> Triangle <----------------*/


.triangle-transform {

    transform: scale(0.2);
}


.extern-path {

    fill:rgb(186, 186, 186);
    stroke-width: 0;

    cursor: pointer;
}

.inner-path {

    fill: rgb(242, 242, 242);
    stroke-width: 0;

    transform: scale(0);      /* gestion de l'épaisseur du stroke */

    cursor: pointer;
}



/*-----------------> OVERLAY <----------------*/


body.video-active .extern-path {
    fill: black;                      /* gestion couleur :  Triangle lors de video-active */
}


.Overlay {

    position: fixed;
    top: 50%;
    left: 50%;

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

    width: 100%;
    height: 100%;

    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
    transition:
        0.4s ease-out;

    z-index: 0;
}


.Overlay.active {

    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition-delay: 0.6s;

    z-index: 4;
}


.Overlay video {

    max-width: 90%;
    max-height: 60%;

    border-radius: 4px;
    outline: none;
}


.Overlay .close {

    all: unset;
    background: none;
    border: none;

    position: absolute;
    top: 25px;
    right: 30px;

    font-size: 1.2rem;
    font-weight: 900;
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    font-feature-settings: "kern" 1;

    cursor: pointer;
}



/*-----------------> RESPONSIVE <----------------*/


@media (min-aspect-ratio: 16/9) {

  .Content-Texte h1 { line-height: 0.95; }
}


@media (max-aspect-ratio: 3/4) {
    
  .Content-Texte h1 { line-height: 1.32; }
}




/* TABLETTES 1-1280px */ 
@media (max-width: 1280px) {

    .logo svg { height: 9vh; }
    
    .Main-Container { flex: 12; }

    .Rotate {   Top: -5%;
                right: 5%; }    
}



/* SMARTPHONE 1-800px */ 
@media (max-width: 800px) { 

    .logo svg { height: 7vh; }
    
    .Main-Container { flex: 16; }
    
    .Content-Texte h1 { top: clamp(4%, 8vh, 14%); }

    .Rotate {   Top: 42%;
                right: -4%;

                width: 400px;
                height: 400px; } 

    .Square {   width: 100%;
                height: 100%; }


    .Square.active { transform: scale(46); }  
}



/* SMARTPHONE 1-380px */
@media (max-width: 380px) { 

    .Content-Texte h1 { top: clamp(4%, 7vh, 14%); }

    .Rotate {   Top: 42%;
                right: -4%;

                width: 320px;
                height: 320px; } 

    .Square {   width: 100%;
                height: 100%; }

    .Square.active { transform: scale(44); }
}