/*Breakpoints : 480 768 1024 1280 1920*/ /*---------------------------------- HTML / BODY -------------------------------------*/ *{ line-height:100%;min-height: 0; min-width: 0; } html { max-width:3000px; margin:0px auto; } body { margin:0px; list-style-type:none; text-size-adjust: none; -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; font-size: clamp(1rem, 2vw, 1.125rem); /* 16px → 18px */ line-height:1.3; margin:0px auto; font-weight: 400; } .my_page * { line-height:100% } .my_page, .my_container { max-width:1280px; margin:0px auto; } .my_page.full-width, .my_container.full-width, .full-width { max-width:100%; width:100%; } /*---------------------------------- Balises texte de base -------------------------------------*/ /*Textes*/ /*Désactiver variable fonts*/ .my_page :root { font-variant-ligatures: none; } .my_page .font-size-0 {font-size: 0;} .my_page .strong { font-weight: 600} .my_page .underline { text-decoration:underline } .my_page .font-weight-light { font-weight:300 !important } .my_page .font-weight-regular { font-weight:400 !important } .my_page .font-weight-bold { font-weight:600 !important } .my_page h1, .my_page h2, .my_page h3, .my_page h4, .my_page h5 { margin-bottom:0rem; margin-top:0rem; } .my_page p { margin-bottom:0.2rem; margin-top:0.5rem; } /* Hiérarchie typographique responsive */ /* Taille de base (mobile first) */ .my_page .big { font-size: clamp(1.75rem, 4vw, 5rem); } .my_page h1, .my_page .h1 { font-size: clamp(1.75rem, 3.5vw, 3.5rem); } .my_page h2, .my_page .h2 { font-size: clamp(1.5rem, 1.9vw, 2.1rem); } .my_page h3, .my_page .h3 { font-size: clamp(1.25rem, 13vw, 1.3rem); } .my_page h4, .my_page .h4 { font-size: clamp(1.125rem, 3vw, 1.5rem); } .my_page h5, .my_page .h5 { font-size: clamp(1rem, 2.5vw, 1.25rem); } .my_page h6, .my_page .h6 { font-size: clamp(0.875rem, 2vw, 1rem); } /* Corps de texte */ .my_page p, .my_page .p, .my_page li, .my_page .li, .my_page div, .my_page .div { font-size: clamp(1rem, 1vw, 1rem); } /* Textes secondaires */ .my_page small, .my_page .small, .my_page .text-small { font-size: clamp(0.6rem, 1vw, 0.6rem) !important; /* 13px → 14px */ } /* Formulaires */ .my_page input, .my_page .input, .my_page textarea, .my_page .textarea, .my_page select, .my_page .select, .my_page button, .my_page .btn, { font-size: clamp(0.9375rem, 2vw, 1rem); /* 15px → 16px */ } /* Citations */ .my_page blockquote, .my_page .blockquote { font-size: clamp(1.125rem, 2.5vw, 1.25rem); /* 18px → 20px */ } /* Code */ .my_page code, .my_page .code, .my_page pre, .my_page .pre { font-size: clamp(0.8125rem, 1.8vw, 0.9375rem); /* 13px → 15px */ } /* Line Height */ .my_page li, .my_page p { line-height:120%; } /* Font-Weight */ /* 100 — thin */ .font-weight-100 { font-weight: 100; } /* 200 — extralight */ .font-weight-200 { font-weight: 200; } /* 300 — light */ .font-weight-300 { font-weight: 300; } /* 400 — regular */ .font-weight-400 { font-weight: 400; } /* 500 — medium */ .font-weight-500 { font-weight: 500; } /* 600 — semibold */ .font-weight-600 { font-weight: 600; } /* 700 — bold */ .font-weight-700 { font-weight: 700; } /* 800 — extrabold */ .font-weight-800 { font-weight: 800; } /* 900 — black */ .font-weight-900 { font-weight: 900; } /*---------------------------------- / Balises texte de base -------------------------------------*/ /*--------------------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------------------*/ /*--------------------------------- CSS AVEC PREFIXE MY PAGE ---------------------------------------------------------*/ /*--------------------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------------------*/ /*--------------------------------- Balises diverses ---------------------------------------------------------*/ /*--------------------------------------------------------------------------------------*/ .flex-page-vertical-center { display:flex !important; flex-direction:column !important; justify-content:center !important; min-height:100vh !important; } .my_page a {text-decoration:none; } .my_page br { line-height:0; } * { box-sizing:border-box; } /*Img et picture*/ .my_page picture { line-height:0;} .my_page img { border:0px none; margin:0px!important } .my_page a img { border:0px none; margin:0px!important } .my_page strong { font-weight:800 } /*Fonts*/.my_page span { display: content!important; }	 .my_page a, .my_page span, .my_page strong { text-decoration:none; color:inherit; font-family:inherit; font-weight:inherit; font-style:inherit; } .my_page .font-size-0 {font-size: 0;} .my_page .strong { font-weight: 500} .my_page .underline { text-decoration:underline } /*Vidéo*/ video { width:100% } /*Fix espacement image*/ .my_page .line-height-0 { line-height:0px !important } /*Tailles*/ .my_page .w-auto { width:auto } .col-main .std .my_page img { width:auto; } .my_page .image-resizing { height:auto; max-width:100%!important; width:100%; display:block; } .my_page .image-resizing.max-width, .my_page .image-resizing.max-width * { max-width:250px !important; } /*Défini une taille max par défaut*/ .fit-content { max-width:fit-content } /*--------------------------------------------------------------------------------------*/ /*--------------------------------- Conteneurs principaux ---------------------------------------------------------*/ /*--------------------------------------------------------------------------------------*/ .my_page { width:100%; max-width:100%; margin:0px auto; } .my_row { background-color:transparent; margin:0px; box-sizing:border-box; z-index:1; } .my_container { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding:0px; margin:0px auto; position:relative; } .my_container { max-width:1350px; } .my_container.full-width { max-width:100%; } .z-index-1 { z-index:1; } .z-index-2 { z-index:2; } .z-index-3 { z-index:3; } /*--------------------------------- Gauche Droite ---------------------------------------------------------*/ @media screen and (min-width: 1280px) { .my_container.full-width .gauche { width:100%; max-width:800px; float:right } .my_container.full-width .droite { width:100%; max-width:480px; float:left } } /*--------------------------------- / Gauche Droite ---------------------------------------------------------*/ /*--------------------------------------------------------------------------------------*/ /*--------------------------------- /Conteneurs principaux -----------------------------*/ /*--------------------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------------------*/ /*--------------------------------- Flex -----------------------------------------------*/ /*--------------------------------------------------------------------------------------*/ /*Fix de l'affichage du slick slider dans un élément flex ou float*/ .my_page .my_row.slick-slider-fix, .my_row.slick-slider-fix * { min-height: 0; min-width: 0; height:auto !important; } .my_page .flex-element.slick-slider-fix { min-height: 0 !important; min-width: 0 !important; } .my_page .flex-element.slick-slider-fix .conteneur-slider * { line-height:0!important; } /* FIn Fix de l'affichage du slick slider dans un élément flex ou float*/ /*------------- Flex conteneurs principaux ----------*/ /*Conteneur parent - flex-container*/ .my_page .flex-container { display: flex; flex-wrap: wrap; flex-direction: row; width:100%; } .my_page .flex-full-width { width:100%; -webkit-box-flex: 1; -ms-flex: 1 0 100%; flex: 1 0 100%; } .my_page .flex-inline-block { width:auto; } /*Elements enfants - flex-element > généralités*/ .my_page .flex-element { display:flex; flex-wrap: wrap; box-sizing:border-box; } /*------------- Table ----------*/ /*Table colonnes*/ .my_page .table { display: table !important; } .my_page .table-cell { display: table-cell; } /*------------- Grid conteneurs principaux ----------*/ /*Grid colonnes*/ .my_page .grid-container { display: grid; grid-template-columns: repeat(1, 1fr); grid-template-rows: inherit; grid-gap: 0px; width: 100%; align-items: stretch; grid-auto-rows: auto 1fr auto !important; } .my_page .parent, .my_page.parent { display:grid } .my_page .grid-container .grid-col-main, .my_page .grid-container .grid-col-aside { height: 100%; display: flex; flex-direction: column;} /* breakpoint at 1280px */ @media screen and (min-width: 1024px) { .my_page .grid-container { grid-template-columns: 62.5% 37.5%; } .my_page #grid-col-main-1 { grid-area: 1 / 1 / 2 / 2; } .my_page #grid-col-aside-3 { grid-area: 1 / 2 / 2 / 3; } .my_page #grid-col-main-2 { grid-area: 2 / 1 / 3 / 2; } .my_page #grid-col-aside-2 { grid-area: 2 / 2 / 3 / 3; } .my_page #grid-col-main-3 { grid-area: 3 / 1 / 4 / 2; } .my_page #grid-col-aside-3 { grid-area: 3 / 2 / 4 / 3; } /*Grid colonnes FULL WIDTH*/ .my_page .my_container.full-width .grid-container { grid-template-columns: 70% 30%; } } /* breakpoint at 1024px */ @media screen and (min-width: 1024px) { .my_page #grid-col-main-1 { grid-area: 1 / 1 / 2 / 2; } .my_page #grid-col-aside-3 { grid-area: 1 / 2 / 2 / 3; } .my_page #grid-col-main-2 { grid-area: 2 / 1 / 3 / 2; } .my_page #grid-col-aside-2 { grid-area: 2 / 2 / 3 / 3; } .my_page #grid-col-main-3 { grid-area: 3 / 1 / 4 / 2; } .my_page #grid-col-aside-3 { grid-area: 3 / 2 / 4 / 3; } } /* breakpoint at 1024px */ @media screen and (min-width: 1024px) { .my_page .grid-container.ordre-flux-different { grid-template-columns: 62.7% 37.3% repeat(2, 1fr) !important; } .my_page .ordre-flux-different #grid-col-main-1 { grid-area: 1 / 1 / 2 / 2 !important; } .my_page .ordre-flux-different #grid-col-main-2 { grid-area: 2 / 1 / 3 / 2 !important; } .my_page .ordre-flux-different #grid-form { grid-area: 1 / 2 / 3 / 3 !important; } } /*------------- Grid Alignements ----------*/ /*Grid Alignement table wrapper*/ .my_page .display-table-wrapper { display: table; height:100% } /*------------- Grid Alignements horizontaux ----------*/ /*Grid Alignement horizontal milieu*/ .my_page .grid-halign-center { justify-content: center !important; } /*Grid Alignement horizontal gauche*/ .my_page .grid-halign-left { justify-content: left !important; } /*Grid Alignement horizontal droite*/ .my_page .grid-halign-right { justify-content: right !important; } /*------------- Grid Alignements verticaux ----------*/ /*Grid Alignement table-cell vertical milieu*/ .my_page .grid-valign-center { display: table-cell; align-items: center !important; vertical-align: middle; justify-content: center; } .my_page .grid-valign-top { display: table-cell; align-items: start !important; justify-content: start; } .my_page .grid-valign-bottom { display: table-cell; align-items: end !important; justify-content: end; } /*------------- Flux des colonnes ----------*/ /*------------- 2 colonnes verticales ----------*/ @media (min-width: 480px) { .grid-auto-flow-column { display: grid; grid-template-rows: 1fr 1fr 1fr; grid-auto-flow: column; } } /*------------- / Grid Alignements ----------*/ /*------------- Flex Alignements in Grid ----------*/ .my_page .grid-container .flex-direction-initial { flex-direction: initial !important; } /*------------- / Flex Alignements in Grid ----------*/ /*------------- Flex Alignements ----------*/ /*Alignement Vertical */ /*Alignement vertical top*/ .my_page .flex-valign-top { align-self: start !important; } .my_page .flex-valign-bottom { align-self: end !important; } .my_page .flex-valign-baseline { align-self: baseline !important; } /*Alignement vertical milieu*/ .my_page .flex-valign-center { -webkit-box-align: center !important; -webkit-align-items: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-justify-content: center !important; -ms-flex-pack: center !important; } .my_page .flex-halign-space-between { justify-content: space-between; } /*Alignement Horizontal*/ /*Alignement horizontal milieu*/ .my_page .justify-content-center , .flex-halign-center { justify-content: center !important; } /*Alignement horizontal à droite*/ .my_page .flex-halign-end { justify-content:flex-end !important } .my_page .flex-halign-right { justify-content:right !important} /*Alignement horizontal à gauche*/ .my_page .flex-halign-left { justify-content:left !important } @media (max-width: 767px) { .my_page .flex-halign-center-on-mobile { justify-content: center !important; } .my_page .flex-halign-left-on-mobile { justify-content: left !important; } .my_page .flex-halign-right-on-mobile { justify-content: right !important; } } /*Changement de direction*/ .my_page .flex-row-reverse { flex-direction: row-reverse; } @media (min-width: 480px) { .my_page .flex-row-reverse-responsive { flex-direction: row-reverse; } } /*Flex largeurs et hauteurs */ /*Hauteur*/ .flex-full-height-item { display: flex; min-height:160px } .my_page .flex-full-height { align-self: stretch; } /*Même hauteurs*/ .flex-full-height { display: flex; width: 100%; } .flex-full-height-content { background-color: #fff; display: flex; flex-direction: column; padding: 1em; width: 100%; } .flex-fill-height { display: flex; flex: 1 0 auto; } /*Largeurs fluides*/ .flex-content { display:flex !important; flex-direction: column !important; } .flex-none { flex: none !important; display:flex !important; } .flex-initial { flex: initial !important; display:flex !important; } .flex-auto { flex: auto !important; display:flex !important; } /*--------------------------------------------------------------------------------------*/ /*--------------------------------- / FIN FLEX ---------------------------------------------------------*/ /*--------------------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------------------*/ /*--------------------------------- FLEX Responsive ---------------------------------------------------------*/ /*--------------------------------------------------------------------------------------*/ /* FLEX FLUIDE */ .flex-container { display: flex; width: 100%; align-items: flex-start; } .flex-element-fixed { flex: 0 1 auto; display: flex; justify-content: flex-end; padding: 10px; } .flex-element-fluid { flex: 1 1 0; } /* MA GRILLE CSS */ /* TOUS DEVICES */ .my_page .flex-1 { flex: 1; } .my_page .flex-2 { flex: 2; } .my_page .flex-3 { flex: 3; } .my_page .flex-4 { flex: 4; } .my_page .flex-5 { flex: 5; } .my_page .flex-6 { flex: 6; } .my_page .flex_auto { width:auto } .my_page .order-1 {order:1; } .my_page .order-2 {order:2; } .my_page .order-3 {order:3; } .my_page .order-4 {order:4; } .my_page .order-5 {order:5; } .my_page .order-6 {order:6; } .my_page .order-7 {order:7; } .my_page .flex_1-1 { flex: 0 100% } .my_page .flex_1-2 { flex: 0 50% } .my_page .flex_1-3 { flex: 0 33.3% } .my_page .flex_1-4 { flex: 0 25% } .my_page .flex_1-5 { flex: 0 20% } .my_page .flex_1-6 { flex: 0 16.6% } .my_page .flex_2-2 { flex: 0 100% } .my_page .flex_2-3 { flex: 0 66.6% } .my_page .flex_2-4 { flex: 0 50% } .my_page .flex_2-5 { flex: 0 40% } .my_page .flex_2-6 { flex: 0 33.3% } .my_page .flex_3-3 { flex: 0 100% } .my_page .flex_3-4 { flex: 0 75% } .my_page .flex_3-5 { flex: 0 60% } .my_page .flex_3-6 { flex: 0 50% } .my_page .flex_4-4 { flex: 0 100% } .my_page .flex_4-5 { flex: 0 80% } .my_page .flex_4-6 { flex: 0 66.6% } .my_page .flex_5-5 { flex: 0 100% } .my_page .flex_5-6 { flex: 0 83.3% } .my_page .flex_6-6 { flex: 1 100% } .my_page .desktop_only { display:none } .my_page .tablet_only { display:none } .my_page .phablet_only { display:none } .my_page .mobile_only { display:block } /* Mobile Only */ @media (max-width: 479px) { .my_page .hide_on_mobile { display:none; } .my_page .show_on_mobile { display:block; } .my_page .flex_mobile-1 { flex: 1; } .my_page .flex_mobile-2 { flex: 2; } .my_page .flex_mobile-3 { flex: 3; } .my_page .flex_mobile-4 { flex: 4; } .my_page .flex_mobile-5 { flex: 5; } .my_page .flex_mobile-6 { flex: 6; } .my_page .flex_mobile_auto { width:auto } .my_page .order_mobile-1 {order:1; } .my_page .order_mobile-2 {order:2; } .my_page .order_mobile-3 {order:3; } .my_page .order_mobile-4 {order:4; } .my_page .order_mobile-5 {order:5; } .my_page .order_mobile-6 {order:6; } .my_page .order_mobile-7 {order:7; } .my_page .flex_mobile_1-1 { flex: 0 100% } .my_page .flex_mobile_1-2 { flex: 0 50% } .my_page .flex_mobile_1-3 { flex: 0 33.3% } .my_page .flex_mobile_1-4 { flex: 0 25% } .my_page .flex_mobile_1-5 { flex: 0 20% } .my_page .flex_mobile_1-6 { flex: 0 16.6% } .my_page .flex_mobile_2-2 { flex: 0 100% } .my_page .flex_mobile_2-3 { flex: 0 66.6% } .my_page .flex_mobile_2-4 { flex: 0 50% } .my_page .flex_mobile_2-5 { flex: 0 40% } .my_page .flex_mobile_2-6 { flex: 0 33.3% } .my_page .flex_mobile_3-3 { flex: 0 100% } .my_page .flex_mobile_3-4 { flex: 0 75% } .my_page .flex_mobile_3-5 { flex: 0 60% } .my_page .flex_mobile_3-6 { flex: 0 50% } .my_page .flex_mobile_4-4 { flex: 0 100% } .my_page .flex_mobile_4-5 { flex: 0 80% } .my_page .flex_mobile_4-6 { flex: 0 66.6% } .my_page .flex_mobile_5-5 { flex: 0 100% } .my_page .flex_mobile_5-6 { flex: 0 83.3% } .my_page .flex_mobile_6-6 { flex: 1 100% } } /*A partir de phablet*/ @media (min-width: 480px) { .flex_phablet-1 { flex: 1; } .flex_phablet-2 { flex: 2; } .flex_phablet-3 { flex: 3; } .flex_phablet-4 { flex: 4; } .flex_phablet-5 { flex: 5; } .flex_phablet-6 { flex: 6; } .my_page .flex_phablet_auto { width:auto } .order_phablet-1 {order:1; } .order_phablet-2 {order:2; } .order_phablet-3 {order:3; } .order_phablet-4 {order:4; } .order_phablet-5 {order:5; } .order_phablet-6 {order:6; } .order_phablet-7 {order:7; } .my_page .flex_phablet_1-1 { flex: 0 100% } .my_page .flex_phablet_1-2 { flex: 0 50% } .my_page .flex_phablet_1-3 { flex: 0 33.3% } .my_page .flex_phablet_1-4 { flex: 0 25% } .my_page .flex_phablet_1-5 { flex: 0 20% } .my_page .flex_phablet_1-6 { flex: 0 16.6% } .my_page .flex_phablet_2-2 { flex: 0 100% } .my_page .flex_phablet_2-3 { flex: 0 66.6% } .my_page .flex_phablet_2-4 { flex: 0 50% } .my_page .flex_phablet_2-5 { flex: 0 40% } .my_page .flex_phablet_2-6 { flex: 0 33.3% } .my_page .flex_phablet_3-3 { flex: 0 100% } .my_page .flex_phablet_3-4 { flex: 0 75% } .my_page .flex_phablet_3-5 { flex: 0 60% } .my_page .flex_phablet_3-6 { flex: 0 50% } .my_page .flex_phablet_4-4 { flex: 0 100% } .my_page .flex_phablet_4-5 { flex: 0 80% } .my_page .flex_phablet_4-6 { flex: 0 66.6% } .my_page .flex_phablet_5-5 { flex: 0 100% } .my_page .flex_phablet_5-6 { flex: 0 83.3% } .my_page .flex_phablet_6-6 { flex:100% } .my_page .desktop_only { display:none } .my_page .tablet_only { display:none } .my_page .mobile_only { display:none } .my_page .phablet_only { display:block } } /*A partir de tablet*/ @media (min-width: 768px) { .my_page .flex_tablet-1 { flex: 1; } .my_page .flex_tablet-2 { flex: 2; } .my_page .flex_tablet-3 { flex: 3; } .my_page .flex_tablet-4 { flex: 4; } .my_page .flex_tablet-5 { flex: 5; } .flex_tablet-6 { flex: 6; } .my_page .flex_tablet_auto { width:auto } .my_page .order_tablet-1 {order:1; } .my_page .order_tablet-2 {order:2; } .my_page .order_tablet-3 {order:3; } .my_page .order_tablet-4 {order:4; } .my_page .order_tablet-5 {order:5; } .my_page .order_tablet-6 {order:6; } .my_page .order_tablet-7 {order:7; } .my_page .flex_tablet_1-1 { flex: 0 100% } .my_page .flex_tablet_1-2 { flex: 0 50% } .my_page .flex_tablet_1-3 { flex: 0 33.3% } .my_page .flex_tablet_1-4 { flex: 0 25% } .my_page .flex_tablet_1-5 { flex: 0 20% } .my_page .flex_tablet_1-6 { flex: 0 16.6% } .my_page .flex_tablet_2-2 { flex: 0 100% } .my_page .flex_tablet_2-3 { flex: 0 66.6% } .my_page .flex_tablet_2-4 { flex: 0 50% } .my_page .flex_tablet_2-5 { flex: 0 40% } .my_page .flex_tablet_2-6 { flex: 0 33.3% } .my_page .flex_tablet_3-3 { flex: 0 100% } .my_page .flex_tablet_3-4 { flex: 0 75% } .my_page .flex_tablet_3-5 { flex: 0 60% } .my_page .flex_tablet_3-6 { flex: 0 50% } .my_page .flex_tablet_4-4 { flex: 0 100% } .my_page .flex_tablet_4-5 { flex: 0 80% } .my_page .flex_tablet_4-6 { flex: 0 66.6% } .my_page .flex_tablet_5-5 { flex: 0 100% } .my_page .flex_tablet_5-6 { flex: 0 83.3% } .my_page .flex_tablet_6-6 { flex: 0 100% } } /*A partir de desktop*/ @media (min-width: 1024px) { .my_page .flex_desktop-1 { flex: 1; } .my_page .flex_desktop-2 { flex: 2; } .my_page .flex_desktop-3 { flex: 3; } .my_page .flex_desktop-4 { flex: 4; } .my_page .flex_desktop-5 { flex: 5; } .my_page .flex_desktop-6 { flex: 6; } .my_page .flex_desktop_auto { width:auto } .my_page .order_desktop-1 {order:1; } .my_page .order_desktop-2 {order:2; } .my_page .order_desktop-3 {order:3; } .my_page .order_desktop-4 {order:4; } .my_page .order_desktop-5 {order:5; } .my_page .order_desktop-6 {order:6; } .my_page .order_desktop-7 {order:7; } .my_page .flex_desktop_1-1 { flex: 0 100% } .my_page .flex_desktop_1-2 { flex: 0 50% } .my_page .flex_desktop_1-3 { flex: 0 33.3% } .my_page .flex_desktop_1-4 { flex: 0 25% } .my_page .flex_desktop_1-5 { flex: 0 20% } .my_page .flex_desktop_1-6 { flex: 0 16.6% } .my_page .flex_desktop_2-2 { flex: 0 100% } .my_page .flex_desktop_2-3 { flex: 0 66.6% } .my_page .flex_desktop_2-4 { flex: 0 50% } .my_page .flex_desktop_2-5 { flex: 0 40% } .my_page .flex_desktop_2-6 { flex: 0 33.3% } .my_page .flex_desktop_3-3 { flex: 0 100% } .my_page .flex_desktop_3-4 { flex: 0 75% } .my_page .flex_desktop_3-5 { flex: 0 60% } .my_page .flex_desktop_3-6 { flex: 0 50% } .my_page .flex_desktop_4-4 { flex: 0 100% } .my_page .flex_desktop_4-5 { flex: 0 80% } .my_page .flex_desktop_4-6 { flex: 0 66.6% } .my_page .flex_desktop_5-5 { flex: 0 100% } .my_page .flex_desktop_5-6 { flex: 0 83.3% } .my_page .flex_desktop_6-6 { flex: 0 100% } } /*Flex desktop xl*/ @media (min-width: 1280px) { .my_page .flex_desktop-xl-1 { flex: 1; } .my_page .flex_desktop-xl-2 { flex: 2; } .my_page .flex_desktop-xl-3 { flex: 3; } .my_page .flex_desktop-xl-4 { flex: 4; } .my_page .flex_desktop-xl-5 { flex: 5; } .my_page .flex_desktop-xl-6 { flex: 6; } .order_desktop-1 {order:1; } .order_desktop-2 {order:2; } .order_desktop-3 {order:3; } .order_desktop-4 {order:4; } .order_desktop-5 {order:5; } .order_desktop-6 {order:6; } .order_desktop-7 {order:7; } .my_page .flex_desktop-xl_1-1 { flex: 0 100% } .my_page .flex_desktop-xl_1-2 { flex: 0 50% } .my_page .flex_desktop-xl_1-3 { flex: 0 33.3% } .my_page .flex_desktop-xl_1-4 { flex: 0 25% } .my_page .flex_desktop-xl_1-5 { flex: 0 20% } .my_page .flex_desktop-xl_1-6 { flex: 0 16.6% } .my_page .flex_desktop-xl_2-2 { flex: 0 100% } .my_page .flex_desktop-xl_2-3 { flex: 0 66.6% } .my_page .flex_desktop-xl_2-4 { flex: 0 50% } .my_page .flex_desktop-xl_2-5 { flex: 0 40% } .my_page .flex_desktop-xl_2-6 { flex: 0 33.3% } .my_page .flex_desktop-xl_3-3 { flex: 0 100% } .my_page .flex_desktop-xl_3-4 { flex: 0 75% } .my_page .flex_desktop-xl_3-5 { flex: 0 60% } .my_page .flex_desktop-xl_3-6 { flex: 0 50% } .my_page .flex_desktop-xl_4-4 { flex: 0 100% } .my_page .flex_desktop-xl_4-5 { flex: 0 80% } .my_page .flex_desktop-xl_4-6 { flex: 0 66.6% } .my_page .flex_desktop-xl_5-5 { flex: 0 100% } .my_page .flex_desktop-xl_5-6 { flex: 0 83.3% } .my_page .flex_desktop-xl_6-6 { flex: 0 100% } } /*Flex desktop xxl*/ @media (min-width: 1920px) { .my_page .flex_desktop-xxl-1 { flex: 1; } .my_page .flex_desktop-xxl-2 { flex: 2; } .my_page .flex_desktop-xxl-3 { flex: 3; } .my_page .flex_desktop-xxl-4 { flex: 4; } .my_page .flex_desktop-xxl-5 { flex: 5; } .my_page .flex_desktop-xxl-6 { flex: 6; } .my_page .flex_desktop-xxl_1-1 { flex: 0 100% } .my_page .flex_desktop-xxl_1-2 { flex: 0 50% } .my_page .flex_desktop-xxl_1-3 { flex: 0 33.3% } .my_page .flex_desktop-xxl_1-4 { flex: 0 25% } .my_page .flex_desktop-xxl_1-5 { flex: 0 20% } .my_page .flex_desktop-xxl_1-6 { flex: 0 16.6% } .my_page .flex_desktop-xxl_2-2 { flex: 0 100% } .my_page .flex_desktop-xxl_2-3 { flex: 0 66.6% } .my_page .flex_desktop-xxl_2-4 { flex: 0 50% } .my_page .flex_desktop-xxl_2-5 { flex: 0 40% } .my_page .flex_desktop-xxl_2-6 { flex: 0 33.3% } .my_page .flex_desktop-xxl_3-3 { flex: 0 100% } .my_page .flex_desktop-xxl_3-4 { flex: 0 75% } .my_page .flex_desktop-xxl_3-5 { flex: 0 60% } .my_page .flex_desktop-xxl_3-6 { flex: 0 50% } .my_page .flex_desktop-xxl_4-4 { flex: 0 100% } .my_page .flex_desktop-xxl_4-5 { flex: 0 80% } .my_page .flex_desktop-xxl_4-6 { flex: 0 66.6% } .my_page .flex_desktop-xxl_5-5 { flex: 0 100% } .my_page .flex_desktop-xxl_5-6 { flex: 0 83.3% } .my_page .flex_desktop-xxl_6-6 { flex: 0 100% } } /*--------------------------------------------------------------------------------------*/ /*--------------------------------- /Fin FLEX Responsive ---------------------------------------------------------*/ /*--------------------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------------------*/ /*--------------------------------- GRID Responsive ---------------------------------------------------------*/ /*--------------------------------------------------------------------------------------*/ /* MA GRILLE CSS */ /* TOUS DEVICES */ .my_page .grid-1 { grid-template-columns: repeat(auto-fill,minmax(100%, 1fr))!important; } .my_page .grid-2 { grid-template-columns: repeat(auto-fill,minmax(50%, 1fr))!important; } .my_page .grid-3 { grid-template-columns: repeat(auto-fill,minmax(33%, 1fr))!important; } .my_page .grid-4 { grid-template-columns: repeat(auto-fill,minmax(25%, 1fr))!important; } .my_page .grid-5 { grid-template-columns: repeat(auto-fill,minmax(20%, 1fr))!important; } .my_page .grid-6 { grid-template-columns: repeat(auto-fill,minmax(16%, 1fr))!important; } .my_page .grid_auto { width:auto !important } .my_page .grid-max-width-150 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))!important; } .my_page .grid-max-width-200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))!important; } .my_page .grid-max-width-300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))!important; } .my_page .grid-gap-20 { gap: 20px } .my_page .grid-gap-30 { gap: 30px } .my_page .grid-gap-40 { gap: 40px } .my_page .grid-gap-20 { gap: 20px } .my_page .grid-gap-30 { gap: 30px } .my_page .grid-gap-40 { gap: 40px } /*A partir de phablet*/ @media (min-width: 480px) { .my_page .grid_phablet-1 { grid-template-columns: repeat(auto-fill,minmax(100%, 1fr))!important; } .my_page .grid_phablet-2 { grid-template-columns: repeat(auto-fill,minmax(50%, 1fr))!important; } .my_page .grid_phablet-3 { grid-template-columns: repeat(auto-fill,minmax(33%, 1fr))!important; } .my_page .grid_phablet-4 { grid-template-columns: repeat(auto-fill,minmax(25%, 1fr))!important; } .my_page .grid_phablet-5 { grid-template-columns: repeat(auto-fill,minmax(20%, 1fr))!important; } .my_page .grid_phablet-6 { grid-template-columns: repeat(auto-fill,minmax(16%, 1fr))!important; } .my_page .grid_phablet_auto { width:auto } } /*A partir de tablet*/ @media (min-width: 768px) { .my_page .grid_tablet-1 { grid-template-columns: repeat(auto-fill,minmax(100%, 1fr))!important; } .my_page .grid_tablet-2 { grid-template-columns: repeat(auto-fill,minmax(50%, 1fr))!important; } .my_page .grid_tablet-3 { grid-template-columns: repeat(auto-fill,minmax(33%, 1fr))!important; } .my_page .grid_tablet-4 { grid-template-columns: repeat(auto-fill,minmax(25%, 1fr))!important; } .my_page .grid_tablet-5 { grid-template-columns: repeat(auto-fill,minmax(20%, 1fr))!important; } .my_page .grid_tablet-6 { grid-template-columns: repeat(auto-fill,minmax(16%, 1fr))!important; } .my_page .grid_tablet_auto { width:auto } } /*A partir de desktop*/ @media (min-width: 1024px) { .my_page .grid_desktop-1 { grid-template-columns: repeat(auto-fill,minmax(100%, 1fr))!important; } .my_page .grid_desktop-2 { grid-template-columns: repeat(auto-fill,minmax(50%, 1fr))!important; } .my_page .grid_desktop-3 { grid-template-columns: repeat(auto-fill,minmax(33%, 1fr))!important; } .my_page .grid_desktop-4 { grid-template-columns: repeat(auto-fill,minmax(25%, 1fr))!important; } .my_page .grid_desktop-5 { grid-template-columns: repeat(auto-fill,minmax(20%, 1fr))!important; } .my_page .grid_desktop-6 { grid-template-columns: repeat(auto-fill,minmax(16%, 1fr))!important; } .my_page .grid_desktop_auto { width:auto } } /*Flex desktop xl*/ @media (min-width: 1920px) { .my_page .grid_desktop-xl-1 { grid-template-columns: repeat(auto-fill,minmax(100%, 1fr))!important; } .my_page .grid_desktop-xl-2 { grid-template-columns: repeat(auto-fill,minmax(50%, 1fr))!important; } .my_page .grid_desktop-xl-3 { grid-template-columns: repeat(auto-fill,minmax(33%, 1fr))!important; } .my_page .grid_desktop-xl-4 { grid-template-columns: repeat(auto-fill,minmax(25%, 1fr))!important; } .my_page .grid_desktop-xl-5 { grid-template-columns: repeat(auto-fill,minmax(20%, 1fr))!important; } .my_page .grid_desktop-xl-6 { grid-template-columns: repeat(auto-fill,minmax(16%, 1fr))!important; } .my_page .grid_desktop_auto { width:auto } } /*Flex desktop xxl*/ @media (min-width: 1280px) { .my_page .grid_desktop-xxl-1 { grid-template-columns: repeat(auto-fill,minmax(100%, 1fr))!important; } .my_page .grid_desktop-xxl-2 { grid-template-columns: repeat(auto-fill,minmax(50%, 1fr))!important; } .my_page .grid_desktop-xxl-3 { grid-template-columns: repeat(auto-fill,minmax(33%, 1fr))!important; } .my_page .grid_desktop-xxl-4 { grid-template-columns: repeat(auto-fill,minmax(25%, 1fr))!important; } .my_page .grid_desktop-xxl-5 { grid-template-columns: repeat(auto-fill,minmax(20%, 1fr))!important; } .my_page .grid_desktop-xxl-6 { grid-template-columns: repeat(auto-fill,minmax(16%, 1fr))!important; } .my_page .grid_desktop_auto { width:auto } } /*--------------------------------------------------------------------------------------*/ /*--------------------------------- /Fin GRID Responsive ---------------------------------------------------------*/ /*--------------------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------------------*/ /*--------------------------------- PUCES / PICTOS ---------------------------------------------------------*/ /*--------------------------------------------------------------------------------------*/ .my_page .liste-a-puces-image-personnalisee { list-style: none; padding: 0; margin: 0; } /* Chaque élément (li, div...) est un flex container */ .my_page .liste-a-puces-image-personnalisee > li, .my_page .liste-a-puces-image-personnalisee > div, .puce { display: flex; align-items: flex-start; /* Assure un bon alignement */ gap: 0px; /* Espacement entre l'icône et le texte */ margin-bottom: 10px; } @media (min-width: 768px) { .my_page .liste-a-puces-image-personnalisee > li, .my_page .liste-a-puces-image-personnalisee > div, .puce { gap: 12px; /* Espacement entre l'icône et le texte */ } } /* Icône pour tous les éléments */ .my_page .liste-a-puces-image-personnalisee > li::before, .my_page .liste-a-puces-image-personnalisee > div::before, .puce:before { content: ""; display: inline-block; width: 24px; /* Taille de l'icône */ height: 24px; background-image: url('https://dummyimage.com/24x24/aaa/fff'); /* Icône par défaut */ background-size: contain; background-repeat: no-repeat; flex-shrink: 0; } .my_page .puce-a:before { background-image:url('https://dummyimage.com/24x24/000/fff'); } .my_page .puce-b:before { background-image:url('https://dummyimage.com/24x24/555/fff'); } .my_page .puce-c:before { background-image:url('https://dummyimage.com/24x24/aaa/fff'); } /* Icône big */ .puce.puce-big:before { width: 45px; /* Taille de l'icône */ height: 45px; background-image: url('https://dummyimage.com/45x45/555/fff'); /* Icône par défaut */ } .my_page .puce-small:before { height: 15px; width:10px; background-image:url('../img/_arrow-left-small.svg'); } /* Icône spécifique pour les éléments avec .puce */ .my_page .puce-differente::before { background-image: url('https://dummyimage.com/24x24/00815d/000'); /* Icône différente */ } /* Texte en colonne même si flex est activé */ .my_page .liste-a-puces-image-personnalisee li > *, .my_page .liste-a-puces-image-personnalisee div > * { display: block; /* Force le premier élément interne (h4, p, a...) à être en colonne */ width: 100%; /* Empêche tout retour à une disposition horizontale */ } /*Puce Bullet Point*/ .my_page ul.bullet-points { padding:0px 0px 0px 5px !important; } .my_page ul.bullet-points > li { padding-left:10px !important; position:relative !important; } .my_page ul.bullet-points > li::before { content: "•" !important; display: inline-block !important; width: 0.5em !important; margin-top: 0.1em !important; font-size: 1rem !important; line-height: 0 !important; position: absolute !important; top: 10px !important; left: 0px !important; color:#13AA5B; } /* Checklist */ .my_page .checklist > li, .my_page .checklist > div { position:relative; padding-left:20px; margin-bottom:10px; } .my_page .checklist > li::before, .my_page .checklist > div::before { content: "✓"; display: inline-block; width: 12px; /* Taille de l'icône */ height: 12px; background-image: none; flex-shrink: 0; position:absolute; left:0px; color:#13AA5B; } .my_page .checklist.checklist-personnalisee > li::before, .my_page .checklist.checklist-personnalisee > div::before { content: url('https://dummyimage.com/15x15/aaa/fff'); } .my_page ul.classic li > ul { margin-top:20px; } /*--------------------------------------------------------------------------------------*/ /*--------------------------------- LANDING PAGES et BLOCS STATIQUES PERSONNALISEES ------------------------------------*/ /*--------------------------------------------------------------------------------------*/ /*-----------------------------------------Tips-----------------------------------------*/ .inherit { text-decoration:none; color:inherit; font-family:inherit; font-weight:inherit; font-style:inherit; } /*--------- Show-hide --------*/ /*------------ paddingS DEVICE ONLY -----------*/ @media (max-width: 479px) { .my_page .hide_on_mobile { display:none !important; } .my_page .show_on_mobile { display:block !important;; } } @media (min-width: 480px) and (max-width: 767px) { .my_page .hide_on_phablet { display:none !important; } .my_page .show_on_phablet { display:block !important;; } } @media (min-width: 768px) and (max-width: 1023px) { .my_page .hide_on_tablet { display:none !important;; } .my_page .show_on_tablet { display:block !important;; } } @media (min-width: 1024px) { .my_page .hide_on_desktop { display:none !important;; } .my_page .show_on_desktop { display:block !important;; } } /*--------- Line Height --------*/ .line-height-150 { line-height:150% !important; } .line-height-130 { line-height:130% !important; } .line-height-100 { line-height:100% !important; } .line-height-50 { line-height:50% !important; } .line-height-0 { line-height:0% !important; } /*--------- Full width responsive --------*/ .my_page .full-width, .my_page.full-width { width:100%!important; max-width:100%!important; } .my_page .fit-content; { width: fit-content !important; } .my_page .full-height { height: 100% !important; } @media (max-width: 1023px) { .my_page .full-width-on-desktop { width:100% !important; max-width:100%!important; display:block; } .my_page .flex-full-width-on-desktop { flex: 1 0 100% !important; } } .my_page .max-width-100, .my_page .full-width.max-width-100 { max-width:100px!important } .my_page .max-width-150, .my_page .full-width.max-width-150 { max-width:150px!important } .my_page .max-width-200, .my_page .full-width.max-width-200 { max-width:200px!important } .my_page .max-width-250, .my_page .full-width.max-width-250 { max-width:250px!important } .my_page .max-width-300, .my_page .full-width.max-width-300 { max-width:300px!important } .my_page .max-width-350, .my_page .full-width.max-width-350 { max-width:350px!important } .my_page .max-width-400, .my_page .full-width.max-width-400 { max-width:400px!important } .my_page .max-width-480, .my_page .full-width.max-width-480 { max-width:480px!important } .my_page .max-width-500, .my_page .full-width.max-width-500 { max-width:500px!important } .my_page .max-width-550, .my_page .full-width.max-width-550 { max-width:550px!important } .my_page .max-width-600, .my_page .full-width.max-width-600 { max-width:600px!important } .my_page .max-width-650, .my_page .full-width.max-width-650 { max-width:650px!important } .my_page .max-width-700, .my_page .full-width.max-width-700 { max-width:700px!important } .my_page .max-width-750, .my_page .full-width.max-width-750 { max-width:750px!important } .my_page .max-width-800, .my_page .full-width.max-width-800 { max-width:800px!important } .my_page .max-width-850, .my_page .full-width.max-width-850 { max-width:850px!important } .my_page .max-width-900, .my_page .full-width.max-width-900 { max-width:900px!important } .my_page .max-width-950, .my_page .full-width.max-width-950 { max-width:950px!important } .my_page .max-width-1000,.my_page .full-width.max-width-1000 { max-width:1000px!important } .my_page .max-width-1500, .my_page .full-width.max-width-1500 { max-width:1500px!important } .my_page .max-width-2000, .my_page .full-width.max-width-2000 { max-width:2000px!important } @media (max-width: 767px) { .centrer-sur-mobile { text-align:left; } } @media (max-width: 767px) { .my_page .full-width-on-mobile { width:100% !important; max-width:100%!important; display:block!important; } .my_page .my_page .flex-full-width-on-mobile { flex: 1 0 100% !important; } } @media (max-width: 767px) { .my_page .display-block-on-mobile { display: block; } } .position-absolute { position:absolute !important } .position-relative { position:relative !important } .position-unset { position:unset !important } @media (min-width: 768px) { .my_page .absolute-on-desktop { position:absolute !important ; top: 0; right: 0; left: 0; z-index:3; } } /*---------------------------------- Grille -------------------------------------*/ .my_page .grid{ display: grid; grid-template-columns: repeat(auto-fill,minmax(50%, 1fr)); width: 100%; margin:0px auto; } .my_page .grid.grid_1-2 { grid-template-columns: repeat(auto-fill,minmax(50%, 1fr)); } .grid_1-2.grid-gap-20 { grid-template-columns: repeat(auto-fill, minmax(calc(50% - 20px), 1fr)); } .my_page .grid.grid_1-3 { grid-template-columns: repeat(auto-fill,minmax(33%, 1fr)); } .my_page .grid_1-3.grid-gap-20 { grid-template-columns: repeat(auto-fill, minmax(calc(33% - 20px), 1fr)); } .my_page .grid.grid_1-4 { grid-template-columns: repeat(auto-fill,minmax(25%, 1fr)); } .my_page .grid_1-4.grid-gap-20 { grid-template-columns: repeat(auto-fill, minmax(calc(25% - 20px), 1fr)); } .my_page .grid.grid_1-5 { grid-template-columns: repeat(auto-fill,minmax(20%, 1fr)); } .my_page .grid_1-5.grid-gap-20 { grid-template-columns: repeat(auto-fill, minmax(calc(20% - 20px), 1fr)); } .my_page .grid.grid_1-6 { grid-template-columns: repeat(auto-fill,minmax(16%, 1fr)); } .my_page .grid_1-6.grid-gap-20 { grid-template-columns: repeat(auto-fill, minmax(calc(16% - 20px), 1fr)); } .my_page .grid.grid-croix div:nth-child(2n) { border-color: 1px solid rgb(96, 139, 168); border-left: 1px solid; } .my_page .grid.grid-croix div { border-top: 1px solid; } .my_page .grid.grid-croix div:nth-child(1) { border-top: 0px; } @media (max-width: 479px) { .my_page .grid.full-width-on-mobile { grid-template-columns: repeat(auto-fill,minmax(100%, 1fr)) !important; width: 100% !important; } .my_page .grid.grid-croix-responsive { grid-template-columns: repeat(auto-fill,minmax(100%, 1fr)) !important; } .my_page .grid.grid-croix-responsive div:nth-child(2n) { border-left: 0px; } } @media (min-width: 480px) { .my_page .grid.grid-croix div:nth-child(1), .my_page .grid.grid-croix div:nth-child(2) { border-top: 0px; } } .my_page .grid.grid-encarts > div { border:0px; } .my_page .grid.grid-encarts.invisible > div { margin:0px; border:0px; background-color:transparent; } .my_page .grid.invisible > div { padding:0px; } /*---------------------------------- Bordure verticale au centre -------------------------------------*/ @media (min-width: 768px) { .grid.grid-central-vertical-border div:nth-child(2n) { border-left: 2px solid #000; /* Bordure verticale */ padding-left: 20px; /* Espacement à gauche */ } } /*---------------------------------- Espacements -------------------------------------*/ /*RETOUR A LA LIGNE FORCé*/ .my_page .force-br { line-height:0; } .my_page break{ flex-basis: 100%; width: 0px; height: 0px; overflow: hidden; } .my_page .flex-col-spacer { flex:0; display:none; background-color:violet; } @media (min-width: 1024px) { .my_page .flex-container-center { flex:1; justify-content: center; } .my_page .flex-col-main { flex:2; } .my_page .flex-col-aside { flex:1; } } @media (min-width: 1920px) { .my_page .flex-col-spacer { flex:4; display:block; } .my_page .flex-container-center { flex:10; } .my_page .flex-col-main { flex:20; } .my_page .flex-col-aside { flex:10; } } /*------------ paddingS RESPONSIVE -----------*/ @media (min-width: 380px) { .my_page .padding-responsive { padding:20px 20px !important; } .my_page .hpadding-responsive { padding:0px 20px !important; } .my_page .vpadding-responsive { padding:20px 0px !important; } } @media (min-width: 480px) { .my_page .padding-responsive { padding:30px 30px !important; } .my_page .hpadding-responsive { padding:0px 30px !important; } .my_page .vpadding-responsive { padding:20px 0px !important; } } @media (min-width: 768px) { .my_page .padding-responsive { padding:40px 40px !important; } .my_page .hpadding-responsive { padding:0px 40px !important; } .my_page .vpadding-responsive { padding:25px 0px !important; } } @media (min-width: 1024px) { .my_page .padding-responsive { padding:50px 50px !important; } .my_page .hpadding-responsive { padding:0px 50px !important; } .my_page .vpadding-responsive { padding:30px 0px !important; } } @media (min-width: 1280px) { .my_page .padding-responsive { padding:60px 60px !important; } .my_page .hpadding-responsive { padding:0px 60px !important; } .my_page .vpadding-responsive { padding:35px 0px !important; } } @media (min-width: 1920) { .my_page .padding-responsive { padding:70px 70px !important; } .my_page .hpadding-responsive { padding:0px 70px !important; } .my_page .vpadding-responsive { padding:40px 0px !important; } } @media (min-width: 768px) { .my_page .padding-special { padding:4em !important; } .my_page .padding-special-top { padding-top:4em !important; } .my_page .padding-special-bottom { padding-bottom:4em !important; } .my_page .padding-special-left {	padding-left:4em !important; } .my_page .padding-special-right { padding-bottom:4em !important;	} } /*------------ paddingS DEVICE ONLY -----------*/ @media (min-width: 480px) and (max-width: 767px) { .my_page .padding-5-on-phablet { padding:5px !important } .my_page .padding-10-on-phablet { padding:10px !important } .my_page .padding-20-on-phablet { padding:20px !important } .my_page .padding-40-on-phablet { padding:40px !important } .my_page .no-padding-on-phablet { padding:0px !important } .my_page .no-padding-left-on-phablet { padding-left:0px !important } .my_page .no-padding-right-on-phablet { padding-right:0px !important } .my_page .no-padding-top-on-phablet { padding-top:0px !important } .my_page .no-padding-bottom-on-phablet { padding-bottom:0px !important } } @media (min-width: 768px) and (max-width: 1023px) { .my_page .padding-5-on-tablet { padding:5px !important } .my_page .padding-10-on-tablet { padding:10px !important } .my_page .padding-20-on-tablet { padding:20px !important } .my_page .padding-40-on-tablet { padding:40px !important } .my_page .no-padding-on-tablet { padding:0px !important } .my_page .no-padding-left-on-tablet { padding-left:0px !important } .my_page .no-padding-right-on-tablet { padding-right:0px !important } .my_page .no-padding-top-on-tablet { padding-top:0px !important } .my_page .no-padding-bottom-on-tablet { padding-bottom:0px !important } } @media (min-width: 1024px) and (max-width: 1279px) { .my_page .padding-5-on-desktop { padding:5px !important } .my_page .padding-10-on-desktop { padding:10px !important } .my_page .padding-20-on-desktop { padding:20px !important } .my_page .padding-40-on-desktop { padding:40px !important } .my_page .no-padding-on-desktop { padding:0px !important } .my_page .no-padding-left-on-desktop { padding-left:0px !important } .my_page .no-padding-right-on-desktop { padding-right:0px !important } .my_page .no-padding-top-on-desktop { padding-top:0px !important } .my_page .no-padding-bottom-on-desktop { padding-bottom:0px !important } } @media (min-width: 1280px) and (max-width: 1399px) { .my_page .padding-5-on-desktop-xl { padding:5px !important } .my_page .padding-10-on-desktop-xl { padding:10px !important } .my_page .padding-20-on-desktop-xl { padding:20px !important } .my_page .padding-40-on-desktop-xl { padding:40px !important } .my_page .no-padding-on-desktop-xl { padding:0px !important } .my_page .no-padding-left-on-desktop-xl { padding-left:0px !important } .my_page .no-padding-right-on-desktop-xl { padding-right:0px !important } .my_page .no-padding-top-on-desktop-xl { padding-top:0px !important } .my_page .no-padding-bottom-on-desktop-xl { padding-bottom:0px !important } } @media (min-width: 1400px) { .my_page .padding-5-on-desktop-xxl { padding:5px !important } .my_page .padding-10-on-desktop-xxl { padding:10px !important } .my_page .padding-20-on-desktop-xxl { padding:20px !important } .my_page .padding-40-on-desktop-xxl { padding:40px !important } .my_page .no-padding-on-desktop-xxl { padding:0px !important } .my_page .no-padding-left-on-desktop-xxl { padding-left:0px !important } .my_page .no-padding-right-on-desktop-xxl { padding-right:0px !important } .my_page .no-padding-top-on-desktop-xxl { padding-top:0px !important } .my_page .no-padding-bottom-on-desktop-xxl { padding-bottom:0px !important } } /*------------ padding TOUS DEVICES -----------*/ .my_page .padding-5 { padding:5px !important; } .my_page .padding-10 { padding:10px !important; } .my_page .padding-20 { padding:20px !important; } .my_page .padding-30 { padding:30px !important; } .my_page .padding-40 { padding:40px !important; } .my_page .padding-50 { padding:50px !important; } .my_page .padding-100 { padding:100px !important; } .my_page .padding-top-5 { padding-top:5px !important; } .my_page .padding-top-10 { padding-top:10px !important; } .my_page .padding-top-20 { padding-top:20px !important; } .my_page .padding-top-30 { padding-top:30px !important; } .my_page .padding-top-40 { padding-top:40px !important; } .my_page .padding-top-50 { padding-top:50px !important; } .my_page .padding-top-100 { padding-top:100px !important; } .my_page .padding-left-5 { padding-left:5px !important; } .my_page .padding-left-10 { padding-left:10px !important; } .my_page .padding-left-20 { padding-left:20px !important; } .my_page .padding-left-30 { padding-left:30px !important; } .my_page .padding-left-40 { padding-left:40px !important; } .my_page .padding-left-50 { padding-left:50px !important; } .my_page .padding-left-100 { padding-left:100px !important; } .my_page .padding-bottom-5 { padding-bottom:5px !important; } .my_page .padding-bottom-10 { padding-bottom:10px !important; } .my_page .padding-bottom-20 { padding-bottom:20px !important; } .my_page .padding-bottom-30 { padding-bottom:30px !important; } .my_page .padding-bottom-40 { padding-bottom:40px !important; } .my_page .padding-bottom-50 { padding-bottom:50px !important; } .my_page .padding-bottom-100 { padding-bottom:100px !important; } .my_page .padding-right-5 { padding-right:5px !important; } .my_page .padding-right-10 { padding-right:10px !important; } .my_page .padding-right-20 { padding-right:20px !important; } .my_page .padding-right-30 { padding-right:30px !important; } .my_page .padding-right-40 { padding-right:40px !important; } .my_page .padding-right-50 { padding-right:50px !important; } .my_page .padding-right-100 { padding-right:100px !important; } .my_page .hpadding-5 { padding-left:5px !important; padding-right:5px !important; } .my_page .vpadding-5 { padding-top:5px !important; padding-bottom:5px !important; } .my_page .hpadding-10 { padding-left:10px !important; padding-right:10px !important; } .my_page .vpadding-10 { padding-top:10px !important; padding-bottom:10px !important; } .my_page .hpadding-20 { padding-left:20px !important; padding-right:20px !important; } .my_page .vpadding-20 { padding-top:20px !important; padding-bottom:20px !important; } .my_page .hpadding-30 { padding-left:30px !important; padding-right:30px !important; } .my_page .vpadding-30 { padding-top:30px !important; padding-bottom:30px !important; } .my_page .hpadding-40 { padding-left:40px !important; padding-right:40px !important; } .my_page .vpadding-40 { padding-top:40px !important; padding-bottom:40px !important; } .my_page .no-padding { padding:0px 0px 0px 0px !important;} .my_page .no-padding-bottom {padding-bottom:0px !important;} .my_page .no-padding-top {padding-top:0px !important;} .my_page .no-padding-left {padding-left:0px !important;} .my_page .no-padding-right {padding-right:0px !important;} /*------------ padding MOBILE ONLY -----------*/ @media (max-width: 639px) { .my_page .padding-5-on-mobile { padding:5px !important; } .my_page .padding-10-on-mobile { padding:10px !important; } .my_page .padding-20-on-mobile { padding:20px !important; } .my_page .padding-30-on-mobile { padding:30px !important; } .my_page .padding-40-on-mobile { padding:40px !important; } .my_page .padding-50-on-mobile { padding:50px !important; } .my_page .padding-top-5-on-mobile { padding-top:5px !important; } .my_page .padding-top-10-on-mobile { padding-top:10px !important; } .my_page .padding-top-20-on-mobile { padding-top:20px !important; } .my_page .padding-top-30-on-mobile { padding-top:30px !important; } .my_page .padding-top-40-on-mobile { padding-top:40px !important; } .my_page .padding-top-50-on-mobile { padding-top:50px !important; } .my_page .padding-top-100-on-mobile { padding-top:100px !important; } .my_page .padding-left-5-on-mobile { padding-left:5px !important; } .my_page .padding-left-10-on-mobile { padding-left:10px !important; } .my_page .padding-left-20-on-mobile { padding-left:20px !important; } .my_page .padding-left-30-on-mobile { padding-left:30px !important; } .my_page .padding-left-40-on-mobile { padding-left:40px !important; } .my_page .padding-left-50-on-mobile { padding-left:50px !important; } .my_page .padding-left-100-on-mobile { padding-left:100px !important; } .my_page .padding-bottom-5-on-mobile { padding-bottom:5px !important; } .my_page .padding-bottom-10-on-mobile { padding-bottom:10px !important; } .my_page .padding-bottom-20-on-mobile { padding-bottom:20px !important; } .my_page .padding-bottom-30-on-mobile { padding-bottom:30px !important; } .my_page .padding-bottom-40-on-mobile { padding-bottom:40px !important; } .my_page .padding-bottom-50-on-mobile { padding-bottom:50px !important; } .my_page .padding-bottom-100-on-mobile { padding-bottom:100px !important; } .my_page .padding-right-5-on-mobile { padding-right:5px !important; } .my_page .padding-right-10-on-mobile { padding-right:10px !important; } .my_page .padding-right-20-on-mobile { padding-right:20px !important; } .my_page .padding-right-30-on-mobile { padding-right:30px !important; } .my_page .padding-right-40-on-mobile { padding-right:40px !important; } .my_page .padding-right-50-on-mobile { padding-right:50px !important; } .my_page .padding-right-100-on-mobile { padding-right:100px !important; } .my_page .hpadding-5-on-mobile { padding-left:5px !important; padding-right:5px !important; } .my_page .vpadding-5-on-mobile { padding-top:5px !important; padding-bottom:5px !important; } .my_page .hpadding-10-on-mobile { padding-left:10px !important; padding-right:10px !important; } .my_page .vpadding-10-on-mobile { padding-top:10px !important; padding-bottom:10px !important; } .my_page .hpadding-20-on-mobile { padding-left:20px !important; padding-right:20px !important; } .my_page .vpadding-20-on-mobile { padding-top:20px !important; padding-bottom:20px !important; } .my_page .hpadding-30-on-mobile { padding-left:30px !important; padding-right:30px !important; } .my_page .vpadding-30-on-mobile { padding-top:30px !important; padding-bottom:30px !important; } .my_page .hpadding-40-on-mobile { padding-left:40px !important; padding-right:40px !important; } .my_page .vpadding-40-on-mobile { padding-top:40px !important; padding-bottom:40px !important; } .my_page .no-padding-on-mobile { padding:0px 0px 0px 0px !important;} .my_page .no-padding-bottom-on-mobile {padding-bottom:0px !important;} .my_page .no-padding-top-on-mobile {padding-top:0px !important;} .my_page .no-padding-left-on-mobile {padding-left:0px !important;} .my_page .no-padding-right-on-mobile {padding-right:0px !important;} } /*------------ /paddingS -----------*/ /*------------ MARGINS CENTER 0px -----------*/ .my_page .center-auto { margin:0px auto!important; display:block!important; float:none !important } @media (min-width:480px) { .my_page .center-auto-on-phablet { margin:0px auto!important; display:block!important; } } @media (min-width:768px) { .my_page .center-auto-on-tablet { margin:0px auto!important; display:block!important; } } @media (min-width:1024px) { .my_page .center-auto-on-desktop { margin:0px auto!important; display:block!important; } } @media (min-width:1280px) { .my_page .center-auto-on-desktop-xl { margin:0px auto!important; display:block!important; } } /*------------ MARGINS RESPONSIVE -----------*/ @media (min-width: 380px) { .my_page .margin-responsive { margin:20px 20px !important; } .my_page .hmargin-responsive { margin:auto 20px !important; } .my_page .vmargin-responsive { margin:20px auto !important; } } @media (min-width: 480px) { .my_page .margin-responsive { margin:30px 30px !important; } .my_page .hmargin-responsive { margin:auto 30px !important; } .my_page .vmargin-responsive { margin:20px auto !important; } } @media (min-width: 768px) { .my_page .margin-responsive { margin:40px 40px !important; } .my_page .hmargin-responsive { margin:auto 40px !important; } .my_page .vmargin-responsive { margin:25px auto !important; } } @media (min-width: 1024px) { .my_page .margin-responsive { margin:50px 50px !important; } .my_page .hmargin-responsive { margin:auto 50px !important; } .my_page .vmargin-responsive { margin:30px auto !important; } } @media (min-width: 1280px) { .my_page .margin-responsive { margin:60px 60px !important; } .my_page .hmargin-responsive { margin:auto 60px !important; } .my_page .vmargin-responsive { margin:35px auto !important; } } @media (min-width: 1920) { .my_page .margin-responsive { margin:70px 70px !important; } .my_page .hmargin-responsive { margin:auto 70px !important; } .my_page .vmargin-responsive { margin:40px auto !important; } } @media (min-width: 768px) { .my_page .margin-special { margin:4em !important; } .my_page .margin-special-top { margin-top:4em !important; } .my_page .margin-special-bottom { margin-bottom:4em !important; } .my_page .margin-special-left {	margin-left:4em !important; } .my_page .margin-special-right { margin-bottom:4em !important;	} } /*------------ MARGINS DEVICE ONLY -----------*/ @media (min-width: 768px) and (max-width: 1023px) { .my_page .margin-5-on-tablet { margin:5px !important } .my_page .margin-10-on-tablet { margin:10px !important } .my_page .margin-20-on-tablet { margin:20px !important } .my_page .margin-40-on-tablet { margin:40px !important } .my_page .no-margin-on-tablet { margin:0px !important } .my_page .no-margin-left-on-tablet { margin-left:0px !important } .my_page .no-margin-right-on-tablet { margin-right:0px !important } .my_page .no-margin-top-on-tablet { margin-top:0px !important } .my_page .no-margin-bottom-on-tablet { margin-bottom:0px !important } } @media (min-width: 1024px) and (max-width: 1279px) { .my_page .margin-5-on-desktop { margin:5px !important } .my_page .margin-10-on-desktop { margin:10px !important } .my_page .margin-20-on-desktop { margin:20px !important } .my_page .margin-40-on-desktop { margin:40px !important } .my_page .no-margin-on-desktop { margin:0px !important } .my_page .no-margin-left-on-desktop { margin-left:0px !important } .my_page .no-margin-right-on-desktop { margin-right:0px !important } .my_page .no-margin-top-on-desktop { margin-top:0px !important } .my_page .no-margin-bottom-on-desktop { margin-bottom:0px !important } } /*------------ MARGIN TOUS DEVICES -----------*/ .my_page .margin-5 { margin:5px !important; } .my_page .margin-10 { margin:10px !important; } .my_page .margin-20 { margin:20px !important; } .my_page .margin-30 { margin:30px !important; } .my_page .margin-40 { margin:40px !important; } .my_page .margin-50 { margin:50px !important; } .my_page .margin-100 { margin:100px !important; } .my_page .margin-top-5 { margin-top:5px !important; } .my_page .margin-top-10 { margin-top:10px !important; } .my_page .margin-top-20 { margin-top:20px !important; } .my_page .margin-top-30 { margin-top:30px !important; } .my_page .margin-top-40 { margin-top:40px !important; } .my_page .margin-top-50 { margin-top:50px !important; } .my_page .margin-top-100 { margin-top:100px !important; } .my_page .margin-left-5 { margin-left:5px !important; } .my_page .margin-left-10 { margin-left:10px !important; } .my_page .margin-left-20 { margin-left:20px !important; } .my_page .margin-left-30 { margin-left:30px !important; } .my_page .margin-left-40 { margin-left:40px !important; } .my_page .margin-left-50 { margin-left:50px !important; } .my_page .margin-left-100 { margin-left:100px !important; } .my_page .margin-bottom-5 { margin-bottom:5px !important; } .my_page .margin-bottom-10 { margin-bottom:10px !important; } .my_page .margin-bottom-20 { margin-bottom:20px !important; } .my_page .margin-bottom-30 { margin-bottom:30px !important; } .my_page .margin-bottom-40 { margin-bottom:40px !important; } .my_page .margin-bottom-50 { margin-bottom:50px !important; } .my_page .margin-bottom-100 { margin-bottom:100px !important; } .my_page .margin-right-5 { margin-right:5px !important; } .my_page .margin-right-10 { margin-right:10px !important; } .my_page .margin-right-20 { margin-right:20px !important; } .my_page .margin-right-30 { margin-right:30px !important; } .my_page .margin-right-40 { margin-right:40px !important; } .my_page .margin-right-50 { margin-right:50px !important; } .my_page .margin-right-100 { margin-right:100px !important; } .my_page .hmargin-5 { margin-left:5px !important; margin-right:5px !important; } .my_page .vmargin-5 { margin-top:5px !important; margin-bottom:5px !important; } .my_page .hmargin-10 { margin-left:10px !important; margin-right:10px !important; } .my_page .vmargin-10 { margin-top:10px !important; margin-bottom:10px !important; } .my_page .hmargin-20 { margin-left:20px !important; margin-right:20px !important; } .my_page .vmargin-20 { margin-top:20px !important; margin-bottom:20px !important; } .my_page .hmargin-30 { margin-left:30px !important; margin-right:30px !important; } .my_page .vmargin-30 { margin-top:30px !important; margin-bottom:30px !important; } .my_page .hmargin-40 { margin-left:40px !important; margin-right:40px !important; } .my_page .vmargin-40 { margin-top:40px !important; margin-bottom:40px !important; } .my_page .no-margin { margin:0px 0px 0px 0px !important;} .my_page .no-margin-bottom {margin-bottom:0px !important;} .my_page .no-margin-top {margin-top:0px !important;} .my_page .no-margin-left {margin-left:0px !important;} .my_page .no-margin-right {margin-right:0px !important;} /*------------ MARGIN MOBILE ONLY -----------*/ @media (max-width: 639px) { .my_page .margin-5-on-mobile { margin:5px !important; } .my_page .margin-10-on-mobile { margin:10px !important; } .my_page .margin-20-on-mobile { margin:20px !important; } .my_page .margin-30-on-mobile { margin:30px !important; } .my_page .margin-40-on-mobile { margin:40px !important; } .my_page .margin-50-on-mobile { margin:50px !important; } .my_page .margin-top-5-on-mobile { margin-top:5px !important; } .my_page .margin-top-10-on-mobile { margin-top:10px !important; } .my_page .margin-top-20-on-mobile { margin-top:20px !important; } .my_page .margin-top-30-on-mobile { margin-top:30px !important; } .my_page .margin-top-40-on-mobile { margin-top:40px !important; } .my_page .margin-top-50-on-mobile { margin-top:50px !important; } .my_page .margin-top-100-on-mobile { margin-top:100px !important; } .my_page .margin-left-5-on-mobile { margin-left:5px !important; } .my_page .margin-left-10-on-mobile { margin-left:10px !important; } .my_page .margin-left-20-on-mobile { margin-left:20px !important; } .my_page .margin-left-30-on-mobile { margin-left:30px !important; } .my_page .margin-left-40-on-mobile { margin-left:40px !important; } .my_page .margin-left-50-on-mobile { margin-left:50px !important; } .my_page .margin-left-100-on-mobile { margin-left:100px !important; } .my_page .margin-bottom-5-on-mobile { margin-bottom:5px !important; } .my_page .margin-bottom-10-on-mobile { margin-bottom:10px !important; } .my_page .margin-bottom-20-on-mobile { margin-bottom:20px !important; } .my_page .margin-bottom-30-on-mobile { margin-bottom:30px !important; } .my_page .margin-bottom-40-on-mobile { margin-bottom:40px !important; } .my_page .margin-bottom-50-on-mobile { margin-bottom:50px !important; } .my_page .margin-bottom-100-on-mobile { margin-bottom:100px !important; } .my_page .margin-right-5-on-mobile { margin-right:5px !important; } .my_page .margin-right-10-on-mobile { margin-right:10px !important; } .my_page .margin-right-20-on-mobile { margin-right:20px !important; } .my_page .margin-right-30-on-mobile { margin-right:30px !important; } .my_page .margin-right-40-on-mobile { margin-right:40px !important; } .my_page .margin-right-50-on-mobile { margin-right:50px !important; } .my_page .margin-right-100-on-mobile { margin-right:100px !important; } .my_page .hmargin-5-on-mobile { margin-left:5px !important; margin-right:5px !important; } .my_page .vmargin-5-on-mobile { margin-top:5px !important; margin-bottom:5px !important; } .my_page .hmargin-10-on-mobile { margin-left:10px !important; margin-right:10px !important; } .my_page .vmargin-10-on-mobile { margin-top:10px !important; margin-bottom:10px !important; } .my_page .hmargin-20-on-mobile { margin-left:20px !important; margin-right:20px !important; } .my_page .vmargin-20-on-mobile { margin-top:20px !important; margin-bottom:20px !important; } .my_page .hmargin-30-on-mobile { margin-left:30px !important; margin-right:30px !important; } .my_page .vmargin-30-on-mobile { margin-top:30px !important; margin-bottom:30px !important; } .my_page .hmargin-40-on-mobile { margin-left:40px !important; margin-right:40px !important; } .my_page .vmargin-40-on-mobile { margin-top:40px !important; margin-bottom:40px !important; } .my_page .no-margin-on-mobile { margin:0px 0px 0px 0px !important;} .my_page .no-margin-bottom-on-mobile {margin-bottom:0px !important;} .my_page .no-margin-top-on-mobile {margin-top:0px !important;} .my_page .no-margin-left-on-mobile {margin-left:0px !important;} .my_page .no-margin-right-on-mobile {margin-right:0px !important;} } /*------------ /MARGINS -----------*/ /*------------ ALIGNEMENTS RESPONSIVE TEXTE ou CONTENEURS -----------*/ .my_page .text-center { text-align:center !important; } .my_page .text-left { text-align:left !important; } .my_page .text-right { text-align:right !important; } .my_page .margin-reset { margin:0px 0px 0px 0px !important; } .my_page .vertical-align-middle { vertical-align: middle; } @media (min-width: 480px) and (max-width: 639px) { .my_page .text-center-on-phablet { text-align:center !important; } .my_page .text-left-on-phablet{ text-align:left !important; } .my_page .text-right-on-phablet { text-align:right !important; } .center-auto-on-phablet { margin:0px auto !important } } @media (min-width: 640px) and (max-width: 1023px) { .my_page .text-center-on-tablet { text-align:center !important; } .my_page .text-left-on-tablet { text-align:left !important; } .my_page .text-right-on-tablet { text-align:right !important; } .center-auto-on-tablet { margin:0px auto !important } } @media (min-width: 1024px) { .my_page .text-center-on-desktop { text-align:center !important; } .my_page .text-left-on-desktop { text-align:left !important; } .my_page .text-right-on-desktop { text-align:right !important; } .center-auto-on-tablet { margin:0px auto !important } } @media (max-width:480px) { .my_page .text-center-on-mobile { text-align:center !important; } .my_page .text-left-on-mobile { text-align:left !important; } .my_page .text-right-on-mobile { text-align:right !important; } .center-auto-on-mobile { margin:0px auto !important } } .my_page .bold { font-weight:bold } .my_page .lighter { font-weight:lighter } .my_page .pull-left { float:left; } .my_page .pull-right { float:right; } @media (max-width:480px) { .my_page .no-float-on-mobile { float:none !important; } } .my_page .separ { clear:both; border:0px; margin:0px; padding:0px; background-color:none; height:0; } .my_page .clear { clear:both; border:0px; margin:0px; padding:0px; background-color:none; height:0; } .my_page .texte-noir, .texte-noir h1, .texte-noir, h2.texte-noir, h3.texte-noir, h4.texte-noir, h5.texte-noir, h6.texte-noir { color:#000000;} .my_page .reserve, .my_page h1.reserve, .my_page h2.reserve, .my_page h3.reserve, .my_page h4.reserve, .my_page h5.reserve, .my_page h6.reserve , .my_page a.reserve, .my_page p.reserve, .my_page .reserve h1, .my_page .reserve h2, .my_page .reserve h3, .my_page .reserve h4, .my_page .reserve h5, .my_page .reserve h6, .my_page .reserve a, .my_page .reserve p, .my_page .reserve a, label.reserve, .my_page .reserve label { color:#ffffff!important;} .my_page .align-left { text-align:left; } .my_page .italic { font-style:italic; } .my_page .block { display:block!important; vertical-align:top; } .my_page .inline { display:inline!important; vertical-align:top; } .my_page .inline-block { display:inline-block!important; } .my_page ul.inline-block-list li { display:inline-block!important } .my_page .relative , .my_page.relative { position:relative!important; } /*------------ Fonts size spéciales -----------*/ .my_page .small { font-size:small } .my_page .bigger {font-size:7.2rem} .my_page .xx-small { font-size:0.5em; display:block; margin-top:0.5em; line-height:1em; } .my_page .hide { display:none } .my_page .strong { font-weight:900; } .my_page .italic { font-style:italic; } .my_page .uppercase { text-transform:uppercase } .my_page .no-borders { border:0px!important;} .my_page .no-borders a { border:0px!important;} /* Esthétique */ .box-shadow { box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; } .border-radius { border-radius:30px; } .border-radius { border-radius:30px !important } .border-radius-top-left { border-top-left-radius: 30px !important; } .border-radius-top-right { border-top-right-radius: 30px !important; } .border-radius-bottom-right { border-bottom-right-radius: 30px !important; } .border-radius-bottom-left { border-bottom-left-radius: 30px !important; } @media (max-width:768px) { .no-border-radius-on-mobile { border-radius:0px !important; } .no-border-radius { border-radius:0px !important } .no-border-radius-top-left-on-mobile { border-top-left-radius: 0 !important; } .no-border-radius-top-right-on-mobile { border-top-right-radius: 0 !important; } .no-border-radius-bottom-right-on-mobile { border-bottom-right-radius: 0 !important; } .no-border-radius-bottom-left-on-mobile { border-bottom-left-radius: 0 !important; } .add-border-radius-on-mobile { border-radius:30px !important } .add-border-radius-top-left-on-mobile { border-top-left-radius: 30px !important; } .add-border-radius-top-right-on-mobile { border-top-right-radius: 30px !important; } .add-border-radius-bottom-right-on-mobile { border-bottom-right-radius: 30px !important; } .add-border-radius-bottom-left-on-mobile { border-bottom-left-radius: 30px !important; } } /*---------------------------------- Balises texte spéciales -------------------------------------*/ .my_page sup, .my_page sub { font-size:0.7em !important; } .my_page ul { margin:0px; padding:0px; } .my_page li { list-style-type:none; } .my_page ol.classic { counter-reset: repas;/* on initialise et nomme un compteur */ padding-left:0; } .my_page ol.classic > li { list-style-type: none; counter-increment: repas; /* on incrémente le compteur à chaque nouveau li */ margin-bottom: 15px; padding:0px 0 0 28px; position:relative; } .my_page ol.classic li::before { content: counter(repas); color: #000; font-size: 2.8rem; left: -7px; margin-right: 8px; padding: 2px 0px; position: absolute; top: 4px; vertical-align: top; color:#00815d; } .back-center { position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity:0.08; } /*---------------------------------- / Balises texte spéciales -------------------------------------*/ /*---------------------------------- Effet graphiques -------------------------------------*/ /*----- Bordures -----*/ .my_page .border { border:4px solid; } .my_page .border-bottom { border-bottom:4px solid; } .my_page .border-top { border-top:4px solid; } .my_page .border-left { border-left:4px solid; } .my_page .border-right { border-right:4px solid; } .border-color { border-color: #00815D !important; } /*----- Titre avec filets latéraux -----*/ .my_page .titre-filet .titre { display: flex; width: 100%; justify-content: center; align-items: center; text-align: center; margin-bottom: 40px; text-transform:uppercase; } .my_page .titre-filet .titre:before, .my_page .titre-filet .titre:after { content: ''; border-top: 4px solid #00815d; margin: 5px 20px 0 0; flex: 1 0 20px; width:100%; } .my_page .titre-filet .titre:after { margin: 5px 0 0 20px; } /*----- /Titre avec filets latéraux -----*/ /*----- Titre avec filet dessus ou dessous -----*/ .my_page .filet { display:block; position:relative; } .my_page .filet-left { text-align:left; } .my_page .filet-right { text-align:right; } .my_page .filet-top:before , .filet-bottom:after { content:" "; display: block; height: 4px; width: 30%; } .my_page .filet-top:before { vertical-align:top; background: #00815D; margin:auto auto 5% 0px; } .my_page .filet-bottom:after { vertical-align:bottom; background: #00815D; margin:5% auto auto 0px; } .my_page .filet-center:before, .my_page .filet-center:after { margin:20px auto; } /*----- /Titre avec filet dessus ou dessous -----*/ /*----- Titre avec bordure côté -----*/ .my_page .bordure-cote { display:block; position:relative; } .my_page .bordure-cote-droit { padding-left:20px; } .my_page .bordure-cote-droit:before { content: ''; background: #00815d; color: white; width: 7px; height: 100%; display: inline-block; position:absolute; left:0px; border-radius:30px; } /*----- /Titre avec bordure côté -----*/ /*----- Séparation -----*/ .filet-separ:after { content:''; width:30%; height:4px; background-color:#00815D; border-radius:60px; display:block; margin:20px auto; } /*----- Rotation 90 degrés -----*/ .container-rotation-90 { display: flex; position:relative; } .rotation-90 { writing-mode: sideways-lr; text-align: right; max-width: 20px; } .rotation-90 h3 { margin-left:0px; min-height:200px; } /*----- /Rotation 90 degrés -----*/ .titre-indicatif { color:#617ca8; margin:20px auto !important; text-align:center; display:block; width:100%; } .color-red { color:red } /*-------------------------------------- FORMULAIRE-------------------------------*/ @media (min-width:480px) { #conteneur-form { border-radius:30px; } } /*Généralités*/ /*Fond des champs iput après auto remplissage : astuce pour garder un background transparent au lieu du fond blanc généré par le navigateur */ input:-internal-autofill, input:-internal-autofill-selected, input:-internal-autofill-focus, input:-internal-autofill-hover, input:-internal-autofill-active, .reserve input:-internal-autofill, input.reserve:-internal-autofill, input:-webkit-autofill, input:-webkit-autofill:selected, input:-webkit-autofill:focus, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus /* Pour navigateurs modernes */ input::placeholder, textarea::placeholder { color: #000000; opacity: 1; } /* WebKit (Chrome, Safari) */ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #000000; opacity: 1; } /* Firefox (anciennes versions) */ input:-moz-placeholder, textarea:-moz-placeholder { color: #000000; opacity: 1; } input::-moz-placeholder, textarea::-moz-placeholder { color: #000000; opacity: 1; } /* Internet Explorer / Edge legacy */ input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #000000; opacity: 1; } .my_page .reserve input[type="text"], .my_page .reserve option, .my_page .reserve select { border-bottom: 1px solid #ffffff; } .my_page .reserve textarea { border: 1px solid #ffffff; } { transition: background-color 0s 600000s, color 0s 600000s !important; /* Make the autofill background completely transparent */ background-color: #ffffff !important; /* This is the key trick to cover the browser's default autofill background while staying transparent */ box-shadow: 0 0 0px 1000px transparent inset !important; /* Ensure your text remains white (or whatever your original text color is) */ -webkit-text-fill-color: #000000 !important; /* Forces the text color to white */ } /*Inline-block*/ .my_page .inline-block label, .my_page .inline-block input { display:inline-block; } /*Labels*/ /*Couleur par défaut*/ .my_page label { display:inline-block; text-align:left; color:#1d1d1b; vertical-align:top; } /*Couleur reserve*/ .my_page label.reserve { color:#ffffff; } .my_page label.inline-block { display:inline-block; margin-bottom:10px } /*label survolé*/ .my_page label:hover { color:#f1ad00!important; } /*label cliqué*/ .my_page label:focus { color:#f1ad00!important; } /*label actif*/ .my_page label:active { color:#f1ad00!important; } /*Labels fond réserve*/ .my_page .reserve label, .my_page label.reserve { color:#ffffff; } .my_page .reserve label:hover, .my_page label.reserve:hover { color:#ffffff!important; } .my_page .reserve label:focus, .my_page label.reserve:focus { color:#ffffff!important; } .my_page .reserve label:active, .my_page label.reserve:active { color:#ffffff!important; } .my_page li * { font-size:inherit } /*Questions supplémentaires*/ .my_page .q_sup { margin:0px; background-color:#eeeeee; border-radius : 5px; -moz-border-radius: 5px; -webkit-border-radius : 5px; position:relative; } .my_page .q_sup.padding { padding:10px} .my_page .q_sup input { margin: 4px 5px 0px 0px; position:absolute; left:6px; } .my_page .q_sup label { margin-right:10px; position:relative; display:inline-block; }/*Couleur par défaut*/ .my_page .star { display:block; position:absolute; right:10px; top:10px; color:#000000 } /*Champs liste déroulante input text et textarea */ .form-row { padding:0px 15px; } /*Couleur générale des champs*/ .my_page input[type="text"], .my_page textarea, .my_page option, .my_page select { margin:0px 0px 0px -1px; padding-left:5px; border-bottom:1px solid #1d1d1b; color:#1d1d1b; outline: 0; width: 100%; background-color:transparent; position:relative; height:35px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size:1em; } /*Couleur du titre de la liste déroulante*/ .my_page select { color:#1d1d1b !important; padding:0px 10px !important; } /*Couleur des options de la liste déroulante */ .my_page option { color:#000000 !important; } /*Couleur reserve*/ .my_page .login-box.reserve input[type="text"], .my_page textarea, .my_page .login-box.reserve option, .my_page .login-box.reserve select { border-bottom:1px solid #ffffff; } .my_page #conteneur-form input[type="text"], .my_page #conteneur-form select { height:35px !important; } .my_page select { border-left: 0px; border-right: 0px; border-top: 0px; padding-left:0px; } /*Commentaires*/ .my_page textarea { min-height:150px; padding:10px } .my_page label[for="id_commentaires"] { margin:10px 0px 10px 5px; font-style:italic; } /*Select customisé*/ .my_page .select-custom { position: relative; display: inline-block; width: 100%; padding:0px 15px; } .my_page .select-custom select { display: inline-block; width: 100%; cursor: pointer; outline: 0; color: #1d1d1b; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /*Couleur reserve*/ .my_page .login-box.reserve .select-custom select { color: #ffffff; } .my_page .select-custom select::-ms-expand { display: none; } .my_page .select-custom select:hover, .my_page .select-custom select:focus { background: transparent; } .my_page .select-custom select:disabled { opacity: 0.5; pointer-events: none; } /*Fleche de liste déroulante*/ .my_page .select-custom:after { content: "\25BC"; position: absolute; top: 0; right: 10px; font-size: 70%; width: 30px; text-align: center; padding-top: 12px; padding-bottom: 10px; pointer-events: none; color: #1d1d1b; } /*Couleur reserve*/ .my_page .login-box.reserve .select-custom:after { color: #ffffff !important; } .my_page .select-custom option { color:#1d1d1b} .my_page .select-custom option:first-child { display:none;} .my_page .select-custom select .titre { padding-bottom:-10px;} /*Bouton valider TXT */ .my_page .btn { font-variant-ligatures: none; display:inline-block; width: 100%; margin:0px auto; background-repeat: no-repeat; overflow: hidden; cursor: pointer; position: relative; box-sizing: border-box; font-weight: bold; font-size: 1rem; padding: 20px 20px; text-align: center; margin: 0px auto; border:0px; max-width:320px; margin-top: 10px; margin-bottom:30px; text-transform:uppercase; border-radius: 100px; background-color: #3D81FF !important; color:#ffffff !important; } .my_page .btn .submit-btn { border: 0px; width: 100%; position: absolute; left: 0px; top: 0px; bottom: 0px; padding: 0px; z-index: 2; cursor: pointer; background-color: #3D81FF !important; color: #ffffff; } .my_page .btn:hover { cursor: pointer; background-color: #ffffff!important; color:#000000!important; } .my_page .select-custom::after { content: "\25BC"; position: absolute; top: 0; right: 10px; font-size: 70%; width: 30px; text-align: center; padding-top: 12px; padding-bottom: 10px; pointer-events: none; color: #1d1d1b; } /*Formulaire input animé*/ .my_page .login-box .user-box { position: relative; box-sizing:border-box; } /*Formulaire input entrain d'etre rempli et personnalisé*/ .my_page .login-box .user-box input { width: 100%; padding:0px 10px; margin-bottom: 15px; border: none; border-bottom: 1px solid #1d1d1b; outline: none; background: transparent !important; } /*Formulaire input non rempli, label au sein du champs*/ .my_page .login-box .user-box label { position: absolute; top:-12px; left: 20px; padding: 20px 0; color: #1d1d1b; pointer-events: none; transition: .5s; margin-left:0px; } /*Couleur Reserve*/ .my_page .login-box .user-box label.reserve { color: #ffffff; } /*Formulaire input rempli, label au dessus du champs*/ .my_page .login-box .user-box input:focus ~ label, .my_page .login-box .user-box input:valid ~ label { top: -30px; left: 20px; color: #1d1d1d; font-size:0.7em; } /*Checkbox et radio*/ .my_page :root { --primary-color:#00e14b; --secondary-color:hsl(217, 15%, 83%); --success-color:hsl(165, 58%, 55%); --info-color:hsl(214, 79%, 65%); --warning-color:hsl(43, 100%, 66%); --danger-color:hsl(354, 81%, 63%); --primary-color-darker:hsl(196, 68%, 54%); --secondary-color-darker:hsl(215, 13%, 70%); --success-color-darker:hsl(165, 55%, 48%); --info-color-darker:hsl(214, 68%, 58%); --warning-color-darker:hsl(39, 97%, 62%); --danger-color-darker:hsl(354, 67%, 56%); --primary-color-lighter:hsl(196, 78%, 81%); --secondary-color-lighter:hsl(214, 16%, 92%); --success-color-lighter:hsl(165, 58%, 75%); --info-color-lighter:hsl(214, 79%, 85%); --warning-color-lighter:hsl(43, 100%, 86%); --danger-color-lighter:hsl(354, 81%, 83%); --secondary-color-darkest:hsl(215, 11%, 30%); --secondary-color-lightest:hsl(220, 1%, 98%); --ease-in-quad:cubic-bezier(0.55, 0.085, 0.68, 0.53); --ease-in-cubic:cubic-bezier(0.55, 0.055, 0.675, 0.19); --ease-in-quart:cubic-bezier(0.895, 0.03, 0.685, 0.22); --ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06); --ease-in-expo:cubic-bezier(0.95, 0.05, 0.795, 0.035); --ease-in-circ:cubic-bezier(0.6, 0.04, 0.98, 0.335); --ease-out-quad:cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out-cubic:cubic-bezier(0.215, 0.61, 0.355, 1); --ease-out-quart:cubic-bezier(0.165, 0.84, 0.44, 1); --ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1); --ease-out-expo:cubic-bezier(0.19, 1, 0.22, 1); --ease-out-circ:cubic-bezier(0.075, 0.82, 0.165, 1); --ease-in-out-quad:cubic-bezier(0.455, 0.03, 0.515, 0.955); --ease-in-out-cubic:cubic-bezier(0.645, 0.045, 0.355, 1); --ease-in-out-quart:cubic-bezier(0.77, 0, 0.175, 1); --ease-in-out-quint:cubic-bezier(0.86, 0, 0.07, 1); --ease-in-out-expo:cubic-bezier(1, 0, 0, 1); --ease-in-out-circ:cubic-bezier(0.785, 0.135, 0.15, 0.86) } .my_page input[type=checkbox], .my_page input[type=radio] { margin:0; cursor:pointer } .my_page input, .my_page select, .my_page textarea { outline:0; -webkit-appearance:none; -moz-appearance:none; appearance:none } @-webkit-keyframes scale-in { from { transform:scale(0) } to { transform:scale(1) } } .my_page .form-check { position:relative; padding-left:15px; margin-left:15px; } .my_page .form-check-input#anime { background-color: rgba(255, 255, 255, 0.3); } .my_page .form-check-input[type=checkbox] { --checkbox-width:1.4rem; --checkbox-bg:rgba(255, 255, 255, 0.3); --checkbox-radius:4px; --checkbox-border-color:var(--secondary-color); --checkbox-hover-border-color:var(--secondary-color-darker); --checkbox-checked-bg:var(--primary-color); --checkbox-disabled-bg:var(--secondary-color-lighter); --checkbox-disabled-checked-bg:var(--secondary-color-darker); width:var(--checkbox-width); height:var(--checkbox-width); position:relative; background:var(--checkbox-checked-bg); border:none; border-radius:var(--checkbox-radius); transition:.3s; position:absolute; left:0px; } .my_page .form-check-input[type=checkbox]~.form-check-label { margin-left:1rem; cursor:pointer; transition:.3s } .my_page .form-check-input[type=checkbox]::before { position:absolute; content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18px' height='18px' fill='none' stroke-width='2px' stroke='white' stroke-linecap='round' viewBox='0 0 21 21'%3E%3Cpolyline points='5 10.75 8.5 14.25 16 6'%3E%3C/polyline%3E%3C/svg%3E"); transform:scale(0); top: 0.1rem; left: 0.1rem; } .my_page .form-check-input[type=checkbox]::after { position:absolute; top:0; left:0; width:100%; height:100%; content:""; background:var(--checkbox-bg); border-radius:inherit; box-shadow:inset 0 0 0 1px var(--checkbox-border-color); transition:.2s } .my_page .form-check-input[type=checkbox]:hover { --checkbox-border-color:var(--checkbox-hover-border-color) } .my_page .form-check-input[type=checkbox]:checked::before { -webkit-animation:scale-in .1s .2s linear forwards; animation:scale-in .1s .2s linear forwards } .my_page .form-check-input[type=checkbox]:checked::after { transform:scale(0) } .my_page .form-check-input[type=checkbox]:disabled { --checkbox-bg:var(--checkbox-disabled-bg); --checkbox-checked-bg:var(--checkbox-disabled-checked-bg); cursor:not-allowed } .my_page .form-check-input[type=checkbox]:disabled~.form-check-label { cursor:not-allowed } .my_page .form-check-input[type=checkbox]:indeterminate::after { transform:scale(.5) } .my_page .form-check-input[type=radio] { --radio-width:1.125rem; --radio-bg:white; --radio-radius:50%; --radio-border-color:var(--secondary-color); --radio-hover-border-color:var(--secondary-color-darker); --radio-checked-bg:var(--primary-color); --radio-disabled-bg:var(--secondary-color-lighter); --radio-disabled-checked-bg:var(--secondary-color-darker); width:var(--radio-width); height:var(--radio-width); position:relative; background:var(--radio-checked-bg); border:none; border-radius:var(--radio-radius); transition:.3s } .my_page .form-check-input[type=radio]~.form-check-label { margin-left:.625rem; cursor:pointer; transition:.3s } .my_page .form-check-input[type=radio]::after, .my_page .form-check-input[type=radio]::before { position:absolute; top:0; left:0; width:100%; height:100%; content:""; background:var(--radio-bg); border-radius:inherit } .my_page .form-check-input[type=radio]::before { transform:scale(0) } .my_page .form-check-input[type=radio]::after { box-shadow:inset 0 0 0 1px var(--radio-border-color); transition:.2s } .my_page .form-check-input[type=radio]:hover { --radio-border-color:var(--radio-hover-border-color) } .my_page .form-check-input[type=radio]:checked::before { -webkit-animation:scale-in-smaller .1s .2s linear forwards; animation:scale-in-smaller .1s .2s linear forwards } .my_page .form-check-input[type=radio]:checked::after { transform:scale(0) } .my_page .form-check-input[type=radio]:disabled { --radio-bg:var(--radio-disabled-bg); --radio-checked-bg:var(--radio-disabled-checked-bg); cursor:not-allowed } .my_page .form-check-input[type=radio]:disabled~.form-check-label { cursor:not-allowed } /*Fin Checkbox et Radio*/ /*Input type radio*/ .my_page input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 50%; width: 16px; height: 16px; border: 8px solid #ffffff; transition: 0.2s all linear; margin-right: 5px; position: relative; margin-top:2px; } .my_page input[type="radio"]:checked { border: 5px solid #4eb799; background: #ffffff; } /* / Input type radio */ .my_page #conteneur-form input[type="text"], .my_page #conteneur-form select { height:35px !important; } .my_page select { border-left: 0px; border-right: 0px; border-top: 0px; padding-left:0px; } /*----------------------------------- COULEURS DES CHAMPS & LABELS ----------------------------------------*/ /*COULEURS SPECIALES*/ /*.my_page input[type="text"], .my_page textarea, .my_page option, .my_page select { border-bottom:1px solid green; color:green !important; } /*Couleur du titre de la liste déroulante*/ /*.my_page select { color:green !important; } .my_page .select-custom::after { color: green !important; } /*Couleur des options de la liste déroulante */ /*.my_page option { color:#1d1d1b !important; } /*Formulaire input non rempli*/ /*.my_page .login-box .user-box label { color: green !important; } /*Formulaire input rempli animé*/ /*.my_page .login-box .user-box input { color: red !important; border-bottom: 1px solid green !important; } /*COULEURS RESERVE*/ .my_page .login-box.reserve input[type="text"], .my_page textarea.reserve, .my_page .login-box.reserve select { border-bottom:1px solid #ffffff; color: #ffffff !important; } .my_page .login-box.reserve .user-box input, .my_page .login-box .user-box input.reserve { border-bottom: 1px solid #ffffff !important; } .my_page .login-box.reserve .user-box label , .my_page .login-box .user-box label.reserve { color: #ffffff !important; } .my_page .login-box .user-box input.reserve { color: #ffffff !important; } /*Formulaire input entrain d'etre rempli et personnalisé*/ .my_page .reserve .login-box .user-box input , .my_page .login-box.reserve .user-box input , .my_page .login-box .user-box input.reserve { border-bottom: 1px solid #ffffff; } /*----------------------------------- / COULEURS DES CHAMPS & LABELS ----------------------------------------*/ /*-------------------------------------- / FORMULAIRE-------------------------------*/ /*-------------------------------------- FORMULAIRE CONTENEURS SPECIFIQUES -------------------------------*/ /*-- FORMULAIRE : CONTENEURS --*/ @media (min-width:1024px) { .my_page .sticky { position:sticky; top:0; align-self: flex-start; overflow-y: visible; } } .my_page #top_form { position: relative; margin-bottom:20px; } /* #top_form:after { content: url("https://dummyimage.com/35x35/aaa/fff"); position: relative; z-index: 3; margin: 0px auto; bottom:-45px; animation: bounce 2s ease infinite; } @keyframes bounce{ from {bottom: -45px;} 50% {bottom: -35px;} to {bottom: -45px;} } */ .my_page #top_form img { margin-top: 15px; margin-bottom:0px } .my_page #mentions-form { margin:10px 0px } /*-------------------------------------- /FORMULAIRE CONTENEURS SPECIFIQUES -------------------------------*/ /*-------------------------------------- MENTIONS DIFFUSEUR -------------------------------*/ #mentions-diffuseur { padding-top:100px; padding-bottom:100px; } /*-------------------------------------- / MENTIONS DIFFUSEUR -------------------------------*/ /*-------------------------------------- SPECIAL -------------------------------*/ /* Titre div incliné */ .incline { position: relative; padding: 20px 10px 20px 20px; background: #00815D; overflow: visible; z-index: 1; } /* where the magic happens */ .incline:after { content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; bottom: 0; transform-origin: left bottom; transform: skewX(-10deg); } /* Chiffres clés */ .chiffre { font-size: clamp(8rem, 8vw, 10.2rem) !important; /* 28px → 42px */ } @media (min-width: 1024px) { .chiffre { font-size: clamp(6.75rem, 11vw, 16.2rem) !important; /* 28px → 42px */ } } .h1 sup { font-size:60%; color:inherit;} /*Encadre*/ .encadre { border:5px solid #a2b1ac; } /*Header absolute*/ .header-absolute { width:100%; } @media screen and (min-width: 768px) { .header-absolute { position:fixed; top:0px; left:0px; z-index:1000; width:100% !important; } } /*-------------------------------------- /SPECIAL -------------------------------*/ /*-------------------------------------- ID'S -------------------------------*/ #merci .my_container { max-width:350px } @media screen and (min-width: 768px) { #merci .my_container { max-width:1000px } } /*-------------------------------------- /ID'S -------------------------------*/ /*--------------------------------------------------------------------------------------*/ /*----------------------------------- / FIN BLOCS STATIQUES ET LANDING PAGE PERSONNALISEES ------------------------*/ /*--------------------------------------------------------------------------------------*/