/* ==========================================================================
   Periscope : blocs
   Version 1.1.1 (2026-10-19) · voir CHANGELOG.md
   --------------------------------------------------------------------------
   Composants de la charte, à charger après tokens.css. Chaque bloc ne lit que
   des variables --psc-* : il suit donc le thème (clair / mode ÉCO) sans règle
   en plus.

   Nommage : .psc-bloc, .psc-bloc__element, .psc-bloc--variante.
   Chaque bloc porte une mention :
     [relevé]  dessiné dans la maquette ou présent sur periscope.digital ;
     [dérivé]  extrapolé pour les outils internes, dans l'esprit de la charte.

   Sommaire
    0. Base                     17. Bandeau défilant
    1. Mise en page             18. Citation
    2. Typographie              19. Appel à l'action
    3. Boutons                  20. Vidéo et modale
    4. Tags et statuts          21. Tableau
    5. Liens                    22. Pagination
    6. En-tête de site          23. Formulaires
    7. Menu et nav mobile       24. Pied de page
    8. Fil d'Ariane             25. Alertes et toasts
    9. Héros et pixel art       26. Onglets et accordéon
   10. Section suivante         27. Progression et chargement
   11. En-tête de page          28. État vide
   12. Texte riche              29. Interface d'outil interne
   13. Figure et légende        30. Mouvement : animations et coupures
   14. Image-texte
   15. Chiffres clés
   16. Cartes, carrefour, liste de cas
   ========================================================================== */

/* ==========================================================================
   0. Base [relevé] : stylise les balises nues. À retirer si le site hôte a
   déjà son propre reset ; les blocs n'en dépendent pas, sauf box-sizing.
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: var(--psc-entete-hauteur);
}

body {
    margin: 0;
    background: var(--psc-fond);
    color: var(--psc-texte);
    font-family: var(--psc-police);
    font-size: var(--psc-corps);
    font-weight: var(--psc-graisse);
    line-height: var(--psc-corps-il);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition:
        background-color var(--psc-duree) var(--psc-courbe),
        color var(--psc-duree) var(--psc-courbe);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 var(--psc-titre-marge);
    font-weight: var(--psc-graisse-forte);
}

h1,
.psc-h1 {
    font-size: var(--psc-h1);
    line-height: var(--psc-h1-il);
}

h2,
.psc-h2 {
    font-size: var(--psc-h2);
    line-height: var(--psc-h2-il);
}

h3,
.psc-h3 {
    font-size: var(--psc-h3);
    font-weight: var(--psc-graisse);
    line-height: var(--psc-h3-il);
}

h4,
.psc-h4 {
    font-size: var(--psc-h4);
    line-height: var(--psc-h4-il);
}

h5,
h6,
.psc-h5 {
    font-size: var(--psc-h5);
    line-height: var(--psc-h5-il);
}

.psc-h1,
.psc-h2,
.psc-h4,
.psc-h5 {
    font-weight: var(--psc-graisse-forte);
}

.psc-h3 {
    font-weight: var(--psc-graisse);
}

p,
ul,
ol,
dl,
blockquote,
figure {
    margin: 0 0 var(--psc-espace-2);
}

:is(p, ul, ol, dl, blockquote, figure):last-child {
    margin-bottom: 0;
}

strong,
b {
    font-weight: var(--psc-graisse-forte);
}

a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    transition: text-decoration-color var(--psc-duree) var(--psc-courbe);
}

a:hover {
    text-decoration-color: transparent;
}

img,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

svg {
    flex-shrink: 0;
}

:focus-visible {
    outline: 3px solid var(--psc-focus);
    outline-offset: 3px;
}

::selection {
    background: var(--psc-menthe);
    color: var(--psc-petrole);
}

hr {
    height: 0;
    margin: var(--psc-espace-6) 0;
    border: 0;
    border-top: 1px solid var(--psc-trait);
}

code,
kbd,
samp,
pre {
    font-family: var(--psc-police-mono);
    font-size: 0.875em;
}

:not(pre) > code {
    padding: 2px 6px;
    background: var(--psc-fond-retrait);
}

pre {
    overflow-x: auto;
    margin: 0 0 var(--psc-espace-2);
    padding: var(--psc-espace-2) var(--psc-espace-3);
    background: var(--psc-fond-retrait);
    line-height: 1.6;
}

/* Masqué à l'écran, lu par les lecteurs d'écran */
.psc-masque {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Lien d'évitement [relevé, corrigé] : sa cible doit exister (<main id="contenu">) */
.psc-evitement {
    position: fixed;
    top: var(--psc-espace-2);
    left: var(--psc-espace-2);
    z-index: var(--psc-z-evitement);
    padding: var(--psc-espace-1) var(--psc-espace-3);
    background: var(--psc-menthe);
    color: var(--psc-petrole);
    font-weight: var(--psc-graisse-forte);
    transform: translateY(-200%);
}

.psc-evitement:focus {
    transform: none;
}

/* ==========================================================================
   1. Mise en page [relevé]
   ========================================================================== */
.psc-conteneur {
    width: 100%;
    max-width: calc(var(--psc-conteneur) + 2 * var(--psc-marge));
    margin-inline: auto;
    padding-inline: var(--psc-marge);
}

.psc-conteneur--large {
    max-width: calc(var(--psc-conteneur-large) + 2 * var(--psc-marge));
}

.psc-conteneur--texte {
    max-width: calc(var(--psc-conteneur-texte) + 2 * var(--psc-marge));
}

.psc-section {
    position: relative;
    padding-block: var(--psc-section);
    background: var(--psc-fond);
    color: var(--psc-texte);
}

.psc-section--compacte {
    padding-block: var(--psc-section-compacte);
}

/* Surfaces colorées : menthe et jaune se replient en pétrole en mode ÉCO */
.psc-section--menthe {
    --psc-numero: var(--psc-sur-surface);
    --psc-champ-bordure: var(--psc-sur-surface); /* le gris-bleu ne tient pas sur menthe */
    --psc-bouton-survol-fond: var(--psc-jaune);
    background: var(--psc-surface-menthe);
    color: var(--psc-sur-surface);
}

.psc-section--jaune {
    --psc-souligne: var(--psc-menthe);
    background: var(--psc-surface-jaune);
    color: var(--psc-sur-surface);
}

:is([data-theme='dark'], [data-bs-theme='dark']) .psc-section--menthe {
    --psc-bouton-survol-fond: var(--psc-menthe);
    --psc-numero: var(--psc-menthe);
    --psc-champ-bordure: inherit;
}

/* Toujours pétrole, quel que soit le thème (bande défilante, image-texte V2) */
.psc-section--petrole {
    background: var(--psc-petrole);
    color: var(--psc-texte);
}

/* Toujours violette : une seule par page, texte blanc */
.psc-section--violet {
    background: var(--psc-violet);
    color: var(--psc-blanc);
}

.psc-section--retrait {
    background: var(--psc-fond-retrait);
}

/* Séparateur fin entre deux sections de même fond */
.psc-section--filet {
    border-top: 1px solid var(--psc-trait);
}

.psc-grille {
    display: grid;
    gap: var(--psc-gouttiere);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
    .psc-grille--2,
    .psc-grille--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .psc-grille--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .psc-grille--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

.psc-pile {
    display: flex;
    flex-direction: column;
    gap: var(--psc-espace-3);
}

.psc-rangee {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--psc-espace-2);
}

.psc-centre {
    text-align: center;
}

.psc-rangee.psc-centre {
    justify-content: center;
}

/* ==========================================================================
   2. Typographie [relevé]
   ========================================================================== */
.psc-affiche {
    margin: 0 0 var(--psc-titre-marge);
    font-size: var(--psc-affiche);
    font-weight: var(--psc-graisse-forte);
    line-height: var(--psc-affiche-il);
    letter-spacing: -0.01em;
}

/* Chapô : paragraphe d'introduction sous un titre */
.psc-chapo {
    font-size: var(--psc-chapo);
    line-height: var(--psc-chapo-il);
}

/* Sur-titre : petite ligne au-dessus d'un titre, casse normale */
.psc-surtitre {
    display: block;
    margin-bottom: var(--psc-espace-1);
    font-size: var(--psc-surtitre);
    line-height: var(--psc-surtitre-il);
}

.psc-petit {
    font-size: var(--psc-petit);
    line-height: var(--psc-petit-il);
}

.psc-doux {
    color: var(--psc-texte-doux);
}

.psc-mono {
    font-family: var(--psc-police-mono);
    font-size: 0.875em;
}

/* Mot-clé souligné d'un trait épais sous un titre (jaune, menthe en ÉCO) */
.psc-souligne {
    text-decoration-line: underline;
    text-decoration-color: var(--psc-souligne);
    text-decoration-thickness: var(--psc-souligne-epaisseur);
    text-underline-offset: 0.12em;
    text-decoration-skip-ink: none;
}

/* ==========================================================================
   3. Boutons [relevé] : pilule, Barlow gras 16/28, bordure 1,5px.
   Survol : fond menthe, texte pétrole. Toujours un <button> pour une action,
   un <a> pour une navigation.
   ========================================================================== */
.psc-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--psc-espace-1);
    min-height: 44px;
    padding: calc(var(--psc-espace-2) - var(--psc-bordure-bouton)) calc(var(--psc-espace-4) - var(--psc-bordure-bouton));
    border: var(--psc-bordure-bouton) solid var(--psc-bouton-bordure);
    border-radius: var(--psc-rayon-pilule);
    background: var(--psc-bouton-fond);
    color: var(--psc-bouton-texte);
    font-family: var(--psc-police);
    font-size: var(--psc-bouton);
    font-weight: var(--psc-graisse-forte);
    line-height: var(--psc-bouton-il);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        color var(--psc-duree) var(--psc-courbe),
        background-color var(--psc-duree) var(--psc-courbe),
        border-color var(--psc-duree) var(--psc-courbe);
}

.psc-bouton svg {
    width: 24px;
    height: 24px;
}

.psc-bouton:hover {
    border-color: var(--psc-bouton-survol-fond);
    background: var(--psc-bouton-survol-fond);
    color: var(--psc-bouton-survol-texte);
}

/* Secondaire : contour seul */
.psc-bouton--secondaire {
    border-color: var(--psc-bouton-contour);
    background: transparent;
    color: var(--psc-bouton-contour);
}

/* Petit : en-tête, cartes, mobile */
.psc-bouton--petit {
    padding: calc(var(--psc-espace-1) - var(--psc-bordure-bouton)) calc(var(--psc-espace-3) - var(--psc-bordure-bouton));
}

@media (max-width: 991.98px) {
    .psc-bouton {
        padding: calc(var(--psc-espace-1) - var(--psc-bordure-bouton)) calc(var(--psc-espace-3) - var(--psc-bordure-bouton));
    }
}

/* Pleine largeur (mobile, formulaires) */
.psc-bouton--bloc {
    display: flex;
    width: 100%;
}

/* Rond 50px avec flèche au trait (« Nav up ») */
.psc-bouton--rond {
    width: 50px;
    height: 50px;
    min-height: 0;
    padding: 0;
    border-radius: var(--psc-rayon-rond);
}

/* Dérivé : bouton de danger (suppression) dans un outil interne */
.psc-bouton--danger {
    border-color: var(--psc-erreur);
    background: transparent;
    color: var(--psc-erreur);
}

.psc-bouton--danger:hover {
    border-color: var(--psc-rouge);
    background: var(--psc-rouge);
    color: var(--psc-blanc);
}

/* Dérivé : désactivé. Pas de fondu par opacité (le texte perdrait son
   contraste) : fond gris, bordure en tirets, texte doux. */
.psc-bouton:disabled,
.psc-bouton[aria-disabled='true'] {
    border-style: dashed;
    border-color: var(--psc-texte-doux);
    background: var(--psc-fond-retrait);
    color: var(--psc-texte-doux);
    cursor: not-allowed;
}

/* ==========================================================================
   4. Tags [relevé] et statuts [dérivé]
   ========================================================================== */
.psc-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--psc-espace-05);
    padding: var(--psc-espace-05) 14px;
    border-radius: var(--psc-rayon-pilule);
    background: var(--psc-menthe);
    color: var(--psc-petrole);
    font-size: var(--psc-petit);
    font-weight: var(--psc-graisse-forte);
    line-height: 20px;
    text-decoration: none;
}

a.psc-tag:hover,
button.psc-tag:hover {
    background: var(--psc-jaune);
}

button.psc-tag {
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

/* Statuts : la couleur ne porte jamais seule le sens, le mot est écrit. */
.psc-tag--neutre {
    background: var(--psc-fond-retrait);
    color: var(--psc-texte);
}

.psc-tag--alerte {
    background: var(--psc-jaune);
}

.psc-tag--info {
    background: var(--psc-violet);
    color: var(--psc-blanc);
}

.psc-tag--erreur {
    background: var(--psc-rouge);
    color: var(--psc-blanc);
}

.psc-tag--contour {
    padding: calc(var(--psc-espace-05) - 1px) 13px;
    border: 1px solid currentColor;
    background: transparent;
    color: var(--psc-texte);
}

/* Pastille de couleur devant un libellé de statut */
.psc-tag__point {
    width: 8px;
    height: 8px;
    background: currentColor;
}

/* ==========================================================================
   5. Liens [relevé] : soulignés, dans la couleur du texte, le soulignement
   disparaît au survol. Jamais de lien coloré en menthe ou jaune sur clair.
   ========================================================================== */

/* Lien suivi d'un chevron pixel */
.psc-lien-fleche {
    display: inline-flex;
    align-items: center;
    gap: var(--psc-espace-1);
    font-weight: var(--psc-graisse-forte);
}

.psc-lien-fleche::after {
    content: '';
    width: 12px;
    height: 12px;
    background: currentColor;
    -webkit-mask: var(--psc-masque-chevron-12) center / contain no-repeat;
    mask: var(--psc-masque-chevron-12) center / contain no-repeat;
}

/* Lien qui couvre toute sa carte (le parent porte position: relative) */
.psc-lien-etendu::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Masques des motifs pixel : la couleur vient de background (currentColor) */
:root {
    --psc-masque-chevron-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2.66h4v4H7zm4 4h4v4h-4zm4 4h4v4h-4zm-4 4h4v4h-4zm-4 4h4v4H7z'/%3E%3C/svg%3E");
    --psc-masque-chevron-12: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 1.33h2v2h-2zm2 2h2v2h-2zm2 2h2v2h-2zm-2 2h2v2h-2zm-2 2h2v2h-2z'/%3E%3C/svg%3E");
    --psc-masque-chevron-bas-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.66 7h4v4h-4zm4 4h4v4h-4zm4 4h4v4h-4zm4-4h4v4h-4zm4-4h4v4h-4z'/%3E%3C/svg%3E");
    --psc-masque-fleche-30: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 30'%3E%3Cpath d='M0 0h4.75v4.29H0zm4.75 4.29h4.75v4.28H4.75zm4.75 4.28h4.75v4.29H9.5zm4.75 4.29H19v4.28h-4.75zM9.5 17.14h4.75v4.29H9.5zm-4.75 4.29h4.75v4.28H4.75zM0 25.71h4.75V30H0z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   6. En-tête de site [relevé] : logo, signature, bascules ÉCO et ANIMS,
   bouton menu, bouton Contact. Les bascules sont des <button aria-pressed>,
   jamais des liens.
   ========================================================================== */
.psc-entete {
    position: sticky;
    top: 0;
    z-index: var(--psc-z-entete);
    display: flex;
    align-items: center;
    gap: var(--psc-espace-3);
    min-height: var(--psc-entete-hauteur);
    padding: var(--psc-espace-2) var(--psc-marge-entete);
    background: var(--psc-fond);
    color: var(--psc-texte);
    transition: background-color var(--psc-duree) var(--psc-courbe);
}

.psc-entete__logo {
    display: inline-flex;
    color: inherit;
}

.psc-entete__logo svg {
    width: 141px;
    height: 19px;
}

.psc-entete__signature {
    font-size: var(--psc-petit);
    line-height: var(--psc-petit-il);
}

.psc-entete__actions {
    display: flex;
    align-items: center;
    gap: var(--psc-espace-2);
    margin-left: auto;
}

@media (max-width: 991.98px) {
    .psc-entete__signature,
    .psc-entete__contact {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .psc-entete {
        gap: var(--psc-espace-1);
    }

    .psc-entete__actions {
        gap: var(--psc-espace-05);
    }

    .psc-entete .psc-bascule,
    .psc-entete .psc-burger {
        width: 46px;
        height: 46px;
    }
}

@media (max-width: 399.98px) {
    .psc-entete__logo svg {
        width: 110px;
        height: auto;
    }
}

/* Le panneau de menu s'ouvre sous l'en-tête */
.psc-entete .psc-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
}

/* Bascule ÉCO / ANIMS : interrupteur 32×18, libellé 11px en capitales */
.psc-bascule {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 51px;
    height: 51px;
    padding: 0;
    border: 0;
    border-radius: var(--psc-rayon-rond);
    background: transparent;
    color: inherit;
    font-family: var(--psc-police);
    font-size: var(--psc-mini);
    font-weight: var(--psc-graisse-forte);
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background-color var(--psc-duree) var(--psc-courbe),
        color var(--psc-duree) var(--psc-courbe);
}

.psc-bascule__rail {
    position: relative;
    width: 32px;
    height: 18px;
    border: var(--psc-bordure-bouton) solid currentColor;
    border-radius: var(--psc-rayon-pilule);
}

.psc-bascule__rail::after {
    content: '';
    position: absolute;
    top: 1.5px;
    left: 1.5px;
    width: 12px;
    height: 12px;
    border-radius: var(--psc-rayon-rond);
    background: currentColor;
    transition: transform var(--psc-duree) var(--psc-courbe);
}

.psc-bascule[aria-pressed='true'] {
    background: var(--psc-menthe);
    color: var(--psc-petrole);
}

.psc-bascule[aria-pressed='true'] .psc-bascule__rail {
    background: currentColor;
}

.psc-bascule[aria-pressed='true'] .psc-bascule__rail::after {
    background: var(--psc-menthe);
    transform: translateX(13px);
}

/* Bouton menu : disque 51px, trois barres, libellé MENU */
.psc-burger {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 51px;
    height: 51px;
    padding: 0;
    border: 0;
    border-radius: var(--psc-rayon-rond);
    background: var(--psc-texte);
    color: var(--psc-fond);
    font-family: var(--psc-police);
    font-size: 8px;
    font-weight: var(--psc-graisse-forte);
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background-color var(--psc-duree) var(--psc-courbe),
        color var(--psc-duree) var(--psc-courbe);
}

.psc-burger__barres {
    width: 22px;
    height: 13px;
    background: linear-gradient(currentColor 0 0) 0 0 / 100% 3px no-repeat,
        linear-gradient(currentColor 0 0) 0 5px / 100% 3px no-repeat,
        linear-gradient(currentColor 0 0) 0 10px / 100% 3px no-repeat;
}

.psc-burger:hover,
.psc-burger[aria-expanded='true'] {
    background: var(--psc-menthe);
    color: var(--psc-petrole);
}

.psc-burger[aria-expanded='true'] .psc-burger__barres {
    width: 20px;
    height: 20px;
    background: linear-gradient(45deg, transparent calc(50% - 1.5px), currentColor 0 calc(50% + 1.5px), transparent 0),
        linear-gradient(-45deg, transparent calc(50% - 1.5px), currentColor 0 calc(50% + 1.5px), transparent 0);
}

.psc-burger[aria-expanded='true'] .psc-burger__libelle {
    display: none;
}

/* ==========================================================================
   7. Menu [relevé] et navigation mobile [relevé]
   ========================================================================== */
.psc-menu {
    position: relative;
    overflow: hidden;
    padding: var(--psc-espace-4) var(--psc-marge-entete);
    border-block: var(--psc-bordure-menu) solid var(--psc-menthe);
    background: var(--psc-fond);
}

.psc-menu__liste {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

.psc-menu__liste a {
    display: inline-block;
    padding-block: var(--psc-espace-05);
    font-size: var(--psc-h4);
    font-weight: var(--psc-graisse-forte);
    line-height: var(--psc-h4-il);
    text-decoration: none;
}

.psc-menu__liste a:hover,
.psc-menu__liste a[aria-current='page'] {
    text-decoration: underline;
    text-decoration-color: var(--psc-souligne);
    text-decoration-thickness: 4px;
}

/* Grand « O » menthe qui déborde à droite */
.psc-menu__forme {
    position: absolute;
    right: -40px;
    bottom: -60px;
    width: 259px;
    height: auto;
    color: var(--psc-menthe);
}

.psc-nav-mobile {
    margin: 0;
    padding: 0;
    list-style: none;
}

.psc-nav-mobile a,
.psc-nav-mobile button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px var(--psc-espace-2);
    border: 0;
    border-bottom: 1px solid var(--psc-trait);
    background: none;
    color: inherit;
    font-family: inherit;
    font-size: var(--psc-h5);
    font-weight: var(--psc-graisse-forte);
    line-height: 30px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.psc-nav-mobile a::after,
.psc-nav-mobile button::after {
    content: '';
    width: 24px;
    height: 24px;
    background: var(--psc-puce);
    -webkit-mask: var(--psc-masque-chevron-24) center / contain no-repeat;
    mask: var(--psc-masque-chevron-24) center / contain no-repeat;
}

/* Ligne « retour » d'un sous-menu : chevron à gauche */
.psc-nav-mobile .psc-nav-mobile__retour {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: var(--psc-espace-1);
    font-weight: var(--psc-graisse);
}

.psc-nav-mobile .psc-nav-mobile__retour::after {
    transform: scaleX(-1);
}

/* ==========================================================================
   8. Fil d'Ariane [relevé] : 14/22, chevrons pixel 12px. Sur mobile, seul le
   lien « Retour » vers le parent reste.
   ========================================================================== */
.psc-ariane {
    padding-block: var(--psc-espace-2);
    border-top: 1px solid var(--psc-trait);
    font-size: var(--psc-petit);
    line-height: var(--psc-petit-il);
}

.psc-ariane ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--psc-espace-1) var(--psc-espace-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.psc-ariane li {
    display: inline-flex;
    align-items: center;
    gap: var(--psc-espace-2);
}

.psc-ariane li + li::before {
    content: '';
    width: 12px;
    height: 12px;
    background: currentColor;
    -webkit-mask: var(--psc-masque-chevron-12) center / contain no-repeat;
    mask: var(--psc-masque-chevron-12) center / contain no-repeat;
}

.psc-ariane__retour {
    display: none;
}

@media (max-width: 767.98px) {
    .psc-ariane ol {
        display: none;
    }

    .psc-ariane__retour {
        display: inline-flex;
        align-items: center;
        gap: var(--psc-espace-1);
    }

    .psc-ariane__retour::before {
        content: '';
        width: 12px;
        height: 12px;
        background: currentColor;
        transform: scaleX(-1);
        -webkit-mask: var(--psc-masque-chevron-12) center / contain no-repeat;
        mask: var(--psc-masque-chevron-12) center / contain no-repeat;
    }
}

/* ==========================================================================
   9. Héros [relevé] et pixel art [relevé]
   ========================================================================== */
.psc-heros {
    position: relative;
    overflow: hidden;
    padding-block: var(--psc-espace-12);
    text-align: center;
}

.psc-heros__titre {
    max-width: 960px;
    margin-inline: auto;
}

.psc-heros__accroche {
    max-width: 800px;
    margin: 0 auto var(--psc-espace-3);
    font-size: var(--psc-h5);
    font-weight: var(--psc-graisse-forte);
    line-height: var(--psc-h5-il);
}

.psc-heros__mention {
    margin: 0;
    font-size: var(--psc-petit);
    line-height: var(--psc-petit-il);
}

/* Le contenu passe devant les décors */
.psc-heros > .psc-conteneur {
    position: relative;
    z-index: 1;
}

/* Un dessin pixel : SVG en ligne, fill="currentColor", aria-hidden="true".
   La couleur vient de la classe de teinte, qui suit le thème. */
.psc-pixel {
    display: block;
    height: auto;
    pointer-events: none;
}

.psc-pixel--petrole {
    color: var(--psc-pixel-petrole);
}

.psc-pixel--jaune {
    color: var(--psc-pixel-jaune);
}

.psc-pixel--menthe {
    color: var(--psc-pixel-menthe);
}

/* Décors posés autour d'un héros : masqués sous 992px */
.psc-heros__decor {
    position: absolute;
    z-index: 0;
}

@media (max-width: 991.98px) {
    .psc-heros__decor {
        display: none;
    }
}

/* ==========================================================================
   10. Section suivante [relevé] : grand chevron pixel 64×39 qui invite à
   défiler. C'est un lien vers l'ancre de la section suivante.
   ========================================================================== */
.psc-suivant {
    display: flex;
    justify-content: center;
    width: max-content;
    margin: var(--psc-espace-4) auto 0;
    padding: var(--psc-espace-1);
    color: var(--psc-pixel-petrole);
}

.psc-suivant svg {
    width: 64px;
    height: 39px;
}

/* ==========================================================================
   11. En-tête de page [relevé] : bande jaune, sur-titre et titre centrés.
   Variante photo : image plein cadre voilée de pétrole, titre blanc.
   ========================================================================== */
.psc-entete-page {
    padding-block: var(--psc-espace-6);
    background: var(--psc-surface-jaune);
    color: var(--psc-sur-surface);
    text-align: center;
}

.psc-entete-page h1 {
    margin: 0;
    color: var(--psc-titre-accent);
}

.psc-entete-page--photo {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 480px;
    padding-block: var(--psc-espace-12);
    background: var(--psc-petrole);
    color: var(--psc-blanc);
}

.psc-entete-page--photo > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.psc-entete-page--photo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--psc-voile-photo);
}

.psc-entete-page--photo > :not(img) {
    position: relative;
    z-index: 2;
}

.psc-entete-page--photo h1 {
    color: var(--psc-blanc);
}

/* ==========================================================================
   12. Texte riche [relevé] : contenu saisi dans un éditeur (CMS, Markdown).
   Listes à puces en chevron pixel, listes numérotées à gros numéros menthe
   (menthe accessible sur clair : la menthe d'origine n'y fait que 1,43:1).
   ========================================================================== */
.psc-texte > * + h2,
.psc-texte > * + h3,
.psc-texte > * + h4 {
    margin-top: var(--psc-espace-6);
}

.psc-texte h2,
.psc-texte h3,
.psc-texte h4 {
    margin-bottom: var(--psc-espace-2);
}

.psc-texte ul,
.psc-liste {
    margin: 0 0 var(--psc-espace-3);
    padding: 0;
    list-style: none;
}

.psc-texte ul > li,
.psc-liste > li {
    position: relative;
    padding-left: 40px;
}

.psc-texte ul > li + li,
.psc-liste > li + li {
    margin-top: var(--psc-espace-1);
}

.psc-texte ul > li::before,
.psc-liste > li::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    width: 24px;
    height: 24px;
    background: var(--psc-puce);
    -webkit-mask: var(--psc-masque-chevron-24) center / contain no-repeat;
    mask: var(--psc-masque-chevron-24) center / contain no-repeat;
}

/* Numéros « 01 » de 64px. La largeur suit le contenu (la maquette
   fixe une boîte trop étroite, « 10 » y passerait à la ligne). */
.psc-texte ol,
.psc-liste-numeros {
    margin: 0 0 var(--psc-espace-3);
    padding: 0;
    list-style: none;
    counter-reset: psc-numero;
}

.psc-texte ol > li,
.psc-liste-numeros > li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: var(--psc-espace-3);
    counter-increment: psc-numero;
}

.psc-texte ol > li + li,
.psc-liste-numeros > li + li {
    margin-top: var(--psc-espace-3);
}

.psc-texte ol > li::before,
.psc-liste-numeros > li::before {
    content: counter(psc-numero, decimal-leading-zero);
    min-width: 1.3em;
    color: var(--psc-numero);
    font-size: var(--psc-numero-taille);
    font-weight: var(--psc-graisse-forte);
    line-height: var(--psc-numero-il);
    font-variant-numeric: tabular-nums;
}

.psc-texte ol > li > :first-child,
.psc-liste-numeros > li > :first-child {
    margin-top: 0.4em;
}

/* ==========================================================================
   13. Figure et légende [relevé] : image en angle droit, légende 14/22 avec
   barre menthe verticale de 5×50. La description longue est un <details>.
   ========================================================================== */
.psc-figure {
    margin: 0 0 var(--psc-espace-4);
}

.psc-figure img,
.psc-figure video {
    width: 100%;
    object-fit: cover;
}

.psc-figure--bandeau img {
    aspect-ratio: 1108 / 400;
}

.psc-figure figcaption {
    display: flex;
    gap: var(--psc-espace-3);
    max-width: 444px;
    margin-top: var(--psc-espace-2);
    font-size: var(--psc-petit);
    line-height: var(--psc-petit-il);
}

.psc-figure figcaption::before {
    content: '';
    flex: 0 0 var(--psc-barre-legende);
    height: 50px;
    background: var(--psc-menthe);
}

.psc-description summary {
    width: max-content;
    max-width: 100%;
    margin-top: var(--psc-espace-1);
    font-size: var(--psc-petit);
    line-height: var(--psc-petit-il);
    text-decoration: underline;
    cursor: pointer;
}

.psc-description[open] summary {
    margin-bottom: var(--psc-espace-1);
}

/* Galerie de visuels : un large puis deux côte à côte */
.psc-visuels {
    display: grid;
    gap: var(--psc-gouttiere);
}

@media (min-width: 768px) {
    .psc-visuels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .psc-visuels > :first-child {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   14. Image-texte [relevé] : photo bord à bord d'un côté, texte de l'autre.
   Variantes : inversée, photo ronde, grand anneau décoratif.
   ========================================================================== */
.psc-image-texte {
    position: relative;
    display: grid;
    overflow: hidden;
}

.psc-image-texte__media img,
.psc-image-texte__media video {
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
}

.psc-image-texte__texte {
    position: relative;
    z-index: 1;
    align-self: center;
    padding: var(--psc-espace-6) var(--psc-marge);
}

@media (min-width: 992px) {
    .psc-image-texte {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: 520px;
    }

    .psc-image-texte__texte {
        max-width: calc(var(--psc-conteneur) / 2 + var(--psc-espace-5));
        padding: var(--psc-espace-10) var(--psc-espace-5);
    }

    .psc-image-texte--inverse .psc-image-texte__media {
        order: 2;
    }

    .psc-image-texte--inverse .psc-image-texte__texte {
        justify-self: end;
    }
}

/* Photo ronde (480px bureau, 288px mobile), dans le conteneur */
.psc-image-texte--rond {
    align-items: center;
    gap: var(--psc-espace-4);
    max-width: calc(var(--psc-conteneur) + 2 * var(--psc-marge));
    margin-inline: auto;
    padding: var(--psc-section) var(--psc-marge);
    overflow: visible;
}

.psc-image-texte--rond .psc-image-texte__media img {
    width: 288px;
    height: 288px;
    min-height: 0;
    margin-inline: auto;
    border-radius: var(--psc-rayon-rond);
}

.psc-image-texte--rond .psc-image-texte__texte {
    padding: 0;
}

@media (min-width: 992px) {
    .psc-image-texte--rond .psc-image-texte__media img {
        width: 480px;
        height: 480px;
    }
}

/* Grand « O » jaune en bas à droite (masqué en mode ÉCO) */
.psc-image-texte__anneau {
    position: absolute;
    right: -120px;
    bottom: -200px;
    z-index: 0;
    width: 525px;
    max-width: none;
    height: auto;
    color: var(--psc-anneau-deco);
    pointer-events: none;
}

/* ==========================================================================
   15. Chiffres clés [relevé] : cadre menthe de 10px, constant dans les deux
   thèmes. Variante sans cadre, variante compacte pour un tableau de bord.
   ========================================================================== */
.psc-chiffre {
    padding: var(--psc-espace-4);
    border: var(--psc-bordure-cadre) solid var(--psc-menthe);
}

.psc-chiffre__valeur {
    display: block;
    margin-bottom: var(--psc-espace-1);
    font-size: var(--psc-h2);
    font-weight: var(--psc-graisse-forte);
    line-height: var(--psc-h2-il);
    font-variant-numeric: tabular-nums;
}

.psc-chiffre__libelle {
    margin: 0;
}

.psc-chiffre--sans-cadre {
    padding: 0;
    border: 0;
}

/* [dérivé] Tableau de bord : cadre de 5px, valeur en h3 gras */
.psc-chiffre--compact {
    padding: var(--psc-espace-3);
    border-width: var(--psc-barre-legende);
}

.psc-chiffre--compact .psc-chiffre__valeur {
    font-size: var(--psc-h3);
    line-height: var(--psc-h3-il);
}

.psc-chiffre__evolution {
    display: block;
    margin-top: var(--psc-espace-1);
    color: var(--psc-texte-doux);
    font-size: var(--psc-petit);
    line-height: var(--psc-petit-il);
}

/* ==========================================================================
   16. Cartes [relevé], carrefour [relevé], liste de cas clients [relevé]
   Aucune ombre, aucun arrondi : la carte est un empilement image + texte.
   ========================================================================== */
.psc-carte {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--psc-espace-2);
}

.psc-carte img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.psc-carte__titre {
    margin: 0;
    font-size: var(--psc-h4);
    line-height: var(--psc-h4-il);
}

.psc-carte__titre a {
    text-decoration: none;
}

.psc-carte:hover .psc-carte__titre a {
    text-decoration: underline;
    text-decoration-color: var(--psc-souligne);
    text-decoration-thickness: 4px;
}

.psc-carte p {
    margin: 0;
}

/* [dérivé] Carte d'outil interne : fond retrait, padding, sans image */
.psc-carte--encart {
    padding: var(--psc-espace-4);
    background: var(--psc-fond-retrait);
}

/* Carrefour : une carte par cas, chacune sur un fond de la palette.
   Ces fonds sont constants : ils ne se replient pas en mode ÉCO. */
.psc-carrefour__item {
    position: relative;
    padding-block: var(--psc-espace-7);
    background: var(--psc-fond);
}

.psc-carrefour__item--menthe {
    background: var(--psc-menthe);
    color: var(--psc-petrole);
}

.psc-carrefour__item--jaune {
    background: var(--psc-jaune);
    color: var(--psc-petrole);
}

.psc-carrefour__item--violet {
    background: var(--psc-violet);
    color: var(--psc-blanc);
}

.psc-carrefour__item--petrole {
    background: var(--psc-petrole);
    color: var(--psc-blanc);
}

.psc-carrefour__item img {
    width: 100%;
    aspect-ratio: 1248 / 560;
    object-fit: cover;
}

.psc-carrefour__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--psc-espace-1) var(--psc-espace-4);
    margin-top: var(--psc-espace-3);
}

.psc-carrefour__meta h2 {
    margin: 0;
    font-size: var(--psc-h4);
    line-height: var(--psc-h4-il);
}

.psc-carrefour__meta h2 a {
    text-decoration: none;
}

.psc-carrefour__item:hover h2 a {
    text-decoration: underline;
}

.psc-carrefour__meta p {
    margin: 0;
    font-size: var(--psc-petit);
    line-height: var(--psc-petit-il);
}

/* Liste de cas : nom, métiers, flèche pixel ; filet pétrole entre les lignes */
.psc-liste-cas {
    margin: 0;
    padding: 0;
    list-style: none;
}

.psc-liste-cas a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--psc-espace-1) var(--psc-espace-4);
    padding: var(--psc-espace-2);
    border-bottom: 1px solid var(--psc-trait-fort);
    text-decoration: none;
}

.psc-liste-cas__nom {
    font-size: var(--psc-h4);
    font-weight: var(--psc-graisse-forte);
    line-height: var(--psc-h4-il);
}

.psc-liste-cas a:hover .psc-liste-cas__nom {
    text-decoration: underline;
}

@media (min-width: 768px) {
    .psc-liste-cas a {
        grid-template-columns: minmax(0, 615fr) minmax(0, 344fr) 19px;
    }

    .psc-liste-cas a::after {
        content: '';
        width: 19px;
        height: 30px;
        background: var(--psc-puce);
        -webkit-mask: var(--psc-masque-fleche-30) center / contain no-repeat;
        mask: var(--psc-masque-fleche-30) center / contain no-repeat;
    }
}

@media (max-width: 767.98px) {
    .psc-liste-cas a {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   17. Bandeau défilant [relevé] : noms de clients sur fond pétrole, lignes
   qui glissent en sens alterné. Le texte est dupliqué pour boucler ; la
   copie porte aria-hidden="true".
   ========================================================================== */
.psc-defilant {
    overflow: hidden;
    padding-block: var(--psc-espace-6);
}

.psc-defilant__ligne {
    display: flex;
    width: max-content;
    animation: psc-defile 60s linear infinite;
}

.psc-defilant__ligne:nth-child(even) {
    animation-direction: reverse;
}

.psc-defilant__ligne ul {
    display: flex;
    gap: var(--psc-espace-4);
    margin: 0;
    padding: 0 var(--psc-espace-4) 0 0;
    list-style: none;
}

.psc-defilant__ligne li {
    font-size: var(--psc-h4);
    line-height: 1.6;
    white-space: nowrap;
}

.psc-defilant__ligne a {
    text-decoration: none;
}

.psc-defilant__ligne a:hover {
    color: var(--psc-menthe);
    text-decoration: underline;
    text-decoration-color: currentColor;
}

/* Quand le mouvement est coupé, les lignes passent à la ligne. */
.psc-defilant--fixe .psc-defilant__ligne {
    width: auto;
    animation: none;
}

.psc-defilant--fixe .psc-defilant__ligne ul {
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
}

.psc-defilant--fixe [aria-hidden='true'] {
    display: none;
}

/* ==========================================================================
   18. Citation [relevé] : bande jaune, texte en h3 maigre
   ========================================================================== */
.psc-citation {
    margin: 0;
}

.psc-citation blockquote {
    margin: 0 0 var(--psc-espace-3);
    font-size: var(--psc-h3);
    line-height: var(--psc-h3-il);
}

.psc-citation figcaption {
    font-weight: var(--psc-graisse-forte);
}

/* ==========================================================================
   19. Appel à l'action [relevé] : « Contact » (jaune) et « Télécharger »
   (menthe). Titre, phrase, un ou deux boutons centrés.
   ========================================================================== */
.psc-cta {
    text-align: center;
}

.psc-cta h2 {
    margin-bottom: var(--psc-espace-2);
}

.psc-cta p {
    max-width: 640px;
    margin: 0 auto var(--psc-espace-4);
}

.psc-cta .psc-rangee {
    justify-content: center;
}

@media (max-width: 575.98px) {
    .psc-cta .psc-bouton {
        width: 100%;
    }
}

/* ==========================================================================
   20. Vidéo [relevé] et modale [relevé pour la popin vidéo, dérivé pour le
   dialogue]. Le bouton lecture est le seul élément ombré de la charte.
   ========================================================================== */
.psc-video {
    position: relative;
    margin: 0;
}

.psc-video img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.psc-video--rond img {
    aspect-ratio: 1;
    border-radius: var(--psc-rayon-rond);
}

.psc-lecture {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    padding: 0;
    border: 0;
    border-radius: var(--psc-rayon-rond);
    background: none;
    color: var(--psc-blanc);
    filter: drop-shadow(0 4px 10px rgb(0 0 0 / 0.25));
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: color var(--psc-duree) var(--psc-courbe);
}

.psc-lecture svg {
    width: 100%;
    height: 100%;
}

.psc-lecture:hover {
    color: var(--psc-menthe);
}

@media (max-width: 767.98px) {
    .psc-lecture {
        width: 64px;
        height: 64px;
    }
}

/* Modale : <dialog>, voile blanc à 90 % (pétrole en ÉCO) */
.psc-modale {
    width: min(100% - 2 * var(--psc-marge), 1000px);
    max-height: calc(100% - 2 * var(--psc-marge));
    padding: var(--psc-espace-7) var(--psc-espace-4) var(--psc-espace-4);
    border: 0;
    background: var(--psc-fond);
    color: var(--psc-texte);
}

.psc-modale::backdrop {
    background: var(--psc-voile);
}

.psc-modale--etroite {
    width: min(100% - 2 * var(--psc-marge), 560px);
}

.psc-modale__fermer {
    position: absolute;
    top: var(--psc-espace-1);
    right: var(--psc-espace-1);
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 0;
    border-radius: var(--psc-rayon-rond);
    background: var(--psc-menthe);
    color: var(--psc-petrole);
    cursor: pointer;
}

.psc-modale__fermer svg {
    width: 20px;
    height: 20px;
}

.psc-modale__fermer:hover {
    background: var(--psc-jaune);
}

.psc-modale__pied {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--psc-espace-2);
    margin-top: var(--psc-espace-4);
}

/* ==========================================================================
   21. Tableau [relevé] : en-tête 14/24 gras sur filet de 4px, cellules 14/22,
   lignes alternées, aucune bordure verticale. Sur mobile, défilement
   horizontal dans .psc-tableau-cadre [dérivé].
   ========================================================================== */
.psc-tableau-cadre {
    overflow-x: auto;
    margin-bottom: var(--psc-espace-3);
}

.psc-tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--psc-petit);
    line-height: var(--psc-petit-il);
    font-variant-numeric: tabular-nums;
}

.psc-tableau caption {
    padding-bottom: var(--psc-espace-2);
    font-size: var(--psc-h5);
    font-weight: var(--psc-graisse-forte);
    line-height: var(--psc-h5-il);
    text-align: left;
}

.psc-tableau th,
.psc-tableau td {
    padding: var(--psc-espace-2);
    text-align: left;
    vertical-align: top;
}

.psc-tableau thead th {
    border-bottom: var(--psc-bordure-tableau) solid var(--psc-trait-fort);
    line-height: var(--psc-surtitre-il);
    white-space: nowrap;
}

.psc-tableau tbody tr:nth-child(odd) {
    background: var(--psc-ligne-alternee);
}

.psc-tableau tbody tr:nth-child(even) {
    background: var(--psc-fond);
}

.psc-tableau .psc-tableau__nombre {
    text-align: right;
}

/* [dérivé] Tri : bouton dans l'en-tête, état dans aria-sort */
.psc-tableau th button {
    display: inline-flex;
    align-items: center;
    gap: var(--psc-espace-05);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.psc-tableau th[aria-sort] button::after {
    content: '';
    width: 12px;
    height: 12px;
    background: currentColor;
    -webkit-mask: var(--psc-masque-chevron-bas-24) center / contain no-repeat;
    mask: var(--psc-masque-chevron-bas-24) center / contain no-repeat;
}

.psc-tableau th[aria-sort='ascending'] button::after {
    transform: scaleY(-1);
}

/* ==========================================================================
   22. Pagination [relevé, corrigée] : précédent / suivant en disques de 50px,
   pages en cases de 32px. La page courante est en menthe (la maquette la
   met en violet hors charte), cerclée de menthe accessible. Sur mobile : « Page 1 sur 12 ».
   ========================================================================== */
.psc-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--psc-espace-3);
    font-size: var(--psc-petit);
    line-height: var(--psc-petit-il);
}

.psc-pagination ol {
    display: flex;
    gap: var(--psc-espace-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.psc-pagination ol a,
.psc-pagination ol span {
    display: grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding-inline: var(--psc-espace-05);
    border-radius: var(--psc-rayon-petit);
    text-decoration: none;
}

.psc-pagination ol a:hover {
    background: var(--psc-fond-retrait);
}

.psc-pagination ol [aria-current='page'] {
    box-shadow: inset 0 0 0 1.5px var(--psc-repere); /* la menthe seule fait 1,43:1 sur blanc */
    background: var(--psc-menthe);
    color: var(--psc-petrole);
    font-weight: var(--psc-graisse-forte);
}

.psc-pagination__fleche {
    display: inline-flex;
    align-items: center;
    gap: var(--psc-espace-2);
    font-weight: var(--psc-graisse-forte);
}

.psc-pagination__fleche .psc-pagination__disque {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: var(--psc-rayon-rond);
    background: var(--psc-bouton-fond);
    color: var(--psc-bouton-texte);
    border: var(--psc-bordure-bouton) solid var(--psc-bouton-bordure);
    transition: background-color var(--psc-duree) var(--psc-courbe);
}

.psc-pagination__fleche:hover .psc-pagination__disque {
    border-color: var(--psc-menthe);
    background: var(--psc-menthe);
    color: var(--psc-petrole);
}

.psc-pagination__fleche[aria-disabled='true'] {
    color: var(--psc-texte-doux);
    text-decoration: none;
    pointer-events: none;
}

.psc-pagination__fleche[aria-disabled='true'] .psc-pagination__disque {
    border: var(--psc-bordure-bouton) dashed var(--psc-texte-doux);
    background: var(--psc-fond-retrait);
    color: var(--psc-texte-doux);
}

.psc-pagination__resume {
    display: none;
}

@media (max-width: 767.98px) {
    .psc-pagination ol,
    .psc-pagination__fleche .psc-pagination__texte {
        display: none;
    }

    .psc-pagination__resume {
        display: block;
    }
}

/* ==========================================================================
   23. Formulaires [relevé pour l'aspect, dérivé pour les états]
   Champs gris en pilule. La maquette les dessine sans bordure (1,17:1 sur
   blanc, sous le seuil de 3:1 de WCAG 1.4.11) : la charte leur donne un bord
   gris-bleu (--psc-champ-bordure). Case cochée : fond pétrole, coche menthe.
   ========================================================================== */
.psc-champ {
    display: flex;
    flex-direction: column;
    gap: var(--psc-espace-1);
    margin-bottom: var(--psc-espace-3);
}

.psc-champ__libelle {
    font-size: var(--psc-bouton);
    font-weight: var(--psc-graisse-forte);
    line-height: var(--psc-bouton-il);
}

.psc-champ__obligatoire {
    color: var(--psc-erreur);
}

.psc-champ__aide {
    margin: 0;
    color: var(--psc-texte-doux);
    font-size: var(--psc-petit);
    line-height: var(--psc-petit-il);
}

.psc-champ__erreur {
    display: flex;
    align-items: center;
    gap: var(--psc-espace-1);
    margin: 0;
    color: var(--psc-erreur);
    font-size: var(--psc-petit);
    font-weight: var(--psc-graisse-forte);
    line-height: var(--psc-petit-il);
}

.psc-champ__erreur::before {
    content: '!';
    display: grid;
    flex: 0 0 18px;
    place-items: center;
    height: 18px;
    border-radius: var(--psc-rayon-rond);
    background: var(--psc-erreur);
    color: var(--psc-fond);
    font-size: 12px;
    line-height: 1;
}

.psc-saisie {
    display: block;
    width: 100%;
    min-height: 60px;
    padding: calc(var(--psc-espace-2) - 1.5px) calc(var(--psc-espace-3) - 1.5px);
    border: 1.5px solid var(--psc-champ-bordure);
    border-radius: var(--psc-rayon-champ);
    background: var(--psc-champ-fond);
    color: var(--psc-champ-texte);
    font-family: var(--psc-police);
    font-size: var(--psc-corps);
    line-height: var(--psc-corps-il);
    appearance: none;
    transition: border-color var(--psc-duree) var(--psc-courbe);
}

.psc-saisie::placeholder {
    color: var(--psc-texte-doux);
    opacity: 1;
}

.psc-saisie:hover {
    border-color: var(--psc-texte);
}

.psc-saisie:focus-visible {
    border-color: var(--psc-texte);
    outline-offset: 2px;
}

.psc-saisie[aria-invalid='true'] {
    border-color: var(--psc-erreur);
}

.psc-saisie:disabled {
    border: 1.5px dashed var(--psc-texte-doux);
    background: transparent;
    color: var(--psc-texte-doux);
    cursor: not-allowed;
}

/* Obsolète depuis la 1.1.0 : le champ est bordé par défaut. Classe gardée
   sans effet pour ne pas casser les projets ; retrait prévu en 2.0.0. */
.psc-saisie--borde {
    border-color: var(--psc-champ-bordure);
}

textarea.psc-saisie {
    min-height: 248px;
    resize: vertical;
}

select.psc-saisie {
    padding-right: 56px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='18' viewBox='0 0 8 17.54'%3E%3Cpath fill='%2300785A' d='M1.22 7h5.56c.94 0 1.52-.97 1.06-1.75L5.06.59a1.24 1.24 0 0 0-2.12 0L.16 5.25C-.3 6.03.28 7 1.22 7Zm5.56 3.54H1.22c-.94 0-1.52.97-1.06 1.75l2.78 4.66c.47.79 1.65.79 2.12 0l2.78-4.66c.46-.78-.12-1.75-1.06-1.75Z'/%3E%3C/svg%3E");
    background-position: right 24px center;
    background-repeat: no-repeat;
    cursor: pointer;
}

/* Triangles en menthe accessible sur clair, en menthe sur pétrole */
:is([data-theme='dark'], [data-bs-theme='dark']) select.psc-saisie {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='18' viewBox='0 0 8 17.54'%3E%3Cpath fill='%2300F5B5' d='M1.22 7h5.56c.94 0 1.52-.97 1.06-1.75L5.06.59a1.24 1.24 0 0 0-2.12 0L.16 5.25C-.3 6.03.28 7 1.22 7Zm5.56 3.54H1.22c-.94 0-1.52.97-1.06 1.75l2.78 4.66c.47.79 1.65.79 2.12 0l2.78-4.66c.46-.78-.12-1.75-1.06-1.75Z'/%3E%3C/svg%3E");
}

/* Champ avec pictogramme à gauche (recherche, courriel) */
.psc-saisie-icone {
    position: relative;
}

.psc-saisie-icone > svg {
    position: absolute;
    top: 50%;
    left: 24px;
    width: 24px;
    height: 24px;
    color: var(--psc-champ-texte);
    transform: translateY(-50%);
    pointer-events: none;
}

.psc-saisie-icone .psc-saisie {
    padding-left: 62px;
}

/* Cases à cocher et boutons radio : 30px et 28px, fond gris bordé ; cochés,
   fond pétrole et coche menthe (10,44:1) */
.psc-choix {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: fit-content;
    cursor: pointer;
}

.psc-choix + .psc-choix {
    margin-top: var(--psc-espace-2);
}

.psc-choix input {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin: -1px 0 0;
    border: 1.5px solid var(--psc-champ-bordure);
    background: var(--psc-champ-fond) center / 22px no-repeat;
    appearance: none;
    cursor: pointer;
}

.psc-choix input[type='radio'] {
    width: 28px;
    height: 28px;
    border-radius: var(--psc-rayon-rond);
}

.psc-choix input:checked {
    border-color: var(--psc-champ-coche-fond);
    background-color: var(--psc-champ-coche-fond);
}

.psc-choix input[type='checkbox']:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.6 22.6'%3E%3Cpath fill='%2300F5B5' d='M16.69 4.02c-.21.04-.41.16-.54.36l-6.8 10.03-3.15-3.13a.82.82 0 0 0-1.17 0l-1.2 1.2a.85.85 0 0 0 0 1.2l4.81 4.8c.27.27.71.46 1.09.46.38 0 .76-.24 1-.6l8.19-12.07a.8.8 0 0 0-.22-1.17l-1.39-.95a.86.86 0 0 0-.62-.13Z'/%3E%3C/svg%3E");
}

.psc-choix input[type='radio']:checked {
    background-image: radial-gradient(circle, var(--psc-champ-coche) 7.5px, transparent 8px);
}

.psc-choix input:hover {
    border-color: var(--psc-texte);
}

.psc-choix input:focus-visible {
    border-color: var(--psc-texte);
}

.psc-choix input[aria-invalid='true'] {
    border-color: var(--psc-erreur);
}

.psc-choix input:disabled {
    border-style: dashed;
    border-color: var(--psc-texte-doux);
    background-color: transparent;
    cursor: not-allowed;
}

.psc-choix:has(input:disabled) {
    color: var(--psc-texte-doux);
    cursor: not-allowed;
}

/* [dérivé] Interrupteur de formulaire : <input type="checkbox" role="switch"> */
.psc-interrupteur {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.psc-interrupteur input {
    position: relative;
    flex: 0 0 auto;
    width: 48px;
    height: 27px;
    margin: 0;
    border: 2px solid var(--psc-texte);
    border-radius: var(--psc-rayon-pilule);
    background: transparent;
    appearance: none;
    cursor: pointer;
    transition: background-color var(--psc-duree) var(--psc-courbe);
}

.psc-interrupteur input::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: var(--psc-rayon-rond);
    background: var(--psc-texte);
    transition: transform var(--psc-duree) var(--psc-courbe);
}

.psc-interrupteur input:checked {
    background: var(--psc-texte);
}

.psc-interrupteur input:checked::after {
    background: var(--psc-menthe);
    transform: translateX(21px);
}

.psc-groupe {
    min-width: 0;
    margin: 0 0 var(--psc-espace-3);
    padding: 0;
    border: 0;
}

.psc-groupe legend {
    margin-bottom: var(--psc-espace-2);
    padding: 0;
    font-size: var(--psc-bouton);
    font-weight: var(--psc-graisse-forte);
    line-height: var(--psc-bouton-il);
}

/* ==========================================================================
   24. Pied de page [relevé] : bande jaune (pétrole en ÉCO), bulle pixel,
   adresses, réseaux en carrés, liens légaux ; barre basse pétrole avec les
   scores d'écoconception et d'accessibilité.
   ========================================================================== */
.psc-pied {
    background: var(--psc-surface-jaune);
    color: var(--psc-sur-surface);
}

.psc-pied__haut {
    display: grid;
    justify-items: center;
    gap: var(--psc-espace-5);
    padding-block: var(--psc-espace-10);
    text-align: center;
}

.psc-pied__adresses {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--psc-espace-4) var(--psc-espace-8);
}

.psc-pied__bulle {
    width: 104px;
    height: auto;
    color: var(--psc-puce);
}

.psc-pied address {
    font-style: normal;
}

.psc-pied address h2 {
    margin: 0 0 var(--psc-espace-1);
    color: var(--psc-titre-accent);
    font-size: var(--psc-h4);
    line-height: var(--psc-h4-il);
}

.psc-pied address a {
    font-weight: var(--psc-graisse-forte);
}

.psc-pied__reseaux {
    display: flex;
    align-items: center;
    gap: var(--psc-espace-1);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--psc-petit);
}

.psc-pied__reseaux li:first-child {
    margin-right: var(--psc-espace-3);
}

.psc-reseau {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: var(--psc-reseau-fond);
    color: var(--psc-reseau-glyphe);
    transition:
        background-color var(--psc-duree) var(--psc-courbe),
        color var(--psc-duree) var(--psc-courbe);
}

.psc-reseau svg {
    width: 28px;
    height: 28px;
}

.psc-reseau:hover {
    background: var(--psc-menthe);
    color: var(--psc-petrole);
}

.psc-pied__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--psc-espace-1) var(--psc-espace-4);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--psc-petit);
    line-height: var(--psc-petit-il);
}

.psc-pied__barre {
    padding-block: var(--psc-espace-3);
    background: var(--psc-petrole);
    color: var(--psc-blanc);
    font-size: var(--psc-petit);
    line-height: var(--psc-petit-il);
}

.psc-pied__barre .psc-conteneur {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--psc-espace-2) var(--psc-espace-5);
}

.psc-score {
    display: inline-flex;
    align-items: center;
    gap: var(--psc-espace-2);
}

.psc-score__valeur {
    font-size: var(--psc-h2);
    font-weight: var(--psc-graisse-forte);
    line-height: 1;
}

.psc-score--eco .psc-score__valeur {
    color: var(--psc-menthe);
}

.psc-score--a11y .psc-score__valeur {
    color: var(--psc-jaune);
}

:is([data-theme='dark'], [data-bs-theme='dark']) .psc-score--a11y .psc-score__valeur {
    color: var(--psc-blanc);
}

/* ==========================================================================
   25. Alertes et toasts [dérivé] : encart gris avec la barre verticale de 5px
   des légendes, dans la couleur de l'état. Le mot (Succès, Erreur…) est
   toujours écrit : la couleur seule ne suffit pas.
   ========================================================================== */
.psc-alerte {
    display: flex;
    align-items: flex-start;
    gap: var(--psc-espace-2);
    margin-bottom: var(--psc-espace-3);
    padding: var(--psc-espace-2) var(--psc-espace-3);
    border-left: var(--psc-barre-legende) solid var(--psc-info);
    background: var(--psc-fond-retrait);
}

.psc-alerte > svg {
    width: 24px;
    height: 24px;
    margin-top: 2px;
}

.psc-alerte__titre {
    display: block;
    font-weight: var(--psc-graisse-forte);
}

.psc-alerte p {
    margin: 0;
}

.psc-alerte--succes {
    border-left-color: var(--psc-succes);
}

.psc-alerte--alerte {
    border-left-color: var(--psc-alerte);
}

.psc-alerte--erreur {
    border-left-color: var(--psc-erreur);
}

.psc-alerte--erreur .psc-alerte__titre {
    color: var(--psc-erreur);
}

.psc-toasts {
    position: fixed;
    right: var(--psc-marge);
    bottom: var(--psc-marge);
    z-index: var(--psc-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--psc-espace-1);
    max-width: min(420px, 100% - 2 * var(--psc-marge));
}

.psc-toast {
    display: flex;
    align-items: center;
    gap: var(--psc-espace-2);
    padding: var(--psc-espace-2) var(--psc-espace-3);
    border-left: var(--psc-barre-legende) solid var(--psc-menthe);
    background: var(--psc-petrole);
    color: var(--psc-blanc);
    box-shadow: var(--psc-ombre-flottant);
    font-size: var(--psc-bouton);
    line-height: var(--psc-bouton-il);
    animation: psc-apparait var(--psc-duree) var(--psc-courbe);
}

.psc-toast p {
    margin: 0;
}

.psc-toast button {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: var(--psc-graisse-forte);
    text-decoration: underline;
    cursor: pointer;
}

:is([data-theme='dark'], [data-bs-theme='dark']) .psc-toast {
    background: var(--psc-fond-retrait);
}

/* ==========================================================================
   26. Onglets et accordéon [dérivé]
   Onglets : filet pétrole de 4px sous l'onglet actif, comme l'en-tête de
   tableau. Accordéon : lignes de la liste de cas, chevron pixel.
   ========================================================================== */
.psc-onglets {
    display: flex;
    gap: var(--psc-espace-4);
    overflow-x: auto;
    margin-bottom: var(--psc-espace-4);
    border-bottom: 1px solid var(--psc-trait);
}

.psc-onglets [role='tab'] {
    flex: 0 0 auto;
    padding: var(--psc-espace-1) 0 calc(var(--psc-espace-1) + 3px);
    border: 0;
    border-bottom: var(--psc-bordure-tableau) solid transparent;
    margin-bottom: -1px;
    background: none;
    color: inherit;
    font-family: inherit;
    font-size: var(--psc-h5);
    line-height: var(--psc-h5-il);
    cursor: pointer;
}

.psc-onglets [role='tab']:hover {
    border-bottom-color: var(--psc-trait);
}

.psc-onglets [role='tab'][aria-selected='true'] {
    border-bottom-color: var(--psc-trait-fort);
    font-weight: var(--psc-graisse-forte);
}

.psc-accordeon {
    border-bottom: 1px solid var(--psc-trait-fort);
}

.psc-accordeon summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--psc-espace-2);
    padding: var(--psc-espace-2);
    font-size: var(--psc-h4);
    font-weight: var(--psc-graisse-forte);
    line-height: var(--psc-h4-il);
    list-style: none;
    cursor: pointer;
}

.psc-accordeon summary::-webkit-details-marker {
    display: none;
}

.psc-accordeon summary::after {
    content: '';
    flex: 0 0 24px;
    height: 24px;
    background: var(--psc-puce);
    -webkit-mask: var(--psc-masque-chevron-bas-24) center / contain no-repeat;
    mask: var(--psc-masque-chevron-bas-24) center / contain no-repeat;
}

.psc-accordeon[open] summary::after {
    transform: scaleY(-1);
}

.psc-accordeon__contenu {
    padding: 0 var(--psc-espace-2) var(--psc-espace-3);
}

/* ==========================================================================
   27. Progression et chargement
   ========================================================================== */

/* [dérivé] Barre de progression en blocs pixel : <progress> natif */
.psc-progression {
    display: block;
    width: 100%;
    height: 16px;
    border: 0;
    background: var(--psc-fond-retrait);
    appearance: none;
}

.psc-progression::-webkit-progress-bar {
    background: var(--psc-fond-retrait);
}

.psc-progression::-webkit-progress-value {
    background: repeating-linear-gradient(90deg, var(--psc-puce) 0 12px, transparent 12px 16px);
}

.psc-progression::-moz-progress-bar {
    background: repeating-linear-gradient(90deg, var(--psc-puce) 0 12px, transparent 12px 16px);
}

/* [dérivé] Trois points pixel qui clignotent, comme la bulle du pied de page */
.psc-points {
    display: inline-flex;
    gap: 6px;
    color: var(--psc-puce);
}

.psc-points::before,
.psc-points::after,
.psc-points span {
    content: '';
    width: 8px;
    height: 8px;
    background: currentColor;
    animation: psc-clignote 1.2s steps(1) infinite;
}

.psc-points span {
    animation-delay: 0.2s;
}

.psc-points::after {
    animation-delay: 0.4s;
}

/* [relevé] Écran de chargement : symbole du logo en dégradé */
.psc-chargement {
    position: fixed;
    inset: 0;
    z-index: var(--psc-z-chargement);
    display: grid;
    place-items: center;
    background: var(--psc-fond);
}

.psc-chargement svg {
    width: 120px;
    height: auto;
    animation: psc-battement 1.2s steps(1) infinite;
}

/* ==========================================================================
   28. État vide [dérivé] : un dessin pixel, un titre, une phrase, une action
   ========================================================================== */
.psc-vide {
    display: grid;
    justify-items: center;
    gap: var(--psc-espace-2);
    padding: var(--psc-espace-8) var(--psc-espace-3);
    text-align: center;
}

.psc-vide .psc-pixel {
    width: 80px;
    margin-bottom: var(--psc-espace-1);
}

.psc-vide h2,
.psc-vide h3 {
    margin: 0;
    font-size: var(--psc-h4);
    font-weight: var(--psc-graisse-forte);
    line-height: var(--psc-h4-il);
}

.psc-vide p {
    max-width: 480px;
    margin: 0;
}

/* ==========================================================================
   29. Interface d'outil interne [dérivé] : barre du haut, navigation
   latérale, zone de travail. Mêmes jetons, mêmes blocs ; pas de pixel art
   décoratif dans l'écran de travail, seulement dans les états vides.
   ========================================================================== */
.psc-app {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
}

.psc-app__corps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
    .psc-app__corps {
        grid-template-columns: 264px minmax(0, 1fr);
    }
}

.psc-app__nav {
    padding: var(--psc-espace-3) 0;
    border-right: 1px solid var(--psc-trait);
}

.psc-app__nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.psc-app__nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px var(--psc-espace-3);
    border-left: var(--psc-barre-legende) solid transparent;
    font-size: var(--psc-bouton);
    line-height: var(--psc-bouton-il);
    text-decoration: none;
}

.psc-app__nav a svg {
    width: 24px;
    height: 24px;
}

.psc-app__nav a:hover {
    background: var(--psc-fond-retrait);
}

.psc-app__nav a[aria-current='page'] {
    border-left-color: var(--psc-repere);
    background: var(--psc-fond-retrait);
    font-weight: var(--psc-graisse-forte);
}

.psc-app__nav-titre {
    display: block;
    margin: var(--psc-espace-3) var(--psc-espace-3) var(--psc-espace-1);
    color: var(--psc-texte-doux);
    font-size: var(--psc-petit);
    font-weight: var(--psc-graisse-forte);
    line-height: var(--psc-petit-il);
}

@media (max-width: 991.98px) {
    .psc-app__nav {
        padding: 0;
        border-right: 0;
        border-bottom: 1px solid var(--psc-trait);
    }

    .psc-app__nav ul {
        display: flex;
        overflow-x: auto;
    }

    .psc-app__nav a {
        border-left: 0;
        border-bottom: var(--psc-bordure-tableau) solid transparent;
        white-space: nowrap;
    }

    .psc-app__nav a[aria-current='page'] {
        border-bottom-color: var(--psc-repere);
    }

    .psc-app__nav-titre {
        display: none;
    }
}

.psc-app__principal {
    min-width: 0;
    padding: var(--psc-espace-5) var(--psc-marge-entete);
}

/* En-tête de l'écran : titre et actions sur la même ligne */
.psc-app__titre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--psc-espace-2);
    margin-bottom: var(--psc-espace-5);
}

.psc-app__titre h1 {
    margin: 0;
    font-size: var(--psc-h2);
    line-height: var(--psc-h2-il);
}

/* Nom de l'outil à côté du logo, séparé par un filet */
.psc-entete__outil {
    padding-left: var(--psc-espace-3);
    border-left: 1px solid var(--psc-trait);
    font-weight: var(--psc-graisse-forte);
}

/* Barre d'outils au-dessus d'un tableau : recherche, filtres, action */
.psc-barre-outils {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--psc-espace-2);
    margin-bottom: var(--psc-espace-3);
}

.psc-barre-outils .psc-saisie-icone {
    flex: 1 1 280px;
}

.psc-barre-outils .psc-saisie {
    min-height: 44px;
    padding-block: calc(var(--psc-espace-1) - 1.5px);
}

/* Liste clé / valeur (fiche d'un objet) */
.psc-fiche {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
}

.psc-fiche > div {
    display: grid;
    gap: var(--psc-espace-05) var(--psc-espace-3);
    padding-block: 12px;
    border-bottom: 1px solid var(--psc-trait);
}

@media (min-width: 768px) {
    .psc-fiche > div {
        grid-template-columns: 220px minmax(0, 1fr);
    }
}

.psc-fiche dt {
    font-weight: var(--psc-graisse-forte);
}

.psc-fiche dd {
    margin: 0;
}

/* ==========================================================================
   30. Mouvement
   Interface : transitions de .3s ease-out (couleurs, bascules).
   Pixel art : toujours en steps(n), jamais de courbe lisse.
   Toute animation (classe .psc-anime ou bloc animé) est coupée par trois
   gardes : prefers-reduced-motion, data-animations="non" et le mode ÉCO.
   ========================================================================== */
@keyframes psc-battement {
    0%,
    20%,
    40%,
    60%,
    100% {
        transform: scale(1);
    }

    10%,
    30%,
    50% {
        transform: scale(1.1);
    }

    25%,
    45% {
        transform: scale(0.95);
    }
}

@keyframes psc-clignote {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@keyframes psc-traverse {
    from {
        transform: translateX(-10vw);
    }

    to {
        transform: translateX(117vw);
    }
}

@keyframes psc-sautille {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

@keyframes psc-defile {
    to {
        transform: translateX(-50%);
    }
}

@keyframes psc-apparait {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

.psc-anime--battement {
    animation: psc-battement 2s steps(1) infinite;
}

.psc-anime--traverse {
    animation: psc-traverse 90s steps(75) infinite;
}

.psc-anime--sautille {
    animation: psc-sautille 1.6s steps(1) infinite;
}

.psc-anime--clignote {
    animation: psc-clignote 1.2s steps(1) infinite;
}

/* Les trois gardes */
@media (prefers-reduced-motion: reduce) {
    .psc-anime,
    .psc-defilant__ligne,
    .psc-points::before,
    .psc-points::after,
    .psc-points span,
    .psc-chargement svg,
    .psc-toast {
        animation: none !important;
    }

    .psc-defilant__ligne {
        width: auto;
    }

    .psc-defilant__ligne ul {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0;
    }

    .psc-defilant__ligne [aria-hidden='true'] {
        display: none;
    }
}

:is([data-animations='non'], [data-theme='dark'], [data-bs-theme='dark']) :is(.psc-anime, .psc-defilant__ligne, .psc-points span, .psc-chargement svg, .psc-toast),
:is([data-animations='non'], [data-theme='dark'], [data-bs-theme='dark']) .psc-points::before,
:is([data-animations='non'], [data-theme='dark'], [data-bs-theme='dark']) .psc-points::after {
    animation: none !important;
}

:is([data-animations='non'], [data-theme='dark'], [data-bs-theme='dark']) .psc-defilant__ligne {
    width: auto;
}

:is([data-animations='non'], [data-theme='dark'], [data-bs-theme='dark']) .psc-defilant__ligne ul {
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
}

:is([data-animations='non'], [data-theme='dark'], [data-bs-theme='dark']) .psc-defilant__ligne [aria-hidden='true'] {
    display: none;
}