/* =========================================================
00. FONDATIONS — imports, polices, tokens
========================================================= */
/* Polices Google chargées via dans le (perf : évite la chaîne CSS -> @import bloquante). */
@font-face {
font-family: "iA Writer Quattro";
font-style: normal;
font-weight: 400;
src: url(../fonts/iA-Writer-Quattro/ia-writer-quattro-latin-400-normal.woff2) format("woff2");
font-display: swap;
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "iA Writer Quattro";
font-style: normal;
font-weight: 700;
src: url(../fonts/iA-Writer-Quattro/ia-writer-quattro-latin-700-normal.woff2) format("woff2");
font-display: swap;
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "iA Writer Quattro";
font-style: italic;
font-weight: 400;
src: url(../fonts/iA-Writer-Quattro/ia-writer-quattro-latin-400-italic.woff2) format("woff2");
font-display: swap;
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "iA Writer Quattro";
font-style: italic;
font-weight: 700;
src: url(../fonts/iA-Writer-Quattro/ia-writer-quattro-latin-700-italic.woff2) format("woff2");
font-display: swap;
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
:root {
--measure-text: min(38rem, calc(100vw - 2rem));
--measure-wide: min(42rem, calc(100vw - 2rem));
--measure-full: calc(100vw - 2.5rem);
--reader-shell-height: 3.45rem;
--font-interface: "iA Writer Quattro", "Inter", Helvetica, sans-serif;
--space-1: 0.5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 2.5rem;
--space-5: 4rem;
--space-6: 8rem;
--font-size-labor: 1.25rem;
--font-size-accent: 1.15rem;
/* ex --font-size-current : pills, widgets d'accent */
--font-size-body: 1rem;
--font-size-small: 0.85rem;
--font-size-menu: 0.68rem;
/* plancher iA Writer Quattro : ≥ 10.9px à base 16 */
--color-paper: #fff;
--color-ink: #111;
--color-muted: #666;
--color-soft: #f5f5f3;
--color-line: #d8d8d8;
--color-accent: #111;
--color-danger: #e60012;
--border-ink: 1px solid var(--color-ink);
--border-soft: 1px solid var(--color-line);
--radius-round: 999px;
--radius-square: 0px;
--shadow-floating-panel: 0 10px 28px rgba(0, 0, 0, 0.12);
}
/* =========================================================
01. SOCLE DOCUMENT — page, liens, formulaires
========================================================= */
html {
scrollbar-width: auto;
scrollbar-color: var(--color-ink) var(--color-paper);
}
html::-webkit-scrollbar {
width: 24px;
}
body {
width: var(--measure-text);
max-width: var(--measure-text);
margin: 0 auto;
padding: calc(var(--reader-shell-height) + 2rem) 0 45vh;
background: var(--color-paper);
color: var(--color-ink);
font-family: var(--font-interface);
font-size: var(--font-size-labor);
line-height: 1.45;
counter-reset: chap;
text-align: justify;
text-justify: inter-word;
hyphens: auto;
}
/* Cursor ghost */
.vx-cursor-svg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
overflow: visible;
}
.vx-cursor-svg polyline {
filter: url('#vx-filter-trail');
}
@media screen and (max-width: 700px) {
body {
text-align: left;
hyphens: none;
}
}
ul {
font-size: var(--font-size-labor);
}
li {
list-style: none;
}
sup {
vertical-align: top;
}
a {
color: var(--color-ink);
hyphens: none;
}
a:hover {
color: var(--color-ink);
}
/*a[href^="http"]:not(.pi-card)::after {
content: "\f35d";
font-family: "Font Awesome 6 Free";
font-weight: 900;
display: inline-block;
margin-left: 0.28em;
font-size: 0.5em;
vertical-align: top;
}*/
select#concepts {
font-family: inherit;
font-size: inherit;
color: var(--color-ink);
background: var(--color-paper);
border-width: 0 0 1px 0;
border-style: none none solid none;
border-color: var(--color-ink);
}
/* =========================================================
Avertissement d'entrée
========================================================= */
.vx-disclaimer {
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
place-items: center;
box-sizing: border-box;
padding: clamp(1rem, 4vw, 2rem);
background: rgba(10, 10, 10, 0.84);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.vx-disclaimer[hidden] {
display: none;
}
.vx-disclaimer:not([hidden]) {
animation: vx-disclaimer-fade-in 0.38s ease both;
}
/* Panneau
========================================================= */
.vx-disclaimer__panel {
position: relative;
width: min(100%, 39rem);
box-sizing: border-box;
padding:
clamp(2rem, 5vw, 3rem) clamp(1.4rem, 5vw, 2.8rem) clamp(1.8rem, 4vw, 2.5rem);
overflow: hidden;
background: black;
color: #eee;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
0 1.5rem 5rem rgba(0, 0, 0, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.025);
text-align: center;
animation: vx-disclaimer-panel-in 0.38s ease both;
}
.vx-disclaimer__panel::before {
content: "";
position: absolute;
inset: 0.55rem;
border: 1px solid rgba(255, 255, 255, 0.055);
pointer-events: none;
}
/* Texte
========================================================= */
.vx-disclaimer__text {
position: relative;
display: block;
max-width: 44ch;
margin: 0 auto 1.7rem;
font-family:
"iA Writer Quattro",
ui-monospace,
monospace;
font-size: clamp(1rem, 0.92rem + 0.35vw, 1.18rem);
font-style: italic;
font-weight: 400;
line-height: 1.68;
letter-spacing: 0.008em;
color: #dedede;
text-wrap: balance;
}
/* Mots signalés
========================================================= */
.vx-disclaimer__hotword {
display: inline-flex;
align-items: baseline;
gap: 0.3em;
color: #fff;
font-style: normal;
white-space: nowrap;
}
.vx-disclaimer__hotword::before {
content: "";
flex: 0 0 auto;
width: 0.42rem;
height: 0.42rem;
border: 1px solid rgba(255, 255, 255, 0.72);
border-radius: 50%;
background: hsl(0 84% 49%);
box-shadow:
0 0 0.6rem hsl(0 84% 49% / 0.48);
transform: translateY(-0.01em);
}
/* Mot dégradé
========================================================= */
.vx-disclaimer__degradation {
position: relative;
display: inline-block;
color: #f2f2f2;
font-style: normal;
white-space: nowrap;
isolation: isolate;
}
.vx-disclaimer__degradation::before,
.vx-disclaimer__degradation::after {
content: attr(data-vx-text);
position: absolute;
inset: 0;
white-space: nowrap;
pointer-events: none;
}
.vx-disclaimer__degradation::before {
color: #fff;
opacity: 0.55;
transform: translateX(0.055em);
clip-path: inset(37% 0 46% 0);
}
.vx-disclaimer__degradation::after {
color: #080808;
opacity: 0.82;
transform: translateX(-0.045em);
clip-path: inset(58% 0 27% 0);
}
/* Bouton
========================================================= */
.vx-disclaimer__enter {
position: relative;
display: block;
min-height: 2.8rem;
margin: 0 auto;
padding: 0.72rem 1.7rem;
font-family:
"iA Writer Quattro",
ui-monospace,
monospace;
font-size: 0.76rem;
font-weight: 400;
line-height: 1;
letter-spacing: 0.11em;
text-transform: uppercase;
color: #eee;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.38);
cursor: pointer;
transition:
color 0.2s ease,
background-color 0.2s ease,
border-color 0.2s ease,
transform 0.15s ease;
}
.vx-disclaimer__enter:hover {
color: #111;
background: #eee;
border-color: #eee;
}
.vx-disclaimer__enter:active {
transform: translateY(1px);
}
.vx-disclaimer__enter:focus-visible {
outline: 2px solid #eee;
outline-offset: 4px;
}
/* Blocage du fond
========================================================= */
body.vx-modal-open {
overflow: hidden;
}
/* Animations
========================================================= */
@keyframes vx-disclaimer-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes vx-disclaimer-panel-in {
from {
opacity: 0;
transform: translateY(7px) scale(0.992);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Mobile
========================================================= */
@media (max-width: 36rem) {
.vx-disclaimer {
padding: 0.75rem;
}
.vx-disclaimer__panel {
width: 100%;
padding:
2.15rem 1.3rem 1.85rem;
}
.vx-disclaimer__panel::before {
inset: 0.4rem;
}
.vx-disclaimer__text {
max-width: 31ch;
margin-bottom: 1.5rem;
font-size: clamp(0.94rem, 4.1vw, 1.05rem);
line-height: 1.62;
}
.vx-disclaimer__enter {
width: min(100%, 16rem);
}
}
/* Réduction des mouvements
========================================================= */
@media (prefers-reduced-motion: reduce) {
.vx-disclaimer:not([hidden]),
.vx-disclaimer__panel {
animation: none;
}
.vx-disclaimer__enter {
transition: none;
}
}
/* =========================================================
02. FLUX TEXTUEL — chapitres, paragraphes, respirations
========================================================= */
section {
display: none;
}
section.is-open {
display: inline;
}
p {
display: inline;
margin: 1.5em 0;
font-size: var(--font-size-labor);
z-index: 0;
}
h2 {
font-weight: 600;
font-size: clamp(1.55rem, 4.2vw, 2rem);
text-align: center;
padding: 10rem 0 0 0;
border-bottom: 1px solid var(--color-ink);
}
/* CHAPITRES */
h3 {
position: relative;
display: block;
width: var(--measure-text);
clear: both;
margin-top: 15rem;
margin-left: -15px;
margin-bottom: 1.5rem;
padding-right: 2.4rem;
padding-bottom: 0.28rem;
border-bottom: 1px solid var(--color-ink);
font-variant: all-small-caps;
font-size: clamp(1.35rem, 3.5vw, 1.5rem);
line-height: 1.1;
letter-spacing: 0.06em;
counter-increment: chap;
filter: url("#vx-filter-h2-warp");
}
h3::before {
content: counter(chap) ". ";
}
.vx-text-lead {
font-variant-caps: small-caps;
letter-spacing: 0.03em;
}
div.vx-text-break {
margin: 1.5rem 0;
}
div.vx-text-break.is-large {
margin: 25rem 0;
}
div.vx-check-option {
display: grid;
grid-template-columns: 1.15em 1fr;
column-gap: 0.75em;
align-items: start;
margin: 1rem 2px;
}
div.vx-check-option,
div.vx-check-option input[type="checkbox"],
div.vx-check-option label {
cursor: pointer;
font-size: var(--font-size-labor);
}
div.vx-check-option input[type="checkbox"] {
grid-column: 1;
margin: 0.25em 0 0 0;
}
div.vx-check-option label {
grid-column: 2;
display: block;
}
span.vx-asterism {
display: block;
text-align: center;
margin: 5rem;
font-size: var(--font-size-labor);
}
p span.vx-inline-tab {
display: inline-block;
position: relative;
}
.vx-enumeration {
margin: 0;
padding: 0;
-webkit-mask-image: linear-gradient(to bottom,
var(--color-ink) 0%,
transparent 100%);
mask-image: linear-gradient(to bottom, var(--color-ink) 0%, transparent 100%);
}
/* =========================================================
03. HERO — titre, seuil d’entrée, résumé général
========================================================= */
.vx-page-header.vx-hero,
.vx-page-header.vx-hero * {
box-sizing: border-box;
}
.vx-page-header.vx-hero {
position: relative;
left: 50%;
display: grid;
grid-template-rows: auto minmax(13rem, 1fr) auto auto;
gap: 1.15rem;
width: var(--measure-wide);
max-width: var(--measure-wide);
min-height: clamp(26rem, 58svh, 34rem);
margin: 1.5rem 0 var(--space-5);
padding: 1rem 0 0;
transform: translateX(-50%);
background: var(--color-paper);
color: var(--color-ink);
font-family: var(--font-interface);
}
.vx-hero__body {
position: relative;
display: block;
align-items: center;
padding: 2.5rem 0 1.5rem;
}
.vx-hero__title-block {
position: relative;
min-width: 0;
padding: 1.45rem 0 2.65rem;
}
.vx-hero__title-system {
isolation: isolate;
width: fit-content;
}
.vx-title__filters {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.vx-title {
position: relative;
z-index: 3;
display: inline-block;
margin: 0;
padding: 0;
border: 0;
color: transparent;
font: 700 clamp(3.9rem, 13vw, 6.4rem)/0.86 var(--font-interface);
text-transform: uppercase;
transform: none;
animation: none;
}
.vx-title span {
display: inline-block;
color: transparent;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px var(--color-ink);
filter: url("#vx-filter-title-warp") contrast(2);
text-shadow:
0.055em 0.04em 0 var(--color-paper),
0.065em 0.05em 0 var(--color-ink),
-0.035em 0.025em 0 var(--color-paper),
-0.045em 0.035em 0 var(--color-ink);
}
.vx-hero__subtitle {
display: block;
margin: 1.15rem 0 0 1.15rem;
color: var(--color-ink);
font: 400 clamp(1.05rem, 3.35vw, 1.55rem) / 1 var(--font-interface);
letter-spacing: 0.14em;
text-align: right;
font-variant: all-petite-caps;
}
.vx-hero__controls {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.9rem;
padding-bottom: 1rem;
}
.vx-hero__read {
color: var(--color-ink);
font-size: var(--font-size-menu);
line-height: 1;
letter-spacing: 0.08em;
}
.vx-hero__rule {
display: block;
height: 1px;
border-bottom: 1px solid var(--color-ink);
}
.vx-hero__summary-toggle {
display: grid;
place-items: center;
width: 1.9rem;
height: 1.9rem;
padding: 0;
/*border: var(--border-ink);*/
border: none;
border-radius: var(--radius-square);
appearance: none;
background: var(--color-paper);
color: var(--color-ink);
font: 700 1rem/1 var(--font-interface);
cursor: pointer;
font-family: "Font Awesome 6 Free";
}
.vx-hero__summary-toggle:hover,
.vx-hero__summary-toggle.is-open {
background: var(--color-ink);
color: var(--color-paper);
}
.vx-hero__summary-toggle i {
pointer-events: none;
}
.vx-hero__summary {
justify-self: end;
width: min(100%, 35rem);
margin: -0.25rem 0 1rem auto;
padding: 0.75rem;
background: var(--color-paper);
}
.vx-hero__summary .vx-summary__head {
margin-bottom: 0.5rem;
}
.vx-hero__summary .vx-summary__text {
text-align: left;
}
#site-intro-summary p {
font-size: var(--font-size-body);
}
#vx-epigraph {
display: block;
width: calc(var(--measure-full) / 5);
margin: 0 0 1rem auto;
padding-top: 10rem;
font-size: var(--font-size-body);
font-style: italic;
text-align: justify;
}
#vx-epigraph span {
display: block;
margin-top: 0.2rem;
font-style: normal;
text-align: right;
}
#vx-epigraph span::before {
content: "— ";
}
@media (max-width: 720px) {
.vx-page-header.vx-hero {
left: 0;
width: 100%;
max-width: 100%;
min-height: 26rem;
margin-top: 0.75rem;
transform: none;
}
.vx-hero__title {
font-size: clamp(3rem, 17vw, 4.3rem);
}
.vx-hero__subtitle {
font-size: clamp(0.8rem, 4.4vw, 1rem);
letter-spacing: 0.075em;
}
.vx-hero__tools span {
width: 1.8rem;
height: 1.8rem;
}
.vx-hero__controls {
gap: 0.65rem;
}
.vx-hero__title-system {
--hero-ghost-radius: 1.05rem;
}
#vx-epigraph {
font-size: var(--font-size-small);
width: calc(var(--measure-full) / 1.5);
}
.vx-hero__title-system {
padding: 1.05rem 0 2.25rem;
}
.vx-title__ghosts {
top: 1.05rem;
}
.vx-title__ghosts span {
font-size: clamp(3rem, 17vw, 4.3rem);
}
.vx-title__subtitle {
margin-left: 0.35rem;
font-size: clamp(0.8rem, 4.4vw, 1rem);
letter-spacing: 0.075em;
}
}
/* =========================================================
04. READER SHELL — cockpit, TOC, progression
========================================================= */
.vx-reader__unfold-all {
display: none;
}
.vx-reader,
.vx-reader * {
box-sizing: border-box;
}
.vx-reader {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 4200;
display: block;
min-height: var(--reader-shell-height);
padding: 0.55rem max(1rem, calc((100vw - var(--measure-wide)) / 2));
background: var(--color-paper);
color: var(--color-ink);
border-bottom: 1px solid var(--color-ink);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
font-family: "iA Writer Quattro", "Inter", Helvetica, sans-serif;
font-size: var(--font-size-small);
line-height: 1;
}
.vx-reader__bar {
display: flex;
align-items: center;
gap: 0.5rem;
}
.vx-reader__current {
min-width: 0;
max-width: min(42vw, 34rem);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-variant: all-small-caps;
letter-spacing: 0.055em;
font-size: var(--font-size-body);
}
.vx-reader__current::before {
content: attr(data-chapter) ". ";
}
.vx-reader__group--field {
position: relative;
display: inline-flex;
align-items: center;
}
.vx-reader__field {
--field: var(--vx-field, 0);
--field-hue: calc(210 - (var(--field) * 210));
--field-color: hsl(var(--field-hue) 88% 48%);
display: inline-block;
width: 0.62rem;
height: 0.62rem;
min-width: 0.62rem;
padding: 0;
border: 1px solid var(--color-ink);
border-radius: 50%;
appearance: none;
background: var(--field-color);
box-shadow:
0 0 calc(0.15rem + var(--field) * 0.85rem) hsl(var(--field-hue) 88% 48% / calc(0.12 + var(--field) * 0.38));
cursor: pointer;
transform: scale(calc(0.82 + var(--field) * 0.28));
transition:
background 0.35s ease,
box-shadow 0.35s ease,
transform 0.35s ease;
}
.vx-reader__field:focus-visible,
.vx-reader__field.is-open {
outline: 1px solid var(--color-ink);
outline-offset: 4px;
}
html[data-vx-field-level="0"] .vx-reader__field {
background: var(--color-paper);
box-shadow: none;
}
@keyframes vx-field-heat-breath {
0%,
100% {
transform: scale(1.08);
}
50% {
transform: scale(1.28);
}
}
.vx-reader__unfold-count {
display: inline-flex !important;
align-items: center;
justify-content: center;
position: absolute !important;
top: -0.25rem !important;
right: -0.25rem !important;
z-index: 99999 !important;
min-width: 1rem;
height: 1rem;
padding: 0 0.15rem;
background: var(--color-danger);
color: var(--color-paper);
border: 1px solid var(--color-danger);
border-radius: 999px;
font:
900 0.72rem/1 "iA Writer Quattro",
"Inter",
Helvetica,
sans-serif;
box-shadow: 0 0 0 2px var(--color-paper);
pointer-events: none !important;
}
.vx-reader__unfold-count[hidden] {
display: none !important;
}
.vx-reader__unfold-count.is-popping {
animation: vx-unfold-dot-pop 0.38s ease-out;
}
/* Correction compteur d’ouverture globale : la pastille est positionnée par rapport au bouton. */
.vx-reader .vx-reader__unfold-all.vx-reader__button {
position: relative !important;
overflow: visible !important;
}
.vx-reader .vx-reader__unfold-all .vx-reader__unfold-count {
position: absolute !important;
top: -0.25rem !important;
right: -0.25rem !important;
}
.vx-reader__spacer {
flex: 1 1 auto;
}
.vx-reader__button,
.vx-reader .vx-reader__unfold-all {
position: static !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
min-height: 2rem;
border: 1px solid var(--color-ink);
border-radius: 999px;
padding: 0.45rem 0.7rem;
background: #fff;
color: var(--color-ink);
font:
700 0.72rem/1 "iA Writer Quattro",
"Inter",
Helvetica,
sans-serif;
letter-spacing: 0.02em;
cursor: pointer;
box-shadow: none;
}
.vx-reader__button:hover,
.vx-reader__button.is-active,
.vx-reader .vx-reader__unfold-all:hover,
.vx-reader__toc button:hover {
background: var(--color-ink);
color: #fff;
}
.vx-reader .vx-reader__unfold-all.is-exhausted {
opacity: 0.42;
cursor: default;
}
.vx-reader .vx-reader__unfold-all.is-exhausted:hover {
background: #fff;
color: var(--color-ink);
}
.vx-reader__button-label,
.vx-reader .vx-reader__unfold-all.is-exhausted .vx-reader__unfold-count {
display: none;
}
.vx-reader__keyboard-toggle[hidden] {
display: none !important;
}
.vx-reader__keyboard-toggle i {
pointer-events: none;
}
.vx-reader .vx-reader__unfold-all[hidden] {
display: none !important;
}
.vx-reader .vx-reader__unfold-all.is-confirming {
background: var(--color-ink);
color: var(--color-paper);
}
.vx-unfold-confirm {
position: absolute;
top: calc(100% + 0.45rem);
right: max(1rem, calc((100vw - var(--measure-wide)) / 2));
z-index: 4400;
width: min(22rem, calc(100vw - 2rem));
padding: 0.75rem;
border: 1px solid var(--color-ink);
background: var(--color-paper);
color: var(--color-ink);
box-shadow: var(--shadow-floating-panel);
font-family: var(--font-interface);
text-align: left;
opacity: 0;
transform: translateY(-0.25rem);
transition:
opacity 0.16s ease,
transform 0.16s ease;
}
.vx-unfold-confirm[hidden] {
display: none !important;
}
.vx-unfold-confirm.is-open {
opacity: 1;
transform: translateY(0);
}
.vx-unfold-confirm strong {
display: block;
margin-bottom: 0.4rem;
font:
900 0.75rem/1.1 var(--font-interface);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.vx-unfold-confirm p {
display: block;
margin: 0 0 0.75rem;
font:
400 0.78rem/1.35 var(--font-interface);
text-align: left;
}
.vx-unfold-confirm__actions {
display: flex;
justify-content: flex-end;
gap: 0.45rem;
}
.vx-unfold-confirm__actions button {
border: 1px solid var(--color-ink);
background: var(--color-paper);
color: var(--color-ink);
padding: 0.42rem 0.62rem;
font:
700 0.68rem/1 var(--font-interface);
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
}
.vx-unfold-confirm__actions button:hover,
.vx-unfold-confirm__actions button:focus-visible,
.vx-unfold-confirm__actions [data-unfold-confirm] {
background: var(--color-ink);
color: var(--color-paper);
}
.vx-unfold-confirm__actions [data-unfold-confirm]:hover,
.vx-unfold-confirm__actions [data-unfold-confirm]:focus-visible {
outline: 2px solid var(--color-ink);
outline-offset: 2px;
}
@media screen and (max-width: 700px) {
.vx-unfold-confirm {
right: 0.75rem;
width: min(21rem, calc(100vw - 1.5rem));
}
.vx-unfold-confirm__actions {
display: grid;
grid-template-columns: 1fr 1fr;
}
.vx-unfold-confirm__actions button {
width: fit-content;
min-height: 1.5rem;
}
}
.vx-reader__progress {
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: transparent;
}
.vx-reader__progress span {
display: block;
width: 0;
height: 100%;
background: var(--color-ink);
transition: width 0.08s linear;
}
.vx-reader__toc {
position: absolute;
top: calc(100% + 0.4rem);
left: max(1rem, calc((100vw - var(--measure-wide)) / 2));
width: min(24rem, calc(100vw - 2rem));
max-height: min(70vh, 34rem);
overflow: auto;
border: 1px solid var(--color-ink);
background: #fff;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}
.vx-reader__toc[hidden] {
display: none;
}
.vx-reader__unfold-status {
position: sticky;
top: 0;
z-index: 2;
display: block;
padding: 0.62rem 1rem;
border-bottom: 1px solid #ddd;
background: var(--color-danger);
color: var(--color-paper);
font:
700 0.76rem/1.2 "iA Writer Quattro",
"Inter",
Helvetica,
sans-serif;
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
cursor: default;
pointer-events: none;
}
.vx-reader__unfold-status[hidden] {
display: none;
}
.vx-reader__toc button {
display: block;
width: 100%;
border: 0;
border-bottom: 1px solid #eee;
padding: 0.8rem 1rem;
background: #fff;
color: var(--color-ink);
font:
400 0.85rem/1.25 "iA Writer Quattro",
"Inter",
Helvetica,
sans-serif;
text-align: left;
cursor: pointer;
}
.vx-reader__toc button.is-read {
background: #fafafa;
color: #8a8a8a;
}
.vx-reader__toc button.is-current {
background: #f4f4f2;
color: var(--color-ink);
font-weight: 700;
}
.vx-reader__toc button.is-read:hover,
.vx-reader__toc button.is-current:hover {
background: var(--color-ink);
color: #fff;
}
[data-scroll-resist].is-resisting::before {
content: "";
position: absolute;
left: -1.2rem;
top: 0;
bottom: 0;
width: 2px;
background: repeating-linear-gradient(to bottom,
var(--color-line) 0,
var(--color-line) 4px,
transparent 4px,
transparent 8px);
}
:is(.vx-reader__button,
.vx-reader .vx-reader__unfold-all,
.vx-selection-toolbar button,
.vx-summary-toggle,
.vx-ai-prompt-toggle) {
/*border: var(--border-ink);*/
border: none;
background: var(--color-paper);
color: var(--color-ink);
font-family: var(--font-interface);
}
.vx-reveal-trigger.vx-pill,
.vx-reveal-trigger.vx-accept-continue {
border: var(--border-ink);
background: var(--color-paper);
color: var(--color-ink);
font-family: var(--font-interface);
}
:is(.vx-reader__button,
.vx-reader .vx-reader__unfold-all,
.vx-reveal-trigger.vx-pill,
.vx-selection-toolbar,
.vx-selection-toolbar button,
.vx-summary-toggle,
.vx-ai-prompt-toggle) {
border-radius: var(--radius-square);
}
:is(.vx-reader__button,
.vx-reader .vx-reader__unfold-all,
.vx-reveal-trigger.vx-pill,
.vx-reveal-trigger.vx-accept-continue,
.vx-selection-toolbar button,
.vx-summary-toggle,
.vx-ai-prompt-toggle):hover,
:is(.vx-reader__button,
.vx-summary-toggle,
.vx-ai-prompt-toggle).is-active {
background: var(--color-ink);
color: var(--color-paper);
}
/* 04b. LOG / REGISTRE */
/* Registre de lecture */
.vx-reader__group--history {
display: inline-flex;
align-items: center;
}
.vx-reader__history {
position: absolute;
top: calc(100% + 0.4rem);
right: max(1rem, calc((100vw - var(--measure-wide)) / 2));
z-index: 4400;
width: min(32rem, calc(100vw - 2rem));
max-height: min(72vh, 34rem);
overflow: auto;
border: 1px solid var(--color-ink);
background: var(--color-paper);
color: var(--color-ink);
box-shadow: var(--shadow-floating-panel);
font-family: var(--font-interface);
text-align: left;
}
.vx-reader__history[hidden] {
display: none !important;
}
.vx-reader__history-head {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.7rem 0.85rem;
border-bottom: 1px solid var(--color-ink);
background: var(--color-paper);
}
.vx-reader__history-head strong {
font:
900 0.74rem/1 var(--font-interface);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.vx-reader__history-close {
display: inline-grid;
place-items: center;
width: 1.5rem;
height: 1.5rem;
border: 0;
background: transparent;
color: var(--color-ink);
cursor: pointer;
}
.vx-reader__history-close:hover,
.vx-reader__history-close:focus-visible {
background: var(--color-ink);
color: var(--color-paper);
outline: none;
}
.vx-reader__history-state {
display: grid;
gap: 0.24rem;
padding: 0.7rem 0.85rem;
border-bottom: 1px solid var(--color-line);
background:
repeating-linear-gradient(to right,
rgba(0, 0, 0, 0.04) 0,
rgba(0, 0, 0, 0.04) 1px,
transparent 1px,
transparent 7px);
font:
700 0.72rem/1.3 var(--font-interface);
}
.vx-reader__history-state strong {
font-size: 0.66rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.vx-reader__history-filters {
position: sticky;
top: 2.9rem;
z-index: 2;
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
padding: 0.55rem 0.85rem;
border-bottom: 1px solid var(--color-line);
background: var(--color-paper);
}
.vx-reader__history-filters button {
border: 1px solid var(--color-ink);
background: var(--color-paper);
color: var(--color-ink);
padding: 0.32rem 0.48rem;
font:
700 0.62rem/1 var(--font-interface);
letter-spacing: 0.035em;
text-transform: uppercase;
cursor: pointer;
}
.vx-reader__history-filters button:hover,
.vx-reader__history-filters button.is-active {
background: var(--color-ink);
color: var(--color-paper);
}
.vx-reader__history-list {
padding: 0.35rem 0;
}
.vx-reader__history-entry {
display: grid;
grid-template-columns: 4.6rem 5.8rem 1fr;
gap: 0.6rem;
align-items: baseline;
padding: 0.55rem 0.85rem;
border-bottom: 1px solid #eee;
}
.vx-reader__history-entry time {
color: var(--color-muted);
font:
400 0.66rem/1.25 var(--font-interface);
font-variant-numeric: tabular-nums;
}
.vx-reader__history-type {
font:
900 0.58rem/1.25 var(--font-interface);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.vx-reader__history-entry p {
display: block;
margin: 0;
font:
400 0.76rem/1.35 var(--font-interface);
text-align: left;
}
.vx-reader__history-entry.is-field .vx-reader__history-type {
color: var(--color-danger);
}
.vx-reader__history-entry.is-toast .vx-reader__history-type {
color: var(--color-ink);
}
.vx-reader__history-entry.is-audio .vx-reader__history-type {
font-style: italic;
}
.vx-reader__history-empty {
display: block;
margin: 0;
padding: 0.85rem;
color: var(--color-muted);
font:
400 0.76rem/1.35 var(--font-interface);
text-align: left;
}
@media screen and (max-width: 700px) {
.vx-reader__history {
left: 0.75rem;
right: 0.75rem;
width: auto;
max-height: min(68vh, 32rem);
}
.vx-reader__history-entry {
grid-template-columns: 4.2rem 1fr;
gap: 0.3rem 0.6rem;
}
.vx-reader__history-type {
grid-column: 2;
grid-row: 1;
}
.vx-reader__history-entry p {
grid-column: 1 / -1;
}
}
/* =========================================================
05. RÉVÉLATION & RÉFÉRENCES — lire-plus, notes, drawer
========================================================= */
.vx-drawer.is-expanded {
max-height: 82vh;
}
.vx-drawer__content {
max-width: var(--measure-text);
max-height: calc(min(58vh, 36rem) - 3.25rem);
margin: 0 auto;
padding: 1rem 0 1.35rem;
overflow: visible;
outline: none;
}
.vx-drawer.is-expanded .vx-drawer__content {
max-width: var(--measure-wide);
max-height: calc(82vh - 3.25rem);
}
.vx-drawer__content p {
display: block;
margin: 0 0 0.8rem;
}
.vx-drawer__content img.vx-thumb {
float: left;
width: 30%;
margin: 0 1rem 0 0;
}
.vx-recall-link {
cursor: help;
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 0.18em;
}
/* NOTES ET CITATIONS */
.vx-endnotes {
display: none;
}
span.vx-reference-call sup,
span.vx-note-call sup {
display: none;
}
span.vx-reference-call[data-ref],
span.vx-note-call[data-ref] {
position: relative;
text-decoration: underline dotted var(--color-ink);
cursor: pointer;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
span.vx-reference-call[data-ref]:hover,
span.vx-note-call[data-ref]:hover,
span.vx-reference-call[data-ref].is-active,
span.vx-note-call[data-ref].is-active {
text-decoration: underline solid var(--color-ink);
color: var(--color-ink);
}
.vx-text-prompt,
span.vx-reference-call[data-ref]::after,
span.vx-note-call[data-ref]::after {
display: none !important;
content: none !important;
}
.vx-drawer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 5000;
display: none;
box-sizing: border-box;
padding: 1.1rem 3.25rem 1.25rem 1.25rem;
overflow-y: scroll;
background: var(--color-paper);
color: var(--color-ink);
border-top: 1px solid var(--color-ink);
box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.12);
font-size: var(--font-size-body);
line-height: 1.45;
text-align: left;
hyphens: auto;
max-height: min(30vh, 36rem);
padding: 0;
}
.vx-drawer.is-open {
display: block;
}
.vx-drawer__head {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
max-width: var(--measure-text);
margin: 0 auto;
padding: 0.7rem 0 0.55rem;
border-bottom: 1px solid var(--color-line);
background: var(--color-paper);
}
.vx-drawer__meta {
min-width: 0;
display: flex;
align-items: baseline;
gap: 0.65rem;
}
.vx-drawer__label {
flex: 0 0 auto;
padding: 0.16rem 0.42rem 0.18rem;
border: 1px solid var(--color-ink);
border-radius: var(--radius-square);
font: 900 0.62rem/1 var(--font-interface);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.vx-drawer__context {
min-width: 0;
overflow: hidden;
color: var(--color-muted);
font: 700 0.72rem/1.15 var(--font-interface);
letter-spacing: 0.03em;
text-overflow: ellipsis;
white-space: nowrap;
}
.vx-drawer__close {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 1.85rem;
height: 1.85rem;
padding: 0;
/*border: 1px solid var(--color-ink);*/
border: none;
border-radius: var(--radius-square);
background: var(--color-paper);
color: var(--color-ink);
font: 900 0.75rem/1 "Font Awesome 6 Free";
cursor: pointer;
}
.vx-drawer__close:hover {
background: var(--color-ink);
color: var(--color-paper);
}
.vx-drawer[data-drawer-kind="prompt"] .vx-drawer__label::before {
content: "\e2ca";
margin-right: 0.35em;
font-family: "Font Awesome 6 Free";
}
.vx-drawer[data-drawer-kind="citation"] .vx-drawer__label::before,
.vx-drawer[data-drawer-kind="note"] .vx-drawer__label::before {
content: "\f10d";
margin-right: 0.35em;
font-family: "Font Awesome 6 Free";
}
.vx-drawer[data-drawer-kind="reflexion"] .vx-drawer__label::before {
content: "\f075";
margin-right: 0.35em;
font-family: "Font Awesome 6 Free";
}
.vx-drawer[data-drawer-kind="rappel"] .vx-drawer__label::befor {
content: "\f187";
margin-right: 0.35em;
font-family: "Font Awesome 6 Free";
}
.vx-drawer__content {
max-width: 30rem;
margin: 0 auto;
padding-top: 0.75rem;
overflow-wrap: break-word;
text-align: justify;
hyphens: auto;
}
.vx-drawer__content p {
font-size: var(--font-size-body);
}
.vx-author {
display: block;
text-align: right;
}
.vx-author::before {
content: "— ";
}
.vx-text-sequel {
display: none;
}
.vx-reveal-trigger {
cursor: pointer;
display: inline-block;
font-weight: 700;
white-space: nowrap;
border-radius: 0;
/* text-decoration: underline; */
}
.vx-reveal-trigger:hover {
color: var(--color-ink);
}
.vx-reveal-trigger:focus-visible {
outline: 1px solid var(--color-ink);
outline-offset: 0.18em;
}
.vx-reveal-trigger.vx-pill {
display: inline-block;
padding: 0 0.25rem 0.2rem 0.25rem;
line-height: 1.15;
font-weight: 700;
letter-spacing: 0.05em;
vertical-align: 0.08em;
white-space: nowrap;
text-transform: uppercase;
font-variant: all-petite-caps;
border-radius: 0;
font-size: var(--font-size-accent);
text-decoration: none;
filter: url(#vx-filter-h2-warp);
}
.vx-reveal-trigger.vx-accept-continue {
display: inline-block;
padding: 0.08em 0.34em 0.1em;
border: 1px solid currentColor;
font-size: 0.72em;
font-weight: 700;
letter-spacing: 0.05em;
vertical-align: 0.08em;
white-space: nowrap;
color: var(--color-ink);
text-transform: uppercase;
}
.vx-reveal-trigger.vx-accept-continue:hover {
background: var(--color-ink);
color: var(--color-paper);
}
.vx-reveal-trigger.vx-pill:not(.is-unfolded):hover {
background: var(--color-ink);
color: var(--color-paper);
}
.vx-reveal-trigger.is-unfolded {
color: var(--color-ink);
cursor: text;
pointer-events: none;
text-decoration: none;
font-weight: initial;
}
.vx-reveal-trigger.vx-pill.is-unfolded {
font-weight: 700;
opacity: 0.25;
}
.vx-reveal-trigger.is-unfolded:not(.vx-pill)::before,
.vx-reveal-trigger.is-unfolded:not(.vx-pill)::after {
content: "";
}
/* =========================================================
06. Sélection, préférences, toasts
========================================================= */
.vx-reader .vx-reader__unfold-all.vx-reader__button {
position: relative !important;
overflow: visible;
}
.vx-reader__button-count {
display: inline-flex !important;
align-items: center;
justify-content: center;
position: absolute !important;
top: -0.25rem !important;
right: -0.25rem !important;
z-index: 99999 !important;
min-width: 1rem;
height: 1rem;
padding: 0 0.15rem;
background: var(--color-danger);
color: var(--color-paper);
border: 1px solid var(--color-danger);
border-radius: 999px;
font:
900 0.72rem/1 "iA Writer Quattro",
"Inter",
Helvetica,
sans-serif;
box-shadow: 0 0 0 2px var(--color-paper);
pointer-events: none !important;
}
.vx-reader__button-count[hidden] {
display: none !important;
}
.vx-selection-toolbar button,
.vx-selection-menu button,
.vx-summary-toggle,
.vx-ai-prompt-toggle {
border: 1px solid var(--color-ink);
background: var(--color-paper);
color: var(--color-ink);
font:
700 0.72rem/1 "iA Writer Quattro",
"Inter",
Helvetica,
sans-serif;
cursor: pointer;
}
.vx-selection-toolbar button:hover,
.vx-selection-menu button:hover .vx-summary-toggle:hover,
.vx-summary-toggle.is-open,
.vx-ai-prompt-toggle:hover,
.vx-ai-prompt-toggle.is-active {
background: var(--color-ink);
color: var(--color-paper);
}
.vx-summary-toggle::before {
content: "";
display: block;
width: 1.05rem;
height: 1.05rem;
background: currentColor;
-webkit-mask: url("../media/images/icons/resume.svg") center / contain no-repeat;
mask: url("../media/images/icons/resume.svg") center / contain no-repeat;
}
.vx-selection-toolbar,
.vx-selection-toolbar * {
box-sizing: border-box;
}
.vx-selection-toolbar {
position: fixed;
z-index: 6300;
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.28rem;
border: 1px solid var(--color-ink);
border-radius: 999px;
background: var(--color-paper);
color: var(--color-ink);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
opacity: 0;
transform: translateY(0.25rem);
transition:
opacity 0.14s ease,
transform 0.14s ease;
}
.vx-selection-toolbar.is-visible {
opacity: 1;
transform: translateY(0);
}
.vx-selection-toolbar button {
display: grid;
place-items: center;
width: 1.85rem;
height: 1.85rem;
border-radius: 999px;
padding: 0;
}
.vx-selection-menu__wrap {
position: relative;
display: inline-flex;
}
.vx-selection-menu {
position: absolute;
right: 0;
top: calc(100% + 0.4rem);
z-index: 6400;
display: grid;
gap: 0.15rem;
min-width: min(17rem, calc(100vw - 1rem));
padding: 0.25rem;
border: 1px solid var(--color-ink);
border-radius: 0.75rem;
background: var(--color-paper);
color: var(--color-ink);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
.vx-selection-menu[hidden] {
display: none;
}
.vx-selection-menu button {
display: flex !important;
align-items: center;
justify-content: flex-start;
width: 100% !important;
height: auto !important;
min-height: 2.15rem;
padding: 0.55rem 0.7rem !important;
border: 0 !important;
border-radius: 0.55rem !important;
background: var(--color-paper);
color: var(--color-ink);
font:
700 0.72rem/1.15 "iA Writer Quattro",
"Inter",
Helvetica,
sans-serif;
text-align: left;
white-space: nowrap;
cursor: pointer;
}
.vx-selection-menu button[hidden] {
display: none;
}
.vx-selection-menu button:hover {
background: var(--color-ink);
color: var(--color-paper);
}
.vx-selection-menu__label {
display: block;
padding: 0.55rem 0.7rem 0.25rem;
color: var(--color-muted);
font:
700 0.66rem/1.1 "iA Writer Quattro",
"Inter",
Helvetica,
sans-serif;
letter-spacing: 0.04em;
text-transform: uppercase;
}
@media (max-width: 720px),
(hover: none),
(pointer: coarse) {
.vx-selection-menu {
position: fixed;
left: 0.75rem;
right: 0.75rem;
top: auto;
bottom: calc(1rem + env(safe-area-inset-bottom));
width: auto;
min-width: 0;
max-height: min(55vh, 24rem);
overflow-y: auto;
transform: none;
}
.vx-selection-menu button {
min-height: 2.6rem;
font-size: var(--font-size-small);
}
}
.vx-summary-toggle {
position: absolute;
right: 0;
top: 100%;
z-index: 2;
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
padding: 0;
border-radius: 999px;
background: var(--color-paper);
font-size: var(--font-size-small);
line-height: 1;
transform: translateY(-50%);
}
.vx-summary-toggle i {
transition: transform 0.16s ease;
}
.vx-summary-toggle.is-open i {
transform: rotate(180deg);
}
.vx-summary,
.vx-summary * {
box-sizing: border-box;
}
.vx-summary {
display: block;
width: min(100%, 35rem);
margin: 0 0 1.75rem;
padding: 0 0.75rem;
font-family: "iA Writer Quattro", "Inter", Helvetica, sans-serif;
font-size: var(--font-size-small);
line-height: 1.35;
overflow-anchor: none;
}
.vx-summary[hidden] {
display: none;
}
.vx-summary p,
.vx-summary ol {
display: block;
margin: 0 0 0.65rem;
font-size: var(--font-size-small);
}
.vx-summary p:last-child,
.vx-summary ol:last-child {
margin-bottom: 0;
}
.vx-summary ol {
padding-left: 1.25rem;
}
.vx-summary__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin: 0 0 0.55rem;
}
.vx-summary__title {
font:
700 0.82rem/1 "iA Writer Quattro",
"Inter",
Helvetica,
sans-serif;
}
.vx-summary__modes {
display: inline-flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.25rem;
}
.vx-summary__modes button {
border: 1px solid var(--color-ink);
border-radius: var(--radius-square);
background: var(--color-paper);
color: var(--color-ink);
padding: 0.28rem 0.48rem;
font:
700 0.62rem/1 "iA Writer Quattro",
"Inter",
Helvetica,
sans-serif;
cursor: pointer;
}
.vx-summary__modes button:hover,
.vx-summary__modes button.is-active {
background: var(--color-ink);
color: var(--color-paper);
}
.vx-summary__text {
display: block;
margin: 0;
}
.vx-summary__text.is-streaming::after {
content: "▋";
display: inline-block;
margin-left: 0.08em;
animation: vx-ia-stream-cursor 0.85s steps(1) infinite;
}
.vx-selection-mobile {
position: fixed;
top: var(--reader-shell-height);
left: 0;
right: 0;
z-index: 6500;
display: flex;
justify-content: center;
padding: 0 max(0.55rem, calc((100vw - var(--measure-wide)) / 2)) 0 0.55rem;
pointer-events: none;
}
.vx-selection-mobile[hidden] {
display: none;
}
.vx-selection-mobile__inner {
display: grid;
gap: 0.35rem;
width: var(--measure-full);
padding: 0.7rem;
border: 1px solid var(--color-ink);
border-top: 0;
border-radius: 0 0 0.9rem 0.9rem;
background: var(--color-paper);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
pointer-events: auto;
}
.vx-selection-mobile__head {
display: block;
padding: 0.05rem 0.15rem 0.45rem;
border-bottom: 1px solid var(--color-line);
text-align: left;
}
.vx-selection-mobile__head strong {
display: block;
font:
700 0.78rem/1 "iA Writer Quattro",
"Inter",
sans-serif;
text-transform: uppercase;
letter-spacing: 0.055em;
}
.vx-selection-mobile__head span {
display: block;
margin-top: 0.25rem;
color: var(--color-muted);
font:
400 0.68rem/1.2 "iA Writer Quattro",
"Inter",
sans-serif;
}
.vx-selection-mobile button {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.55rem;
width: 100%;
min-height: 2.35rem;
padding: 0.55rem 0.65rem;
border: 0;
border-radius: 0.55rem;
background: var(--color-paper);
color: var(--color-ink);
font:
700 0.72rem/1.1 "iA Writer Quattro",
"Inter",
sans-serif;
text-align: left;
cursor: pointer;
}
.vx-selection-mobile button:hover {
background: var(--color-ink);
color: var(--color-paper);
}
.vx-selection-mobile button i {
width: 1rem;
text-align: center;
}
.vx-selection-mobile__reminder-label {
display: block;
padding: 0.45rem 0.15rem 0.15rem;
color: var(--color-muted);
font:
700 0.66rem/1 "iA Writer Quattro",
"Inter",
sans-serif;
text-transform: uppercase;
letter-spacing: 0.055em;
}
.vx-selection-mobile__reminders {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.25rem;
}
.vx-selection-mobile__reminders button {
justify-content: center;
min-height: 2rem;
padding: 0.45rem 0.35rem;
border: 1px solid var(--color-ink);
border-radius: 999px;
text-align: center;
}
@media (max-width: 720px) {
.vx-reader__tools-panel .vx-reader__button-label,
.vx-reader__button:focus-visible .vx-reader__button-label,
.vx-reader__button:hover .vx-reader__button-label {
display: inline !important;
}
.vx-summary__head {
align-items: flex-start;
flex-direction: column;
}
.vx-summary__modes {
justify-content: flex-start;
}
.vx-summary {
width: min(100%, calc(100vw - 2rem));
max-width: calc(100vw - 2rem);
margin-right: 0;
margin-left: 0;
padding: 0.6rem 0.65rem;
}
.vx-summary,
.vx-summary p {
max-width: 100%;
overflow-wrap: anywhere;
hyphens: none;
}
.vx-reader__toc {
max-height: min(50vh, 28rem);
overflow-y: scroll;
}
}
/* =========================================================
07. FIGURES — images, légendes, compositions
========================================================= */
/* Sécurité générale */
figure,
figure * {
box-sizing: border-box;
}
figure {
margin-block-start: 4rem;
margin-block-end: 4rem;
}
figure>a:first-child {
display: block;
width: 100%;
color: inherit;
text-decoration: none;
}
figure>a:first-child img {
display: block;
width: 100%;
height: auto;
}
figcaption {
margin-top: 0.75rem;
padding: 0.75rem 0 0 1rem;
background: transparent;
color: var(--color-accent);
font: 400 var(--font-size-small) var(--font-interface);
text-align: left;
hyphens: auto;
}
/* Image plus large que la colonne de texte, légende dessous */
figure.vx-figure--wide,
figure.vx-figure--full {
position: relative;
left: 50%;
margin-right: 0;
margin-left: 0;
transform: translateX(-50%);
}
figure.vx-figure--wide {
width: min(82vw, 980px);
}
figure.vx-figure--full {
width: min(var(--measure-full), 1280px);
}
figure.vx-figure--wide figcaption,
figure.vx-figure--full figcaption {
width: min(var(--measure-text), 100%);
margin-inline: auto;
}
/* Variante : légende aussi large que l’image */
figure.vx-caption--wide figcaption {
width: 100%;
max-width: none;
}
/* Mise côte à côte : inactive par défaut sur mobile */
figure.vx-figure-side {
--figure-gap: clamp(1rem, 2.2vw, 2.25rem);
--figure-img-col: minmax(260px, 58%);
--figure-caption-col: minmax(14rem, 1fr);
}
/* Proportions modifiables */
figure.vx-figure-side.vx-img--narrow {
--figure-img-col: minmax(220px, 42%);
--figure-caption-col: minmax(18rem, 1fr);
}
figure.vx-figure-side.vx-img--wide {
--figure-img-col: minmax(320px, 66%);
--figure-caption-col: minmax(13rem, 0.85fr);
}
figure.vx-figure-pair {
--figure-pair-gap: clamp(0.6rem, 1.4vw, 1.25rem);
position: relative;
left: 50%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--figure-pair-gap);
width: min(92vw, 1180px);
margin: 5rem 0;
transform: translateX(-50%);
}
figure.vx-figure-pair>a,
figure.vx-figure-pair>img,
figure.vx-figure-pair>picture {
display: block;
min-width: 0;
width: 100%;
margin: 0;
}
figure.vx-figure-pair>a img,
figure.vx-figure-pair>img {
display: block;
width: 100%;
height: auto;
margin: 0;
}
figure.vx-figure-pair>figcaption {
display: none;
}
/* Variante un peu plus serrée, utile pour deux images très proches */
figure.vx-figure-pair.vx-figure-pair--mirror {
--figure-pair-gap: clamp(0.35rem, 0.8vw, 0.8rem);
}
/* Option : images strictement de même hauteur visuelle */
figure.vx-figure-pair.vx-img--equal-height>a,
figure.vx-figure-pair.vx-img--equal-height>img {
aspect-ratio: 2 / 3;
overflow: hidden;
}
figure.vx-figure-pair.vx-img--equal-height>a img,
figure.vx-figure-pair.vx-img--equal-height>img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* PREUVE PAR LA CAPTURE */
.vx-proof-link {
position: absolute;
top: 8px;
right: 8px;
width: 16px;
height: 16px;
color: #909090;
opacity: 0.45;
transition:
opacity 0.15s ease,
transform 0.15s ease;
}
.vx-proof-link:hover {
opacity: 0.9;
transform: scale(1.08);
}
.vx-proof-link svg {
display: block;
width: 100%;
height: 100%;
fill: currentColor;
}
/* =========================================================
08. MODULES MIMÉTIQUES — plateformes et interfaces simulées
========================================================= */
/* Signal discret d'interface simulée */
.vx-serp,
.vx-video-wall,
.vx-youtube-recos {
padding: var(--space-2) 0;
margin: var(--space-4) 0;
}
/* GOOGLE RESULTS */
.vx-serp {
width: 100%;
background: #fff;
color: #202124;
font-family: Arial, Helvetica, sans-serif;
font-size: var(--font-size-body);
line-height: 1.35;
}
.vx-serp__result {
padding: 10px 12px 29px 12px;
}
.vx-serp__topline {
display: flex;
align-items: center;
gap: 5px;
color: #3c4043;
font-size: var(--font-size-body);
line-height: 2;
}
.vx-serp__topline span,
.vx-serp__topline button,
.vx-serp__title,
.vx-serp__play,
.vx-serp__scale,
.vx-serp__snippet p span {
cursor: pointer;
}
.vx-serp__topline button {
margin-left: 10px;
border: 0;
background: transparent;
color: #5f6368;
font: inherit;
font-size: var(--font-size-body);
line-height: 1;
}
.vx-serp__title {
display: block;
margin: 2px 0 14px;
color: #1a0dab;
font-size: var(--font-size-labor);
line-height: 1.18;
text-decoration: none;
}
.vx-serp__title:hover {
text-decoration: underline;
}
.vx-serp__body {
display: flex;
align-items: flex-start;
gap: 28px;
}
.vx-serp__thumb {
position: relative;
flex: 0 0 197px;
width: 197px;
height: 110px;
overflow: hidden;
border-radius: 7px;
background: var(--color-ink);
}
.vx-serp__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 6% 10%;
filter: saturate(0.8) contrast(0.9);
}
.vx-serp__play {
position: absolute;
left: 50%;
top: 50%;
display: grid;
place-items: center;
width: 46px;
height: 46px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: rgba(0, 0, 0, 0.68);
color: var(--color-paper);
font-size: 20px;
text-indent: 5px;
}
.vx-serp__duration {
position: absolute;
left: 0;
bottom: 0;
padding: 3px 5px;
background: rgba(0, 0, 0, 0.72);
color: var(--color-paper);
font-size: 15px;
line-height: 1.2;
}
.vx-serp__corner {
position: absolute;
right: 9px;
top: 8px;
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.55);
color: var(--color-paper);
font-size: 21px;
line-height: 1;
transform: rotate(180deg);
}
.vx-serp__snippet {
flex: 1;
min-width: 0;
color: #3c4043;
font-size: 20px;
line-height: 1.45;
}
.vx-serp__snippet p {
display: block;
margin: -5px 0 15px;
font-size: inherit;
line-height: inherit;
font-size: var(--font-size-body);
}
.vx-serp__snippet .vx-serp__meta {
margin: 0;
color: #4d5156;
}
.vx-serp__snippet .vx-serp__meta .vx-serp__line:not(:first-of-type)::before {
content: " ⋅ ";
}
.vx-serp__source {
color: #202124;
}
.vx-serp__scale {
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.62);
display: grid;
place-items: center;
color: #fff;
font-size: 11px;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
/* Planche Buffon -- révélation du ratel au scroll */
.vx-planche-buffon__stack {
position: relative;
line-height: 0;
}
.vx-planche-buffon__stack img {
display: block;
width: 100%;
height: auto;
}
.vx-planche-buffon__reveal {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1.8s ease-in-out;
}
.vx-planche-buffon__reveal.is-visible {
opacity: 1;
}
/* YOUTUBE ACCUEIL */
.vx-video-wall,
.vx-video-wall * {
box-sizing: border-box;
}
.vx-video-wall {
width: 100%;
margin: 5rem auto;
background: #fff;
color: #0f0f0f;
font-family: Roboto, Arial, Helvetica, sans-serif;
font-size: 14px;
}
.vx-video-wall__tabs {
display: flex;
gap: 12px;
margin: 0 0 16px 0;
}
.vx-video-wall__tab {
border: 0;
border-radius: 8px;
padding: 8px 13px;
background: #f2f2f2;
color: #0f0f0f;
font:
500 14px/1 Roboto,
Arial,
Helvetica,
sans-serif;
cursor: pointer;
}
.vx-video-wall__tab:hover {
background: #e5e5e5;
}
.vx-video-wall__tab.is-active {
background: #0f0f0f;
color: #fff;
}
.vx-video-wall__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 18px;
row-gap: 34px;
}
.vx-video-card {
position: relative;
min-width: 0;
}
.vx-video-card__thumb {
position: relative;
z-index: 0;
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 10px;
background: #e5e5e5;
color: inherit;
text-decoration: none;
cursor: pointer;
}
.vx-video-card__thumb::before {
content: "";
position: absolute;
inset: -12px;
z-index: -1;
border-radius: 18px;
background: transparent;
transition: background 0.12s ease;
}
.vx-video-card:hover .vx-video-card__thumb::before {
background: rgba(0, 0, 0, 0.05);
}
.vx-video-card__thumb img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition:
filter 0.12s ease,
transform 0.12s ease;
}
.vx-video-card:hover .vx-video-card__thumb img {
filter: brightness(0.88);
}
.vx-video-card__duration {
position: absolute;
right: 5px;
bottom: 5px;
padding: 2px 4px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.78);
color: #fff;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
}
.vx-video-card__actions {
position: absolute;
top: 8px;
right: 8px;
display: grid;
gap: 5px;
opacity: 0;
transform: translateY(-3px);
transition:
opacity 0.1s ease,
transform 0.1s ease;
pointer-events: none;
}
.vx-video-card:hover .vx-video-card__actions,
.vx-video-card:focus-within .vx-video-card__actions {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.vx-video-card__actions button {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border: 0;
border-radius: 8px;
background: rgba(0, 0, 0, 0.72);
color: #fff;
cursor: pointer;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.vx-video-card__actions button:hover {
background: rgba(0, 0, 0, 0.86);
}
.vx-video-card__actions svg,
.vx-video-card__menu svg {
width: 21px;
height: 21px;
fill: currentColor;
}
.vx-video-card__info {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 32px;
column-gap: 8px;
margin-top: 10px;
padding-right: 0;
}
.vx-video-card__title {
display: -webkit-box;
min-width: 0;
overflow: hidden;
color: #0f0f0f;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
text-decoration: none;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.vx-video-card__title:hover {
text-decoration: none;
}
.vx-video-card__menu {
display: grid;
place-items: center;
width: 32px;
height: 32px;
margin-top: -7px;
border: 0;
border-radius: 50%;
background: transparent;
color: #0f0f0f;
cursor: pointer;
}
.vx-video-card__menu:hover,
.vx-video-card.is-open .vx-video-card__menu {
background: #f2f2f2;
}
.vx-video-card__meta {
grid-column: 1 / -1;
margin-top: 7px;
color: #606060;
font-size: 12px;
line-height: 1.3;
white-space: nowrap;
}
.vx-video-card__meta span {
margin: 0 4px;
}
.vx-video-card__popover {
position: absolute;
top: calc(100% - 8px);
right: 0;
z-index: 5;
display: none;
width: 230px;
padding: 8px 0;
border-radius: 12px;
background: #fff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
overflow: hidden;
}
.vx-video-card.is-open .vx-video-card__popover {
display: block;
}
.vx-video-card__popover button {
display: block;
width: 100%;
border: 0;
padding: 10px 16px;
background: transparent;
color: #0f0f0f;
font:
400 14px/1.25 Roboto,
Arial,
Helvetica,
sans-serif;
text-align: left;
cursor: pointer;
}
.vx-video-card__popover button:hover {
background: #f2f2f2;
}
/* RECOS RACOLEUSES YT */
.vx-youtube-recos {
display: block;
width: 100%;
margin: 2.5rem auto;
padding: 6px 0;
box-sizing: border-box;
background: #fff;
color: #0f0f0f;
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
line-height: 1.25;
}
.vx-youtube-recos li {
position: relative;
display: flex;
gap: 8px;
min-height: 94px;
padding: 4px 32px 8px 8px;
box-sizing: border-box;
list-style: none;
cursor: pointer;
outline: none;
border-radius: 12px;
}
.vx-youtube-recos .vx-thumb {
flex: 0 0 168px;
width: 168px;
height: 94px;
object-fit: cover;
border-radius: 10px;
}
.vx-youtube-recos .vx-youtube-reco-text {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
.vx-youtube-recos .vx-title-text {
display: block;
color: #0f0f0f;
font-size: 16px;
font-weight: 600;
line-height: 1.3;
overflow-wrap: anywhere;
}
.vx-youtube-recos .vx-meta {
display: block;
margin-top: 4px;
color: #606060;
font-size: 12px;
line-height: 1.35;
}
.vx-youtube-recos .vx-meta span {
display: block;
}
.vx-youtube-recos .vx-badge {
display: block;
width: fit-content;
margin-top: 6px;
padding: 2px 6px;
border-radius: 4px;
background: #ececec;
color: #606060;
font-size: 11px;
font-weight: 600;
}
.vx-youtube-recos li::after {
content: "⋮";
position: absolute;
top: 6px;
right: 8px;
color: #606060;
font-size: 22px;
line-height: 1;
}
.vx-youtube-recos li:hover,
.vx-youtube-recos li:focus-visible {
background: #f2f2f2;
}
.vx-youtube-recos li:active {
background: #e5e5e5;
}
/* COMMENTAIRES YT */
.vx-youtube-comments .vx-youtube-comment {
display: flex;
align-items: flex-start;
position: relative;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--color-soft);
font-family: Roboto, Arial, sans-serif;
font-size: 16px;
line-height: 23px;
color: var(--color-ink);
}
.vx-youtube-comments {
margin: 2rem 0 2rem 2rem;
}
.vx-youtube-comments .vx-avatar {
flex-shrink: 0;
width: 50px;
display: flex;
justify-content: center;
align-items: flex-start;
opacity: 0.75;
cursor: pointer;
}
.vx-youtube-comment:hover .vx-avatar {
opacity: 1;
}
.vx-youtube-comments .vx-avatar img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--color-soft);
}
.vx-youtube-comments .vx-avatar.vx-square img {
border-radius: 0%;
}
.vx-youtube-comments .vx-avatar .vx-young-cat {
width: 36px;
height: 36px;
}
.vx-youtube-comments .vx-main {
flex: 1;
}
.vx-youtube-comments .vx-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
font-size: 13px;
color: var(--color-ink);
}
.vx-youtube-comments .vx-published-time a {
color: var(--color-ink);
text-decoration: none;
}
.vx-youtube-comments .vx-profile__name {
font-weight: bold;
font-size: 0.8rem;
color: var(--color-ink);
margin-right: 8px;
cursor: pointer;
}
.vx-youtube-comments .vx-profile__name::before {
content: "@";
}
.vx-youtube-comments .vx-profile__name:hover,
.vx-youtube-comment .vx-avatar:hover+.vx-main .vx-profile__name {
text-decoration: underline;
}
.vx-youtube-comments .vx-engagement-buttons {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
}
.vx-youtube-comments .vx-comment__actions-alt {
margin-top: 1px;
}
.vx-youtube-comments .vx-comment__actions-alt>div {
display: inline-block;
margin: 0px;
padding: 3px 0px 3px 15px;
}
.vx-youtube-comments .vx-comment__actions-alt>div svg {
cursor: pointer;
width: 80%;
height: 80%;
}
.vx-youtube-comments .vx-comment__actions-alt>div svg:hover {
background: #dbdbdb;
border-radius: 50%;
transition: background 0.3s ease;
}
.vx-youtube-comments .vx-comment__reply-button {
font-weight: bold;
font-size: 0.8rem;
color: var(--color-ink);
cursor: pointer;
}
.vx-youtube-comments .vx-comment__reply-button:hover {
text-decoration: underline;
}
.vx-youtube-comments .vx-comment__reaction-count {
color: #606060;
font-size: 0.8rem;
padding: 0px !important;
}
.vx-youtube-comments .vx-text-vertical {
display: flex;
align-items: center;
}
/* YT REPLIES */
.vx-youtube-replies {
position: relative;
margin: 0.8rem 0 0 0.8rem;
padding-left: 2.8rem;
border-left: 2px solid #ddd;
}
.vx-youtube-replies::before {
content: "";
position: absolute;
left: -2px;
top: 0;
width: 2.2rem;
height: 2.2rem;
border-left: 2px solid #ddd;
border-bottom: 2px solid #ddd;
border-bottom-left-radius: 1.6rem;
}
.vx-youtube-reply {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 0.7rem 0;
}
.vx-youtube-reply .vx-avatar {
width: 36px;
}
.vx-youtube-reply .vx-avatar img {
width: 32px;
height: 32px;
}
/* GHOST COMMENTS */
.vx-youtube-comment.vx-ghost-comment {
--r: -6deg;
--x: 0px;
--y: 0px;
--blur: 0.4px;
--fade: 0.7;
--grain: 0.12;
position: relative;
transform: rotate(var(--r)) translate(var(--x), var(--y));
opacity: var(--fade);
filter: contrast(0.78) blur(var(--blur));
mix-blend-mode: multiply;
transform-origin: center;
}
.vx-youtube-comment.vx-ghost-comment::before {
content: "";
position: absolute;
inset: -8px;
pointer-events: none;
background:
repeating-linear-gradient(0deg,
rgba(0, 0, 0, var(--grain)) 0 1px,
transparent 1px 3px),
radial-gradient(ellipse at center,
transparent 42%,
rgba(255, 255, 255, 0.95) 78%);
z-index: 2;
}
.vx-youtube-comment.vx-ghost-comment::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(90deg,
transparent 0 47%,
rgba(255, 255, 255, 0.7) 48% 52%,
transparent 53% 100%);
transform: translateX(var(--tear, 0px));
/* --tear pilotable en JS/inline ; fallback requis (jamais définie ailleurs) */
opacity: 0.45;
z-index: 3;
}
.vx-youtube-comment.vx-ghost-comment .vx-avatar,
.vx-youtube-comment.vx-ghost-comment .vx-comment__actions-alt {
opacity: 0.55;
}
.vx-youtube-comment.vx-ghost-comment .vx-content-text {
text-shadow:
0.6px 0 rgba(0, 0, 0, 0.25),
-0.4px 0 rgba(255, 255, 255, 0.55);
}
.vx-ghost-filters {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.vx-youtube-comment.vx-ghost-comment::before,
.vx-youtube-comment.vx-ghost-comment::after {
z-index: 0;
}
.vx-youtube-comment.vx-ghost-comment .vx-avatar,
.vx-youtube-comment.vx-ghost-comment .vx-main {
position: relative;
z-index: 1;
}
.vx-youtube-comment.vx-ghost-comment {
display: inline-flex;
}
.vx-ghost-canvas {
display: block;
mix-blend-mode: multiply;
}
.vx-youtube-comment.vx-ghost-rendered {
display: none !important;
}
.vx-ghost-wrap {
position: relative;
display: block;
}
.vx-ghost-wrap .vx-ghost-proof-link {
position: absolute;
right: auto;
z-index: 50;
width: 16px;
height: 16px;
color: #777;
opacity: 0.7;
transform: none !important;
filter: none !important;
mix-blend-mode: normal !important;
}
.vx-ghost-wrap .vx-ghost-proof-link:hover {
opacity: 1;
transform: scale(1.08) !important;
}
/* REDDIT */
.vx-reddit {
font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
overflow: hidden;
font-size: 55%;
padding: 3rem 0;
position: relative;
}
.vx-reddit>.vx-proof-link {
top: 3.4rem;
right: 8px;
z-index: 10;
}
.vx-reddit .vx-post {
padding: 14px 20px 15px;
}
.vx-reddit .vx-top {
display: flex;
align-items: center;
gap: 9px;
}
.vx-reddit .vx-sub {
font-size: 15px;
font-weight: 800;
letter-spacing: -0.5px;
height: 10px;
}
.vx-reddit .vx-meta {
margin-top: 4px;
font-size: 13px;
color: #4f5a61;
}
.vx-reddit .vx-translate {
margin-left: auto;
color: #174aa0;
font-size: 14px;
font-weight: 700;
}
.vx-reddit .vx-sub:hover,
.vx-reddit .vx-meta:hover,
.vx-reddit .vx-translate:hover,
.vx-reddit .vx-user:hover,
.vx-reddit .vx-reply-icon:hover {
cursor: pointer;
text-decoration: underline;
color: var(--color-ink);
}
.vx-reddit button.vx-text-join {
margin-left: 13px;
border: 0;
border-radius: 19px;
padding: 11px 19px;
background: #244da2;
color: var(--color-paper);
font-size: 13px;
font-weight: 800;
cursor: pointer;
}
.vx-reddit button.vx-text-join:hover {
background: #1870f4;
}
.vx-reddit h1 {
margin: 19px 0 23px;
font-size: 17px;
line-height: 1.15;
letter-spacing: -0.5px;
}
.vx-reddit .vx-actions {
display: flex;
align-items: center;
gap: 9px;
}
.vx-reddit .vx-pill {
height: 38px;
padding: 0 17px;
border: 1px solid #ddd;
border-radius: 21px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
display: flex;
align-items: center;
gap: 11px;
color: #53616a;
font-size: 21px;
}
.vx-reddit .vx-pill b {
font-size: 13px;
color: #263039;
}
.vx-reddit .vx-pill .vx-divider,
.vx-reddit .vx-vote .vx-divider {
width: 1px;
height: 20px;
background: #ddd;
}
.vx-reddit .is-small {
padding: 0 18px;
}
.vx-reddit .vx-share {
padding: 0 18px;
}
.vx-reddit .vx-spacer {
flex: 1;
}
.vx-reddit .vx-separator {
height: 13px;
background: #f6f8fa;
}
.vx-reddit .vx-comment {
padding: 15px 20px 0;
}
.vx-reddit .vx-comment__head {
display: flex;
align-items: center;
gap: 7px;
}
.vx-reddit .vx-sub__avatar,
.vx-reddit .vx-user__avatar {
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.vx-reddit .vx-sub__avatar {
width: 31px;
height: 31px;
}
.vx-reddit .vx-user__avatar {
width: 37px;
height: 37px;
}
.vx-reddit .vx-reply-icon {
font-weight: bold;
font-size: 0.8rem;
color: var(--color-ink);
cursor: pointer;
}
.vx-reddit .vx-icon,
.vx-reddit .vx-pill {
cursor: pointer;
}
.vx-reddit .vx-pill:hover {
background: #dbdbdb;
transition: background 0.3s ease;
}
.vx-reddit .vx-comment__actions .vx-icon {
color: #60707a;
}
svg.vx-icon:hover {
fill: #60707a;
transition: fill 0.3s ease;
}
.vx-reddit .vx-user {
font-size: 13px;
font-weight: 800;
color: #4e606d;
}
.vx-reddit .vx-age {
font-size: 13px;
color: #53616a;
}
.vx-reddit .vx-comment p {
font-size: 14px;
line-height: 1.25;
letter-spacing: -0.35px;
display: block;
}
.vx-reddit .vx-comment__actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 17px;
color: #60707a;
font-size: 20px;
}
.vx-reddit .vx-comment__actions strong {
color: #c8c8c8;
font-size: 13px;
}
.vx-reddit .vx-comment__actions b {
font-size: 13px;
}
.vx-reddit .vx-reddit__award-icon {
display: inline-flex;
width: 32px;
height: 32px;
color: #53616a;
}
.vx-reddit .vx-reddit__award-icon svg {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 2.1;
stroke-linecap: round;
stroke-linejoin: round;
}
/* GPT DIALOGUE */
.vx-gpt-shot {
width: 90%;
padding: 20px 12px 8px;
font-family:
-apple-system-body,
ui-sans-serif,
-apple-system,
"system-ui",
"Segoe UI",
Helvetica,
"Apple Color Emoji",
Arial,
"sans-serif",
"Segoe UI Emoji",
"Segoe UI Symbol";
line-height: 26px;
margin-block-end: 4px;
margin-bottom: 4px;
overflow-wrap: break-word;
tab-size: 4;
text-wrap-mode: wrap;
unicode-bidi: isolate;
white-space-collapse: collapse;
}
.vx-gpt-shot p {
font-size: 16px;
}
.vx-gpt-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
margin-top: 13px;
margin-left: -10px;
padding: 4px;
color: #676767;
user-select: none;
}
.vx-gpt-actions button {
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: #676767;
cursor: pointer;
}
.vx-gpt-actions button:hover {
background: #f5f5f5;
}
.vx-gpt-actions span {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
}
.vx-gpt-actions svg {
width: 20px;
height: 20px;
fill: currentColor;
}
.vx-ai-block .vx-gpt-actions {
margin-top: 13px;
margin-left: -10px;
}
.vx-ai-block .vx-gpt-actions.vx-ai-actions {
animation: vx-iaActionsAppear 0.18s ease-out both;
}
.vx-gpt-thinking__button {
display: flex;
align-items: center;
gap: 2px;
padding: 0;
border: 0;
background: transparent;
color: #8f8f8f;
font: inherit;
font-size: 14px;
line-height: 20px;
text-align: left;
cursor: pointer;
}
.vx-gpt-thinking__button:hover {
color: #0d0d0d;
}
.vx-gpt-thinking__icon {
width: 12px;
height: 12px;
flex: 0 0 auto;
color: currentColor;
fill: currentColor;
}
.vx-gpt-shot {
position: relative;
overflow: visible;
}
/*.vx-gpt-thinking__button.is-active {
color: #0d0d0d;
}
.vx-gpt-thinking__bubble,
.vx-recall-pop {
display: none !important;
}*/
.vx-gpt-thinking__button.is-active,
.vx-recall-link.is-active {
color: #0d0d0d;
text-decoration: underline solid var(--color-ink);
}
.vx-chat {
width: var(--measure-wide);
height: 214px;
margin-top: 3rem;
box-sizing: border-box;
padding-top: 17px;
background: #fff;
color: var(--color-ink);
font-family: Arial, Helvetica, sans-serif;
}
.vx-chat h1 {
margin: 0 0 62px;
text-align: center;
font-size: 36px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.01em;
margin-bottom: 2rem;
}
.vx-promptbar {
width: 100%;
height: 77px;
margin: 0 auto;
padding: 0 14px 0 25px;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 18px;
border: 1px solid #d8d8d8;
border-radius: 34px;
background: #fff;
box-shadow:
0 1px 1px rgba(0, 0, 0, 0.05),
0 3px 8px rgba(0, 0, 0, 0.08);
}
.vx-promptbar button {
flex: 0 0 auto;
display: grid;
place-items: center;
border: 0;
padding: 0;
background: transparent;
color: var(--color-ink);
cursor: pointer;
}
.vx-promptbar svg {
display: block;
fill: currentColor;
}
.vx-plus {
width: 28px;
height: 28px;
}
.vx-plus svg {
width: 24px;
height: 24px;
}
.vx-promptbar input {
flex: 1;
min-width: 0;
border: 0;
outline: 0;
padding: 0;
background: transparent;
color: var(--color-ink);
font:
400 21px/1.2 Arial,
Helvetica,
sans-serif;
}
.vx-promptbar input::placeholder {
color: #8b8b8b;
opacity: 1;
}
.vx-mic {
width: 28px;
height: 28px;
margin-right: 4px;
}
.vx-mic svg {
width: 24px;
height: 24px;
}
.vx-voice {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--color-ink) !important;
color: #fff !important;
}
.vx-voice svg {
width: 25px;
height: 25px;
}
.vx-chat__composer {
display: flex;
width: 90%;
align-items: center;
gap: 10px;
width: min(768px, 100%);
min-height: 26px;
margin: 0 auto;
padding: 6px 8px 6px 14px;
border: 1px solid #d9d9d9;
border-radius: 999px;
background: #fff;
color: #0d0d0d;
font-family:
ui-sans-serif,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Helvetica,
Arial,
sans-serif;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.vx-chat__input {
flex: 1 1 auto;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
color: #0d0d0d;
font: inherit;
font-size: 16px;
line-height: 24px;
letter-spacing: -0.01em;
caret-color: #0d0d0d;
}
.vx-chat__input:focus {
outline: none;
box-shadow: none;
}
.vx-chat__input::selection {
background: rgba(0, 0, 0, 0.16);
}
.vx-chat__button,
.vx-chat__model,
.vx-chat__send {
border: 0;
appearance: none;
background: transparent;
font: inherit;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.vx-chat__plus {
width: 28px;
height: 32px;
padding: 0;
color: #5f5f5f;
font-size: 29px;
font-weight: 300;
line-height: 1;
}
.vx-chat__model {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 6px;
border-radius: 8px;
color: #8a8a8a;
font-size: 14px;
white-space: nowrap;
}
.vx-chat__chevron {
font-size: 17px;
line-height: 1;
transform: translateY(-1px);
}
.vx-chat__mic {
display: grid;
place-items: center;
width: 34px;
height: 34px;
padding: 0;
border-radius: 50%;
color: #5f5f5f;
}
.vx-chat__mic svg {
width: 20px;
height: 20px;
fill: currentColor;
}
.vx-chat__send {
display: grid;
place-items: center;
width: 38px;
height: 38px;
padding: 0;
border-radius: 50%;
background: #0d0d0d;
color: #fff;
}
.vx-chat__send svg {
width: 24px;
height: 24px;
fill: currentColor;
}
.vx-chat__button:hover,
.vx-chat__model:hover {
background: #f4f4f4;
}
.vx-chat__send:hover {
background: #2f2f2f;
}
.vx-chat__button:active,
.vx-chat__model:active,
.vx-chat__send:active {
transform: scale(0.96);
}
.vx-chat__button:focus-visible,
.vx-chat__model:focus-visible,
.vx-chat__send:focus-visible,
.vx-chat__input:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.vx-chat__disclaimer {
max-width: 760px;
margin: 8px auto 0;
color: #8a8a8a;
font-family: 'iA Writer Quattro';
font-size: 12px;
line-height: 1.35;
text-align: center;
hyphens: none;
}
/* CHATGPT — COMPARAISON DE DEUX RÉPONSES */
.vx-chat-compare__shot,
.vx-chat-compare__shot * {
box-sizing: border-box;
}
.vx-chat-compare__shot {
width: var(--measure-full);
margin: 5rem 50%;
transform: translateX(-50%);
padding: 16px 0 31px;
background: #f7f7f8;
color: #0d0d0d;
font-family: 'iA Writer Quattro';
line-height: 1.35;
}
.vx-chat-compare__head {
margin: 0 0 26px;
text-align: center;
}
.vx-chat-compare__head h4 {
margin: 0 0 4px;
padding: 0;
border: 0;
color: #0d0d0d;
font:
600 18px/1.25 ui-sans-serif,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Helvetica,
Arial,
sans-serif;
letter-spacing: -0.012em;
text-align: center;
}
.vx-chat-compare__head p {
display: block;
margin: 0;
color: #6b6b6b;
font-size: 13px;
line-height: 1.35;
}
.vx-chat-compare {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
width: min(948px, calc(100% - 48px));
margin: 0 auto;
}
.vx-chat-response {
display: block;
min-height: 103px;
padding: 17px 19px 18px;
border: 1px solid #d1d1d1;
border-radius: 6px;
background: #fff;
color: #0d0d0d;
text-align: left;
font: inherit;
cursor: pointer;
box-shadow: none;
}
.vx-chat-response:hover {
border-color: #a8a8a8;
background: #fff;
}
.vx-chat-response:focus-visible {
outline: 2px solid #0d0d0d;
outline-offset: 2px;
}
.vx-chat-response__top {
display: flex;
align-items: center;
gap: 17px;
margin-bottom: 14px;
color: #6f6f6f;
font-size: 13px;
line-height: 1;
}
.vx-chat-response__logo {
display: grid;
place-items: center;
width: 32px;
height: 32px;
flex: 0 0 32px;
border-radius: 8px;
background: #0d0d0d;
overflow: hidden;
}
/* Reset complet du .vx-ai-logo GLOBAL dans ce mock */
.vx-chat-response__logo .vx-ai-logo {
position: static !important;
display: block !important;
width: 20px !important;
height: 20px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: #fff !important;
fill: #fff !important;
stroke: none !important;
stroke-width: 0 !important;
animation: none !important;
transform: none !important;
cursor: default !important;
}
.vx-chat-response__logo .vx-ai-logo path {
fill: #fff !important;
stroke: none !important;
stroke-dasharray: none !important;
stroke-dashoffset: 0 !important;
animation: none !important;
}
.vx-chat-response__text {
display: block;
color: #0d0d0d;
font-size: 15px;
line-height: 1.4;
}
/* MAIL CONCIERGE */
.vx-mail {
max-width: 100%;
margin: 2rem auto;
border: 1px solid #dadce0;
border-radius: 14px;
overflow: hidden;
background: #fff;
font-family: Arial, Helvetica, sans-serif;
color: #202124;
box-shadow: 0 8px 26px rgba(60, 64, 67, 0.18);
height: 520px;
display: flex;
flex-direction: column;
}
.vx-mail__topbar {
height: 60px;
flex-shrink: 0;
display: flex;
align-items: center;
gap: 14px;
padding: 0 16px;
background: #f6f8fc;
border-bottom: 1px solid #e0e3e7;
position: relative;
z-index: 2;
}
.vx-mail__sidebar-toggle {
width: 32px;
height: 32px;
flex-shrink: 0;
border: 1px solid #dadce0;
border-radius: 8px;
background: #fff;
color: #5f6368;
cursor: pointer;
display: grid;
place-items: center;
transition: background 0.15s;
}
.vx-mail__sidebar-toggle:hover {
background: #f1f3f4;
}
.vx-mail__logo {
font-size: var(--font-size-labor);
font-weight: 600;
color: #5f6368;
letter-spacing: -0.5px;
white-space: nowrap;
}
.vx-mail__search {
flex: 1;
max-width: 480px;
padding: 9px 16px;
border-radius: 22px;
background: #eaf1fb;
color: #6b7280;
font-family: inherit;
font-size: var(--font-size-body);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
resize: none;
border: none;
outline: none;
overflow: hidden;
line-height: 1.4;
}
.vx-mail__user,
.vx-mail-card__meta .vx-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
display: grid;
place-items: center;
background: #d7e3fc;
color: #1a73e8;
font-weight: 700;
font-size: 13px;
flex-shrink: 0;
cursor: pointer;
text-decoration: none;
}
.vx-mail__layout {
flex: 1;
display: flex;
overflow: hidden;
min-height: 0;
}
.vx-mail__sidebar {
width: 200px;
flex-shrink: 0;
padding: 14px 8px;
background: #f8fafd;
border-right: 1px solid #edf0f2;
display: flex;
flex-direction: column;
gap: 2px;
overflow: hidden;
transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1),
padding 0.22s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.18s;
}
.vx-mail__sidebar.is-collapsed {
width: 0;
padding: 0;
opacity: 0;
}
.vx-mail__compose {
width: 100%;
padding: 11px 14px;
border: 0;
border-radius: 16px;
background: #c2e7ff;
color: #001d35;
font-weight: 600;
font-size: 13px;
text-align: left;
cursor: pointer;
opacity: 0.55;
margin-bottom: 10px;
white-space: nowrap;
}
.vx-mail__compose:hover {
background: #99d7ff;
}
.vx-mail__folder {
padding: 8px 12px;
border-radius: 0 16px 16px 0;
color: #3c4043;
font-size: 13px;
cursor: pointer;
white-space: nowrap;
}
.vx-mail__folder:hover {
background: var(--color-soft);
}
.vx-mail__folder.is-active {
background: #d3e3fd;
font-weight: 700;
}
.vx-mail__reader {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
background: #fff;
min-width: 0;
}
.vx-mail__reader-header {
flex-shrink: 0;
background: #fff;
border-bottom: 1px solid #f1f3f4;
z-index: 1;
}
.vx-mail-card__actions {
height: 44px;
display: flex;
align-items: center;
gap: 6px;
padding: 0 16px;
border-bottom: 1px solid #f1f3f4;
}
.vx-mail-card__actions button,
.vx-mail-card__replybar button {
border: 1px solid #dadce0;
border-radius: 16px;
background: #fff;
color: #3c4043;
padding: 5px 10px;
font-size: 12px;
cursor: pointer;
opacity: 0.55;
white-space: nowrap;
}
.vx-mail-card__actions button:hover,
.vx-mail-card__replybar button:hover {
background: var(--color-soft);
}
.vx-mail-card__header {
padding: 18px 20px 14px;
}
.vx-mail-card__header h2 {
margin: 0 0 14px;
padding: 0;
font-size: var(--font-size-labor);
font-weight: 500;
}
.vx-mail-card__meta {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 10px;
align-items: center;
color: #5f6368;
font-size: var(--font-size-small);
}
.vx-mail-card__meta strong {
color: #202124;
display: block;
}
.vx-mail-card__body {
flex: 1;
overflow-y: auto;
padding: 16px 20px 24px;
scrollbar-width: thin;
scrollbar-color: #dadce0 transparent;
}
.vx-mail-card__body::-webkit-scrollbar {
width: 6px;
}
.vx-mail-card__body::-webkit-scrollbar-thumb {
background: #dadce0;
border-radius: 3px;
}
.vx-mail-card__body p {
display: block;
margin: 0 0 1em;
color: var(--color-ink);
font-size: var(--font-size-body);
line-height: 1.5;
}
.vx-mail-card__body p:last-child {
margin-bottom: 0;
}
.vx-mail-card__replybar {
flex-shrink: 0;
display: flex;
gap: 8px;
padding: 12px 20px;
border-top: 1px solid #f1f3f4;
}
/* =========================================================
09. MODULES TEXTUELS — histoires, funfacts, réactions
========================================================= */
/* DISPOSITIFS */
.vx-devices {
display: block;
width: min(var(--measure-wide), calc(100vw - 2rem));
max-width: min(60rem, calc(100vw - 2rem));
margin: 4rem 50% 5rem;
transform: translateX(-50%);
}
.vx-devices figure {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
max-width: 100%;
overflow: hidden;
}
.vx-devices figure:last-child {
margin-bottom: 0;
}
.vx-devices figure a,
.vx-devices .vx-svg-slot,
.vx-devices .vx-svg-stage,
.vx-devices figure>div:not(figcaption) {
position: relative;
display: block;
width: 100%;
min-width: 0;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.vx-devices img,
.vx-devices svg,
.vx-devices .vx-svg-stage>svg.vx-svg-dispositif {
display: block;
width: 100%;
height: 100%;
margin: 0;
aspect-ratio: 1 / 1;
object-fit: contain;
}
.vx-devices figcaption {
position: relative;
display: block;
min-height: 0;
padding: 0.85rem 0.95rem 1rem !important;
border-top: none;
border-left: 1px solid var(--color-ink);
background: var(--color-paper);
font-size: var(--font-size-small);
line-height: 1.32;
}
.vx-devices figcaption .vx-echo {
display: inline;
background: transparent;
font-weight: 700;
}
.vx-devices figcaption .vx-echo--off {
visibility: hidden;
}
.vx-devices figcaption.is-open .vx-echo--off {
visibility: visible;
}
.vx-sound-toggle {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 12;
display: inline-flex;
align-items: center;
gap: 0.3rem;
margin: 0;
padding: 0.25rem 0.5rem 0.25rem 0.38rem;
border: 1px solid var(--color-ink);
border-radius: 999px;
background: var(--color-paper);
color: var(--color-ink);
font: 600 0.62rem/1 var(--font-interface);
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.18s, color 0.18s;
}
.vx-sound-toggle:hover,
.vx-sound-toggle.vx-text-playing {
background: var(--color-ink);
color: var(--color-paper);
}
.vx-sound-toggle svg {
width: 10px;
height: 10px;
fill: currentColor;
}
@media screen and (max-width: 700px) {
.vx-devices {
width: min(34rem, calc(100vw - 2rem));
max-width: min(34rem, calc(100vw - 2rem));
margin-top: 3rem;
margin-bottom: 4rem;
}
.vx-devices figure {
display: block;
width: 100%;
margin-bottom: 1.75rem;
}
.vx-devices figcaption {
font-size: 0.78rem;
line-height: 1.25;
border-top: 1px solid var(--color-ink);
border-left: none;
}
}
@media print {
.vx-sound-toggle {
display: none !important;
}
}
@keyframes vx-tremble {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(var(--tremble-amp, 2px), calc(var(--tremble-amp, 2px) * -0.8));
}
50% {
transform: translate(calc(var(--tremble-amp, 2px) * -0.8), var(--tremble-amp, 2px));
}
75% {
transform: translate(var(--tremble-amp, 2px), var(--tremble-amp, 2px));
}
100% {
transform: translate(0, 0);
}
}
/* Défilement interne du chat dans les dispositifs SVG */
.vx-chat-scroll-viewport {
pointer-events: none;
}
.vx-chat-scroll-inner {
will-change: transform;
}
.vx-chat-scroll-inner.is-chat-scrolling {
/*
* Défilement piloté en JS via l’attribut SVG transform.
*/
}
.vx-chat-scroll-copy {
pointer-events: none;
}
.vx-chamy-illustration {
overflow: visible;
}
.vx-chamy-illustration #Dorner-g,
.vx-chamy-illustration #Chamy-g {
overflow: visible;
}
/* ---- Sous-titres dynamiques ConfidenceHeist ---- */
.vx-subtitle-overlay {
position: absolute;
z-index: 2;
left: 50%;
top: 50%;
width: 75%;
transform: translateX(-50%);
text-align: center;
pointer-events: none;
}
.vx-sub-line {
display: block;
font-family: 'Montserrat', Arial, sans-serif;
font-size: clamp(13px, 3.8cqw, 42px);
font-weight: 800;
font-style: normal;
line-height: 1.15;
letter-spacing: -0.045em;
text-transform: uppercase;
white-space: normal;
color: #fff;
-webkit-text-stroke: 0.4em #111;
paint-order: stroke fill;
text-shadow:
0 0.055em 0 #111,
0 0.105em 0.025em rgba(0, 0, 0, 0.82);
opacity: 0;
transition: none;
hyphens: none;
}
.vx-sub-line.is-visible {
opacity: 1;
animation: vx-caption-pop 120ms cubic-bezier(0.18, 0.8, 0.25, 1.18) both;
}
@keyframes vx-caption-pop {
from {
opacity: 0;
transform: scale(0.84);
}
to {
opacity: 1;
transform: scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.vx-sub-line {
animation: none;
}
}
@media (max-width: 768px) {
.vx-subtitle-overlay {
top: 50%;
width: 90%;
max-width: 90%;
}
.vx-sub-line {
font-size: clamp(13px, 3.5vw, 26px);
-webkit-text-stroke: 0.07em #111;
letter-spacing: -0.03em;
}
}
/* ---- Sous-titres secondaires FR (style traduction TikTok) ---- */
.vx-subtitle-overlay-fr {
position: absolute;
z-index: 2;
left: 50%;
bottom: 4%;
width: 84%;
transform: translateX(-50%);
text-align: center;
pointer-events: none;
}
.vx-sub-line-fr {
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: clamp(13px, 3cqw, 26px);
font-weight: 400;
font-style: normal;
line-height: 1.3;
letter-spacing: 0;
text-transform: none;
color: #fff;
background-color: rgba(0, 0, 0, 0.75);
padding: 0.15em 0.45em 0.2em;
border-radius: 2px;
-webkit-text-stroke: 0;
text-shadow: none;
opacity: 0;
transition: none;
hyphens: none;
white-space: normal;
}
.vx-sub-line-fr.is-visible {
opacity: 1;
}
@media (max-width: 768px) {
.vx-subtitle-overlay-fr {
width: 90%;
bottom: 3%;
}
.vx-sub-line-fr {
font-size: clamp(13px, 3vw, 24px);
padding: 0.12em 0.35em 0.15em;
}
}
.vx-devices figure[data-son="media/audio/B-Graham_reenact2.mp3"] .vx-subtitle-overlay-fr {
width: 72%;
max-width: 72%;
}
/* =========================================================
DISPOSITIFS — CONTENEUR SVG ET CONTRÔLE DE VITESSE
========================================================= */
/*
* Ce conteneur correspond uniquement à la surface graphique.
* Le figcaption reste en dehors : bottom/right se calculent
* donc depuis le SVG et non depuis le figure entier.
*/
.vx-svg-stage {
position: relative;
display: block;
width: 100%;
min-width: 0;
aspect-ratio: 1 / 1;
}
/*
* Le SVG remplit exactement le conteneur de positionnement.
*/
.vx-svg-stage>svg.vx-svg-dispositif {
display: block;
width: 100%;
height: 100%;
margin: 0;
aspect-ratio: 1 / 1;
}
/*
* Bouton placé dans l’angle inférieur droit du SVG.
*/
.vx-speed-btn {
position: absolute;
right: 0.5rem;
bottom: 0.5rem;
z-index: 10;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2rem;
min-height: 1.5rem;
margin: 0;
padding: 0.15em 0.4em;
border: 1px solid currentColor;
border-radius: 999px;
background: var(--color-paper);
color: inherit;
font-family: inherit;
font-size: 0.7rem;
line-height: 1;
letter-spacing: 0.05em;
cursor: pointer;
touch-action: manipulation;
transition:
opacity 0.2s,
background-color 0.2s,
color 0.2s;
}
.vx-speed-btn:hover,
.vx-speed-btn:focus-visible,
.vx-speed-btn[data-active="true"] {
opacity: 1;
}
.vx-speed-btn:focus-visible {
outline: 1px solid currentColor;
outline-offset: 2px;
}
@media print {
.vx-speed-btn {
display: none !important;
}
}
/* BLOC IA */
.vx-ai-block {
position: relative;
font-size: var(--font-size-body);
text-align: justify;
line-height: 1.15;
padding: 20px 40px 8px;
font-family:
-apple-system-body,
ui-sans-serif,
-apple-system,
"system-ui",
"Segoe UI",
Helvetica,
"Apple Color Emoji",
Arial,
"sans-serif",
"Segoe UI Emoji",
"Segoe UI Symbol";
margin-block-end: 4px;
margin-bottom: 4px;
overflow-wrap: break-word;
tab-size: 4;
text-wrap-mode: wrap;
unicode-bidi: isolate;
white-space-collapse: collapse;
hyphens: auto;
}
.vx-ai-prompt-toggle {
position: relative !important;
z-index: 3;
float: left;
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
margin: 0 0.7rem 0.35rem 0;
padding: 0;
appearance: none;
font: 900 0.85rem/1 "Font Awesome 6 Free";
animation: vx-pouls 2s infinite ease-in-out;
/*shape-outside: inset(0 round 999px);*/
shape-margin: 0.25rem;
cursor: pointer;
pointer-events: auto;
}
.vx-ai-block>.vx-text-response {
position: relative;
z-index: 1;
}
.vx-ai-prompt-toggle::before {
content: "\e2ca";
font-family: "Font Awesome 6 Free";
font-weight: 900;
}
.vx-ai-prompt-toggle:hover,
.vx-ai-prompt-toggle.is-active,
.vx-ai-prompt-toggle[data-type-effect-launched="true"] {
animation: none;
}
.vx-text-response {
visibility: hidden;
}
.vx-text-response.vx-no-animation,
.vx-text-response.is-ready,
.vx-text-response.is-streaming,
.vx-text-response.is-complete {
visibility: visible;
line-height: 1.35;
display: block;
}
.vx-text-response.is-ready,
.vx-text-response.is-streaming {
min-height: 10rem;
}
.vx-text-response.is-ready.vx-poet-vexation,
.vx-text-response.is-streaming.vx-poet-vexation {
min-height: 60rem;
}
.vx-text-response.is-streaming::after {
content: "▋";
display: inline-block;
margin-left: 0.08em;
animation: vx-ia-stream-cursor 0.85s steps(1) infinite;
}
/* DEGLITCH ZONE */
.vx-deglitch {
position: relative;
--deglitch-progress: 0;
transition:
filter 120ms linear,
opacity 120ms linear;
}
.vx-deglitch.is-deglitching {
filter: blur(calc((1 - var(--deglitch-progress)) * 1.4px));
}
.vx-deglitch.is-deglitched {
filter: none;
}
.vx-deglitch[data-deglitch] {
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.vx-deglitch.is-swipe-ready,
.vx-deglitch.is-swiping {
cursor: crosshair;
}
.vx-deglitch.is-deglitching:not(.is-deglitched) {
touch-action: none;
}
/* FUN FACTS */
.vx-funfacts {
margin: 4rem 0;
font-family: Roboto, Arial, sans-serif;
}
.vx-funfacts p {
display: block;
position: relative;
margin: 1.25rem 0;
padding: 1rem 1rem 0.75rem 1rem;
border: 1px solid transparent;
border-radius: 14px;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(135deg, #ffe66d, #ff8fab 55%, #8ec5ff) border-box;
font-size: var(--font-size-body);
line-height: 1.45;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.vx-funfact__title {
display: block;
margin-bottom: 0.5rem;
font-size: var(--font-size-small);
font-weight: 800;
letter-spacing: 0.035em;
text-transform: uppercase;
color: #606060;
}
.vx-funfact-ui {
display: flex;
align-items: center;
gap: 0.7rem;
margin-top: 0.8rem;
padding-top: 0.55rem;
border-top: 1px solid #eee;
color: #606060;
font-size: var(--font-size-small);
user-select: none;
}
.vx-funfact__stars {
display: inline-flex;
flex-direction: row-reverse;
align-items: center;
gap: 0.14rem;
}
.vx-funfact__stars button {
height: 2rem;
border: 0;
background: none;
padding: 0;
color: #bbb;
font-size: var(--font-size-accent);
line-height: 1;
cursor: pointer;
transition:
transform 0.12s ease,
color 0.12s ease;
}
.vx-funfact__stars button i {
display: block;
}
.vx-funfact__stars button:hover,
.vx-funfact__stars button:focus-visible,
.vx-funfact__stars button:hover~button,
.vx-funfact__stars button:focus-visible~button {
background: linear-gradient(135deg, #8ec5ff, #ff8fab 55%, #ffe66d);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.vx-funfact__button {
border: 1px solid transparent;
border-radius: 999px;
padding: 0.32rem 0.65rem;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(135deg, #8ec5ff, #ff8fab 55%, #ffe66d) border-box;
font: inherit;
color: #222;
cursor: pointer;
}
.vx-funfact__button:hover {
background:
linear-gradient(135deg, #8ec5ff, #ff8fab 55%, #ffe66d) padding-box,
linear-gradient(135deg, #8ec5ff, #ff8fab 55%, #ffe66d) border-box;
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
}
.vx-funfacts.vx-medieval {
font-family: "Crimson Text", Georgia, serif;
}
.vx-funfacts.vx-medieval p {
color: #5b4630;
border-color: #5b4630;
border-radius: 4px;
background:
linear-gradient(rgba(255, 248, 226, 0.92), rgba(255, 248, 226, 0.92)) padding-box,
linear-gradient(135deg, #5b4630, #b08a4a 55%, #5b4630) border-box;
box-shadow: 4px 4px 0 #2b2118;
font-size: var(--font-size-labor);
line-height: 1.38;
text-align: justify;
hyphens: auto;
}
.vx-funfacts.vx-medieval p::before {
content: "Piège scolastique";
position: absolute;
top: -0.8rem;
left: 0.9rem;
padding: 0.1rem 0.45rem;
background: #fff8e2;
color: #5b4630;
border: 1px solid #5b4630;
font-size: var(--font-size-accent);
line-height: 1;
color: #5b4630;
font-variant: small-caps;
font-weight: 800;
}
.vx-funfacts.vx-medieval .vx-funfact-ui {
gap: 0.55rem;
flex-wrap: wrap;
border-top-color: #8a6a3d;
color: #5b4630;
}
.vx-funfacts.vx-medieval .vx-funfact__stars.vx-medieval-reactions {
display: inline-flex;
flex: 1 1 auto;
flex-direction: row;
align-items: flex-end;
}
.vx-funfacts.vx-medieval .vx-funfact__stars.vx-medieval-reactions button {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 0.18rem;
width: 4.15rem;
min-height: 4.35rem;
padding: 0.25rem 0.12rem 0.18rem;
background: transparent;
color: #5b4630;
font:
700 0.66rem/1 "iA Writer Quattro",
"Inter",
Helvetica,
sans-serif;
letter-spacing: 0.025em;
text-align: center;
text-transform: uppercase;
cursor: pointer;
transition:
transform 0.12s ease,
background 0.12s ease,
border-color 0.12s ease;
}
.vx-funfacts.vx-medieval .vx-funfact__stars.vx-medieval-reactions button:hover,
.vx-funfacts.vx-medieval .vx-funfact__stars.vx-medieval-reactions button:focus-visible,
.vx-funfacts.vx-medieval .vx-funfact__stars.vx-medieval-reactions button.is-selected {
color: #5b4630;
-webkit-text-fill-color: #5b4630;
transform: translateY(-0.18rem);
}
.vx-funfacts.vx-medieval .vx-funfact__stars.vx-medieval-reactions button.is-selected {
border-bottom: 1px solid #5b4630;
}
.vx-funfacts.vx-medieval .vx-funfact__stars.vx-medieval-reactions button.is-unselected {
opacity: 0.5;
}
.vx-funfacts.vx-medieval .vx-funfact__stars.vx-medieval-reactions .vx-medieval__fun-icon {
display: block;
width: 3.05rem;
height: 3.05rem;
object-fit: contain;
pointer-events: none;
}
.vx-medieval-reactor__label {
display: block;
width: 4.1rem;
color: currentColor;
font: inherit;
line-height: 1;
text-align: center;
pointer-events: none;
}
.vx-funfacts.vx-medieval .vx-medieval-reactor {
display: none;
}
.vx-funfacts.vx-medieval .vx-funfact__stars.vx-medieval-reactions+.vx-medieval-reactor+.vx-funfact__button {
margin-left: auto;
}
.vx-medieval-reactor__trigger {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.22rem;
width: 4.8rem;
min-height: 4.15rem;
padding: 0.35rem 0.25rem;
border: 0;
background: transparent;
color: #5b4630;
font:
700 0.68rem/1 "iA Writer Quattro",
"Inter",
Helvetica,
sans-serif;
letter-spacing: 0.035em;
text-align: center;
text-transform: uppercase;
cursor: pointer;
}
.vx-medieval-reactor__trigger:hover,
.vx-medieval-reactor__trigger:focus-visible,
.vx-medieval-reactor.is-open .vx-medieval-reactor__trigger {
background: rgba(255, 248, 226, 0.75);
color: #5b4630;
}
.vx-medieval-reactor__default {
display: grid;
justify-items: center;
gap: 0.22rem;
max-width: 4.8rem;
}
.vx-medieval__longtap-icon {
font-size: var(--font-size-accent);
animation: vx-medieval-longtap-pulse 1.35s ease-in-out infinite;
}
.vx-medieval-reactor__choice {
display: block;
max-width: 4.8rem;
font:
700 0.68rem/1 "iA Writer Quattro",
"Inter",
Helvetica,
sans-serif;
letter-spacing: 0.035em;
text-align: center;
text-transform: uppercase;
}
.vx-medieval-reactor__trigger .vx-medieval__fun-icon {
display: block;
width: 2.65rem;
height: 2.65rem;
object-fit: contain;
}
.vx-medieval-reactor__palette {
display: none;
}
.vx-medieval-reactor__palette[hidden] {
display: none !important;
}
@media (max-width: 700px),
(hover: none),
(pointer: coarse) {
.vx-funfacts.vx-medieval .vx-funfact-ui {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: end;
justify-items: center;
gap: 0.65rem;
padding-top: 0.9rem;
}
.vx-funfacts.vx-medieval .vx-funfact__stars.vx-medieval-reactions {
display: none;
}
.vx-funfacts.vx-medieval .vx-medieval-reactor {
position: relative;
display: inline-flex;
width: 4.8rem;
min-width: 0;
justify-self: center;
}
.vx-funfacts.vx-medieval .vx-medieval-reactor+.vx-funfact__button {
margin-left: 0;
}
.vx-medieval-reactor__palette {
position: fixed;
left: 50%;
bottom: calc(5.8rem + env(safe-area-inset-bottom));
z-index: 7000;
align-items: center;
justify-content: center;
gap: 0.25rem;
width: min(21rem, calc(100vw - 1rem));
height: auto;
padding: 0.42rem;
border: 1px solid #5b4630;
border-radius: 999px;
background: rgba(255, 248, 226, 0.97);
box-shadow: 3px 3px 0 #2b2118;
transform: translateX(-50%);
transform-origin: 50% 100%;
animation: vx-medieval-react-pop 0.14s ease-out;
}
.vx-medieval-reactor__palette:not([hidden]) {
display: flex;
}
.vx-medieval-reactor__palette button {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.12rem;
width: 3.7rem;
min-height: 4rem;
padding: 0.2rem 0.08rem;
border: 0;
border-radius: 999px;
background: transparent;
color: #5b4630;
cursor: pointer;
transition: transform 0.12s ease;
}
.vx-medieval-reactor__palette button:hover,
.vx-medieval-reactor__palette button:focus-visible {
transform: translateY(-0.25rem) scale(1.08);
}
.vx-funfacts.vx-medieval .vx-medieval-reactor__palette .vx-medieval__fun-icon {
width: 2.35rem;
height: 2.35rem;
}
.vx-medieval-reactor__palette button span {
display: block;
width: 3.4rem;
color: #5b4630;
font:
700 0.58rem/1 "iA Writer Quattro",
"Inter",
Helvetica,
sans-serif;
letter-spacing: 0.015em;
text-align: center;
text-transform: uppercase;
pointer-events: none;
}
}
.vx-funfacts.vx-medieval .vx-funfact__button {
flex: 0 0 auto;
hyphens: none;
}
.vx-funfacts.vx-medieval .vx-funfact__button--icon {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 4rem;
min-height: 4rem;
padding: 0.42rem 0.45rem 0.36rem;
background: transparent;
border: none;
color: #5b4630;
font-family: "iA Writer Quattro", "Inter", Helvetica, sans-serif;
text-align: center;
transition:
transform 0.12s ease,
color 0.12s ease;
}
.vx-funfact__button--icon.vx-action-propagare {
position: relative;
}
.vx-funfact__button--icon.vx-action-propagare::before,
.vx-funfact__button--icon.vx-action-propagare::after {
content: "";
position: absolute;
inset: 50% auto auto 50%;
width: 1.2rem;
height: 1.2rem;
border: 1px solid currentColor;
border-radius: 999px;
transform: translate(-50%, -50%) scale(0.2);
opacity: 0;
pointer-events: none;
}
.vx-funfact__button--icon.vx-action-propagare:hover::before {
animation: vx-propagare-wave 1.1s ease-out infinite;
}
.vx-funfact__button--icon.vx-action-propagare:hover::after {
animation: vx-propagare-wave 1.1s ease-out 0.35s infinite;
}
.vx-funfact__button--icon.vx-action-nolo .vx-medieval__action-icon {
transform-origin: 50% 65%;
}
.vx-funfact__button--icon.vx-action-nolo:hover .vx-medieval__action-icon {
animation: vx-nolo-headshake 0.55s infinite;
}
.vx-funfacts.vx-medieval .vx-medieval__action-icon {
display: block;
width: 3.05rem;
height: 3.05rem;
object-fit: contain;
pointer-events: none;
}
.vx-funfacts.vx-medieval .vx-funfact__action-label {
content: attr(data-fun-label);
display: block;
width: 4.8rem;
color: #5b4630;
font:
700 0.75rem / 1.05 "iA Writer Quattro",
"Inter",
Helvetica,
sans-serif;
letter-spacing: 0.035em;
text-align: center;
text-transform: uppercase;
white-space: normal;
pointer-events: none;
}
.vx-funfacts.vx-medieval .vx-funfact__button--icon:focus-visible {
background:
linear-gradient(135deg, #5b4630, #9b7438 55%, #d8b86a) padding-box,
linear-gradient(135deg, #5b4630, #9b7438 55%, #d8b86a) border-box;
color: #fff8e2;
text-shadow: 0 1px 1px rgba(43, 33, 24, 0.35);
}
.vx-medieval-reactor__pill {
position: absolute;
top: 0.15rem;
right: -0.35rem;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.55rem;
height: 1.05rem;
padding: 0 0.28rem;
border: 1px solid #5b4630;
border-radius: 999px;
background: #fff8e2;
color: #5b4630;
font:
700 0.62rem/1 "iA Writer Quattro",
"Inter",
Helvetica,
sans-serif;
letter-spacing: 0.01em;
box-shadow: 0 0 0 2px #fff8e2;
pointer-events: none;
}
/* LEMONS */
.vx-lemons-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin: 2rem 0;
align-items: stretch;
}
.vx-lemons-row figure {
width: 100%;
margin: 0;
transform: none;
}
.vx-lemons-row figure a {
display: block;
width: 100%;
overflow: hidden;
}
.vx-lemons-row figure img {
width: 100%;
height: 100%;
object-fit: cover;
filter: invert(1);
}
.vx-lemons-row figcaption {
box-sizing: border-box;
width: 100%;
text-align: left;
}
/* BELLES HISTOIRES */
.vx-stories {
margin: 3rem 0;
}
.vx-story-card {
position: relative;
overflow: visible;
margin: 4rem 0 7rem 0;
padding: 2.15rem 0.5rem 1.25rem 0.5rem;
border: 1px solid #ddd;
border-radius: 18px;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
line-height: 1.2;
}
.vx-story-card h4 {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 80%;
max-width: calc(100% - 2rem);
margin: 0 auto;
transform: translateY(-76%);
display: flex;
justify-content: center;
padding: 0 0.45rem;
background: #fff;
line-height: 0;
font-size: 0;
letter-spacing: 0;
pointer-events: none;
z-index: 2;
box-sizing: border-box;
}
.vx-story-card.vx-text-myth h4 {
width: 60%;
transform: translateY(-60%);
}
.vx-story-card.vx-text-story h4 {
width: 80%;
transform: translateY(-73%);
}
.vx-story-card.vx-text-roman h4 {
width: 60%;
transform: translateY(-65%);
}
.vx-story-card.vx-story-card--story h4 {
width: 60%;
transform: translateY(-76%);
}
.vx-story-card.vx-text-myth h4 {
width: 60%;
transform: translateY(-60%);
}
.vx-story-card.vx-text-story h4 {
width: 80%;
transform: translateY(-73%);
}
.vx-story-card.vx-text-roman h4 {
width: 60%;
transform: translateY(-65%);
}
.vx-story-card.vx-story-card--story h4 {
width: 60%;
transform: translateY(-76%);
}
.vx-story-card h4 img {
display: block;
height: auto;
max-width: 100%;
}
.vx-story-card p {
font-size: var(--font-size-body);
line-height: 1.75;
text-align: justify;
hyphens: auto;
display: block;
margin: 0rem 1.5rem 0.25rem 1.5rem;
}
.vx-story-card::before {
display: none;
/*display: grid;*/
position: absolute;
left: -1rem;
top: -1rem;
width: 2.4rem;
height: 2.4rem;
place-items: center;
border-radius: 50%;
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: var(--font-size-accent);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.vx-story-card::after {
content: none;
}
.vx-story-card__echo {
display: block;
width: 100%;
margin-top: 0.9rem;
padding: 0.5rem;
border: 0;
border-top: 1px dashed currentColor;
background: transparent;
color: inherit;
opacity: 0.58;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: var(--font-size-menu);
line-height: 1.25;
text-align: left;
cursor: pointer;
}
.vx-story-card__echo:hover,
.vx-story-card__echo.is-active {
opacity: 1;
text-decoration: underline;
text-underline-offset: 0.18em;
}
/* COUPURES DE PRESSE */
.vx-press-clips {
margin: 3rem 0;
padding: 1.4rem 0;
border-top: 3px double var(--color-ink);
border-bottom: 3px double var(--color-ink);
font-family: "Crimson Text", serif;
}
.vx-press-clips p {
display: block;
margin: 0;
font-size: clamp(1.25rem, 3.5vw, 1.5rem);
line-height: 1.22;
letter-spacing: -0.015em;
font-variant: small-caps;
}
.vx-press-clips p em {
font-style: normal;
font-weight: 600;
}
.vx-press-clips p::before {
display: block;
margin-bottom: 0.25rem;
font:
600 0.62rem/1 "iA Writer Quattro",
"Inter",
Helvetica,
sans-serif;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.vx-press-clips p:first-of-type::before {
content: "Music";
}
.vx-press-clips p:nth-of-type(2)::before {
content: "Arts";
}
.vx-press-clips p:nth-of-type(3)::before {
content: "Culture";
}
.vx-press-clips .vx-text-break {
margin: 0.9rem 0;
border-top: 1px solid var(--color-ink);
}
/* LE SAVIEZ-VOUS ? */
.vx-did-you-know,
.vx-did-you-know__grid>p {
position: relative;
display: block;
margin: 3rem 0;
padding: 1.35rem 1.45rem 1.25rem;
border: 1px solid var(--color-ink);
border-radius: 0;
background:
linear-gradient(135deg, rgba(0, 0, 0, 0.045) 0 1px, transparent 1px 10px),
#fff;
box-shadow: 7px 7px 0 var(--color-ink);
}
.vx-did-you-know {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.vx-did-you-know::before,
.vx-did-you-know__grid>p::before {
content: none;
}
.vx-did-you-know::after,
.vx-did-you-know__grid>p::after {
content: "\f0eb LE SAVIEZ-VOUS ?";
position: absolute;
top: -0.72rem;
left: 1rem;
right: auto;
padding: 0.18rem 0.45rem 0.14rem;
border: 1px solid var(--color-ink);
background: #fff;
font-family:
"Font Awesome 6 Free", "iA Writer Quattro", "Inter", Helvetica, sans-serif;
font-size: var(--font-size-menu);
font-weight: 900;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.vx-did-you-know>em {
display: block;
margin: 0 0 0.8rem;
padding-bottom: 0.45rem;
border-bottom: 1px solid var(--color-ink);
font-style: normal;
font-weight: 900;
font-size: var(--font-size-small);
line-height: 1;
letter-spacing: 0.12em;
text-transform: uppercase;
text-align: left;
}
.vx-did-you-know p,
.vx-did-you-know__grid p {
display: block;
margin: 0;
font-size: var(--font-size-body);
line-height: 1.38;
text-align: left;
hyphens: auto;
}
.vx-did-you-know p {
font-size: var(--font-size-labor);
line-height: 1.35;
}
.vx-did-you-know__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.35rem;
margin: 3rem 0;
}
.vx-did-you-know__grid>p {
margin: 0;
padding-top: 2.1rem;
}
.vx-ux-nudges {
display: grid;
gap: 0.7rem;
margin: 2rem 0;
}
.vx-ux-nudges button {
width: 100%;
padding: 0.85rem 1rem;
border: 1px solid #d6d6d6;
border-radius: 999px;
background: #fff;
color: #222;
font: inherit;
font-size: var(--font-size-small);
text-align: left;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
transition:
transform 0.12s ease,
border-color 0.12s ease,
box-shadow 0.12s ease,
background 0.12s ease;
}
.vx-ux-nudges button::before {
content: "○";
margin-right: 0.55rem;
color: #777;
}
.vx-ux-nudges button:hover {
transform: translateY(-1px);
border-color: var(--color-ink);
background: #f7f7f7;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.14);
}
.vx-ux-nudges button:hover::before {
content: "●";
color: var(--color-ink);
}
.vx-ux-nudges button:focus-visible {
outline: 2px solid var(--color-ink);
outline-offset: 3px;
}
.vx-ux-nudges button:active {
transform: translateY(1px);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.18);
}
/* ENTRÉES DU DICO */
.vx-dictionary {
margin: 2.5rem 0;
padding: 1.2rem 1.4rem;
font-family: Georgia, "Times New Roman", serif;
}
.vx-dictionary p {
display: block;
margin: 0;
padding: 0.75rem 0;
font-size: var(--font-size-body);
line-height: 1.38;
border-bottom: 1px solid #d8d8d8;
}
.vx-dictionary p:last-child {
border-bottom: 0;
}
.vx-dictionary dfn {
font-style: normal;
font-weight: 700;
font-variant: small-caps;
letter-spacing: 0.04em;
}
.vx-dictionary dfn::after {
content: " n. f. — ";
font-weight: 400;
font-variant: normal;
letter-spacing: 0;
color: var(--color-muted);
}
/* =========================================================
10. SCORE — partition, clavier, lecture audio
========================================================= */
#vx-score-sheet {
width: 826px;
margin: 0 auto;
background: var(--color-paper);
}
#vx-score-sheet svg {
width: 100%;
height: auto;
display: block;
}
figure.vx-keyboard {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
align-items: center;
overflow: visible;
}
#vx-score-anchor {
width: 100%;
margin: 0;
}
.vx-score {
width: 100%;
border: 1px solid var(--color-ink);
background: #fff;
}
.vx-score__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 2.35rem;
padding: 0.55rem 0.75rem;
border-bottom: 1px solid var(--color-ink);
font:
700 0.78rem/1.2 "iA Writer Quattro",
"Inter",
Helvetica,
sans-serif;
letter-spacing: 0.02em;
}
.vx-score__status {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vx-score__time {
flex: 0 0 auto;
font-variant-numeric: tabular-nums;
}
.vx-score__window {
height: 270px;
border-width: 0;
overflow: hidden;
}
.vx-score__window:focus {
outline: 2px solid var(--color-ink);
outline-offset: -2px;
}
.vx-score__progress {
height: 4px;
background: #eee;
}
.vx-score__progress span {
display: block;
width: 0;
height: 100%;
background: var(--color-ink);
transition: width 0.08s linear;
}
.vx-score__help {
display: block;
margin: 0;
padding: 0.65rem 0.75rem 0.75rem;
border-top: 1px solid #eee;
color: #555;
font-size: var(--font-size-small);
line-height: 1.25;
}
figure.vx-keyboard #vx-keyboard {
justify-self: center;
margin: 0.4rem auto 0;
}
#vx-keyboard+#vx-score-controls {
margin: 0.25rem 0 1rem;
}
figure.vx-keyboard figcaption {
justify-self: center;
width: min(var(--measure-text), 100%);
margin-top: 1rem;
}
/* KEYBOARD */
#vx-keyboard {
display: flex;
width: 100%;
justify-content: center;
margin: 20px;
position: relative;
}
#vx-keyboard .vx-keyboard__key--white {
width: 1rem;
height: 4rem;
border: 1px solid var(--color-ink);
background-color: var(--color-paper);
position: relative;
cursor: pointer;
}
#vx-keyboard .vx-keyboard__key--black {
width: 70%;
height: 60%;
background-color: var(--color-ink);
border: 1px solid var(--color-ink);
position: absolute;
top: 0;
left: 70%;
z-index: 1;
cursor: pointer;
}
#vx-keyboard .vx-keyboard__key--white.is-active,
#vx-keyboard .vx-keyboard__key--black.is-active {
background-color: red !important;
}
#vx-keyboard+#vx-score-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 0.65rem;
margin: 0.75rem 0 1.75rem;
}
#vx-keyboard+#vx-score-controls button {
display: inline-grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border: 1px solid var(--color-ink);
border-radius: 999px;
background: var(--color-paper);
color: var(--color-ink);
cursor: pointer;
font-size: var(--font-size-body);
line-height: 1;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
transition:
transform 0.12s ease,
background 0.12s ease,
color 0.12s ease,
opacity 0.12s ease;
}
#vx-keyboard+#vx-score-controls button:hover:not(:disabled) {
background: var(--color-ink);
color: var(--color-paper);
transform: translateY(-1px);
}
#vx-keyboard+#vx-score-controls button:active:not(:disabled) {
transform: translateY(0);
}
#vx-keyboard+#vx-score-controls button:disabled {
opacity: 0.28;
cursor: default;
box-shadow: none;
}
#vx-keyboard+#vx-score-controls button.is-active {
background: var(--color-ink);
color: var(--color-paper);
}
#vx-score-anchor {
width: 100%;
margin: 0 auto 1rem;
background: var(--color-paper);
}
.vx-score__window {
position: relative;
width: 100%;
height: 260px;
overflow: hidden;
border: 1px solid var(--color-ink);
background: var(--color-paper);
}
.vx-score__strip {
position: absolute;
left: 0;
top: 0;
width: 6200px;
height: 100%;
will-change: transform;
}
.vx-score__strip svg {
display: block;
width: 6200px !important;
max-width: none !important;
height: auto;
}
.vx-score__playhead {
position: absolute;
top: 0;
bottom: 0;
left: 18%;
width: 2px;
background: red;
z-index: 5;
pointer-events: none;
}
.vx-keyboard__key--white.is-active,
.vx-keyboard__key--black.is-active {
background: red !important;
}
.vx-petits-inventeurs {
margin: 1.5rem 0;
}
.vx-petits-inventeurs .pi-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
}
@media screen and (max-width: 700px) {
.vx-petits-inventeurs .pi-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
}
.vx-petits-inventeurs .pi-card {
display: block;
text-decoration: none;
border-radius: 10px;
border: 1px solid #e0e0e0;
overflow: hidden;
background: var(--color-paper);
transition: border-color .15s, transform .15s;
}
.vx-petits-inventeurs .pi-card:hover {
border-color: var(--color-ink);
transform: translateY(-2px);
}
.vx-petits-inventeurs .pi-card:hover::after {
display: none;
}
.vx-petits-inventeurs .pi-thumb {
width: 100%;
aspect-ratio: 16 / 10;
display: block;
object-fit: cover;
background: #f1f3f4;
border-bottom: 1px solid #e0e0e0;
opacity: 1;
transition: opacity .2s;
}
.vx-petits-inventeurs .pi-thumb.loading {
opacity: .35;
}
.vx-petits-inventeurs .pi-label {
padding: 8px 10px 10px;
font-size: var(--font-size-small);
line-height: 1.4;
color: var(--color-ink);
text-align: left;
}
.vx-petits-inventeurs .pi-ext {
display: inline-block;
margin-left: 3px;
font-size: 10px;
opacity: .45;
vertical-align: middle;
}
.pi-card--suggested {
border-style: dashed;
}
.pi-suggested-by {
padding: 4px 10px 8px;
font-size: 11px;
color: #888;
font-style: italic;
}
.vx-suggest {
margin: 2rem 0 1rem;
}
.vx-suggest__intro {
margin-bottom: 1rem;
}
.vx-suggest__form {
box-sizing: border-box;
width: 100%;
max-width: 480px;
display: flex;
flex-direction: column;
gap: 14px;
}
.vx-suggest__field {
display: flex;
flex-direction: column;
gap: 5px;
}
.vx-suggest__field label {
font-size: var(--font-size-small);
font-weight: 600;
}
.vx-suggest__optional {
font-weight: 400;
color: #888;
}
.vx-suggest__field input[type="url"],
.vx-suggest__field input[type="text"],
.vx-suggest__field input[type="email"] {
box-sizing: border-box;
width: 100%;
padding: 8px 10px;
border: var(--border-ink);
background: var(--color-paper);
color: var(--color-ink);
font-family: inherit;
font-size: var(--font-size-small);
border-radius: 0;
width: 100%;
}
.vx-suggest__field input:focus {
outline: 2px solid var(--color-ink);
outline-offset: 2px;
}
.vx-suggest__yt-preview,
.vx-suggest__thumb-preview {
width: 160px;
height: 100px;
object-fit: cover;
border: var(--border-ink);
margin-top: 6px;
}
.vx-suggest__actions button {
padding: 9px 20px;
border: var(--border-ink);
background: var(--color-ink);
color: var(--color-paper);
font-family: inherit;
font-size: var(--font-size-body);
cursor: pointer;
border-radius: 0;
transition: opacity .15s;
}
.vx-suggest__actions button:hover {
opacity: .75;
}
.vx-suggest__actions button:disabled {
opacity: .4;
cursor: default;
}
.vx-suggest__msg {
margin: 0;
font-size: var(--font-size-small);
padding: 8px 12px;
}
.vx-suggest__msg--success {
border-left: 3px solid var(--color-ink);
}
.vx-suggest__msg--error {
border-left: 3px solid #c00;
color: #c00;
}
/* =========================================================
90. ANIMATIONS — effets transversaux
========================================================= */
/* Cockpit / compteur lire-plus */
/* Notifications */
/* IA / ChatGPT */
/* =========================================================
95. RESPONSIVE — adaptations générales
========================================================= */
/* YouTube accueil : grille */
@media (max-width: 680px) {
.vx-video-wall__grid {
grid-template-columns: 1fr;
}
}
/* Figures */
@media (max-width: 760px) {
figure.vx-figure-pair {
left: auto;
grid-template-columns: 1fr;
width: 100%;
margin: 4rem auto;
transform: none;
}
}
@media (min-width: 900px) {
figure.vx-figure-side {
position: relative;
left: 50%;
display: grid;
align-items: stretch;
gap: var(--figure-gap);
width: min(82vw, 980px);
margin-right: 0;
margin-left: 0;
transform: translateX(-50%);
}
figure.vx-figure-side.vx-caption--right {
grid-template-columns: var(--figure-img-col) var(--figure-caption-col);
}
figure.vx-figure-side.vx-caption--left {
grid-template-columns: var(--figure-caption-col) var(--figure-img-col);
}
figure.vx-figure-side.vx-img--vcenter> :is(a, img, picture, video):first-child {
align-self: center;
}
figure.vx-figure-side.vx-img--vcenter>a:first-child img,
figure.vx-figure-side.vx-img--vcenter>img:first-child,
figure.vx-figure-side.vx-img--vcenter>picture:first-child img,
figure.vx-figure-side.vx-img--vcenter>video:first-child {
display: block;
width: 100%;
height: auto;
margin-block: auto;
}
figure.vx-figure-side> :is(a, img, picture, video):first-child {
grid-row: 1;
align-self: start;
min-width: 0;
width: 100%;
}
figure.vx-figure-side.vx-caption--right> :is(a, img, picture, video):first-child {
grid-column: 1;
}
figure.vx-figure-side.vx-caption--left> :is(a, img, picture, video):first-child {
grid-column: 2;
}
figure.vx-figure-side>figcaption {
grid-row: 1;
align-self: end;
min-width: 0;
margin: 0;
border-top: 0;
}
figure.vx-figure-side.vx-caption--right>figcaption {
grid-column: 2;
border-left: 1px solid var(--color-ink);
text-align: left;
hyphens: none;
max-width: 25rem;
padding-left: 1rem;
}
figure.vx-figure-side.vx-caption--left>figcaption {
grid-column: 1;
border-right: 1px solid var(--color-ink);
text-align: right;
hyphens: none;
max-width: 25rem;
padding-right: 1rem;
}
figure.vx-figure-side>a:first-child img,
figure.vx-figure-side>img:first-child {
width: 100%;
height: auto;
}
.vx-ai-block .vx-ai-prompt-toggle {
left: 0;
}
}
@media (max-width: 899px) {
figure.vx-figure--wide,
figure.vx-figure--full,
figure.vx-figure-side {
left: auto;
display: flex;
flex-direction: column;
width: 100%;
margin: 5rem auto;
transform: none;
}
figure.vx-figure-side> :is(a, img, picture, video):first-child {
order: 1;
}
figure.vx-figure-side>figcaption {
order: 2;
width: 100%;
border-top: 0;
border-right: 0;
border-left: 0;
}
}
/* GPT */
@media screen and (max-width: 700px) {
.vx-gpt-thinking__bubble {
left: 50%;
transform: translateX(-50%);
width: calc(100vw - 2rem);
}
figcaption.vx-ai-block .vx-ai-prompt-toggle {
position: relative !important;
z-index: 10;
left: auto !important;
top: auto !important;
float: left;
width: 2rem;
height: 2rem;
margin: 0 0.65rem 0.25rem 0;
/*shape-outside: circle(50%);
clip-path: circle(50%);*/
pointer-events: auto;
touch-action: manipulation;
}
figure.vx-figure-side>figcaption.vx-ai-block {
position: relative;
z-index: 2;
font-size: var(--font-size-small);
pointer-events: auto;
}
.vx-ai-block:not(figcaption) {
margin-left: 0;
padding-left: 1.55rem;
}
.vx-ai-prompt-toggle {
width: 1.85rem;
height: 1.85rem;
left: 0 !important;
}
}
@media (max-width: 700px) {
.vx-chat-compare__shot {
width: 100vw;
margin: 4rem 50%;
padding: 18px 0 22px;
}
.vx-chat-compare {
grid-template-columns: 1fr;
width: calc(100% - 28px);
gap: 10px;
}
.vx-chat-compare__head {
margin-bottom: 18px;
padding: 0 14px;
}
.vx-chat-response {
min-height: 90px;
padding: 14px 16px 16px;
}
.vx-ai-block {
font-size: 85% line-height: 1.25;
}
}
/* Breakpoints larges — corps élargi proportionnellement */
@media screen and (min-width: 1400px) {
body {
font-size: 1.35rem;
line-height: 1.5;
}
}
@media screen and (min-width: 1900px) {
body {
font-size: 1.5rem;
}
}
/* Mobile principal */
/* MOBILE */
@media screen and (max-width: 700px) {
html {
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
}
body {
width: auto !important;
max-width: none;
margin: 0;
padding: 1rem 1rem 45vh;
font-size: 1.05rem;
/* ≈ 17px à base 16 ; en rem pour que les tokens restent valides */
line-height: 1.55;
overflow-x: hidden;
-webkit-touch-callout: none;
}
button,
input,
select,
textarea {
font-size: 1rem;
/* 16px minimum iOS — en rem */
}
h2 {
padding-top: 5rem;
font-size: 1.45rem;
}
h3 {
margin-top: 7rem;
margin-left: 0;
font-size: 1.45rem;
line-height: 1.1;
}
p {
font-size: var(--font-size-body);
line-height: 1.25;
}
#vx-epigraph {
padding-right: 0;
text-align: left;
}
.vx-text-break {
margin: 1.2rem 0;
}
img,
video,
canvas,
svg {
max-width: 100%;
}
figure {
width: 80%;
margin: 3rem auto;
border: 0;
overflow: visible;
}
figure a {
width: 100%;
}
figcaption {
padding: 0;
font-size: var(--font-size-small);
line-height: 1.25;
margin-top: 1rem;
}
.vx-proof-link {
width: 20px;
height: 20px;
}
span.vx-asterism {
margin: 3rem 0;
}
.vx-drawer__content,
.vx-drawer__content p {
font-size: var(--font-size-small);
line-height: 1.25;
}
[data-scroll-resist].is-resisting::before {
content: none !important;
display: none !important;
}
/* GOOGLE RESULTS (MOBILE) */
.vx-serp {
width: calc(100vw - 2rem);
margin-left: 50%;
transform: translateX(-50%);
font-family: Roboto, Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.25;
}
.vx-serp__result {
position: relative;
display: grid;
grid-template-columns: 42% 1fr 20px;
column-gap: 14px;
padding: 14px 8px 14px 0;
border-bottom: 1px solid #e6e6e6;
}
.vx-serp__topline {
display: none;
}
.vx-serp__title {
grid-column: 2;
grid-row: 1;
margin: 2px 0 10px;
color: #202124;
font-size: var(--font-size-body);
font-weight: 400;
line-height: 1.12;
text-decoration: none;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.vx-serp__title:hover {
text-decoration: none;
}
.vx-serp__body {
display: contents;
}
.vx-serp__thumb {
grid-column: 1;
grid-row: 1 / span 2;
align-self: start;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
flex: none;
border-radius: 12px;
}
.vx-serp__thumb img {
object-position: center;
}
.vx-serp__play,
.vx-serp__scale {
display: none;
}
.vx-serp__duration {
left: 8px;
bottom: 8px;
padding: 2px 7px 3px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.72);
font-size: var(--font-size-small);
font-weight: 700;
line-height: 1;
}
.vx-serp__snippet {
display: contents;
}
.vx-serp__snippet p:first-child {
display: none;
}
.vx-serp__snippet .vx-serp__meta {
display: block;
overflow: hidden;
color: #6f6f6f;
white-space: normal;
}
.vx-serp__snippet .vx-serp__meta .vx-serp__line {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.vx-serp__snippet .vx-serp__meta::first-letter {
color: #202124;
}
.vx-serp__result::after {
content: "⋮";
grid-column: 3;
grid-row: 1 / span 2;
align-self: end;
justify-self: end;
color: #6f6f6f;
font-size: 1.9rem;
line-height: 1;
}
/* ACCUEIL CHAINE MASCU YT (MOBILE) */
.vx-video-wall {
width: 100vw;
margin: 3rem calc(50% - 50vw);
padding: 0 12px;
background: #fff;
color: #0f0f0f;
}
.vx-video-wall .vx-video-wall__tabs {
display: flex;
gap: 10px;
margin: 0 0 18px;
overflow-x: auto;
scrollbar-width: none;
}
.vx-video-wall .vx-video-wall__tabs::-webkit-scrollbar {
display: none;
}
.vx-video-wall .vx-video-wall__tab {
flex: 0 0 auto;
padding: 9px 14px;
border-radius: 14px;
background: #f2f2f2;
color: #0f0f0f;
font-size: 14px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
.vx-video-wall .vx-video-wall__tab.is-active {
background: #0f0f0f;
color: #fff;
}
.vx-video-wall .vx-video-wall__grid {
grid-template-columns: 1fr !important;
gap: 18px;
}
.vx-video-wall .vx-video-card {
display: grid;
grid-template-columns: 46% minmax(0, 1fr);
column-gap: 12px;
align-items: start;
}
.vx-video-wall .vx-video-card__thumb {
border-radius: 8px;
aspect-ratio: 16 / 9;
}
.vx-video-wall .vx-video-card__actions {
display: none;
}
.vx-video-wall .vx-video-card__info {
display: grid;
grid-template-columns: minmax(0, 1fr) 28px;
column-gap: 8px;
margin: 0;
}
.vx-video-wall .vx-video-card__title {
color: #0f0f0f;
font-size: var(--font-size-small);
font-weight: 400;
line-height: 1.18;
-webkit-line-clamp: 2;
}
.vx-video-wall .vx-video-card__meta {
grid-column: 1;
margin-top: 5px;
color: #606060;
font-size: 0.75rem;
line-height: 1.25;
white-space: normal;
}
.vx-video-wall .vx-video-card__menu {
grid-column: 2;
grid-row: 1 / 3;
align-self: center;
width: 28px;
height: 36px;
margin: 0;
color: #0f0f0f;
background: transparent;
}
.vx-video-wall .vx-video-card__menu:hover,
.vx-video-wall .vx-video-card.is-open .vx-video-card__menu {
background: transparent;
}
.vx-video-wall .vx-video-card__menu svg {
width: 24px;
height: 24px;
}
.vx-video-wall .vx-video-card__duration {
right: 5px;
bottom: 5px;
padding: 2px 5px;
border-radius: 4px;
font-size: 13px;
font-weight: 700;
}
.vx-video-wall .vx-video-card__popover {
position: fixed;
left: 12px;
right: 12px;
bottom: 12px;
top: auto;
width: auto;
z-index: 3000;
background: #fff;
border-radius: 14px;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}
.vx-video-wall .vx-video-card__popover button {
color: #0f0f0f;
}
.vx-video-wall .vx-video-card__popover button:hover {
background: #f2f2f2;
}
/* RECOS RACOLEUSES (MOBILE) */
.vx-youtube-recos {
padding: 0;
}
.vx-youtube-recos li {
grid-template-columns: 128px 1fr;
gap: 10px;
padding: 8px 0;
}
.vx-youtube-recos .vx-thumb {
width: 128px;
aspect-ratio: 16 / 9;
height: auto;
}
.vx-youtube-recos .vx-title-text {
font-size: var(--font-size-small);
line-height: 1.2;
width: 90%;
}
.vx-youtube-recos .vx-meta,
.vx-youtube-recos .vx-badge {
font-size: var(--font-size-menu);
}
/* YT COMMENTAIRES (MOBILE) */
.vx-youtube-comments {
margin: 2rem 0;
}
.vx-youtube-comments .vx-youtube-comment {
grid-template-columns: 34px 1fr;
gap: 10px;
}
.vx-youtube-comments .vx-avatar,
.vx-youtube-comments .vx-avatar img {
width: 34px;
height: 34px;
}
.vx-youtube-comments .vx-content-text {
font-size: var(--font-size-small);
line-height: 1.4;
}
.vx-youtube-comments .vx-comment__actions-alt {
flex-wrap: wrap;
gap: 10px;
}
/* GHOST COMMENTAIRES (MOBILE) */
.vx-ghost-wrap {
width: 108vw !important;
margin-left: 50% !important;
transform: translateX(-50%) !important;
}
.vx-ghost-canvas {
width: 100% !important;
height: auto !important;
}
.vx-reddit,
.vx-chat,
.vx-chat__composer,
.vx-funfacts,
.vx-lemons-row {
width: var(--measure-wide);
max-width: 90%;
}
.vx-reddit {
max-width: none;
margin: 2.25rem 0 2.25rem 50%;
padding: 0.65rem 0;
overflow: visible;
transform: translateX(-50%);
transform-origin: center top;
font-size: 1rem;
/* simulation plateforme : valeur intentionnellement fixe */
text-align: left;
hyphens: none;
}
.vx-reddit>.vx-proof-link {
top: 0.95rem;
right: 0.85rem;
opacity: 0.55;
}
.vx-reddit .vx-post,
.vx-reddit .vx-comment {
background: #fff;
border-color: #e2e5e8;
}
.vx-reddit .vx-post {
padding: 0.95rem 0.95rem 0.8rem;
border: 1px solid #e2e5e8;
border-bottom: 0;
border-radius: 1rem 1rem 0 0;
}
.vx-reddit .vx-separator {
height: 0.55rem;
border-left: 1px solid #e2e5e8;
border-right: 1px solid #e2e5e8;
background: #f6f8fa;
}
.vx-reddit .vx-comment {
padding: 0.95rem 0.95rem 1rem;
border: 1px solid #e2e5e8;
border-top: 0;
border-radius: 0 0 1rem 1rem;
}
.vx-reddit .vx-top,
.vx-reddit .vx-comment__head {
min-width: 0;
gap: 0.45rem;
}
.vx-reddit .vx-top>div:not(.vx-translate) {
min-width: 0;
}
.vx-reddit .vx-sub {
height: auto;
font-size: 0.8rem;
line-height: 1.05;
letter-spacing: -0.03em;
}
.vx-reddit .vx-meta,
.vx-reddit .vx-user,
.vx-reddit .vx-age {
font-size: 0.72rem;
line-height: 1.15;
}
.vx-reddit .vx-user {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vx-reddit .vx-translate {
display: none;
}
.vx-reddit button.vx-text-join {
margin-left: auto;
padding: 0.48rem 0.72rem;
border-radius: 999px;
font-size: 0.68rem;
line-height: 1;
}
.vx-reddit h1 {
max-width: calc(100% - 1.8rem);
margin: 0.9rem 0 0.85rem;
font-size: 1rem;
line-height: 1.12;
letter-spacing: -0.025em;
}
.vx-reddit .vx-actions {
display: flex;
flex-wrap: nowrap;
gap: 0.45rem;
overflow: visible;
}
.vx-reddit .vx-pill {
height: 2rem;
min-width: 0;
padding: 0 0.72rem;
gap: 0.42rem;
box-shadow: none;
font-size: 1rem;
}
.vx-reddit .vx-pill svg {
flex: 0 0 auto;
width: 1.05rem;
height: 1.05rem;
}
.vx-reddit .vx-pill b {
font-size: 0.72rem;
}
.vx-reddit .vx-pill .vx-divider,
.vx-reddit .vx-vote .vx-divider {
height: 1rem;
}
.vx-reddit .vx-spacer,
.vx-reddit .vx-pill.is-small,
.vx-reddit .vx-pill.vx-share {
display: none;
}
.vx-reddit .vx-sub__avatar {
width: 1.9rem;
height: 1.9rem;
}
.vx-reddit .vx-user__avatar {
width: 2rem;
height: 2rem;
}
.vx-reddit .vx-comment p {
display: block;
max-width: 100%;
margin: 0.8rem 0 0;
font-size: var(--font-size-small);
line-height: 1.32;
letter-spacing: -0.02em;
text-align: justify;
}
.vx-reddit .vx-comment__actions {
justify-content: flex-start;
gap: 0.7rem;
margin-top: 0.65rem;
overflow: hidden;
font-size: 1rem;
}
.vx-reddit .vx-comment__actions .vx-icon {
flex: 0 0 auto;
width: 1.05rem;
height: 1.05rem;
}
.vx-reddit .vx-comment__actions strong {
font-size: 0.7rem;
}
.vx-reddit .vx-comment__actions img.vx-icon {
display: none;
}
.vx-lemons-row {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
/* CHATGPT COMPOSER (MOBILE) */
.vx-chat__composer {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 6px;
padding: 8px;
}
.vx-chat__composer .vx-chat__input {
min-width: 0;
}
.vx-chat__plus {
width: 18px;
height: 18px;
font-size: 19px;
}
.vx-chat__send {
display: grid;
place-items: center;
width: 28px;
height: 28px;
}
.vx-chat__disclaimer {
max-width: 100%;
font-size: 7px;
}
.vx-chat__composer .vx-chat__model,
.vx-chat__composer .vx-chat__mic {
display: none;
}
.vx-chat__input {
font-size: 14px;
}
/* LE SAVIEZ-VOUS ? (MOBILE) */
.vx-did-you-know {
margin-left: 0;
margin-right: 0;
}
.vx-did-you-know,
.vx-did-you-know__grid>p {
padding: 1.25rem 1rem 1rem;
box-shadow: 5px 5px 0 var(--color-ink);
}
.vx-did-you-know>em {
font-size: var(--font-size-menu);
}
.vx-did-you-know p,
.vx-did-you-know__grid p {
font-size: var(--font-size-body);
line-height: 1.35;
}
.vx-did-you-know__grid {
display: block;
}
.vx-did-you-know__grid>p {
margin: 2.5rem 0;
}
/*.vx-recall-pop {
max-height: 75vh;
width: 75%;
overflow: auto;
padding: .85rem;
font-size: var(--font-size-small);
line-height: 1.35;
text-align: left;
box-shadow: 0 8px 30px rgba(0, 0, 0, .28);
}*/
/* PROMPT + RÉPONSE (MOBILE) */
.vx-ai-prompt-toggle {
width: 1.5rem;
height: 1.5rem;
margin: 0 0.6rem 0.3rem 0;
}
.vx-ai-block:not(figcaption) {
margin-left: 0;
}
.vx-ai-block:not(figcaption) {
margin-left: 0;
padding-left: 1.55rem;
}
/* CHECKBOXES (MOBILE) */
div.vx-check-option,
div.vx-check-option input[type="checkbox"],
div.vx-check-option label {
cursor: pointer;
font-size: var(--font-size-body);
}
/* GPT BARRE (MOBILE) */
.vx-chat h1 {
font-size: 26px;
}
.vx-promptbar {
height: 57px;
}
.vx-plus,
.vx-mic {
width: 18px;
height: 18px;
}
.vx-voice {
width: 28px;
height: 28px;
}
.vx-promptbar input {
font:
400 16px / 1.2 Arial,
Helvetica,
sans-serif;
}
/* FUN FACTS (MOBILE) */
.vx-funfact-ui .vx-funfact__button {
display: none;
}
.vx-funfacts.vx-medieval p {
text-align: left;
hyphens: none;
}
.vx-funfacts.vx-medieval .vx-funfact-ui {
display: grid;
width: 100%;
}
.vx-funfacts.vx-medieval .vx-funfact-ui .vx-funfact__button {
display: inline-flex;
justify-self: center;
}
.vx-funfacts.vx-medieval .vx-funfact__button--icon {
width: 3.5rem;
min-height: 3.85rem;
}
.vx-funfacts.vx-medieval .vx-medieval__action-icon {
width: 2.5rem;
height: 2.5rem;
}
.vx-funfacts.vx-medieval .vx-funfact__action-label {
font-size: var(--font-size-menu);
line-height: 1;
}
.vx-medieval-reactor__pill {
top: -0.1rem;
right: -0.15rem;
min-width: 1.25rem;
height: 0.95rem;
}
/* BELLES HISTOIRES (MOBILE) */
.vx-story-card p {
font-size: var(--font-size-small);
line-height: 1.25;
}
.vx-story-card.vx-text-myth h4 {
width: 80%;
transform: translateY(-60%);
}
.vx-story-card.vx-text-story h4 {
width: 100%;
transform: translateY(-73%);
}
.vx-story-card.vx-text-roman h4 {
width: 80%;
transform: translateY(-65%);
}
.vx-story-card.vx-story-card--story h4 {
width: 80%;
transform: translateY(-76%);
}
/* PIANO (MOBILE) */
figure.vx-keyboard {
display: block;
}
.vx-keyboard__key--white.is-active,
.vx-keyboard__key--black.is-active {
background: red !important;
}
#vx-keyboard {
width: 100%;
overflow-x: auto;
touch-action: none;
margin: 0;
}
#vx-keyboard .vx-keyboard__key--white {
min-width: 16px;
height: 70px;
}
#vx-keyboard .vx-keyboard__key--black {
width: 50%;
height: 50%;
}
#vx-keyboard+#vx-score-controls {
display: flex;
gap: 1rem;
justify-content: center;
margin-top: 0.75rem;
}
#vx-keyboard+#vx-score-controls button {
min-width: 44px;
min-height: 44px;
}
/* MAIL CONCIERGE (MOBILE) */
.vx-mail__sidebar {
display: none;
}
.vx-mail__search {
display: none;
}
.vx-mail-card__body p {
font-size: var(--font-size-labor);
}
}
/* Screen global */
@media screen {
body {
width: var(--measure-text) !important;
max-width: var(--measure-text);
margin: 0 auto;
padding: calc(var(--reader-shell-height) + 2rem) 0 45vh 0 !important;
}
figure,
.vx-serp,
.vx-video-wall,
.vx-youtube-recos,
.vx-chat,
.vx-mail,
figure.vx-keyboard {
width: var(--measure-wide);
max-width: var(--measure-wide);
margin-left: 50%;
margin-right: 0;
transform: translateX(-50%);
}
figure .vx-ai-block {
display: block;
width: var(--measure-text);
font-size: var(--font-size-body);
}
figure img,
figure a {
max-width: 100%;
}
}
/* Mobile final */
@media screen and (max-width: 700px) {
:root {
--reader-shell-height: 3.35rem;
}
body {
width: var(--measure-text);
max-width: var(--measure-text);
margin: 0 auto;
padding: calc(var(--reader-shell-height) + 2rem) 0 45vh;
}
h3 {
max-width: 90%;
}
.vx-reader {
padding: 0.55rem 1rem 0.65rem;
}
.vx-reader__bar {
flex-wrap: wrap;
}
.vx-reader__current {
order: 3;
flex: 1 0 100%;
max-width: 100%;
padding-top: 0.25rem;
}
.vx-reader__spacer {
display: none;
}
.vx-selection-menu {
right: auto;
left: 50%;
transform: translateX(-50%);
}
.vx-reader__toc {
top: calc(var(--reader-shell-height) + 0.75rem);
left: 0;
width: min(20rem, 72vw);
}
.vx-reader__button,
.vx-reader .vx-reader__unfold-all {
min-height: 2.2rem;
padding: 0.52rem 0.72rem;
}
figure,
.vx-serp,
.vx-video-wall,
.vx-youtube-recos,
.vx-chat,
.vx-mail,
figure.vx-keyboard {
width: var(--measure-full);
max-width: var(--measure-full);
margin-left: 50%;
transform: translateX(-50%);
}
figure:not(.vx-keyboard):not(.vx-device) {
width: min(34rem, calc(100vw - 2rem));
max-width: min(34rem, calc(100vw - 2rem));
}
.vx-drawer__content {
max-width: calc(100vw - 2rem);
}
.vx-score__toolbar {
align-items: flex-start;
flex-direction: column;
gap: 0.25rem;
}
.vx-score__window {
height: 220px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.vx-score__help {
font-size: var(--font-size-menu);
}
}
/* END MATTER — SOURCES, POUCES VERTS, PRÉCISIONS */
.vx-endmatter {
max-width: var(--measure-wide, 760px);
margin: 0 auto;
padding: clamp(1.25rem, 4vw, 2rem);
border-top: 1px solid currentColor;
font-size: var(--font-size-body);
line-height: 1.45;
margin-top: 30rem;
width: var(--measure-wide);
max-width: var(--measure-wide);
margin-left: 50%;
margin-right: 0;
transform: translateX(-50%);
}
.vx-endmatter h4 {
margin-top: 0;
}
.vx-endmatter__kicker {
margin: 0 0 0.75rem;
font-size: var(--font-size-small);
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.62;
}
.vx-endmatter h2 {
margin: 0 0 1.5rem;
font-size: clamp(1.6rem, 5vw, 3rem);
line-height: 0.95;
font-weight: 500;
letter-spacing: -0.04em;
}
.vx-endmatter h3 {
margin: 0 0 0.75rem;
font-size: var(--font-size-small);
line-height: 1.1;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.vx-endmatter p {
display: block;
margin: 0;
font-size: inherit;
line-height: inherit;
}
.vx-endmatter a {
color: inherit;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.16em;
}
.vx-endmatter__intro {
display: grid;
grid-template-columns: minmax(4.5rem, 7rem) 1fr;
align-items: stretch;
gap: 2rem;
margin: 0 0 1.4rem;
padding: 0.9rem 1rem;
border: 1px solid currentColor;
background:
linear-gradient(90deg, rgba(0, 0, 0, 0.055), transparent 42%), transparent;
}
.vx-endmatter__cover {
width: 100%;
height: 100%;
min-height: 8rem;
object-fit: cover;
align-self: stretch;
}
.vx-endmatter__intro p {
display: block;
align-self: center;
}
.vx-endmatter__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.8rem;
}
.vx-endmatter-card {
position: relative;
padding: 1rem;
border: 1px solid currentColor;
background: var(--color-paper, #fff);
box-shadow: 3px 3px 0 currentColor;
text-align: left;
hyphens: none;
}
.vx-endmatter-card--wide {
grid-column: 1 / -1;
}
.vx-endmatter-card--legal {
background: repeating-linear-gradient(-45deg,
transparent 0,
transparent 9px,
rgba(0, 0, 0, 0.045) 9px,
rgba(0, 0, 0, 0.045) 10px);
}
.vx-version-list {
margin: 0;
padding: 0;
list-style: none;
counter-reset: vex-version;
}
.vx-version-list li {
counter-increment: vex-version;
display: grid;
grid-template-columns: 6.8rem 1fr;
gap: 0.75rem;
padding: 0.38rem 0;
border-top: 1px dotted rgba(0, 0, 0, 0.32);
}
.vx-version-list li:first-child {
border-top: 0;
padding-top: 0;
}
.vx-version-list span {
font-size: var(--font-size-small);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0.68;
}
.vx-thanks {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.2rem;
margin-bottom: 0.9rem;
}
@media (max-width: 720px) {
.vx-endmatter {
margin-top: 4rem;
padding: 1rem;
}
.vx-endmatter__intro {
grid-template-columns: 4.75rem 1fr;
gap: 0.75rem;
padding: 0.75rem;
}
.vx-endmatter__cover {
min-height: 6.5rem;
}
.vx-endmatter__grid,
.vx-thanks {
grid-template-columns: 1fr;
}
.vx-version-list li {
grid-template-columns: 1fr;
gap: 0.15rem;
}
.vx-endmatter-card {
box-shadow: 2px 2px 0 currentColor;
}
}
/* =========================================================
96. MOBILE — harmonisation finale
========================================================= */
@media screen and (max-width: 700px) {
:root {
--measure-text: min(34rem, calc(100vw - 2rem));
--measure-wide: calc(100vw - 2rem);
--measure-full: calc(100vw - 1rem);
}
html {
overflow-x: hidden;
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
width: var(--measure-text) !important;
max-width: var(--measure-text);
margin: 0 auto;
padding: calc(var(--reader-shell-height) + 1.4rem) 0 42vh !important;
overflow-x: hidden;
font-size: 1.05rem;
/* ≈ 17px à base 16 ; en rem pour cohérence avec les tokens */
line-height: 1.52;
}
p {
font-size: var(--font-size-body);
line-height: 1.52;
}
div.vx-text-break {
margin: 1.35rem 0;
}
div.vx-text-break.is-large {
margin: 10rem 0;
}
.vx-page-header {
min-height: calc(100svh - var(--reader-shell-height) - 2rem);
margin: 0 0 4rem;
}
.vx-hero__title,
h1 {
margin-top: 1.6rem;
font-size: clamp(3rem, 17vw, 4.8rem);
line-height: 0.86;
letter-spacing: -0.075em;
}
#vx-epigraph {
font-size: var(--font-size-small);
line-height: 1.25;
}
#vx-epigraph span {
text-align: right;
}
h2 {
margin: 0 0 7rem;
padding: 6rem 0 0;
font-size: clamp(1.35rem, 3.8vw, 1.55rem);
line-height: 1;
}
h3 {
max-width: 90%;
margin: 7rem 0 1.35rem;
padding-right: 2rem;
padding-bottom: 0.32rem;
font-size: var(--font-size-labor);
line-height: 1.12;
letter-spacing: 0.055em;
}
.vx-summary-toggle {
right: 0;
width: 1.45rem;
height: 1.45rem;
}
.vx-summary {
width: 100%;
margin: 0 0 1.6rem;
padding: 0;
font-size: var(--font-size-small);
line-height: 1.35;
}
.vx-summary p,
.vx-summary ol {
font-size: var(--font-size-small);
line-height: 1.35;
}
.vx-summary__head {
align-items: flex-start;
flex-direction: column;
gap: 0.5rem;
}
.vx-summary__modes {
justify-content: flex-start;
}
.vx-reader {
padding: 0.48rem 0.75rem 0.58rem;
}
.vx-reader__bar {
flex-wrap: nowrap;
gap: 0.38rem;
}
.vx-reader__current {
order: initial;
flex: 1 1 auto;
min-width: 0;
max-width: none;
padding-top: 0;
font-size: var(--font-size-menu);
line-height: 1;
opacity: 0.72;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vx-reader__spacer {
display: none;
}
.vx-reader__button,
.vx-reader .vx-reader__unfold-all {
min-height: 2.05rem;
padding: 0.48rem 0.66rem;
font-size: var(--font-size-menu);
}
.vx-reader__toc {
top: calc(var(--reader-shell-height) + 0.6rem);
left: 0.75rem;
width: min(22rem, 82vw);
max-width: calc(100vw - 1.5rem);
max-height: calc(100svh - var(--reader-shell-height) - 1.5rem);
}
.vx-reader__toc button {
padding: 0.82rem 0.9rem;
font-size: 0.8rem;
line-height: 1.22;
}
.vx-reader__unfold-status {
padding: 0.62rem 0.9rem;
font-size: var(--font-size-menu);
}
.vx-reader__button-count,
.vx-reader__unfold-count {
min-width: 0.98rem;
height: 0.98rem;
font-size: var(--font-size-menu);
}
figure,
.vx-serp,
.vx-video-wall,
.vx-youtube-recos,
.vx-chat,
.vx-mail,
figure.vx-keyboard,
.vx-internal-recos {
width: var(--measure-wide);
max-width: var(--measure-wide);
margin-left: 50%;
margin-right: 0;
transform: translateX(-50%);
}
figure {
margin-top: 3.5rem;
margin-bottom: 3.5rem;
}
figure:not(.vx-keyboard):not(.vx-device) {
width: min(34rem, calc(100vw - 2rem));
max-width: min(34rem, calc(100vw - 2rem));
}
figure.vx-figure--wide,
figure.vx-figure--full,
figure.vx-figure-side,
figure.vx-figure-pair {
left: auto;
display: flex;
flex-direction: column;
width: var(--measure-wide);
max-width: var(--measure-wide);
margin: 4rem 50%;
transform: translateX(-50%);
}
figure.vx-figure-side> :is(a, img, picture, video):first-child {
order: 1;
}
figure.vx-figure-side>figcaption {
order: 2;
width: 100%;
border-right: 0;
text-align: left;
}
figcaption {
margin-top: 0.75rem;
padding: 0.7rem 0 0 0.85rem;
border-top: 0;
font-size: var(--font-size-small);
line-height: 1.35;
}
.vx-drawer {
max-height: min(30svh, 20rem);
}
.vx-drawer__content {
max-width: calc(100vw - 2rem);
padding: 0.9rem 0 1.2rem;
}
.vx-drawer__head {
max-width: calc(100vw - 2rem);
padding-top: 0.65rem;
}
.vx-drawer__context {
max-width: 54vw;
}
.vx-drawer__content,
.vx-drawer__content p {
font-size: var(--font-size-small);
line-height: 1.38;
}
.vx-selection-toolbar button {
flex: 0 0 auto;
width: 1.95rem;
height: 1.95rem;
}
.vx-serp {
padding: 1rem 0;
}
.vx-serp__body {
align-items: flex-start;
flex-direction: column;
gap: 0.65rem;
}
.vx-serp__thumb {
flex: 0 0 auto;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
.vx-serp__snippet,
.vx-serp__snippet p {
font-size: 0.9rem;
line-height: 1.35;
}
.vx-video-wall {
padding: 0.75rem 0;
}
.vx-video-wall__tabs {
overflow-x: auto;
padding-bottom: 0.25rem;
}
.vx-video-wall__grid {
grid-template-columns: 1fr;
row-gap: 1.5rem;
}
.vx-youtube-recos li {
gap: 0.65rem;
min-height: 76px;
padding: 0.35rem 0.2rem 0.7rem;
border-radius: 0;
}
.vx-youtube-recos .vx-thumb {
flex: 0 0 116px;
width: 116px;
height: 65px;
border-radius: 7px;
}
.vx-youtube-recos .vx-title-text {
font-size: var(--font-size-small);
line-height: 1.25;
}
.vx-youtube-recos .vx-meta {
font-size: var(--font-size-menu);
}
.vx-chat h1 {
font-size: 1.45rem;
}
.vx-promptbar {
height: 54px;
padding: 0 14px;
}
.vx-promptbar input {
font-size: 16px;
}
.vx-mail__sidebar,
.vx-mail__search {
display: none;
}
.vx-mail-card__body p {
font-size: var(--font-size-body);
line-height: 1.45;
}
.vx-endmatter {
max-width: var(--measure-text);
margin-top: 14rem;
padding: 1rem 0;
font-size: var(--font-size-small);
line-height: 1.4;
}
}
/* =========================================================
97. MOBILE — reader discret
========================================================= */
@media screen and (max-width: 700px) {
:root {
--reader-mobile-peek: 0.72rem;
}
.vx-reader {
transform: translateY(0);
transition:
transform 0.22s ease,
opacity 0.18s ease,
box-shadow 0.18s ease;
will-change: transform;
}
.vx-reader::after {
content: "";
position: absolute;
left: 50%;
bottom: -0.52rem;
width: 3rem;
height: 0.52rem;
transform: translateX(-50%);
border: 1px solid var(--color-ink);
border-top: 0;
border-radius: 0 0 999px 999px;
background: rgba(255, 255, 255, 0.94);
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
}
.vx-reader.is-compact {
transform: translateY(calc(-100% + var(--reader-mobile-peek)));
box-shadow: none;
}
.vx-reader.has-selection-mobile-panel {
transform: translateY(0) !important;
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
}
.vx-reader.has-selection-mobile-panel::after {
opacity: 0;
}
.vx-reader.is-compact::after {
opacity: 1;
}
.vx-reader.is-compact .vx-reader__progress {
bottom: 0;
height: 3px;
}
.vx-reader.is-compact .vx-reader__progress span {
background: var(--color-accent, var(--color-ink));
}
}
/* =========================================================
98. NOTIFICATIONS — toasts unifiés
========================================================= */
:root {
--reader-toast-top-open: calc(var(--reader-shell-height) - 1px);
--reader-toast-top-compact: calc(var(--reader-mobile-peek, 0.72rem) - 1px);
--reader-toast-width: min(28rem, calc(100vw - 2rem));
}
.vx-global-toast {
position: fixed;
top: var(--reader-toast-top-open);
left: 50%;
right: auto;
bottom: auto;
z-index: 7200;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
width: var(--reader-toast-width);
max-width: var(--reader-toast-width);
margin: 0;
padding: 0.72rem 0.85rem;
border: 1px solid var(--color-ink);
border-radius: 0;
background: var(--color-paper);
color: var(--color-ink);
box-shadow: none;
font:
700 0.75rem/1.25 var(--font-interface);
text-align: left;
opacity: 0;
pointer-events: none;
transform: translate(-50%, calc(-100% - 0.35rem));
transition:
opacity 0.18s ease,
transform 0.22s ease;
}
@starting-style {
.vx-global-toast {
opacity: 0;
transform: translate(-50%, calc(-100% - 0.35rem));
}
}
.vx-field-level-dot {
flex: 0 0 auto;
width: 0.62rem;
height: 0.62rem;
border: 1px solid var(--color-ink);
border-radius: 50%;
background: var(--color-paper);
box-shadow: none;
}
.vx-field-level-dot {
display: inline-block;
vertical-align: -0.08em;
width: 0.62rem;
height: 0.62rem;
margin-right: 0.55rem;
border: 1px solid var(--color-ink);
border-radius: 50%;
background: var(--color-paper);
box-shadow: none;
}
.vx-global-toast__text {
min-width: 0;
display: flex;
align-items: center;
gap: 0.55rem;
}
.vx-global-toast__text .vx-field-level-dot {
margin-right: 0;
}
.vx-global-toast--field {
justify-content: flex-start;
}
.vx-global-toast--field .vx-global-toast__text {
display: flex;
align-items: center;
gap: 0.55rem;
}
.vx-global-toast--field .vx-field-level-dot {
flex: 0 0 auto;
margin-right: 0;
}
.vx-global-toast--field .vx-global-toast__text>span:last-child {
display: block;
}
.vx-field-level-dot.is-level-0 {
background: var(--color-paper);
}
.vx-field-level-dot.is-level-1 {
background: hsl(210 88% 48%);
box-shadow: 0 0 0.35rem hsl(210 88% 48% / 0.28);
}
.vx-field-level-dot.is-level-2 {
background: hsl(145 78% 42%);
box-shadow: 0 0 0.45rem hsl(145 78% 42% / 0.32);
}
.vx-field-level-dot.is-level-3 {
background: hsl(42 95% 50%);
box-shadow: 0 0 0.55rem hsl(42 95% 50% / 0.36);
}
.vx-field-level-dot.is-level-4 {
background: hsl(0 88% 48%);
box-shadow: 0 0 0.75rem hsl(0 88% 48% / 0.45);
}
.vx-field-level-dot.is-level-5 {
background: hsl(0 88% 38%);
box-shadow: 0 0 0.95rem hsl(0 88% 38% / 0.55);
}
.vx-reader.is-compact~.vx-global-toast {
top: var(--reader-toast-top-compact);
}
.vx-global-toast.is-visible {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0);
}
.vx-global-toast[hidden] {
display: none !important;
}
.vx-global-toast__text {
min-width: 0;
}
.vx-global-toast strong {
font-weight: 900;
}
.vx-global-toast button {
flex: 0 0 auto;
border: 1px solid var(--color-ink);
border-radius: 0;
background: var(--color-paper);
color: var(--color-ink);
padding: 0.34rem 0.5rem;
font: inherit;
white-space: nowrap;
cursor: pointer;
}
.vx-global-toast button:hover,
.vx-global-toast button:focus-visible {
background: var(--color-ink);
color: var(--color-paper);
}
.vx-scroll-resist__label,
.vx-scroll-resist__unit {
white-space: nowrap;
}
.vx-scroll-resist__count {
font-variant-numeric: tabular-nums;
}
@media screen and (max-width: 700px) {
:root {
--reader-toast-width: calc(100vw - 1.5rem);
}
.vx-global-toast {
font-size: var(--font-size-menu);
}
}
/* =========================================================
99. MODULE CRI
========================================================= */
.vx-scream {
position: relative;
left: 50%;
width: var(--measure-full);
margin: 7rem 0 6rem;
padding: clamp(1rem, 4vw, 2.5rem) 0;
transform: translateX(-50%) rotate(-1.2deg);
text-align: left;
hyphens: none;
isolation: isolate;
overflow: hidden;
}
.vx-scream::before {
content: "";
position: absolute;
inset: 4% -9% 7% -7%;
z-index: 0;
pointer-events: none;
background: linear-gradient(103deg,
transparent 0 18%,
#000 18% 31%,
transparent 31% 39%,
#000 39% 47%,
transparent 47% 100%);
transform: rotate(-3deg);
mix-blend-mode: normal;
}
.vx-scream::after {
content: "";
position: absolute;
left: -12%;
right: -12%;
top: 43%;
z-index: 2;
height: 2.2rem;
pointer-events: none;
background: linear-gradient(90deg,
transparent 0 8%,
#000 8% 64%,
transparent 64% 100%);
transform: rotate(6deg);
mix-blend-mode: difference;
opacity: 0.92;
}
.vx-scream p {
position: relative;
z-index: 1;
display: block !important;
width: max-content;
max-width: none;
margin: 0;
color: #000;
font-family: var(--font-interface);
font-weight: 900;
line-height: 0.62;
letter-spacing: -0.14em;
text-align: left;
text-transform: uppercase;
white-space: nowrap;
mix-blend-mode: normal;
}
.vx-scream p::before,
.vx-scream p::after {
content: attr(data-cri);
position: absolute;
inset: 0;
pointer-events: none;
white-space: nowrap;
}
.vx-scream p::before {
z-index: -1;
color: #000;
transform: translate(0.045em, 0.035em) skewX(-7deg);
opacity: 1;
mix-blend-mode: normal;
}
.vx-scream p::after {
z-index: 2;
color: #fff;
transform: translate(-0.032em, -0.018em) rotate(0.35deg);
opacity: 1;
mix-blend-mode: difference;
}
.vx-scream p:nth-child(2),
.vx-scream p:nth-child(3) {
color: #fff;
mix-blend-mode: difference;
}
.vx-scream p:nth-child(2)::before,
.vx-scream p:nth-child(3)::before {
color: #000;
opacity: 1;
mix-blend-mode: normal;
}
.vx-scream p:nth-child(4)::after {
transform: translate(0.075em, -0.035em) rotate(-1deg);
opacity: 0.95;
}
.vx-scream p:nth-child(5)::after {
color: #fff;
mix-blend-mode: difference;
transform: translate(0.055em, 0.02em);
}
.vx-scream p:nth-child(1) {
margin-left: -1.3rem;
font-size: clamp(7rem, 29vw, 18rem);
transform: rotate(-4deg) scaleX(1.12);
}
.vx-scream p:nth-child(2) {
margin-top: -2.2rem;
margin-left: 17%;
color: #fff;
font-size: clamp(6rem, 24vw, 15rem);
letter-spacing: -0.18em;
text-shadow:
0.06em 0.045em 0 #000,
-0.045em -0.025em 0 #000,
0.11em -0.015em 0 #fff;
transform: rotate(3deg) scaleX(1.22);
}
.vx-scream p:nth-child(3) {
margin-top: -1.6rem;
margin-left: -5%;
color: #fff;
font-size: clamp(5rem, 19vw, 12rem);
letter-spacing: -0.2em;
text-shadow:
0.05em 0.035em 0 #000,
-0.04em 0 0 #fff,
0.12em 0.02em 0 #000;
transform: rotate(-7deg) scaleX(1.38);
}
.vx-scream p:nth-child(4) {
margin-top: -1.15rem;
margin-left: 28%;
font-size: clamp(3.6rem, 13vw, 8.8rem);
letter-spacing: -0.12em;
transform: rotate(8deg) scaleX(0.96);
}
.vx-scream p:nth-child(5) {
margin-top: -0.8rem;
margin-left: -2%;
padding: 0.14em 0.22em 0.2em;
background: var(--color-ink);
color: var(--color-paper);
font-size: clamp(2.7rem, 9vw, 6.2rem);
line-height: 0.75;
letter-spacing: -0.12em;
transform: rotate(-2deg) scaleX(1.08);
}
.vx-scream p:nth-child(1) {
z-index: 3;
}
.vx-scream p:nth-child(2) {
z-index: 5;
}
.vx-scream p:nth-child(3) {
z-index: 4;
}
.vx-scream p:nth-child(4) {
z-index: 6;
}
.vx-scream p:nth-child(5) {
z-index: 7;
}
@media (max-width: 720px) {
.vx-scream {
left: 50%;
width: calc(100vw - 0.5rem);
margin: 5rem 0 4.5rem;
padding: 1.1rem 0 1.35rem;
transform: translateX(-50%) rotate(-1.5deg);
border-top-width: 0.4rem;
border-bottom-width: 0.4rem;
}
.vx-scream p:nth-child(1) {
margin-left: -0.7rem;
font-size: clamp(5.6rem, 33vw, 8.8rem);
}
.vx-scream p:nth-child(2) {
margin-top: -1rem;
margin-left: 14%;
font-size: clamp(5rem, 31vw, 8rem);
}
.vx-scream p:nth-child(3) {
margin-top: -0.85rem;
margin-left: -7%;
font-size: clamp(4.2rem, 27vw, 7rem);
}
.vx-scream p:nth-child(4) {
margin-top: -0.65rem;
margin-left: 19%;
font-size: clamp(3rem, 20vw, 5.4rem);
}
.vx-scream p:nth-child(5) {
margin-top: -0.4rem;
margin-left: -4%;
font-size: clamp(2rem, 14vw, 3.7rem);
letter-spacing: -0.14em;
}
}
/*.vx-scream p::before {
content: attr(data-cri);
}
.vx-scream p::before {
content: attr(data-cri);
position: absolute;
left: .045em;
top: .035em;
z-index: -1;
color: var(--color-danger);
opacity: .9;
transform: skewX(-8deg);
}
.vx-scream p:nth-child(2)::before,
.vx-scream p:nth-child(5)::before {
color: var(--color-paper);
opacity: .75;
}*/
/* =========================================================
100. ANIMATIONS — keyframes centralisés
========================================================= */
@keyframes vx-title-ghost-a {
0% {
transform: translate(calc(var(--hero-ghost-radius) * -0.85),
calc(var(--hero-ghost-radius) * 0.15)) rotate(-1.2deg) skewX(0deg) scaleX(1);
filter: url("#vx-filter-ghost-a") blur(1.25px) contrast(0.68);
opacity: 0.24;
letter-spacing: 0.02em;
}
18% {
transform: translate(calc(var(--hero-ghost-radius) * 0.65),
calc(var(--hero-ghost-radius) * -0.75)) rotate(0.9deg) skewX(-2deg) scaleX(1.025);
filter: url("#vx-filter-ghost-a") blur(0.12px) contrast(1.22);
opacity: 0.64;
letter-spacing: -0.01em;
}
43% {
transform: translate(calc(var(--hero-ghost-radius) * 1),
calc(var(--hero-ghost-radius) * 0.55)) rotate(1.7deg) skewX(1.4deg) scaleX(0.985);
filter: url("#vx-filter-ghost-a") blur(0.75px) contrast(0.82);
opacity: 0.38;
letter-spacing: 0.028em;
}
71% {
transform: translate(calc(var(--hero-ghost-radius) * -0.35),
calc(var(--hero-ghost-radius) * 1)) rotate(-0.6deg) skewX(-1.1deg) scaleX(1.012);
filter: url("#vx-filter-ghost-a") blur(0.22px) contrast(1.08);
opacity: 0.58;
letter-spacing: 0.004em;
}
100% {
transform: translate(calc(var(--hero-ghost-radius) * -0.85),
calc(var(--hero-ghost-radius) * 0.15)) rotate(-1.2deg) skewX(0deg) scaleX(1);
filter: url("#vx-filter-ghost-a") blur(1.25px) contrast(0.68);
opacity: 0.24;
letter-spacing: 0.02em;
}
}
@keyframes vx-title-ghost-b {
0% {
transform: translate(calc(var(--hero-ghost-radius) * 0.9),
calc(var(--hero-ghost-radius) * -0.2)) rotate(1.1deg) skewX(1.5deg) scaleX(0.99);
filter: url("#vx-filter-ghost-b") blur(0.18px) contrast(1.18);
opacity: 0.56;
letter-spacing: -0.018em;
}
22% {
transform: translate(calc(var(--hero-ghost-radius) * 0.15),
calc(var(--hero-ghost-radius) * 0.95)) rotate(-1.8deg) skewX(-2.2deg) scaleX(1.035);
filter: url("#vx-filter-ghost-b") blur(1.4px) contrast(0.62);
opacity: 0.28;
letter-spacing: 0.026em;
}
49% {
transform: translate(calc(var(--hero-ghost-radius) * -1),
calc(var(--hero-ghost-radius) * 0.3)) rotate(0.4deg) skewX(0.8deg) scaleX(0.975);
filter: url("#vx-filter-ghost-b") blur(0.35px) contrast(0.98);
opacity: 0.48;
letter-spacing: 0.006em;
}
76% {
transform: translate(calc(var(--hero-ghost-radius) * -0.3),
calc(var(--hero-ghost-radius) * -0.9)) rotate(1.9deg) skewX(-1.6deg) scaleX(1.018);
filter: url("#vx-filter-ghost-b") blur(0.08px) contrast(1.28);
opacity: 0.68;
letter-spacing: -0.012em;
}
100% {
transform: translate(calc(var(--hero-ghost-radius) * 0.9),
calc(var(--hero-ghost-radius) * -0.2)) rotate(1.1deg) skewX(1.5deg) scaleX(0.99);
filter: url("#vx-filter-ghost-b") blur(0.18px) contrast(1.18);
opacity: 0.56;
letter-spacing: -0.018em;
}
}
@keyframes vx-title-ghost-c {
0% {
transform: translate(calc(var(--hero-ghost-radius) * -0.2),
calc(var(--hero-ghost-radius) * -1)) rotate(-0.5deg) skewX(-0.8deg) scaleX(1.01);
filter: url("#vx-filter-ghost-c") blur(0.9px) contrast(0.76);
opacity: 0.34;
letter-spacing: 0.018em;
}
27% {
transform: translate(calc(var(--hero-ghost-radius) * 1.05),
calc(var(--hero-ghost-radius) * 0.15)) rotate(2.2deg) skewX(2.6deg) scaleX(0.965);
filter: url("#vx-filter-ghost-c") blur(0.16px) contrast(1.35);
opacity: 0.72;
letter-spacing: -0.022em;
}
52% {
transform: translate(calc(var(--hero-ghost-radius) * 0.05),
calc(var(--hero-ghost-radius) * 0.95)) rotate(-1.4deg) skewX(-2deg) scaleX(1.03);
filter: url("#vx-filter-ghost-c") blur(1.65px) contrast(0.58);
opacity: 0.22;
letter-spacing: 0.035em;
}
81% {
transform: translate(calc(var(--hero-ghost-radius) * -0.95),
calc(var(--hero-ghost-radius) * -0.25)) rotate(0.7deg) skewX(0.9deg) scaleX(0.992);
filter: url("#vx-filter-ghost-c") blur(0.28px) contrast(1.05);
opacity: 0.5;
letter-spacing: 0.002em;
}
100% {
transform: translate(calc(var(--hero-ghost-radius) * -0.2),
calc(var(--hero-ghost-radius) * -1)) rotate(-0.5deg) skewX(-0.8deg) scaleX(1.01);
filter: url("#vx-filter-ghost-c") blur(0.9px) contrast(0.76);
opacity: 0.34;
letter-spacing: 0.018em;
}
}
@keyframes vx-note-hop {
0%,
100% {
transform: translate(0, 0) rotate(0deg);
}
45% {
transform: translate(0.08rem, -0.16rem) rotate(-5deg);
}
70% {
transform: translate(-0.05rem, 0.08rem) rotate(3deg);
}
}
@keyframes vx-title-haunt {
0% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(0.18rem, -0.12rem) rotate(-0.35deg);
}
50% {
transform: translate(0.05rem, 0.16rem) rotate(0.25deg);
}
75% {
transform: translate(-0.14rem, -0.04rem) rotate(-0.18deg);
}
100% {
transform: translate(0, 0) rotate(0deg);
}
}
@keyframes vx-ia-stream-cursor {
50% {
opacity: 0;
}
}
@keyframes vx-medieval-longtap-pulse {
0%,
100% {
transform: translateY(0);
opacity: 0.72;
}
50% {
transform: translateY(0.18rem) scale(0.94);
opacity: 1;
}
}
@keyframes vx-medieval-react-pop {
from {
opacity: 0;
transform: translateX(-50%) translateY(0.25rem) scale(0.92);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
}
}
@keyframes vx-propagare-wave {
0% {
transform: translate(-50%, -100%) scale(0.2);
opacity: 0.75;
}
100% {
transform: translate(-50%, -100%) scale(3.8);
opacity: 0;
}
}
@keyframes vx-nolo-headshake {
0% {
transform: rotate(0deg);
}
18% {
transform: rotate(-8deg);
}
36% {
transform: rotate(7deg);
}
54% {
transform: rotate(-5deg);
}
72% {
transform: rotate(3deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes vx-unfold-dot-pop {
0% {
transform: scale(1);
}
45% {
transform: scale(1.7);
}
100% {
transform: scale(1);
}
}
@keyframes vx-notif-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes vx-iaActionsAppear {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes vx-dessinPath {
0% {
stroke-dashoffset: 1000;
}
98% {
stroke-dashoffset: 0;
}
99% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes vx-noir {
0% {
fill: transparent;
}
20% {
fill: transparent;
}
21% {
fill: var(--color-ink);
}
100% {
fill: var(--color-ink);
}
}
@keyframes vx-pouls {
0%,
100% {
transform: scale(1);
}
25% {
transform: scale(1.1);
}
50% {
transform: scale(0.9);
}
75% {
transform: scale(1.1);
}
}
/* =========================================================
101. UX CONSOLIDATION — cockpit, familles d’actions, labels
========================================================= */
.vx-reader__bar {
display: flex;
align-items: center;
gap: 0.55rem;
}
.vx-reader__group,
.vx-reader__tools-panel {
display: inline-flex;
align-items: center;
gap: 0.42rem;
min-width: 0;
}
.vx-reader__group--reading {
flex: 1 1 auto;
min-width: 0;
}
.vx-reader__group--unfold {
/*padding-inline: 0.5rem;
border-inline: 1px solid var(--color-line);*/
}
.vx-reader__group--attention {
gap: 0.42rem;
}
.vx-reader__tools-toggle {
display: none;
}
.vx-reader__button-label {
display: none;
font-size: 0.68rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.vx-reader__current {
flex: 1 1 auto;
}
.vx-reader__button:is(.vx-ai-prompt-toggle, .vx-summary-toggle) .vx-reader__button-label {
display: none;
}
.vx-hero__summary-toggle i {
display: none;
}
.vx-summary-toggle::before,
.vx-hero__summary-toggle::before {
content: "";
display: block;
width: 1.22rem;
height: 1.22rem;
background: currentColor;
-webkit-mask: url("../media/images/icons/resume.svg") center / contain no-repeat;
mask: url("../media/images/icons/resume.svg") center / contain no-repeat;
}
.vx-hero__summary-toggle i {
display: none;
}
.vx-ai-prompt-toggle::before {
content: "\e2ca";
}
.vx-reveal-trigger.is-unfolded:not(.vx-pill) {
opacity: 0.72;
}
/*.vx-reveal-trigger.vx-pill.is-unfolded::after,
.vx-reveal-trigger.vx-accept-continue.is-unfolded::after {
content: " · ouvert";
font-size: 0.72em;
font-weight: 400;
letter-spacing: 0.04em;
opacity: 0.8;
}*/
:is(.vx-serp,
.vx-video-wall,
.vx-youtube-recos,
.vx-youtube-comments,
.vx-reddit,
.vx-chat,
.vx-chat-compare,
.vx-mail,
.vx-gpt-shot,
.vx-funfacts)[data-module-label] {
position: relative;
}
:is(.vx-serp,
.vx-video-wall,
.vx-youtube-recos,
.vx-youtube-comments,
.vx-reddit,
.vx-chat,
.vx-chat-compare,
.vx-mail,
.vx-gpt-shot,
.vx-funfacts)[data-module-label]::before {
content: attr(data-module-label);
position: absolute;
top: -1.55rem;
right: 0;
z-index: 5;
display: inline-flex;
align-items: center;
min-height: 1.05rem;
padding: 0.14rem 0.42rem 0.16rem;
border: 1px solid var(--color-ink);
background: var(--color-paper);
color: var(--color-ink);
font: 700 0.68rem/1 var(--font-interface);
letter-spacing: 0.055em;
text-transform: uppercase;
white-space: nowrap;
pointer-events: none;
display: none;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.001ms !important;
}
}
@media screen and (max-width: 700px) {
.vx-reader {
padding: 0.45rem 0.75rem 0.55rem;
}
.vx-reader__bar {
flex-wrap: nowrap;
gap: 0.38rem;
}
.vx-reader__group--reading {
flex: 1 1 auto;
}
.vx-reader__group--unfold {
flex: 0 0 auto;
padding-inline: 0;
border-inline: 0;
}
.vx-reader__group--unfold .vx-reader__keyboard-toggle:not([hidden]) {
display: inline-flex;
}
.vx-reader__tools-toggle {
display: inline-flex;
}
.vx-reader__tools-panel {
position: absolute;
top: calc(100% + 0.48rem);
right: 0.75rem;
z-index: 4300;
display: none;
width: min(18rem, calc(100vw - 1.5rem));
padding: 0.45rem;
border: 1px solid var(--color-ink);
background: var(--color-paper);
box-shadow: var(--shadow-floating-panel);
}
.vx-reader__tools-panel.is-open {
display: grid;
gap: 0.35rem;
}
.vx-reader__tools-panel .vx-reader__group {
display: grid;
grid-template-columns: 1fr;
gap: 0.35rem;
}
.vx-reader__tools-panel .vx-reader__button {
justify-content: flex-start;
width: 100%;
min-height: 2.35rem;
padding-inline: 0.72rem;
}
.vx-reader__tools-panel .vx-reader__button-label {
display: inline;
}
.vx-reader__current {
font-size: var(--font-size-menu);
}
:is(.vx-serp,
.vx-video-wall,
.vx-youtube-recos,
.vx-youtube-comments,
.vx-reddit,
.vx-chat,
.vx-chat-compare,
.vx-mail,
.vx-gpt-shot,
.vx-funfacts)[data-module-label]::before {
top: -1.35rem;
right: 0.1rem;
font-size: 0.62rem;
}
}
/* =========================================================
102. AUDIO-SÉLECTION — lecture MP3 d’un passage sélectionné
========================================================= */
.vx-selection-read-mobile.is-active {
background: var(--color-ink) !important;
color: var(--color-paper) !important;
}
.vx-selection-read-mobile.is-loading {
opacity: 0.65;
cursor: wait;
}
.vx-selection-read-mobile.is-error {
background: var(--color-danger) !important;
color: var(--color-paper) !important;
}
.vx-selection-mobile__read {
margin-top: 0.35rem;
border: 1px solid var(--color-ink) !important;
}
/* =========================================================
103. AUDIO-SÉLECTION V2 — highlight
========================================================= */
::highlight(vx-audio-selection) {
background: rgba(0, 0, 0, 0.075);
color: inherit;
}
/* =========================================================
104. AUDIO-SÉLECTION V3 — sélection, mobile, lecture continue
========================================================= */
.vx-selection-read-from-button[hidden],
.vx-selection-read-mobile[hidden],
.vx-selection-read-from-mobile[hidden] {
display: none !important;
}
.vx-selection-read-from-button.is-active,
.vx-selection-read-mobile.is-active,
.vx-selection-read-from-mobile.is-active,
.vx-reader__voice-toggle.is-active {
background: var(--color-ink) !important;
color: var(--color-paper) !important;
}
.vx-selection-read-from-button.is-loading,
.vx-selection-read-mobile.is-loading,
.vx-selection-read-from-mobile.is-loading {
opacity: 0.65;
cursor: wait;
}
.vx-selection-read-from-button.is-error,
.vx-selection-read-mobile.is-error,
.vx-selection-read-from-mobile.is-error {
background: var(--color-danger) !important;
color: var(--color-paper) !important;
}
.vx-selection-mobile__audio-actions {
display: grid;
grid-template-columns: 1fr;
gap: 0.4rem;
margin: 0.45rem 0 0.5rem;
}
.vx-selection-mobile__audio-actions button {
border: 1px solid var(--color-ink) !important;
}
.vx-reader__voice-toggle[hidden] {
display: none !important;
}
::highlight(vx-audio-selection) {
background: rgba(0, 0, 0, 0.12);
color: inherit;
}
.vx-selection-mobile__audio-actions[hidden] {
display: none !important;
}
.vx-selection-mobile__audio-actions {
display: grid;
grid-template-columns: 1fr;
gap: 0.45rem;
margin: 0.85rem 0 1rem;
}
.vx-selection-mobile__audio-actions button {
border: 1px solid var(--color-ink) !important;
border-radius: 999px;
background: var(--color-paper);
color: var(--color-ink);
min-height: 2.55rem;
padding: 0.55rem 0.75rem;
font:
700 0.72rem/1.1 "iA Writer Quattro",
"Inter",
Helvetica,
sans-serif;
}
/* =========================================================
CONTRÔLES AUDIO COCKPIT — voix + piano à droite
========================================================= */
.vx-reader__audio-controls {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 0.35rem;
margin-left: 0.25rem;
order: 99;
}
.vx-reader__audio-controls .vx-reader__button {
min-width: 2rem;
padding-inline: 0.62rem;
}
.vx-reader__audio-controls .vx-reader__button-label {
display: none;
}
.vx-reader__voice-toggle i,
.vx-reader__keyboard-toggle i,
.vx-selection-read-mobile i,
.vx-selection-read-from-button i,
.vx-selection-read-from-mobile i {
font-size: 0.9rem;
}
.vx-audio-icon {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.08em;
line-height: 1;
color: currentColor;
pointer-events: none;
}
.vx-audio-icon i {
font-size: 0.9rem;
line-height: 1;
}
.vx-audio-icon__ellipsis {
display: inline-block;
margin-left: 0.02em;
font:
900 0.74em/1 var(--font-interface);
letter-spacing: -0.08em;
transform: translateY(-0.08em);
}
/* Bouton voix : icône seule, y compris sur mobile */
.vx-reader__voice-toggle .vx-reader__button-label {
display: none !important;
}
.vx-reader__voice-toggle {
min-width: 2rem;
width: 2rem;
padding-inline: 0 !important;
}
/* Bouton piano : icône seule, y compris sur mobile */
.vx-reader__keyboard-toggle .vx-reader__button-label {
display: none !important;
}
.vx-reader__keyboard-toggle {
min-width: 2rem;
width: 2rem;
padding-inline: 0 !important;
}
/* Neutralisation du hover tactile sur les contrôles audio */
@media (hover: none),
(pointer: coarse),
(max-width: 720px) {
.vx-reader__audio-controls .vx-reader__button:not(.is-active) {
background: var(--color-paper) !important;
color: var(--color-ink) !important;
}
.vx-reader__audio-controls .vx-reader__button:not(.is-active):hover,
.vx-reader__audio-controls .vx-reader__button:not(.is-active):focus,
.vx-reader__audio-controls .vx-reader__button:not(.is-active):active {
background: var(--color-paper) !important;
color: var(--color-ink) !important;
}
.vx-reader__audio-controls .vx-reader__button.is-active {
background: var(--color-ink) !important;
color: var(--color-paper) !important;
}
}
/* =========================================================
SÉLECTION MOBILE — panneau dans le cockpit
========================================================= */
@media (hover: none),
(pointer: coarse),
(max-width: 720px) {
.vx-selection-mobile {
display: flex;
}
.vx-selection-mobile[hidden] {
display: none !important;
}
/*.vx-selection-toolbar {
display: none !important;
}
.vx-selection-toolbar.is-visible {
display: none !important;
}*/
.vx-selection-menu__wrap {
position: relative;
}
.vx-selection-menu {
top: calc(100% + 0.35rem);
right: 0;
bottom: auto;
left: auto;
max-width: calc(100vw - 1.5rem);
}
}
/* =========================================================
105. A11Y — indicateurs de focus pour contrôles à outline retiré
========================================================= */
.vx-promptbar input:focus-visible {
/*outline: 2px solid currentColor;
outline-offset: 2px;*/
}
/* =========================================================
106. SESSION MAP — carte de lecture de fin de session
========================================================= */
#vx-session-map {
margin: 4rem auto 0;
padding: 2.5rem 1.5rem 3rem;
max-width: 52rem;
border-top: 1px solid var(--color-ink);
opacity: 0;
transform: translateY(1.2rem);
transition: opacity 0.6s ease, transform 0.6s ease;
}
#vx-session-map.is-visible {
opacity: 1;
transform: translateY(0);
}
.vx-session-map__label {
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0.45;
margin: 0 0 1.2rem;
}
.vx-session-map__title {
font-size: clamp(1.1rem, 3vw, 1.4rem);
font-weight: 700;
margin: 0 0 1.5rem;
line-height: 1.2;
}
#vx-session-stats {
display: flex;
flex-direction: column;
gap: 0.4rem;
font-size: 0.9rem;
opacity: 0.7;
margin: 0 0 2rem;
font-variant-numeric: tabular-nums;
}
#vx-session-stats span::before {
content: '— ';
opacity: 0.4;
}
/* =========================================================
107. SESSION SVG FRAME — carte affichée inline
========================================================= */
#vx-session-svg-frame {
margin: 1.5rem 0 1rem;
border: 1px solid var(--color-ink);
overflow: hidden;
/* Hauteur limitée : scrollable pour explorer la carte */
max-height: 340px;
overflow-y: auto;
background: #fff;
}
#vx-session-svg-frame svg {
display: block;
width: 100%;
height: auto;
}
#vx-session-download {
display: inline-block;
font-family: var(--font-interface);
font-size: 0.8rem;
color: var(--color-ink);
text-decoration: none;
border: 1px solid var(--color-ink);
padding: 0.3rem 0.9rem;
transition: background 0.15s ease, color 0.15s ease;
}
#vx-session-download:hover {
background: var(--color-ink);
color: var(--color-paper);
}
@media (max-width: 700px) {
#vx-session-svg-frame {
max-height: 240px;
}
#vx-session-download {
display: block;
text-align: center;
padding: 0.7rem 1rem;
margin-top: 0.5rem;
}
}
.vx-session-map__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem 1rem;
}
#vx-session-save-status {
font-family: var(--font-interface);
font-size: 0.74rem;
opacity: 0.58;
}
#vx-session-save-status[data-state="error"] {
opacity: 0.78;
}
.vx-session-gallery {
margin-top: 2.5rem;
padding-top: 1.25rem;
border-top: 1px solid color-mix(in srgb, var(--color-ink) 25%, transparent);
}
.vx-session-gallery > summary {
cursor: pointer;
font-family: var(--font-interface);
font-size: 0.88rem;
font-weight: 700;
list-style-position: outside;
}
#vx-session-gallery-count {
font-weight: 400;
opacity: 0.48;
}
.vx-session-gallery__intro,
.vx-session-gallery__status {
font-family: var(--font-interface);
font-size: 0.76rem;
line-height: 1.45;
opacity: 0.58;
}
.vx-session-gallery__intro {
margin: 1rem 0 0.5rem;
max-width: 42rem;
}
.vx-session-gallery__status {
margin: 0.5rem 0 1rem;
}
.vx-session-gallery__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.75rem;
}
/* Les cartes sont des : on annule ici explicitement les règles
globales du site qui donnent à toutes les figures une largeur « wide »,
un margin-left:50% et un translateX(-50%). */
.vx-session-gallery__grid > figure.vx-session-gallery__card {
display: block;
width: auto;
max-width: none;
min-width: 0;
margin: 0;
margin-left: 0;
margin-right: 0;
transform: none;
justify-self: stretch;
align-self: start;
overflow: hidden;
}
.vx-session-gallery__open {
display: grid;
place-items: center;
box-sizing: border-box;
width: 100%;
min-width: 0;
aspect-ratio: 1 / 1;
padding: 0;
border: 1px solid color-mix(in srgb, var(--color-ink) 35%, transparent);
background: #fff;
cursor: zoom-in;
overflow: hidden;
}
.vx-session-gallery__open img,
.vx-session-gallery__open .vx-session-stored-svg {
display: block;
width: 100% !important;
height: 100% !important;
min-width: 0;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain;
background: #fff;
transition: transform 0.18s ease;
}
.vx-session-gallery__open:hover img,
.vx-session-gallery__open:hover .vx-session-stored-svg {
transform: scale(1.018);
}
.vx-session-gallery__grid > figure.vx-session-gallery__card > figcaption {
box-sizing: border-box;
width: 100%;
max-width: 100%;
margin: 0.35rem 0 0;
padding: 0;
border: 0;
font-family: var(--font-interface);
font-size: 0.62rem;
line-height: 1.2;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0.46;
font-variant-numeric: tabular-nums;
}
.vx-session-gallery__more {
margin-top: 1rem;
padding: 0.35rem 0.8rem;
border: 1px solid var(--color-ink);
background: transparent;
color: var(--color-ink);
font-family: var(--font-interface);
font-size: 0.75rem;
cursor: pointer;
}
.vx-session-gallery__more:hover {
background: var(--color-ink);
color: var(--color-paper);
}
.vx-session-lightbox__svg--stored img,
.vx-session-lightbox__svg--stored .vx-session-stored-svg {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
background: #fff;
}
@media (max-width: 1200px) {
.vx-session-gallery__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.vx-session-gallery__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.vx-session-map__actions {
display: block;
}
#vx-session-save-status {
display: block;
margin-top: 0.65rem;
}
.vx-session-gallery__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.65rem;
}
}
/* =========================================================
107b. SESSION LIGHTBOX — consultation des cartes
========================================================= */
.vx-session-lightbox {
position: fixed;
inset: 0;
z-index: 10050;
display: grid;
place-items: center;
padding: clamp(0.75rem, 3vw, 2rem);
background: color-mix(in srgb, var(--color-ink) 72%, transparent);
opacity: 0;
visibility: hidden;
transition: opacity 0.18s ease, visibility 0.18s ease;
}
.vx-session-lightbox.is-open {
opacity: 1;
visibility: visible;
}
.vx-session-lightbox__inner {
width: min(96vw, 1100px);
max-height: 94vh;
display: flex;
flex-direction: column;
background: var(--color-paper);
border: 1px solid var(--color-ink);
box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.28);
}
.vx-session-lightbox__toolbar {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
padding: 0.65rem;
border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 30%, transparent);
font-family: var(--font-interface);
}
.vx-session-lightbox__close,
.vx-session-lightbox__download {
border: 1px solid var(--color-ink);
background: transparent;
color: var(--color-ink);
font: inherit;
font-size: 0.76rem;
line-height: 1;
text-decoration: none;
}
.vx-session-lightbox__download {
padding: 0.48rem 0.72rem;
}
.vx-session-lightbox__close {
order: 2;
width: 2rem;
height: 2rem;
padding: 0;
cursor: pointer;
font-size: 1.25rem;
}
.vx-session-lightbox__close:hover,
.vx-session-lightbox__download:hover {
background: var(--color-ink);
color: var(--color-paper);
}
.vx-session-lightbox__svg {
min-height: 0;
overflow: auto;
padding: 1rem;
background: #fff;
}
.vx-session-lightbox__svg svg,
.vx-session-lightbox__svg img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
@media (max-width: 700px) {
.vx-session-lightbox {
padding: 0.35rem;
}
.vx-session-lightbox__inner {
width: 100%;
max-height: 96vh;
}
.vx-session-lightbox__toolbar {
padding: 0.5rem;
}
}
/* =========================================================
TRAMES TEXTE — corruption légère unique
========================================================= */
.vx-text-trame {
--vx-text-trame-strength: 1;
--vx-shift-x: calc(0.010em * var(--vx-text-trame-strength));
--vx-shift-y: calc(0.008em * var(--vx-text-trame-strength));
position: relative;
display: inline;
color: var(--color-ink);
isolation: isolate;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.vx-text-trame::before,
.vx-text-trame::after {
content: attr(data-vx-text);
position: absolute;
inset: 0;
pointer-events: none;
white-space: pre;
mix-blend-mode: normal;
}
/* corrupt — légère corruption : doublure noire + morsure papier */
.vx-text-trame--corrupt::before {
color: var(--color-ink);
transform: translateX(calc(1.2 * var(--vx-shift-x)));
-webkit-mask-image:
repeating-linear-gradient(to bottom,
#000 0 0.15em,
transparent 0.15em 0.20em,
#000 0.20em 0.34em,
transparent 0.34em 0.39em);
mask-image:
repeating-linear-gradient(to bottom,
#000 0 0.15em,
transparent 0.15em 0.20em,
#000 0.20em 0.34em,
transparent 0.34em 0.39em);
}
.vx-text-trame--corrupt::after {
color: var(--color-paper);
transform: translateX(calc(0.7 * var(--vx-shift-x)));
-webkit-mask-image:
radial-gradient(circle at 30% 45%, #000 0 15%, transparent 17%),
repeating-linear-gradient(105deg,
transparent 0 0.26em,
#000 0.26em 0.285em,
transparent 0.285em 0.56em);
mask-image:
radial-gradient(circle at 30% 45%, #000 0 15%, transparent 17%),
repeating-linear-gradient(105deg,
transparent 0 0.26em,
#000 0.26em 0.285em,
transparent 0.285em 0.56em);
-webkit-mask-size:
calc(0.64em - 0.04em * var(--vx-text-trame-strength)) calc(0.54em - 0.03em * var(--vx-text-trame-strength)),
auto;
mask-size:
calc(0.64em - 0.04em * var(--vx-text-trame-strength)) calc(0.54em - 0.03em * var(--vx-text-trame-strength)),
auto;
}
/* =========================================================
TRAMES NUMÉRIQUES — images
========================================================= */
img[data-vx-trame] {
display: block;
max-width: 100%;
height: auto;
background: var(--color-paper);
}
img[data-vx-trame].is-vx-tramed {
image-rendering: auto;
}
img[data-vx-trame].is-vx-trame-loading {
opacity: 0.001;
}
/* Calque jumelle temporaire pour le fondu enchaîné : la nouvelle version
émerge par-dessus l'ancienne, plutôt que de la remplacer d'un coup.
Ce calque est TOUJOURS en position absolue, donc il ne perturbe jamais
les grilles ou les mises en page existantes de ses voisins. */
img.vx-trame-overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
}
.vx-trame-stage {
position: relative;
width: 100%;
}
.vx-trame-stage>img {
display: block;
width: 100%;
height: auto;
}
@media (prefers-reduced-motion: reduce) {
img.vx-trame-overlay {
transition: none;
}
}
/* =========================================================
GLITCHS DE GLYPHES — distorsions statiques random
========================================================= */
.vx-glyph-glitch {
position: relative;
display: inline;
color: transparent;
text-shadow: none;
font-variant-ligatures: none;
hyphens: none;
overflow-wrap: normal;
word-break: normal;
}
.vx-glyph-glitch::before,
.vx-glyph-glitch::after {
content: attr(data-vx-char);
position: absolute;
left: 0;
top: 0;
color: var(--color-ink);
opacity: 1;
pointer-events: none;
white-space: pre;
}
.vx-glyph-glitch::before {
transform:
translate(var(--vx-glitch-x1, 0), var(--vx-glitch-y1, 0)) skewX(var(--vx-glitch-skew, 0deg));
}
.vx-glyph-glitch::after {
transform:
translate(var(--vx-glitch-x2, 0), var(--vx-glitch-y2, 0)) scaleX(var(--vx-glitch-scale, 1));
}
/* Variante : glyphe coupé en deux plans légèrement désalignés */
.vx-glyph-glitch--slice::before {
clip-path: inset(0 0 53% 0);
}
.vx-glyph-glitch--slice::after {
clip-path: inset(47% 0 0 0);
}
/* Variante : glyphe tassé / étiré */
.vx-glyph-glitch--crush::before {
transform: translate(-0.025em, 0) scaleX(0.78);
}
.vx-glyph-glitch--crush::after {
transform: translate(0.035em, 0) scaleX(1.16);
}
/* Variante : petite déchirure horizontale */
.vx-glyph-glitch--tear::before {
clip-path: polygon(0 0,
100% 0,
100% 39%,
22% 46%,
100% 53%,
100% 100%,
0 100%);
transform: translate(-0.02em, 0);
}
.vx-glyph-glitch--tear::after {
clip-path: polygon(0 39%,
100% 32%,
100% 62%,
0 69%);
transform: translate(0.045em, -0.01em);
}
/* Variante : bas du glyphe légèrement décroché */
.vx-glyph-glitch--drop::before {
clip-path: inset(0 0 45% 0);
}
.vx-glyph-glitch--drop::after {
clip-path: inset(42% 0 0 0);
transform: translate(0.025em, 0.065em);
}
/* Variante : compression verticale discrète */
.vx-glyph-glitch--squash::before {
transform: translate(-0.02em, -0.015em) scaleY(0.86);
}
.vx-glyph-glitch--squash::after {
transform: translate(0.025em, 0.025em) scaleY(1.12);
clip-path: inset(35% 0 0 0);
}
/* Glyph glitches pilotés par VexationField */
.vx-glyph-glitch {
color: var(--color-ink);
}
.vx-glyph-glitch::before,
.vx-glyph-glitch::after {
opacity: 0;
}
/* Niveau 1 : seuls les glyphes seuil 1 apparaissent */
html[data-vx-field-level="1"] .vx-glyph-glitch[data-vx-glyph-level="1"] {
color: transparent;
}
html[data-vx-field-level="1"] .vx-glyph-glitch[data-vx-glyph-level="1"]::before,
html[data-vx-field-level="1"] .vx-glyph-glitch[data-vx-glyph-level="1"]::after {
opacity: 1;
}
/* Niveau 2 */
html[data-vx-field-level="2"] .vx-glyph-glitch:is([data-vx-glyph-level="1"],
[data-vx-glyph-level="2"]) {
color: transparent;
}
html[data-vx-field-level="2"] .vx-glyph-glitch:is([data-vx-glyph-level="1"],
[data-vx-glyph-level="2"])::before,
html[data-vx-field-level="2"] .vx-glyph-glitch:is([data-vx-glyph-level="1"],
[data-vx-glyph-level="2"])::after {
opacity: 1;
}
/* Niveau 3 */
html[data-vx-field-level="3"] .vx-glyph-glitch:is([data-vx-glyph-level="1"],
[data-vx-glyph-level="2"],
[data-vx-glyph-level="3"]) {
color: transparent;
}
html[data-vx-field-level="3"] .vx-glyph-glitch:is([data-vx-glyph-level="1"],
[data-vx-glyph-level="2"],
[data-vx-glyph-level="3"])::before,
html[data-vx-field-level="3"] .vx-glyph-glitch:is([data-vx-glyph-level="1"],
[data-vx-glyph-level="2"],
[data-vx-glyph-level="3"])::after {
opacity: 1;
}
/* Niveau 4 */
html[data-vx-field-level="4"] .vx-glyph-glitch:is([data-vx-glyph-level="1"],
[data-vx-glyph-level="2"],
[data-vx-glyph-level="3"],
[data-vx-glyph-level="4"]) {
color: transparent;
}
html[data-vx-field-level="4"] .vx-glyph-glitch:is([data-vx-glyph-level="1"],
[data-vx-glyph-level="2"],
[data-vx-glyph-level="3"],
[data-vx-glyph-level="4"])::before,
html[data-vx-field-level="4"] .vx-glyph-glitch:is([data-vx-glyph-level="1"],
[data-vx-glyph-level="2"],
[data-vx-glyph-level="3"],
[data-vx-glyph-level="4"])::after {
opacity: 1;
}
/* Niveau 5 : tous les glyphes préparés apparaissent */
html[data-vx-field-level="5"] .vx-glyph-glitch {
color: transparent;
}
html[data-vx-field-level="5"] .vx-glyph-glitch::before,
html[data-vx-field-level="5"] .vx-glyph-glitch::after {
opacity: 1;
}