/* Adaptive RGPD Cookie Consent — frontend */ .arcc-root, .arcc-root * { box-sizing: border-box; } .arcc-root { --arcc-primary: #092b3d; --arcc-accent: #b8892f; --arcc-surface: #f7f1e7; --arcc-text: #092b3d; --arcc-radius: 20px; --arcc-navy: var(--arcc-primary); --arcc-cream: #fbf5ea; --arcc-cream-2: #fffaf1; --arcc-muted: rgba(9, 43, 61, .74); --arcc-line: rgba(9, 43, 61, .12); --arcc-gold-soft: rgba(184, 137, 47, .18); --arcc-shadow: 0 24px 70px rgba(0, 0, 0, .22), 0 7px 20px rgba(0, 0, 0, .11); --arcc-soft-shadow: 0 18px 42px rgba(3, 18, 28, .11); --arcc-on-dark: #ffffff; position: relative; z-index: 999998; font-family: inherit; } .arcc-root [hidden] { display: none !important; } /* * Cache-safe : l'interface reste identique dans le HTML mis en cache. * Le petit bootstrap placé dans ajoute cette classe uniquement quand * un choix local encore valide existe déjà. Le JavaScript principal conserve * l'autorité sur l'application réelle du consentement. */ html.arcc-consent-stored .arcc-root #arcc-banner { display: none !important; } /* ========================= Premium banner ========================= */ .arcc-banner { position: fixed; z-index: 999998; width: min(820px, calc(100vw - 44px)); color: var(--arcc-text); font-family: inherit; } .arcc-position-bottom-right .arcc-banner { right: 22px; bottom: 22px; } .arcc-position-bottom-left .arcc-banner { left: 22px; bottom: 22px; } .arcc-position-bottom-center .arcc-banner { left: 50%; bottom: 22px; width: min(1040px, calc(100vw - 48px)); transform: translateX(-50%); } .arcc-position-top-right .arcc-banner { top: 22px; right: 22px; } .arcc-position-top-left .arcc-banner { top: 22px; left: 22px; } .arcc-position-top-center .arcc-banner { left: 50%; top: 22px; width: min(1040px, calc(100vw - 48px)); transform: translateX(-50%); } .arcc-banner__shell { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--arcc-accent) 46%, rgba(9, 43, 61, .24)); border-radius: calc(var(--arcc-radius) + 2px); background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--arcc-accent) 16%, transparent), transparent 32%), linear-gradient(135deg, rgba(255, 255, 255, .97), rgba(251, 245, 234, .97)); box-shadow: var(--arcc-shadow); backdrop-filter: blur(18px) saturate(1.08); -webkit-backdrop-filter: blur(18px) saturate(1.08); } .arcc-banner__shell::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .38; background: repeating-radial-gradient(circle at 96% 8%, transparent 0 15px, color-mix(in srgb, var(--arcc-accent) 12%, transparent) 16px 17px), linear-gradient(90deg, rgba(255,255,255,.64), transparent 48%); } .arcc-banner__hero, .arcc-banner__choices, .arcc-banner__footer { position: relative; z-index: 2; } .arcc-banner__hero { position: relative; display: grid; grid-template-columns: 94px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 24px 18px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--arcc-accent) 22%, transparent), transparent 33%), linear-gradient(135deg, color-mix(in srgb, var(--arcc-primary) 94%, #00111b 6%), color-mix(in srgb, var(--arcc-primary) 82%, #000000 18%)); color: var(--arcc-on-dark); } .arcc-banner__hero::after { content: ""; position: absolute; right: 22px; bottom: 0; width: min(260px, 38%); height: 76%; pointer-events: none; opacity: .24; background-repeat: no-repeat; background-position: right bottom; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg width='420' height='160' viewBox='0 0 420 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23d7ad5d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.82'%3E%3Cpath d='M4 135 72 66l36 41 46-72 78 100'/%3E%3Cpath d='M111 135 176 80l30 35 57-78 108 98'/%3E%3Cpath d='M219 135 288 74l28 32 52-58 48 87'/%3E%3Cpath d='M65 135h344'/%3E%3Cpath d='M28 145h82M139 145h65M244 145h120'/%3E%3C/g%3E%3C/svg%3E"); } .arcc-banner__brand { position: relative; display: flex; align-items: center; justify-content: center; min-width: 82px; min-height: 58px; padding-right: 17px; } .arcc-banner__brand::after { content: ""; position: absolute; top: 8px; right: 0; bottom: 8px; width: 1px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.42), transparent); } .arcc-logo { display: block; width: 76px; max-width: 76px; height: 50px; object-fit: contain; filter: brightness(0) invert(1) drop-shadow(0 8px 15px rgba(0, 0, 0, .20)); } .arcc-logo--fallback { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid color-mix(in srgb, var(--arcc-accent) 62%, transparent); border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--arcc-on-dark); font-weight: 900; font-size: 22px; text-transform: uppercase; } .arcc-banner__content { position: relative; z-index: 2; max-width: 560px; } .arcc-kicker { margin: 0 0 5px; color: color-mix(in srgb, var(--arcc-accent) 90%, #ffffff 10%); font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; } .arcc-title { margin: 0 0 7px; color: var(--arcc-on-dark); font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-size: clamp(28px, 2.25vw, 36px); font-weight: 700; line-height: 1; letter-spacing: -.035em; } .arcc-text { margin: 0; max-width: 660px; color: rgba(255, 255, 255, .88); font-size: 13.5px; line-height: 1.42; } .arcc-hero-link-row { margin: 10px 0 0; } .arcc-hero-privacy-link { display: inline-flex; align-items: center; gap: 6px; color: color-mix(in srgb, var(--arcc-accent) 88%, #ffffff 12%); font-size: 12.4px; font-weight: 800; line-height: 1.3; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .arcc-hero-privacy-link:hover, .arcc-hero-privacy-link:focus-visible { color: #ffffff; } .arcc-text a, .arcc-privacy-link { color: var(--arcc-primary); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .arcc-manage-link { position: relative; z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap; appearance: none; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 9px 13px; background: rgba(255, 255, 255, .10); color: rgba(255, 255, 255, .94); cursor: pointer; font-family: inherit; font-size: 12.4px; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 24px rgba(0,0,0,.12); } .arcc-banner__choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 14px 14px 15px; background: linear-gradient(180deg, rgba(255,250,241,.92), rgba(255,246,232,.86)); } .arcc-position-bottom-left .arcc-banner__choices, .arcc-position-bottom-right .arcc-banner__choices, .arcc-position-top-left .arcc-banner__choices, .arcc-position-top-right .arcc-banner__choices { gap: 10px; padding-left: 14px; padding-right: 14px; } .arcc-mini-choice { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 9px; align-items: start; min-height: 126px; padding: 14px 13px 13px; border: 1px solid rgba(9, 43, 61, .10); border-radius: calc(var(--arcc-radius) * .78); background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,252,245,.70)); box-shadow: 0 15px 32px rgba(3, 18, 28, .055), inset 0 1px 0 rgba(255,255,255,.66); } .arcc-mini-choice::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--arcc-accent) 9%, transparent), transparent 44%); opacity: .80; } .arcc-mini-choice > * { position: relative; z-index: 2; } .arcc-mini-choice__icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid color-mix(in srgb, var(--arcc-accent) 26%, rgba(9,43,61,.10)); border-radius: 999px; background: rgba(255, 250, 241, .78); color: var(--arcc-accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.75); } .arcc-mini-choice__icon svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.7; } .arcc-mini-choice__body { min-width: 0; padding-right: 44px; } .arcc-mini-choice--locked .arcc-mini-choice__body { padding-right: 0; } .arcc-mini-choice strong, .arcc-mini-choice em, .arcc-mini-choice small { display: block; } .arcc-mini-choice strong { margin: 0 0 5px; color: var(--arcc-primary); font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 700; line-height: 1.06; letter-spacing: -.015em; } .arcc-mini-choice em { display: -webkit-box; overflow: hidden; margin: 0 0 8px; color: var(--arcc-muted); font-size: 11.8px; font-style: normal; line-height: 1.32; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .arcc-mini-choice small { position: relative; margin-top: 3px; padding-left: 14px; color: rgba(9, 43, 61, .72); font-size: 10.8px; line-height: 1.22; } .arcc-mini-choice small::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--arcc-accent); font-weight: 900; } .arcc-mini-choice--locked em { display: inline-flex; width: fit-content; margin: 0 0 7px; padding: 4px 8px; border-radius: 999px; background: rgba(54, 126, 82, .13); color: #367e52; font-size: 10.8px; font-weight: 900; line-height: 1; } .arcc-switch { position: absolute; top: 15px; right: 13px; display: block; width: 40px; height: 24px; z-index: 3; } .arcc-switch input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .arcc-switch span { position: absolute; inset: 0; border-radius: 999px; background: rgba(9, 43, 61, .24); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .16); transition: background .18s ease, box-shadow .18s ease; } .arcc-switch span::after { content: ""; position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 999px; background: #ffffff; box-shadow: 0 4px 9px rgba(0, 0, 0, .24); transition: transform .18s ease; } .arcc-switch input:checked + span { background: var(--arcc-accent); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12), 0 8px 18px color-mix(in srgb, var(--arcc-accent) 24%, transparent); } .arcc-switch input:checked + span::after { transform: translateX(16px); } .arcc-banner__footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 18px 16px; border-top: 1px solid rgba(9, 43, 61, .10); background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,250,241,.82)); } .arcc-banner__meta { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; color: rgba(9, 43, 61, .78); font-size: 12.2px; line-height: 1.36; } .arcc-banner__meta-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid color-mix(in srgb, var(--arcc-accent) 34%, rgba(9,43,61,.08)); border-radius: 999px; color: var(--arcc-accent); font-family: Georgia, "Times New Roman", serif; font-size: 17px; font-weight: 700; } .arcc-privacy-link { display: inline-flex; align-items: center; white-space: nowrap; color: var(--arcc-primary); font-size: 12.4px; font-weight: 800; } .arcc-banner__actions { display: flex; flex-wrap: nowrap; gap: 9px; justify-content: flex-end; align-items: center; } .arcc-btn, .arcc-inline-settings, .arcc-floating, .arcc-embed__placeholder button { appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; border: 1px solid transparent; border-radius: calc(var(--arcc-radius) * .52); padding: 11px 17px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 900; line-height: 1; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease; } .arcc-btn:hover, .arcc-inline-settings:hover, .arcc-floating:hover, .arcc-embed__placeholder button:hover, .arcc-manage-link:hover { transform: translateY(-1px); } .arcc-btn:focus-visible, .arcc-inline-settings:focus-visible, .arcc-floating:focus-visible, .arcc-modal__close:focus-visible, .arcc-embed__placeholder button:focus-visible, .arcc-manage-link:focus-visible, .arcc-switch input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--arcc-accent) 38%, transparent); outline-offset: 3px; } .arcc-btn--primary, .arcc-embed__placeholder button { border-color: color-mix(in srgb, var(--arcc-accent) 70%, rgba(9,43,61,.10)); background: linear-gradient(180deg, color-mix(in srgb, var(--arcc-accent) 92%, #ffffff 8%), color-mix(in srgb, var(--arcc-accent) 82%, #5b3912 18%)); color: #ffffff; box-shadow: 0 15px 28px color-mix(in srgb, var(--arcc-accent) 26%, transparent); } .arcc-btn--secondary { border-color: rgba(9, 43, 61, .22); background: rgba(255, 255, 255, .70); color: var(--arcc-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 12px 24px rgba(3, 18, 28, .06); } .arcc-btn--ghost, .arcc-inline-settings { border-color: rgba(9, 43, 61, .18); background: rgba(255, 255, 255, .54); color: var(--arcc-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .70); } /* ========================= Preferences modal ========================= */ .arcc-modal { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; padding: 24px; background: rgba(3, 28, 40, .62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .arcc-modal__panel { position: relative; width: min(820px, 100%); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid color-mix(in srgb, var(--arcc-accent) 34%, rgba(9,43,61,.18)); border-radius: calc(var(--arcc-radius) + 6px); background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--arcc-accent) 13%, transparent), transparent 36%), linear-gradient(135deg, var(--arcc-cream-2), var(--arcc-cream)); color: var(--arcc-text); box-shadow: var(--arcc-shadow); } .arcc-modal__close { position: absolute; top: 18px; right: 18px; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid color-mix(in srgb, var(--arcc-accent) 72%, rgba(9, 43, 61, .14)); border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--arcc-accent) 92%, #ffffff 8%), color-mix(in srgb, var(--arcc-accent) 82%, #5b3912 18%)); color: #ffffff; cursor: pointer; font-size: 0; line-height: 0; box-shadow: 0 12px 24px color-mix(in srgb, var(--arcc-accent) 24%, transparent); } .arcc-modal__close-icon { display: block; font-size: 24px; font-weight: 400; line-height: 1; transform: translateY(-1px); } .arcc-modal__header { padding: 32px 34px 24px; border-bottom: 1px solid rgba(9, 43, 61, .10); } .arcc-modal__header .arcc-title { color: var(--arcc-primary); } .arcc-modal__header .arcc-text { color: var(--arcc-muted); } .arcc-modal__logo { display: block; width: 86px; max-height: 58px; object-fit: contain; margin: 0 0 16px; } .arcc-modal__body { display: grid; gap: 14px; padding: 24px 34px 12px; } .arcc-choice { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 17px; border: 1px solid rgba(9, 43, 61, .12); border-radius: calc(var(--arcc-radius) * .82); background: rgba(255,255,255,.58); } .arcc-choice input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--arcc-accent); } .arcc-choice strong, .arcc-choice em { display: block; } .arcc-choice strong { margin: 0 0 4px; color: var(--arcc-primary); font-size: 15px; font-style: normal; } .arcc-choice em { color: var(--arcc-muted); font-size: 13px; font-style: normal; line-height: 1.45; } .arcc-choice--locked { opacity: .86; } .arcc-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding: 24px 34px 34px; border-top: 1px solid rgba(9, 43, 61, .10); } /* ========================= Floating button, shortcodes, embeds ========================= */ .arcc-floating { position: fixed; left: 18px; bottom: 18px; z-index: 999997; min-height: 38px; padding: 10px 14px; border-color: color-mix(in srgb, var(--arcc-accent) 44%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--arcc-primary) 92%, #000000 8%); color: #ffffff; box-shadow: 0 14px 32px rgba(0, 0, 0, .22); font-size: 12px; letter-spacing: .04em; } .arcc-inline-settings { display: inline-flex; } .arcc-policy-summary { padding: 1.5rem; border: 1px solid var(--arcc-line); border-radius: var(--arcc-radius); background: rgba(251, 245, 234, .76); } .arcc-embed { position: relative; display: block; width: 100%; min-height: 260px; border: 1px solid var(--arcc-line); border-radius: var(--arcc-radius); overflow: hidden; background: rgba(251, 245, 234, .82); } .arcc-embed iframe { display: block; width: 100%; min-height: 260px; border: 0; } .arcc-embed:not(.arcc-embed--allowed) iframe { display: none; } .arcc-embed__placeholder { display: grid; place-items: center; gap: 10px; min-height: 260px; padding: 28px; text-align: center; color: var(--arcc-text); } .arcc-embed__placeholder strong { color: var(--arcc-primary); font-size: 17px; } .arcc-embed__placeholder span { color: var(--arcc-muted); font-size: 13px; } .arcc-embed--allowed .arcc-embed__placeholder { display: none; } body.arcc-mode-dark .arcc-root, body.arcc-mode-auto.arcc-auto-dark .arcc-root { --arcc-cream: #f8efe0; --arcc-cream-2: #fff8ec; --arcc-muted: rgba(9, 43, 61, .78); } /* ========================= Responsive ========================= */ @media screen and (max-width: 1200px) { .arcc-banner__choices, .arcc-position-bottom-center .arcc-banner__choices, .arcc-position-bottom-left .arcc-banner__choices, .arcc-position-bottom-right .arcc-banner__choices, .arcc-position-top-left .arcc-banner__choices, .arcc-position-top-right .arcc-banner__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } .arcc-mini-choice { min-height: 138px; } .arcc-banner__footer { grid-template-columns: minmax(0, 1fr); } .arcc-privacy-link, .arcc-banner__actions { justify-content: flex-start; } } @media screen and (max-width: 781px) { .arcc-banner, .arcc-position-bottom-right .arcc-banner, .arcc-position-bottom-left .arcc-banner, .arcc-position-bottom-center .arcc-banner, .arcc-position-top-right .arcc-banner, .arcc-position-top-left .arcc-banner, .arcc-position-top-center .arcc-banner { left: 14px !important; right: 14px !important; width: auto !important; max-width: none !important; transform: none !important; } .arcc-position-bottom-right .arcc-banner, .arcc-position-bottom-left .arcc-banner, .arcc-position-bottom-center .arcc-banner { top: auto !important; bottom: 14px !important; } .arcc-position-top-right .arcc-banner, .arcc-position-top-left .arcc-banner, .arcc-position-top-center .arcc-banner { top: 14px !important; bottom: auto !important; } .arcc-banner__shell { max-height: calc(100vh - 28px); overflow-y: auto; border-radius: 20px; } .arcc-banner__hero { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 22px 18px 18px; } .arcc-banner__hero::after { width: 68%; opacity: .18; } .arcc-banner__brand { min-width: 62px; min-height: 56px; padding-right: 12px; } .arcc-logo { width: 58px; max-width: 58px; height: 44px; } .arcc-manage-link { grid-column: 1 / -1; width: 100%; margin-top: 2px; } .arcc-title { font-size: 30px; } .arcc-text { font-size: 13px; } .arcc-banner__choices, .arcc-position-bottom-center .arcc-banner__choices, .arcc-position-bottom-left .arcc-banner__choices, .arcc-position-bottom-right .arcc-banner__choices, .arcc-position-top-left .arcc-banner__choices, .arcc-position-top-right .arcc-banner__choices { grid-template-columns: 1fr; gap: 10px; padding: 16px 14px 16px; } .arcc-mini-choice { min-height: auto; padding: 15px 14px; } .arcc-mini-choice__body { padding-right: 54px; } .arcc-banner__footer { grid-template-columns: 1fr; gap: 14px; padding: 16px 16px 20px; } .arcc-banner__actions, .arcc-modal__actions { display: grid; grid-template-columns: 1fr; width: 100%; } .arcc-btn, .arcc-inline-settings { width: 100%; } .arcc-modal { padding: 14px; } .arcc-modal__header, .arcc-modal__body, .arcc-modal__actions { padding-left: 18px; padding-right: 18px; } .arcc-choice { grid-template-columns: 34px minmax(0, 1fr); padding: 14px; } } /* ========================= ARCC v1.0.3 compact behavior ========================= */ .arcc-floating { left: auto; right: 18px; bottom: 18px; min-height: 38px; padding: 10px 15px; border-color: color-mix(in srgb, var(--arcc-accent) 38%, rgba(255,255,255,.16)); background: color-mix(in srgb, var(--arcc-primary) 90%, #000000 10%); color: #ffffff; box-shadow: 0 14px 34px rgba(0,0,0,.24); } .arcc-position-bottom-left .arcc-floating, .arcc-position-top-left .arcc-floating { left: 18px; right: auto; } .arcc-position-bottom-center .arcc-floating, .arcc-position-top-center .arcc-floating { left: 50%; right: auto; transform: translateX(-50%); } .arcc-position-bottom-center .arcc-floating:hover, .arcc-position-top-center .arcc-floating:hover { transform: translateX(-50%) translateY(-1px); } @media screen and (max-width: 781px) { .arcc-floating, .arcc-position-bottom-left .arcc-floating, .arcc-position-top-left .arcc-floating, .arcc-position-bottom-center .arcc-floating, .arcc-position-top-center .arcc-floating { left: auto; right: 14px; bottom: 14px; transform: none; max-width: calc(100vw - 28px); } } /* ========================= ARCC v1.0.4 — real repositioning + discreet tab ========================= */ .arcc-root #arcc-banner.arcc-banner { width: min(780px, calc(100vw - 36px)); } .arcc-root.arcc-position-bottom-right #arcc-banner.arcc-banner { top: auto !important; right: 18px !important; bottom: 18px !important; left: auto !important; transform: none !important; } .arcc-root.arcc-position-bottom-left #arcc-banner.arcc-banner { top: auto !important; right: auto !important; bottom: 18px !important; left: 18px !important; transform: none !important; } .arcc-root.arcc-position-bottom-center #arcc-banner.arcc-banner { top: auto !important; right: auto !important; bottom: 18px !important; left: 50% !important; width: min(920px, calc(100vw - 44px)); transform: translateX(-50%) !important; } .arcc-root.arcc-position-top-right #arcc-banner.arcc-banner { top: 18px !important; right: 18px !important; bottom: auto !important; left: auto !important; transform: none !important; } .arcc-root.arcc-position-top-left #arcc-banner.arcc-banner { top: 18px !important; right: auto !important; bottom: auto !important; left: 18px !important; transform: none !important; } .arcc-root.arcc-position-top-center #arcc-banner.arcc-banner { top: 18px !important; right: auto !important; bottom: auto !important; left: 50% !important; width: min(920px, calc(100vw - 44px)); transform: translateX(-50%) !important; } .arcc-root #arcc-banner .arcc-banner__hero { grid-template-columns: 84px minmax(0, 1fr) auto; gap: 15px; padding: 16px 20px 15px; } .arcc-root #arcc-banner .arcc-banner__brand { min-width: 72px; min-height: 50px; padding-right: 14px; } .arcc-root #arcc-banner .arcc-logo { width: 66px; max-width: 66px; height: 44px; } .arcc-root #arcc-banner .arcc-title { margin-bottom: 5px; font-size: clamp(25px, 2vw, 32px); } .arcc-root #arcc-banner .arcc-text { font-size: 12.8px; line-height: 1.38; } .arcc-root #arcc-banner .arcc-manage-link { padding: 8px 12px; font-size: 11.7px; } .arcc-root #arcc-banner .arcc-banner__choices, .arcc-root.arcc-position-bottom-center #arcc-banner .arcc-banner__choices, .arcc-root.arcc-position-top-center #arcc-banner .arcc-banner__choices { gap: 8px; padding: 11px 12px 12px; } .arcc-root #arcc-banner .arcc-mini-choice { min-height: 108px; padding: 12px 11px 11px; gap: 8px; } .arcc-root #arcc-banner .arcc-mini-choice__icon { width: 36px; height: 36px; } .arcc-root #arcc-banner .arcc-mini-choice__icon svg { width: 20px; height: 20px; } .arcc-root #arcc-banner .arcc-mini-choice strong { font-size: 16px; } .arcc-root #arcc-banner .arcc-mini-choice em { margin-bottom: 6px; font-size: 11.2px; line-height: 1.26; } .arcc-root #arcc-banner .arcc-mini-choice small { margin-top: 2px; font-size: 10.2px; } .arcc-root #arcc-banner .arcc-switch { top: 12px; right: 11px; width: 37px; height: 22px; } .arcc-root #arcc-banner .arcc-switch span::after { top: 4px; left: 4px; width: 14px; height: 14px; } .arcc-root #arcc-banner .arcc-switch input:checked + span::after { transform: translateX(15px); } .arcc-root #arcc-banner .arcc-banner__footer { gap: 12px; padding: 11px 15px 13px; } .arcc-root #arcc-banner .arcc-btn { min-height: 37px; padding: 10px 15px; font-size: 12.5px; } .arcc-consent-tab { appearance: none; position: fixed; z-index: 999997; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 0; height: 31px; max-width: calc(100vw - 28px); padding: 7px 13px 8px; border: 1px solid color-mix(in srgb, var(--arcc-accent) 38%, rgba(255,255,255,.18)); border-bottom: 0; border-radius: 11px 11px 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--arcc-primary) 94%, #000000 6%), color-mix(in srgb, var(--arcc-primary) 82%, #000000 18%)); color: #ffffff; cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 850; line-height: 1; letter-spacing: .02em; box-shadow: 0 -5px 18px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.08); opacity: .94; transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease; } .arcc-consent-tab[hidden] { display: none !important; } .arcc-consent-tab:hover, .arcc-consent-tab:focus-visible { opacity: 1; box-shadow: 0 -8px 24px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.10); } .arcc-consent-tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--arcc-accent) 38%, transparent); outline-offset: 2px; } .arcc-consent-tab__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--arcc-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--arcc-accent) 18%, transparent); } .arcc-tab-position-bottom-right .arcc-consent-tab { right: 22px; bottom: 0; left: auto; transform: translateY(2px); } .arcc-tab-position-bottom-left .arcc-consent-tab { right: auto; bottom: 0; left: 22px; transform: translateY(2px); } .arcc-tab-position-bottom-center .arcc-consent-tab { right: auto; bottom: 0; left: 50%; transform: translateX(-50%) translateY(2px); } .arcc-tab-position-bottom-right .arcc-consent-tab:hover, .arcc-tab-position-bottom-left .arcc-consent-tab:hover, .arcc-tab-position-bottom-right .arcc-consent-tab:focus-visible, .arcc-tab-position-bottom-left .arcc-consent-tab:focus-visible { transform: translateY(0); } .arcc-tab-position-bottom-center .arcc-consent-tab:hover, .arcc-tab-position-bottom-center .arcc-consent-tab:focus-visible { transform: translateX(-50%) translateY(0); } @media screen and (max-width: 1200px) { .arcc-root #arcc-banner .arcc-banner__choices, .arcc-root.arcc-position-bottom-center #arcc-banner .arcc-banner__choices, .arcc-root.arcc-position-top-center #arcc-banner .arcc-banner__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 781px) { .arcc-root.arcc-position-bottom-right #arcc-banner.arcc-banner, .arcc-root.arcc-position-bottom-left #arcc-banner.arcc-banner, .arcc-root.arcc-position-bottom-center #arcc-banner.arcc-banner, .arcc-root.arcc-position-top-right #arcc-banner.arcc-banner, .arcc-root.arcc-position-top-left #arcc-banner.arcc-banner, .arcc-root.arcc-position-top-center #arcc-banner.arcc-banner { right: 12px !important; left: 12px !important; width: auto !important; max-width: none !important; transform: none !important; } .arcc-root.arcc-position-bottom-right #arcc-banner.arcc-banner, .arcc-root.arcc-position-bottom-left #arcc-banner.arcc-banner, .arcc-root.arcc-position-bottom-center #arcc-banner.arcc-banner { top: auto !important; bottom: 12px !important; } .arcc-root.arcc-position-top-right #arcc-banner.arcc-banner, .arcc-root.arcc-position-top-left #arcc-banner.arcc-banner, .arcc-root.arcc-position-top-center #arcc-banner.arcc-banner { top: 12px !important; bottom: auto !important; } .arcc-root #arcc-banner .arcc-banner__shell { max-height: calc(100vh - 24px); } .arcc-root #arcc-banner .arcc-banner__hero { grid-template-columns: 58px minmax(0, 1fr); padding: 18px 16px 15px; } .arcc-root #arcc-banner .arcc-manage-link { grid-column: 1 / -1; width: 100%; } .arcc-root #arcc-banner .arcc-banner__choices, .arcc-root.arcc-position-bottom-center #arcc-banner .arcc-banner__choices, .arcc-root.arcc-position-top-center #arcc-banner .arcc-banner__choices { grid-template-columns: 1fr; } .arcc-tab-position-bottom-right .arcc-consent-tab, .arcc-tab-position-bottom-left .arcc-consent-tab, .arcc-tab-position-bottom-center .arcc-consent-tab { right: 12px; bottom: 0; left: auto; transform: translateY(2px); } .arcc-tab-position-bottom-right .arcc-consent-tab:hover, .arcc-tab-position-bottom-left .arcc-consent-tab:hover, .arcc-tab-position-bottom-center .arcc-consent-tab:hover, .arcc-tab-position-bottom-right .arcc-consent-tab:focus-visible, .arcc-tab-position-bottom-left .arcc-consent-tab:focus-visible, .arcc-tab-position-bottom-center .arcc-consent-tab:focus-visible { transform: translateY(0); } } @media screen and (max-width: 781px) { .arcc-hero-privacy-link { font-size: 12px; } } /* ========================= ARCC v1.0.11 — mobile consent viewport safety Keeps consent actions reachable without forcing the visitor to scroll through the entire banner or preferences panel first. ========================= */ @media screen and (max-width: 781px) { /* Main consent banner: fixed header/footer, scrollable category area. */ .arcc-root #arcc-banner .arcc-banner__shell { display: flex; flex-direction: column; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow: hidden; } .arcc-root #arcc-banner .arcc-banner__hero, .arcc-root #arcc-banner .arcc-banner__footer { flex: 0 0 auto; } .arcc-root #arcc-banner .arcc-banner__choices, .arcc-root.arcc-position-bottom-center #arcc-banner .arcc-banner__choices, .arcc-root.arcc-position-top-center #arcc-banner .arcc-banner__choices { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .arcc-root #arcc-banner .arcc-banner__footer { position: relative; z-index: 4; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,250,241,.99)); box-shadow: 0 -10px 24px rgba(3, 18, 28, .07); } /* Preferences panel: only the category list scrolls; actions remain visible. */ .arcc-modal__panel { display: flex; flex-direction: column; max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px); overflow: hidden; } .arcc-modal__header, .arcc-modal__actions { flex: 0 0 auto; } .arcc-modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .arcc-modal__actions { position: relative; z-index: 3; background: linear-gradient(180deg, rgba(255,250,241,.97), var(--arcc-cream)); box-shadow: 0 -10px 24px rgba(3, 18, 28, .07); } }