@charset "UTF-8"; /* ## FONTs ################ */ /* Manrope Variant */ @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap"); /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* ## VARIABLES ################ */ :root { --pb-color-dark: #161616; --pb-color-dark-hovered: #292929; --pb-color-dark-pressed: #333333; --pb-color-darkgrey: #454545; --pb-color-grey: #656565; --pb-color-midgrey: #757575; --pb-color-text-lowkey: #757575; --pb-color-softgrey: #989898; --pb-color-lowgrey: #d8d8d8; --pb-color-lightgrey: #f5f5f5; --pb-color-bleu: #006af5; --pb-color-bleu-hovered: #0061e0; --pb-color-bleu-pressed: #0058cc; --pb-color-price: #e21212; --pb-color-rouge: #e21212; --pb-color-rouge-hovered: #d01111; --pb-color-rouge-pressed: #bd0f0f; --pb-color-vert: #007a38; --pb-color-jaune: #ffdb00; --pb-color-marketplace: #008391; --pb-font-fam-title: Party, "Arial Narrow", "Trebuchet MS", sans-serif; --pb-font-fam-text: "Manrope", Arial, sans-serif; --pb-font-size-base: 16px; /* = html element font-size = 1rem */ --pb-font-size-title-header: 3.125rem; /* = 50px */ --pb-font-size-title: 1.5rem; /* = 24px */ --pb-font-size-title-sm: 1.125rem; /* = 18px */ --pb-font-size-title-xs: 1rem; /* = 16px */ --pb-font-size-text-med: 1rem; /* = 16px */ --pb-font-size-text: 0.875rem; /* = 14px */ --pb-font-size-text-sm: calc((12 / var(pb-font-size-base)) * 1rem); /* = 12px */ --pb-ratio-text-sm-to-text: calc(12 / 14); --pb-font-size-cta-lg: 1rem; /* = 16px */ --pb-font-size-cta: 0.875rem; /* = 14px */ --pb-line-height: 1.5; --pb-line-height-sm: 1.3; --pb-line-height-title: 1.2; --pb-base-spacing: 1rem; /* = 16px */ --pb-section-spacing: 3rem; /* = 48px */ --pb-subsection-spacing: 2.5rem; /* = 40px */ --pb-subsection-spacing-sm: 2rem; /* = 32px */ --pb-block-spacing-lg: 2rem; /* = 32px */ --pb-block-spacing: 1.5rem; /* = 24px */ --pb-block-padding: 1.5rem; /* = 24px */ --pb-inner-padding: 3rem; /* = 48px */ --pb-radius-lg: 20px; --pb-radius: 8px; --pb-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.15); } @media screen and (max-width: 1297px) { :root { --pb-font-size-title-header: 2.5rem; /* = 40px*/ } } @media screen and (max-width: 768px) { :root { --pb-inner-padding: 1.5rem; /* = 24px */ } } @media screen and (max-width: 480px) { :root { --pb-font-size-title-header: 2rem; /* = 32px */ --pb-font-size-title: 1.05em; /* = 21px */ --pb-line-height: 1.3; --pb-radius-lg: 10px; } } /* ## TYPOGRAPHY ################ */ html { font-size: var(--pb-font-size-base); } .pb { color: var(--pb-color-dark); font-family: var(--pb-font-fam-text); font-weight: 500; line-height: var(--pb-line-height); } h2 { font-size: var(--pb-font-size-title); } h3 { font-size: var(--pb-font-size-title-sm); } h3 { font-size: var(--pb-font-size-title-xs); } .pb b, .pb strong { font-weight: 800; } /* ## LAYOUT ################ */ html body, .darty_com_tablet body { background-color: var(--pb-color-lightgrey); background-image: none; margin: 0; } .pb { width: auto; min-width: 740px; padding: 0 0 var(--pb-subsection-spacing) 0; margin: 0 auto; } @media (max-width: 480px) { .pb { min-width: unset; } } .pb--grey { background-color: var(--pb-color-lightgrey); } .pb-limits { max-width: 1280px; margin: 0 auto; } /* structure inner*/ .pb-inner { width: calc(100% - var(--pb-inner-padding) * 2); max-width: 1048px; margin-left: auto; margin-right: auto; } .pb-inner--lg { max-width: 1280px; } @media screen and (max-width: 768px) { .pb-inner--lg { width: 100vw; } } /* ## NORMALIZE ################ */ hr { box-sizing: content-box; height: 0; overflow: visible; } sub, sup { line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; font-size: 60% !important; margin-left: 2px; } sup { top: -0.5em; font-size: 60% !important; margin-left: 2px; } /* ## REDEFINE Header & Footer ## */ /* ( = export pack DARTY ) */ #headerxxl .h_xxl_container { width: auto; min-width: 740px; max-width: 1280px; margin-left: auto; margin-right: auto; } #headerxxl #h_xxl_top { height: 126px; display: flex; flex-flow: row nowrap; align-items: center; float: none; margin: 0 auto; } #h_xxl_logo { float: none; margin-right: 16px; } @media screen and (min-width: 1280px) { #h_xxl_logo { margin-right: 16px; } } #h_xxl_main_g, #h_xxl_main_d { float: none; } #h_xxl_main_d { display: grid; flex-flow: row nowrap; } #darty_footer { position: static; min-width: 740px; max-width: 1280px; margin-left: auto; margin-right: auto; } .seo_links_container, #f_middle_ctn_bot, .payment_options { width: auto; max-width: 980px; } @media (max-width: 1020px) { #headerxxl #darty_header_search input.text { width: calc(100% - 36px); } #f_middle_ctn_bot { display: none; } .seo_links_container .seo_list { width: auto; } } @media (max-width: 768px) { #headerxxl .h_xxl_container, .reinsurances_footer .reinsurance_list_services, .seo_links_container, #f_middle_ctn_bot, .seo_links_container .seo_list, .payment_options, .copyright_alt { width: auto; min-width: unset; } #headerxxl #h_xxl_wishlist_lien, #headerxxl #h_xxl_devis { display: none !important; } #headerxxl #h_xxl_login_lien, #headerxxl #h_xxl_panier_lien { padding-left: 2%; } #headerxxl #h_xxl_login, #headerxxl .h_xxl_panier { width: 50%; } .main-menu .level-1 { flex-wrap: wrap; } .main-menu .level-1 > li > a { font-size: 14px; } /*#main-tab{ flex-basis: 100%; } */ #darty_footer .reinsurances_footer .reinsurance_list_services, #darty_footer .copyright_alt, #darty_footer .payment_options { flex-wrap: wrap; } #darty_footer .seo_links_container { column-count: 2; } #darty_footer #f_middle_ctn_bot { display: none; } } @media (max-width: 480px) { #headerxxl, #darty_footer { min-width: unset; } #darty_footer { border-top: 2px solid #353535; } .price-details.text-legal { display: none; } } /* ## a11y ################ */ /* Improved screen reader only CSS class @author Gaël Poupard */ .sr-only { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; } .sr-only-focusable:focus, .sr-only-focusable:active { clip: auto !important; -webkit-clip-path: none !important; clip-path: none !important; height: auto !important; margin: auto !important; overflow: visible !important; width: auto !important; white-space: normal !important; } /* ## HELPERS ################ */ .pb-radius { border-radius: var(--pb-radius); } .imgFluid { display: block; max-width: 100%; margin: 0 auto; } i.br:after { display: inline-block; content: "\a"; width: 1px; height: 1px; } /* couleurs */ .pb-rouge { color: var(--pb-color-rouge); } .pb-bleu { color: var(--pb-color-bleu); } .pb-vert { color: var(--pb-color-vert); } .pb-color-mp { color: var(--pb-color-marketplace); } /* marges */ .pb-mrg { margin-top: var(--pb-block-spacing); } .pb-mrgXXL { margin-top: var(--pb-section-spacing); } /* content exclusif desk ou mob */ @media (min-width: 481px) { .pb-deskOnly { display: inline-block; } div.pb-deskOnly { display: block; } .pb-mobOnly { display: none; } } @media (max-width: 480px) { .pb-deskOnly { display: none; } .pb-mobOnly { display: inline-block; } div.pb-mobOnly { display: block; } } /* ## Fix logo DCom (header) ################ */ #h_xxl_top #logo img, #h_xxl_logo { width: 55px !important; } /* ## Specifique template contenu "légal" ## */ :root { --pb-legal-font-size-title-xl: 1.6875rem; /* = 27px */ --pb-legal-font-size-title: 1.3125rem; /* = 21px */ --pb-legal-font-size-title-sm: 1.125rem; /* = 18px */ --pb-legal-font-size-text: 1rem; /* = 16px */ --pb-legal-base-spacing: 0.25rem; /* = 4px */ --pb-legal-inner-padding: 2.5rem; /* = 40px */ } .pb--legal { background-color: var(--pb-color-lightgrey); padding: var(--pb-legal-inner-padding); } .pb--legal .pb-limits { max-width: 1200px; } .pb--legal h1 { text-align: center; font-size: var(--pb-legal-font-size-title-xl); line-height: calc(1em + 8px); font-weight: 700; margin: 0 auto calc(var(--pb-legal-base-spacing) * 10) auto; } .pb--legal h2 { font-size: var(--pb-legal-font-size-title); line-height: calc(1em + 6px); font-weight: 700; margin: calc(var(--pb-legal-base-spacing) * 6) auto calc(var(--pb-legal-base-spacing) * 2) auto; } .pb--legal h3 { font-size: var(--pb-legal-font-size-title-sm); margin: calc(var(--pb-legal-base-spacing) * 4) auto calc(var(--pb-legal-base-spacing) * 2) auto; } .pb--legal table { border-collapse: collapse; margin: calc(var(--pb-legal-base-spacing) * 2) 0; } .pb--legal ul, .pb--legal dl { padding: 0; margin: 0; } .pb--legal p, .pb--legal li, .pb--legal dt, .pb--legal dd, .pb--legal th, .pb--legal td { font-size: var(--pb-legal-font-size-text); } .pb--legal p, .pb--legal li, .pb--legal dt, .pb--legal dd { margin: var(--pb-legal-base-spacing) 0 0 0; } .pb--legal li { margin: var(--pb-legal-base-spacing) 0 0 calc(var(--pb-legal-base-spacing) * 6); list-style-type: disc; } .pb--legal th, .pb--legal td { padding: var(--pb-legal-base-spacing); } .pb--legal a, .pb--legal a:hover { color: var(--pb-color-dark); } .pb--legal a { text-decoration: underline; } .pb--legal a:hover { text-decoration: dashed; }