:root {
    --wz-encre: #0D1B35;
    --wz-bleu: #087FBE;
    --wz-turquoise: #00CDB5;
    --wz-vert: #39E75F;
    --wz-vert-profond: #00A982;
    --wz-ardoise: #596579;
    --wz-craie: #F3F6F8;
    --wz-blanc: #FFFFFF;

    color-scheme: light;

    --wz-fond: #FFFFFF;
    --wz-surface: #FFFFFF;
    --wz-filet: #E2E8EF;
    --wz-filet-fort: #C6D0DB;

    --wz-texte: #0D1B35;
    --wz-texte-doux: #55617A;
    --wz-texte-pale: #6B7689;

    --wz-action: #00CDB5;
    --wz-action-texte: #00786A;
    --wz-sur-action: #0D1B35;

    --wz-lavis-bleu: #EEF6FB;
    --wz-lavis-turquoise: #EAF8F6;
    --wz-lavis-vert: #EFFAF1;

    --wz-ombre: 0 2px 4px rgba(13, 27, 53, 0.04), 0 14px 34px -20px rgba(13, 27, 53, 0.30);
    --wz-ombre-forte: 0 30px 70px -34px rgba(13, 27, 53, 0.45);

    --wz-fonte: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --wz-fonte-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --wz-gouttiere: 1.5rem;
    --wz-mesure: 62ch;
    --wz-rayon: 1rem;
    --wz-rayon-grand: 1.75rem;
    --wz-rayon-petit: 0.5rem;
    --wz-cadre: 72rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --wz-fond: #101E36;
        --wz-surface: #17273F;
        --wz-filet: rgba(255, 255, 255, 0.12);
        --wz-filet-fort: rgba(255, 255, 255, 0.22);

        --wz-texte: #F3F7FA;
        --wz-texte-doux: rgba(243, 247, 250, 0.74);
        --wz-texte-pale: rgba(243, 247, 250, 0.54);

        --wz-action-texte: #00CDB5;

        --wz-lavis-bleu: #12263C;
        --wz-lavis-turquoise: #0F2739;
        --wz-lavis-vert: #112A35;

        --wz-ombre: 0 14px 34px -22px rgba(2, 8, 20, 0.9);
        --wz-ombre-forte: 0 30px 70px -34px rgba(2, 8, 20, 0.9);
    }
}

@font-face {
    font-display: swap;
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 800;
    src: url("../fonts/inter-latin-Gz7AlRl.woff2") format("woff2");
    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-display: swap;
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 800;
    src: url("../fonts/inter-latin-ext-1Br77OV.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

[id] {
    scroll-margin-top: 6rem;
}

body {
    background: var(--wz-fond);
    color: var(--wz-texte);
    font-family: var(--wz-fonte);
    font-size: 1.0625rem;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    margin: 0;
}

img, svg {
    display: block;
}

img {
    height: auto;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3, p, ol, ul, figure {
    margin: 0;
}

ol, ul {
    list-style: none;
    padding: 0;
}

input {
    font: inherit;
}

:focus-visible {
    border-radius: var(--wz-rayon-petit);
    outline: 2px solid var(--wz-action);
    outline-offset: 3px;
}

.wz-cadre {
    margin: 0 auto;
    max-width: var(--wz-cadre);
    padding: 0 var(--wz-gouttiere);
    width: 100%;
}

.wz-saut {
    background: var(--wz-action);
    border-radius: var(--wz-rayon-petit);
    color: var(--wz-sur-action);
    font-weight: 600;
    left: -9999px;
    padding: 0.75rem 1rem;
    position: absolute;
    top: 0;
    z-index: 60;
}

.wz-saut:focus {
    left: 1rem;
    top: 1rem;
}

.wz-bouton {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    color: inherit;
    display: inline-flex;
    font-size: 0.9375rem;
    font-weight: 650;
    justify-content: center;
    line-height: 1.2;
    padding: 0.6875rem 1.25rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}

.wz-bouton--plein {
    background: var(--wz-turquoise);
    color: var(--wz-sur-action);
}

.wz-bouton--plein:hover {
    background: var(--wz-vert-profond);
    color: var(--wz-sur-action);
    transform: translateY(-1px);
}

.wz-bouton--grand {
    font-size: 1.0625rem;
    padding: 0.9375rem 1.75rem;
}

.wz-bouton--clair {
    background: var(--wz-surface);
    border-color: var(--wz-filet-fort);
}

.wz-bouton--clair:hover {
    border-color: var(--wz-action);
    color: var(--wz-action-texte);
}

.wz-barre {
    background: color-mix(in srgb, var(--wz-fond) 88%, transparent);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--wz-filet);
    position: sticky;
    top: 0;
    z-index: 40;
}

.wz-barre__interieur {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    min-height: 4.5rem;
}

.wz-marque {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    gap: 0.6875rem;
}

.wz-marque__symbole {
    height: 1.875rem;
    width: auto;
}

.wz-marque__mot {
    height: 1.1875rem;
    width: auto;
}

@media (prefers-color-scheme: dark) {
    .wz-marque__mot {
        filter: brightness(0) invert(1);
    }
}

.wz-menu {
    display: none;
    gap: 1.75rem;
}

.wz-menu__lien {
    color: var(--wz-texte-doux);
    font-size: 0.9375rem;
    font-weight: 550;
    padding: 0.25rem 0;
    position: relative;
    transition: color 0.15s ease;
}

.wz-menu__lien:hover {
    color: var(--wz-texte);
}

.wz-menu__lien::after {
    background: var(--wz-turquoise);
    border-radius: 999px;
    bottom: 0;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.18s ease;
    width: 100%;
}

.wz-menu__lien:hover::after {
    transform: scaleX(1);
}

.wz-actions {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 0.5rem;
}

.wz-langue {
    display: flex;
    gap: 0.125rem;
}

.wz-langue__item {
    border-radius: 999px;
    color: var(--wz-texte-pale);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.375rem 0.5625rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.wz-langue__item:hover {
    background: var(--wz-craie);
    color: var(--wz-texte);
}

.wz-langue__item.est-courant {
    background: rgba(0, 205, 181, 0.16);
    color: var(--wz-action-texte);
}

@media (prefers-color-scheme: dark) {
    .wz-langue__item:hover {
        background: rgba(255, 255, 255, 0.08);
    }
}

.wz-ouverture {
    background: linear-gradient(170deg, var(--wz-lavis-turquoise) 0%, var(--wz-fond) 72%);
    overflow: hidden;
    padding: 2.5rem 0 3.5rem;
}

.wz-ouverture__grille {
    display: grid;
    gap: 2rem;
}

.wz-ouverture__image {
    justify-self: center;
    max-width: 26rem;
    width: 100%;
}

.wz-ouverture__titre {
    font-size: clamp(2.125rem, 5.4vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
    max-width: 15ch;
    text-wrap: balance;
}

.wz-ouverture__dire {
    color: var(--wz-texte-doux);
    font-size: 1.125rem;
    margin-top: 1.125rem;
    max-width: 44ch;
    text-wrap: pretty;
}

.wz-ouverture__agir {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.wz-ouverture__note {
    color: var(--wz-texte-pale);
    font-size: 0.875rem;
    margin-top: 1rem;
}

.wz-bloc {
    padding: 4rem 0;
}

.wz-bloc--craie {
    background: var(--wz-craie);
}

@media (prefers-color-scheme: dark) {
    .wz-bloc--craie {
        background: var(--wz-lavis-bleu);
    }
}

.wz-bloc--encre {
    background: var(--wz-encre);
    color: #FFFFFF;

    --wz-texte: #FFFFFF;
    --wz-texte-doux: rgba(255, 255, 255, 0.74);
    --wz-texte-pale: rgba(255, 255, 255, 0.54);
    --wz-filet: rgba(255, 255, 255, 0.14);
    --wz-filet-fort: rgba(255, 255, 255, 0.24);
    --wz-surface: #17273F;
    --wz-action-texte: #00CDB5;
}

.wz-bloc__titre {
    font-size: clamp(1.75rem, 3.6vw, 2.375rem);
    font-weight: 800;
    letter-spacing: -0.032em;
    line-height: 1.14;
    max-width: 20ch;
    text-wrap: balance;
}

.wz-bloc__dire {
    color: var(--wz-texte-doux);
    margin-top: 1rem;
    max-width: var(--wz-mesure);
    text-wrap: pretty;
}

.wz-familles {
    display: grid;
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.wz-famille {
    border-radius: var(--wz-rayon-grand);
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.5rem 1.875rem;
}

.wz-famille--bleu {
    background: var(--wz-lavis-bleu);
}

.wz-famille--turquoise {
    background: var(--wz-lavis-turquoise);
}

.wz-famille--vert {
    background: var(--wz-lavis-vert);
}

.wz-famille--encre {
    background: var(--wz-encre);
    color: #FFFFFF;

    --wz-texte: #FFFFFF;
    --wz-texte-doux: rgba(255, 255, 255, 0.72);
    --wz-filet: rgba(255, 255, 255, 0.16);
}

.wz-famille__image {
    margin-bottom: 1.125rem;
}

.wz-famille__image .wz-dessin {
    height: auto;
    margin-inline: auto;
    max-width: 11.5rem;
    width: 100%;
}

.wz-famille__nom {
    font-size: 1.1875rem;
    font-weight: 750;
    letter-spacing: -0.018em;
}

.wz-capacites {
    display: grid;
    gap: 0.875rem;
    margin-top: 1.125rem;
}

.wz-capacite {
    border-top: 1px solid var(--wz-filet);
    display: grid;
    gap: 0.125rem;
    padding-top: 0.875rem;
}

.wz-capacite__nom {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.wz-capacite__dire {
    color: var(--wz-texte-doux);
    font-size: 0.875rem;
    text-wrap: pretty;
}

.wz-essai {
    display: grid;
    gap: 2.5rem;
}

.wz-cas {
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0 0;
    padding: 0;
}

.wz-cas legend {
    float: left;
    margin-bottom: 0.5rem;
    padding: 0;
    width: 100%;
}

.wz-cas__item {
    border: 1px solid var(--wz-filet-fort);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.4375rem 0.875rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wz-cas__item:hover {
    border-color: var(--wz-turquoise);
}

.wz-cas__bouton {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.wz-cas__item:has(.wz-cas__bouton:checked) {
    background: var(--wz-turquoise);
    border-color: var(--wz-turquoise);
    color: var(--wz-sur-action);
}

.wz-cas__item:has(.wz-cas__bouton:focus-visible) {
    outline: 2px solid var(--wz-turquoise);
    outline-offset: 2px;
}

.wz-champ {
    display: block;
    margin-top: 1.75rem;
    max-width: 20rem;
}

.wz-champ__intitule {
    color: var(--wz-texte-pale);
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.4375rem;
}

.wz-champ__saisie {
    background: var(--wz-surface);
    border: 2px solid var(--wz-filet-fort);
    border-radius: 999px;
    color: var(--wz-texte);
    font-size: 1.0625rem;
    padding: 0.75rem 1.25rem;
    transition: border-color 0.15s ease;
    width: 100%;
}

.wz-champ__saisie:focus {
    border-color: var(--wz-turquoise);
    outline: none;
}

.wz-champ__saisie::placeholder {
    color: var(--wz-texte-pale);
}

.wz-essai__note {
    color: var(--wz-texte-pale);
    font-size: 0.875rem;
    margin-top: 1.25rem;
    max-width: 40ch;
}

.wz-apercu__intitule {
    color: var(--wz-texte-pale);
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.625rem;
}

.wz-apercu__bulle {
    background: #FFFFFF;
    border-radius: var(--wz-rayon);
    border-top-left-radius: var(--wz-rayon-petit);
    box-shadow: var(--wz-ombre-forte);
    color: var(--wz-encre);
    max-width: 26rem;
    padding: 1rem 1.125rem 0.75rem;
}

.wz-apercu__texte {
    font-size: 1rem;
    line-height: 1.5;
    text-wrap: pretty;
}

.wz-apercu__nom {
    background: rgba(0, 205, 181, 0.18);
    border-radius: var(--wz-rayon-petit);
    font-weight: 700;
    padding: 0.0625rem 0.375rem;
}

.wz-apercu__pied {
    align-items: center;
    color: #6B7689;
    display: flex;
    font-size: 0.75rem;
    gap: 0.375rem;
    justify-content: flex-end;
    margin-top: 0.625rem;
}

.wz-apercu__recu {
    color: var(--wz-vert-profond);
    height: 0.75rem;
    width: 1rem;
}

.wz-etapes {
    counter-reset: wz-etape;
    display: grid;
    gap: 2rem;
    margin-top: 2.5rem;
}

.wz-etape {
    counter-increment: wz-etape;
}

.wz-etape__jeton {
    align-items: center;
    background: var(--wz-lavis-turquoise);
    border-radius: var(--wz-rayon);
    color: var(--wz-encre);
    display: flex;
    height: 3.5rem;
    justify-content: center;
    position: relative;
    width: 3.5rem;
}

@media (prefers-color-scheme: dark) {
    .wz-etape__jeton {
        color: #FFFFFF;
    }
}

.wz-etape__jeton::after {
    align-items: center;
    background: var(--wz-turquoise);
    border-radius: 999px;
    color: var(--wz-sur-action);
    content: counter(wz-etape);
    display: flex;
    font-size: 0.6875rem;
    font-weight: 800;
    height: 1.25rem;
    justify-content: center;
    position: absolute;
    right: -0.375rem;
    top: -0.375rem;
    width: 1.25rem;
}

.wz-etape__titre {
    font-size: 1.0625rem;
    font-weight: 750;
    letter-spacing: -0.015em;
    margin-top: 1rem;
}

.wz-etape__dire {
    color: var(--wz-texte-doux);
    font-size: 0.9375rem;
    margin-top: 0.3125rem;
    text-wrap: pretty;
}

.wz-garanties {
    display: grid;
    gap: 1.75rem 2.5rem;
    margin-top: 2.5rem;
}

.wz-garantie {
    border-top: 2px solid var(--wz-turquoise);
    padding-top: 0.9375rem;
}

.wz-garantie__titre {
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: -0.012em;
}

.wz-garantie__dire {
    color: var(--wz-texte-doux);
    font-size: 0.9375rem;
    margin-top: 0.3125rem;
    text-wrap: pretty;
}

.wz-questions {
    display: grid;
    gap: 2rem;
}

.wz-question {
    border-bottom: 1px solid var(--wz-filet);
}

.wz-question:first-child {
    border-top: 1px solid var(--wz-filet);
}

.wz-question__q {
    cursor: pointer;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.012em;
    list-style: none;
    padding: 1.125rem 2.5rem 1.125rem 0;
    position: relative;
}

.wz-question__q::-webkit-details-marker {
    display: none;
}

.wz-question__q::before,
.wz-question__q::after {
    background: var(--wz-action-texte);
    border-radius: 999px;
    content: "";
    position: absolute;
    right: 0.25rem;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.wz-question__q::before {
    height: 2px;
    top: 1.75rem;
    width: 0.875rem;
}

.wz-question__q::after {
    height: 0.875rem;
    right: 0.625rem;
    top: 1.3125rem;
    width: 2px;
}

.wz-question[open] .wz-question__q::after {
    opacity: 0;
    transform: rotate(90deg);
}

.wz-question__r {
    color: var(--wz-texte-doux);
    font-size: 0.9375rem;
    max-width: var(--wz-mesure);
    padding-bottom: 1.25rem;
    text-wrap: pretty;
}

.wz-fin {
    padding: 0 0 4rem;
}

.wz-fin__interieur {
    background: var(--wz-encre);
    border-radius: var(--wz-rayon-grand);
    color: #FFFFFF;
    display: grid;
    gap: 1.75rem;
    padding: 2.75rem 2rem;
    position: relative;
}

.wz-fin__interieur::before {
    background: linear-gradient(90deg, var(--wz-bleu), var(--wz-turquoise) 52%, var(--wz-vert));
    border-radius: var(--wz-rayon-grand) var(--wz-rayon-grand) 0 0;
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.wz-fin__titre {
    font-size: clamp(1.625rem, 3.4vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.032em;
    line-height: 1.14;
    max-width: 16ch;
}

.wz-fin__dire {
    color: rgba(255, 255, 255, 0.72);
    margin-top: 0.75rem;
    max-width: 44ch;
    text-wrap: pretty;
}

.wz-pied {
    border-top: 1px solid var(--wz-filet);
    padding: 2rem 0 2.5rem;
}

.wz-pied__interieur {
    color: var(--wz-texte-pale);
    display: flex;
    flex-direction: column;
    font-size: 0.8125rem;
    gap: 1rem;
}

.wz-pied__droite {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wz-pied__liens {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
}

.wz-pied__lien {
    transition: color 0.15s ease;
}

.wz-pied__lien:hover {
    color: var(--wz-texte);
}

.wz-dessin {
    height: auto;
    width: 100%;
}

.wz-dessin,
.wz-picto {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wz-halo--a {
    fill: rgba(0, 205, 181, 0.16);
}

.wz-halo--b {
    fill: rgba(8, 127, 190, 0.14);
}

.wz-surface {
    fill: var(--wz-blanc);
    stroke: var(--wz-encre);
    stroke-width: 2.5;
}

.wz-filet-dessin {
    stroke: var(--wz-filet);
    stroke-width: 2;
}

.wz-encoche {
    stroke: var(--wz-encre);
    stroke-opacity: 0.3;
    stroke-width: 5;
}

.wz-ruban {
    stroke: var(--wz-turquoise);
    stroke-width: 6;
}

.wz-etiquette {
    fill: rgba(57, 231, 95, 0.45);
    stroke: var(--wz-vert-profond);
    stroke-width: 2;
}

.wz-etiquette-trait {
    stroke: var(--wz-vert-profond);
    stroke-opacity: 0.75;
    stroke-width: 2;
}

.wz-avatar {
    fill: rgba(0, 205, 181, 0.3);
}

.wz-barre-texte {
    fill: var(--wz-encre);
    fill-opacity: 0.55;
}

.wz-barre-texte--pale {
    fill-opacity: 0.24;
}

.wz-bulle-recue {
    fill: var(--wz-craie);
    stroke: var(--wz-filet);
    stroke-width: 2;
}

.wz-bulle-envoyee {
    fill: rgba(0, 205, 181, 0.18);
    stroke: rgba(0, 205, 181, 0.55);
    stroke-width: 2;
}

.wz-coche {
    fill: none;
    stroke: var(--wz-vert-profond);
    stroke-width: 2.6;
}

.wz-pastille-fenetre {
    fill: rgba(13, 27, 53, 0.18);
}

.wz-adresse {
    fill: var(--wz-craie);
    stroke: var(--wz-filet);
    stroke-width: 1.5;
}

.wz-jeton--pale {
    fill: rgba(13, 27, 53, 0.10);
}

.wz-aplat-action {
    fill: var(--wz-turquoise);
}

.wz-libelle-action {
    fill: var(--wz-encre);
    fill-opacity: 0.55;
}

.wz-coche--encre {
    stroke: var(--wz-encre);
}

.wz-image-trait {
    fill: none;
    stroke: var(--wz-bleu);
    stroke-width: 2.5;
}

.wz-lecture {
    fill: var(--wz-turquoise);
}

.wz-avion path {
    fill: var(--wz-bleu);
}

.wz-branche {
    fill: none;
    stroke: var(--wz-encre);
    stroke-opacity: 0.25;
    stroke-width: 2;
}

.wz-fente {
    fill: rgba(0, 205, 181, 0.35);
}

.wz-nom--bleu {
    fill: var(--wz-bleu);
}

.wz-nom--turquoise {
    fill: var(--wz-turquoise);
}

.wz-nom--vert {
    fill: var(--wz-vert-profond);
}

.wz-jeton--bleu {
    fill: rgba(8, 127, 190, 0.28);
}

.wz-jeton--turquoise {
    fill: rgba(0, 205, 181, 0.3);
}

.wz-jeton--vert {
    fill: rgba(0, 169, 130, 0.26);
}

.wz-barre-stat--1 {
    fill: var(--wz-bleu);
}

.wz-barre-stat--2 {
    fill: var(--wz-turquoise);
}

.wz-barre-stat--3 {
    fill: var(--wz-vert);
}

.wz-picto {
    fill: none;
    height: 1.75rem;
    stroke: currentColor;
    stroke-width: 2.6;
    width: 1.75rem;
}

.wz-picto__accent {
    stroke: var(--wz-vert-profond);
}

@media (prefers-color-scheme: dark) {
    .wz-surface {
        fill: #1B2C46;
        stroke: rgba(255, 255, 255, 0.32);
    }

    .wz-bulle-recue {
        fill: rgba(255, 255, 255, 0.07);
        stroke: rgba(255, 255, 255, 0.16);
    }

    .wz-barre-texte {
        fill: #FFFFFF;
        fill-opacity: 0.55;
    }

    .wz-barre-texte--pale {
        fill-opacity: 0.26;
    }

    .wz-branche {
        stroke: #FFFFFF;
        stroke-opacity: 0.28;
    }

    .wz-encoche {
        stroke: #FFFFFF;
        stroke-opacity: 0.3;
    }

    .wz-coche {
        stroke: var(--wz-vert);
    }

    .wz-pastille-fenetre {
        fill: rgba(255, 255, 255, 0.24);
    }

    .wz-adresse {
        fill: rgba(255, 255, 255, 0.07);
        stroke: rgba(255, 255, 255, 0.14);
    }

    .wz-jeton--pale {
        fill: rgba(255, 255, 255, 0.12);
    }

    .wz-libelle-action {
        fill: var(--wz-encre);
        fill-opacity: 0.7;
    }
}

@media (prefers-reduced-motion: no-preference) {

    .wz-destinataires {
        animation: wzParait 6s ease-out 0.4s both;
    }

    .wz-envoyer {
        animation: wzAppui 9s ease-in-out 0.9s infinite;
        transform-origin: 265px 212px;
    }

    .wz-envoi-bulle {
        animation: wzMonteBulle 9s ease-in-out 1.1s infinite;
    }

    .wz-coche--seconde {
        animation: wzSecondeCoche 9s ease-in-out 1.1s infinite;
    }

    .wz-avion {
        animation: wzVole 9s ease-in-out 1.1s infinite;
        transform-origin: 359px 154px;
    }

    @keyframes wzParait {
        0%, 4% { opacity: 0; transform: translateY(6px); }
        10%, 100% { opacity: 1; transform: none; }
    }

    @keyframes wzAppui {
        0%, 8% { transform: none; }
        11% { transform: scale(0.94); }
        15%, 100% { transform: none; }
    }

    @keyframes wzMonteBulle {
        0%, 6% { opacity: 0; transform: translateY(14px); }
        14%, 88% { opacity: 1; transform: none; }
        96%, 100% { opacity: 0; transform: translateY(14px); }
    }

    @keyframes wzSecondeCoche {
        0%, 26% { opacity: 0; }
        34%, 92% { opacity: 1; }
        96%, 100% { opacity: 0; }
    }

    @keyframes wzVole {
        0%, 16% { opacity: 0; transform: translate(-26px, 20px) scale(0.8); }
        26% { opacity: 1; }
        60%, 100% { opacity: 0; transform: translate(30px, -26px) scale(1); }
    }

    .wz-fiche {
        animation: wzFiche 8s ease-in-out infinite;
    }

    .wz-fiche--1 { animation-delay: 0.2s; }
    .wz-fiche--2 { animation-delay: 0.5s; }
    .wz-fiche--3 { animation-delay: 0.8s; }

    @keyframes wzFiche {
        0%, 4% { opacity: 0.25; transform: translateY(6px); }
        14%, 82% { opacity: 1; transform: none; }
        94%, 100% { opacity: 0.25; transform: translateY(6px); }
    }

    .wz-arrive {
        animation: wzArrive 7.5s ease-in-out infinite;
    }

    .wz-arrive--1 { animation-delay: 0.4s; }
    .wz-arrive--2 { animation-delay: 1.6s; }

    @keyframes wzArrive {
        0%, 5% { opacity: 0; transform: translateY(8px); }
        16%, 86% { opacity: 1; transform: none; }
        95%, 100% { opacity: 0; transform: translateY(8px); }
    }

    .wz-barre-stat {
        transform-origin: 56px 0;
    }

    .wz-barre-stat--1 { animation: wzRemplit 10s ease-out 0.3s infinite; }
    .wz-barre-stat--2 { animation: wzRemplit 10s ease-out 0.6s infinite; }
    .wz-barre-stat--3 { animation: wzRemplit 10s ease-out 0.9s infinite; }

    .wz-timbre {
        animation: wzTimbre 10s ease-out 1.4s infinite;
        transform-origin: 152px 110px;
    }

    @keyframes wzRemplit {
        0%, 3% { transform: scaleX(0.06); }
        16%, 88% { transform: scaleX(1); }
        96%, 100% { transform: scaleX(0.06); }
    }

    @keyframes wzTimbre {
        0%, 8% { opacity: 0; transform: scale(0.6); }
        16%, 88% { opacity: 1; transform: none; }
        96%, 100% { opacity: 0; transform: scale(0.6); }
    }
}

@media (min-width: 46rem) {
    .wz-ouverture {
        padding: 3.5rem 0 4.5rem;
    }

    .wz-ouverture__grille {
        align-items: center;
        gap: 3rem;
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    }

    .wz-ouverture__image {
        grid-column: 1;
        grid-row: 1;
        max-width: none;
    }

    .wz-ouverture__dit {
        grid-column: 2;
        grid-row: 1;
    }

    .wz-bloc {
        padding: 5rem 0;
    }

    .wz-familles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wz-essai {
        align-items: center;
        gap: 3.5rem;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .wz-etapes {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .wz-garanties {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wz-questions {
        align-items: start;
        gap: 3rem;
        grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    }

    .wz-fin__interieur {
        align-items: center;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 3.25rem 3rem;
    }

    .wz-pied__interieur {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
    }

    .wz-pied__droite {
        align-items: center;
        flex-direction: row;
        gap: 1.5rem;
    }
}

@media (min-width: 60rem) {
    .wz-menu {
        display: flex;
    }

    .wz-garanties {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 72rem) {
    :root {
        --wz-gouttiere: 2.5rem;
    }
}

@media (max-width: 23.5rem) {
    :root {
        --wz-gouttiere: 1.125rem;
    }

    .wz-marque__mot {
        display: none;
    }
}

@media (max-width: 30rem) {
    .wz-bouton {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .wz-actions {
        gap: 0.3125rem;
    }
}

@media (max-width: 43.75rem) {
    .wz-marque,
    .wz-bouton {
        min-height: 44px;
    }

    .wz-langue__item,
    .wz-pied__lien {
        align-items: center;
        display: inline-flex;
        min-height: 44px;
    }

    .wz-cas__item {
        align-items: center;
        display: inline-flex;
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}