@charset "utf-8";
/* mise en page CSS */

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

*:focus
{
    outline: none;
}

html, body
{
    overflow-x: clip;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #D9D9D9 #353535;
  }
  
/* Chrome, Edge and Safari */
*::-webkit-scrollbar
{
    width: 1.5vmax;
}

/* width */
::-webkit-scrollbar
{
    width: 1.5vmax;
}
  
/* Track */
::-webkit-scrollbar-track
{
    background: #353535; 
}
   
/* Handle */
::-webkit-scrollbar-thumb
{
    background: #d9d9d9;
    border-radius: 10px;
}
  
/* Handle on hover */
::-webkit-scrollbar-thumb:hover
{
    background: #ffffff; 
}

body
{
    background: url(img/dark-matter.png) repeat;
    background-color: #949494;
    color: #353535;
}

.saira-extra-condensed-regular
{
    font-family: "Saira Extra Condensed", sans-serif;
    font-weight: 400;
    font-style: normal;
}
  
.saira-extra-condensed-bold
{
    font-family: "Saira Extra Condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
}

/* -------------------------------- 

Effets bg-circles

-------------------------------- */
  

/* -------------------------------- 

SVG

-------------------------------- */

#pathH1-bg, #pathH2-bg, #pathH3-bg, #pathV1-bg, #pathV2-bg, #pathV3-bg
{
    stroke: #d9d9d9;
    stroke-width: 3.7vmin;
    stroke-opacity: 100%;
}

/*@keyframes defilement
{
    0% {
        stroke-dashoffset: 100%;
    }
    100% {
        stroke-dashoffset: 0%;
    }
}*/

/*.pointAnimation
{
    stroke: #949494;
    stroke-width: .4vmax;
    stroke-dasharray: .4vmax, .8vmax;
    animation: defilement 50s linear infinite;
}*/

#svgContainer
{
    width: 100vw;
    z-index: -10;
    position: absolute;
    top: 0;
    left: 0;
}

#svg1
{
    width: 100%;
}

.departH3
{
    display: block;
    height: 1px;
    width: 1px;
    background: #d9d9d9;
    position: relative;
    bottom: 1vmin;
    margin: 0 auto;
    z-index: -5;    
}

#pathH3-bg, #pathH3-fg, #pathH2-bg, #pathH2-fg
{
    visibility: visible;
}

#pathV1-bg, #pathV1-fg, #pathV2-bg, #pathV2-fg, #pathV3-bg, #pathV3-fg
{
    visibility: hidden;
}

.quarter-circle
{
    position: fixed;
    top: 0;
    left: 0;
    width: 20vmin;
    height: 20vmin;
    background-color: #e5b400;
    border-radius: 0 0 20vmin 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: .3vmin .3vmin 1vmin .3vmin rgba(0,0,0,0.5);
    z-index: 1000;
    transition: transform 0.3s ease-out;
}

.quarter-circle.slide-out
{
    transform: translateX(-100%) translateY(-100%);
}

.quarter-circle.slide-in
{
    transform: translateX(0) translateY(0);
}

.circle-text
{
    color: #353535;
    font-weight: bold;
    font-size: 5vmin;
    text-align: center;
    transform: translate(-12%, -20%) rotate(-45deg);
}

/* -------------------------------- 

1er écran

-------------------------------- */

.ecransA
{
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.subEcransA
{
    position: relative;
    width: calc(25% * 1.25);
    display: flex;
    justify-content: space-around;
    flex-flow: column;
    margin-left: 25vmax;
    background: #d9d9d9;
    border: 1vmax double #d9d9d9;
    border-radius: 1.2vmax;
    background-clip: padding-box;
    box-shadow: .5vmin .5vmin 1.5vmin .5vmin rgba(0,0,0,0.5);
}

.info
{
    position: absolute;
    bottom: 1.2vmin;
    right: 1.2vmin;
    color: #63993f;
    font-size: 2.2vmax;
    z-index: 5;
    cursor: pointer;
    animation: pulseInfo 2s infinite ease-in-out; /* Animation douce */
    transition: color 0.3s ease;
}

@keyframes pulseInfo{
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

.info:hover {
    color: #b7472a;
    /* On met l'animation en pause pour fixer l'attention */
    animation-play-state: paused; 
}

.hoverMoiReel
{
  position: absolute;
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2; 
  
  /* Design identique à .subEcransA pour superposition parfaite */
  background: #d9d9d9;
  border-radius: 1.2vmax; 
  
  /* Centrage de l'image */
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  
  /* --- EFFET BLUR ET FADE --- */
  opacity: 0;
  filter: blur(20px);
  transform: scale(1.1);
  visibility: visible;
  
  /* Empêche le clic tant que l'effet n'est pas visible */
  pointer-events: none;
  
  /* Transition fluide et professionnelle */
  transition: all 0.5s ease;
}

.texte-compact
{
    font-size: 5vmin;
    line-height: 1;
}

.texte-compact1
{
    color: #D9D9D9;
    font-size: 4.2vmin;
}

.hoverMoiReel video
{
    width: 78%;
    display: block;
    pointer-events: none;
    object-fit: cover;
    /* Zoom à 102% pour manger les bords disgracieux */
    transform: scale(1.02);    
    /* Important pour éviter le flou lors de la transformation */
    backface-visibility: hidden;
}

.info:hover + .hoverMoiReel
{
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
  
  /* On réactive les clics sur le contenu révélé */
  pointer-events: auto;
}

header
{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: auto;
}

.titre
{
    text-align: center;
    width: 98%;
    line-height: 0.9;
    padding-top: 1.5vmax;
}

.FC
{       
    font-size: 6.5vmin;
}

.sousTitre
{   
    color: #b7472a;
    font-size: 5vmin;
}

.moi
{   
    position: relative;
    display: flex;
    align-items: center;
    width: 95%;
}

.video-wrapper
{
    position: relative;
    display: flex; 
    justify-content: center;
    align-items: center;    
    width: 100%;
    transition: all 0.2s ease-in-out;
    overflow: hidden;
}

.moi3D
{
    width: 80%;
    display: block;
    pointer-events: none;
    object-fit: cover;
    /* Zoom à 102% pour manger les bords disgracieux */
    transform: scale(1.02);    
    /* Important pour éviter le flou lors de la transformation */
    backface-visibility: hidden;
}

/* -------------------------------- 

Effets titre écran 1.1

-------------------------------- */

.cd-intro
{  
    text-align: center;
}

.cd-headline
{
    font-size: 5vmin;
}

.cd-words-wrapper
{
    display: inline-block;
    position: relative;
    text-align: left;
    color: #3f668e;
}

.cd-words-wrapper b
{
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    left: 0;
    top: 0;
}

.cd-words-wrapper b.is-visible
{
    position: relative;
}

.no-js .cd-words-wrapper b
{
    opacity: 0;
}

.no-js .cd-words-wrapper b.is-visible
{
    opacity: 1;
}

/* -------------------------------- 

Effets titre écran 1.2

-------------------------------- */

.cd-headline.clip span
{
    display: inline-block;
    padding-bottom: .2em;
}

.cd-headline.clip .cd-words-wrapper
{
    overflow: hidden;
    vertical-align: top;
}

.cd-headline.clip .cd-words-wrapper::after
{
    /* line */
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: .28vmax;
    height: 80%;
    background-color: #3f668e;
}

.cd-headline.clip b
{
    opacity: 0;
}

.cd-headline.clip b.is-visible
{
    opacity: 1;
}

/* -------------------------------- 

2è écran

-------------------------------- */

.ecransB
{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.subEcransB
{
    width: 100%;
    height: 80%;
    display: flex;
}

.ecransC
{
    width: 100%;
    height: 80%;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.choixA
{
    display: flex;
    text-align: center;
    height: 40vmin;
    width: 87vmin;
    background: #d9d9d9;
    border: 1vmax double #d9d9d9;
    border-radius: 1.2vmax;
    background-clip: padding-box;
    box-shadow: .5vmin .5vmin 1.5vmin .5vmin rgba(0,0,0,0.5);
}

.departH2V2
{    
    width: 100%;
    height: 99%;
    display: flex;
    flex-direction: column;
}

.choixB
{
    align-self: flex-end;
    height: 40vmin;
    width: 30vmin;
    display: flex;
    flex-direction: column;
    text-align: center;
    background: #d9d9d9;
    border: 1vmax double #d9d9d9;
    border-radius: 1.2vmax;
    background-clip: padding-box;
    box-shadow: .5vmin .5vmin 1.5vmin .5vmin rgba(0,0,0,0.5);
}

.choixCVA, .choixCVB
{
    width: 95%;
    margin: auto;   
    font-size: 2.4vmin;
}

.choix-CVA-V
{
    display: none;
}

.mon-secretV
{
    display: none;
}

.iconesA
{
    width: 100%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.iconesB
{
    margin: auto;
    display: flex;
}

.image-container
{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cvBase
{
    width: 17vmin;
    height: auto;
}

/* Eléments pour l'animation du spinner */

/* ===== Effet Spinner commun ===== */
.rotate-effect
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(9vmin, 17vmin, 17vmin);
    height: clamp(9vmin, 17vmin, 17vmin);
    pointer-events: none;
    z-index: 5;
}

/* Calque tournant */
.rotate-effect span
{
    display: block;
    width: 100%;
    height: 100%;
    animation: spinnerRotate 2s linear infinite;
    will-change: transform;
}

/* Anneau stylisé */
.rotate-effect span::before
{
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 80%;
    height: 80%;
    border-radius: 50%;

    /* Épaisseur : plus petit = plus épais */
    padding: 0.7vmin;

    aspect-ratio: 1;
    pointer-events: none;

    --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
}

/* Animation fluide */
@keyframes spinnerRotate
{
    to { transform: rotate(360deg); }
}

/* Couleurs spécifiques */
.cv1-effect span::before { background: conic-gradient(from 0deg, #b7472a, #d9d9d9, #b7472a); }
.cv2-effect span::before { background: conic-gradient(from 0deg, #63993f, #d9d9d9, #63993f); }
.cv3-effect span::before { background: conic-gradient(from 0deg, #3f668e, #d9d9d9, #3f668e); }
.cv4-effect span::before { background: conic-gradient(from 0deg, #e5b400, #d9d9d9, #e5b400); }

/* ===== Images CV ===== */
.cv1, .cv2, .cv3, .cv4
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(9vmin, 17vmin, 17vmin);
    height: auto;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
}

.cv1:hover, .cv2:hover, .cv3:hover, .cv4:hover {
    filter: brightness(0.85);
}

.hvr-shrink
{
    transition: width 0.2s, height 0.2s;
}

.hvr-shrink1
{
    display: inline-block;
    vertical-align: middle;
    transition-duration: 0.2s;
    transition-property: transform;
}

.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active
{
    width: calc(17vmin - 8%);
}

.hvr-shrink1:hover, .hvr-shrink1:focus, .hvr-shrink1:active
{
    transform: scale(0.9);
}

.reseaux
{
    display: flex;
    align-items: center;
    height: 13%;
    margin-bottom: -2vh;
}

.reseauxA
{
    display: flex;
    align-items: center;
    background: #d9d9d9;
    border: 1vmax double #d9d9d9;
    border-radius: 0.7vmax;
    background-clip: padding-box;
    box-shadow: .5vmin .5vmin 1.5vmin .5vmin rgba(0,0,0,0.5);
}

.reseauxB
{
    display: flex;
    align-items: center;
}

.illustration3 img
{   
    width: 20vmin;
    cursor: pointer;
}

.ecransD
{
    display: flex;
    align-items: center;
}

.copyright1
{
    width: 100%;
    padding-bottom: 1vh;
    font-size: 2vmin;
    color: #ffffff;
    text-align: center;
    filter: drop-shadow(0 0 0.4vmin rgba(0,0,0,1));
}

.copyright2
{
    display: none;
}

.fa-grin-alt
{
    color: #e5b400;
}

.rgpd
{
    width: fit-content;
    padding: 0 2vmin;
    border-radius: 0 20px 0 0;
    background-color: #d9d9d9;
    font-size: 2vmin;
    text-align: center;
}

.fa-cookie-bite
{
    color: #964B00;
}

.lien:link, .lien:visited
{
    color: #353535;
}

/* --------------------------------

Modal

-------------------------------- */

/* Overlay style */

.overlay-secret, .overlay-vid
{
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1010;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(35,35,35,0.9);
}

/* Overlay closing cross */
.overlay-secret .overlay-close, .overlay-vid .overlay-close
{
    width: 3vmax;
    height: 3vmax;
    position: absolute;
    top: calc(5% - 1.5vmax);
    overflow: hidden;
    border: none;
    background: url(img/cross.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    text-indent: 200%;
    color: transparent;
    outline: none;
    z-index: 1020;
    cursor: pointer;
}

/* Effects */

.overlay-door
{
    visibility: hidden;
    width: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: width 0.5s 0.3s, visibility 0s 0.8s;
}

.overlay-door.open
{
    visibility: visible;
    width: 100%;
    transition: width 0.5s;
}

.overlay-door .modal,
.overlay-door .overlay-close
{
    opacity: 0;
    transition: opacity 0.3s 0.5s;
}

.overlay-door.open .modal,
.overlay-door.open .overlay-close
{
    opacity: 1;
    transition-delay: 0.5s;
}

.overlay-door.close .modal,
.overlay-door.close .overlay-close
{
    transition-delay: 0s;
}

.modal
{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
    width: 95%;
    overflow: hidden;
    box-sizing: border-box;
}

/* modal vidéo */

video
{
    max-width: 100%;
    max-height: 100%;
}

/* modal canette */

.modal img
{
    max-width: 100%;
    max-height: 100%;
}

.canettePortrait
{
    display: none;
}

/* -------------------------------- 

Infobulle

-------------------------------- */

/* Tooltip container */

.tooltip
{
    position: relative;
    display: inline-block;
}

/* Tooltip text 1 */

.tooltiptext, .tooltiptext1
{
    visibility: hidden;
    background-color: #353535;
    color: #ffffff;
    font-size: 2.5vmin;
    text-align: center;
    padding: 1vmin;
    border-radius: 1vmin;
    position: absolute;
    z-index: 5;
    width: 20vmin;
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: .5vmin .5vmin 1.5vmin .5vmin rgba(0,0,0,0.5);
}

.tooltiptext1
{
    left: -9%;
}

.bOrange
{
    border: #b7472a solid .7vmin;
}

.bVert
{
    border: #669933 solid .7vmin;
}

.bBleu
{
    border: #3f668e solid .7vmin;
}

.bJaune
{
    border: #e5b400 solid .7vmin;
}

.tooltip .tooltiptext
{
    bottom: 105%;
}

.tooltip .tooltiptext1
{
    top: 105%;
}

.fa-volume-high
{
    color: #e5b400;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext, .tooltip:hover .tooltiptext1
{
    visibility: visible;
    opacity: 1;
}

.tooltip .tooltiptext::after, .tooltip .tooltiptext1::after
{
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -1.2vmin;  
    border-width: 1.2vmin;
    border-style: solid;
    border-color: #353535 transparent transparent transparent;
}  

.tooltip .tooltiptext::after
{   
    top: 100%;  /* At the top of the tooltip */
}

.tooltip .tooltiptext1::after
{  
    bottom: 100%;  /* At the top of the tooltip */    
    transform: rotate(180deg);
}

/* --- ANIMATION FLOTTEMENT 2D --- */

@keyframes flottementXY {
  0%   { transform: translate(0px, 0px); }
  20%  { transform: translate(6px, -8px); }   /* Déplacement vers la droite et le haut */
  40%  { transform: translate(-5px, -4px); }  /* Déplacement vers la gauche et le haut */
  60%  { transform: translate(-8px, 6px); }   /* Déplacement vers la gauche et le bas */
  80%  { transform: translate(5px, 8px); }    /* Déplacement vers la droite et le bas */
  100% { transform: translate(0px, 0px); }    /* Retour en douceur à la position de départ */
}

/* Application avec désynchronisation (durées et délais différents) */
.subEcransA
{
  animation: flottementXY 6s ease-in-out infinite;
}

.choixA
{
  animation: flottementXY 7s ease-in-out infinite 0.5s; 
}

.choixB
{
  animation: flottementXY 5.5s ease-in-out infinite 1.2s;
}

/* Mise en pause au survol de la souris */
.subEcransA:hover,
.choixA:hover,
.choixB:hover
{
  animation-play-state: paused;
}

/* -------------------------------- 

Styles de base (mobile portrait)

-------------------------------- */

@media (orientation: portrait)
    
{   
    #pathH1-bg, #pathH1-fg
    {
        visibility: hidden;
    }

    #pathV1-bg, #pathV1-fg
    {
        visibility: visible;
    }

    #pathH2-bg, #pathH3-bg, #pathV1-bg, #pathV2-bg, #pathV3-bg
    {
        stroke-width: 3.7vmin;
    }
    
    /*.pointAnimation
    {        
        stroke-width: .5vmax;
        stroke-dasharray: .5vmax, 1vmax;
        animation: defilement 70s linear infinite;
    }*/    

    .circle1
    {
        width: 33vh;
        height: 33vh;
    }

    .circle2
    {
        width: 66vh;
        height: 66vh;
    }

    .circle3
    {
        width: 99vh;
        height: 99vh;
    }

    .quarter-circle
    {
        width: 12vh;
        height: 12vh;
        border-radius: 0 0 12vh 0;
        box-shadow: .5vmin .5vmin 1.5vmin .5vmin rgba(0,0,0,0.4);
    }

    .circle-text
    {
        font-size: 2.8vh;
    }
    
    .tooltiptext, .tooltiptext1
    {
        display: none;
    }

    /* Désactivation du flottement sur mobile pour faciliter le clic tactile */
    .subEcransA,
    .choixA,
    .choixB {
    animation: none;
    transform: translate(0, 0); /* Assure que l'élément revient bien à sa place par défaut */
    }
            
    /*1er écran*/
    
    .subEcransA
    {
        width: 75%;
        margin-left: 0;
        border-radius: 1.8vh;
        border: 1.2vmax double #d9d9d9;
    }
    
    .FC
    {
        font-size: 4.5vh;
    }

    .texte-compact, .sousTitre, .cd-headline
    {
        font-size: 3.5vh;
    }

    .cd-headline.clip .cd-words-wrapper::after
    {
        width: .4vmax;
    }
    
    .moi3D
    {
        width: 85%;
    }

    .hoverMoiReel video
    {
        width: 82%;
    }

    /*2ème écran*/  
    
    .subEcransB
    {
        width: 85%;
        height: 85%;
    }
    
    .ecransC
    {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
    
    .choixA
    {
        height: 38vh;
        width: 30vh;
        border-radius: 1.8vh;
        border: 1.2vmax double #d9d9d9;
        align-self: flex-start;
    }

    .choixB
    {
        height: 17.5vh;
        width: 22vh;
        border: 1.2vmax double #d9d9d9;
        border-radius: 1.8vh;
        flex-direction: row;
        justify-content: center;
    }
    
    .choixCVA, .choixCVB
    {
        font-size: 1.3vh;
    }

    .choix-CVA-H
    {
        display: none;
    }

    .choix-CVA-V
    {
        display: block;
    }

    .mon-secretH
    {
        display: none;
    }

    .mon-secretV
    {
        display: block;
    }

    .departH3
    {
        display: none;
    }
    
    #pathV3-bg, #pathV3-fg, #pathV2-bg, #pathV2-fg
    {
        visibility: visible;
    }

    #pathH3-bg, #pathH3-fg, #pathH2-bg, #pathH2-fg
    {
        visibility: hidden;
    }
    
    .iconesB
    {
        margin-right: 1.3vh;
    }
    
    .reseauxA
    {
        height: 48%;
        border: 1.2vmax double #d9d9d9;
        border-radius: 1.2vh;
    }
    
    .copyright1
    {
        display: none;
    }
    
    .copyright2
    {
        display: block;
        font-size: 1.5vh;
        color: #ffffff;
        width: 100%;
        text-align: center;
        line-height: 1.2;
        padding-bottom: 1vh;
        filter: drop-shadow(0 0 0.4vmin rgba(0,0,0,1));
    }  
    
    .cvBase
    {   
        width: 9.4vh;
    }

    .cv1, .cv2, .cv3, .cv4
    {   
        width: clamp(5vh, 9.4vh, 9.4vh);
    }

    .rotate-effect
    {
        width: clamp(5vh, 9.4vh, 9.4vh);
        height: clamp(5vh, 9.4vh, 9.4vh);
    }

    .rotate-effect span::before
    {
        padding: 0.9vmin;
    }
    
    .illustration3 img
    {   
        width: 12vh;
    }

    .hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active
    {
        width: calc(9.4vh - 8%);
    }
        
    /*Modal*/
    
    .canettePaysage
    {
        display: none;
    }

    .canettePortrait
    {
        display: block;
    }

    .overlay-secret .overlay-close, .overlay-vid .overlay-close
    {
        top: 3%;
    }    

    .modal
    {
        height: 85%;
        width: 95%;
    }

    .rgpd
    {
        width: 100%;
        font-size: 1.3vh;
        background-color: #d9d9d9;
        border-radius: 0;
        margin: 0 auto;
    }
}

/* -------------------------------- 

responsive tablettes mode portrait

-------------------------------- */

@media (min-width: 600px) and (max-width: 1025px) and (orientation: portrait)
{
    .quarter-circle
    {
        width: 14vh;
        height: 14vh;
        border-radius: 0 0 14vh 0;
    }

    .circle-text
    {
        font-size: 3.5vh;
    }
    
    #pathH1-bg, #pathH2-bg, #pathH3-bg, #pathV1-bg, #pathV2-bg, #pathV3-bg
    {
        stroke-width: 2.4vmax;
    }
    
    /*1er écran*/
    .subEcransA
    {
        width: 60%;
    }

    /*2ème écran*/    
    .ecransC
    {
        justify-content: space-around;
    }
    
    .choixA
    {
        width: 32vh;
        height: 42vh;
    }

    .cvBase
    {   
        width: 10.6vh;
    }

    .cv1, .cv2, .cv3, .cv4
    {   
        width: clamp(5.5vh, 10.6vh, 10.6vh);
    }

    .rotate-effect
    {
        width: clamp(5.5vh, 10.6vh, 10.6vh);
        height: clamp(5.5vh, 10.6vh, 10.6vh);
    }

    .rotate-effect span::before
    {
        padding: 0.65vmin;
    }

    .hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active
    {
        width: calc(10.6vh - 8%);
    }

    .choixB
    {
        width: 24vh;
        height: 19vh;
    }
    
    .choix-CVA-V, .mon-secretV
    {
        font-size: 2.2vh;
    }

    .choixCVB
    {
        width: 40%;
    }
}