/* ==========================================================================
   Link tree williampz.fr
   Fidèle à l'export Claude Design ; les styles inline d'origine sont devenus
   des classes pour permettre une CSP sans 'unsafe-inline'.
   ========================================================================== */

/* ---------- POLICES (auto-hébergées, sous-ensemble latin, OFL) ---------- */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/anton-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/archivo-black-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/bebas-neue-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fichier variable : un seul woff2 couvre 400, 600, 800 et 900 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: #0A0A0A }
a { color: #F5F1E8 }
a:hover { color: #F5F1E8 }
img, svg { max-width: none }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid #F5F1E8; outline-offset: 4px }

.lt-main {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #E60012;
  color: #F5F1E8;
  font-family: Inter, system-ui, sans-serif;
}

/* ---------- DÉCOR DE FOND ---------- */
.bg { position: absolute; pointer-events: none }
.bg-band {
  top: 0; left: -10%; width: 120%; height: 560px;
  background: #0A0A0A;
  clip-path: polygon(0 0, 100% 0, 100% 64%, 0 100%);
}
.bg-dots-top {
  top: 0; right: 0; width: 70%; height: 520px;
  background-image: radial-gradient(circle, #E60012 1.7px, transparent 2.2px);
  background-size: 11px 11px;
  -webkit-mask-image: linear-gradient(220deg, #000 0%, transparent 60%);
  mask-image: linear-gradient(220deg, #000 0%, transparent 60%);
  opacity: .7;
}
.bg-dots-mid {
  top: 760px; left: -4%; width: 60%; height: 700px;
  background-image: radial-gradient(circle, #0A0A0A 2px, transparent 2.6px);
  background-size: 13px 13px;
  -webkit-mask-image: linear-gradient(40deg, #000 0%, transparent 62%);
  mask-image: linear-gradient(40deg, #000 0%, transparent 62%);
  opacity: .45;
}
.bg-word {
  top: 640px; left: 50%;
  transform: translateX(-50%) rotate(-12deg);
  font-family: Anton, Impact, sans-serif;
  font-size: 300px; line-height: 1; letter-spacing: 6px;
  white-space: nowrap;
  opacity: .22;
}
.lt-outline { -webkit-text-stroke: 2px #0A0A0A; color: transparent }
.bg-stripe-1 { top: 1180px; right: -6%; width: 46%; height: 26px; background: #0A0A0A; transform: rotate(-14deg) }
.bg-stripe-2 { top: 1226px; right: -6%; width: 34%; height: 10px; background: #F5F1E8; transform: rotate(-14deg) }
.bg-star-1  { top: 96px;  left: 6%;  width: 64px;  height: 64px;  transform: rotate(14deg) }
.bg-burst   { top: 470px; right: 8%; width: 90px;  height: 90px;  transform: rotate(-10deg) }
.bg-splash  { top: 980px; left: 4%;  width: 120px; height: 120px; transform: rotate(-20deg) }
.bg-star-2  { bottom: 260px; right: 5%; width: 70px; height: 70px; transform: rotate(22deg) }
.bg-grain   { inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; opacity: .22 }

/* ---------- COLONNE ---------- */
.lt-col {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 16px 56px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

/* ---------- ENTRÉE EN SLASH DIAGONAL ---------- */
@keyframes lt-slash {
  0%   { opacity: 0; transform: translateX(-70px); clip-path: polygon(0 0, 0 0, -30% 100%, -30% 100%) }
  60%  { opacity: 1 }
  100% { opacity: 1; transform: translateX(0); clip-path: polygon(0 0, 130% 0, 100% 100%, -30% 100%) }
}
.lt-enter {
  animation: lt-slash .65s cubic-bezier(.2, .9, .15, 1) backwards;
  animation-delay: var(--delay, 0s);
}

/* ---------- EN-TÊTE ---------- */
.lt-header { display: flex; flex-direction: column; gap: 18px }
.lt-topline { display: flex; justify-content: space-between; align-items: center; gap: 12px }
.lt-badge {
  display: inline-block;
  background: #E60012; color: #0A0A0A;
  font-family: Anton, Impact, sans-serif;
  /* 24px au lieu de 18px : "grand texte" WCAG, contraste noir/rouge 4,37:1 >= 3:1 */
  font-size: 24px; letter-spacing: 2px;
  white-space: nowrap;
  padding: 4px 14px;
  transform: skewX(-12deg);
}
.lt-aka {
  display: inline-block;
  border: 2px solid #F5F1E8; color: #F5F1E8;
  font-family: Inter, sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 2px;
  padding: 4px 12px;
  transform: skewX(-12deg);
}
.lt-aka-pseudo { color: #FF9EC7 }

.lt-idrow { display: flex; align-items: flex-end; gap: 4px }
.lt-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 132px; height: 132px;
  border-radius: 50%;
  border: 6px solid #F5F1E8;
  background-color: #F5F1E8;
  background-image: radial-gradient(circle, rgba(10, 10, 10, .35) 1.4px, transparent 1.9px);
  background-size: 8px 8px;
  box-shadow: 8px 8px 0 #E60012;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.lt-avatar-img { display: block; width: 100%; height: 100%; object-fit: cover }
.lt-avatar-letter { font-family: Anton, Impact, sans-serif; font-size: 72px; line-height: 1; color: #0A0A0A }

.lt-subtitle {
  margin: 0;
  align-self: flex-start;
  background: #F5F1E8; color: #0A0A0A;
  font-family: Inter, sans-serif; font-weight: 900; font-size: 16px;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 8px 18px;
  transform: skewX(-12deg);
  box-shadow: 6px 6px 0 #E60012;
}

/* ---------- MASCOTTE ---------- */
@keyframes lt-bob { 0%, 100% { transform: translateY(0) rotate(-2deg) } 50% { transform: translateY(-6px) rotate(2deg) } }
@keyframes lt-bounce {
  0%   { transform: translateY(0) scale(1) }
  30%  { transform: translateY(-18px) scale(1.06, .94) }
  55%  { transform: translateY(0) scale(.94, 1.06) }
  75%  { transform: translateY(-6px) }
  100% { transform: translateY(0) }
}
.lt-axo {
  display: block;
  width: 168px; height: 168px;
  margin-left: -14px; margin-bottom: -18px;
  animation: lt-bob 3.2s ease-in-out infinite;
  transform-origin: 50% 90%;
  cursor: pointer;
}
.lt-axo .lt-wink { opacity: 0 }
.lt-axo:hover, .lt-axo:active { animation: lt-bounce .6s cubic-bezier(.3, 1.5, .5, 1) 1 }
.lt-axo:hover .lt-wink, .lt-axo:active .lt-wink { opacity: 1 }
.lt-axo:hover .lt-eye-r, .lt-axo:active .lt-eye-r { opacity: 0 }

/* ---------- LETTRES DE RANÇON ---------- */
.lt-title { margin: 0; display: flex; flex-wrap: wrap; align-items: center }
.lt-title-name { margin: 6px 0 0; gap: 2px }
.lt-title-section { gap: 1px }
.lt-r { display: inline-block; line-height: .95; padding: 4px 10px 2px; margin: 0 -1px; transition: transform .2s }
.lt-r-space { display: inline-block; width: .4em }
/* NB : l'export déclarait un basculement au survol (.lt-title:hover .lt-r:nth-child(odd)),
   mais les styles inline des lettres l'écrasaient : il n'était jamais visible. Non repris. */

/* Nom (7 styles, répétés en boucle si le nom est plus long) */
.r-nom-1 { background: #F5F1E8; color: #0A0A0A; font-family: Anton, Impact, sans-serif; font-size: clamp(46px, 13vw, 82px); transform: rotate(-6deg) }
.r-nom-2 { background: #E60012; color: #F5F1E8; font-family: 'Archivo Black', sans-serif; font-size: clamp(36px, 10vw, 62px); transform: rotate(4deg) translateY(6px) }
.r-nom-3 { background: #0A0A0A; color: #F5F1E8; border: 3px solid #F5F1E8; font-family: 'Bebas Neue', sans-serif; font-size: clamp(50px, 14vw, 88px); transform: rotate(-3deg) }
.r-nom-4 { background: #F5F1E8; color: #E60012; font-family: 'Archivo Black', sans-serif; font-size: clamp(36px, 10vw, 60px); transform: rotate(7deg) translateY(-4px) }
.r-nom-5 { background: #E60012; color: #0A0A0A; border: 3px solid #0A0A0A; outline: 3px solid #F5F1E8; font-family: Anton, Impact, sans-serif; font-size: clamp(42px, 12vw, 72px); transform: rotate(-8deg) translateY(4px) }
.r-nom-6 { background: #FF9EC7; color: #0A0A0A; font-family: 'Bebas Neue', sans-serif; font-size: clamp(48px, 13.5vw, 84px); transform: rotate(3deg) }
.r-nom-7 { background: #F5F1E8; color: #0A0A0A; font-family: 'Archivo Black', sans-serif; font-size: clamp(40px, 11vw, 66px); transform: rotate(-4deg) translateY(-2px); box-shadow: 5px 5px 0 #E60012 }

/* Titre "Réseaux" */
.r-res-1 { background: #0A0A0A; color: #F5F1E8; font-family: Anton, Impact, sans-serif; font-size: 38px; transform: rotate(-5deg) }
.r-res-2 { background: #F5F1E8; color: #0A0A0A; font-family: 'Archivo Black', sans-serif; font-size: 28px; transform: rotate(6deg) }
.r-res-3 { background: #0A0A0A; color: #E60012; font-family: 'Bebas Neue', sans-serif; font-size: 42px; transform: rotate(-2deg) }
.r-res-4 { background: #F5F1E8; color: #E60012; font-family: Anton, Impact, sans-serif; font-size: 32px; transform: rotate(4deg) translateY(3px) }
.r-res-5 { background: #0A0A0A; color: #F5F1E8; font-family: 'Archivo Black', sans-serif; font-size: 30px; transform: rotate(-7deg) }
.r-res-6 { background: #F5F1E8; color: #0A0A0A; font-family: 'Bebas Neue', sans-serif; font-size: 40px; transform: rotate(3deg) }
.r-res-7 { background: #0A0A0A; color: #F5F1E8; border: 2px solid #F5F1E8; font-family: Anton, Impact, sans-serif; font-size: 34px; transform: rotate(-4deg) }

/* Titre "Projets" */
.r-prj-1 { background: #F5F1E8; color: #0A0A0A; font-family: 'Archivo Black', sans-serif; font-size: 30px; transform: rotate(5deg) }
.r-prj-2 { background: #0A0A0A; color: #F5F1E8; font-family: Anton, Impact, sans-serif; font-size: 40px; transform: rotate(-4deg) }
.r-prj-3 { background: #0A0A0A; color: #E60012; border: 2px solid #F5F1E8; font-family: 'Bebas Neue', sans-serif; font-size: 42px; transform: rotate(3deg) translateY(-3px) }
.r-prj-4 { background: #F5F1E8; color: #E60012; font-family: Anton, Impact, sans-serif; font-size: 32px; transform: rotate(-7deg) }
.r-prj-5 { background: #0A0A0A; color: #F5F1E8; font-family: 'Archivo Black', sans-serif; font-size: 28px; transform: rotate(6deg) }
.r-prj-6 { background: #F5F1E8; color: #0A0A0A; font-family: 'Bebas Neue', sans-serif; font-size: 40px; transform: rotate(-3deg) }
.r-prj-7 { background: #0A0A0A; color: #F5F1E8; font-family: Anton, Impact, sans-serif; font-size: 36px; transform: rotate(4deg) }

/* ---------- SECTIONS ---------- */
.lt-section { display: flex; flex-direction: column }
.lt-section-res { gap: 18px }
.lt-section-prj { gap: 22px }
.lt-section-head { display: flex; align-items: center; gap: 12px }
.lt-section-num { font-family: Anton, Impact, sans-serif; font-size: 54px; line-height: 1; color: #0A0A0A }
.lt-section-bar { flex: 1 1 40px; height: 8px; background: #0A0A0A; transform: skewX(-30deg) }

/* ---------- BOUTONS RÉSEAUX ---------- */
.lt-list-res { list-style: none; margin: 0; padding: 0 22px 0 0; display: flex; flex-direction: column; gap: 14px }
.lt-btn {
  position: relative;
  display: block;
  width: auto;
  text-decoration: none;
  color: #F5F1E8;
  background: #0A0A0A;
  border: 3px solid #0A0A0A;
  transform: skewX(-10deg);
  box-shadow: 6px 6px 0 rgba(10, 10, 10, .35);
  transition: transform .22s cubic-bezier(.2, .9, .2, 1), background .15s, color .15s, box-shadow .22s;
}
/* Le bouton Discord est un <button> : on neutralise ses styles natifs */
button.lt-btn {
  width: 100%;
  margin: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.lt-btn-in { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 10px 18px 10px 0; transform: skewX(10deg) }
.lt-num {
  align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  width: 56px; margin-left: -6px;
  background: #E60012; color: #0A0A0A;
  font-family: Anton, Impact, sans-serif; font-size: 26px; letter-spacing: 1px;
  transition: background .15s, color .15s;
}
.lt-ico { display: flex; flex: 0 0 auto }
.lt-ico svg { width: 30px; height: 30px }
.lt-txt { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0 }
.lt-label { font-family: Anton, Impact, sans-serif; font-size: 26px; line-height: 1; text-transform: uppercase; letter-spacing: 1.5px }
.lt-handle {
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: #0A0A0A; color: #F5F1E8;
  font-family: Inter, sans-serif; font-weight: 600; font-size: 14px;
  padding: 2px 8px;
  border: 2px solid rgba(245, 241, 232, .25);
}
.lt-arrow { display: flex; flex: 0 0 auto; transition: transform .22s }
.lt-arrow svg { width: 26px; height: 26px }

.lt-btn::after, .lt-card::after {
  content: "";
  position: absolute; right: -20px; top: -26px;
  width: 52px; height: 52px;
  background: #F5F1E8;
  clip-path: polygon(50% 0, 58% 30%, 85% 15%, 70% 42%, 100% 50%, 70% 58%, 85% 85%, 58% 70%, 50% 100%, 42% 70%, 15% 85%, 30% 58%, 0 50%, 30% 42%, 15% 15%, 42% 30%);
  transform: scale(0) rotate(-40deg);
  transition: transform .3s cubic-bezier(.3, 1.8, .5, 1);
  pointer-events: none;
}
.lt-btn:hover, .lt-btn:focus-visible { transform: translateX(14px) skewX(-10deg); background: #E60012; color: #0A0A0A; box-shadow: 9px 9px 0 #0A0A0A }
.lt-btn:hover .lt-num, .lt-btn:focus-visible .lt-num { background: #0A0A0A; color: #E60012 }
.lt-btn:hover .lt-arrow, .lt-btn:focus-visible .lt-arrow { transform: translateX(6px) }
.lt-btn:hover::after, .lt-btn:focus-visible::after,
.lt-card:hover::after, .lt-card:focus-visible::after { transform: scale(1) rotate(0) }
.lt-btn:focus-visible, .lt-card:focus-visible { outline: 3px solid #F5F1E8; outline-offset: 4px }
.lt-row:nth-child(even) .lt-btn { margin-left: 22px }
.lt-row:nth-child(even) button.lt-btn { width: calc(100% - 22px) }

/* ---------- CARTES PROJETS ---------- */
.lt-list-prj {
  list-style: none; margin: 0;
  padding: 0 18px 0 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px 28px;
}
.lt-card {
  position: relative;
  display: block;
  height: 100%;
  text-decoration: none;
  color: #0A0A0A;
  background: #F5F1E8;
  border: 3px solid #0A0A0A;
  transform: skewX(-8deg);
  box-shadow: 8px 8px 0 #0A0A0A;
  transition: transform .22s cubic-bezier(.2, .9, .2, 1), background .15s, color .15s, box-shadow .22s;
}
.lt-card::before {
  content: "";
  position: absolute; top: -3px; right: -3px;
  width: 46px; height: 46px;
  background: #E60012;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.lt-card::after { background: #E60012 }
.lt-card-in { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 18px 22px 20px; transform: skewX(8deg) }
.lt-card-num { font-family: Inter, sans-serif; font-weight: 900; font-size: 12px; letter-spacing: 2px }
.lt-card-name { font-family: Anton, Impact, sans-serif; font-size: 32px; line-height: 1; text-transform: uppercase; letter-spacing: 1px }
.lt-card-desc { margin: 0; font-family: Inter, sans-serif; font-size: 15px; line-height: 1.45; flex: 1 1 auto }
.lt-domain {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  background: #0A0A0A; color: #F5F1E8;
  font-family: Inter, sans-serif; font-weight: 800; font-size: 13px;
  padding: 5px 10px;
  transition: background .15s, color .15s;
}
.lt-domain svg { width: 14px; height: 14px }
.lt-card:hover, .lt-card:focus-visible { transform: translateX(10px) skewX(-8deg); background: #0A0A0A; color: #F5F1E8; box-shadow: 10px 10px 0 #F5F1E8 }
.lt-card:hover .lt-domain, .lt-card:focus-visible .lt-domain { background: #F5F1E8; color: #0A0A0A }
.lt-card-soon { background: rgba(10, 10, 10, .88); color: #F5F1E8; border: 3px dashed #FF9EC7; box-shadow: 8px 8px 0 rgba(10, 10, 10, .35) }
.lt-card-soon::before, .lt-card-soon::after { display: none }
.lt-card-soon .lt-card-name { color: #FF9EC7 }
.lt-card-soon .lt-domain { background: transparent; border: 2px dashed rgba(245, 241, 232, .5) }

/* ---------- PIED DE PAGE ---------- */
.lt-footer { margin-top: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px }
.lt-slogan-box { background: #0A0A0A; padding: 18px 26px 16px; transform: skewX(-10deg); box-shadow: 10px 10px 0 #F5F1E8 }
.lt-slogan {
  margin: 0;
  transform: skewX(10deg);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  font-family: Anton, Impact, sans-serif;
  font-size: clamp(34px, 9vw, 52px); line-height: 1;
  text-transform: uppercase; letter-spacing: 1px;
  color: #F5F1E8;
}
.lt-slogan-accent { display: inline-block; background: #E60012; color: #0A0A0A; padding: 2px 10px; transform: rotate(-4deg) }
.lt-copy {
  margin: 0;
  background: #0A0A0A; color: #F5F1E8;
  font-family: Inter, sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 1.5px;
  padding: 5px 12px;
  transform: skewX(-12deg);
}

/* ---------- TOAST "COPIÉ !" ---------- */
.lt-toast {
  position: fixed;
  left: 50%; bottom: 24px;
  z-index: 10;
  margin: 0;
  max-width: calc(100% - 32px);
  background: #0A0A0A; color: #F5F1E8;
  border: 3px solid #F5F1E8;
  box-shadow: 6px 6px 0 #E60012;
  font-family: Anton, Impact, sans-serif; font-size: 22px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 8px 18px;
  transform: translate(-50%, 0) skewX(-12deg);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1), visibility 0s .25s;
  pointer-events: none;
}
.lt-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -8px) skewX(-12deg);
  transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1), visibility 0s;
}
.lt-toast:empty { padding: 0; border: 0 }

/* ---------- SANS JAVASCRIPT ---------- */
.lt-nojs { position: relative; max-width: 640px; margin: 0 auto; padding: 28px 16px 56px }
.lt-nojs h1 { font-family: Anton, Impact, sans-serif; font-size: 64px; margin: 0 0 8px; color: #F5F1E8 }
.lt-nojs p { font-family: Inter, sans-serif; font-weight: 600; margin: 0 0 18px }
.lt-nojs ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px }
.lt-nojs li { align-self: flex-start; background: #0A0A0A; color: #F5F1E8; font-family: Inter, sans-serif; font-weight: 800; padding: 8px 14px }
.lt-nojs a { color: inherit }

/* ---------- PAGE 404 (statique, sans JS) ---------- */
.d-1 { --delay: .1s } .d-2 { --delay: .2s } .d-3 { --delay: .3s } .d-4 { --delay: .4s } .d-5 { --delay: .5s }
.lt-404-text { margin: 0; font-family: Inter, sans-serif; font-weight: 600; font-size: 17px; line-height: 1.5; max-width: 34em }
.lt-404-back { max-width: 420px }

/* ---------- PETITS ÉCRANS ----------
   Ajout par rapport au design (pensé à 1280px) : sous 420px, les titres de section
   restaient trop larges et une lettre passait à la ligne. */
@media (max-width: 420px) {
  .lt-title-section { flex-wrap: nowrap }
  .lt-title-section .lt-r { padding: 4px 7px 2px }
  .lt-section-bar { flex-basis: 12px; min-width: 0 }
  .lt-aka { white-space: nowrap }
}

/* ---------- MOUVEMENT RÉDUIT ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
  .lt-btn:hover, .lt-btn:focus-visible { transform: skewX(-10deg) }
  .lt-card:hover, .lt-card:focus-visible { transform: skewX(-8deg) }
  .lt-toast.is-visible { transform: translate(-50%, 0) skewX(-12deg) }
}