/* ==========================================================================
   Codexe, effects.css
   Curseur pixel, halo qui suit la souris, texte décodé, apparition en
   mosaïque, transition de page, dino compagnon, mode arcade, pluie de pixels.
   Tous ces effets sont posés par JavaScript (lumiere.js, pixels.js,
   compagnon.js) et neutralisés quand le visiteur demande moins d'animations.
   ========================================================================== */

/* ---------- Curseur pixel (pointeur fin seulement, classe posée par lumiere.js) ---------- */
@media (hover: hover) and (pointer: fine) {
  html.curseur-pixel, html.curseur-pixel * { cursor: none !important; }
}
.curseur { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: var(--z-curseur); }
/* Au-dessus d'une boîte de dialogue (calque supérieur du navigateur), le curseur pixel n'est plus visible : on rend le curseur normal */
html.curseur-pixel dialog, html.curseur-pixel dialog *, html.curseur-pixel dialog::backdrop { cursor: auto !important; }
html.curseur-pixel dialog button, html.curseur-pixel dialog a { cursor: pointer !important; }

/* ---------- Halo : lumière violette douce qui révèle une grille de pixels ---------- */
.halo { position: relative; --mx: 50%; --my: 50%; --halo-op: 0; }
.halo::before, .halo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  transition: opacity 420ms var(--courbe);
}
.halo::before {
  background-image: linear-gradient(rgba(123, 61, 255, 0.32) 1px, transparent 1px), linear-gradient(90deg, rgba(123, 61, 255, 0.32) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px;
  opacity: var(--halo-op);
  -webkit-mask-image: radial-gradient(340px circle at var(--mx) var(--my), #000 0%, transparent 66%);
  mask-image: radial-gradient(340px circle at var(--mx) var(--my), #000 0%, transparent 66%);
}
.halo::after { background: var(--halo-souris); opacity: var(--halo-op); }
.halo > * { position: relative; z-index: 1; }
/* Aucun halo sur les écrans tactiles, quoi qu'il arrive */
@media (hover: none), (pointer: coarse) { .halo::before, .halo::after { display: none; } }

/* ---------- Texte qui se décode ---------- */
[data-decode] .scr { color: var(--violet-clair); }

/* ---------- Apparition en mosaïque ---------- */
.mosaique { position: relative; }
.mosaique-voile { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; image-rendering: pixelated; }

/* ---------- Transition de page : l'écran se pixellise puis se reconstruit ---------- */
.voile-transition { position: fixed; inset: 0; z-index: var(--z-transition); pointer-events: none; width: 100%; height: 100%; image-rendering: pixelated; }
/* À l'arrivée sur une page (classe posée par le script inline du <head>), un
   voile noir couvre la page jusqu'à ce que pixels.js le dissolve. Filet de
   sécurité : il s'efface seul après 1,2 s. */
html.arrivee::before {
  content: ""; position: fixed; inset: 0; background: var(--noir); z-index: var(--z-transition);
  pointer-events: none; animation: arrivee-securite 1ms linear 1.2s forwards;
}
@keyframes arrivee-securite { to { visibility: hidden; opacity: 0; } }

/* ---------- Dino compagnon ---------- */
.compagnon { position: fixed; right: 16px; bottom: 10px; z-index: var(--z-compagnon); pointer-events: none; display: none; }
.compagnon canvas { display: block; width: 39px; height: 30px; image-rendering: pixelated; }
.compagnon .bulle {
  position: absolute; right: 100%; bottom: 100%; margin: 0 2px -8px 0;
  font-family: var(--font-pixel); font-size: 0.7rem; color: var(--violet-clair); white-space: nowrap;
  opacity: 0; transition: opacity var(--duree) var(--courbe);
}
.compagnon.dort .bulle { opacity: 1; animation: zzz 2.4s steps(3, end) infinite; }
@keyframes zzz { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@media (min-width: 761px) { .js .compagnon.pret { display: block; } }

/* ---------- Mode arcade : écran cathodique (Konami code ou bouton du pied de page) ---------- */
.arcade-voile { display: none; position: fixed; inset: 0; z-index: var(--z-arcade); pointer-events: none; }
html.arcade .arcade-voile { display: block; }
.arcade-voile::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(18, 16, 26, 0.14) 0 2px, transparent 2px 4px);
}
.arcade-voile::after {
  content: ""; position: absolute; inset: 0; border-radius: 26px;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(18, 16, 26, 0.3) 100%);
  box-shadow: inset 0 0 90px rgba(18, 16, 26, 0.55), 0 0 0 40px #12101A;
}
html.arcade .arcade-flash { animation: arcade-allume 420ms steps(6, end) 1; }
@keyframes arcade-allume { 0% { opacity: 0; transform: scaleY(0.02); } 60% { opacity: 1; transform: scaleY(1.02); } 100% { transform: none; } }

/* ---------- Pluie de pixels (mot « codexe » tapé au clavier) ---------- */
.pluie { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: var(--z-transition); }

/* ---------- Petit message flottant (activation du mode arcade, records) ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: var(--z-arcade); background: var(--surface-2); border: 1px solid var(--violet);
  box-shadow: var(--glow-violet); padding: 0.7rem 1.1rem;
  font-family: var(--font-pixel); font-size: var(--fs-pixel); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--blanc); white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis;
  animation: toast-in 240ms steps(4, end) both;
}
.toast.sort { animation: toast-out 240ms steps(4, end) both; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toast-out { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .curseur, .compagnon, .mosaique-voile, .voile-transition, .pluie { display: none !important; }
  html.curseur-pixel, html.curseur-pixel * { cursor: auto !important; }
  .halo::before, .halo::after { display: none; }
}

/* ==========================================================================
   Deuxième salve d'effets : relief et reflet, boutons magnétiques, glitch des
   grands titres, bandeau défilant, balayage à l'entrée des sections, poussière
   de pixels, tourbillon d'Exe, formulaire emporté, easter eggs, écran de veille.
   ========================================================================== */

/* Relief : la carte s'incline vers le pointeur, un reflet suit la souris */
.relief { position: relative; transform-style: preserve-3d; }
.relief.relief-actif { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 70ms linear; }
.relief:not(.relief-actif) { transition: transform 320ms var(--courbe), border-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe); }
.reflet { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 3; transition: opacity 280ms var(--courbe);
  background: radial-gradient(280px circle at var(--sx, 50%) var(--sy, 50%), rgba(123, 61, 255, 0.08), rgba(123, 61, 255, 0.03) 40%, transparent 65%); }
.relief-actif > .reflet { opacity: 1; }
.projet .reflet, .carte .reflet, .atout .reflet, .niveau .reflet, .compteur .reflet { border: 1px solid transparent; }

/* Boutons magnétiques (relief.js pose --mx / --my par pas de 4 px) */
.btn.magnetique { transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform 90ms linear, box-shadow var(--duree-rapide) var(--courbe), border-color var(--duree) var(--courbe); }
.btn.magnetique:active { transform: translate(var(--mx, 0px), calc(var(--my, 0px) + var(--px))); }

/* Glitch des grands titres : bref et périodique ; plus rien au survol (Loïck, 14 octobre 2026) */
.js .glitch-texte { animation: glitch-texte 9s steps(1, end) infinite; }
@keyframes glitch-texte {
  0%, 92.6%, 94.4%, 100% { transform: none; text-shadow: none; clip-path: none; }
  92.7% { transform: translate(-3px, 0); text-shadow: 3px 0 #7B3DFF, -3px 0 rgba(18, 16, 26, 0.32); clip-path: inset(8% 0 52% 0); }
  93.1% { transform: translate(3px, 0); text-shadow: -3px 0 #7B3DFF; clip-path: inset(46% 0 18% 0); }
  93.6% { transform: translate(-2px, 1px); text-shadow: 2px 0 rgba(18, 16, 26, 0.35), -2px 0 #7B3DFF; clip-path: none; }
  94% { transform: translate(1px, 0); text-shadow: none; clip-path: inset(0 0 70% 0); }
}
@keyframes glitch-texte-court {
  0%, 100% { transform: none; text-shadow: none; clip-path: none; }
  15% { transform: translate(-3px, 0); text-shadow: 3px 0 #7B3DFF, -3px 0 rgba(18, 16, 26, 0.32); clip-path: inset(8% 0 52% 0); }
  35% { transform: translate(3px, 0); text-shadow: -3px 0 #7B3DFF; clip-path: inset(46% 0 18% 0); }
  55% { transform: translate(-2px, 1px); text-shadow: 2px 0 rgba(18, 16, 26, 0.35), -2px 0 #7B3DFF; clip-path: none; }
  75% { transform: translate(1px, 0); text-shadow: none; clip-path: inset(0 0 70% 0); }
}

/* Bandeau défilant (contenu dupliqué deux fois pour une boucle sans couture) */
.bandeau-defilant { overflow: hidden; border-block: var(--bordure); background: var(--surface-1); padding: 0.75rem 0; position: relative; }
.bandeau-defilant .piste-texte { display: flex; width: max-content; gap: 3rem; margin: 0; padding: 0; list-style: none; font-family: var(--font-pixel); font-size: var(--fs-pixel); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris-texte); white-space: nowrap; animation: defile 46s linear infinite; }
.bandeau-defilant .piste-texte li { display: flex; align-items: center; gap: 3rem; }
.bandeau-defilant .piste-texte li::after { content: ""; width: 6px; height: 6px; background: var(--violet); }
.bandeau-defilant .piste-texte b { color: var(--blanc); font-weight: 400; }
.bandeau-defilant:hover .piste-texte { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-50%); } }

/* Balayage : une ligne violette parcourt la section quand elle arrive à l'écran */
.balayage { position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; z-index: 4; background: linear-gradient(90deg, transparent, var(--violet) 30%, #5A22D6 50%, var(--violet) 70%, transparent); opacity: 0.85; animation: balaye 720ms steps(16, end) forwards; }
@keyframes balaye { from { transform: translateY(0); opacity: 0.9; } to { transform: translateY(var(--h, 400px)); opacity: 0; } }

/* Poussière de pixels : derrière tout le contenu (body est un contexte d'empilement) */
body { position: relative; z-index: 0; }
.poussiere { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.hero { background: transparent; }

/* Tourbillon et transferts d'Exe */
.voile-vortex { position: fixed; inset: 0; width: 100%; height: 100%; z-index: var(--z-transition); image-rendering: pixelated; }
.portail-dialog { background: var(--surface-1); color: var(--blanc); border: 1px solid var(--violet); padding: 0; width: min(92vw, 520px); box-shadow: var(--glow-violet-fort); margin: auto; }
.portail-dialog::backdrop { background: rgba(0, 0, 0, 0.72); }
.portail-corps { padding: var(--espace-4) var(--espace-3); text-align: center; }
.portail-corps .pixel { display: block; margin-bottom: var(--espace-2); }
.portail-corps h2 { font-size: 1.5rem; margin-bottom: 0.4em; }
.portail-corps p { color: var(--gris-texte); margin: 0 0 var(--espace-3); }
.portail-corps canvas { display: block; margin: 0 auto var(--espace-2); width: 78px; height: 60px; image-rendering: pixelated; }
.portail-actions { display: flex; flex-wrap: wrap; gap: var(--espace-2); justify-content: center; }
.envoye .formulaire-champs { opacity: 0.15; transition: opacity 600ms var(--courbe); }

/* Formulaire de contact */
.formulaire { position: relative; background: var(--surface-2); border: var(--bordure); padding: var(--espace-4) var(--espace-3); }
.formulaire h2 { font-size: 1.4rem; margin-bottom: 0.3em; }
.formulaire > p { color: var(--gris-texte); font-size: var(--fs-petit); margin-bottom: var(--espace-3); }
.form-grille { display: grid; gap: var(--espace-2); }
@media (min-width: 640px) { .form-grille { grid-template-columns: 1fr 1fr; } .form-pleine { grid-column: 1 / -1; } }
.form-grille > * { min-width: 0; }
.champ { display: flex; flex-direction: column; gap: 0.4rem; }
.champ label { font-family: var(--font-pixel); font-size: var(--fs-pixel); text-transform: uppercase; letter-spacing: 0.06em; color: var(--violet-clair); }
.champ input, .champ textarea, .champ select { width: 100%; background: var(--noir); color: var(--blanc); border: 1px solid var(--gris-ligne); padding: 0.75rem 0.9rem; font: inherit; border-radius: 0; transition: border-color var(--duree-rapide) var(--courbe), box-shadow var(--duree-rapide) var(--courbe); }
.champ input:focus, .champ textarea:focus, .champ select:focus { outline: none; border-color: var(--violet); box-shadow: var(--glow-violet); }
.champ textarea { min-height: 150px; resize: vertical; }
.champ select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23A98BFF' d='M0 0h2v2H0zM2 2h2v2H2zM4 4h2v2H4zM6 4h2v2H6zM8 2h2v2H8zM10 0h2v2h-2z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 12px 8px; }
.champ select option { background: var(--surface-2); color: var(--blanc); }
.champ-note { text-transform: none; letter-spacing: 0; color: var(--gris-texte); font-family: var(--font-texte); font-size: 0.8rem; }
.champ-erreur { color: #B3261E; font-size: var(--fs-petit); margin: 0; }
.champ [aria-invalid="true"] { border-color: #D93025; }
.consentement { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--fs-petit); color: var(--gris-texte); }
.consentement input { width: 18px; height: 18px; margin-top: 0.15em; accent-color: var(--violet); flex: none; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-rgpd { font-size: 0.8rem; color: var(--gris-texte); margin: var(--espace-2) 0 0; }
.form-alerte { border: 1px solid var(--violet); background: var(--noir); padding: 0.9rem 1rem; margin: var(--espace-2) 0 0; font-size: var(--fs-petit); }
.form-alerte.erreur { border-color: #D93025; }
.form-envoye { padding: var(--espace-4) 0 0; text-align: center; }
.form-envoye h3 { font-size: 1.3rem; }
.form-envoye p { color: var(--gris-texte); }

/* Record du site : saisie des initiales façon borne d'arcade */
.record-dialog { background: var(--noir); color: var(--blanc); border: 2px solid var(--violet); padding: var(--espace-4) var(--espace-3); width: min(92vw, 460px); box-shadow: var(--glow-violet-fort); margin: auto; text-align: center; font-family: var(--font-pixel); text-transform: uppercase; letter-spacing: 0.08em; }
.record-dialog::backdrop { background: rgba(0, 0, 0, 0.8); }
.record-dialog .grand { font-size: 1.3rem; color: var(--violet-clair); margin: 0 0 0.6rem; animation: clignote 1.2s steps(2, start) infinite; }
.record-dialog .score { font-size: 2rem; margin: 0 0 var(--espace-3); }
.record-dialog p { margin: 0 0 var(--espace-2); font-size: 0.8rem; color: var(--gris-texte); }
.initiales { display: flex; justify-content: center; gap: 0.8rem; margin: var(--espace-2) 0 var(--espace-3); }
.initiales .lettre { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.initiales span { width: 52px; height: 64px; border-bottom: 4px solid var(--gris-ligne); font-size: 2.4rem; display: grid; place-items: center; color: var(--blanc); cursor: pointer; }
.initiales .fleche { width: 52px; height: 32px; background: var(--surface-2); border: 1px solid var(--gris-ligne); color: var(--violet-clair); font-size: 0.8rem; cursor: pointer; }
.initiales .fleche:hover { border-color: var(--violet); color: var(--blanc); }
.initiales span.actif { border-bottom-color: var(--violet); animation: clignote 0.8s steps(2, start) infinite; }
.record-dialog input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.record-dialog .btn { font-family: var(--font-titre); letter-spacing: 0.04em; }

/* Easter eggs */
html.secousse body { animation: secousse 520ms steps(8, end) 1; }
@keyframes secousse { 0%, 100% { transform: translate(0); } 20% { transform: translate(-6px, 4px); } 40% { transform: translate(6px, -4px); } 60% { transform: translate(-4px, -6px); } 80% { transform: translate(4px, 6px); } }
.compagnon.cafe canvas { animation: cafe-tremble 120ms steps(2, end) infinite; }
@keyframes cafe-tremble { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.veille { position: fixed; inset: 0; width: 100%; height: 100%; z-index: var(--z-arcade); image-rendering: pixelated; }
html.gros-pixels body { zoom: 1.12; }
html.gros-pixels .pixel, html.gros-pixels .tag { font-size: 0.9rem; }


@media (prefers-reduced-motion: reduce) {
  .js .glitch-texte, .js .glitch-texte:hover { animation: none; }
  .bandeau-defilant .piste-texte { animation: none; }
  .balayage, .poussiere, .veille { display: none !important; }
  .relief.relief-actif { transform: none; }
  .btn.magnetique { transform: none; }
  html.secousse body { animation: none; }
}

/* ==========================================================================
   Accessibilité : bouton fixe, panneau de réglages, et les réglages eux-mêmes
   ========================================================================== */
.a11y-bouton {
  position: fixed; left: 14px; bottom: 14px; z-index: var(--z-compagnon);
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.5rem 0.9rem;
  background: var(--surface-2); color: var(--blanc); border: 1px solid var(--violet);
  font-family: var(--font-titre); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.03em; cursor: pointer;
  box-shadow: 0 var(--px) 0 var(--violet-sombre);
}
.a11y-bouton:hover { box-shadow: 0 var(--px) 0 var(--violet-sombre), var(--glow-violet); }
.a11y-bouton svg { flex: none; }
@media (max-width: 560px) { .a11y-bouton span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .a11y-bouton { padding: 0.5rem 0.7rem; } }
.a11y-dialog { background: var(--surface-1); color: var(--blanc); border: 1px solid var(--violet); padding: 0; width: min(92vw, 480px); box-shadow: var(--glow-violet-fort); margin: auto; }
.a11y-dialog::backdrop { background: rgba(0, 0, 0, 0.72); }
.a11y-corps { padding: var(--espace-4) var(--espace-3); }
.a11y-corps .pixel { display: block; margin-bottom: var(--espace-2); }
.a11y-corps h2 { font-size: 1.4rem; margin-bottom: 0.4em; }
.a11y-corps > p { color: var(--gris-texte); margin: 0 0 var(--espace-3); font-size: var(--fs-petit); }
.a11y-option { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0; border-top: var(--bordure); cursor: pointer; font-size: 1rem; }
.a11y-option input { width: 22px; height: 22px; accent-color: var(--violet); flex: none; }
.a11y-note { border-top: var(--bordure); padding-top: var(--espace-2); margin: 0 0 var(--espace-3); }
.a11y-dialog .portail-actions { justify-content: flex-start; }

html.a11y-texte { font-size: 115%; }
html.a11y-contraste { --gris-texte: #2E2A42; --violet-clair: #4A1BB8; --gris-ligne: #B9ABEB; --surface-2: #FFFFFF; }
html.a11y-contraste .btn { --btn-bord: var(--violet-clair); }
html.a11y-police .pixel, html.a11y-police .tag, html.a11y-police .kbd, html.a11y-police .terminal, html.a11y-police .header-record, html.a11y-police .compteur-val, html.a11y-police .footer-titre, html.a11y-police .footer-score, html.a11y-police .niveau-num, html.a11y-police .liste-zones li, html.a11y-police .bandeau-defilant .piste-texte, html.a11y-police .en-clair .pixel, html.a11y-police .service-num, html.a11y-police .jeu-invite { font-family: var(--font-texte); letter-spacing: 0; text-transform: none; font-weight: 600; }
html.a11y-police .pixel { font-size: 0.9rem; }
html.a11y-police .compteur-val { font-family: var(--font-titre); }
html.a11y-sans-animation *, html.a11y-sans-animation *::before, html.a11y-sans-animation *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
html.a11y-sans-animation { scroll-behavior: auto; }
html.a11y-sans-animation .js .reveal, html.a11y-sans-animation.js .reveal { opacity: 1; transform: none; }
html.a11y-sans-animation .curseur, html.a11y-sans-animation .compagnon, html.a11y-sans-animation .poussiere, html.a11y-sans-animation .voile-transition, html.a11y-sans-animation .balayage, html.a11y-sans-animation .mosaique-voile { display: none !important; }
html.a11y-sans-animation.curseur-pixel, html.a11y-sans-animation.curseur-pixel * { cursor: auto !important; }
html.a11y-sans-animation .halo::before, html.a11y-sans-animation .halo::after { display: none; }
html.a11y-sans-animation .hero.sans-webgl .hero-champ { opacity: 0.3; }

/* ==========================================================================
   Bandeau cookies : en bas, non bloquant, Refuser et Accepter identiques.
   Google Analytics n'est chargé qu'après « Accepter » (main.js).
   ========================================================================== */
.cookies-bandeau { position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: var(--z-dialog); display: flex; justify-content: flex-end; pointer-events: none; }
.cookies-bandeau[hidden] { display: none; }
.cookies-corps {
  pointer-events: auto; width: min(100%, 560px); background: var(--surface-2); color: var(--blanc);
  border: 1px solid var(--violet); box-shadow: 0 var(--px) 0 var(--violet-sombre), var(--glow-violet); padding: var(--espace-3);
}
.cookies-corps .pixel { display: block; margin-bottom: 0.6rem; }
.cookies-corps h2 { font-size: 1.2rem; margin: 0 0 0.4em; }
.cookies-corps p { margin: 0; color: var(--gris-texte); font-size: 0.95rem; }
.cookies-corps p a { color: var(--blanc); }
.cookies-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espace-2); margin-top: var(--espace-2); }
.cookies-actions .btn { width: 100%; justify-content: center; }
@media (max-width: 780px) { html.cookies-visible .a11y-bouton { bottom: calc(28px + var(--cookies-hauteur, 0px)); } }
@media (prefers-reduced-motion: no-preference) { .cookies-bandeau:not([hidden]) .cookies-corps { animation: cookies-entree 360ms var(--courbe) both; } }
@keyframes cookies-entree { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.lien-bouton { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.lien-bouton:hover, .lien-bouton:focus-visible { color: var(--violet-clair); }