.elementor-1209 .elementor-element.elementor-element-9e62c6e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:120px;--padding-bottom:60px;--padding-left:0px;--padding-right:0px;}.elementor-1209 .elementor-element.elementor-element-9e62c6e:not(.elementor-motion-effects-element-type-background), .elementor-1209 .elementor-element.elementor-element-9e62c6e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8FAFC;}.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-1209 .elementor-element.elementor-element-d9c5eec{text-align:center;}.elementor-1209 .elementor-element.elementor-element-d9c5eec .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:60.8px;font-weight:800;letter-spacing:1.3px;color:#1E293B;}.elementor-1209 .elementor-element.elementor-element-df7c7f1{text-align:center;}.elementor-1209 .elementor-element.elementor-element-df7c7f1 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:20px;font-weight:600;color:#10566F;}.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-1209 .elementor-element.elementor-element-a4a88c9{text-align:center;font-family:"Poppins", Sans-serif;font-size:17.6px;font-weight:400;line-height:37px;letter-spacing:0.3px;}.elementor-1209 .elementor-element.elementor-element-b64f8de{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1209 .elementor-element.elementor-element-b64f8de:not(.elementor-motion-effects-element-type-background), .elementor-1209 .elementor-element.elementor-element-b64f8de > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8FAFC;}.elementor-1209 .elementor-element.elementor-element-c42ee4b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-1209 .elementor-element.elementor-element-e713661 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-weight:600;text-transform:uppercase;}.elementor-1209 .elementor-element.elementor-element-8a1ed22 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-weight:600;}.elementor-1209 .elementor-element.elementor-element-02b4806{font-family:"Poppins", Sans-serif;font-weight:400;}.elementor-1209 .elementor-element.elementor-element-ee9bf5f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.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-1209 .elementor-element.elementor-element-56f0281{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1209 .elementor-element.elementor-element-56f0281:not(.elementor-motion-effects-element-type-background), .elementor-1209 .elementor-element.elementor-element-56f0281 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8FAFC;}.elementor-1209 .elementor-element.elementor-element-8450218{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1209 .elementor-element.elementor-element-3595738{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-1209 .elementor-element.elementor-element-32db6b2 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-weight:600;text-transform:uppercase;}.elementor-1209 .elementor-element.elementor-element-f9802ff .elementor-heading-title{font-family:"Poppins", Sans-serif;font-weight:600;}.elementor-1209 .elementor-element.elementor-element-cc0f2fe{font-family:"Poppins", Sans-serif;font-weight:400;}.elementor-1209 .elementor-element.elementor-element-dc9e51b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1209 .elementor-element.elementor-element-dc9e51b:not(.elementor-motion-effects-element-type-background), .elementor-1209 .elementor-element.elementor-element-dc9e51b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8FAFC;}.elementor-1209 .elementor-element.elementor-element-4ab722a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-1209 .elementor-element.elementor-element-4ec3a17 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-weight:600;text-transform:uppercase;}.elementor-1209 .elementor-element.elementor-element-e121a34 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-weight:600;}.elementor-1209 .elementor-element.elementor-element-e639286{font-family:"Poppins", Sans-serif;font-weight:400;}.elementor-1209 .elementor-element.elementor-element-01d669f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1209 .elementor-element.elementor-element-4cf8e02{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-1209 .elementor-element.elementor-element-4cf8e02:not(.elementor-motion-effects-element-type-background), .elementor-1209 .elementor-element.elementor-element-4cf8e02 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8FAFC;}.elementor-1209 .elementor-element.elementor-element-8e31f63{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1209 .elementor-element.elementor-element-8948ca5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-1209 .elementor-element.elementor-element-2bc3733 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-weight:600;text-transform:uppercase;}.elementor-1209 .elementor-element.elementor-element-bc08b72 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-weight:600;}.elementor-1209 .elementor-element.elementor-element-a58383e{font-family:"Poppins", Sans-serif;font-weight:400;}.elementor-1209 .elementor-element.elementor-element-7360e68{--display:flex;--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;--align-items:center;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#E2E8F0;--border-color:#E2E8F0;--padding-top:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-1209 .elementor-element.elementor-element-6f30428{padding:0px 0px 10px 0px;text-align:center;}.elementor-1209 .elementor-element.elementor-element-6f30428 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:2rem;font-weight:700;color:#10566F;}.elementor-1209 .elementor-element.elementor-element-d61e998{text-align:center;}.elementor-1209 .elementor-element.elementor-element-d61e998 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:1.05rem;font-weight:600;color:#1E293B;}.elementor-1209 .elementor-element.elementor-element-4e5ed32{text-align:center;font-family:"Poppins", Sans-serif;font-weight:400;}.elementor-1209 .elementor-element.elementor-element-0bc922b{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--gap:50px 50px;--row-gap:50px;--column-gap:50px;--grid-auto-flow:row;--align-items:center;}.elementor-1209 .elementor-element.elementor-element-df7e6ed.elementor-element{--align-self:center;}.elementor-1209 .elementor-element.elementor-element-19fb731{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:80px;--padding-bottom:80px;--padding-left:40px;--padding-right:40px;}.elementor-1209 .elementor-element.elementor-element-06e32d7{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:24px 24px 24px 24px;--padding-top:80px;--padding-bottom:80px;--padding-left:40px;--padding-right:40px;}.elementor-1209 .elementor-element.elementor-element-06e32d7:not(.elementor-motion-effects-element-type-background), .elementor-1209 .elementor-element.elementor-element-06e32d7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#10566F;}.elementor-1209 .elementor-element.elementor-element-0ea0764{width:var( --container-widget-width, 51.513% );max-width:51.513%;padding:0px 0px 20px 0px;--container-widget-width:51.513%;--container-widget-flex-grow:0;text-align:center;}.elementor-1209 .elementor-element.elementor-element-0ea0764.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-1209 .elementor-element.elementor-element-0ea0764 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:2.2rem;font-weight:600;color:#FFFFFF;}.elementor-1209 .elementor-element.elementor-element-82d5b70{text-align:center;font-family:"Poppins", Sans-serif;font-size:1.1rem;font-weight:400;color:#FFFFFF94;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1209 .elementor-element.elementor-element-73fa0ae .elementor-button{background-color:#FFFFFF;font-family:"Poppins", Sans-serif;font-size:17.6px;font-weight:700;fill:#10566F;color:#10566F;border-radius:8px 8px 8px 8px;padding:16px 32px 16px 32px;}.elementor-1209 .elementor-element.elementor-element-73fa0ae .elementor-button:hover, .elementor-1209 .elementor-element.elementor-element-73fa0ae .elementor-button:focus{background-color:#FFFFFF;}.elementor-1209 .elementor-element.elementor-element-73fa0ae{width:var( --container-widget-width, 43.581% );max-width:43.581%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--container-widget-width:43.581%;--container-widget-flex-grow:0;}.elementor-1209 .elementor-element.elementor-element-73fa0ae.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-1209 .elementor-element.elementor-element-73fa0ae .elementor-button-content-wrapper{flex-direction:row-reverse;}body.elementor-page-1209:not(.elementor-motion-effects-element-type-background), body.elementor-page-1209 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}@media(min-width:768px){.elementor-1209 .elementor-element.elementor-element-c42ee4b{--width:50%;}.elementor-1209 .elementor-element.elementor-element-ee9bf5f{--width:50%;}.elementor-1209 .elementor-element.elementor-element-8450218{--width:50%;}.elementor-1209 .elementor-element.elementor-element-3595738{--width:50%;}.elementor-1209 .elementor-element.elementor-element-4ab722a{--width:50%;}.elementor-1209 .elementor-element.elementor-element-01d669f{--width:50%;}.elementor-1209 .elementor-element.elementor-element-8e31f63{--width:50%;}.elementor-1209 .elementor-element.elementor-element-8948ca5{--width:50%;}.elementor-1209 .elementor-element.elementor-element-0bc922b{--width:62%;}.elementor-1209 .elementor-element.elementor-element-06e32d7{--content-width:1135px;}}@media(max-width:1366px){.elementor-1209 .elementor-element.elementor-element-0bc922b{--grid-auto-flow:row;}}@media(max-width:1024px){.elementor-1209 .elementor-element.elementor-element-0bc922b{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-1209 .elementor-element.elementor-element-0bc922b{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1209 .elementor-element.elementor-element-73fa0ae{width:var( --container-widget-width, 155.922px );max-width:155.922px;--container-widget-width:155.922px;--container-widget-flex-grow:0;}}/* Start custom CSS for container, class: .elementor-element-b64f8de *//* ==================================================
   PORTFOLIO : EFFET BROWSER 3D (CODE PORTABLE 100%)
   ================================================== */

/* 1. Ajustement de la structure parent (Espacement) */
.elementor-1209 .elementor-element.elementor-element-b64f8de .e-con-inner {
    align-items: center !important;
    gap: 60px !important;
}

/* 2. Le Tag (Ton H3) */
.elementor-1209 .elementor-element.elementor-element-b64f8de .elementor-widget-heading h3 {
    display: inline-block !important;
    background: rgba(16, 86, 111, 0.1) !important;
    color: #10566F !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 5px !important;
}

/* 3. Le Titre (Ton H2) */
.elementor-1209 .elementor-element.elementor-element-b64f8de .elementor-widget-heading h2 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 2.2rem !important;
    color: #1E293B !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

/* 4. Le Texte de description */
.elementor-1209 .elementor-element.elementor-element-b64f8de .elementor-widget-text-editor p {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.05rem !important;
    color: #475569 !important;
    line-height: 1.7 !important;
    margin-bottom: 15px !important;
}

/* ==================================================
   5. LE MOCKUP 3D BROWSER (Sur ton widget Image)
   ================================================== */

/* Transformation de l'image en "Fenêtre" avec la perspective intégrée ! */
.elementor-1209 .elementor-element.elementor-element-b64f8de .elementor-widget-image {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 20px 40px rgba(16, 86, 111, 0.08) !important;
    overflow: hidden !important;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
    transform-style: preserve-3d !important;
    /* On a mis la perspective ICI, plus besoin de l'ID Elementor */
    transform: perspective(1200px) rotateY(0deg) rotateX(0deg) !important;
    position: relative !important;
    padding-top: 40px !important; 
}

/* A. On dessine la barre grise du navigateur Mac */
.elementor-1209 .elementor-element.elementor-element-b64f8de .elementor-widget-image::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 40px !important;
    background: #F1F5F9 !important;
    border-bottom: 1px solid #E2E8F0 !important;
    z-index: 2 !important;
}

/* B. On dessine les 3 points (Rouge, Jaune, Vert) */
.elementor-1209 .elementor-element.elementor-element-b64f8de .elementor-widget-image::after {
    content: '' !important;
    position: absolute !important;
    top: 14px !important;
    left: 15px !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #FF5F56 !important; 
    box-shadow: 20px 0 0 #FFBD2E, 40px 0 0 #27C93F !important; 
    z-index: 3 !important;
}

/* C. L'image de ton projet */
.elementor-1209 .elementor-element.elementor-element-b64f8de .elementor-widget-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    transition: transform 0.8s ease !important;
    margin: 0 !important;
}

/* ==================================================
   6. L'ANIMATION MAGIQUE AU SURVOL
   ================================================== */
.elementor-1209 .elementor-element.elementor-element-b64f8de .elementor-widget-image:hover {
    /* La perspective est aussi intégrée dans le mouvement */
    transform: perspective(1200px) translateY(-15px) rotateX(4deg) rotateY(-4deg) !important;
    box-shadow: -20px 30px 50px rgba(232, 93, 4, 0.15), 0 0 0 1px #E85D04 !important;
}

.elementor-1209 .elementor-element.elementor-element-b64f8de .elementor-widget-image:hover img {
    transform: scale(1.03) !important; 
}

/* ==================================================
   7. RESPONSIVE (Mobiles & Tablettes)
   ================================================== */
@media (max-width: 992px) {
    .elementor-1209 .elementor-element.elementor-element-b64f8de .e-con-inner { flex-direction: column !important; gap: 40px !important; }
    /* Réduit la 3D sur mobile */
    .elementor-1209 .elementor-element.elementor-element-b64f8de .elementor-widget-image:hover { transform: perspective(1200px) translateY(-10px) !important; } 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56f0281 *//* ==================================================
   PORTFOLIO : BROWSER 3D (INVERSÉ - PORTABLE 100%)
   ================================================== */

/* 1. Ajustement de la structure parent (Espacement) */
.elementor-1209 .elementor-element.elementor-element-56f0281 .e-con-inner {
    align-items: center !important;
    gap: 60px !important;
}

/* 2. Le Tag "Refonte & SEO" (Ton H3) */
.elementor-1209 .elementor-element.elementor-element-56f0281 .elementor-widget-heading h3 {
    display: inline-block !important;
    background: rgba(232, 93, 4, 0.1) !important; /* Tag fond orange clair */
    color: #E85D04 !important; /* Texte Orange DEVDEV */
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 5px !important;
}

/* 3. Le Titre "6TEM Informatique" (Ton H2) */
.elementor-1209 .elementor-element.elementor-element-56f0281 .elementor-widget-heading h2 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 2.2rem !important;
    color: #1E293B !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

/* 4. Le Texte de description */
.elementor-1209 .elementor-element.elementor-element-56f0281 .elementor-widget-text-editor p {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.05rem !important;
    color: #475569 !important;
    line-height: 1.7 !important;
    margin-bottom: 15px !important;
}

/* ==================================================
   5. LE MOCKUP 3D BROWSER (Sur ton widget Image)
   ================================================== */

/* Transformation de l'image en "Fenêtre" avec perspective intégrée */
.elementor-1209 .elementor-element.elementor-element-56f0281 .elementor-widget-image {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 20px 40px rgba(16, 86, 111, 0.08) !important;
    overflow: hidden !important;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
    transform-style: preserve-3d !important;
    /* La perspective est ICI */
    transform: perspective(1200px) rotateY(0deg) rotateX(0deg) !important;
    position: relative !important;
    padding-top: 40px !important; /* Laisse la place pour la barre */
}

/* A. On dessine la barre grise du navigateur Mac */
.elementor-1209 .elementor-element.elementor-element-56f0281 .elementor-widget-image::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 40px !important;
    background: #F1F5F9 !important;
    border-bottom: 1px solid #E2E8F0 !important;
    z-index: 2 !important;
}

/* B. On dessine les 3 points (Rouge, Jaune, Vert) */
.elementor-1209 .elementor-element.elementor-element-56f0281 .elementor-widget-image::after {
    content: '' !important;
    position: absolute !important;
    top: 14px !important;
    left: 15px !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #FF5F56 !important; 
    box-shadow: 20px 0 0 #FFBD2E, 40px 0 0 #27C93F !important; 
    z-index: 3 !important;
}

/* C. L'image de ton projet */
.elementor-1209 .elementor-element.elementor-element-56f0281 .elementor-widget-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    transition: transform 0.8s ease !important;
    margin: 0 !important;
}

/* ==================================================
   6. L'ANIMATION MAGIQUE INVERSÉE
   ================================================== */
.elementor-1209 .elementor-element.elementor-element-56f0281 .elementor-widget-image:hover {
    /* La perspective est maintenue pendant l'animation */
    /* LE SECRET EST ICI : rotateY(4deg) au lieu de -4deg */
    transform: perspective(1200px) translateY(-15px) rotateX(4deg) rotateY(4deg) !important;
    
    /* L'ombre est projetée vers la droite (20px) en Bleu DEVDEV */
    box-shadow: 20px 30px 50px rgba(16, 86, 111, 0.15), 0 0 0 1px #10566F !important;
}

.elementor-1209 .elementor-element.elementor-element-56f0281 .elementor-widget-image:hover img {
    transform: scale(1.03) !important;
}

/* ==================================================
   7. RESPONSIVE (Mobiles & Tablettes)
   ================================================== */
@media (max-width: 992px) {
    .elementor-1209 .elementor-element.elementor-element-56f0281 .e-con-inner { flex-direction: column !important; gap: 40px !important; }
    /* On garde la perspective même sur mobile pour éviter un bug visuel */
    .elementor-1209 .elementor-element.elementor-element-56f0281 .elementor-widget-image:hover { transform: perspective(1200px) translateY(-10px) !important; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dc9e51b *//* ==================================================
   PORTFOLIO : EFFET BROWSER 3D (CODE PORTABLE 100%)
   ================================================== */

/* 1. Ajustement de la structure parent (Espacement) */
.elementor-1209 .elementor-element.elementor-element-dc9e51b .e-con-inner {
    align-items: center !important;
    gap: 60px !important;
}

/* 2. Le Tag (Ton H3) */
.elementor-1209 .elementor-element.elementor-element-dc9e51b .elementor-widget-heading h3 {
    display: inline-block !important;
    background: rgba(16, 86, 111, 0.1) !important;
    color: #10566F !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 5px !important;
}

/* 3. Le Titre (Ton H2) */
.elementor-1209 .elementor-element.elementor-element-dc9e51b .elementor-widget-heading h2 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 2.2rem !important;
    color: #1E293B !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

/* 4. Le Texte de description */
.elementor-1209 .elementor-element.elementor-element-dc9e51b .elementor-widget-text-editor p {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.05rem !important;
    color: #475569 !important;
    line-height: 1.7 !important;
    margin-bottom: 15px !important;
}

/* ==================================================
   5. LE MOCKUP 3D BROWSER (Sur ton widget Image)
   ================================================== */

/* Transformation de l'image en "Fenêtre" avec la perspective intégrée ! */
.elementor-1209 .elementor-element.elementor-element-dc9e51b .elementor-widget-image {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 20px 40px rgba(16, 86, 111, 0.08) !important;
    overflow: hidden !important;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
    transform-style: preserve-3d !important;
    /* On a mis la perspective ICI, plus besoin de l'ID Elementor */
    transform: perspective(1200px) rotateY(0deg) rotateX(0deg) !important;
    position: relative !important;
    padding-top: 40px !important; 
}

/* A. On dessine la barre grise du navigateur Mac */
.elementor-1209 .elementor-element.elementor-element-dc9e51b .elementor-widget-image::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 40px !important;
    background: #F1F5F9 !important;
    border-bottom: 1px solid #E2E8F0 !important;
    z-index: 2 !important;
}

/* B. On dessine les 3 points (Rouge, Jaune, Vert) */
.elementor-1209 .elementor-element.elementor-element-dc9e51b .elementor-widget-image::after {
    content: '' !important;
    position: absolute !important;
    top: 14px !important;
    left: 15px !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #FF5F56 !important; 
    box-shadow: 20px 0 0 #FFBD2E, 40px 0 0 #27C93F !important; 
    z-index: 3 !important;
}

/* C. L'image de ton projet */
.elementor-1209 .elementor-element.elementor-element-dc9e51b .elementor-widget-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    transition: transform 0.8s ease !important;
    margin: 0 !important;
}

/* ==================================================
   6. L'ANIMATION MAGIQUE AU SURVOL
   ================================================== */
.elementor-1209 .elementor-element.elementor-element-dc9e51b .elementor-widget-image:hover {
    /* La perspective est aussi intégrée dans le mouvement */
    transform: perspective(1200px) translateY(-15px) rotateX(4deg) rotateY(-4deg) !important;
    box-shadow: -20px 30px 50px rgba(232, 93, 4, 0.15), 0 0 0 1px #E85D04 !important;
}

.elementor-1209 .elementor-element.elementor-element-dc9e51b .elementor-widget-image:hover img {
    transform: scale(1.03) !important; 
}

/* ==================================================
   7. RESPONSIVE (Mobiles & Tablettes)
   ================================================== */
@media (max-width: 992px) {
    .elementor-1209 .elementor-element.elementor-element-dc9e51b .e-con-inner { flex-direction: column !important; gap: 40px !important; }
    /* Réduit la 3D sur mobile */
    .elementor-1209 .elementor-element.elementor-element-dc9e51b .elementor-widget-image:hover { transform: perspective(1200px) translateY(-10px) !important; } 
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cf8e02 *//* ==================================================
   PORTFOLIO : BROWSER 3D (INVERSÉ - PORTABLE 100%)
   ================================================== */

/* 1. Ajustement de la structure parent (Espacement) */
.elementor-1209 .elementor-element.elementor-element-4cf8e02 .e-con-inner {
    align-items: center !important;
    gap: 60px !important;
}

/* 2. Le Tag "Refonte & SEO" (Ton H3) */
.elementor-1209 .elementor-element.elementor-element-4cf8e02 .elementor-widget-heading h3 {
    display: inline-block !important;
    background: rgba(232, 93, 4, 0.1) !important; /* Tag fond orange clair */
    color: #E85D04 !important; /* Texte Orange DEVDEV */
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 5px !important;
}

/* 3. Le Titre "6TEM Informatique" (Ton H2) */
.elementor-1209 .elementor-element.elementor-element-4cf8e02 .elementor-widget-heading h2 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 2.2rem !important;
    color: #1E293B !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

/* 4. Le Texte de description */
.elementor-1209 .elementor-element.elementor-element-4cf8e02 .elementor-widget-text-editor p {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.05rem !important;
    color: #475569 !important;
    line-height: 1.7 !important;
    margin-bottom: 15px !important;
}

/* ==================================================
   5. LE MOCKUP 3D BROWSER (Sur ton widget Image)
   ================================================== */

/* Transformation de l'image en "Fenêtre" avec perspective intégrée */
.elementor-1209 .elementor-element.elementor-element-4cf8e02 .elementor-widget-image {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 20px 40px rgba(16, 86, 111, 0.08) !important;
    overflow: hidden !important;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
    transform-style: preserve-3d !important;
    /* La perspective est ICI */
    transform: perspective(1200px) rotateY(0deg) rotateX(0deg) !important;
    position: relative !important;
    padding-top: 40px !important; /* Laisse la place pour la barre */
}

/* A. On dessine la barre grise du navigateur Mac */
.elementor-1209 .elementor-element.elementor-element-4cf8e02 .elementor-widget-image::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 40px !important;
    background: #F1F5F9 !important;
    border-bottom: 1px solid #E2E8F0 !important;
    z-index: 2 !important;
}

/* B. On dessine les 3 points (Rouge, Jaune, Vert) */
.elementor-1209 .elementor-element.elementor-element-4cf8e02 .elementor-widget-image::after {
    content: '' !important;
    position: absolute !important;
    top: 14px !important;
    left: 15px !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #FF5F56 !important; 
    box-shadow: 20px 0 0 #FFBD2E, 40px 0 0 #27C93F !important; 
    z-index: 3 !important;
}

/* C. L'image de ton projet */
.elementor-1209 .elementor-element.elementor-element-4cf8e02 .elementor-widget-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    transition: transform 0.8s ease !important;
    margin: 0 !important;
}

/* ==================================================
   6. L'ANIMATION MAGIQUE INVERSÉE
   ================================================== */
.elementor-1209 .elementor-element.elementor-element-4cf8e02 .elementor-widget-image:hover {
    /* La perspective est maintenue pendant l'animation */
    /* LE SECRET EST ICI : rotateY(4deg) au lieu de -4deg */
    transform: perspective(1200px) translateY(-15px) rotateX(4deg) rotateY(4deg) !important;
    
    /* L'ombre est projetée vers la droite (20px) en Bleu DEVDEV */
    box-shadow: 20px 30px 50px rgba(16, 86, 111, 0.15), 0 0 0 1px #10566F !important;
}

.elementor-1209 .elementor-element.elementor-element-4cf8e02 .elementor-widget-image:hover img {
    transform: scale(1.03) !important;
}

/* ==================================================
   7. RESPONSIVE (Mobiles & Tablettes)
   ================================================== */
@media (max-width: 992px) {
    .elementor-1209 .elementor-element.elementor-element-4cf8e02 .e-con-inner { flex-direction: column !important; gap: 40px !important; }
    /* On garde la perspective même sur mobile pour éviter un bug visuel */
    .elementor-1209 .elementor-element.elementor-element-4cf8e02 .elementor-widget-image:hover { transform: perspective(1200px) translateY(-10px) !important; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0bc922b *//* ==================================================
   EFFET LOGOS : GRIS -> COULEUR AU SURVOL
   ================================================== */

/* 1. État par défaut (Grisé et un peu transparent) */
.elementor-1209 .elementor-element.elementor-element-0bc922b img {
    filter: grayscale(100%) !important;
    opacity: 0.5 !important; /* Modifie cette valeur (ex: 0.3 ou 0.7) selon tes goûts */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
    cursor: pointer !important;
    transform: scale(1) !important;
}

/* 2. État au survol (Retour de la vraie couleur + petit zoom) */
.elementor-1209 .elementor-element.elementor-element-0bc922b img:hover {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
    transform: scale(1.08) !important; /* Fait légèrement grossir le logo */
}/* End custom CSS */