:root {
    --color-primary: #0A044E;
    --color-primary-hover: #060229;
    --color-secondary: #AFEFFD;
    --color-third: #FEA634;
    --hover-two: #120785;
}

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
}


/* Espace pour les polices d'ecriture*/
@font-face {
    font-family: Lemonmilk;
    src: url(assets/LemonMilkLightItalic-7BjPE.otf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Lemonmilkgras;
    src: url(assets/LemonMilkRegularItalic-+gras.otf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Momcake;
    src: url(assets/MomcakeThin-9Y6aZ.otf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Lemonmilkregular;
    src: url(assets/LemonMilkRegular-X3XE2.otf);
}

@font-face {
    font-family: Arenaitalic;
    src: url(assets/ArenaItalic-YqwGL.ttf);
}

@font-face {
    font-family: Milker;
    src: url(assets/Milker-KVwoW.otf);
}


/*Systeme de menu*/
nav {
    background: var(--color-primary);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 3px solid #ffff;
}

.menu-container,
.hamburger-group {
    display: flex;
    min-height: 10dvh;
    justify-content: space-evenly;
    align-items: center;
    font-size: 2em;
}

.hamburger-group {
    display: none;
    justify-content: end;
    padding-right: 5dvw;
}

.menu-item {
    list-style: none;
}

.menu-link {
    color: white;
    text-decoration: none;
    padding: 5px 15px;
    font-family: 'Lemonmilkgras';
}

.menu-link:hover {
    background-color: var(--color-primary-hover);
    border-radius: 10dvh;
}

.label-toggle {
    color: white;
}


nav:has(#menu-toggle:checked) .menu-container {
    display: flex;
}

#menu-toggle {
    display: none;
}

@media (max-width: 768px) {
    .menu-container {
        flex-direction: column;
        gap: 25px;
        padding: 25px 0px;
        display: none;
    }

    .hamburger-group {
        display: flex;
    }
}




/*Systeme de grille*/

.grid {
    display: grid;
    grid-template-columns: 1fr;
    padding: 5dvh 10dvw;
    gap: 20px;
}

@media (min-width: 768px) {
    .grid-2-1 {
        grid-template-columns: 2fr 1fr;
    }

    .grid-1-1-1 {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
    }
}



/*classes de design reutilisable*/

.bg-primary {
    background-color: var(--color-primary);
}

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

.v-padding {
    padding-top: 5dvh;
    padding-bottom: 5dvh;
}


.shadow {
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.5));
}


.small {
    font-size: 0.7rem;
}


.cta-button {
    font-family: 'Momcake';
    letter-spacing: 0.1rem;
    margin-top: 3rem;
    padding: 1rem 2rem;

    font-size: 1.5rem;
    text-decoration: none;
    background-color: var(--color-primary);
    color: #ffff;
    border-radius: 0.3rem;
}

.cta-button:hover {
    background-color: var(--color-primary-hover);
}





/*Main content of the index with the video*/

.main {
    /* 1. Positionnement nécessaire pour superposer le contenu */
    position: relative;
    /* 2. Taille de la section (ajustez selon besoins) */
    width: 100%;
    height: 80vh;
    /* Exemple: 80% de la hauteur de la fenêtre */
    overflow: hidden;
    /* Important: cache le débordement de la vidéo */
}

.background-video {
    /* 1. Positionnement absolu pour le retirer du flux normal */
    position: absolute;
    top: 0;
    left: 0;
    /* 2. S'assurer que la vidéo couvre tout le conteneur */
    width: 100%;
    height: 100%;
    /* Cela s'assure que la vidéo remplit l'espace sans déformation */
    object-fit: fill;
    /* 4. Mettre la vidéo en arrière-plan (derrière le contenu) */
    z-index: 1;
}

.content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: 2;

    display: flex;
    flex-direction: column;
    /* Organise le contenu en colonne (H1, P, A) */
    align-items: flex-end;
    /* ALIGNE TOUT À DROITE (horizontalement) */

    background: linear-gradient(to right, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.8) 100%);

    margin-right: 4dvw;
    color: white;
    text-align: center;
    /* IMPORTANT : Aligner le texte des éléments à droite */
}


.main .content-overlay h1 {
    font-family: 'Lemonmilkregular';
    font-size: 5.5rem;
    text-align: center;
    /* Définir une largeur maximale pour le H1 pour ne pas prendre tout l'espace */
    max-width: 50vw;
    padding-top: 7dvh;
    padding-right: 5dvh;
}

.main .content-overlay p {
    font-family: 'Momcake';
    font-weight: 650;
    font-size: 3.7rem;
    max-width: 40vw;
    /* Limite la largeur du paragraphe à 40% de la fenêtre */
    margin-top: 1.5rem;
    /* Marge supérieure relative */
    text-align: center;
    padding-top: 5dvh;
    padding-right: 6.5dvh;
}

.ankre-button {
    font-family: 'Momcake';
    letter-spacing: 0.1rem;
    margin-top: 5rem;
    margin-right: 19dvh;
    padding: 1rem 2rem;

    font-size: 1.5rem;
    text-decoration: none;
    background-color: var(--color-primary);
    color: #ffff;
    border-radius: 0.3rem;
}

.ankre-button:hover {
    background-color: var(--color-primary-hover);
}




/* Section Qui suis-je ? */

.quisuisje {
    background-color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 10dvh;
    padding-left: 4dvw;
}

.aside {
    display: flex;
    flex-direction: column;
    align-content: center;
}

.aside h2 {
    color: white;
    font-family: 'Lemonmilkregular';
    text-align: center;
    padding-bottom: 10dvh;
    font-size: 3rem;
}

.aside p {
    color: white;
    font-family: 'Momcake';
    font-size: 1.5rem;
    padding-bottom: 2dvh;
}

.aside a {
    background-color: var(--color-primary-hover);
}

.aside a:hover {
    background-color: var(--hover-two);
}

.photo {
    display: flex;
    align-items: flex-end;
    padding: 1.2dvw;
    padding-right: 2dvw;
    padding-top: 2dvw;
    margin-bottom: 7dvh;
}

#moi {
    width: 55dvh;
    border-radius: 1rem;
}




/* Les 3 colonnes */

.three-cases {
    display: flex;
    gap: 25px;
    padding: 5dvh 3dvw;
    background-color: #08033f;
}

.case {
    display: flex;
    flex-direction: column;
    padding-top: 5dvh;
}

.case h2 {
    color: white;
    font-family: 'Milker';
    letter-spacing: 0.1rem;
    text-align: center;
    padding-bottom: 7dvh;
    font-size: 2rem;
}

.case p {
    color: white;
    font-family: 'Momcake';
    text-align: justify;
    font-size: 1.2rem;
    margin-bottom: 5dvh;
}

.case a {

    margin-top: auto;

    font-family: 'Momcake';
    --clr-font-main: hsla(0 0% 20% / 100);
    --btn-bg-1: #2211e1;
    --btn-bg-2: #160b91;
    --btn-bg-color: hsla(360 100% 100% / 1);
    --radii: 0.5em;
    cursor: pointer;
    padding: 0.9em 1.4em;
    font-size: var(--size, 1rem);
    font-weight: 600;
    transition: 0.8s;
    background-size: 280% auto;
    background-image: linear-gradient(325deg,
            var(--btn-bg-2) 0%,
            var(--btn-bg-1) 55%,
            var(--btn-bg-2) 90%);
    border: none;
    border-radius: var(--radii);
    color: var(--btn-bg-color);
    box-shadow:
        0px 0px 20px rgba(71, 184, 255, 0.5),
        0px 5px 5px -1px rgba(58, 125, 233, 0.25),
        inset 4px 4px 8px rgba(175, 230, 255, 0.5),
        inset -4px -4px 8px rgba(19, 95, 216, 0.35);
}



.case a:is(:focus, :focus-visible, :active) {
    outline: none;
    box-shadow:
        0 0 0 3px var(--btn-bg-color),
        0 0 0 6px var(--btn-bg-2);
}

@media (prefers-reduced-motion: reduce) {
    .case a {
        transition: linear;
    }
}


.case a:hover {
    background-position: right top;
}




/*Bouton Back to the top*/

.backtop {
    background-color: #08033f;
    display: flex;

    /* 2. Centre horizontalement */
    justify-content: center;
    /* 3. Centre verticalement */
    align-items: center;
    padding: 7dvh 0;
    padding-top: 8dvh;
}

.backtop-button {
    text-decoration: none;
    margin: 0;
    --clr-font-main: hsla(0 0% 20% / 100);
    --btn-bg-1: hsla(194 100% 69% / 1);
    --btn-bg-2: hsla(217 100% 56% / 1);
    --btn-bg-color: hsla(360 100% 100% / 1);
    --radii: 0.5em;
    cursor: pointer;
    padding: 0.9em 1.4em;
    font-size: var(--size, 1rem);
    font-weight: 500;
    font-family: 'Milker';
    letter-spacing: 0.1rem;
    transition: 0.8s;
    background-size: 280% auto;
    background-image: linear-gradient(325deg,
            var(--btn-bg-2) 0%,
            var(--btn-bg-1) 55%,
            var(--btn-bg-2) 90%);
    border: none;
    border-radius: var(--radii);
    color: var(--btn-bg-color);
    box-shadow:
        0px 0px 20px rgba(71, 184, 255, 0.5),
        0px 5px 5px -1px rgba(58, 125, 233, 0.25),
        inset 4px 4px 8px rgba(175, 230, 255, 0.5),
        inset -4px -4px 8px rgba(19, 95, 216, 0.35);


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

.backtop-button:hover {
    background-position: right top;
}

.backtop-button:is(:focus, :focus-visible, :active) {
    outline: none;
    box-shadow:
        0 0 0 3px var(--btn-bg-color),
        0 0 0 6px var(--btn-bg-2);
}

@media (prefers-reduced-motion: reduce) {
    .backtop-button {
        transition: linear;
    }
}

/* 2. Style initial de la flèche (cachée) */
.btn-arrow {
    /* On cache la flèche */
    max-width: 0;
    opacity: 0;

    /* On s'assure qu'elle ne prend aucune place */
    overflow: hidden;
    white-space: nowrap;
    /* Empêche le retour à la ligne */
    margin-left: 0;
    /* Pas de marge initialement */

    /* La transition doit correspondre à celle du bouton parent pour la fluidité */
    transition: all 0.8s ease;

    /* Petit ajustement pour remonter la flèche si elle paraît trop basse */
    transform: translateY(-2px);
}

/* 3. Style de la flèche au survol du bouton (visible) */
.backtop-button:hover .btn-arrow {
    /* On révèle la flèche */
    max-width: 1.5em;
    /* Juste assez large pour le symbole */
    opacity: 1;
    margin-left: 0.5em;
    /* Espace entre le texte et la flèche */
}

/*fin du bouton back to the top*/


.footer {
    background-color: #040125;
}

.footer p {
    color: white;
    text-align: center;
}



/*FIN DE LA PAGE INDEX.HTML !!!
///////////////////////////////
//////////////////////////////
DEBUT DE LA PAGE FORMATION.HTML*/


.formation-main {
    background-color: var(--color-primary);
    display: flex;
    justify-content: center;
    padding-top: 10dvh;
}


/*DEBUT DE LA CARTE*/

.flip-card {
    background-color: transparent;
    width: 40dvw;
    height: 80dvh;
    perspective: 1000px;
    font-family: sans-serif;
}

.title {
    font-size: 3em;
    font-weight: 900;
    text-align: center;
    margin: 0;
    font-family: 'Momcake';
    letter-spacing: 0.2rem;
    text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8), 0px 0px 5px rgba(0, 0, 0, 1);
    padding-top: 18dvh;
}

.sub-title{
    font-size: 2em;
    font-weight: 900;
    text-align: center;
    margin: 0;
    font-family: 'Lemonmilk';
    text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8), 0px 0px 5px rgba(0, 0, 0, 1);
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.2);
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 1rem;
}

.flip-card-front {
    /* Le premier rgba(0,0,0,0.4) cree le voile sombre. Ajuste le 0.4 pour assombrir plus ou moins */
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('assets/trade.png');

    background-size: cover;
    background-position: center;
    color: white;
}

.flip-card-front p{
    font-size: 1em;
    font-weight: 900;
    text-align: center;
    margin: 0;
    font-family: 'Lemonmilkregular';
    text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8), 0px 0px 5px rgba(0, 0, 0, 1);
    padding-top: 20dvh;
}

.flip-card-back {
   background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)),
        url('assets/trade-2.jpg');
    color: white;
    transform: rotateY(180deg);
    text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8), 0px 0px 5px rgba(0, 0, 0, 1);

    justify-content: flex-start; /* Pousse tout vers le haut */
    align-items: flex-start;    /* Pousse tout vers la gauche */
}

.title-2{
    padding-top: 3dvh;
    font-family: 'Lemonmilk';
    font-size: 2em;
    text-align: left;
    padding-top: 5dvh;
    padding-left: 2.5dvw;
}

.more-info{
    text-align: left;
    font-family: 'Lemonmilkregular';
    padding-left: 2dvw;
    padding-top: 14dvh;
    font-size: 1.5em;
}

/*FIN DE LA CARTE*/


/*Debut de la description en dessous*/

.formation-description{
    background-color: var(--color-primary);
    padding: 5dvh 13dvw;
}

.description-content{
    background-color: var(--color-primary-hover);
    border-radius: 2dvh;
    color: white;
    text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8), 0px 0px 5px rgba(0, 0, 0, 1);
    padding-top: 3dvh;

    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 4dvh;
}

.description-content h2{
    text-align: center;
    margin-bottom: 2dvh;
}

.description-content p{
    padding: 2dvh 2.5dvw;
    text-align: justify;
    font-family: 'Momcake';
    font-size: 1.35rem;
}

.description-content .precision{
    font-size: 1rem;
    text-align: justify;
}


.description-content a {
    display: inline-block;    /* Pour qu'il respecte bien son padding */
    margin-top: 3dvh;

    font-family: 'Momcake';
    --clr-font-main: hsla(0 0% 20% / 100);
    --btn-bg-1: #2211e1;
    --btn-bg-2: #160b91;
    --btn-bg-color: hsla(360 100% 100% / 1);
    --radii: 0.5em;
    cursor: pointer;
    padding: 0.9em 1.4em;
    font-size: var(--size, 1rem);
    font-weight: 600;
    transition: 0.8s;
    background-size: 280% auto;
    background-image: linear-gradient(325deg,
            var(--btn-bg-2) 0%,
            var(--btn-bg-1) 55%,
            var(--btn-bg-2) 90%);
    border: none;
    border-radius: var(--radii);
    color: var(--btn-bg-color);
    box-shadow:
        0px 0px 20px rgba(71, 184, 255, 0.5),
        0px 5px 5px -1px rgba(58, 125, 233, 0.25),
        inset 4px 4px 8px rgba(175, 230, 255, 0.5),
        inset -4px -4px 8px rgba(19, 95, 216, 0.35);
}



.description-content a:is(:focus, :focus-visible, :active) {
    outline: none;
    box-shadow:
        0 0 0 3px var(--btn-bg-color),
        0 0 0 6px var(--btn-bg-2);
}

@media (prefers-reduced-motion: reduce) {
    .description-content a {
        transition: linear;
    }
}


.description-content a:hover {
    background-position: right top;
}

/*Fin de la description en dessous*/

/*DEBUT DE LA CARTE BANCAIRE*/

.carte-bancaire{
    background-color: var(--color-primary);
    padding: 5dvh 13dvw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cb {
  background-color: transparent;
  width: 240px;
  height: 154px;
  perspective: 1000px;
  color: white;
}

.heading_8264 {
  position: absolute;
  letter-spacing: .2em;
  font-size: 0.5em;
  top: 2em;
  left: 18.6em;
}

.MS {
  position: absolute;
  top: 6.8em;
  left: 11.7em;
}

.chip {
  position: absolute;
  top: 2.3em;
  left: 1.5em;
}

.contactless {
  position: absolute;
  top: 3.5em;
  left: 12.4em;
}

.number {
  position: absolute;
  font-weight: bold;
  font-size: .6em;
  top: 8.3em;
  left: 1.6em;
}

.valid_thru {
  position: absolute;
  font-weight: bold;
  top: 635.8em;
  font-size: .01em;
  left: 140.3em;
}

.date_8264 {
  position: absolute;
  font-weight: bold;
  font-size: 0.5em;
  top: 13.6em;
  left: 3.2em;
}

.strip {
  position: absolute;
  background-color: black;
  width: 15em;
  height: 1.5em;
  top: 2.4em;
  background: repeating-linear-gradient(
    45deg,
    #303030,
    #303030 10px,
    #202020 10px,
    #202020 20px
  );
}

.mstrip {
  position: absolute;
  background-color: rgb(255, 255, 255);
  width: 8em;
  height: 0.8em;
  top: 5em;
  left: .8em;
  border-radius: 2.5px;
}

.sstrip {
  position: absolute;
  background-color: rgb(255, 255, 255);
  width: 4.1em;
  height: 0.8em;
  top: 5em;
  left: 10em;
  border-radius: 2.5px;
}

.code {
  font-weight: bold;
  text-align: center;
  margin: .2em;
  color: black;
}

.cb-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.cb:hover .cb-inner {
  transform: rotateY(180deg);
}

.cb-flip-front, .cb-flip-back {
  box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 1rem;
}

.cb-flip-front {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
  background-color: #171717;
}

.cb-flip-back {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
  background-color: #171717;
  transform: rotateY(180deg);
}

/*Fin de la carte*/

/*FIN de la page avec le backtop et le footer*/

#backtop-formation{
    background-color: var(--color-primary);
    padding-top: 2dvh;
}



/*FIN PAGE FORMATION
///////////////////
//////////////////
DEBUT PAGE COMPETENCES*/


.skill-box{
    background-color: var(--color-primary);
    display: flex;
    padding: 5dvh 5dvw;
}

.oneoftwo{
    background-color: #08033f;
}


#excp-photo{
    padding-top: 13dvh;
}

.s-img{
    width: 60dvh;
    border-radius: 1rem;
}

.skill{
    display: flex;
    flex-direction: column;
    padding-left: 3dvw;
    padding-right: 3dvw;
}

.skill h3{
    color: white;
    font-family: 'Lemonmilkregular';
    text-align: center;
    font-size: 2.8rem;
    margin-bottom: 4dvh;
}

.skill p{
    color: white;
    font-family: 'Momcake';
    font-size: 1.3rem;
    text-align: justify;
}

.skill a {
    margin-top: 7dvh;

    font-family: 'Momcake';
    --clr-font-main: hsla(0 0% 20% / 100);
    --btn-bg-1: #2211e1;
    --btn-bg-2: #160b91;
    --btn-bg-color: hsla(360 100% 100% / 1);
    --radii: 0.5em;
    cursor: pointer;
    padding: 0.9em 1.4em;
    font-size: var(--size, 1rem);
    font-weight: 600;
    transition: 0.8s;
    background-size: 280% auto;
    background-image: linear-gradient(325deg,
            var(--btn-bg-2) 0%,
            var(--btn-bg-1) 55%,
            var(--btn-bg-2) 90%);
    border: none;
    border-radius: var(--radii);
    color: var(--btn-bg-color);
    box-shadow:
        0px 0px 20px rgba(71, 184, 255, 0.5),
        0px 5px 5px -1px rgba(58, 125, 233, 0.25),
        inset 4px 4px 8px rgba(175, 230, 255, 0.5),
        inset -4px -4px 8px rgba(19, 95, 216, 0.35);
}



.skill a:is(:focus, :focus-visible, :active) {
    outline: none;
    box-shadow:
        0 0 0 3px var(--btn-bg-color),
        0 0 0 6px var(--btn-bg-2);
}

@media (prefers-reduced-motion: reduce) {
    .skill a {
        transition: linear;
    }
}


.skill a:hover {
    background-position: right top;
}


/*FIN DE LA PAGE COMPETENCES
////////////////////////////
DEBUT DE LA PAGE CONTACT*/

.back-form{
    background-color: var(--color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7dvh 5dvw;
}

.ptit-mot{
    background-color: var(--color-primary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 7dvh;
}

.ptit-mot p{
    color: white;
    font-family: 'Lemonmilkregular';
    font-size: 2rem;
}

/*Debut du rectangle de contact*/

.form-container {
  width: 500px;
  background: linear-gradient(#212121, #212121) padding-box,
              linear-gradient(145deg, transparent 35%,#5445fb, #94a7ff) border-box;
  border: 2px solid transparent;
  padding: 32px 24px;
  font-size: 14px;
  font-family: 'Lemonmilkregular';
  color: white;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  border-radius: 16px;
}

.form-container button:active {
  scale: 0.95;
}

.form-container .form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-container .form-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.form-container .form-group label {
  display: block;
  margin-bottom: 5px;
  color: #717171;
  font-weight: 600;
  font-size: 12px;
}

.form-container .form-group input {
  width: 93%;
  padding: 12px 16px;
  border-radius: 8px;
  color: #fff;
  font-family: 'Momcake';
  font-size: 1.1rem;
  background-color: transparent;
  border: 1px solid #414141;
}

.form-container .form-group textarea {
  width: 93%;
  padding: 12px 16px;
  border-radius: 8px;
  resize: none;
  color: #fff;
  height: 96px;
  border: 1px solid #414141;
  background-color: transparent;
  font-family: 'Momcake';
  font-size: 1.1rem;
}

.form-container .form-group input::placeholder {
  opacity: 0.5;
}

.form-container .form-group input:focus {
  outline: none;
  border-color: #94a7ff;
}

.form-container .form-group textarea:focus {
  outline: none;
  border-color: #94a7ff;
}

.form-container .form-submit-btn {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  align-self: flex-start;
  font-family: 'Momcake';
  color: #717171;
  font-weight: 600;
  width: 40%;
  background: #313131;
  border: 1px solid #414141;
  padding: 12px 16px;
  font-size: 1.2rem;
  gap: 8px;
  margin-top: 8px;
  cursor: pointer;
  border-radius: 6px;
}

.form-container .form-submit-btn:hover {
  background-color: #fff;
  border-color: #fff;
}

/*Fin du rectangle de contact*/


/*Debut du pop-up des mentions legales*/
.mention{
    display: flex;
    flex-direction: column;
    padding: 5dvh 5dvw;
    background-color: var(--color-primary);
    justify-content: center;
    align-items: center;
}

.mention a{
    color: white;
    text-decoration: none;
    font-family: 'Momcake';
    padding: 2dvh 2dvw;
    background-color: var(--color-primary-hover);
}




/* Fond noir transparent avec flou */
.modal {
    display: none; /* Cache par defaut */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px); /* Effet de flou moderne */
    justify-content: center;
    align-items: center;
}

/* La boite blanche/bleue au centre */
.modal-content {
    background-color: #1a1a1a;
    color: white;
    padding: 3rem;
    border-radius: 1.5rem;
    width: 90%;
    max-width: 600px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    font-family: 'Momcake', sans-serif;
}

.modal-content h2 {
    margin-top: 0;
    color: #2211e1;
}

.legal-section {
    margin-bottom: 1.5rem;
}

.legal-section h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
}

.legal-section p {
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

.warning {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
    color: #ff4d4d; /* Rouge pour l'alerte */
}

/* Bouton fermer */
.close-modal {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 2rem;
    cursor: pointer;
    color: white;
}

.close-modal:hover {
    color: #2211e1;
}




/*Ici seront tous les medias queries afin que le site soit reponsive

Media page 1 : */

/* --- RESPONSIVE DESIGN (MOBILES) --- */

@media screen and (max-width: 768px) {
    
    .main {
        height: 100dvh; /* On prend tout l'ecran sur mobile */
    }

    .content-overlay {
        align-items: center; /* On centre tout sur mobile */
        text-align: center;
        margin-right: 0;
        background: rgba(0, 0, 0, 0.5); 
    }

    .main .content-overlay h1 {
        font-size: 2.8rem; /* Plus petit pour mobile */
        max-width: 90vw;
        padding-right: 0;
        padding-top: 15dvh;
    }

    .main .content-overlay p {
        font-size: 1.8rem;
        max-width: 90vw;
        padding-right: 0;
    }

    .ankre-button {
        margin-right: 0; /* On retire le decalage */
        margin-top: 3rem;
    }

    .quisuisje {
        flex-direction: column; /* On empile texte et photo */
        padding: 5dvh 8dvw;
        gap: 5dvh;
    }

    .aside h2 {
        font-size: 2.2rem;
        padding-bottom: 3dvh;
    }

    .aside p {
        font-size: 1.2rem;
        text-align: justify;
    }

    .photo {
        padding: 0;
        margin-bottom: 3dvh;
        justify-content: center;
    }

    #moi {
        width: 80dvw; /* La photo prend plus de place en largeur */
    }

    .three-cases {
        flex-direction: column; /* On empile les 3 blocs */
        gap: 40px;
        padding: 8dvh 8dvw;
    }

    .case {
        padding-top: 2dvh;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Petite ligne de separation */
        padding-bottom: 4dvh;
    }

    .case:last-child {
        border-bottom: none;
    }

    .case h2 {
        font-size: 1.8rem;
        padding-bottom: 3dvh;
    }

    .case p {
        font-size: 1.1rem;
    }
}


/*Media page 1 fini

Media page 2 : */

/* --- RESPONSIVE POUR LA FLIP-CARD --- */

@media screen and (max-width: 768px) {
    .flip-card {
        width: 85dvw;    /* La carte prend presque toute la largeur */
        height: 70dvh;   /* Hauteur reduite pour tenir sur l'ecran */
    }

    .title {
        font-size: 1.8em; /* Plus petit pour ne pas sortir du cadre */
        padding-top: 10dvh; /* On remonte le texte */
        letter-spacing: 0.1rem;
    }

    .sub-title {
        font-size: 1.2em;
    }

    .flip-card-front p {
        font-size: 0.8em;
        padding-top: 5dvh; /* On evite de trop descendre le texte */
    }

    /* Verso de la carte */
    .title-2 {
        font-size: 1.4em;
        padding-top: 3dvh;
        padding-left: 5dvw;
    }

    .more-info {
        font-size: 1em;
        padding-left: 5dvw;
        padding-top: 5dvh; /* On remonte les infos */
        line-height: 1.4;  /* Espace un peu les lignes pour la lisibilite */
    }

    .flip-card-back {
        justify-content: flex-start; /* Garde tout en haut */
        padding-right: 5dvw; /* Securite pour ne pas coller au bord droit */
    }
}

/* Pour les tres petits telephones */
@media screen and (max-width: 380px) {
    .flip-card {
        height: 75dvh; 
    }
    .title {
        font-size: 1.5em;
    }
}



/*Fin media page 2

Media page 3 : */


@media screen and (max-width: 768px) {
    
    /* On passe les blocs en colonne */
    .skill-box {
        flex-direction: column; /* L'image passe au dessus du texte */
        align-items: center;
        padding: 5dvh 8dvw;
        text-align: center;
    }

    /* On ajuste l'image */
    .s-img {
        width: 85dvw; /* L'image prend la largeur de l'ecran */
        height: auto;
        margin-bottom: 4dvh;
    }

    /* Ajustement du bloc texte */
    .skill {
        padding-left: 0;
        padding-right: 0;
    }

    .skill h3 {
        font-size: 1.8rem; /* Titre plus adapte */
        margin-bottom: 2dvh;
    }

    .skill p {
        font-size: 1.1rem;
        text-align: center; /* Plus naturel sur mobile quand tout est centre */
        line-height: 1.5;
    }

    .skill a {
        margin-top: 4dvh;
        width: 100%; /* Le bouton prend toute la largeur pour etre facile a cliquer */
        display: block;
        box-sizing: border-box;
    }
}

/*Fin de la 3e page*/