.elementor-3636 .elementor-element.elementor-element-35788062{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--overflow:hidden;--margin-top:-93px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3636 .elementor-element.elementor-element-663f79f1{--display:flex;--position:absolute;--min-height:666px;--justify-content:flex-end;--overflow:hidden;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:50%;--z-index:50;}.elementor-3636 .elementor-element.elementor-element-663f79f1:not(.elementor-motion-effects-element-type-background), .elementor-3636 .elementor-element.elementor-element-663f79f1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://fabienpoix.fr/wp-content/uploads/2026/02/MacBook_on_Armchair_Mockup_1-scaled-1.webp");background-size:cover;}.elementor-3636 .elementor-element.elementor-element-663f79f1.e-con{--e-con-transform-translateX:-50%;--e-con-transform-translateY:-50%;}body:not(.rtl) .elementor-3636 .elementor-element.elementor-element-663f79f1{left:50%;}body.rtl .elementor-3636 .elementor-element.elementor-element-663f79f1{right:50%;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-3636 .elementor-element.elementor-element-7dcf5e87{padding:0px 0px 0px 30px;top:88%;}.elementor-3636 .elementor-element.elementor-element-7dcf5e87 .elementor-heading-title{font-family:"Urbanist", Sans-serif;font-size:30px;font-weight:600;text-transform:none;color:#FFFFFF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-3636 .elementor-element.elementor-element-4c0f439b{padding:0px 0px 0px 30px;top:93%;font-family:"Urbanist", Sans-serif;font-size:16px;color:#FFFFFF;}.elementor-3636 .elementor-element.elementor-element-f8747c2{--display:flex;--position:absolute;--min-height:666px;--justify-content:flex-end;--overflow:hidden;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:50%;--z-index:49;}.elementor-3636 .elementor-element.elementor-element-f8747c2:not(.elementor-motion-effects-element-type-background), .elementor-3636 .elementor-element.elementor-element-f8747c2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://fabienpoix.fr/wp-content/uploads/2026/02/Free_MacBook_Pro_1-scaled.webp");background-size:cover;}.elementor-3636 .elementor-element.elementor-element-f8747c2.e-con{--e-con-transform-translateX:-50%;--e-con-transform-translateY:-50%;}body:not(.rtl) .elementor-3636 .elementor-element.elementor-element-f8747c2{left:50%;}body.rtl .elementor-3636 .elementor-element.elementor-element-f8747c2{right:50%;}.elementor-3636 .elementor-element.elementor-element-cfc4026{padding:0px 0px 0px 30px;top:88%;}.elementor-3636 .elementor-element.elementor-element-cfc4026 .elementor-heading-title{font-family:"Urbanist", Sans-serif;font-size:30px;font-weight:600;text-transform:none;color:#1C1C1C;}.elementor-3636 .elementor-element.elementor-element-2d23144{padding:0px 0px 0px 30px;top:93%;font-family:"Urbanist", Sans-serif;font-size:16px;color:#1C1C1C;}.elementor-3636 .elementor-element.elementor-element-f1e1fee{--display:flex;--position:absolute;--min-height:666px;--justify-content:flex-end;--overflow:hidden;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:50%;--z-index:48;}.elementor-3636 .elementor-element.elementor-element-f1e1fee:not(.elementor-motion-effects-element-type-background), .elementor-3636 .elementor-element.elementor-element-f1e1fee > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://fabienpoix.fr/wp-content/uploads/2026/02/mockup-Kroma-scaled.webp");background-position:bottom center;background-size:cover;}.elementor-3636 .elementor-element.elementor-element-f1e1fee.e-con{--e-con-transform-translateX:-50%;--e-con-transform-translateY:-50%;}body:not(.rtl) .elementor-3636 .elementor-element.elementor-element-f1e1fee{left:50%;}body.rtl .elementor-3636 .elementor-element.elementor-element-f1e1fee{right:50%;}.elementor-3636 .elementor-element.elementor-element-bea77c7{padding:0px 0px 0px 30px;top:88%;}.elementor-3636 .elementor-element.elementor-element-bea77c7 .elementor-heading-title{font-family:"Urbanist", Sans-serif;font-size:30px;font-weight:600;text-transform:none;color:#FFFFFF;}.elementor-3636 .elementor-element.elementor-element-d5e0e1e{padding:0px 0px 0px 30px;top:93%;font-family:"Urbanist", Sans-serif;font-size:16px;color:#FFFFFF;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-3636 .elementor-element.elementor-element-77a19513{--e-transform-translateX:-50%;--e-transform-translateY:-50%;top:92%;z-index:9;}body:not(.rtl) .elementor-3636 .elementor-element.elementor-element-77a19513{left:50%;}body.rtl .elementor-3636 .elementor-element.elementor-element-77a19513{right:50%;}.elementor-3636 .elementor-element.elementor-element-92cf44f.eael_vto-vertical-lr, .elementor-3636 .elementor-element.elementor-element-92cf44f.eael_vto-vertical-rl{writing-mode:vertical-lr;text-orientation:upright;}.elementor-3636 .elementor-element.elementor-element-92cf44f{--e-transform-translateY:-50%;top:50%;z-index:10;}body:not(.rtl) .elementor-3636 .elementor-element.elementor-element-92cf44f{left:5%;}body.rtl .elementor-3636 .elementor-element.elementor-element-92cf44f{right:5%;}.elementor-3636 .elementor-element.elementor-element-92cf44f .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:16px;font-weight:300;color:#FFFFFF;}body.elementor-page-3636:not(.elementor-motion-effects-element-type-background), body.elementor-page-3636 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#1A1A1A;}:root{--page-title-display:none;}@media(max-width:767px){body:not(.rtl) .elementor-3636 .elementor-element.elementor-element-92cf44f{left:5%;}body.rtl .elementor-3636 .elementor-element.elementor-element-92cf44f{right:5%;}.elementor-3636 .elementor-element.elementor-element-92cf44f{top:50%;}}@media(min-width:768px){.elementor-3636 .elementor-element.elementor-element-663f79f1{--width:70%;}.elementor-3636 .elementor-element.elementor-element-f8747c2{--width:70%;}.elementor-3636 .elementor-element.elementor-element-f1e1fee{--width:70%;}}/* Start custom CSS for container, class: .elementor-element-663f79f1 */.projet-card {
    width: 80% !important; /* Ou la largeur que tu veux pour tes projets */
    max-width: 1000px;     /* Optionnel : pour éviter que ce soit trop grand */
    aspect-ratio: 16/9;    /* Optionnel : pour que toutes les cartes aient la même forme */
    margin: 0 !important;
    transform-origin: center center !important;
}

/* 1. On cache le texte par défaut */
.infos-projet {
    opacity: 0;
    transition: all 0.4s ease-in-out; /* Animation fluide */
    transform: translateY(20px); /* Petit effet de mouvement vers le haut */
    pointer-events: none; /* Pour que le texte ne gêne pas le clic sur la carte */
}

/* 2. On l'affiche au survol de la carte */
.projet-card:hover .infos-projet {
    opacity: 1;
    transform: translateY(0); /* Le texte reprend sa place */
}

/* Optionnel : assombrir légèrement l'image au survol pour mieux lire le texte */
.projet-card img {
    transition: filter 0.4s ease;
}

.projet-card:hover img {
    filter: brightness(0.6);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f8747c2 */.projet-card {
    width: 80% !important; /* Ou la largeur que tu veux pour tes projets */
    max-width: 1000px;     /* Optionnel : pour éviter que ce soit trop grand */
    aspect-ratio: 16/9;    /* Optionnel : pour que toutes les cartes aient la même forme */
    margin: 0 !important;
    transform-origin: center center !important;
}

/* 1. On cache le texte par défaut */
.infos-projet {
    opacity: 0;
    transition: all 0.4s ease-in-out; /* Animation fluide */
    transform: translateY(20px); /* Petit effet de mouvement vers le haut */
    pointer-events: none; /* Pour que le texte ne gêne pas le clic sur la carte */
}

/* 2. On l'affiche au survol de la carte */
.projet-card:hover .infos-projet {
    opacity: 1;
    transform: translateY(0); /* Le texte reprend sa place */
}

/* Optionnel : assombrir légèrement l'image au survol pour mieux lire le texte */
.projet-card img {
    transition: filter 0.4s ease;
}

.projet-card:hover img {
    filter: brightness(0.6);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f1e1fee */.projet-card {
    width: 80% !important; /* Ou la largeur que tu veux pour tes projets */
    max-width: 1000px;     /* Optionnel : pour éviter que ce soit trop grand */
    aspect-ratio: 16/9;    /* Optionnel : pour que toutes les cartes aient la même forme */
    margin: 0 !important;
    transform-origin: center center !important;
}

/* 1. On cache le texte par défaut */
.infos-projet {
    opacity: 0;
    transition: all 0.4s ease-in-out; /* Animation fluide */
    transform: translateY(20px); /* Petit effet de mouvement vers le haut */
    pointer-events: none; /* Pour que le texte ne gêne pas le clic sur la carte */
}

/* 2. On l'affiche au survol de la carte */
.projet-card:hover .infos-projet {
    opacity: 1;
    transform: translateY(0); /* Le texte reprend sa place */
}

/* Optionnel : assombrir légèrement l'image au survol pour mieux lire le texte */
.projet-card img {
    transition: filter 0.4s ease;
}

.projet-card:hover img {
    filter: brightness(0.6);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6690f9c7 */#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #1A1A1A; /* Assure-toi que c'est bien opaque */
  display: flex;
  justify-content: center;
  align-items: center;
  /* On passe à 1 million pour être tranquille */
  z-index: 9999999 !important; 
}

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

#loader-percentage {
  position: absolute;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.2rem;
  color: #979797;
}

/* Style du cercle de chargement */
.progress-ring__circle {
  transition: stroke-dashoffset 0.1s;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke-dasharray: 326.7; /* Circonférence du cercle (2 * PI * R) */
  stroke-dashoffset: 326.7;
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-77a19513 *//* On centre l'indicateur et on crée l'animation */
.scroll-indicator {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 0 !important;
}

/* L'animation de glissement vers le bas + fondu */
.scroll-indicator img, .scroll-indicator svg {
    width: 30px; /* À ajuster selon tes besoins */
    height: auto;
    animation: scrollSlide 2.5s infinite cubic-bezier(0.45, 0, 0.55, 1);
}

@keyframes scrollSlide {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }
    30% {
        transform: translateY(0);
        opacity: 1;
    }
    60% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(20px);
        opacity: 0;
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-92cf44f */.titre-fond {
    position: absolute; /* ou fixed selon ton design */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* On met un Z-index très bas, voire négatif */
    z-index: 0 !important; 
    /* On s'assure qu'il ne bloque pas les clics sur les cartes */
    pointer-events: none; 
}/* End custom CSS */