/* Umediad — page officielle des forfaits (/subscription-packages) * L ancienne presentation est retiree de la page des que porte * data-um-forfaits. Le bouton de langue de l application est un frere direct * de la zone remplacee : il est explicitement preserve. */ html[data-um-forfaits] main > *:not(#umediad-forfaits):not([class*="Translator_LanguageButton"]) { display: none !important; } html[data-um-forfaits] main { min-height: 0 !important; padding: 0 !important; margin: 0 !important; } #umediad-forfaits { --uf-fg:#12141a; --uf-mut:#5b6472; --uf-bd:#e4e7ec; --uf-bg:#fff; --uf-acc:#4c3fd6; --uf-acc-fg:#fff; --uf-soft:#f6f7fa; --uf-tag:#eef0fb; color: var(--uf-fg); background: var(--uf-bg); } #umediad-forfaits *, #umediad-forfaits *::before, #umediad-forfaits *::after { box-sizing: border-box; } .uf-wrap { max-width: 1180px; margin: 0 auto; padding: 28px 20px 64px; font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } #umediad-forfaits[dir="rtl"] .uf-wrap { direction: rtl; text-align: right; } .uf-hero { padding: 8px 0 20px; } .uf-h1 { margin: 0 0 8px; font-size: clamp(26px, 4vw, 38px); line-height: 1.2; font-weight: 700; } .uf-lead { margin: 0; max-width: 62ch; color: var(--uf-mut); } .uf-sec { margin-top: 34px; } .uf-h2 { margin: 0 0 16px; font-size: clamp(19px, 2.4vw, 24px); font-weight: 650; } /* --- avantages : cartes de hauteur egale, 1 / 2 / 4 colonnes ------------- */ .uf-grid-av { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 620px) { .uf-grid-av { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .uf-grid-av { grid-template-columns: repeat(3, 1fr); } } .uf-av-c { display: flex; flex-direction: column; height: 100%; padding: 16px; border: 1px solid var(--uf-bd); border-radius: 12px; background: var(--uf-soft); } .uf-av-t { margin: 0 0 6px; font-weight: 650; font-size: 15px; } .uf-av-d { margin: 0; color: var(--uf-mut); font-size: 14px; } /* --- forfaits ------------------------------------------------------------ */ .uf-grid4 { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 620px) { .uf-grid4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .uf-grid4 { grid-template-columns: repeat(4, 1fr); } } .uf-plan { position: relative; display: flex; flex-direction: column; height: 100%; padding: 20px 18px; border: 1px solid var(--uf-bd); border-radius: 14px; background: #fff; } .uf-plan-n { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--uf-mut); } .uf-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } #umediad-forfaits[dir="rtl"] .uf-price { flex-direction: row-reverse; justify-content: flex-end; } .uf-amt { font-size: clamp(28px, 3.4vw, 34px); font-weight: 700; letter-spacing: -.02em; } .uf-per { font-size: 14px; color: var(--uf-mut); } .uf-was { margin: 6px 0 0; font-size: 13px; color: var(--uf-mut); text-decoration: line-through; } .uf-tag { display: inline-block; margin-top: 8px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--uf-tag); color: #2f2a86; } .uf-tag-l { background: #e7f6ec; color: #1d6b3a; } .uf-feat { margin: 14px 0 18px; padding: 0; list-style: none; flex: 1 1 auto; } .uf-feat li { position: relative; padding: 5px 0 5px 20px; font-size: 14px; border-top: 1px solid var(--uf-bd); } #umediad-forfaits[dir="rtl"] .uf-feat li { padding: 5px 20px 5px 0; } .uf-feat li:first-child { border-top: 0; } .uf-feat li::before { content: "•"; position: absolute; left: 4px; color: var(--uf-acc); font-weight: 700; } #umediad-forfaits[dir="rtl"] .uf-feat li::before { left: auto; right: 4px; } .uf-btn { display: inline-block; width: 100%; padding: 11px 16px; border: 0; border-radius: 10px; background: var(--uf-acc); color: var(--uf-acc-fg); font: inherit; font-weight: 650; cursor: pointer; text-align: center; } .uf-btn:hover { filter: brightness(1.08); } .uf-btn:focus-visible { outline: 3px solid #b9b2f5; outline-offset: 2px; } /* --- aide sur le quota d annonces --------------------------------------- */ .uf-aide { width: 18px; height: 18px; margin-inline-start: 4px; padding: 0; border: 1px solid var(--uf-bd); border-radius: 50%; background: #fff; color: var(--uf-mut); font: 600 11px/1 inherit; cursor: pointer; vertical-align: middle; } .uf-aide:hover { border-color: var(--uf-acc); color: var(--uf-acc); } .uf-pop { position: absolute; z-index: 5; left: 12px; right: 12px; margin-top: 6px; padding: 12px 14px; border: 1px solid var(--uf-bd); border-radius: 10px; background: #fff; box-shadow: 0 10px 28px rgba(16, 20, 40, .16); text-align: start; } .uf-pop-t { margin: 0 0 4px; font-size: 13px; font-weight: 700; } .uf-pop-c { margin: 0 0 10px; font-size: 13px; color: var(--uf-mut); } .uf-pop-x { padding: 6px 12px; border: 1px solid var(--uf-bd); border-radius: 8px; background: #fff; font: inherit; font-size: 13px; cursor: pointer; } .uf-note { margin: 14px 0 0; font-size: 13px; color: var(--uf-mut); max-width: 78ch; } /* --- etats -------------------------------------------------------------- */ .uf-sk-h { height: 34px; width: min(420px, 70%); margin: 10px 0 26px; border-radius: 8px; background: linear-gradient(90deg, #eef0f4 25%, #e3e6ec 37%, #eef0f4 63%); background-size: 400% 100%; animation: uf-sk 1.3s ease-in-out infinite; } .uf-sk-c { height: 300px; border-radius: 14px; background: linear-gradient(90deg, #eef0f4 25%, #e3e6ec 37%, #eef0f4 63%); background-size: 400% 100%; animation: uf-sk 1.3s ease-in-out infinite; } @keyframes uf-sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @media (prefers-reduced-motion: reduce) { .uf-sk-h, .uf-sk-c { animation: none; } } .uf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .uf-err { max-width: 620px; margin: 40px auto; padding: 26px; text-align: center; border: 1px solid var(--uf-bd); border-radius: 14px; background: var(--uf-soft); } .uf-err-t { margin: 0 0 8px; font-size: 19px; font-weight: 650; } .uf-err-c { margin: 0 0 18px; color: var(--uf-mut); font-size: 14px; } .uf-err .uf-btn { width: auto; padding: 10px 22px; } /* Umediad AI flotte en bas a droite : on garde de l air sous le contenu pour * qu il ne recouvre jamais un bouton de forfait. */ @media (max-width: 720px) { .uf-wrap { padding-bottom: 108px; } }