@charset "UTF-8"; :root { --cs-primary-color: var(); } /* Distance par rapport à la gauche de la fenêtre */ /* Distance par rapport à la droite de la fenêtre */ /* Distance par rapport au bas de la fenêtre */ /* Position gauche de base des cookies */ /* Position droite de base des cookies */ #cn-wrapper { /* Buttons styles start */ /* Button styles end */ } #cn-wrapper * { box-sizing: border-box; } #cn-wrapper *::before { display: none; } #cn-wrapper button { display: inline-block; padding: 0.2rem 0.5rem; border: 0; margin: 0; appearance: none; background: #b9b9b9; color: #000; cursor: pointer; font-family: "Barlow", sans-serif; font-size: 1rem; line-height: 1; text-align: center; text-decoration: none; transition: background 250ms ease-in-out, transform 150ms ease; } #cn-wrapper button:hover, #cn-wrapper button:focus { background: #a0a0a0; /* prettier-ignore */ color: #000; } #cn-wrapper button:focus { outline: 1px solid; /* prettier-ignore */ outline-color: #000; outline-offset: -4px; } #cn-wrapper button:active { transform: scale(0.99); } /** 4.1.1 */ /* FENETRE D'ACCUEIL */ /* Title settings */ /* Text settings */ /* Button settings */ /* Title settings */ /* Text settings */ /* Accept/Deny btn settings */ /* Cookies list settings */ #cn-wrapper .cn-nav #cn-settings-banner, #cn-wrapper .cn-nav #cn-accept-banner, #cn-wrapper .cn-nav #cn-deny-banner, #cn-wrapper .cn-content .cn-modal-container .accept label, #cn-wrapper .cn-content .cn-modal-container .deny label, #cn-wrapper #cn-banner .cn-modal-top-line #cn-close-modal { display: flex; height: 3rem; flex-direction: column; align-items: center; justify-content: center; padding: 0; background-color: #b9b9b9; color: #000; font-family: "Barlow", sans-serif; font-size: 16px; } #cn-wrapper .cn-nav #cn-settings-banner:hover, #cn-wrapper .cn-nav #cn-accept-banner:hover, #cn-wrapper .cn-nav #cn-deny-banner:hover, #cn-wrapper .cn-content .cn-modal-container .accept label:hover, #cn-wrapper .cn-content .cn-modal-container .deny label:hover, #cn-wrapper #cn-banner .cn-modal-top-line #cn-close-modal:hover, #cn-wrapper .cn-nav #cn-settings-banner:focus, #cn-wrapper .cn-nav #cn-accept-banner:focus, #cn-wrapper .cn-nav #cn-deny-banner:focus, #cn-wrapper .cn-content .cn-modal-container .accept label:focus, #cn-wrapper .cn-content .cn-modal-container .deny label:focus, #cn-wrapper #cn-banner .cn-modal-top-line #cn-close-modal:focus { background-color: #a0a0a0; /* prettier-ignore */ color: #000; } #cn-wrapper .cn-nav #cn-settings-banner:focus, #cn-wrapper .cn-nav #cn-accept-banner:focus, #cn-wrapper .cn-nav #cn-deny-banner:focus, #cn-wrapper .cn-content .cn-modal-container .accept label:focus, #cn-wrapper .cn-content .cn-modal-container .deny label:focus, #cn-wrapper #cn-banner .cn-modal-top-line #cn-close-modal:focus { /* prettier-ignore */ outline-color: #000; } .cn-modal-bg { position: fixed; z-index: 1030; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.6); cursor: pointer; opacity: 0; transition: 0.3s; visibility: hidden; } .cn-modal-bg-active { cursor: default; } .cn-open .cn-modal-bg { opacity: 1; visibility: visible; } .cn-disabled { pointer-events: none; } #cn-wrapper { z-index: 1050; } #cn-wrapper #cn-cookie-btn { position: fixed; right: auto; bottom: 0.5rem; left: 0.5rem; width: 2.4rem; height: 2.4rem; padding: 0.3rem; border-radius: 100%; background-color: #fff; box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.35); cursor: pointer; } @media (min-width: 535px) { #cn-wrapper #cn-cookie-btn { right: auto; bottom: -1.5rem; left: -1.5rem; width: 3rem; height: 3rem; padding: 0.5rem; transition: all 1s 6s; } #cn-wrapper #cn-cookie-btn:hover, #cn-wrapper #cn-cookie-btn:focus { right: auto; bottom: 0.5rem; left: 0.5rem; transition: all 1s; } } #cn-wrapper #cn-cookie-btn:focus { outline-color: #d1842a; outline-offset: 0.1rem; outline-width: 0.2rem; } #cn-wrapper #cn-cookie-btn-icon path { fill: #dc9c52; } #cn-wrapper #cn-cookie-btn-icon circle { fill: #dc9c52; } #cn-wrapper #cn-banner { position: fixed; z-index: 1050; top: 0; bottom: 0; left: 0; display: flex; width: 100vw; height: fit-content; max-height: 100vh; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0; border-radius: 0; margin: auto; margin-bottom: 0; background-color: #fff; box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.35); line-height: initial; opacity: 0; pointer-events: none; transition: 0.3s; user-select: none; visibility: hidden; } #cn-wrapper #cn-banner .cn-modal-top-line { align-self: end; } #cn-wrapper #cn-banner .cn-modal-top-line #cn-close-modal { width: 4rem; height: 3rem; border-bottom-left-radius: 0.5rem; } @media (min-width: 535px) { #cn-wrapper #cn-banner .cn-modal-top-line #cn-close-modal { border-top-right-radius: 0.5rem; } } #cn-wrapper #cn-banner p:not(.cn-modal-title) { font-size: 16px; } #cn-wrapper #cn-banner > * { pointer-events: all; } @media (min-width: 535px) { #cn-wrapper #cn-banner { right: auto; bottom: calc(0.5rem + 60px); left: 0; width: 30rem; height: fit-content; max-height: 38rem; border-radius: 0.5rem; } } #cn-wrapper #cn-li-template { display: none; } #cn-wrapper .d-none { display: none !important; } #cn-wrapper .cn-content { flex-grow: 1; padding: 0.8rem; overflow-y: auto; } #cn-wrapper .cn-content .cn-banner-content { display: flex; min-height: 100%; flex-direction: column; color: #b9b9b9; font-family: "Barlow", sans-serif; font-size: 16px; } @media (min-width: 535px) { #cn-wrapper .cn-content .cn-banner-content { flex-flow: row wrap; align-items: center; } #cn-wrapper .cn-content .cn-banner-content .cn-banner-img { width: 33%; } #cn-wrapper .cn-content .cn-banner-content .cn-banner-text { width: 66%; } } #cn-wrapper .cn-content .cn-banner-content .cn-banner-img { text-align: center; } #cn-wrapper .cn-content .cn-banner-content .cn-banner-img img { width: 90%; object-fit: contain; } #cn-wrapper .cn-content .cn-banner-content .cn-banner-text .cn-banner-title { color: #dc9c52; font-family: "Satisfy", sans-serif; font-size: 28px; font-weight: bold; line-height: inherit; text-align: left; } #cn-wrapper .cn-content .cn-banner-content .cn-banner-text .cn-banner-para-p { margin: 6px 0; text-align: justify; } #cn-wrapper .cn-content .cn-modal-container .cn-modal-title { color: #dc9c52; font-family: "Satisfy", sans-serif; font-size: 28px; font-weight: bold; text-align: center; } #cn-wrapper .cn-content .cn-modal-container .cn-modal-subtitle { margin-bottom: 6px; color: #b9b9b9; color: #dc9c52; font-family: "Barlow", sans-serif; font-size: 16px; text-align: center; } #cn-wrapper .cn-content .cn-modal-container .cn-modal-description { display: flex; flex-direction: column; align-items: center; color: #b9b9b9; font-family: "Barlow", sans-serif; font-size: 16px; font-weight: normal; line-height: initial; } #cn-wrapper .cn-content .cn-modal-container .cn-modal-wrapper { position: relative; display: flex; overflow: auto; flex-direction: column; align-items: center; } #cn-wrapper .cn-content .cn-modal-container .cn-modal-wrapper ul { display: flex; flex-direction: column; padding: 0; margin: 0; list-style: none; } #cn-wrapper .cn-content .cn-modal-container .cn-modal-wrapper .cn-cookie-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px; border: 1px solid #e4e4e4; border-radius: 20px; margin: 10px 0; } #cn-wrapper .cn-content .cn-modal-container .cn-modal-wrapper span { color: #dc9c52; font-family: "Barlow", sans-serif; font-size: 16px; } #cn-wrapper .cn-content .cn-modal-container .cn-modal-wrapper a { font-family: "Barlow", sans-serif; font-size: 16px; } #cn-wrapper .cn-content .cn-modal-container .cn-modal-wrapper label { color: #dc9c52; font-family: "Barlow", sans-serif; font-size: 16px; } #cn-wrapper .cn-content .cn-modal-container .cn-cookie-name { color: #dc9c52; } #cn-wrapper .cn-content .cn-modal-container .cn-cookie-infos { display: flex; width: 100%; flex: 1; flex-direction: column; } #cn-wrapper .cn-content .cn-modal-container .cn-cookie-infos span:first-of-type { font-size: calc(16px * 1.25); font-weight: bold; } #cn-wrapper .cn-content .cn-modal-container .cn-cookie-infos .cn-cookie-description { color: #b9b9b9; } #cn-wrapper .cn-content .cn-modal-container .cn-cookie-infos a { width: fit-content; } #cn-wrapper .cn-content .cn-modal-container .cn-cookie-buttons { display: flex; width: 200px; justify-content: space-around; margin-top: 6px; } #cn-wrapper .cn-content .cn-modal-container .cn-cookie-buttons input { display: none; } #cn-wrapper .cn-content .cn-modal-container .cn-cookie-buttons label { display: block; width: fit-content; padding: 6px 20px; color: #fff; cursor: pointer; transition: 0.3s; } #cn-wrapper .cn-content .cn-modal-container .cn-cookie-buttons div { display: table; margin: 0 0.5em; text-align: center; } #cn-wrapper .cn-content .cn-modal-container .accept label, #cn-wrapper .cn-content .cn-modal-container .deny label { height: inherit; background: #6d6d6d; } #cn-wrapper .cn-content .cn-modal-container .accept label:hover, #cn-wrapper .cn-content .cn-modal-container .accept label:focus { background-color: #175917; } #cn-wrapper .cn-content .cn-modal-container .accept .active { background-color: #218221; } #cn-wrapper .cn-content .cn-modal-container .deny label:hover, #cn-wrapper .cn-content .cn-modal-container .deny label:focus { background-color: #712121; } #cn-wrapper .cn-content .cn-modal-container .deny .active { background-color: #992c2c; } #cn-wrapper .cn-content .cn-modal-container .accept input:checked ~ label { background-color: #218221; } #cn-wrapper .cn-content .cn-modal-container .deny input:checked ~ label { background-color: #992c2c; } #cn-wrapper .cn-nav { display: flex; overflow: hidden; width: 100%; height: 6rem; flex-shrink: 0; flex-wrap: wrap; align-items: center; border-top: 1px solid #6d6d6d; } #cn-wrapper .cn-nav #cn-deny-banner { width: 50%; } #cn-wrapper .cn-nav #cn-accept-banner { width: 50%; border-right: 1px solid #6d6d6d; border-left: 1px solid #6d6d6d; } #cn-wrapper .cn-nav #cn-settings-banner { width: 100%; border-top: 1px solid #6d6d6d; } @media (min-width: 535px) { #cn-wrapper .cn-nav { height: 3rem; flex-wrap: initial; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } #cn-wrapper .cn-nav #cn-deny-banner { width: 33.33%; } #cn-wrapper .cn-nav #cn-accept-banner { width: 33.33%; } #cn-wrapper .cn-nav #cn-settings-banner { width: 33.33%; border-top: initial; } } @media (min-width: 535px) { #cn-wrapper { width: 100%; height: 100%; } } .cn-open { overflow: hidden !important; } .cn-open #cn-wrapper #cn-banner { opacity: 1; visibility: visible; } @media (min-width: 535px) { .cn-open #cn-wrapper #cn-banner { right: auto; left: 0.5rem; } } @media (min-width: 535px) { .cn-open #cn-wrapper #cn-cookie-btn { right: auto; bottom: 0.5rem; left: 0.5rem; transition: all 1s; } }