.va-vitrine {
--va-encre: #0f2542;
--va-bleu: #1f6fd0;
--va-bleu-doux: #e8f1fc;
--va-bleu-trait: #c7dcf5;
--va-ocre: #9a6407;
--va-ocre-doux: #fbf6ea;
--va-ocre-trait: #e6d3a6;
--va-gris: #46556b;
--va-fond: #f6f8fb;
--va-trait: #e3e9f1;
--va-blanc: #ffffff;
align-items: flex-start;
color: var(--va-encre);
display: flex;
flex-wrap: wrap;
gap: 32px;
line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
.va-vitrine {
--va-encre: #e9eef5;
--va-bleu: #6aaaf0;
--va-bleu-doux: #16283f;
--va-bleu-trait: #27446a;
--va-ocre: #e3b341;
--va-ocre-doux: #2a2416;
--va-ocre-trait: #4d4020;
--va-gris: #a8b4c4;
--va-fond: #171c24;
--va-trait: #2a323d;
--va-blanc: #11151b;
}
}
.va-vitrine *,
.va-vitrine *::before,
.va-vitrine *::after {
box-sizing: border-box;
}
.va-invisible {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.va-principal {
display: flex;
flex: 999 1 560px;
flex-direction: column;
gap: 28px;
min-width: 0;
} .va-vedettes {
display: grid;
gap: 14px;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
grid-template-rows: repeat(2, minmax(0, 1fr));
}
.va-vedettes--1 {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
.va-vedettes--2 {
grid-template-rows: auto;
}
.va-vedette {
border-radius: 16px;
min-width: 0;
position: relative;
}
.va-vedette--grande {
grid-column: 1;
grid-row: 1 / 3;
min-height: 380px;
}
.va-vedettes--1 .va-vedette--grande,
.va-vedettes--2 .va-vedette--grande {
grid-row: 1;
}
.va-vedette--petite {
grid-column: 2;
min-height: 183px;
}
.va-vedettes--2 .va-vedette--petite {
grid-row: 1;
}
.va-vedette-lien {
border-radius: inherit;
color: var(--va-blanc);
cursor: pointer;
display: flex;
flex-direction: column;
height: 100%;
justify-content: flex-end;
min-height: inherit;
overflow: hidden;
padding: 18px;
position: relative;
text-decoration: none;
transition: box-shadow 0.15s ease;
}
.va-vedette--grande .va-vedette-lien {
padding: 24px;
} .va-vedette[data-va-actif] .va-vedette-lien {
box-shadow: 0 0 0 3px var(--va-blanc), 0 0 0 6px var(--va-bleu);
}
.va-vedette-lien:focus-visible {
outline: 3px solid var(--va-bleu);
outline-offset: 3px;
}
.va-vedette-image {
height: 100%;
inset: 0;
object-fit: cover;
position: absolute;
width: 100%;
}
.va-vedette-voile {
background: linear-gradient(to top, rgba(15, 37, 66, 0.88) 0%, rgba(15, 37, 66, 0.35) 55%, rgba(15, 37, 66, 0) 100%);
inset: 0;
position: absolute;
}
.va-vedette-texte {
color: #ffffff;
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
}
.va-vedette-meta {
font-size: 12px;
opacity: 0.85;
}
.va-vedette-titre {
font-size: 17px;
font-weight: 600;
line-height: 1.2;
}
.va-vedette--grande .va-vedette-titre {
font-size: clamp(22px, 2.6vw, 30px);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.12;
} .va-secours {
align-items: flex-end;
background: hsl(var(--va-teinte, 210) 50% 30%);
color: #ffffff;
display: flex;
padding: 8px;
}
.va-secours-titre {
font-size: 11px;
font-weight: 600;
line-height: 1.25;
opacity: 0.55;
} .va-vedette .va-secours-titre {
display: none;
} .va-pastille {
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
padding: 4px 9px;
text-transform: uppercase;
white-space: nowrap;
}
.va-pastille--education {
background: var(--va-bleu-doux);
color: var(--va-bleu);
}
.va-pastille--analyse {
background: var(--va-ocre-doux);
color: var(--va-ocre);
}
.va-vedette .va-pastille {
left: 14px;
position: absolute;
top: 14px;
}
.va-etoile {
align-items: center;
appearance: none;
background: var(--va-blanc);
border: 1px solid var(--va-trait);
border-radius: 999px;
color: var(--va-encre);
cursor: pointer;
display: inline-flex;
flex: none;
height: 44px;
justify-content: center;
padding: 0;
transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
width: 44px;
}
.va-etoile:hover {
transform: scale(1.06);
}
.va-etoile:focus-visible {
outline: 2px solid var(--va-bleu);
outline-offset: 2px;
}
.va-etoile--active {
background: var(--va-ocre-doux);
border-color: var(--va-ocre);
color: var(--va-ocre);
}
.va-etoile--active svg {
fill: currentColor;
}
.va-vedette .va-etoile {
border: 0;
position: absolute;
right: 10px;
top: 10px;
} .va-resume {
align-items: flex-start;
background: var(--va-fond);
border: 1px solid var(--va-trait);
border-radius: 14px;
display: flex;
gap: 20px;
padding: 22px 24px;
}
.va-resume + .va-resume {
margin-top: 10px;
} html.va-js .va-resume:not([data-va-actif]) {
display: none;
}
.va-resume-texte {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.va-resume-texte p {
font-size: 16px;
line-height: 1.6;
margin: 0;
}
.va-surtitre {
color: var(--va-bleu);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.va-resume-meta {
color: var(--va-gris);
font-size: 13px;
}
.va-bouton {
align-items: center;
background: var(--va-bleu);
border-radius: 999px;
color: #ffffff;
display: inline-flex;
flex: none;
font-size: 14px;
font-weight: 600;
min-height: 44px;
padding: 10px 18px;
text-decoration: none;
}
.va-bouton:hover {
color: #ffffff;
filter: brightness(1.08);
} .va-anciens-titre {
font-size: 20px;
font-weight: 700;
margin: 0 0 6px;
}
.va-liste {
list-style: none;
margin: 0;
padding: 0;
}
.va-ligne {
align-items: center;
border-top: 1px solid var(--va-trait);
display: flex;
gap: 16px;
padding: 14px 0;
}
.va-ligne:last-child {
border-bottom: 1px solid var(--va-trait);
}
.va-ligne-lien {
align-items: center;
color: inherit;
display: grid;
flex: 1 1 auto;
gap: 16px;
grid-template-columns: 96px minmax(0, 1fr);
min-width: 0;
text-decoration: none;
}
.va-ligne-lien:hover .va-ligne-titre {
color: var(--va-bleu);
}
.va-ligne-image {
border-radius: 10px;
height: 64px;
object-fit: cover;
overflow: hidden;
width: 96px;
}
.va-ligne-texte {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.va-ligne-titre {
font-size: 17px;
font-weight: 600;
line-height: 1.25;
}
.va-ligne-meta {
align-items: center;
color: var(--va-gris);
display: flex;
flex-wrap: wrap;
font-size: 12px;
gap: 8px;
}
.va-ligne-meta .va-pastille {
font-size: 10px;
padding: 2px 8px;
}
.va-anciens-suite {
font-size: 14px;
margin: 14px 0 0;
} .va-favoris {
background: var(--va-ocre-doux);
border: 1px solid var(--va-ocre-trait);
border-radius: 16px;
display: flex;
flex: 1 1 280px;
flex-direction: column;
gap: 12px;
max-width: 320px;
padding: 20px;
position: sticky;
top: 24px;
transition: box-shadow 0.15s ease, border-color 0.15s ease;
} html.va-glisse .va-favoris {
border-color: var(--va-ocre);
border-style: dashed;
}
.va-favoris--survol {
box-shadow: 0 0 0 4px var(--va-ocre-trait);
}
@keyframes va-secousse {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-6px); }
40%, 80% { transform: translateX(6px); }
}
.va-favoris--plein {
animation: va-secousse 0.4s ease;
}
.va-favoris-entete {
align-items: center;
display: flex;
gap: 10px;
}
.va-favoris-nom {
align-items: center;
color: var(--va-encre);
display: flex;
flex: 1 1 auto;
font-size: 17px;
font-weight: 700;
gap: 8px;
}
.va-favoris-nom svg {
color: var(--va-ocre);
}
.va-favoris-compte {
background: var(--va-blanc);
border: 1px solid var(--va-ocre-trait);
border-radius: 999px;
color: var(--va-ocre);
font-size: 12px;
font-variant-numeric: tabular-nums;
font-weight: 600;
padding: 3px 9px;
}
.va-favoris-fermer {
display: none;
}
.va-favoris-liste {
display: flex;
flex-direction: column;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.va-favori {
align-items: center;
background: var(--va-blanc);
border: 1px solid var(--va-ocre-trait);
border-radius: 10px;
display: grid;
gap: 10px;
grid-template-columns: 52px minmax(0, 1fr) auto;
padding: 8px;
}
.va-favori-image {
border-radius: 7px;
height: 40px;
object-fit: cover;
overflow: hidden;
width: 52px;
}
.va-favori-image.va-secours {
padding: 0;
}
.va-favori-titre {
color: var(--va-encre);
font-size: 13px;
font-weight: 600;
line-height: 1.3;
text-decoration: none;
}
.va-favori-titre:hover {
color: var(--va-bleu);
}
.va-favori-retirer {
appearance: none;
background: none;
border: 0;
border-radius: 999px;
color: var(--va-gris);
cursor: pointer;
font-size: 20px;
height: 36px;
line-height: 1;
width: 36px;
}
.va-favori-retirer:hover {
background: var(--va-ocre-doux);
color: var(--va-encre);
}
.va-favori-place {
border: 2px dashed var(--va-ocre-trait);
border-radius: 10px;
min-height: 58px;
opacity: 0.55;
}
.va-favori-place--invite {
align-items: center;
color: var(--va-ocre);
display: flex;
font-size: 12px;
font-weight: 600;
justify-content: center;
opacity: 1;
padding: 8px;
text-align: center;
}
.va-favoris-message {
color: var(--va-encre);
font-size: 12.5px;
font-weight: 600;
margin: 0;
min-height: 1.2em;
}
.va-favoris-message:empty {
display: none;
}
.va-favoris-note {
color: var(--va-gris);
font-size: 11.5px;
line-height: 1.5;
margin: 0;
} .va-favoris-onglet {
display: none;
} .va-article-favori {
align-items: center;
border-top: 1px solid var(--va-trait);
display: flex;
gap: 12px;
margin-top: 2rem;
padding-top: 1rem;
}
.va-article-favori-texte {
color: var(--va-gris);
font-size: 14px;
}
.va-vitrine--article {
display: contents;
}
.va-vitrine--article .va-favoris {
bottom: 16px;
max-width: 300px;
position: fixed;
right: 16px;
top: auto;
z-index: 90;
} @media (max-width: 900px) {
.va-vedettes {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: auto auto;
}
.va-vedette--grande {
grid-column: 1 / 3;
grid-row: 1;
min-height: 230px;
}
.va-vedette--petite {
grid-column: auto;
grid-row: 2;
min-height: 150px;
}
.va-resume {
flex-direction: column;
padding: 16px;
}
.va-resume-texte p {
font-size: 14px;
}
.va-ligne-lien {
gap: 12px;
grid-template-columns: 64px minmax(0, 1fr);
}
.va-ligne-image {
height: 48px;
width: 64px;
}
.va-ligne-titre {
font-size: 14px;
}
.va-favoris,
.va-vitrine--article .va-favoris {
border-radius: 20px 20px 0 0;
bottom: 0;
box-shadow: 0 -8px 24px rgba(15, 37, 66, 0.15);
left: 0;
max-height: 80vh;
max-width: none;
overflow: auto;
position: fixed;
right: 0;
top: auto;
transform: translateY(100%);
transition: transform 0.25s ease;
z-index: 95;
}
html.va-favoris-ouverts .va-favoris {
transform: translateY(0);
}
.va-favoris-fermer {
appearance: none;
background: none;
border: 0;
color: var(--va-gris);
cursor: pointer;
display: inline-flex;
font-size: 24px;
height: 44px;
justify-content: center;
line-height: 1;
width: 44px;
}
.va-favoris-onglet {
align-items: center;
background: var(--va-ocre);
border: 0;
border-radius: 999px;
bottom: 16px;
box-shadow: 0 6px 18px rgba(15, 37, 66, 0.25);
color: #ffffff;
cursor: pointer;
display: inline-flex;
font-size: 14px;
font-weight: 700;
gap: 6px;
min-height: 48px;
padding: 0 16px;
position: fixed;
right: 16px;
z-index: 94;
} html.va-favoris-ouverts .va-favoris-onglet {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.va-favoris,
.va-etoile,
.va-vedette-lien {
transition: none;
}
.va-favoris--plein {
animation: none;
}
}
@media print {
.va-favoris,
.va-favoris-onglet,
.va-etoile {
display: none !important;
}
}