/* ==========================================================================
   CyberRP — components.css
   Composants d'interface : boutons, cartes, hero, badges, tableaux, FAQ…
   Ne référence QUE les variables déclarées dans theme.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Séparateur à hachures diagonales jaune/noir
   -------------------------------------------------------------------------- */

.hachures {
  height: var(--hachures-epaisseur);
  background-image: var(--hachures);
  border-block: var(--epaisseur-filet) solid var(--border);
}

.hachures--fine {
  height: calc(var(--hachures-epaisseur) / 2);
}

/* --------------------------------------------------------------------------
   2. Boutons
   Le fond est porté par ::before (angles coupés) pour que le contour de
   focus du bouton ne soit jamais rogné par le clip-path.
   -------------------------------------------------------------------------- */

.bouton {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-6);
  background-color: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--taille-xs);
  font-weight: var(--poids-titre-2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: color var(--transition-rapide), transform var(--transition-rapide);
}

.bouton::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: var(--clip-coupe-sm);
  transition: background-color var(--transition-rapide);
}

.bouton:hover {
  transform: translateY(-2px);
}

.bouton:active {
  transform: translateY(0);
}

/* Bouton principal : jaune plein, texte sombre (contraste très élevé) */
.bouton--principal {
  color: var(--bg);
}

.bouton--principal::before {
  background-color: var(--accent);
}

.bouton--principal:hover {
  color: var(--bg);
}

.bouton--principal:hover::before {
  background-color: var(--accent-2);
}

/* Bouton secondaire : contour cyan */
.bouton--fantome {
  color: var(--accent-2);
}

.bouton--fantome::before {
  background-color: var(--border);
}

.bouton--fantome::after {
  content: '';
  position: absolute;
  inset: var(--epaisseur-filet);
  z-index: -1;
  background-color: var(--surface);
  clip-path: var(--clip-coupe-sm);
  transition: background-color var(--transition-rapide);
}

.bouton--fantome:hover {
  color: var(--accent);
}

.bouton--fantome:hover::before {
  background-color: var(--accent);
}

.bouton--petit {
  padding: var(--esp-2) var(--esp-4);
  font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   3. Cartes à angles coupés
   Deux calques : ::before = filet, ::after = surface, décalée de 1px.
   -------------------------------------------------------------------------- */

.carte {
  position: relative;
  isolation: isolate;
  padding: var(--esp-6);
  height: 100%;
  transition: transform var(--transition);
}

.carte::before,
.carte::after {
  content: '';
  position: absolute;
  clip-path: var(--clip-coupe);
  transition: background-color var(--transition);
}

.carte::before {
  inset: 0;
  z-index: -2;
  background-color: var(--border);
}

.carte::after {
  inset: var(--epaisseur-filet);
  z-index: -1;
  background-color: var(--surface);
}

.carte:hover {
  transform: translateY(-3px);
}

.carte:hover::before {
  background-color: var(--accent);
}

.carte--statique:hover {
  transform: none;
}

.carte--statique:hover::before {
  background-color: var(--border);
}

.carte--sur-fond::after {
  background-color: var(--bg);
}

.carte__numero {
  font-family: var(--font-display);
  font-size: var(--taille-xl);
  font-weight: var(--poids-titre);
  color: var(--accent);
  line-height: 1;
  display: block;
  margin-bottom: var(--esp-3);
}

.carte__icone {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  margin-bottom: var(--esp-4);
  background-color: var(--accent-voile);
  clip-path: var(--clip-coupe-sm);
  font-family: var(--font-display);
  font-weight: var(--poids-titre);
  color: var(--accent);
}

.carte p {
  color: var(--text-muted);
}

.carte h3 + p,
.carte h4 + p {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   4. Grilles
   -------------------------------------------------------------------------- */

.grille {
  display: grid;
  gap: var(--esp-5);
}

@media (min-width: 46rem) {
  .grille--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 58rem) {
  .grille--3 {
    grid-template-columns: repeat(3, 1fr);
  }

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

@media (min-width: 46rem) and (max-width: 57.99rem) {
  .grille--3,
  .grille--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grille--asym {
  gap: var(--esp-6);
}

@media (min-width: 58rem) {
  .grille--asym {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--esp-9) var(--esp-8);
  border-bottom: var(--epaisseur-filet) solid var(--border);
  /* Skyline en fond : ville à gauche, voile sombre à droite (lisibilité du titre) + fondu bas. */
  background-color: var(--bg);
  background-image:
    linear-gradient(270deg, var(--bg) 0%, rgba(13, 13, 15, 0.86) 40%, rgba(13, 13, 15, 0.25) 100%),
    linear-gradient(180deg, rgba(13, 13, 15, 0.35) 0%, transparent 30%, transparent 62%, rgba(13, 13, 15, 0.88) 100%),
    url('../img/hero-nightcity-miroir.jpg');
  background-position: center, center, left center;
  background-size: cover, cover, cover;
  background-repeat: no-repeat;
}

/* Petit écran : le texte couvre toute la largeur, donc voile sombre uniforme
   par-dessus la ville (le dégradé latéral ne suffit plus). */
@media (max-width: 45.99rem) {
  .hero {
    background-image:
      linear-gradient(rgba(13, 13, 15, 0.72), rgba(13, 13, 15, 0.72)),
      linear-gradient(180deg, rgba(13, 13, 15, 0.35) 0%, transparent 30%, transparent 62%, rgba(13, 13, 15, 0.88) 100%),
      url('../img/hero-nightcity-miroir.jpg');
  }
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 70% at 82% 12%, var(--accent-voile), transparent 62%),
    radial-gradient(55% 65% at 12% 88%, var(--accent-2-voile), transparent 60%);
  pointer-events: none;
}

/* Scanlines très subtiles */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--scanlines);
  background-size: 100% 4px;
  opacity: var(--scanlines-opacite);
  pointer-events: none;
  animation: defilement-scanlines 7s linear infinite;
}

@keyframes defilement-scanlines {
  from { background-position: 0 0; }
  to   { background-position: 0 4px; }
}

.hero__contenu {
  max-width: 62ch;
  /* Bloc calé à droite, bord droit aligné sur celui d'un .conteneur centré
     (le voile sombre du fond est de ce côté). */
  margin-left: auto;
  margin-right: max(var(--gouttiere), calc((100% - var(--largeur-max)) / 2));
}

.hero h1 {
  margin-block: var(--esp-4) var(--esp-5);
}

.hero h1 .accent {
  color: var(--accent);
}

.hero__accroche {
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  color: var(--text-muted);
  max-width: 56ch;
}

.hero__actions {
  margin-top: var(--esp-6);
}

.hero__note {
  margin-top: var(--esp-5);
  font-size: var(--taille-sm);
  color: var(--text-muted);
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   6. Badge de statut
   -------------------------------------------------------------------------- */

.badge-statut {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-4);
  background-color: var(--surface);
  border: var(--epaisseur-filet) solid var(--border);
  clip-path: var(--clip-coupe-sm);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: var(--poids-titre-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}

.badge-statut__point {
  width: 9px;
  height: 9px;
  flex: none;
  background-color: var(--text-muted);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  animation: pulsation 2.4s ease-in-out infinite;
}

@keyframes pulsation {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.78); }
}

.badge-statut[data-etat='construction'] .badge-statut__point { background-color: var(--accent); }
.badge-statut[data-etat='ouvert'] .badge-statut__point { background-color: var(--accent-2); }
.badge-statut[data-etat='maintenance'] .badge-statut__point { background-color: var(--alert); }
.badge-statut[data-etat='ferme'] .badge-statut__point { background-color: var(--text-muted); }

.badge-statut[data-etat='construction'] { border-color: var(--accent); }
.badge-statut[data-etat='ouvert'] { border-color: var(--accent-2); }
.badge-statut[data-etat='maintenance'] { border-color: var(--alert); }

.statut-message {
  margin-top: var(--esp-3);
  font-size: var(--taille-sm);
  color: var(--text-muted);
  max-width: 60ch;
}

.statut-maj {
  font-size: var(--taille-xs);
  color: var(--text-muted);
}

/* Étiquettes courtes */
.etiquette {
  display: inline-block;
  padding: 0.15em 0.65em;
  border: var(--epaisseur-filet) solid var(--border);
  background-color: var(--surface-haut);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: var(--poids-titre-2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.etiquette--accent { color: var(--accent); border-color: var(--accent); }
.etiquette--cyan { color: var(--accent-2); border-color: var(--accent-2); }
.etiquette--alert { color: var(--text); border-color: var(--alert); background-color: var(--alert-voile); }

/* --------------------------------------------------------------------------
   7. Cadres d'information
   -------------------------------------------------------------------------- */

.cadre {
  position: relative;
  padding: var(--esp-5) var(--esp-5) var(--esp-5) var(--esp-6);
  background-color: var(--surface);
  border: var(--epaisseur-filet) solid var(--border);
  border-left: 4px solid var(--accent);
}

.cadre--cyan { border-left-color: var(--accent-2); }
.cadre--alert { border-left-color: var(--alert); background-color: var(--alert-voile); }

.cadre h3,
.cadre h4 {
  margin-bottom: var(--esp-2);
}

.cadre p {
  color: var(--text-muted);
}

.cadre p:first-of-type {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   8. Chiffres clés
   -------------------------------------------------------------------------- */

.chiffres {
  display: grid;
  gap: var(--esp-5);
}

@media (min-width: 40rem) {
  .chiffres {
    grid-template-columns: repeat(3, 1fr);
  }
}

.chiffres.chiffres--colonne {
  grid-template-columns: 1fr;
}

.chiffre__valeur {
  display: block;
  font-family: var(--font-display);
  font-size: var(--taille-2xl);
  font-weight: var(--poids-titre);
  line-height: 1;
  color: var(--accent);
}

.chiffre__libelle {
  display: block;
  margin-top: var(--esp-3);
  font-size: var(--taille-sm);
  color: var(--text-muted);
  max-width: 32ch;
}

/* --------------------------------------------------------------------------
   9. Feuille de route
   -------------------------------------------------------------------------- */

.phases {
  display: grid;
  gap: var(--esp-5);
  counter-reset: phase;
}

@media (min-width: 58rem) {
  .phases {
    grid-template-columns: repeat(3, 1fr);
  }
}

.phase {
  position: relative;
  isolation: isolate;
  padding: var(--esp-6);
  border-top: 3px solid var(--accent);
  background-color: var(--surface);
  border-right: var(--epaisseur-filet) solid var(--border);
  border-bottom: var(--epaisseur-filet) solid var(--border);
  border-left: var(--epaisseur-filet) solid var(--border);
}

.phase--v1 { border-top-color: var(--accent-2); }
.phase--v2 { border-top-color: var(--text-muted); }

.phase__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
  flex-wrap: wrap;
  margin-bottom: var(--esp-4);
}

.phase__nom {
  font-family: var(--font-display);
  font-size: var(--taille-lg);
  font-weight: var(--poids-titre);
  letter-spacing: var(--interlettre-titre);
  text-transform: uppercase;
  margin-bottom: 0;
}

.phase ul {
  list-style: none;
  display: grid;
  gap: var(--esp-3);
  margin-top: var(--esp-4);
}

.phase ul li {
  position: relative;
  padding-left: var(--esp-5);
  font-size: var(--taille-sm);
  color: var(--text-muted);
}

.phase ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background-color: var(--accent);
}

.phase--v1 ul li::before { background-color: var(--accent-2); }
.phase--v2 ul li::before { background-color: var(--text-muted); }

/* --------------------------------------------------------------------------
   10. Règlement : sommaire, articles, tableau des sanctions
   -------------------------------------------------------------------------- */

.sommaire {
  padding: var(--esp-5);
  background-color: var(--surface);
  border: var(--epaisseur-filet) solid var(--border);
}

.sommaire h2 {
  font-size: var(--taille-xs);
  letter-spacing: var(--interlettre-sur-titre);
  color: var(--text-muted);
  margin-bottom: var(--esp-4);
}

.sommaire ol {
  list-style: none;
  counter-reset: som;
  display: grid;
  gap: var(--esp-2);
}

@media (min-width: 46rem) {
  .sommaire ol {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--esp-6);
  }
}

.sommaire li {
  counter-increment: som;
}

.sommaire a {
  display: block;
  padding: var(--esp-2) 0;
  text-decoration: none;
  font-weight: var(--poids-texte-fort);
  border-bottom: var(--epaisseur-filet) solid var(--border);
}

.sommaire a::before {
  content: counter(som, decimal-leading-zero) ' — ';
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--taille-xs);
}

.article-regle {
  padding-top: var(--esp-7);
  scroll-margin-top: 6rem;
}

.article-regle + .article-regle {
  border-top: var(--epaisseur-filet) solid var(--border);
}

.article-regle h2 {
  margin-bottom: var(--esp-4);
}

.regle {
  padding: var(--esp-5) 0;
  border-bottom: var(--epaisseur-filet) solid var(--border);
}

.regle:last-child {
  border-bottom: 0;
}

.regle__entete {
  display: flex;
  align-items: baseline;
  gap: var(--esp-3);
  flex-wrap: wrap;
  margin-bottom: var(--esp-2);
}

.regle__code {
  font-family: var(--font-display);
  font-size: var(--taille-xs);
  font-weight: var(--poids-titre);
  letter-spacing: 0.12em;
  color: var(--accent);
  flex: none;
}

.regle__titre {
  font-family: var(--font-display);
  font-size: var(--taille-md);
  font-weight: var(--poids-titre-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0;
}

.regle__titre code {
  font-size: 0.85em;
  text-transform: none;
}

.regle p {
  color: var(--text-muted);
}

.regle__exemple {
  margin-top: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  background-color: var(--surface-haut);
  border-left: 2px solid var(--accent-2);
  font-size: var(--taille-sm);
  color: var(--text-muted);
}

.regle__exemple strong {
  color: var(--accent-2);
  font-weight: var(--poids-texte-fort);
}

.tableau-enveloppe {
  overflow-x: auto;
  border: var(--epaisseur-filet) solid var(--border);
  background-color: var(--surface);
}

table.tableau {
  min-width: 40rem;
  font-size: var(--taille-sm);
}

table.tableau caption {
  text-align: left;
  padding: var(--esp-4) var(--esp-5);
  color: var(--text-muted);
  font-size: var(--taille-sm);
  border-bottom: var(--epaisseur-filet) solid var(--border);
}

table.tableau th,
table.tableau td {
  text-align: left;
  padding: var(--esp-4) var(--esp-5);
  border-bottom: var(--epaisseur-filet) solid var(--border);
  vertical-align: top;
}

table.tableau thead th {
  font-family: var(--font-display);
  font-size: var(--taille-xs);
  font-weight: var(--poids-titre-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background-color: var(--bg);
}

table.tableau tbody th {
  font-weight: var(--poids-texte-fort);
  color: var(--text);
  white-space: nowrap;
}

table.tableau td {
  color: var(--text-muted);
}

table.tableau tbody tr:last-child th,
table.tableau tbody tr:last-child td {
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   11. FAQ (details / summary natifs)
   -------------------------------------------------------------------------- */

.faq {
  display: grid;
  gap: var(--esp-4);
}

.faq__item {
  background-color: var(--surface);
  border: var(--epaisseur-filet) solid var(--border);
  scroll-margin-top: 6rem;
}

.faq__item[open] {
  border-color: var(--accent);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--taille-base);
  font-weight: var(--poids-titre-2);
  letter-spacing: 0.03em;
  color: var(--text);
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:hover {
  color: var(--accent);
}

.faq__chevron {
  flex: none;
  width: 1rem;
  height: 1rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition);
}

.faq__item[open] .faq__chevron {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.faq__reponse {
  padding: 0 var(--esp-5) var(--esp-5);
  color: var(--text-muted);
  max-width: var(--largeur-texte);
}

.faq__reponse > :first-child {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   12. Étapes pour nous rejoindre
   -------------------------------------------------------------------------- */

.etapes {
  list-style: none;
  counter-reset: pas;
  display: grid;
  gap: 0;
  border-left: 2px solid var(--border);
  margin-left: 1.1rem;
}

.etapes > li {
  counter-increment: pas;
  position: relative;
  padding: 0 0 var(--esp-6) var(--esp-6);
}

.etapes > li:last-child {
  padding-bottom: 0;
}

.etapes > li::before {
  content: counter(pas);
  position: absolute;
  left: -1.1rem;
  top: 0;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  background-color: var(--accent);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: var(--poids-titre);
  font-size: var(--taille-sm);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.etapes h3 {
  padding-top: 0.25rem;
  margin-bottom: var(--esp-2);
}

.etapes p {
  color: var(--text-muted);
  max-width: var(--largeur-texte);
}

/* --------------------------------------------------------------------------
   13. Emplacements d'images (visuels à venir)
   -------------------------------------------------------------------------- */

.visuel {
  margin: 0;
}

.visuel__cadre {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  padding: var(--esp-5);
  overflow: hidden;
  text-align: center;
}

.visuel__cadre::before,
.visuel__cadre::after {
  content: '';
  position: absolute;
  clip-path: var(--clip-coupe);
}

.visuel__cadre::before {
  inset: 0;
  z-index: -2;
  background-color: var(--border);
}

.visuel__cadre::after {
  inset: var(--epaisseur-filet);
  z-index: -1;
  background-color: var(--surface);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--surface-haut) 0 10px,
    transparent 10px 20px
  );
}

.visuel__cadre--portrait {
  aspect-ratio: 3 / 4;
}

.visuel__etiquette {
  font-family: var(--font-display);
  font-size: var(--taille-xs);
  font-weight: var(--poids-titre-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.visuel__cadre img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: var(--clip-coupe);
}

.visuel figcaption {
  margin-top: var(--esp-3);
  font-size: var(--taille-sm);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   14. Glitch discret au survol des titres
   Le texte dupliqué vient de l'attribut data-texte.
   -------------------------------------------------------------------------- */

.glitch {
  position: relative;
  display: inline-block;
}

.glitch::before,
.glitch::after {
  content: attr(data-texte);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-rapide);
}

.glitch:hover::before,
.glitch:focus-within::before {
  opacity: 0.85;
  color: var(--accent-2);
  clip-path: inset(0 0 58% 0);
  animation: glitch-haut var(--glitch-duree) steps(3) infinite;
}

.glitch:hover::after,
.glitch:focus-within::after {
  opacity: 0.85;
  color: var(--alert);
  clip-path: inset(56% 0 0 0);
  animation: glitch-bas var(--glitch-duree) steps(3) infinite;
}

@keyframes glitch-haut {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(-2px, -1px); }
  66%      { transform: translate(2px, 1px); }
}

@keyframes glitch-bas {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(2px, 1px); }
  66%      { transform: translate(-2px, -1px); }
}

/* --------------------------------------------------------------------------
   15. Bandeau d'appel à l'action
   -------------------------------------------------------------------------- */

.appel {
  position: relative;
  isolation: isolate;
  padding-block: var(--esp-8);
  background-color: var(--surface);
  border-block: var(--epaisseur-filet) solid var(--border);
  text-align: center;
}

.appel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(50% 100% at 50% 0%, var(--accent-voile), transparent 70%);
  pointer-events: none;
}

.appel h2 {
  margin-bottom: var(--esp-4);
}

.appel p {
  color: var(--text-muted);
  max-width: 58ch;
  margin-inline: auto;
}

.appel .rangee {
  margin-top: var(--esp-6);
}

/* --------------------------------------------------------------------------
   16. Fil d'Ariane
   -------------------------------------------------------------------------- */

.fil {
  padding-block: var(--esp-5) 0;
  font-size: var(--taille-sm);
  color: var(--text-muted);
}

.fil ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

.fil li + li::before {
  content: '/';
  margin-right: var(--esp-2);
  color: var(--border);
}

.fil a {
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   17. Mouvement réduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero::after {
    animation: none;
  }

  .badge-statut__point {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .glitch::before,
  .glitch::after {
    display: none;
  }

  .carte:hover,
  .bouton:hover {
    transform: none;
  }
}