.accroche {
  border-top: none;
  
  position: relative;
  overflow: hidden;
  
  padding-top: clamp(6.5rem, 13vw, 9.625rem);
  padding-bottom: clamp(1.75rem, 4vw, 3rem);
}


.accroche__contenu {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.accroche__bloc {
  display: flex;
  flex-direction: column;
  gap: var(--espace-5);
}


.accroche .chapo {
  font-size: 1.0625rem;
  max-width: 36rem;
}


.accroche__titre {
  font-size: clamp(2.6rem, 6vw + 1rem, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.accroche__actions {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  flex-wrap: wrap;
  margin-top: var(--espace-2);
}


.accroche__halo {
  position: absolute;
  top: 36%;
  right: -8%;
  width: min(58rem, 86vw);
  height: min(48rem, 74vh);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(closest-side, rgba(255, 138, 61, 0.16), rgba(255, 94, 58, 0.07) 46%, transparent 72%);
  filter: blur(18px);
  animation: souffle-halo 16s ease-in-out infinite;
}

.accroche__halo--bas {
  top: auto;
  right: auto;
  bottom: -30%;
  left: -14%;
  width: min(42rem, 70vw);
  height: min(34rem, 52vh);
  background: radial-gradient(closest-side, rgba(209, 74, 16, 0.1), transparent 70%);
  filter: blur(26px);
  animation: none;
}

@keyframes souffle-halo {
  0%,
  100% {
    opacity: 0.5;
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    opacity: 0.85;
    transform: translate3d(0, -14px, 0) scale(1.06);
  }
}



[data-hero-anim] {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}


.deco-hero--gauche {
  left: 0;
  width: max(56px, calc((100% - var(--largeur-contenu)) / 2 + 56px));
  -webkit-mask-image:
    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to right, #000 0, #000 58%, rgba(0, 0, 0, 0.55) 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to right, #000 0, #000 58%, rgba(0, 0, 0, 0.55) 82%, transparent 100%);
  mask-composite: intersect;
}

.deco-hero--droite {
  right: 0;
  width: max(150px, calc((100% - var(--largeur-contenu)) / 2 + 56px));
  -webkit-mask-image:
    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to left, #000 0, #000 58%, rgba(0, 0, 0, 0.55) 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to left, #000 0, #000 58%, rgba(0, 0, 0, 0.55) 82%, transparent 100%);
  mask-composite: intersect;
}


.deco-hero__halo {
  position: absolute;
  top: 14%;
  width: 210px;
  height: 62%;
}

.deco-hero--gauche .deco-hero__halo {
  left: -24px;
  background: radial-gradient(ellipse at 30% 50%, rgba(255, 138, 61, 0.085), transparent 72%);
}

.deco-hero--droite .deco-hero__halo {
  right: -24px;
  background: radial-gradient(ellipse at 70% 50%, rgba(255, 138, 61, 0.085), transparent 72%);
}


.deco-hero__plan {
  position: absolute;
}

.deco-hero__plan--code-fin {
  left: 8px;
  top: -4%;
  width: 214px;
  transform: perspective(720px) rotateY(-30deg) rotateZ(8deg);
  transform-origin: right center;
  opacity: 0.28;
  filter: blur(0.7px);
}

.deco-hero__plan--code-large {
  left: -20px;
  top: -10%;
  width: 330px;
  transform: perspective(900px) rotateY(33deg) rotateZ(-5deg);
  transform-origin: left center;
  opacity: 0.95;
}

.deco-hero__plan--blocs {
  right: 64px;
  top: -6%;
  width: 150px;
  transform: perspective(760px) rotateY(26deg) rotateZ(-7deg);
  transform-origin: left center;
  opacity: 0.3;
  filter: blur(0.7px);
}

.deco-hero__plan--cartes {
  right: 8px;
  top: 0;
  height: 100%;
  width: 192px;
  transform: perspective(900px) rotateY(-31deg) rotateZ(5deg);
  transform-origin: right center;
}


@keyframes defilement-decor {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

.deco-code,
.deco-blocs {
  display: flex;
  flex-direction: column;
  animation: defilement-decor 74s linear infinite;
}

.deco-code--fine {
  animation-delay: -24s;
}

.deco-code--large {
  animation: defilement-decor 44s linear infinite;
}

.deco-code {
  
  color: #3a414f;
}

.deco-code > span {
  display: block;
  white-space: pre;
  flex-shrink: 0;
  font-family: var(--police-mono);
  line-height: 2;
}

.deco-code--fine > span {
  font-size: 5px;
}

.deco-code--large > span {
  font-size: 6.5px;
}


.dk {
  color: var(--accent);
}

.di {
  color: var(--texte-secondaire);
}

.df {
  color: var(--accent-clair);
}

.dn {
  color: var(--accent-profond);
}

.ds {
  color: #7a8290;
}

.da {
  color: #5fae7c;
}

.dr {
  color: #b06a6a;
}


.deco-blocs {
  gap: 22px;
  animation-duration: 104s;
  animation-delay: -34s;
}

.deco-blocs > span {
  width: 120px;
  flex-shrink: 0;
  border: 1px solid #1f242e;
  border-radius: 7px;
  background: var(--surface);
}


@keyframes apparition-carte {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.94);
  }
  7% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  31% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  40% {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  100% {
    opacity: 0;
    transform: translateY(8px) scale(0.94);
  }
}

.deco-cartes {
  display: flex;
  flex-direction: column;
  gap: 34px;
  justify-content: center;
  height: 100%;
}

.deco-carte {
  flex-shrink: 0;
  width: 154px;
  background: #0d1015;
  border: 1px solid #232935;
  border-radius: var(--rayon);
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  box-shadow: var(--ombre-carte);
  animation: apparition-carte 12s ease-in-out infinite;
}


.deco-carte--1 {
  margin-left: 0;
  animation-duration: 11.3s;
  animation-delay: 0s;
}

.deco-carte--2 {
  margin-left: 10px;
  animation-duration: 13.7s;
  animation-delay: 2.4s;
}

.deco-carte--4 {
  margin-left: 13px;
  animation-duration: 15.1s;
  animation-delay: 7.3s;
}

.deco-carte--5 {
  margin-left: 2px;
  animation-duration: 12.2s;
  animation-delay: 3.6s;
}

.deco-carte__entete {
  display: flex;
  align-items: center;
  gap: 7px;
}

.deco-carte__nom {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: -0.01em;
  color: var(--texte);
}

.deco-carte__espace {
  flex: 1;
}

.deco-carte__pastille {
  width: 3px;
  height: 3px;
  border-radius: 50%;
}

.deco-carte__pastille--accent {
  background: var(--accent);
}

.deco-carte__pastille--clair {
  background: var(--accent-clair);
}

.deco-carte__pastille--profond {
  background: var(--accent-profond);
}

.deco-carte__lignes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.deco-carte__lignes > span {
  display: flex;
  gap: 4px;
}

.deco-carte__trait {
  height: 3px;
  border-radius: 1px;
  background: var(--bordure-nette);
}

.deco-carte__trait--accent {
  background: var(--accent);
}

.deco-carte__trait--clair {
  background: var(--accent-clair);
}

.deco-carte__trait--profond {
  background: var(--accent-profond);
}

.deco-carte__pied {
  font-family: var(--police-mono);
  font-size: 7px;
  letter-spacing: 0.05em;
  color: var(--texte-discret);
  border-top: 1px solid var(--bordure);
  padding-top: 8px;
}


@media (max-width: 1380px) {
  [data-hero-anim] {
    display: none;
  }
}



.cockpit {
  
  --amorce: 1.2s;
  --pas: 0.75s;
  --duree: 0.45s;
  --frappe: 0.7s;

  
  --nf-sunken: #040509;
  --nf-chrome: #0e0f13;
  --nf-base: #090a0e;
  --nf-s1: #13151b;
  --nf-s2: #1c1e24;
  --nf-s3: #282b33;
  --nf-s4: #34373f;
  --nf-wash-2: rgba(255, 255, 255, 0.06);
  --nf-wash-3: rgba(255, 255, 255, 0.096);
  --nf-text: #e6e8ee;
  --nf-text2: #c8ced8;
  --nf-muted: #8a8f9a;
  --nf-faint: #717681;
  --nf-disabled: #4a5262;
  --nf-border: rgba(255, 255, 255, 0.055);
  --nf-border2: rgba(255, 255, 255, 0.1);
  --nf-border3: rgba(255, 255, 255, 0.18);
  
  --nf-plasma-clair: #ffb888;
  --nf-accent: #ff8a3d;
  --nf-accent2: #ff5e3a;
  --nf-plasma-profond: #d14a10;
  --nf-accent-hi: #ffb888;
  
  --nf-accent-line: rgba(255, 122, 61, 0.32);
  
  --nf-term: #040509;
  --nf-ok: #3fd07f;
  --nf-attente: #f5c04a;
  --nf-erreur: #ff5e6a;
  --nf-info: #3dd6f5;
  --nf-fini: #6d7686;

  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--nf-base);
  border: 1px solid var(--nf-border2);
  border-radius: 14px;
  overflow: hidden;
  color: var(--nf-text);
  
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.5),
    0 40px 80px -24px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}




.cockpit__titrebarre {
  flex: 0 0 46px;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  background: var(--nf-base);
  border-bottom: 1px solid var(--nf-border);
}


.cockpit__interrupteur:checked ~ .cockpit__titrebarre {
  border-bottom-color: transparent;
}


.cockpit__groupe-marque {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: 6px;
  min-width: 0;
  flex: none;
}

.cockpit__feux {
  display: flex;
  gap: 8px;
  flex: none;
}

.cockpit__feux span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.cockpit__feux span:nth-child(1) {
  background: #ff5f57;
}

.cockpit__feux span:nth-child(2) {
  background: #febc2e;
}

.cockpit__feux span:nth-child(3) {
  background: #28c840;
}

.cockpit__marque {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}

.cockpit__logo {
  width: 30px;
  height: 30px;
  flex: none;
}


.cockpit__nom {
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.03em;
  color: var(--nf-text);
}

.cockpit__suffixe {
  background: linear-gradient(105deg, var(--nf-plasma-clair), var(--nf-accent), var(--nf-accent2), var(--nf-plasma-profond));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


.cockpit__bascule {
  width: 28px;
  height: 28px;
  margin-left: 2px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nf-faint);
  
  flex: none;
}

.cockpit__bascule:hover {
  background: var(--nf-s2);
  color: var(--nf-text2);
}

.cockpit__bascule svg {
  width: 16px;
  height: 16px;
}


.cockpit__interrupteur:focus-visible ~ .cockpit__titrebarre .cockpit__bascule {
  box-shadow: 0 0 0 2px var(--nf-accent);
}

.cockpit__bascule-barre {
  display: none;
}

.cockpit__interrupteur:checked ~ .cockpit__titrebarre .cockpit__bascule-colonne {
  display: none;
}

.cockpit__interrupteur:checked ~ .cockpit__titrebarre .cockpit__bascule-barre {
  display: block;
}


.cockpit__maj {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: 8px;
  padding: 3px 4px 3px 9px;
  border: 1px solid var(--nf-border3);
  background: var(--nf-wash-2);
  border-radius: 8px;
  min-width: 0;
}

.cockpit__maj-texte {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
}

.cockpit__maj-libelle {
  font-size: 11px;
  font-weight: 600;
  color: var(--nf-text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.cockpit__maj-version {
  font-size: 10.5px;
  color: var(--nf-text2);
  white-space: nowrap;
}

.cockpit__installer {
  font-size: 11px;
  font-weight: 600;
  color: var(--nf-plasma-clair);
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  flex: none;
  white-space: nowrap;
  background:
    linear-gradient(160deg, #3f2011, #2d180d) padding-box,
    linear-gradient(180deg, rgba(255, 138, 61, 0.92), rgba(255, 138, 61, 0.34) 45%, rgba(255, 138, 61, 0.1)) border-box;
}


.cockpit__segmente {
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--nf-s2);
  border: 1px solid var(--nf-border2);
  border-radius: 9px;
}

.cockpit__segment {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 7px;
  color: var(--nf-muted);
  white-space: nowrap;
}

.cockpit__segment--actif {
  background: var(--nf-s1);
  color: var(--nf-text);
}

.cockpit__espace {
  flex: 1;
}

.cockpit__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--nf-faint);
  flex: none;
}


.cockpit__bouton {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--nf-plasma-clair);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 4px 10px;
  margin-right: 4px;
  white-space: nowrap;
  background:
    linear-gradient(160deg, #3f2011, #2d180d) padding-box,
    linear-gradient(180deg, rgba(255, 138, 61, 0.92), rgba(255, 138, 61, 0.34) 45%, rgba(255, 138, 61, 0.1)) border-box;
}

.cockpit__icone {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.cockpit__icone svg {
  width: 16px;
  height: 16px;
}

.cockpit__pastille-notif {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nf-accent);
  border: 1.5px solid var(--nf-base);
}



.cockpit__corps {
  display: flex;
  min-height: 0;
  height: 38rem;
}

.cockpit__rail {
  flex: 0 0 58px;
  background: var(--nf-s1);
  border-right: 1px solid var(--nf-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  gap: 6px;
}

.cockpit__module {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nf-faint);
  flex: none;
}

.cockpit__module svg {
  width: 18px;
  height: 18px;
}


.cockpit__module--actif {
  color: var(--nf-text);
  background: var(--nf-wash-2);
  box-shadow: inset 0 0 0 1px var(--nf-border3);
}

.cockpit__espace-rail {
  flex: 1;
}

.cockpit__filet-rail {
  width: 24px;
  height: 1px;
  background: var(--nf-border2);
  flex: none;
}



.cockpit__sidebar {
  display: none;
  flex: 0 0 224px;
  width: 224px;
  margin: 0 10px 10px;
  background: var(--nf-s1);
  border: 1px solid var(--nf-border2);
  border-radius: 12px;
  flex-direction: column;
  padding: 10px 8px;
  gap: 2px;
  overflow: hidden;
}

.cockpit__interrupteur:checked ~ .cockpit__corps .cockpit__sidebar {
  display: flex;
}

.cockpit__interrupteur:checked ~ .cockpit__corps .cockpit__rail,
.cockpit__interrupteur:checked ~ .cockpit__corps .cockpit__workspaces {
  display: none;
}

.cockpit__nav {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--nf-text2);
  white-space: nowrap;
}

.cockpit__nav svg {
  width: 15px;
  height: 15px;
  color: var(--nf-faint);
  flex: none;
}

.cockpit__nav--actif {
  background: var(--nf-s3);
  color: var(--nf-text);
  font-weight: 600;
}

.cockpit__nav--actif svg {
  color: var(--nf-text2);
}


.cockpit__ws-rubrique {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 9px 5px;
}

.cockpit__ws-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--nf-text2);
  white-space: nowrap;
  overflow: hidden;
}

.cockpit__ws-item--actif {
  background: var(--nf-s3);
  color: var(--nf-text);
  font-weight: 600;
}


.cockpit__ws-nom {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}


.cockpit__compte {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 9px 2px;
  border-top: 1px solid var(--nf-border);
}

.cockpit__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--nf-s3);
  flex: none;
}

.cockpit__compte-id {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.cockpit__compte-nom {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--nf-text);
}

.cockpit__compte-formule {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.1px;
  color: var(--nf-faint);
}

.cockpit__compte svg {
  width: 15px;
  height: 15px;
  color: var(--nf-faint);
  flex: none;
}

.cockpit__colonne {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}




.cockpit__workspaces {
  flex: 0 0 46px;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  background: var(--nf-s1);
  border-bottom: 1px solid var(--nf-border);
  overflow: hidden;
}

.cockpit__ws-titre {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  align-self: stretch;
  margin: 11px 6px 11px 0;
  padding-right: 12px;
  border-right: 1px solid var(--nf-border);
}

.cockpit__ws-libelle {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.3px;
  color: var(--nf-faint);
}


.cockpit__ws-compte {
  font-size: 10px;
  color: var(--nf-faint);
  background: var(--nf-s2);
  border-radius: 6px;
  padding: 0 7px;
  line-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.cockpit__ws-plus {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nf-faint);
  font-size: 14px;
  line-height: 1;
}

.cockpit__onglet {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 32px;
  padding: 0 8px 0 10px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--nf-muted);
  white-space: nowrap;
  min-width: 0;
}


.cockpit__onglet--actif {
  color: var(--nf-text);
  background: var(--nf-s3);
}


.cockpit__onglet-nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
  min-width: 0;
}

.cockpit__onglet-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--nf-muted);
  background: var(--nf-s2);
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
}


.cockpit__onglet--actif .cockpit__onglet-badge,
.cockpit__ws-item--actif .cockpit__onglet-badge {
  color: var(--nf-text);
  background: var(--nf-wash-2);
}



.cockpit__grille {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  background: var(--nf-base);
}


.pane {
  background: var(--nf-term);
  border: 1px solid var(--nf-border2);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}


.pane__cadre--attente {
  border-color: var(--nf-accent-line);
  outline: 1.5px solid var(--nf-accent);
  outline-offset: -1.5px;
  box-shadow: 0 0 16px rgba(255, 122, 61, 0.28);
  z-index: 1;
}

.pane__entete {
  flex: 0 0 30px;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  background: var(--nf-s1);
  border-bottom: 1px solid var(--nf-border);
  overflow: hidden;
}


.pane--actif .pane__entete {
  background: var(--nf-s2);
}

.pane--actif .pane__fournisseur {
  color: var(--nf-text);
}


.pane__point {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}

.pane__point--ok {
  background: var(--nf-ok);
  box-shadow: 0 0 6px rgba(63, 208, 127, 0.5);
}

.pane__point--attente {
  background: var(--nf-attente);
  box-shadow: 0 0 6px rgba(245, 192, 74, 0.5);
}

.pane__point--erreur {
  background: var(--nf-erreur);
  box-shadow: 0 0 6px rgba(255, 94, 106, 0.5);
}

.pane__point--fini {
  background: var(--nf-fini);
  box-shadow: 0 0 6px rgba(109, 118, 134, 0.4);
}


.pane__fournisseur {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--nf-text2);
  flex: none;
}

.pane__fournisseur-logo {
  width: 12px;
  height: 12px;
  flex: none;
  display: block;
}

.pane__titre {
  font-family: var(--police-mono);
  font-size: 10px;
  white-space: nowrap;
  flex: none;
}


.pane__meta {
  font-family: var(--police-mono);
  font-size: 9.5px;
  color: var(--nf-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}

.pane__etat {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.6px;
  border-radius: 4px;
  padding: 1px 5px;
  flex: none;
}

.pane__etat--ok {
  color: var(--nf-ok);
  background: rgba(63, 208, 127, 0.09);
  border: 1px solid rgba(63, 208, 127, 0.22);
}

.pane__etat--attente {
  color: var(--nf-attente);
  background: rgba(245, 192, 74, 0.09);
  border: 1px solid rgba(245, 192, 74, 0.22);
}

.pane__etat--erreur {
  color: var(--nf-erreur);
  background: rgba(255, 94, 106, 0.09);
  border: 1px solid rgba(255, 94, 106, 0.22);
}

.pane__etat--fini {
  color: var(--nf-fini);
  background: rgba(109, 118, 134, 0.09);
  border: 1px solid rgba(109, 118, 134, 0.22);
}

.pane__compte {
  font-size: 9.5px;
  color: var(--nf-muted);
  border: 1px solid var(--nf-border2);
  border-radius: 5px;
  padding: 1px 6px;
  flex: none;
}

.pane__espace {
  flex: 1;
}


.pane__outils {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--nf-faint);
  flex: none;
}

.pane__outils svg {
  width: 12px;
  height: 12px;
  display: block;
}


.pane__corps {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  font-family: var(--police-mono);
  font-size: 10px;
  line-height: 1.7;
  color: #c2b9a8;
}

.pane__agent {
  display: flex;
  gap: 9px;
  margin-bottom: 6px;
  flex: none;
}


.pane__avatar {
  width: 26px;
  height: 20px;
  flex: none;
  margin-top: 2px;
}

.pane__identite {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  min-width: 0;
}

.pane__agent-nom {
  color: var(--nf-text);
  font-weight: 600;
}

.pane__agent-version {
  color: var(--nf-faint);
  font-weight: 400;
}

.pane__agent-detail {
  color: var(--nf-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pane__alerte {
  color: var(--nf-attente);
  margin-bottom: 5px;
  flex: none;
}

.pane__discret {
  color: var(--nf-faint);
}

.pane__ligne {
  flex: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.pane__ligne--saisie {
  color: var(--nf-text2);
  border-right: 6px solid transparent;
}

.pane__ligne--discret {
  color: var(--nf-faint);
}

.pane__ligne--accent {
  color: var(--nf-accent-hi);
}

.pane__ligne--attente {
  color: var(--nf-attente);
}

.pane__ligne--erreur {
  color: var(--nf-erreur);
}

.pane__ligne--info {
  color: var(--nf-info);
}

.pane__ligne--question {
  color: var(--nf-text);
  font-weight: 600;
}



.pane__banniere {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 6px;
  padding: 7px 9px;
  border: 1px solid var(--nf-border2);
  border-radius: 6px;
  flex: none;
}


.pane__banniere--kimi {
  border-color: rgba(58, 160, 255, 0.55);
}

.pane__banniere-titre {
  color: var(--nf-text);
  font-weight: 600;
}

.pane__banniere-titre--kimi {
  color: #3aa0ff;
}

.pane__banniere-glyphe {
  color: var(--nf-accent);
  margin-right: 6px;
}


.pane__champ {
  display: flex;
  gap: 6px;
  color: var(--nf-text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pane__champ-cle {
  color: var(--nf-muted);
  flex: 0 0 4.75rem;
}


.pane__raccourci {
  display: flex;
  color: var(--nf-text2);
}

.pane__ligne--kimi {
  color: #3aa0ff;
}


.pane__invite {
  flex: 0 0 24px;
  margin: 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid #262c38;
  border-radius: 5px;
  font-family: var(--police-mono);
  font-size: 10px;
  color: #5f6675;
  animation: surgit-nf var(--duree) ease-out var(--fin) backwards;
}


.pane__chevron {
  color: #5f6675;
}


.pane__curseur {
  width: 6px;
  height: 11px;
  background: var(--nf-text);
}


.pane__invite:last-child {
  margin-bottom: 22px;
}


.pane--actif .pane__curseur {
  animation: clignote-nf 1.1s step-end infinite;
}

.pane__pied {
  flex: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  font-family: var(--police-mono);
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  animation: surgit-nf var(--duree) ease-out var(--fin) backwards;
}


.pane__pied-accent {
  color: var(--nf-attente);
}

.pane__pied-mode {
  color: var(--nf-attente);
  flex: none;
}

.pane__pied-detail {
  color: #5f6675;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.pane__ctx {
  color: #4c5563;
  flex: none;
}

@keyframes clignote-nf {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}



@keyframes surgit-nf {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
}


@keyframes frappe-nf {
  from {
    max-width: 0;
  }
  to {
    max-width: 100%;
  }
}


@keyframes curseur-nf {
  0%,
  99% {
    border-right-color: var(--nf-text);
  }
  100% {
    border-right-color: transparent;
  }
}


.cockpit__grille > .pane {
  animation: surgit-nf var(--duree) ease-out var(--depart) backwards;
}

.cockpit__grille > .pane:nth-child(1) {
  --depart: 1.2s;
  --fin: 7.2s;
}

.cockpit__grille > .pane:nth-child(2) {
  --depart: 1.75s;
  --fin: 5.5s;
}

.cockpit__grille > .pane:nth-child(3) {
  --depart: 2.3s;
  --fin: 3.8s;
}

.cockpit__grille > .pane:nth-child(4) {
  --depart: 2.85s;
  --fin: 5.1s;
}

.cockpit__grille > .pane:nth-child(5) {
  --depart: 3.4s;
  --fin: 7.9s;
}

.cockpit__grille > .pane:nth-child(6) {
  --depart: 3.95s;
  --fin: 7.7s;
}


.pane__corps > * {
  animation: surgit-nf var(--duree) ease-out backwards;
}

.pane__corps > *:nth-child(1) {
  animation-delay: calc(var(--depart) + 0 * var(--pas));
}

.pane__corps > *:nth-child(2) {
  animation-delay: calc(var(--depart) + 1 * var(--pas));
}

.pane__corps > *:nth-child(3) {
  animation-delay: calc(var(--depart) + 2 * var(--pas));
}

.pane__corps > *:nth-child(4) {
  animation-delay: calc(var(--depart) + 3 * var(--pas));
}

.pane__corps > *:nth-child(5) {
  animation-delay: calc(var(--depart) + 4 * var(--pas));
}

.pane__corps > *:nth-child(6) {
  animation-delay: calc(var(--depart) + 5 * var(--pas));
}

.pane__corps > *:nth-child(7) {
  animation-delay: calc(var(--depart) + 6 * var(--pas));
}

.pane__corps > *:nth-child(8) {
  animation-delay: calc(var(--depart) + 7 * var(--pas));
}

.pane__corps > *:nth-child(9) {
  animation-delay: calc(var(--depart) + 8 * var(--pas));
}


.pane__corps > .pane__ligne--saisie {
  animation-name: frappe-nf, curseur-nf;
  animation-duration: var(--frappe), var(--frappe);
  animation-timing-function: steps(24), linear;
  animation-fill-mode: backwards, backwards;
  text-overflow: clip;
}


@media (max-width: 68rem) {
  .cockpit__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .cockpit__corps {
    height: 40rem;
  }

  .cockpit__rail,
  .cockpit__segmente,
  .cockpit__bascule,
  .cockpit__interrupteur,
  .cockpit__interrupteur:checked ~ .cockpit__corps .cockpit__sidebar {
    display: none;
  }

  
  .cockpit__interrupteur:checked ~ .cockpit__corps .cockpit__workspaces {
    display: flex;
  }

  .cockpit__interrupteur:checked ~ .cockpit__titrebarre {
    border-bottom-color: var(--nf-border);
  }
}

@media (max-width: 48rem) {
  .cockpit__grille {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .cockpit__grille .pane:nth-child(n + 4) {
    display: none;
  }

  .cockpit__maj,
  .cockpit__bouton {
    display: none;
  }

  .cockpit__corps {
    height: 30rem;
  }
}



@media (prefers-reduced-motion: reduce) {
  .deco-code,
.deco-blocs,
.deco-carte,
.accroche__halo,
.cockpit__grille > .pane,
.pane__corps > *,
.pane__corps > .pane__ligne--saisie,
.pane__pied,
.pane__invite,
.pane--actif .pane__curseur,
.marquee__piste {
    animation: none;
  }
}



.halo-accroche {
  position: relative;
  
  height: 5.5rem;
  pointer-events: none;
}

.nav-apps__halo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(80rem, 110vw);
  height: 700%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 138, 61, 0.05), rgba(255, 94, 58, 0.02) 55%, transparent 85%);
  filter: blur(64px);
}



.preuves {
  position: relative;
  overflow: hidden;
  margin-top: clamp(0rem, 5vw, 0.5rem);
  border-bottom: 1px solid var(--filet);
  background: #060709;
}


.preuves__monogramme {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.022;
  mask-image: radial-gradient(ellipse 80% 130% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 130% at 50% 50%, #000 30%, transparent 80%);
}

.preuves__ligne {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
  padding-top: 2.1rem;
  padding-bottom: 2.1rem;
}

.preuves__phrase {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--texte-secondaire);
  max-width: 21rem;
  flex-shrink: 0;
}

.preuves__phrase a {
  color: var(--texte-doux);
  white-space: nowrap;
}

.preuves__phrase a:hover {
  color: #ffffff;
}


.marquee {
  flex: 1 1 20rem;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.marquee__piste {
  display: flex;
  align-items: center;
  width: max-content;
  animation: defilement-marquee 32s linear infinite;
}

.marquee__piste > * {
  margin-right: 3.5rem;
}

.marquee:hover .marquee__piste {
  animation-play-state: paused;
}

@keyframes defilement-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.marquee__item {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.06rem;
  letter-spacing: -0.01em;
  color: var(--texte-discret);
  white-space: nowrap;
}

.marquee__sep {
  color: var(--bordure-nette);
  font-size: 0.75rem;
}



.avantages {
  position: relative;
  overflow: hidden;
}


.avantages__aurore {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  filter: blur(72px);
  opacity: 0.6;
}

.avantages__aurore i {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 138, 61, 0.26), rgba(255, 94, 58, 0.11) 45%, transparent 72%);
  animation: derive-aurore 48s ease-in-out infinite alternate;
}

.avantages__aurore i:nth-child(1) {
  left: -6%;
  top: 6%;
  width: min(52vw, 760px);
  height: min(52vw, 760px);
}

.avantages__aurore i:nth-child(2) {
  right: -10%;
  top: 38%;
  width: min(46vw, 680px);
  height: min(46vw, 680px);
  background: radial-gradient(closest-side, rgba(209, 74, 16, 0.24), rgba(255, 138, 61, 0.08) 50%, transparent 72%);
  animation-duration: 64s;
  animation-delay: -20s;
}

.avantages__aurore i:nth-child(3) {
  left: 28%;
  bottom: -12%;
  width: min(40vw, 600px);
  height: min(40vw, 600px);
  background: radial-gradient(closest-side, rgba(255, 184, 136, 0.15), transparent 70%);
  animation-duration: 56s;
  animation-delay: -36s;
}


.avantages__grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: screen;
}


.avantages > .conteneur {
  position: relative;
  z-index: 1;
}

.fx {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.fx__texte {
  grid-column: span 5;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.fx__visuel {
  position: relative;
  grid-column: span 7;
  min-width: 0;
}


.fx__visuel::before {
  content: "";
  position: absolute;
  inset: -14% -12%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 138, 61, 0.17), rgba(255, 94, 58, 0.06) 50%, transparent 76%);
  filter: blur(38px);
}

.fx__visuel > * {
  position: relative;
  z-index: 1;
}


.fx + .fx {
  margin-top: clamp(4rem, 8vw, 6.5rem);
  padding-top: clamp(4rem, 8vw, 6.5rem);
  border-top: 1px solid var(--filet);
}



.ecran {
  --ec-base: #090a0e;
  --ec-s1: #13151b;
  --ec-s2: #1c1e24;
  --ec-s3: #282b33;
  --ec-term: #040509;
  --ec-b1: rgba(255, 255, 255, 0.055);
  --ec-b2: rgba(255, 255, 255, 0.1);
  --ec-txt: #e6e8ee;
  --ec-txt2: #c8ced8;
  --ec-muted: #8a8f9a;
  --ec-faint: #717681;
  --ec-ok: #3fd07f;
  --ec-attente: #f5c04a;
  --ec-erreur: #ff5e6a;
  --ec-info: #3dd6f5;
  --ec-fini: #6d7686;
  
  --ec-violet: #6d5bd0;
  --ec-accent: #ff7a3d;
  --ec-accent-filet: rgba(255, 122, 61, 0.45);

  
  --ec-s4: #34373f;
  --ec-b3: rgba(255, 255, 255, 0.18);
  --ec-alveole-filet: rgba(0, 0, 0, 0.45);
  --ec-alveole-creux: inset 0 2px 4px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  --ec-alveole-relief: 0 2px 4px rgba(0, 0, 0, 0.45), 0 8px 16px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  
  --ec-puits: inset 0 2px 4px rgba(0, 0, 0, 0.55);
  --ec-elev-1: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  
  --ec-elev-3: 0 4px 8px rgba(0, 0, 0, 0.45), 0 16px 32px -12px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.065);
  --ec-elev-4: 0 8px 16px rgba(0, 0, 0, 0.5), 0 40px 80px -24px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);

  color: var(--ec-txt);
  font-family: var(--police-texte);
  font-size: 11.5px;
  line-height: 1.4;
  text-align: left;
}


.ecran .sortie--doux {
  color: var(--ec-muted);
}

.ecran .sortie--accent {
  color: var(--accent);
}

.ecran .sortie--ok {
  color: var(--ec-ok);
}

.vue-pane__pastille {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ec-fini);
}

.vue-pane__pastille--ok {
  background: var(--ec-ok);
}

.vue-pane__pastille--attente {
  background: var(--ec-attente);
}

.vue-pane__pastille--erreur {
  background: var(--ec-erreur);
}




.ecran-prevol {
  position: relative;
  min-height: 820px;
  border: 1px solid var(--ec-b1);
  border-radius: 14px;
  background: #0b0c10;
  overflow: hidden;
}


.ecran-prevol__fond {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  filter: blur(6px);
  opacity: 0.5;
}

.ecran-prevol__pane {
  border: 1px solid var(--ec-b2);
  border-radius: 10px;
  background: var(--ec-term);
}

.ecran-prevol__pane--active {
  box-shadow: inset 0 0 0 1px var(--ec-accent-filet);
}



.dlg {
  position: absolute;
  border: 1px solid var(--ec-b2);
  border-radius: 14px;
  background: var(--ec-s3);
  box-shadow: var(--ec-elev-4);
  overflow: hidden;
}

.dlg__entete {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}


.dlg__intitules {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.dlg__titre {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;
  color: var(--ec-txt);
}

.dlg__sous-titre {
  font-size: 10px;
  line-height: 1.4;
  color: var(--ec-muted);
}

.dlg__fermer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  margin-left: auto;
  border-radius: 7px;
  color: var(--ec-faint);
}

.dlg__fermer svg {
  width: 11px;
  height: 11px;
}

.dlg__corps {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 13px 15px;
}

.dlg__section {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.dlg__label {
  margin: 0;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ec-faint);
}


.dlg__pied {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 11px 15px;
  background: var(--ec-s2);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.45);
}


.dlg__note {
  flex: 1 0 100%;
  font-size: 9.5px;
  line-height: 1.4;
  color: var(--ec-faint);
}

.dlg-bouton {
  padding: 6px 12px;
  border: 1px solid var(--ec-b2);
  border-radius: 8px;
  background: var(--ec-s3);
  box-shadow: var(--ec-elev-1);
  font-size: 11px;
  font-weight: 600;
  color: var(--ec-txt2);
  white-space: nowrap;
}


.dlg-bouton--principal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(160deg, #3f2011 0%, #2d180d 100%) padding-box,
    linear-gradient(180deg, rgba(255, 138, 61, 0.92) 0%, rgba(255, 138, 61, 0.34) 45%, rgba(255, 138, 61, 0.1) 100%) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 9px -3px rgba(255, 138, 61, 0.55);
  color: #ffb888;
}

.dlg-bouton--principal svg {
  width: 11px;
  height: 11px;
}


.dlg-bascule {
  position: relative;
  width: 30px;
  height: 17px;
  flex: 0 0 auto;
  border: 1px solid var(--ec-alveole-filet);
  border-radius: 999px;
  background: var(--ec-s1);
  box-shadow: var(--ec-alveole-creux);
}

.dlg-bascule::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ec-faint);
}

.dlg-bascule--on {
  background: var(--ec-s4);
  border-color: var(--ec-b3);
  box-shadow: var(--ec-alveole-relief);
}

.dlg-bascule--on::before {
  left: 15px;
  background: var(--ec-txt);
}



.modale {
  left: 0;
  top: 0;
  width: min(412px, calc(100% - 40px));
  z-index: 2;
}

.modale__agents {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}


.agent-choix {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 5px;
  border: 1px solid var(--ec-alveole-filet);
  border-radius: 10px;
  background: var(--ec-s1);
  box-shadow: var(--ec-alveole-creux);
  color: var(--ec-muted);
  text-align: center;
}

.agent-choix--actif {
  background: var(--ec-s4);
  border-color: var(--ec-b3);
  box-shadow: var(--ec-alveole-relief);
  color: var(--ec-txt);
}

.agent-choix svg {
  width: 18px;
  height: 18px;
  color: currentColor;
}

.agent-choix b {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ec-txt);
}


.etat-cli {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 5px;
  max-width: 100%;
  font-size: 9px;
  line-height: 1.35;
  color: var(--ec-faint);
  text-align: center;
}

.etat-cli .vue-pane__pastille {
  width: 5px;
  height: 5px;
}

.etat-cli__detail {
  flex: 1 0 100%;
  font-family: var(--police-mono);
  font-size: 8.5px;
  color: var(--ec-muted);
  overflow-wrap: anywhere;
}


.echange {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 5px;
  width: 100%;
}

.echange__avant {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 5px;
  width: 100%;
  animation: echange-avant 12s linear infinite;
}

.echange__apres {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 5px;
  width: 100%;
  animation: echange-apres 12s linear infinite;
}


.modale__comptes {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 7px;
}

.compte-carte {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--ec-alveole-filet);
  border-radius: 8px;
  background: var(--ec-s1);
  box-shadow: var(--ec-alveole-creux);
  color: var(--ec-muted);
}

.compte-carte--actif {
  background: var(--ec-s4);
  border-color: var(--ec-b3);
  box-shadow: var(--ec-alveole-relief);
  color: var(--ec-txt);
}

.compte-carte__tete {
  display: flex;
  align-items: center;
  gap: 7px;
}

.compte-carte__tete svg {
  width: 14px;
  height: 14px;
  color: currentColor;
}

.compte-carte__nom {
  font-size: 11px;
  font-weight: 600;
  color: var(--ec-txt);
}

.compte-carte__desc {
  font-size: 9.5px;
  line-height: 1.4;
  color: var(--ec-faint);
}


.modale__mcp {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ec-alveole-filet);
  border-radius: 8px;
  background: var(--ec-s1);
  box-shadow: var(--ec-alveole-creux);
}

.modale__mcp-texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.modale__mcp-texte b {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ec-txt);
}

.modale__mcp-texte span {
  font-size: 9.5px;
  line-height: 1.4;
  color: var(--ec-faint);
}



.maj-cli {
  right: 0;
  top: 24px;
  width: min(348px, calc(100% - 40px));
  z-index: 3;
}

.maj-cli .dlg__pied {
  gap: 6px;
}

.maj-cli .dlg-bouton {
  padding: 6px 10px;
}


.maj-cli__verdict {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--ec-attente);
  border-radius: 9px;
  background: color-mix(in srgb, var(--ec-attente) 12%, transparent);
}

.maj-cli__verdict b {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ec-txt);
}

.maj-cli__verdict span {
  font-size: 9.5px;
  line-height: 1.45;
  color: var(--ec-faint);
}


.maj-cli__versions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.maj-cli__version {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid var(--ec-b2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.12);
}

.maj-cli__version small {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ec-faint);
}

.maj-cli__version b {
  font-family: var(--police-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ec-txt);
}

.maj-cli__fleche {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--ec-faint);
}


.maj-cli__commande {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--ec-alveole-filet);
  border-radius: 10px;
  background: var(--ec-term);
  box-shadow: var(--ec-puits);
}

.maj-cli__commande code {
  font-family: var(--police-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ec-txt);
}

.maj-cli__pourquoi {
  font-size: 9.5px;
  line-height: 1.45;
  color: var(--ec-faint);
}

.maj-cli__sourdine {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ec-alveole-filet);
  border-radius: 9px;
  background: var(--ec-s1);
  box-shadow: var(--ec-alveole-creux);
}

.maj-cli__sourdine-texte {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.maj-cli__sourdine-texte b {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ec-txt);
}

.maj-cli__sourdine-texte span {
  font-size: 9.5px;
  line-height: 1.45;
  color: var(--ec-faint);
}



.reparation {
  position: absolute;
  left: 24px;
  right: 58px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ec-accent);
  border-radius: 8px;
  background: var(--ec-term);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

.reparation__entete {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 11px;
  background: #0a0c11;
  border-bottom: 1px solid var(--ec-b1);
  white-space: nowrap;
}

.reparation__vivant {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ec-accent);
  box-shadow: 0 0 7px var(--ec-accent);
}

.reparation__titre {
  font-family: var(--police-mono);
  font-size: 10.5px;
  color: var(--ec-txt2);
}

.reparation__commande {
  font-family: var(--police-mono);
  font-size: 9.5px;
  color: var(--ec-muted);
}

.reparation__etiquette {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid var(--ec-accent-filet);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ec-accent) 14%, transparent);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--ec-accent);
}

.reparation__corps {
  padding: 10px 12px;
  font-family: var(--police-mono);
  font-size: 10px;
  line-height: 1.65;
  color: var(--ec-txt2);
}


.reparation__ligne {
  margin: 0;
  animation: apparait-ligne 12s linear infinite;
}

.reparation__ligne:nth-child(2) {
  animation-delay: 1.4s;
}

.reparation__ligne:nth-child(3) {
  animation-delay: 3s;
}


.reparation__pied {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--ec-base);
  border-top: 1px solid var(--ec-b1);
}

.reparation__note {
  flex: 1;
  font-size: 9.5px;
  line-height: 1.4;
  color: var(--ec-faint);
}

@supports not (animation-trigger: none) {
}


@media (max-width: 560px) {

  .ecran-prevol {
    min-height: 0;
    padding: 14px;
  }

  .modale {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }

  .maj-cli {
    display: none;
  }

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

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

  
  .reparation {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: var(--espace-3);
  }
}



.scene-wysp {
  --sw-fond-haut: #0a0d10;
  --sw-fond-bas: #060708;
  --sw-filet: #24282b;
  --sw-feu: #2a2f31;
  --sw-code: #3d443f;
  --sw-code-fort: #5b6b62;
  --sw-etiquette: #4a524e;

  position: relative;
  height: 440px;
  border: 1px solid var(--sw-filet);
  border-radius: 16px;
  background: linear-gradient(160deg, var(--sw-fond-haut), var(--sw-fond-bas));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 40px 120px -50px #000000;
  overflow: hidden;
}

.scene-wysp__fond {
  position: absolute;
  inset: 0;
  padding: 22px 26px;
  opacity: 0.55;
}

.scene-wysp__feux {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
}

.scene-wysp__feux span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--sw-feu);
}

.scene-wysp__feux i {
  margin-left: 8px;
  font-style: normal;
  font-family: var(--police-mono);
  font-size: 11px;
  color: var(--sw-etiquette);
}

.scene-wysp__code {
  font-family: var(--police-mono);
  font-size: 12.5px;
  line-height: 2;
  color: var(--sw-code);
}

.scene-wysp__ligne {
  margin: 0;
}

.scene-wysp__jeton {
  color: var(--sw-code-fort);
}

.scene-wysp__plus {
  color: #3fd07f;
  opacity: 0.6;
}

.scene-wysp__moins {
  color: #ff5e6a;
  opacity: 0.6;
}

.scene-wysp__faible {
  opacity: 0.7;
}

.scene-wysp__caret {
  display: inline-block;
  width: 8px;
  height: 15px;
  vertical-align: -2px;
  background: var(--sw-etiquette);
  animation: clignote-ecran 1.1s steps(1) infinite;
}

.scene-wysp__raccourci {
  position: absolute;
  right: 16px;
  top: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--sw-filet);
  border-radius: 8px;
  background: rgba(8, 10, 11, 0.7);
  font-family: var(--police-mono);
  font-size: 10px;
  color: var(--texte-discret);
}

.scene-wysp__raccourci i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}

.scene-wysp__panneau {
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 86%);
  padding: 18px 22px;
  border: 1px solid var(--sw-filet);
  border-radius: 16px;
  background: rgba(8, 10, 11, 0.86);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px -30px #000000;
}

.scene-wysp__curseur {
  display: inline-block;
  width: 2px;
  height: 18px;
  margin-left: 3px;
  vertical-align: -3px;
  background: var(--accent);
  animation: clignote-ecran 1s steps(1) infinite;
}

.scene-wysp__pilule {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 138, 61, 0.4);
  border-radius: 999px;
  background: rgba(12, 14, 16, 0.92);
  backdrop-filter: blur(12px);
  animation: halo-wysp 1.8s ease-in-out infinite;
}

.scene-wysp__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border: 1px solid var(--sw-filet);
  border-radius: 8px;
  background: #111315;
}

.scene-wysp__filet {
  width: 1px;
  height: 20px;
  background: var(--sw-filet);
}

.scene-wysp__onde {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 76px;
  height: 20px;
  padding: 0 4px;
}


.scene-wysp__barre {
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  transform-origin: center;
  animation: onde-wysp 0.9s ease-in-out infinite;
}

.scene-wysp__barre:nth-child(1) {
  height: 5px;
}

.scene-wysp__barre:nth-child(2) {
  height: 11px;
  animation-delay: 0.08s;
}

.scene-wysp__barre:nth-child(3) {
  height: 18px;
  animation-delay: 0.16s;
}

.scene-wysp__barre:nth-child(4) {
  height: 9px;
  animation-delay: 0.24s;
}

.scene-wysp__barre:nth-child(5) {
  height: 15px;
  animation-delay: 0.32s;
}

.scene-wysp__barre:nth-child(6) {
  height: 7px;
  animation-delay: 0.4s;
}

.scene-wysp__barre:nth-child(7) {
  height: 4px;
  animation-delay: 0.48s;
}



@keyframes derive-aurore {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(6%, -5%, 0) scale(1.12);
  }
}

@keyframes clignote-ecran {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes pouls-ecran {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

@keyframes apparait-ligne {
  0%,
  2% {
    opacity: 0;
  }
  7%,
  84% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
  }
}

@keyframes echange-avant {
  0%,
  48% {
    opacity: 1;
  }
  54%,
  100% {
    opacity: 0;
  }
}

@keyframes echange-apres {
  0%,
  52% {
    opacity: 0;
  }
  58%,
  100% {
    opacity: 1;
  }
}

@keyframes remplit-jauge {
  0%,
  8% {
    width: 0;
  }
  34%,
  100% {
    width: 90%;
  }
}

@keyframes seq-pointeur {
  0%, 1.6% { opacity: 0; offset-distance: 0%; }
  1.7% { opacity: 1; offset-distance: 0%; animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); }
  6.1% { opacity: 1; offset-distance: 5.25%; animation-timing-function: ease-out; }
  6.6% { offset-distance: 5.25%; transform: translate(1px, 3px) scale(0.9); animation-timing-function: ease-in; }
  7.6%, 12.2% { offset-distance: 5.25%; transform: none; animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); }
  14.8% { offset-distance: 53.5%; animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); }
  17.2% { offset-distance: 86.25%; animation-timing-function: ease-out; }
  17.7% { offset-distance: 86.25%; transform: translate(1px, 3px) scale(0.9); animation-timing-function: ease-in; }
  18.7%, 19.2% { offset-distance: 86.25%; transform: none; animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1); }
  23.8% { offset-distance: 100%; animation-timing-function: ease-out; }
  24.3% { offset-distance: 100%; transform: translate(1px, 3px) scale(0.9); animation-timing-function: ease-in; }
  25.4%, 28% { offset-distance: 100%; transform: none; opacity: 1; }
  32%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes seq-volet {
  0%, 7.7% { flex-basis: 0; width: 0; border-left-width: 0; }
  7.8%, 88.8% { flex-basis: 292px; width: 292px; border-left-width: 1px; }
  88.9%, 100% { flex-basis: 0; width: 0; border-left-width: 0; }
}

@keyframes seq-menu {
  0%, 18.8% { max-height: 0; opacity: 0; padding: 0; border-width: 0; margin: 0; }
  18.9%, 88.8% { max-height: none; opacity: 1; padding: 5px; border-width: 1px; margin: 0; }
  88.9%, 100% { max-height: 0; opacity: 0; padding: 0; border-width: 0; margin: 0; }
}

@keyframes seq-pane {
  0%, 25.5% { opacity: 0; transform: translateY(10px); }
  27%, 88.8% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: translateY(10px); }
}

@keyframes seq-consigne {
  0%, 29.9% { opacity: 0; }
  30.6%, 88.8% { opacity: 1; }
  92%, 100% { opacity: 0; }
}

@keyframes seq-llm-1 { 0%, 35.5% { opacity: 0; } 36.2%, 88.8% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes seq-llm-2 { 0%, 41.1% { opacity: 0; } 41.8%, 88.8% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes seq-llm-3 { 0%, 46.6% { opacity: 0; } 47.3%, 88.8% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes seq-llm-4 { 0%, 52.2% { opacity: 0; } 52.9%, 88.8% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes seq-llm-5 { 0%, 57.7% { opacity: 0; } 58.4%, 88.8% { opacity: 1; } 92%, 100% { opacity: 0; } }

@keyframes seq-carte-part {
  0%, 6.1% { transform: none; opacity: 1; max-height: 96px; padding: 9px 11px 10px; margin-bottom: 0; }
  6.2%, 7.5% { transform: scale(0.97); opacity: 1; max-height: 96px; padding: 9px 11px 10px; }
  7.8%, 25.5% { transform: none; opacity: 1; max-height: 96px; padding: 9px 11px 10px; margin-bottom: 0; animation-timing-function: ease-in-out; }
  30%, 88.8% { transform: translateY(-10px); opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -8px; }
  92%, 100% { transform: none; opacity: 1; max-height: 96px; padding: 9px 11px 10px; margin-bottom: 0; }
}

@keyframes seq-carte-arrive {
  0%, 25.5% { transform: translateY(8px); opacity: 0; }
  30%, 88.8% { transform: none; opacity: 1; }
  92%, 100% { transform: translateY(8px); opacity: 0; }
}

@keyframes onde-wysp {
  0%,
  100% {
    transform: scaleY(0.45);
  }
  50% {
    transform: scaleY(1);
  }
}

@keyframes halo-wysp {
  0%,
  100% {
    box-shadow:
      0 0 0 0 rgba(255, 138, 61, 0.32),
      0 20px 55px -20px rgba(0, 0, 0, 0.9);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(255, 138, 61, 0.1),
      0 20px 55px -20px rgba(0, 0, 0, 0.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  
  .avantages__aurore i,
.reparation__ligne,
.echange__avant,
.echange__apres,
.scene-wysp__caret,
.scene-wysp__curseur,
.scene-wysp__barre,
.scene-wysp__pilule {
    animation: none;
  }

  
  .echange__apres {
    display: none;
  }
}



.offre-resume {
  position: relative;
  overflow: hidden;
}

.offre-resume::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 50% 42%, #000, transparent 72%);
}

.offre-resume__grille {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.offre-resume__texte {
  grid-column: span 6;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.offre-resume__lien {
  font-family: var(--police-mono);
  font-size: 0.75rem;
  color: var(--texte-doux);
}

.offre-resume__carte {
  grid-column: span 6;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding: 2.125rem 2.25rem;
  border: 1px solid rgba(255, 138, 61, 0.38);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 138, 61, 0.09), transparent 40%),
    var(--surface);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6);
}

.offre-resume__nom {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  font-family: var(--police-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-clair);
}

.offre-resume__pastille {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.offre-resume__prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.625rem;
  margin: 0;
}

.offre-resume__prix strong {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 3.5rem;
  line-height: 1;
  letter-spacing: -0.05em;
  color: #ffffff;
  white-space: nowrap;
}

.offre-resume__prix span {
  font-family: var(--police-mono);
  font-size: 0.8125rem;
  color: var(--texte-attenue);
}

.offre-resume__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.offre-resume__liste > li {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  padding: 0.5625rem 0;
  border-top: 1px solid var(--filet);
  font-size: 0.875rem;
  color: var(--texte-doux);
}

.offre-resume__liste > li:first-child {
  border-top: 0;
}

.offre-resume__liste strong {
  font-weight: 600;
  color: var(--texte);
}

.offre-resume__coche {
  color: var(--accent);
  font-family: var(--police-mono);
  font-size: 0.8125rem;
}

.offre-resume__cta {
  width: 100%;
}


.offre-mcp { min-width: 0; }
.offre-resume__liste > li:has(.offre-mcp),
.offre-founder__ligne:has(.offre-mcp) { align-items: start; }
:is(.offre-resume__liste, .offre-founder__liste) .offre-capacites {
  display: grid;
  gap: 0.375rem;
  margin: 0.625rem 0 0 0.125rem;
  padding: 0 0 0 1rem;
  border-left: 1px solid var(--bordure);
  list-style: none;
}
:is(.offre-resume__liste, .offre-founder__liste) .offre-capacites > li {
  position: relative;
  padding: 0 0 0 0.75rem;
  border: 0;
  color: var(--texte-secondaire);
  font-size: 0.8125rem;
  line-height: 1.55;
}
:is(.offre-resume__liste, .offre-founder__liste) .offre-capacites > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
}

.offre-prochainement:disabled,
.offre-prochainement:disabled:hover {
  opacity: 1;
  border: 1px solid #ffe2cb99;
  background: linear-gradient(110deg, #ffd0a9, #efac83);
  color: #211c17;
  box-shadow: inset 0 1px #fff4e970, 0 6px 20px -10px #efac8340;
  transform: none;
  transition: none;
  animation: none;
}

.offre-resume__micro {
  margin: 0;
  font-family: var(--police-mono);
  font-size: 0.65625rem;
  color: var(--texte-discret);
  text-align: center;
}


.capot__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  flex: 0 0 auto;
  border: 1px solid var(--bordure-nette);
  border-radius: 0.5625rem;
  color: var(--accent);
}

.capot__icone svg {
  width: 1.125rem;
  height: 1.125rem;
}


@media (max-width: 1000px) {
  .fx__texte,
  .fx__visuel,
  .offre-resume__texte,
  .offre-resume__carte {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .offre-resume__carte {
    padding: 1.625rem 1.375rem;
  }

  .offre-resume__prix strong {
    font-size: 2.875rem;
  }
}



.catalogue {
  position: relative;
  
  overflow: hidden;
  padding-top: clamp(4rem, 8vw, 7rem);
  
  border-bottom: 1px solid var(--filet);
}


.catalogue__grille {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--bordure) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bordure) 1px, transparent 1px);
  background-size: 88px 88px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(130% 105% at 50% 45%, #000 42%, transparent 88%);
  mask-image: radial-gradient(130% 105% at 50% 45%, #000 42%, transparent 88%);
}

.catalogue__contenu {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-5);
  text-align: center;
}


.catalogue__titre {
  font-size: clamp(2.4rem, 5.2vw, 3.9rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.catalogue__chapo {
  max-width: 34rem;
  margin: 0;
}


.catalogue__amas {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: clamp(4rem, 6vw, 5.5rem);
  height: 225px;
}

.outil {
  position: relative;
  display: block;
  flex: 0 0 auto;
  border-radius: var(--rayon-grand);
  border: 1px solid var(--bordure-nette);
  background: linear-gradient(#12161d, #0c0f14);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  rotate: var(--inclinaison);
  transition:
    translate 0.26s ease,
    rotate 0.26s ease,
    scale 0.26s ease,
    border-color 0.26s ease;
}


.outil__vignette {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2.5rem 10% 0;
}

.outil__vignette img {
  width: 60%;
  height: auto;
}

.outil__cartouche {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--espace-2) var(--espace-3);
  border-radius: var(--rayon);
  border: 1px solid var(--bordure-nette);
  background: #0e1116;
  white-space: nowrap;
  
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.outil__nom {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--texte);
}

.outil__descripteur {
  font-family: var(--police-mono);
  font-size: 0.65625rem;
  color: var(--texte-discret);
}


.outil--novamcp {
  --inclinaison: -7deg;
  width: 128px;
  height: 270px;
  margin: 94px -12px 0 0;
}

.outil--novawysp {
  --inclinaison: 5deg;
  width: 172px;
  height: 300px;
  margin: 54px -16px 0 0;
}

.outil--novafactory {
  --inclinaison: -2deg;
  width: 216px;
  height: 340px;
  margin: 24px -16px 0 0;
}

.outil--novashot {
  --inclinaison: 7deg;
  width: 156px;
  height: 290px;
  margin: 72px -12px 0 0;
}

.outil--novamemory {
  --inclinaison: -6deg;
  width: 136px;
  height: 280px;
  margin: 104px 0 0 0;
}


.outil:hover,
.outil:focus-visible {
  translate: 0 -18px;
  scale: 1.06;
  rotate: 0deg;
  border-color: var(--accent);
  z-index: 2;
}

.outil:hover .outil__cartouche,
.outil:focus-visible .outil__cartouche {
  opacity: 1;
  transform: translate(-50%, 0);
}


@media (prefers-reduced-motion: reduce) {
  .outil,
  .outil__cartouche {
    transition: none;
  }

  .outil:hover,
  .outil:focus-visible {
    translate: 0;
    scale: 1;
    rotate: var(--inclinaison);
  }
}


@media (max-width: 900px) {
  .catalogue__amas {
    height: 232px;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 0 var(--marge-laterale);
    scroll-snap-type: x proximity;
  }

  .outil {
    scroll-snap-align: center;
  }
}



.manifeste__phrase {
  max-width: 56rem;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.7rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.manifeste__fort {
  color: var(--texte);
}

.manifeste__doux {
  color: var(--texte-attenue);
}

.manifeste__accent {
  color: var(--accent);
}



.cloture {
  position: relative;
  overflow: hidden;
}

.cloture__halo {
  position: absolute;
  left: 50%;
  bottom: -45%;
  transform: translateX(-50%);
  width: min(52rem, 90vw);
  height: 140%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 138, 61, 0.11), rgba(255, 94, 58, 0.045) 50%, transparent 78%);
  filter: blur(30px);
}

.cloture__contenu {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  text-align: center;
}

.cloture__titre {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.cloture__accent {
  color: var(--accent);
}

.cloture__chapo {
  max-width: 35rem;
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--texte-secondaire);
}

.cloture__contenu .bouton {
  margin-top: 6px;
}



.capot {
  display: flex;
  flex-direction: column;
  gap: var(--espace-6);
}

.capot__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  background: var(--bordure);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-grand);
  overflow: hidden;
}

.capot__carte {
  background: var(--surface);
  padding: var(--espace-5);
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
}

.capot__nom {
  margin: 0;
  font-size: 0.97rem;
  font-weight: 600;
}

.capot__texte {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--texte-secondaire);
}