.elementor-11365 .elementor-element.elementor-element-fed65c6{--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;--margin-top:0px;--margin-bottom:-30px;--margin-left:0px;--margin-right:0px;}.elementor-11365 .elementor-element.elementor-element-2acc44e{--display:flex;--min-height:0px;--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:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:0;}.elementor-11365 .elementor-element.elementor-element-d803683 .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-11365 .elementor-element.elementor-element-111d2a8{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;border-style:none;--border-style:none;--border-radius:22px 22px 22px 22px;box-shadow:0px -6px 35px 0px rgba(255, 255, 255, 0);--margin-top:-120px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:1;}.elementor-11365 .elementor-element.elementor-element-14f57ef{--display:flex;border-style:solid;--border-style:solid;border-width:3px 3px 3px 3px;--border-top-width:3px;--border-right-width:3px;--border-bottom-width:3px;--border-left-width:3px;border-color:#FFD49145;--border-color:#FFD49145;--border-radius:22px 22px 22px 22px;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-11365 .elementor-element.elementor-element-14f57ef:not(.elementor-motion-effects-element-type-background), .elementor-11365 .elementor-element.elementor-element-14f57ef > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#2F1B07BF;}.elementor-11365 .elementor-element.elementor-element-8158987 > .elementor-widget-container{margin:0px 020px 0px 20px;padding:10px 10px 10px 10px;}.elementor-11365 .elementor-element.elementor-element-8158987{text-align:center;}.elementor-11365 .elementor-element.elementor-element-8158987 .elementor-heading-title{font-family:"Libre Baskerville", Sans-serif;font-size:4em;color:#FFFFFF;}.elementor-11365 .elementor-element.elementor-element-b9b12e8 > .elementor-widget-container{margin:-30px 0px 0px 0px;}.elementor-11365 .elementor-element.elementor-element-b9b12e8 img{width:80%;}.elementor-11365 .elementor-element.elementor-element-185b0eb > .elementor-widget-container{margin:-30px 0px 0px 0px;}.elementor-11365 .elementor-element.elementor-element-185b0eb{text-align:center;}.elementor-11365 .elementor-element.elementor-element-185b0eb .elementor-heading-title{font-size:2.1em;font-weight:500;color:#FFFFFF;}.elementor-11365 .elementor-element.elementor-element-49d83cf{text-align:center;font-size:1.2em;font-weight:bold;color:#E0B761;}.elementor-11365 .elementor-element.elementor-element-9e1c40a .elementor-button{background-color:#DFB25D;border-radius:9px 9px 9px 9px;}.elementor-11365 .elementor-element.elementor-element-9e1c40a .elementor-button-content-wrapper{flex-direction:row;}.elementor-11365 .elementor-element.elementor-element-f7bbdb6{--display:flex;}.elementor-11365 .elementor-element.elementor-element-9a7793e{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-11365 .elementor-element.elementor-element-5b4d5c6 .elementor-icon-box-wrapper{gap:15px;}.elementor-11365 .elementor-element.elementor-element-5b4d5c6.elementor-view-stacked .elementor-icon{background-color:#DFB25D;}.elementor-11365 .elementor-element.elementor-element-5b4d5c6.elementor-view-framed .elementor-icon, .elementor-11365 .elementor-element.elementor-element-5b4d5c6.elementor-view-default .elementor-icon{fill:#DFB25D;color:#DFB25D;border-color:#DFB25D;}.elementor-11365 .elementor-element.elementor-element-5b4d5c6 .elementor-icon-box-title{color:#FFFFFF;}.elementor-11365 .elementor-element.elementor-element-5b4d5c6 .elementor-icon-box-description{color:#FFFFFF;}.elementor-11365 .elementor-element.elementor-element-7020a8d .elementor-icon-box-wrapper{gap:15px;}.elementor-11365 .elementor-element.elementor-element-7020a8d.elementor-view-stacked .elementor-icon{background-color:#DFB25D;}.elementor-11365 .elementor-element.elementor-element-7020a8d.elementor-view-framed .elementor-icon, .elementor-11365 .elementor-element.elementor-element-7020a8d.elementor-view-default .elementor-icon{fill:#DFB25D;color:#DFB25D;border-color:#DFB25D;}.elementor-11365 .elementor-element.elementor-element-7020a8d .elementor-icon-box-title{color:#FFFFFF;}.elementor-11365 .elementor-element.elementor-element-7020a8d .elementor-icon-box-description{color:#FFFFFF;}.elementor-11365 .elementor-element.elementor-element-1b23612 .elementor-icon-box-wrapper{gap:15px;}.elementor-11365 .elementor-element.elementor-element-1b23612.elementor-view-stacked .elementor-icon{background-color:#DFB25D;}.elementor-11365 .elementor-element.elementor-element-1b23612.elementor-view-framed .elementor-icon, .elementor-11365 .elementor-element.elementor-element-1b23612.elementor-view-default .elementor-icon{fill:#DFB25D;color:#DFB25D;border-color:#DFB25D;}.elementor-11365 .elementor-element.elementor-element-1b23612 .elementor-icon-box-title{color:#FFFFFF;}.elementor-11365 .elementor-element.elementor-element-1b23612 .elementor-icon-box-description{color:#FFFFFF;}.elementor-11365 .elementor-element.elementor-element-3d89e1c{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;border-style:none;--border-style:none;--border-radius:22px 22px 22px 22px;box-shadow:0px -6px 35px 0px rgba(255, 255, 255, 0);--margin-top:100px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:1;}.elementor-11365 .elementor-element.elementor-element-7577fda{--display:flex;border-style:solid;--border-style:solid;border-width:3px 3px 3px 3px;--border-top-width:3px;--border-right-width:3px;--border-bottom-width:3px;--border-left-width:3px;border-color:#FFD49145;--border-color:#FFD49145;--border-radius:22px 22px 22px 22px;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-11365 .elementor-element.elementor-element-7577fda:not(.elementor-motion-effects-element-type-background), .elementor-11365 .elementor-element.elementor-element-7577fda > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFFBF;}.elementor-11365 .elementor-element.elementor-element-50a505e > .elementor-widget-container{margin:0px 020px 0px 20px;padding:10px 10px 10px 10px;}.elementor-11365 .elementor-element.elementor-element-50a505e{text-align:center;}.elementor-11365 .elementor-element.elementor-element-50a505e .elementor-heading-title{font-family:"Libre Baskerville", Sans-serif;font-size:2.7em;color:#000000;}.elementor-11365 .elementor-element.elementor-element-26d82f3 > .elementor-widget-container{margin:-30px 0px 0px 0px;}.elementor-11365 .elementor-element.elementor-element-26d82f3 img{width:80%;}.elementor-11365 .elementor-element.elementor-element-c5e6ffa > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-11365 .elementor-element.elementor-element-c5e6ffa{text-align:center;}.elementor-11365 .elementor-element.elementor-element-c5e6ffa .elementor-heading-title{font-size:1.5em;font-weight:normal;color:#000000;}.elementor-11365 .elementor-element.elementor-element-3f65954{text-align:center;font-size:1.2em;font-weight:normal;font-style:italic;color:#886722;}.elementor-11365 .elementor-element.elementor-element-245b700 .elementor-button{background-color:#DFB25D;border-radius:9px 9px 9px 9px;}.elementor-11365 .elementor-element.elementor-element-245b700 .elementor-button-content-wrapper{flex-direction:row;}.elementor-11365 .elementor-element.elementor-element-76ace23{--display:flex;}.elementor-11365 .elementor-element.elementor-element-5f2dff2{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-11365 .elementor-element.elementor-element-06424ef .elementor-icon-box-wrapper{gap:15px;}.elementor-11365 .elementor-element.elementor-element-06424ef.elementor-view-stacked .elementor-icon{background-color:#DFB25D;}.elementor-11365 .elementor-element.elementor-element-06424ef.elementor-view-framed .elementor-icon, .elementor-11365 .elementor-element.elementor-element-06424ef.elementor-view-default .elementor-icon{fill:#DFB25D;color:#DFB25D;border-color:#DFB25D;}.elementor-11365 .elementor-element.elementor-element-06424ef .elementor-icon-box-title{color:#000000;}.elementor-11365 .elementor-element.elementor-element-06424ef .elementor-icon-box-description{color:#000000;}.elementor-11365 .elementor-element.elementor-element-133a3fe .elementor-icon-box-wrapper{gap:15px;}.elementor-11365 .elementor-element.elementor-element-133a3fe.elementor-view-stacked .elementor-icon{background-color:#DFB25D;}.elementor-11365 .elementor-element.elementor-element-133a3fe.elementor-view-framed .elementor-icon, .elementor-11365 .elementor-element.elementor-element-133a3fe.elementor-view-default .elementor-icon{fill:#DFB25D;color:#DFB25D;border-color:#DFB25D;}.elementor-11365 .elementor-element.elementor-element-133a3fe .elementor-icon-box-title{color:#000000;}.elementor-11365 .elementor-element.elementor-element-133a3fe .elementor-icon-box-description{color:#000000;}.elementor-11365 .elementor-element.elementor-element-8340248 .elementor-icon-box-wrapper{gap:15px;}.elementor-11365 .elementor-element.elementor-element-8340248.elementor-view-stacked .elementor-icon{background-color:#DFB25D;}.elementor-11365 .elementor-element.elementor-element-8340248.elementor-view-framed .elementor-icon, .elementor-11365 .elementor-element.elementor-element-8340248.elementor-view-default .elementor-icon{fill:#DFB25D;color:#DFB25D;border-color:#DFB25D;}.elementor-11365 .elementor-element.elementor-element-8340248 .elementor-icon-box-title{color:#000000;}.elementor-11365 .elementor-element.elementor-element-8340248 .elementor-icon-box-description{color:#000000;}.elementor-11365 .elementor-element.elementor-element-0876614{--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;--justify-content:center;--align-items:center;--gap:25px 25px;--row-gap:25px;--column-gap:25px;border-style:none;--border-style:none;}.elementor-11365 .elementor-element.elementor-element-0876614:not(.elementor-motion-effects-element-type-background), .elementor-11365 .elementor-element.elementor-element-0876614 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FBF7EF;}.elementor-11365 .elementor-element.elementor-element-257233c{--display:flex;border-style:solid;--border-style:solid;border-width:3px 3px 3px 3px;--border-top-width:3px;--border-right-width:3px;--border-bottom-width:3px;--border-left-width:3px;border-color:#E8D3A8;--border-color:#E8D3A8;--border-radius:24px 24px 24px 24px;box-shadow:0px 8px 25px 0px rgba(0, 0, 0, 0.3);--margin-top:30px;--margin-bottom:30px;--margin-left:0px;--margin-right:0px;}.elementor-11365 .elementor-element.elementor-element-703defa{text-align:center;}.elementor-11365 .elementor-element.elementor-element-703defa .elementor-heading-title{font-family:"Libre Baskerville", Sans-serif;font-weight:600;color:#17130F;}.elementor-11365 .elementor-element.elementor-element-edcdc11{text-align:center;font-size:18px;color:#4A4742;}.elementor-11365 .elementor-element.elementor-element-f5127a2{text-align:center;font-size:18px;color:#4A4742;}.elementor-11365 .elementor-element.elementor-element-f5127a2 a{color:#DFB25D;}.elementor-11365 .elementor-element.elementor-element-6df61eb{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--flex-wrap:wrap;}.elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-menu-toggle{margin:0 auto;}.elementor-11365 .elementor-element.elementor-element-f7668ab{--display:flex;--min-height:850px;--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-11365 .elementor-element.elementor-element-7d84292{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-11365 .elementor-element.elementor-element-3149d57{--display:flex;}.elementor-11365 .elementor-element.elementor-element-cdbe59c{text-align:center;}.elementor-11365 .elementor-element.elementor-element-cdbe59c .elementor-heading-title{font-family:"Press Start 2P", Sans-serif;font-size:54px;color:#FFFFFF;}.elementor-11365 .elementor-element.elementor-element-2d87fba.elementor-element{--align-self:center;}.elementor-11365 .elementor-element.elementor-element-2d87fba{font-family:"DM Sans", Sans-serif;}.elementor-11365 .elementor-element.elementor-element-deb82b6 .elementor-button{background-color:#FFFFFF;font-weight:bold;text-transform:uppercase;fill:#000000;color:#000000;border-radius:50px 50px 50px 50px;}.elementor-11365 .elementor-element.elementor-element-f3d8229{--display:flex;}.elementor-11365 .elementor-element.elementor-element-92bbe64{--display:flex;}.elementor-11365 .elementor-element.elementor-element-6c08199{--display:flex;}.elementor-11365 .elementor-element.elementor-element-9492b2f{--display:flex;}.elementor-11365 .elementor-element.elementor-element-7564fb8{--display:flex;}.elementor-11365 .elementor-element.elementor-element-fa74c8e{--display:flex;}.elementor-11365 .elementor-element.elementor-element-aa2859d{--display:flex;--padding-top:050px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11365 .elementor-element.elementor-element-39a19bd{--display:flex;}.elementor-11365 .elementor-element.elementor-element-580358e{--display:flex;}.elementor-11365 .elementor-element.elementor-element-b190e1f{--display:flex;}.elementor-11365 .elementor-element.elementor-element-ca503d3{--display:flex;}.elementor-11365 .elementor-element.elementor-element-28c538a{--display:flex;}.elementor-11365 .elementor-element.elementor-element-448bb39{--display:flex;}.elementor-11365 .elementor-element.elementor-element-4f31e13{--display:flex;}.elementor-11365 .elementor-element.elementor-element-a82f66f{--display:flex;}.elementor-11365 .elementor-element.elementor-element-48b4f50{--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-11365 .elementor-element.elementor-element-bf3ec42{--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-11365 .elementor-element.elementor-element-bd95f3e{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-11365 .elementor-element.elementor-element-b4df103{--display:flex;}.elementor-11365 .elementor-element.elementor-element-ea2d66a{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--gap:16px 16px;--row-gap:16px;--column-gap:16px;--flex-wrap:wrap;}.elementor-11365 .elementor-element.elementor-element-959df94 .elementor-button-content-wrapper{flex-direction:row;}.elementor-11365 .elementor-element.elementor-element-eeb3e1b{--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;--justify-content:flex-start;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-11365 .elementor-element.elementor-element-eeb3e1b:not(.elementor-motion-effects-element-type-background), .elementor-11365 .elementor-element.elementor-element-eeb3e1b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E5EAF7;}.elementor-11365 .elementor-element.elementor-element-afd5ed0{--display:flex;--justify-content:flex-start;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-11365 .elementor-element.elementor-element-1a6d483{--display:flex;}.elementor-11365 .elementor-element.elementor-element-a0cecb0{text-align:center;}.elementor-11365 .elementor-element.elementor-element-2826a0c{text-align:center;}.elementor-11365 .elementor-element.elementor-element-94e13ca{--display:flex;}.elementor-11365 .elementor-element.elementor-element-26b57bc img{width:900px;}.elementor-11365 .elementor-element.elementor-element-258bfe7{--display:flex;}.elementor-11365 .elementor-element.elementor-element-849a253{--display:flex;}.elementor-11365 .elementor-element.elementor-element-849a253:not(.elementor-motion-effects-element-type-background), .elementor-11365 .elementor-element.elementor-element-849a253 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F6F1EE;}.elementor-11365 .elementor-element.elementor-element-00a38ce{text-align:center;}.elementor-11365 .elementor-element.elementor-element-00a38ce .elementor-heading-title{font-size:54px;font-weight:700;color:#3F495D;}.elementor-11365 .elementor-element.elementor-element-e324adc{text-align:center;font-size:23px;color:#6F6F78;}@media(max-width:1024px){.elementor-11365 .elementor-element.elementor-element-9a7793e{--grid-auto-flow:row;}.elementor-11365 .elementor-element.elementor-element-5f2dff2{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-11365 .elementor-element.elementor-element-fed65c6{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-11365 .elementor-element.elementor-element-2acc44e{--margin-top:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-11365 .elementor-element.elementor-element-9a7793e{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-11365 .elementor-element.elementor-element-5f2dff2{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}}@media(min-width:768px){.elementor-11365 .elementor-element.elementor-element-2acc44e{--content-width:100%;}.elementor-11365 .elementor-element.elementor-element-14f57ef{--width:40%;}.elementor-11365 .elementor-element.elementor-element-7577fda{--width:50%;}.elementor-11365 .elementor-element.elementor-element-257233c{--width:80%;}}/* Start custom CSS for container, class: .elementor-element-2acc44e */@media (max-width: 767px) { .elementor-11365 .elementor-element.elementor-element-2acc44e { min-height: 180vh !important; overflow: hidden !important; position: relative; } .elementor-11365 .elementor-element.elementor-element-2acc44e .elementor-background-video-container { width: 100% !important; height: 100vh !important; overflow: hidden !important; } .elementor-11365 .elementor-element.elementor-element-2acc44e video { width: 100% !important; height: 100vh !important; min-width: 100% !important; min-height: 100vh !important; max-width: none !important; object-fit: cover !important; object-position: 58% center !important; } }/* End custom CSS */ /* Start custom CSS for nav-menu, class: .elementor-element-80c94b3 *//* ========================================= MENU PRINCIPAL = CAPSULES ========================================= */ .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--main > ul { display: flex !important; gap: 18px !important; justify-content: center !important; flex-wrap: wrap !important; } .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--main > ul > li { margin: 0 !important; } /* Boutons principaux : Cuivres / Bois / Cordes / Autres */ .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--main > ul > li > a { min-width: 220px !important; min-height: 58px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 14px 30px !important; background: #fffdf9 !important; color: #17130f !important; border: 1px solid #dfb25d !important; border-radius: 40px !important; font-size: 18px !important; font-weight: 600 !important; text-align: center !important; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important; } /* Supprime la ligne Elementor sous le menu */ .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--main .elementor-item:after, .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--main .elementor-item:before { display: none !important; } /* Hover */ .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--main > ul > li > a:hover, .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--main > ul > li:hover > a { background: #dfb25d !important; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.08); } /* ========================================= PETITE FLÈCHE DU SOUS-MENU ========================================= */ .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--main .sub-arrow { margin-left: 10px !important; color: inherit !important; } /* ========================================= SOUS-MENU ========================================= */ .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--main .sub-menu { min-width: 230px !important; padding: 10px !important; background: #fffdf9 !important; border: 1px solid #e8d3a8 !important; border-radius: 18px !important; box-shadow: 0 14px 35px rgba(0,0,0,0.12) !important; overflow: hidden !important; } /* Instruments du sous-menu */ .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--main .sub-menu a { padding: 12px 18px !important; color: #17130f !important; background: transparent !important; border-radius: 10px !important; font-size: 16px !important; font-weight: 500 !important; transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease !important; } /* Hover instrument */ .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--main .sub-menu a:hover { background: #f8f1e5 !important; color: #a86a00 !important; padding-left: 23px !important; } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--main > ul { gap: 10px !important; } .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--main > ul > li > a { min-width: 150px !important; min-height: 50px !important; padding: 10px 18px !important; font-size: 15px !important; } } @media (max-width: 767px) { /* ========================================= CACHE LE HAMBURGER ========================================= */ .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-menu-toggle { display: none !important; } /* ========================================= MENU PRINCIPAL TOUJOURS VISIBLE ========================================= */ .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--dropdown { display: block !important; position: static !important; width: 100% !important; max-height: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } /* ========================================= 2 CATÉGORIES PAR LIGNE ========================================= */ .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--dropdown > ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--dropdown > ul > li { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } /* ========================================= BOUTONS CATÉGORIES ========================================= */ .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--dropdown > ul > li > a { width: 100% !important; min-width: 0 !important; min-height: 52px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 12px 10px !important; background: #fffdf9 !important; color: #17130f !important; border: 1px solid #dfb25d !important; border-radius: 30px !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important; text-align: center !important; box-sizing: border-box !important; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease !important; } /* Catégorie ouverte */ .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--dropdown > ul > li.mobile-submenu-open > a { background: #dfb25d !important; color: #ffffff !important; } /* Supprime les effets Elementor */ .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--dropdown .elementor-item:before, .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--dropdown .elementor-item:after { display: none !important; } /* ========================================= SOUS-MENUS CACHÉS PAR DÉFAUT ========================================= */ .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--dropdown .sub-menu { display: none !important; position: static !important; width: 100% !important; min-width: 0 !important; margin: 8px 0 4px !important; padding: 8px !important; background: #fffdf9 !important; border: 1px solid #e8d3a8 !important; border-radius: 18px !important; box-shadow: none !important; box-sizing: border-box !important; } /* ========================================= SOUS-MENU OUVERT ========================================= */ .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--dropdown li.mobile-submenu-open > .sub-menu { display: block !important; } /* ========================================= LIENS DES INSTRUMENTS ========================================= */ .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--dropdown .sub-menu li { width: 100% !important; margin: 0 !important; padding: 0 !important; } .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--dropdown .sub-menu a { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 11px 12px !important; background: transparent !important; color: #17130f !important; border: 0 !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 500 !important; text-align: center !important; box-sizing: border-box !important; } .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--dropdown .sub-menu a:hover { background: #f8f1e5 !important; color: #a86a00 !important; } /* ========================================= FLÈCHE ========================================= */ .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--dropdown .sub-arrow { margin-left: 7px !important; transition: transform 0.25s ease !important; } .elementor-11365 .elementor-element.elementor-element-80c94b3 .elementor-nav-menu--dropdown li.mobile-submenu-open > a .sub-arrow { transform: rotate(180deg) !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-0876614 *//* ========================================= SECTION MENU INSTRUMENTS ========================================= */ .elementor-11365 .elementor-element.elementor-element-0876614 { position: relative !important; z-index: 500 !important; width: 100% !important; overflow: visible !important; } /* ========================================= LES PARENTS LAISSENT SORTIR LES SOUS-MENUS ========================================= */ .elementor-11365 .elementor-element.elementor-element-0876614 .e-con, .elementor-11365 .elementor-element.elementor-element-0876614 .e-con-inner, .elementor-11365 .elementor-element.elementor-element-0876614 .elementor-widget, .elementor-11365 .elementor-element.elementor-element-0876614 .elementor-widget-container { overflow: visible !important; } /* ========================================= WIDGET MENU ========================================= */ .elementor-11365 .elementor-element.elementor-element-0876614 .elementor-nav-menu--main, .elementor-11365 .elementor-element.elementor-element-0876614 nav.elementor-nav-menu--dropdown, .elementor-11365 .elementor-element.elementor-element-0876614 .elementor-nav-menu { position: relative !important; } /* ========================================= IMPORTANT : ON NE MET EN ABSOLU QUE LES VRAIS SOUS-MENUS ========================================= */ .elementor-11365 .elementor-element.elementor-element-0876614 ul.sub-menu { position: absolute !important; z-index: 999999 !important; overflow: hidden !important; } /* ========================================= LIENS DES SOUS-MENUS CLIQUABLES ========================================= */ .elementor-11365 .elementor-element.elementor-element-0876614 ul.sub-menu a { position: relative !important; z-index: 1000000 !important; pointer-events: auto !important; } /* ========================================= SECTION SUIVANTE EN DESSOUS ========================================= */ .elementor-11365 .elementor-element.elementor-element-0876614 + .e-con { position: relative !important; z-index: 1 !important; } /* ========================================================= MOBILE iPHONE / SAFARI / INSTAGRAM ========================================================= */ @media screen and (max-width: 767px) { /* ========================================= SECTION ========================================= */ .elementor-11365 .elementor-element.elementor-element-0876614 { position: relative !important; z-index: 500 !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; } .elementor-11365 .elementor-element.elementor-element-0876614 .e-con, .elementor-11365 .elementor-element.elementor-element-0876614 .e-con-inner, .elementor-11365 .elementor-element.elementor-element-0876614 .elementor-widget, .elementor-11365 .elementor-element.elementor-element-0876614 .elementor-widget-container { overflow: visible !important; } /* ========================================= CONTENEURS DE NAVIGATION On couvre : - le menu desktop si Elementor le conserve - le clone mobile utilisé sur Safari/iPhone ========================================= */ .elementor-11365 .elementor-element.elementor-element-0876614 nav.elementor-nav-menu--main, .elementor-11365 .elementor-element.elementor-element-0876614 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 12px !important; overflow: visible !important; transform: none !important; box-sizing: border-box !important; } /* ========================================= LISTE PRINCIPALE 2 BOUTONS PAR LIGNE ========================================= */ .elementor-11365 .elementor-element.elementor-element-0876614 nav.elementor-nav-menu--main > ul.elementor-nav-menu, .elementor-11365 .elementor-element.elementor-element-0876614 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > ul.elementor-nav-menu { position: relative !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 10px !important; row-gap: 10px !important; overflow: visible !important; transform: none !important; box-sizing: border-box !important; } /* ========================================= CATÉGORIES PRINCIPALES ========================================= */ .elementor-11365 .elementor-element.elementor-element-0876614 nav.elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item, .elementor-11365 .elementor-element.elementor-element-0876614 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > ul.elementor-nav-menu > li.menu-item { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================= LES 4 GROS BOUTONS ========================================= */ .elementor-11365 .elementor-element.elementor-element-0876614 nav.elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item > a, .elementor-11365 .elementor-element.elementor-element-0876614 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > ul.elementor-nav-menu > li.menu-item > a { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 58px !important; margin: 0 !important; padding: 12px 12px !important; white-space: nowrap !important; text-align: center !important; box-sizing: border-box !important; } /* ========================================= FLÈCHE ========================================= */ .elementor-11365 .elementor-element.elementor-element-0876614 .sub-arrow { flex: 0 0 auto !important; margin-left: 8px !important; padding: 0 !important; } /* ========================================= LES VRAIS SOUS-MENUS Flûte Clarinette Basson etc. ========================================= */ .elementor-11365 .elementor-element.elementor-element-0876614 li.menu-item-has-children > ul.sub-menu { position: absolute !important; top: calc(100% + 6px) !important; bottom: auto !important; width: 250px !important; min-width: 250px !important; max-width: calc(100vw - 24px) !important; height: auto !important; margin: 0 !important; padding: 9px 0 !important; display: none; background: #fffdf9 !important; border: 1px solid #dfb25d !important; border-radius: 18px !important; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.17) !important; overflow: hidden !important; transform: none !important; z-index: 999999 !important; box-sizing: border-box !important; } /* ========================================= QUAND ELEMENTOR OUVRE LE SOUS-MENU ========================================= */ .elementor-11365 .elementor-element.elementor-element-0876614 li.menu-item-has-children > ul.sub-menu[style*="display: block"], .elementor-11365 .elementor-element.elementor-element-0876614 li.menu-item-has-children > ul.sub-menu[aria-expanded="true"] { display: block !important; } /* ========================================= COLONNE GAUCHE 1 = CUIVRES 3 = CORDES ========================================= */ .elementor-11365 .elementor-element.elementor-element-0876614 nav.elementor-nav-menu--main > ul.elementor-nav-menu > li:nth-child(odd) > ul.sub-menu, .elementor-11365 .elementor-element.elementor-element-0876614 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > ul.elementor-nav-menu > li:nth-child(odd) > ul.sub-menu { left: 0 !important; right: auto !important; } /* ========================================= COLONNE DROITE 2 = BOIS 4 = AUTRES ========================================= */ .elementor-11365 .elementor-element.elementor-element-0876614 nav.elementor-nav-menu--main > ul.elementor-nav-menu > li:nth-child(even) > ul.sub-menu, .elementor-11365 .elementor-element.elementor-element-0876614 nav.elementor-nav-menu--dropdown.elementor-nav-menu__container > ul.elementor-nav-menu > li:nth-child(even) > ul.sub-menu { left: auto !important; right: 0 !important; } /* ========================================= LIGNES DU SOUS-MENU ========================================= */ .elementor-11365 .elementor-element.elementor-element-0876614 ul.sub-menu > li.menu-item { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; box-sizing: border-box !important; } /* ========================================= LIENS : FLÛTE / CLARINETTE / BASSON... ========================================= */ .elementor-11365 .elementor-element.elementor-element-0876614 ul.sub-menu > li.menu-item > a { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 43px !important; margin: 0 !important; padding: 11px 18px !important; color: #17130f !important; background: transparent !important; white-space: nowrap !important; line-height: 1.25 !important; text-align: left !important; box-sizing: border-box !important; pointer-events: auto !important; z-index: 1000000 !important; } /* ========================================= PETIT HOVER / TAP ========================================= */ .elementor-11365 .elementor-element.elementor-element-0876614 ul.sub-menu > li.menu-item > a:hover, .elementor-11365 .elementor-element.elementor-element-0876614 ul.sub-menu > li.menu-item > a:focus { background: rgba(223,178,93,0.12) !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-48b4f50 */.elementor-11365 .elementor-element.elementor-element-48b4f50 { position: relative !important; width: 100% !important; min-height: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; overflow: visible !important; background: none !important; background-image: none !important; } .elementor-11365 .elementor-element.elementor-element-48b4f50 > .e-con-inner { min-height: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; } .elementor-11365 .elementor-element.elementor-element-48b4f50 .elementor-widget-html { min-height: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .elementor-11365 .elementor-element.elementor-element-48b4f50 .elementor-widget-html .elementor-widget-container { min-height: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bf3ec42 *//* ========================================= SECTION POSITIONS ========================================= */ .elementor-11365 .elementor-element.elementor-element-bf3ec42 { position: relative !important; width: 100% !important; margin: 0 !important; padding: 95px 24px 90px 24px !important; background: radial-gradient( circle at 20% 20%, rgba(225, 173, 85, 0.10), transparent 35% ), radial-gradient( circle at 90% 80%, rgba(91, 139, 111, 0.16), transparent 40% ), #14231f !important; overflow: hidden !important; box-sizing: border-box !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .elementor-widget-html, .elementor-11365 .elementor-element.elementor-element-bf3ec42 .elementor-widget-html > .elementor-widget-container { width: 100% !important; } /* ========================================= CONTENEUR GÉNÉRAL ========================================= */ .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-game { width: 100% !important; max-width: 1250px !important; margin: 0 auto !important; color: #ffffff !important; } /* ========================================= HEADER ========================================= */ .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-game-header { width: 100% !important; max-width: 920px !important; margin: 0 auto 55px auto !important; text-align: center !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-game-kicker { display: flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; margin-bottom: 18px !important; color: #e1ad55 !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-game-kicker span { width: 34px !important; height: 1px !important; background: #e1ad55 !important; opacity: 0.75 !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-game-kicker strong { font-size: 13px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 0.18em !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-game-header h2 { margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-size: clamp(36px, 4vw, 58px) !important; line-height: 1.05 !important; font-weight: 700 !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-game-header p { max-width: 720px !important; margin: 18px auto 0 auto !important; color: rgba(255,255,255,0.72) !important; font-size: clamp(16px, 1.3vw, 19px) !important; line-height: 1.55 !important; } /* ========================================= LAYOUT PRINCIPAL ========================================= */ .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-game-layout { width: 100% !important; display: grid !important; grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.75fr) !important; align-items: center !important; gap: 55px !important; } /* ========================================= COLONNE CARROUSEL ========================================= */ .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-carousel-column { position: relative !important; min-width: 0 !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-counter { width: max-content !important; margin: 0 auto 16px auto !important; padding: 7px 15px !important; color: rgba(255,255,255,0.70) !important; background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(255,255,255,0.11) !important; border-radius: 999px !important; font-size: 13px !important; line-height: 1 !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-counter strong { color: #e1ad55 !important; } /* ========================================= CARROUSEL ========================================= */ .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-carousel { position: relative !important; width: 100% !important; height: 520px !important; margin: 0 auto !important; perspective: 1500px !important; } /* ========================================= CARTE ========================================= */ .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-card { position: absolute !important; top: 10px !important; left: 50% !important; width: clamp(220px, 21vw, 295px) !important; aspect-ratio: 2 / 3 !important; transform-origin: 50% 100% !important; transition: transform 0.95s cubic-bezier(.22,.8,.22,1), opacity 0.80s ease, filter 0.80s ease !important; will-change: transform !important; pointer-events: none !important; } /* ========================================= CARTE CENTRALE ========================================= */ .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-card[data-offset="0"] { z-index: 10 !important; transform: translateX(-50%) translateY(0) scale(1) rotateZ(0deg) !important; opacity: 1 !important; filter: none !important; pointer-events: auto !important; } /* ========================================= CARTE GAUCHE 1 ========================================= */ .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-card[data-offset="-1"] { z-index: 8 !important; transform: translateX( calc(-50% - clamp(145px, 14vw, 195px)) ) translateY(37px) scale(0.88) rotateZ(-8deg) !important; opacity: 0.78 !important; filter: brightness(0.82) saturate(0.82) !important; } /* ========================================= CARTE DROITE 1 ========================================= */ .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-card[data-offset="1"] { z-index: 8 !important; transform: translateX( calc(-50% + clamp(145px, 14vw, 195px)) ) translateY(37px) scale(0.88) rotateZ(8deg) !important; opacity: 0.78 !important; filter: brightness(0.82) saturate(0.82) !important; } /* ========================================= CARTE GAUCHE 2 ========================================= */ .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-card[data-offset="-2"] { z-index: 5 !important; transform: translateX( calc(-50% - clamp(250px, 25vw, 335px)) ) translateY(78px) scale(0.73) rotateZ(-14deg) !important; opacity: 0.42 !important; filter: brightness(0.65) saturate(0.7) !important; } /* ========================================= CARTE DROITE 2 ========================================= */ .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-card[data-offset="2"] { z-index: 5 !important; transform: translateX( calc(-50% + clamp(250px, 25vw, 335px)) ) translateY(78px) scale(0.73) rotateZ(14deg) !important; opacity: 0.42 !important; filter: brightness(0.65) saturate(0.7) !important; } /* ========================================= TILT 3D ========================================= */ .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-card-tilt { position: relative !important; width: 100% !important; height: 100% !important; transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateY(0) scale(1) !important; transform-style: preserve-3d !important; transition: transform 0.55s cubic-bezier(.18,.75,.2,1) !important; will-change: transform !important; } /* ========================================= SURVOL : ON "ENTROUVRE" LA CARTE ========================================= */ @media (hover:hover) and (pointer:fine) { .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-card[data-offset="0"].flip-right:not(.is-revealed):hover .positions-card-tilt { transform: perspective(1200px) translateY(-10px) scale(1.025) rotateY(13deg) rotateZ(0.6deg) !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-card[data-offset="0"].flip-left:not(.is-revealed):hover .positions-card-tilt { transform: perspective(1200px) translateY(-10px) scale(1.025) rotateY(-13deg) rotateZ(-0.6deg) !important; } } /* ========================================= FLIP ========================================= */ .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-card-inner { position: relative !important; width: 100% !important; height: 100% !important; transform-style: preserve-3d !important; transform: rotateY(0deg) !important; transition: transform 1s cubic-bezier(.18,.72,.22,1) !important; will-change: transform !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-card.flip-right.is-revealed .positions-card-inner { transform: rotateY(180deg) !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-card.flip-left.is-revealed .positions-card-inner { transform: rotateY(-180deg) !important; } /* Pendant la révélation */ .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-card.is-revealed .positions-card-tilt { transform: perspective(1200px) translateY(-13px) scale(1.09) !important; } /* ========================================= RECTO / VERSO ========================================= */ .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-card-face { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; border-radius: 18px !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; box-shadow: 0 25px 55px rgba(0,0,0,0.35) !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-card-front { transform: rotateY(0deg) !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-card-back { transform: rotateY(180deg) !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-card-face img { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: cover !important; } /* ========================================= INDICATION SOUS CARTES ========================================= */ .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-hover-hint { display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; margin-top: 3px !important; color: rgba(255,255,255,0.48) !important; font-size: 13px !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-hover-hint span { color: #e1ad55 !important; font-size: 18px !important; } /* ========================================= QUIZ ========================================= */ .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-quiz { position: relative !important; width: 100% !important; padding: 35px 32px !important; background: rgba(255,255,255,0.96) !important; color: #171713 !important; border: 1px solid rgba(225,173,85,0.65) !important; border-radius: 28px !important; box-shadow: 0 22px 55px rgba(0,0,0,0.20) !important; transition: opacity 0.45s ease, transform 0.45s ease !important; box-sizing: border-box !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-game.is-advancing .positions-quiz { opacity: 0.62 !important; transform: translateY(4px) !important; } /* ========================================= BADGE ========================================= */ .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-quiz-badge { width: max-content !important; margin: 0 0 24px 0 !important; padding: 7px 13px !important; background: rgba(225,173,85,0.17) !important; color: #a76d12 !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; } /* ========================================= QUESTIONS ========================================= */ .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-question { margin-bottom: 26px !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-question h3 { margin: 0 0 12px 0 !important; padding: 0 !important; color: #171713 !important; font-size: 20px !important; line-height: 1.25 !important; font-weight: 700 !important; } /* ========================================= OPTIONS ========================================= */ .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-options { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 8px !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-answer { appearance: none !important; min-width: 0 !important; padding: 12px 8px !important; background: #ffffff !important; color: #302d28 !important; border: 1px solid #d9d2c8 !important; border-radius: 12px !important; cursor: pointer !important; font-family: inherit !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 600 !important; text-align: center !important; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important; } @media (hover:hover) and (pointer:fine) { .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-answer:hover { border-color: #e1ad55 !important; transform: translateY(-2px) !important; box-shadow: 0 5px 14px rgba(150,100,30,0.10) !important; } } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-answer.is-selected { color: #98630e !important; background: #fff6e4 !important; border-color: #e1ad55 !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-answer.is-correct { color: #17643d !important; background: #e7f7ee !important; border-color: #55a778 !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-answer.is-wrong { color: #9a3434 !important; background: #fceaea !important; border-color: #d78383 !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-answer:disabled { cursor: default !important; } /* ========================================= FEEDBACK ========================================= */ .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-feedback { min-height: 48px !important; margin-top: 4px !important; padding: 13px 15px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #f4f1eb !important; color: #6a6258 !important; border-radius: 13px !important; font-size: 14px !important; line-height: 1.35 !important; text-align: center !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-feedback.is-success { color: #17643d !important; background: #e7f7ee !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-feedback.is-error { color: #8d4d28 !important; background: #fff0e2 !important; } /* ========================================= LÉGENDE ========================================= */ .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-legend { margin-top: 11px !important; color: #92897d !important; font-size: 11px !important; text-align: center !important; } /* ========================================= CTA ========================================= */ .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-game-footer { display: flex !important; justify-content: center !important; margin-top: 48px !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-game-cta { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; padding: 14px 24px !important; color: #17231f !important; background: #e1ad55 !important; border: 1px solid #e1ad55 !important; border-radius: 999px !important; text-decoration: none !important; font-size: 16px !important; line-height: 1.2 !important; font-weight: 700 !important; box-shadow: 0 9px 24px rgba(0,0,0,0.18) !important; transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-game-cta span { font-size: 20px !important; transition: transform 0.25s ease !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-game-cta:hover { background: #ffffff !important; color: #17231f !important; transform: translateY(-2px) !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-game-cta:hover span { transform: translateX(4px) !important; } /* ========================================= TABLETTE ========================================= */ @media (max-width:1024px) { .elementor-11365 .elementor-element.elementor-element-bf3ec42 { padding: 80px 18px 80px 18px !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-game-layout { grid-template-columns: 1fr !important; gap: 35px !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-carousel { max-width: 800px !important; height: 500px !important; margin: 0 auto !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-quiz { max-width: 620px !important; margin: 0 auto !important; } } /* ========================================= MOBILE ========================================= */ @media (max-width:767px) { .elementor-11365 .elementor-element.elementor-element-bf3ec42 { padding: 65px 10px 65px 10px !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-game-header { margin-bottom: 35px !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-game-header h2 { font-size: clamp(30px,8vw,39px) !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-game-header p { padding: 0 8px !important; font-size: 14px !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-game-kicker strong { font-size: 11px !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-carousel { height: 380px !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-card { width: clamp(165px,53vw,220px) !important; top: 5px !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-card[data-offset="-1"] { transform: translateX( calc(-50% - 88px) ) translateY(30px) scale(.83) rotateZ(-7deg) !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-card[data-offset="1"] { transform: translateX( calc(-50% + 88px) ) translateY(30px) scale(.83) rotateZ(7deg) !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-card[data-offset="-2"] { transform: translateX( calc(-50% - 145px) ) translateY(58px) scale(.65) rotateZ(-12deg) !important; opacity: .30 !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-card[data-offset="2"] { transform: translateX( calc(-50% + 145px) ) translateY(58px) scale(.65) rotateZ(12deg) !important; opacity: .30 !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-card-face { border-radius: 13px !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-hover-hint { display: none !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-quiz { padding: 26px 15px !important; border-radius: 20px !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-question { margin-bottom: 22px !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-question h3 { font-size: 18px !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-options { gap: 6px !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-answer { padding: 11px 5px !important; font-size: 12px !important; border-radius: 10px !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-game-footer { margin-top: 34px !important; } .elementor-11365 .elementor-element.elementor-element-bf3ec42 .positions-game-cta { padding: 13px 20px !important; font-size: 14px !important; } } /* ========================================= ACCESSIBILITÉ ========================================= */ @media (prefers-reduced-motion: reduce) { .elementor-11365 .elementor-element.elementor-element-bf3ec42 *, .elementor-11365 .elementor-element.elementor-element-bf3ec42 *::before, .elementor-11365 .elementor-element.elementor-element-bf3ec42 *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================= CARTES LATÉRALES CLIQUABLES ========================================= */ #positions-game .positions-card { pointer-events: auto !important; } /* Carte centrale */ #positions-game .positions-card[data-offset="0"] { cursor: default !important; } /* Cartes latérales */ #positions-game .positions-card:not([data-offset="0"]) { cursor: pointer !important; } /* Petit mouvement pour montrer qu'une carte latérale est cliquable */ @media (hover: hover) and (pointer: fine) { #positions-game .positions-card:not([data-offset="0"]):hover .positions-card-tilt { transform: translateY(-7px) scale(1.025) !important; } } /* Pendant la révélation d'une réponse, aucune autre carte ne peut être sélectionnée */ #positions-game.is-locked .positions-card { pointer-events: none !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bd95f3e *//* ========================================= SECTION INSTAGRAM ========================================= */ .elementor-11365 .elementor-element.elementor-element-bd95f3e { position: relative !important; width: 100% !important; margin: 0 !important; padding: 90px 24px 100px 24px !important; background: #f8f4ed !important; overflow: hidden !important; box-sizing: border-box !important; } /* ========================================= HEADER ========================================= */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-header { width: 100% !important; max-width: 900px !important; margin: 0 auto 46px auto !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0 !important; text-align: center !important; box-sizing: border-box !important; } /* ========================================= PETIT MOTIF INSTAGRAM ========================================= */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-eyebrow { display: flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; margin-bottom: 18px !important; } .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-eyebrow span { display: block !important; width: 32px !important; height: 1px !important; background: #c98a25 !important; opacity: 0.75 !important; } .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-eyebrow svg { display: block !important; width: 24px !important; height: 24px !important; fill: none !important; stroke: #c98a25 !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } /* ========================================= TITRE ========================================= */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-title { width: 100% !important; margin: 0 !important; padding: 0 !important; } .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-title h1, .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-title h2, .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-title h3, .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-title h4, .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-title h5, .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-title h6 { margin: 0 !important; padding: 0 !important; color: #17130f !important; font-size: clamp(36px, 3.3vw, 54px) !important; line-height: 1.1 !important; font-weight: 700 !important; text-align: center !important; } /* ========================================= SOUS-TITRE ========================================= */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-subtitle { width: 100% !important; max-width: 760px !important; margin: 14px auto 0 auto !important; padding: 0 !important; color: #69645e !important; text-align: center !important; } .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-subtitle p { margin: 0 !important; padding: 0 !important; color: inherit !important; font-size: clamp(16px, 1.25vw, 19px) !important; line-height: 1.5 !important; } /* ========================================= CONTENEUR DE LA GRILLE ========================================= */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-grid { width: 100% !important; max-width: 1180px !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================= STRUCTURE ELEMENTOR AVEC .e-con-inner ========================================= */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-grid > .e-con-inner { width: 100% !important; max-width: 1180px !important; margin: 0 auto !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; align-items: stretch !important; box-sizing: border-box !important; } /* ========================================= CAS ELEMENTOR SANS .e-con-inner ========================================= */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-grid.e-con-full { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; align-items: stretch !important; } /* ========================================= CHAQUE PHOTO ========================================= */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-grid .instagram-photo { position: relative !important; width: 100% !important; max-width: none !important; min-width: 0 !important; aspect-ratio: 1 / 1 !important; margin: 0 !important; padding: 0 !important; align-self: stretch !important; border-radius: 18px !important; overflow: hidden !important; background: #eeeeee !important; box-shadow: 0 9px 25px rgba(30, 20, 10, 0.10) !important; box-sizing: border-box !important; --width: 100% !important; } /* ========================================= CONTENEUR ELEMENTOR IMAGE ========================================= */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-photo .elementor-widget-container { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: inherit !important; } /* ========================================= LIEN DE LA PHOTO ========================================= */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-photo a { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: inherit !important; } /* ========================================= IMAGE ========================================= */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-photo img { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; object-fit: cover !important; object-position: center center !important; transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.45s ease !important; } /* ========================================= OVERLAY AU SURVOL ========================================= */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-photo a::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 2 !important; background: rgba(0, 0, 0, 0.18) !important; opacity: 0 !important; transition: opacity 0.35s ease !important; pointer-events: none !important; } /* ========================================= VRAIE ICÔNE INSTAGRAM SUR LES PHOTOS ========================================= */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-photo a::after { content: "\f16d" !important; position: absolute !important; top: 15px !important; right: 15px !important; z-index: 3 !important; width: 34px !important; height: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands" !important; font-weight: 400 !important; font-size: 19px !important; line-height: 1 !important; color: #ffffff !important; background: rgba(0, 0, 0, 0.28) !important; border: 1px solid rgba(255, 255, 255, 0.45) !important; border-radius: 9px !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; -webkit-font-smoothing: antialiased !important; pointer-events: none !important; box-sizing: border-box !important; } /* ========================================= HOVER DES PHOTOS ========================================= */ @media (hover: hover) and (pointer: fine) { .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-photo:hover img { transform: scale(1.055) !important; filter: brightness(0.88) !important; } .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-photo:hover a::before { opacity: 1 !important; } } /* ========================================= BOUTON INSTAGRAM ========================================= */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-button { width: auto !important; max-width: max-content !important; margin: 42px auto 0 auto !important; } /* Bouton */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-button .elementor-button { background: transparent !important; color: #b87316 !important; border: 1px solid #d69a42 !important; border-radius: 999px !important; padding: 13px 25px !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.2 !important; box-shadow: 0 6px 18px rgba(150, 100, 30, 0.08) !important; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important; } /* Espacement icône / texte */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-button .elementor-button-content-wrapper { display: flex !important; align-items: center !important; gap: 9px !important; } /* ========================================= COULEUR ICÔNE INSTAGRAM DU BOUTON AU REPOS ========================================= */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-button .elementor-button-icon { color: #b87316 !important; transition: color 0.25s ease !important; } .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-button .elementor-button-icon i { color: #b87316 !important; } .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-button .elementor-button-icon svg { fill: #b87316 !important; color: #b87316 !important; transition: fill 0.25s ease, color 0.25s ease !important; } .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-button .elementor-button-icon svg path { fill: #b87316 !important; transition: fill 0.25s ease !important; } /* ========================================= HOVER DU BOUTON ========================================= */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-button .elementor-button:hover { background: #c98a25 !important; color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 9px 24px rgba(150, 100, 30, 0.16) !important; } /* Icône blanche au hover */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-button .elementor-button:hover .elementor-button-icon { color: #ffffff !important; } .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-button .elementor-button:hover .elementor-button-icon i { color: #ffffff !important; } .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-button .elementor-button:hover .elementor-button-icon svg { fill: #ffffff !important; color: #ffffff !important; } .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-button .elementor-button:hover .elementor-button-icon svg path { fill: #ffffff !important; } /* Texte blanc au hover */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-button .elementor-button:hover .elementor-button-text { color: #ffffff !important; } /* ========================================= TABLETTE 2 COLONNES ========================================= */ @media (max-width: 1024px) { .elementor-11365 .elementor-element.elementor-element-bd95f3e { padding: 75px 20px 85px 20px !important; } .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-grid { max-width: 760px !important; } .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-grid > .e-con-inner { max-width: 760px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-grid.e-con-full { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } } /* ========================================= MOBILE 2 COLONNES ========================================= */ @media (max-width: 767px) { .elementor-11365 .elementor-element.elementor-element-bd95f3e { padding: 60px 10px 70px 10px !important; } /* Header */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-header { margin-bottom: 30px !important; } .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-eyebrow { margin-bottom: 13px !important; } /* Titre */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-title h1, .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-title h2, .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-title h3, .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-title h4, .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-title h5, .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-title h6 { font-size: clamp(29px, 8vw, 38px) !important; } /* Sous-titre */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-subtitle { max-width: 92vw !important; margin-top: 10px !important; } .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-subtitle p { font-size: 14px !important; line-height: 1.4 !important; } /* Grille */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-grid { width: 100% !important; max-width: 100% !important; } .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-grid > .e-con-inner { width: 100% !important; max-width: 100% !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-grid.e-con-full { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } /* Photos */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-grid .instagram-photo { width: 100% !important; max-width: none !important; aspect-ratio: 1 / 1 !important; border-radius: 12px !important; box-shadow: 0 5px 14px rgba(30, 20, 10, 0.08) !important; } /* Icône Instagram sur les photos */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-photo a::after { top: 8px !important; right: 8px !important; width: 27px !important; height: 27px !important; border-radius: 7px !important; font-size: 15px !important; } /* Bouton */ .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-button { margin-top: 30px !important; } .elementor-11365 .elementor-element.elementor-element-bd95f3e .instagram-button .elementor-button { padding: 11px 20px !important; font-size: 14px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-eeb3e1b *//* ========================================= SECTION PRINCIPALE ========================================= */ .elementor-11365 .elementor-element.elementor-element-eeb3e1b { position: relative !important; width: 100% !important; min-height: var(--tshirt-section-height, 100vh) !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* ========================================= SCÈNE STICKY IMPORTANT : STICKY ELEMENTOR DOIT RESTER DÉSACTIVÉ ========================================= */ .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-sticky { position: sticky !important; top: 0 !important; width: 100% !important; height: 100vh !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; z-index: 1 !important; } /* ========================================= TITRE / SOUS-TITRE / NOM DU DESSIN ========================================= */ .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-copy { position: absolute !important; top: 120px !important; left: 50% !important; transform: translateX(-50%) !important; width: min(950px, 94vw) !important; margin: 0 !important; padding: 0 20px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important; text-align: center !important; z-index: 30 !important; pointer-events: none !important; } /* Barre admin WordPress */ body.admin-bar .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-copy { top: 155px !important; } /* ========================================= TITRE PRINCIPAL ========================================= */ .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-section-title { width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: center !important; } .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-section-title h1, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-section-title h2, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-section-title h3, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-section-title h4, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-section-title h5, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-section-title h6 { margin: 0 !important; padding: 0 !important; color: #17130f !important; font-size: clamp(30px, 3vw, 48px) !important; line-height: 1.1 !important; font-weight: 600 !important; text-align: center !important; } /* ========================================= SOUS-TITRE ========================================= */ .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-section-subtitle { width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: center !important; } .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-section-subtitle, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-section-subtitle p { margin: 0 !important; padding: 0 !important; color: #55514b !important; font-size: clamp(15px, 1.3vw, 18px) !important; line-height: 1.45 !important; } /* ========================================= NOM DYNAMIQUE DU DESIGN CLIQUABLE ========================================= */ .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name { width: auto !important; margin: 7px 0 0 !important; padding: 7px 18px !important; background: rgba(255, 253, 249, 0.94) !important; border: 1px solid #dfb25d !important; border-radius: 999px !important; box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06) !important; transition: opacity 0.16s ease, transform 0.16s ease, background 0.2s ease, box-shadow 0.2s ease !important; pointer-events: auto !important; cursor: pointer !important; user-select: none !important; -webkit-user-select: none !important; } .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name:hover { background: #dfb25d !important; box-shadow: 0 7px 20px rgba(0, 0, 0, 0.10) !important; } /* Texte dans la capsule */ .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name h1, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name h2, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name h3, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name h4, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name h5, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name h6, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name p, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name .elementor-heading-title { margin: 0 !important; padding: 0 !important; color: #a86a00 !important; font-size: 15px !important; line-height: 1.2 !important; font-weight: 600 !important; text-align: center !important; transition: color 0.2s ease !important; pointer-events: none !important; } /* Hover du texte */ .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name:hover h1, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name:hover h2, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name:hover h3, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name:hover h4, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name:hover h5, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name:hover h6, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name:hover p, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name:hover .elementor-heading-title { color: #ffffff !important; } /* ========================================= T-SHIRT + ILLUSTRATIONS ON DÉPLACE TOUT LE MOCKUP ENSEMBLE ========================================= */ .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-stage { position: relative !important; width: min(1000px, 90vw) !important; max-width: none !important; margin: 0 !important; padding: 0 !important; flex: none !important; /* * POSITION VERTICALE DU T-SHIRT * * Plus la valeur augmente, * plus le T-shirt descend. */ transform: translateY(320px) !important; overflow: visible !important; } /* ========================================= IMAGE DU T-SHIRT ========================================= */ .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-base { position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important; z-index: 1 !important; overflow: visible !important; } .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-base .elementor-widget-container { width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-base img { display: block !important; width: 100% !important; height: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; } /* ========================================= ZONE D'IMPRESSION POSITION VALIDÉE ========================================= */ .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-print-area { position: absolute !important; top: 40% !important; left: 49% !important; transform: translate(-50%, -50%) scale(0.9) !important; width: 27% !important; aspect-ratio: 1 / 1 !important; margin: 0 !important; padding: 0 !important; z-index: 5 !important; pointer-events: none !important; overflow: visible !important; } /* ========================================= CHAQUE ILLUSTRATION ========================================= */ .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; transform: none; transform-origin: 50% 50% !important; overflow: visible !important; pointer-events: none !important; box-sizing: border-box !important; opacity: 0; } /* Première illustration visible avant initialisation JS */ .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design:first-child { opacity: 1; } /* Une fois le carousel initialisé */ .elementor-11365 .elementor-element.elementor-element-eeb3e1b.tshirt-carousel-ready .tshirt-design { opacity: 1 !important; } /* ========================================= CONTENEUR ELEMENTOR DES ILLUSTRATIONS ========================================= */ .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design .elementor-widget-container { position: relative !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; transform: none !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================= PNG DES DESIGNS ========================================= */ .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; transform: none !important; opacity: 1 !important; visibility: visible !important; will-change: auto !important; pointer-events: none !important; } /* ========================================= NETTOYAGE ========================================= */ .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-stage, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-stage *, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-print-area, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-print-area * { box-sizing: border-box !important; } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .elementor-11365 .elementor-element.elementor-element-eeb3e1b { width: 100% !important; min-height: var( --tshirt-section-height, 100vh ) !important; overflow: visible !important; } /* ===================================== STICKY MOBILE ===================================== */ .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-sticky { position: sticky !important; top: 0 !important; width: 100% !important; height: 100vh !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } /* ===================================== TEXTES MOBILE ===================================== */ .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-copy { top: 85px !important; width: 96vw !important; padding: 0 12px !important; gap: 5px !important; } body.admin-bar .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-copy { top: 120px !important; } .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-section-title h1, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-section-title h2, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-section-title h3, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-section-title h4, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-section-title h5, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-section-title h6 { font-size: clamp( 25px, 7.5vw, 34px ) !important; } .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-section-subtitle, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-section-subtitle p { font-size: 14px !important; line-height: 1.35 !important; } /* ===================================== CAPSULE NOM ===================================== */ .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name { margin-top: 4px !important; padding: 6px 14px !important; } .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name h1, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name h2, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name h3, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name h4, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name h5, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name h6, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name p, .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design-name .elementor-heading-title { font-size: 13px !important; } /* ===================================== T-SHIRT MOBILE ===================================== */ .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-stage { width: 100vw !important; max-width: none !important; margin: 0 !important; padding: 0 !important; /* * Position verticale mobile. */ transform: translateY(235px) !important; overflow: visible !important; } /* ===================================== ZONE D'IMPRESSION MOBILE ===================================== */ .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-print-area { top: 40% !important; left: 49% !important; width: 27% !important; transform: translate(-50%, -50%) scale(0.9) !important; overflow: visible !important; } /* ===================================== DESIGNS MOBILE ===================================== */ .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design { inset: 0 !important; width: 100% !important; height: 100% !important; overflow: visible !important; } .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design .elementor-widget-container { width: 100% !important; height: 100% !important; overflow: visible !important; } .elementor-11365 .elementor-element.elementor-element-eeb3e1b .tshirt-design img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: contain !important; transform: none !important; } }/* End custom CSS */