/* ========================================================================== DissidenceTV — Page « Hébergement Vidéo » Feuille de style dédiée — v1.1.1. Tout est scopé sous #hv-page. Palette et rythme pilotés par les variables de #hv-page (voir ci-dessous). ========================================================================== */ /* -------------------------------------------------------------------------- 1. Jetons de design -------------------------------------------------------------------------- */ #hv-page { /* Couleurs — modifiez uniquement ce bloc pour recolorer toute la page */ --hv-accent: #cc0000; /* rouge de la charte VIDOREV */ --hv-accent-deep: #8f0000; --hv-accent-glow: rgba(204, 0, 0, .20); --hv-accent-wash: rgba(204, 0, 0, .07); --hv-ink: #101216; --hv-ink-2: #3b414d; --hv-ink-3: #6b7280; --hv-paper: #ffffff; --hv-paper-2: #f7f8fa; --hv-paper-3: #eef0f4; --hv-line: #e2e5ea; --hv-line-strong: #cdd2da; --hv-warn: #c77700; --hv-warn-wash: rgba(199, 119, 0, .09); --hv-ok: #17795e; --hv-dark: #0d0f13; --hv-dark-2: #171b22; --hv-on-dark: #f2f3f5; --hv-on-dark-2: #a7aeba; /* Formes et profondeur */ --hv-r-sm: 10px; --hv-r: 16px; --hv-r-lg: 24px; --hv-r-xl: 32px; --hv-shadow-1: 0 1px 2px rgba(16, 18, 22, .05), 0 4px 14px rgba(16, 18, 22, .05); --hv-shadow-2: 0 2px 6px rgba(16, 18, 22, .06), 0 18px 44px rgba(16, 18, 22, .10); --hv-shadow-3: 0 30px 70px rgba(16, 18, 22, .16); /* Rythme vertical */ --hv-gap: clamp(1.25rem, 2.4vw, 2rem); --hv-sect: clamp(3.5rem, 7vw, 6rem); /* Typo */ --hv-font: inherit; --hv-fs-hero: clamp(2rem, 1.15rem + 3.4vw, 3.6rem); --hv-fs-h2: clamp(1.55rem, 1.05rem + 1.9vw, 2.4rem); --hv-fs-h3: clamp(1.05rem, .95rem + .5vw, 1.3rem); --hv-fs-body: clamp(1rem, .96rem + .18vw, 1.075rem); --hv-ease: cubic-bezier(.22, .61, .36, 1); } /* Mode sombre — v1.1 : NE s'active PLUS sur la préférence système. Le thème VIDOREV est clair uniquement ; suivre l'OS produisait un mélange des deux. La page bascule désormais avec le site, via la classe posée sur par le sélecteur de thème (voir le mode sombre du thème enfant). Tant que ce sélecteur n'est pas en place, ce bloc reste simplement inerte. */ html[data-theme="dark"] #hv-page.hv-root, html.dtv-dark #hv-page.hv-root, body.dtv-dark #hv-page.hv-root { --hv-ink: #f0f2f5; --hv-ink-2: #c2c8d2; --hv-ink-3: #8d95a3; --hv-paper: #101318; --hv-paper-2: #161a21; --hv-paper-3: #1e232b; --hv-line: #272d37; --hv-line-strong: #39414e; --hv-shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3); --hv-shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.45); --hv-shadow-3: 0 30px 70px rgba(0,0,0,.6); } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ /* La page vit dans une colonne de contenu (750 px environ avec la sidebar de VIDOREV, ~1140 px en pleine largeur). Toutes les ruptures de mise en page sont donc exprimées en largeur DE CONTENEUR, pas en largeur de fenêtre. */ #hv-page { container-type: inline-size; container-name: hv; font-family: var(--hv-font); color: var(--hv-ink); font-size: var(--hv-fs-body); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; } #hv-page *, #hv-page *::before, #hv-page *::after { box-sizing: border-box; } #hv-page p { margin: 0 0 1em; color: var(--hv-ink-2); } #hv-page p:last-child { margin-bottom: 0; } #hv-page b, #hv-page strong { color: var(--hv-ink); font-weight: 650; } #hv-page h2, #hv-page h3 { color: var(--hv-ink); line-height: 1.2; letter-spacing: -.015em; margin: 0 0 .5em; text-wrap: balance; } #hv-page h2 { font-size: var(--hv-fs-h2); font-weight: 750; } #hv-page h3 { font-size: var(--hv-fs-h3); font-weight: 700; letter-spacing: -.005em; } #hv-page a { color: var(--hv-accent); text-underline-offset: .18em; } #hv-page :focus-visible { outline: 2px solid var(--hv-accent); outline-offset: 3px; border-radius: 4px; } .hv-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .hv-ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .hv-note { font-size: .85rem; line-height: 1.55; color: var(--hv-ink-3); } .hv-kicker { display: inline-block; margin: 0 0 .7rem; font-size: .72rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--hv-accent); } .hv-sub { max-width: 62ch; color: var(--hv-ink-2); font-size: 1.05em; } .hv-section { margin: var(--hv-sect) 0; scroll-margin-top: 84px; } .hv-section-head { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); } /* -------------------------------------------------------------------------- 3. Boutons -------------------------------------------------------------------------- */ #hv-page .hv-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: .85em 1.5em; border: 1px solid transparent; border-radius: 999px; font-size: .95rem; font-weight: 650; line-height: 1.1; text-decoration: none; cursor: pointer; transition: transform .18s var(--hv-ease), box-shadow .25s var(--hv-ease), background-color .2s var(--hv-ease), color .2s var(--hv-ease), border-color .2s var(--hv-ease); } #hv-page .hv-btn:hover { transform: translateY(-2px); } #hv-page .hv-btn:active { transform: translateY(0); } #hv-page .hv-btn .hv-ico { transition: transform .25s var(--hv-ease); } #hv-page .hv-btn:hover .hv-ico { transform: translateX(3px); } #hv-page .hv-btn--primary { color: #fff; background: linear-gradient(135deg, var(--hv-accent), var(--hv-accent-deep)); box-shadow: 0 6px 18px var(--hv-accent-glow); } #hv-page .hv-btn--primary:hover { box-shadow: 0 12px 28px var(--hv-accent-glow); } #hv-page .hv-btn--ghost { color: var(--hv-ink); background: transparent; border-color: var(--hv-line-strong); } #hv-page .hv-btn--ghost:hover { border-color: var(--hv-ink); background: var(--hv-paper-2); } #hv-page .hv-btn--ghost .hv-ico { transform: none; } #hv-page .hv-btn--block { display: flex; width: 100%; } #hv-page .hv-btn--copy { padding: .6em 1.1em; font-size: .84rem; color: var(--hv-on-dark); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); } #hv-page .hv-btn--copy:hover { background: rgba(255, 255, 255, .16); } #hv-page .hv-btn--copy .hv-ico { transform: none; } #hv-page .hv-btn--copy.is-done { color: #7ce0b5; border-color: rgba(124, 224, 181, .5); } /* -------------------------------------------------------------------------- 4. Hero -------------------------------------------------------------------------- */ .hv-hero { position: relative; padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3rem); border: 1px solid var(--hv-line); border-radius: var(--hv-r-xl); background: radial-gradient(120% 90% at 88% -10%, var(--hv-accent-wash) 0%, transparent 55%), radial-gradient(90% 70% at 0% 0%, var(--hv-paper-2) 0%, transparent 60%), var(--hv-paper); box-shadow: var(--hv-shadow-1); overflow: hidden; } .hv-hero::after { content: ""; position: absolute; inset: auto -20% -60% 40%; height: 260px; background: radial-gradient(50% 50% at 50% 50%, var(--hv-accent-glow), transparent 70%); filter: blur(20px); pointer-events: none; } .hv-eyebrow { display: inline-flex; align-items: center; gap: .5em; margin: 0 0 1.1rem; padding: .4em 1em .4em .7em; border: 1px solid var(--hv-line); border-radius: 999px; background: var(--hv-paper); font-size: .78rem; font-weight: 650; letter-spacing: .02em; color: var(--hv-ink-2); } .hv-dot { width: .5em; height: .5em; border-radius: 50%; background: var(--hv-accent); box-shadow: 0 0 0 0 var(--hv-accent-glow); animation: hv-ping 2.6s var(--hv-ease) infinite; } @keyframes hv-ping { 0%, 70%, 100% { box-shadow: 0 0 0 0 var(--hv-accent-glow); } 35% { box-shadow: 0 0 0 .5em rgba(226, 35, 26, 0); } } #hv-page .hv-hero-title { max-width: 20ch; margin: 0 0 .6em; font-size: var(--hv-fs-hero); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; } #hv-page .hv-hero-title em { font-style: normal; background: linear-gradient(100deg, var(--hv-accent), var(--hv-accent-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hv-lead { max-width: 60ch; font-size: clamp(1.02rem, .97rem + .35vw, 1.2rem); line-height: 1.6; } .hv-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.6rem 0; } .hv-pill { display: inline-flex; align-items: center; gap: .45em; padding: .45em .95em; border: 1px solid var(--hv-line); border-radius: 999px; background: var(--hv-paper-2); font-size: .82rem; font-weight: 600; color: var(--hv-ink-2); transition: border-color .2s var(--hv-ease), color .2s var(--hv-ease), transform .2s var(--hv-ease); } .hv-pill:hover { border-color: var(--hv-accent); color: var(--hv-ink); transform: translateY(-1px); } .hv-pill .hv-ico { color: var(--hv-accent); width: 1.05em; height: 1.05em; } .hv-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.25rem; } .hv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; margin: 0; padding-top: 1.75rem; border-top: 1px solid var(--hv-line); } .hv-stat { padding: .25rem 1.25rem .25rem 0; } .hv-stat + .hv-stat { border-left: 1px solid var(--hv-line); padding-left: 1.25rem; } .hv-stats dt { font-size: .72rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--hv-ink-3); margin-bottom: .3em; } .hv-stats dd { margin: 0; font-size: 1.05rem; color: var(--hv-ink-2); font-variant-numeric: tabular-nums; } .hv-stats dd b { font-size: 1.3rem; font-weight: 750; letter-spacing: -.02em; } .hv-stats dd span { color: var(--hv-ink-3); font-size: .9rem; } @container hv (max-width: 620px) { .hv-stat + .hv-stat { border-left: 0; padding-left: 0; } .hv-stats { gap: 1.1rem; } } /* -------------------------------------------------------------------------- 5. Sommaire flottant -------------------------------------------------------------------------- */ .hv-toc { position: sticky; top: 0; z-index: 30; margin: 1.25rem 0 0; padding: .5rem 0; background: color-mix(in srgb, var(--hv-paper) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .25s var(--hv-ease), box-shadow .25s var(--hv-ease); } .hv-toc.is-stuck { border-bottom-color: var(--hv-line); box-shadow: 0 6px 20px rgba(16,18,22,.05); } .hv-toc ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0 .25rem; overflow-x: auto; scrollbar-width: none; } .hv-toc ul::-webkit-scrollbar { display: none; } #hv-page .hv-toc a { display: block; white-space: nowrap; padding: .45em .9em; border-radius: 999px; font-size: .84rem; font-weight: 600; color: var(--hv-ink-3); text-decoration: none; transition: color .2s var(--hv-ease), background-color .2s var(--hv-ease); } #hv-page .hv-toc a:hover { color: var(--hv-ink); background: var(--hv-paper-2); } #hv-page .hv-toc a.is-current { color: var(--hv-accent); background: var(--hv-accent-wash); } @container hv (max-width: 560px) { .hv-toc { display: none; } } /* -------------------------------------------------------------------------- 6. Calculateur -------------------------------------------------------------------------- */ .hv-calc-card { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; padding: clamp(1.5rem, 3.2vw, 2.75rem); border: 1px solid var(--hv-line); border-radius: var(--hv-r-lg); background: radial-gradient(90% 120% at 0% 0%, var(--hv-accent-wash), transparent 60%), var(--hv-paper); box-shadow: var(--hv-shadow-2); } @container hv (min-width: 860px) { .hv-calc-card { grid-template-columns: .85fr 1.15fr; } } .hv-calc-readout { text-align: left; } .hv-calc-volume { display: flex; align-items: baseline; gap: .25em; } .hv-calc-value { font-size: clamp(3rem, 2rem + 4.5vw, 5rem); font-weight: 820; letter-spacing: -.045em; line-height: .95; font-variant-numeric: tabular-nums; color: var(--hv-ink); } .hv-calc-unit { font-size: clamp(1.2rem, 1rem + 1vw, 1.75rem); font-weight: 700; color: var(--hv-accent); } #hv-page .hv-calc-profile { margin: .45rem 0 1.1rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hv-ink-3); } .hv-calc-price { display: flex; align-items: baseline; gap: .3em; } .hv-calc-amount { font-size: clamp(1.9rem, 1.4rem + 1.9vw, 2.75rem); font-weight: 780; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--hv-accent); } .hv-calc-per { font-size: 1rem; font-weight: 600; color: var(--hv-ink-2); } #hv-page .hv-calc-rate { margin: .3rem 0 0; font-size: .9rem; color: var(--hv-ink-3); } /* Curseur */ .hv-calc-control input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; margin: 0; padding: 0; background: transparent; cursor: pointer; } .hv-calc-control input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--hv-accent) 0 var(--hv-fill, 12%), var(--hv-paper-3) var(--hv-fill, 12%) 100%); } .hv-calc-control input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--hv-accent) 0 var(--hv-fill, 12%), var(--hv-paper-3) var(--hv-fill, 12%) 100%); } .hv-calc-control input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -9px; border: 3px solid var(--hv-paper); border-radius: 50%; background: var(--hv-accent); box-shadow: 0 3px 12px var(--hv-accent-glow), 0 0 0 1px var(--hv-line); transition: transform .15s var(--hv-ease), box-shadow .2s var(--hv-ease); } .hv-calc-control input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 3px solid var(--hv-paper); border-radius: 50%; background: var(--hv-accent); box-shadow: 0 3px 12px var(--hv-accent-glow), 0 0 0 1px var(--hv-line); } .hv-calc-control input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); } .hv-calc-control input[type="range"]:active::-webkit-slider-thumb { transform: scale(.96); } .hv-calc-scale { display: flex; justify-content: space-between; margin: .1rem .2rem 1.4rem; font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: var(--hv-ink-3); } .hv-calc-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.1rem; } .hv-calc-meta-item { display: inline-flex; align-items: center; gap: .5em; padding: .5em 1em; border: 1px solid var(--hv-line); border-radius: var(--hv-r-sm); background: var(--hv-paper-2); font-size: .86rem; color: var(--hv-ink-2); } .hv-calc-meta-item .hv-ico { color: var(--hv-accent); } .hv-calc-meta-item b { font-variant-numeric: tabular-nums; } .hv-calc-inverse { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin-bottom: 1.25rem; font-size: .88rem; color: var(--hv-ink-2); } .hv-calc-inverse input[type="number"] { width: 5.5em; padding: .4em .6em; border: 1px solid var(--hv-line-strong); border-radius: var(--hv-r-sm); background: var(--hv-paper); color: var(--hv-ink); font: inherit; font-weight: 650; font-variant-numeric: tabular-nums; text-align: center; } .hv-calc-inverse input[type="number"]:focus { border-color: var(--hv-accent); } /* -------------------------------------------------------------------------- 7. Découpage en deux colonnes + graphique dégressif -------------------------------------------------------------------------- */ .hv-split { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; } @container hv (min-width: 800px) { .hv-split { grid-template-columns: 1fr 1fr; } .hv-split--reverse .hv-split-visual { order: -1; } } .hv-split-text > h2 { margin-top: 0; } .hv-chart { padding: clamp(1.25rem, 2.5vw, 2rem); border: 1px solid var(--hv-line); border-radius: var(--hv-r-lg); background: var(--hv-paper-2); } .hv-chart-bars { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(.35rem, 1vw, .75rem); height: 220px; margin-bottom: 3.25rem; /* réserve la place des libellés, positionnés hors flux */ } .hv-bar { position: relative; height: 100%; } .hv-bar-fill { position: absolute; bottom: 0; left: 0; right: 0; height: 0; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, var(--hv-line-strong), var(--hv-paper-3)); transition: height .9s var(--hv-ease) var(--hv-delay, 0s), background .3s var(--hv-ease); } /* Le facteur .85 laisse la place à l'étiquette de tarif au-dessus de la barre la plus haute, sans altérer les proportions entre paliers. */ .hv-chart.is-live .hv-bar-fill { height: calc(var(--h) * .85); } .hv-bar:nth-child(1) { --hv-delay: .00s; } .hv-bar:nth-child(2) { --hv-delay: .08s; } .hv-bar:nth-child(3) { --hv-delay: .16s; } .hv-bar:nth-child(4) { --hv-delay: .24s; } .hv-bar:nth-child(5) { --hv-delay: .32s; } .hv-bar:nth-child(6) { --hv-delay: .40s; } .hv-bar--best .hv-bar-fill { background: linear-gradient(180deg, var(--hv-accent), var(--hv-accent-deep)); } .hv-bar::before { content: attr(data-rate); position: absolute; left: 0; right: 0; bottom: calc(var(--h) * .85 + 8px); text-align: center; font-size: clamp(.66rem, .55rem + .3vw, .82rem); font-weight: 750; font-variant-numeric: tabular-nums; color: var(--hv-ink); opacity: 0; transition: opacity .5s var(--hv-ease) calc(var(--hv-delay, 0s) + .5s); } .hv-chart.is-live .hv-bar::before { opacity: 1; } .hv-bar--best::before { color: var(--hv-accent); } .hv-bar-label { position: absolute; top: calc(100% + .6rem); left: 0; right: 0; font-size: clamp(.58rem, .5rem + .28vw, .72rem); line-height: 1.25; font-weight: 600; text-align: center; color: var(--hv-ink-3); } .hv-chart-caption { margin: 1.75rem 0 0; text-align: center; font-size: .78rem; color: var(--hv-ink-3); } /* -------------------------------------------------------------------------- 8. Cartes « Comment ça marche » -------------------------------------------------------------------------- */ .hv-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--hv-gap); } .hv-card { position: relative; padding: clamp(1.4rem, 2.4vw, 2rem); border: 1px solid var(--hv-line); border-radius: var(--hv-r); background: var(--hv-paper); box-shadow: var(--hv-shadow-1); transition: transform .3s var(--hv-ease), box-shadow .3s var(--hv-ease), border-color .3s var(--hv-ease); } .hv-card:hover { transform: translateY(-4px); border-color: var(--hv-line-strong); box-shadow: var(--hv-shadow-2); } .hv-card-ico { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 1.1rem; border-radius: 14px; background: var(--hv-accent-wash); color: var(--hv-accent); } .hv-card-ico .hv-ico { width: 22px; height: 22px; } .hv-card h3 { margin-bottom: .45em; } .hv-card p { font-size: .95rem; margin: 0; } /* -------------------------------------------------------------------------- 9. Panneaux (sombre / accentué) -------------------------------------------------------------------------- */ .hv-panel { padding: clamp(1.75rem, 4vw, 3.25rem); border-radius: var(--hv-r-xl); } .hv-panel--dark { background: radial-gradient(90% 120% at 100% 0%, rgba(226, 35, 26, .22), transparent 55%), linear-gradient(160deg, var(--hv-dark-2), var(--hv-dark)); color: var(--hv-on-dark); box-shadow: var(--hv-shadow-3); } #hv-page .hv-panel--dark h2, #hv-page .hv-panel--dark h3, #hv-page .hv-panel--dark b { color: var(--hv-on-dark); } #hv-page .hv-panel--dark p { color: var(--hv-on-dark-2); } #hv-page .hv-panel--dark .hv-kicker { color: #ff7a70; } .hv-badge-strong { display: block; margin-top: 1.5rem !important; padding: 1em 1.25em; border-left: 3px solid var(--hv-accent); border-radius: 0 var(--hv-r-sm) var(--hv-r-sm) 0; background: rgba(255, 255, 255, .05); font-weight: 650; color: var(--hv-on-dark) !important; } .hv-panel--accent { border: 1px solid var(--hv-line); background: radial-gradient(70% 90% at 100% 0%, var(--hv-accent-wash), transparent 60%), var(--hv-paper-2); } .hv-prose { max-width: 74ch; } .hv-prose h3 { margin-top: 1.75em; } /* Visuel redondance */ .hv-split-visual { display: grid; place-items: center; } .hv-redundancy { width: min(100%, 340px); height: auto; overflow: visible; } .hv-redundancy rect, .hv-redundancy path { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 1.6; stroke-linecap: round; } .hv-redundancy .hv-red-source rect { fill: rgba(226,35,26,.14); stroke: var(--hv-accent); stroke-width: 1.8; } .hv-redundancy .hv-red-source path { fill: var(--hv-accent); stroke: none; } .hv-redundancy .hv-red-node rect { fill: rgba(255,255,255,.05); } .hv-redundancy .hv-red-node circle { fill: #4ade80; stroke: none; animation: hv-blink 2.4s ease-in-out infinite; } .hv-redundancy .hv-red-node--b circle { animation-delay: 1.2s; } .hv-redundancy .hv-red-link { stroke-dasharray: 4 5; opacity: .5; } .hv-redundancy .hv-red-flow { stroke: var(--hv-accent); stroke-width: 2; stroke-dasharray: 5 6; animation: hv-flow 1.4s linear infinite; } .hv-red-txt { fill: rgba(255,255,255,.62); stroke: none; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-anchor: middle; text-transform: uppercase; } .hv-red-txt--main { fill: #fff; } @keyframes hv-blink { 0%,100% { opacity: .35; } 50% { opacity: 1; } } @keyframes hv-flow { to { stroke-dashoffset: -22; } } /* -------------------------------------------------------------------------- 10. Frise « impayé » -------------------------------------------------------------------------- */ .hv-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--hv-gap); margin: 0; padding: 0; list-style: none; counter-reset: hv-step; } #hv-page .hv-timeline li { margin: 0; } .hv-step { position: relative; padding: clamp(1.35rem, 2.4vw, 1.9rem); border: 1px solid var(--hv-line); border-top: 3px solid var(--hv-line-strong); border-radius: var(--hv-r); background: var(--hv-paper); box-shadow: var(--hv-shadow-1); } .hv-step--info { border-top-color: var(--hv-ink-3); } .hv-step--warn { border-top-color: var(--hv-warn); background: linear-gradient(180deg, var(--hv-warn-wash), transparent 40%), var(--hv-paper); } .hv-step--danger { border-top-color: var(--hv-accent); background: linear-gradient(180deg, var(--hv-accent-wash), transparent 40%), var(--hv-paper); } .hv-step-marker { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: .9rem; border-radius: 50%; background: var(--hv-paper-3); color: var(--hv-ink); font-size: .9rem; font-weight: 750; } .hv-step--warn .hv-step-marker { background: var(--hv-warn); color: #fff; } .hv-step--danger .hv-step-marker { background: var(--hv-accent); color: #fff; } .hv-step-when { margin: 0 0 .35rem !important; font-size: .72rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--hv-ink-3); } .hv-step h3 { margin-bottom: .5em; } .hv-step p { font-size: .93rem; } .hv-step:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: calc(var(--hv-gap) * -1); width: var(--hv-gap); height: 1px; border-top: 2px dotted var(--hv-line-strong); } @container hv (max-width: 830px) { .hv-step:not(:last-child)::after { display: none; } } /* -------------------------------------------------------------------------- 11. FAQ -------------------------------------------------------------------------- */ .hv-faq-list { border: 1px solid var(--hv-line); border-radius: var(--hv-r); background: var(--hv-paper); overflow: hidden; box-shadow: var(--hv-shadow-1); } .hv-faq-item + .hv-faq-item { border-top: 1px solid var(--hv-line); } .hv-faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15em clamp(1rem, 2.2vw, 1.6rem); cursor: pointer; list-style: none; font-weight: 650; color: var(--hv-ink); transition: background-color .2s var(--hv-ease), color .2s var(--hv-ease); } .hv-faq-item > summary::-webkit-details-marker { display: none; } .hv-faq-item > summary:hover { background: var(--hv-paper-2); color: var(--hv-accent); } .hv-faq-item[open] > summary { color: var(--hv-accent); } .hv-chev { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--hv-paper-3); transition: background-color .25s var(--hv-ease), transform .3s var(--hv-ease); } .hv-chev::before, .hv-chev::after { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 2px; border-radius: 2px; background: var(--hv-ink); transform: translate(-50%, -50%); transition: transform .3s var(--hv-ease), background-color .25s var(--hv-ease); } .hv-chev::after { transform: translate(-50%, -50%) rotate(90deg); } .hv-faq-item[open] .hv-chev { background: var(--hv-accent-wash); } .hv-faq-item[open] .hv-chev::before, .hv-faq-item[open] .hv-chev::after { background: var(--hv-accent); } .hv-faq-item[open] .hv-chev::after { transform: translate(-50%, -50%) rotate(0deg); } .hv-faq-body { padding: 0 clamp(1rem, 2.2vw, 1.6rem) 1.35em; max-width: 78ch; } .hv-faq-body p { font-size: .95rem; } .hv-faq-item[open] > .hv-faq-body { animation: hv-fade-down .35s var(--hv-ease) both; } @keyframes hv-fade-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 12. Citation « à copier » -------------------------------------------------------------------------- */ .hv-quote { margin: 2rem 0; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--hv-r-lg); background: linear-gradient(160deg, var(--hv-dark-2), var(--hv-dark)); box-shadow: var(--hv-shadow-2); position: relative; overflow: hidden; } .hv-quote::before { content: "\201C"; position: absolute; top: -.35em; left: .15em; font-size: 9rem; line-height: 1; color: rgba(255, 255, 255, .06); pointer-events: none; } #hv-page .hv-quote blockquote { margin: 0; padding: 0; border: 0; background: none; } #hv-page .hv-quote blockquote p { position: relative; margin: 0; font-size: clamp(1rem, .95rem + .4vw, 1.15rem); font-style: italic; line-height: 1.7; color: var(--hv-on-dark); } .hv-quote figcaption { margin-top: 1.35rem; } /* -------------------------------------------------------------------------- 13. Bandeau contact -------------------------------------------------------------------------- */ .hv-cta-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; margin: var(--hv-sect) 0 0; padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--hv-line); border-radius: var(--hv-r-xl); background: radial-gradient(80% 130% at 0% 50%, var(--hv-accent-wash), transparent 60%), var(--hv-paper-2); } #hv-page .hv-cta-strip h2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem); margin-bottom: .25em; } .hv-cta-strip p { margin: 0; font-size: .95rem; } /* -------------------------------------------------------------------------- 14. Section paliers : barre de filtres -------------------------------------------------------------------------- */ .hv-levels-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; } .hv-segmented { display: inline-flex; flex-wrap: wrap; gap: .2rem; padding: .3rem; border: 1px solid var(--hv-line); border-radius: 999px; background: var(--hv-paper-2); } #hv-page .hv-seg { padding: .55em 1.1em; border: 0; border-radius: 999px; background: transparent; color: var(--hv-ink-2); font: inherit; font-size: .85rem; font-weight: 620; cursor: pointer; white-space: nowrap; transition: background-color .22s var(--hv-ease), color .22s var(--hv-ease), box-shadow .22s var(--hv-ease); } #hv-page .hv-seg:hover { color: var(--hv-ink); } #hv-page .hv-seg.is-active { background: var(--hv-paper); color: var(--hv-accent); box-shadow: var(--hv-shadow-1); } .hv-levels-count { margin: 0 !important; font-size: .82rem; color: var(--hv-ink-3); } .hv-levels-foot { margin-top: 1.75rem !important; padding-top: 1.25rem; border-top: 1px solid var(--hv-line); font-size: .85rem; color: var(--hv-ink-3); text-align: center; } /* -------------------------------------------------------------------------- 15. Section paliers : reprise en main du rendu PMPro Les classes hv-lvl-* sont posées par hebergement-video.js sur le balisage généré par [pmpro_advanced_levels]. Le sélecteur générique en dessous neutralise d'abord la mise en page native du plugin et du thème. -------------------------------------------------------------------------- */ #hv-levels-grid { margin: 0; } #hv-levels-grid > * { margin: 0; } /* Neutralisation des grilles natives PMPro / thème */ #hv-levels-grid [class*="pmpro"][class*="col"], #hv-levels-grid [class*="pmpro_advanced_levels"] { display: block; float: none; width: auto; max-width: none; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; } /* La grille, une fois les cartes détectées */ #hv-levels-grid.hv-is-ready { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(.9rem, 1.8vw, 1.4rem); align-items: stretch; } #hv-levels-grid.hv-is-ready > .hv-lvl-holder { display: contents; } /* La carte */ #hv-levels-grid .hv-lvl { position: relative; display: flex; flex-direction: column; padding: 1.5rem 1.35rem 1.35rem; border: 1px solid var(--hv-line); border-radius: var(--hv-r); background: var(--hv-paper); box-shadow: var(--hv-shadow-1); overflow: hidden; transition: transform .28s var(--hv-ease), box-shadow .28s var(--hv-ease), border-color .28s var(--hv-ease), opacity .28s var(--hv-ease); } #hv-levels-grid .hv-lvl::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--hv-accent), var(--hv-accent-deep)); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--hv-ease); } #hv-levels-grid .hv-lvl:hover { transform: translateY(-5px); border-color: var(--hv-line-strong); box-shadow: var(--hv-shadow-2); } #hv-levels-grid .hv-lvl:hover::before { transform: scaleX(1); } /* Palier mis en avant (piloté par le calculateur ou data-hv-featured) */ #hv-levels-grid .hv-lvl.is-featured { border-color: var(--hv-accent); box-shadow: 0 0 0 1px var(--hv-accent), var(--hv-shadow-2); } #hv-levels-grid .hv-lvl.is-featured::before { transform: scaleX(1); } #hv-levels-grid .hv-lvl.is-featured::after { content: "Recommandé pour vous"; position: absolute; top: 0; right: 0; padding: .35em .9em; border-radius: 0 0 0 var(--hv-r-sm); background: var(--hv-accent); color: #fff; font-size: .64rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; } /* Masqué par le filtre */ #hv-levels-grid .hv-lvl.is-hidden { display: none; } /* Éléments internes normalisés */ #hv-levels-grid .hv-lvl-title, #hv-levels-grid .hv-lvl h1, #hv-levels-grid .hv-lvl h2, #hv-levels-grid .hv-lvl h3, #hv-levels-grid .hv-lvl h4 { order: 2; margin: 0 0 .15rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--hv-ink); text-align: left; } #hv-levels-grid .hv-lvl-title .hv-lvl-unit { font-size: .62em; font-weight: 650; color: var(--hv-accent); margin-left: .12em; } #hv-levels-grid .hv-lvl-eyebrow { order: 1; margin: 0 0 .55rem; font-size: .66rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--hv-ink-3); } #hv-levels-grid .hv-lvl-profile { order: 3; margin: 0 0 .9rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hv-accent); text-align: left; } #hv-levels-grid .hv-lvl-price { order: 4; display: flex; align-items: baseline; gap: .2em; margin: 0 0 .2rem; padding-top: .9rem; border-top: 1px solid var(--hv-line); font-size: 1.85rem; font-weight: 780; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--hv-ink); text-align: left; } #hv-levels-grid .hv-lvl-price .hv-lvl-period { font-size: .48em; font-weight: 600; letter-spacing: 0; color: var(--hv-ink-3); } #hv-levels-grid .hv-lvl-rate { order: 5; margin: 0 0 1rem; font-size: .8rem; color: var(--hv-ink-3); font-variant-numeric: tabular-nums; text-align: left; } #hv-levels-grid .hv-lvl-desc { order: 6; margin: 0 0 1.25rem; font-size: .88rem; line-height: 1.55; color: var(--hv-ink-2); text-align: left; } #hv-levels-grid .hv-lvl-spacer { order: 7; flex: 1 1 auto; } /* Bouton d'adhésion */ #hv-levels-grid .hv-lvl-cta, #hv-levels-grid .hv-lvl a.pmpro_btn, #hv-levels-grid .hv-lvl a[href*="level="] { order: 8; display: flex; align-items: center; justify-content: center; gap: .45em; width: 100%; margin: 0; padding: .8em 1.1em; border: 1px solid var(--hv-line-strong); border-radius: 999px; background: var(--hv-paper); color: var(--hv-ink); font-size: .88rem; font-weight: 680; line-height: 1.1; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .22s var(--hv-ease), color .22s var(--hv-ease), border-color .22s var(--hv-ease), box-shadow .22s var(--hv-ease); } #hv-levels-grid .hv-lvl:hover .hv-lvl-cta, #hv-levels-grid .hv-lvl.is-featured .hv-lvl-cta, #hv-levels-grid .hv-lvl:hover a[href*="level="], #hv-levels-grid .hv-lvl.is-featured a[href*="level="] { border-color: transparent; background: linear-gradient(135deg, var(--hv-accent), var(--hv-accent-deep)); color: #fff; box-shadow: 0 6px 18px var(--hv-accent-glow); } /* « Membership never expires. » et tout ruban textuel : masqués. L'information est donnée une seule fois, en français, sous la grille. */ #hv-levels-grid .hv-lvl-expiry, #hv-levels-grid .hv-lvl-ribbon { display: none; } /* Palier déjà souscrit : PMPro pose pmpro_level-current sur la carte et désactive son bouton. Le badge est généré en CSS, sans dépendre du DOM. */ #hv-levels-grid .hv-lvl.is-current { border-color: var(--hv-ok); box-shadow: 0 0 0 1px var(--hv-ok), var(--hv-shadow-1); } #hv-levels-grid .hv-lvl.is-current::before { background: var(--hv-ok); transform: scaleX(1); } #hv-levels-grid .hv-lvl.is-current::after { content: "Votre niveau actuel"; position: absolute; top: 0; right: 0; padding: .35em .9em; border-radius: 0 0 0 var(--hv-r-sm); background: var(--hv-ok); color: #fff; font-size: .64rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; } /* Bouton désactivé par PMPro (palier non sélectionnable depuis cette page, ou palier déjà souscrit) : présent mais visiblement inactif. Il pointe vers l'espace membre, on le garde cliquable mais discret. */ #hv-levels-grid .hv-lvl-cta.disabled, #hv-levels-grid .hv-lvl.is-locked .hv-lvl-cta, #hv-levels-grid .hv-lvl.is-current .hv-lvl-cta { border-color: var(--hv-line); background: var(--hv-paper-2); color: var(--hv-ink-3); box-shadow: none; font-weight: 620; } #hv-levels-grid .hv-lvl.is-current:hover .hv-lvl-cta { border-color: var(--hv-ok); background: var(--hv-paper-2); color: var(--hv-ok); box-shadow: none; } /* Contenu résiduel éventuel de PMPro non reconnu : discret, jamais cassant */ #hv-levels-grid .hv-lvl > :not([class*="hv-lvl"]) { order: 9; margin: .75rem 0 0; font-size: .8rem; color: var(--hv-ink-3); } /* Message « aucun résultat » */ .hv-levels-empty { grid-column: 1 / -1; padding: 2.5rem 1rem; text-align: center; color: var(--hv-ink-3); border: 1px dashed var(--hv-line-strong); border-radius: var(--hv-r); } @container hv (max-width: 520px) { #hv-levels-grid.hv-is-ready { grid-template-columns: 1fr 1fr; gap: .7rem; } #hv-levels-grid .hv-lvl { padding: 1.15rem 1rem 1.1rem; } #hv-levels-grid .hv-lvl-title { font-size: 1.2rem; } #hv-levels-grid .hv-lvl-price { font-size: 1.4rem; } #hv-levels-grid .hv-lvl-desc { display: none; } } /* -------------------------------------------------------------------------- 16. Apparitions au défilement -------------------------------------------------------------------------- */ /* Par défaut le contenu est VISIBLE. La classe .hv-anim n'est posée par le script que si l'animation est réellement possible, et un garde-fou la lève au bout de 2,5 s — la page ne peut donc jamais rester blanche. */ .hv-reveal { opacity: 1; } #hv-page.hv-anim .hv-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--hv-ease), transform .7s var(--hv-ease); will-change: opacity, transform; } #hv-page.hv-anim .hv-reveal.is-in { opacity: 1; transform: none; will-change: auto; } /* -------------------------------------------------------------------------- 17. Accessibilité : mouvement réduit -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { #hv-page *, #hv-page *::before, #hv-page *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } #hv-page.hv-anim .hv-reveal { opacity: 1; transform: none; } .hv-chart .hv-bar-fill { height: var(--h); } .hv-chart .hv-bar::before { opacity: 1; } } /* -------------------------------------------------------------------------- 18. Impression -------------------------------------------------------------------------- */ @media print { .hv-toc, .hv-hero-actions, .hv-levels-toolbar, .hv-cta-strip, .hv-btn { display: none !important; } #hv-page .hv-panel--dark, #hv-page .hv-quote { background: #fff !important; color: #000 !important; border: 1px solid #999; } #hv-page .hv-panel--dark p, #hv-page .hv-quote p { color: #222 !important; } .hv-faq-item > .hv-faq-body { display: block !important; } }