/* =========================================================
   CONTINENTAL AIRLINES - STYLE GLOBAL
========================================================= */

* {
  box-sizing: border-box;
}

:root {
  --navy: #071a2f;
  --navy-light: #0d2b4a;

  --blue: #126fc2;
  --blue-light: #2f8ee0;

  --white: #ffffff;

  --background: #f4f7fa;
  --background-dark: #eaf0f5;

  --text: #102034;
  --muted: #667789;

  --green: #23b66f;
  --orange: #e99c2c;

  --border: #dde6ed;

  --shadow: 0 12px 32px rgba(15, 42, 66, 0.08);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family: "Inter", sans-serif;

  color: var(--text);

  background: var(--white);
}

a {
  color: inherit;

  text-decoration: none;
}

button {
  font-family: inherit;
}

img {
  max-width: 100%;

  display: block;
}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  height: 90px;

  padding: 0 6vw;

  display: flex;

  align-items: center;

  justify-content: space-between;

  color: white;

  z-index: 1000;

  transition: 0.3s ease;
}

.navbar.scrolled {
  height: 74px;

  background: rgba(7, 26, 47, 0.96);

  backdrop-filter: blur(15px);

  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

.internal-navbar {
  background: var(--navy);
}


/* =========================================================
   LOGO / MARQUE
========================================================= */

.brand {
  display: flex;

  align-items: center;

  gap: 12px;
}

.brand-logo {
  width: 46px;

  height: 46px;

  border: 2px solid white;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: "Montserrat", sans-serif;

  font-size: 14px;

  font-weight: 800;

  letter-spacing: -0.5px;
}

.brand-text {
  display: flex;

  flex-direction: column;

  line-height: 1;
}

.brand-text strong {
  font-family: "Montserrat", sans-serif;

  font-size: 18px;

  letter-spacing: 2px;
}

.brand-text small {
  margin-top: 7px;

  font-size: 9px;

  letter-spacing: 5px;
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav-links {
  display: flex;

  align-items: center;

  gap: 32px;
}

.nav-links a {
  position: relative;

  font-size: 14px;

  font-weight: 600;

  opacity: 0.95;
}

.nav-links a::after {
  content: "";

  position: absolute;

  left: 0;

  bottom: -8px;

  width: 0;

  height: 2px;

  background: white;

  transition: 0.25s ease;
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-actions {
  display: flex;

  align-items: center;

  gap: 10px;
}

.menu-button {
  display: none;

  border: none;

  background: none;

  color: white;

  font-size: 27px;

  cursor: pointer;
}


/* =========================================================
   BOUTONS
========================================================= */

.btn {
  min-height: 44px;

  padding: 0 20px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border: 1px solid transparent;

  border-radius: 7px;

  font-size: 13px;

  font-weight: 700;

  cursor: pointer;

  transition: 0.25s ease;
}

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

.btn-primary {
  color: white;

  background: var(--blue);
}

.btn-primary:hover {
  background: var(--blue-light);
}

.btn-outline {
  color: white;

  border-color: rgba(255, 255, 255, 0.38);

  background: rgba(255, 255, 255, 0.02);
}

.btn-glass {
  color: white;

  border-color: rgba(255, 255, 255, 0.28);

  background: rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(10px);
}

.btn-white {
  color: var(--navy);

  background: white;
}

.btn-large {
  min-height: 52px;

  padding: 0 28px;

  font-size: 14px;
}


/* =========================================================
   HERO
========================================================= */

.hero {
  min-height: 100vh;

  position: relative;

  display: flex;

  align-items: center;

  padding: 140px 7vw 100px;

  color: white;

  overflow: hidden;

  background:
    linear-gradient(
      120deg,
      rgba(4, 18, 35, 0.95),
      rgba(8, 34, 60, 0.58),
      rgba(8, 34, 60, 0.12)
    ),
    url("https://images.unsplash.com/photo-1436491865332-7a61a109cc05?auto=format&fit=crop&w=2200&q=90");

  background-size: cover;

  background-position: center;
}

.hero-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(3, 15, 29, 0.58),
      transparent 52%
    );
}

.hero-content {
  position: relative;

  z-index: 2;

  max-width: 760px;
}

.eyebrow {
  display: inline-block;

  margin-bottom: 18px;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 3px;

  text-transform: uppercase;
}

.eyebrow-blue {
  color: var(--blue);
}

.hero h1 {
  margin: 0;

  font-family: "Montserrat", sans-serif;

  font-size: clamp(58px, 7vw, 108px);

  line-height: 0.96;

  letter-spacing: -5px;
}

.hero h1 span {
  color: #d7ebfc;
}

.hero p {
  max-width: 650px;

  margin: 30px 0 22px;

  color: rgba(255, 255, 255, 0.82);

  font-size: 18px;

  line-height: 1.75;
}

.hero-buttons {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;
}


/* =========================================================
   BADGE HUB
========================================================= */

.hub-badge {
  width: fit-content;

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 28px;

  padding: 12px 16px;

  border: 1px solid rgba(255, 255, 255, 0.16);

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(10px);
}

.hub-dot {
  width: 9px;

  height: 9px;

  border-radius: 50%;

  background: #3ee18c;

  box-shadow: 0 0 16px rgba(62, 225, 140, 0.7);
}

.hub-badge div {
  display: flex;

  flex-direction: column;
}

.hub-badge small {
  margin-bottom: 4px;

  color: rgba(255, 255, 255, 0.55);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 2px;
}

.hub-badge strong {
  color: white;

  font-size: 12px;
}


/* =========================================================
   VOL EN VEDETTE
========================================================= */

.featured-flight {
  position: absolute;

  right: 6vw;

  bottom: 65px;

  z-index: 3;

  width: 380px;

  padding: 24px;

  border: 1px solid rgba(255, 255, 255, 0.17);

  border-radius: 14px;

  background: rgba(7, 26, 47, 0.58);

  backdrop-filter: blur(16px);

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.featured-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 2px;
}

.live-badge {
  display: flex;

  align-items: center;

  gap: 7px;

  color: #8df0b8;
}

.live-dot {
  width: 7px;

  height: 7px;

  display: inline-block;

  border-radius: 50%;

  background: var(--green);
}

.featured-route {
  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  align-items: center;

  margin: 30px 0;
}

.featured-route strong {
  display: block;

  font-family: "Montserrat", sans-serif;

  font-size: 28px;
}

.featured-route span {
  color: rgba(255, 255, 255, 0.62);

  font-size: 11px;
}

.route-right {
  text-align: right;
}

.route-line {
  position: relative;

  text-align: center;

  color: white;
}

.route-line::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 0;
  right: 0;

  z-index: -1;

  height: 1px;

  background: rgba(255, 255, 255, 0.3);
}

.featured-footer {
  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-top: 18px;

  border-top: 1px solid rgba(255, 255, 255, 0.14);

  color: rgba(255, 255, 255, 0.65);

  font-size: 11px;
}


/* =========================================================
   STATS
========================================================= */

.stats {
  display: grid;

  grid-template-columns: repeat(5, 1fr);

  background: var(--navy);

  color: white;
}

.stat-card {
  min-height: 118px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 25px 18px;

  text-align: center;

  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-card:last-child {
  border-right: 0;
}

.stat-card strong {
  display: block;

  font-family: "Montserrat", sans-serif;

  font-size: 30px;
}

.stat-card span {
  display: block;

  margin-top: 8px;

  color: rgba(255, 255, 255, 0.55);

  font-size: 10px;

  letter-spacing: 1.5px;

  text-transform: uppercase;
}


/* =========================================================
   SECTIONS GLOBALES
========================================================= */

.section {
  padding: 110px 7vw;
}

.section-light {
  background: var(--background);
}

.section-header {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 30px;

  margin-bottom: 45px;
}

.section-header h2,
.company-grid h2,
.fleet-home h2,
.join-section h2,
.page-header h1 {
  margin: 0;

  font-family: "Montserrat", sans-serif;

  font-size: clamp(38px, 4vw, 62px);

  line-height: 1.05;

  letter-spacing: -2px;
}

.section-description {
  color: var(--muted);
}

.text-link {
  color: var(--blue);

  font-size: 13px;

  font-weight: 800;
}

.text-link:hover {
  color: var(--blue-light);
}


/* =========================================================
   VOLS EN DIRECT
========================================================= */

.live-grid {
  display: grid;

  grid-template-columns: 1.25fr 1fr;

  gap: 24px;
}

.network-map {
  min-height: 430px;

  position: relative;

  overflow: hidden;

  border-radius: 15px;

  background:
    linear-gradient(
      135deg,
      #dbe6ef,
      #eef4f8
    );
}

.map-grid {
  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(
      rgba(30, 80, 120, 0.07) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(30, 80, 120, 0.07) 1px,
      transparent 1px
    );

  background-size: 40px 40px;
}

.network-map::before {
  content: "";

  position: absolute;

  top: 12%;
  left: 9%;
  right: 10%;
  bottom: 13%;

  border: 1px solid rgba(30, 90, 140, 0.15);

  border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%;

  transform: rotate(-7deg);
}

.network-map::after {
  content: "";

  position: absolute;

  top: 25%;
  left: 22%;
  right: 22%;
  bottom: 22%;

  border: 1px dashed rgba(30, 90, 140, 0.22);

  border-radius: 50%;
}

.plane {
  position: absolute;

  z-index: 2;

  color: var(--blue);

  font-size: 22px;
}

.plane-one {
  top: 28%;
  left: 30%;
}

.plane-two {
  top: 51%;
  left: 62%;

  transform: rotate(50deg);
}

.plane-three {
  top: 68%;
  left: 40%;

  transform: rotate(-20deg);
}

.plane-four {
  top: 35%;
  left: 75%;

  transform: rotate(100deg);
}

.flight-label {
  position: absolute;

  z-index: 3;

  padding: 5px 8px;

  border-radius: 5px;

  background: white;

  font-size: 9px;

  font-weight: 800;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.label-one {
  top: 21%;
  left: 24%;
}

.label-two {
  top: 44%;
  left: 56%;
}

.label-three {
  top: 61%;
  left: 34%;
}

.label-four {
  top: 28%;
  left: 69%;
}

.map-caption {
  position: absolute;

  left: 22px;

  bottom: 20px;

  z-index: 3;

  color: var(--navy);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 2px;
}

.flight-list {
  display: flex;

  flex-direction: column;

  gap: 12px;
}

.flight-row {
  min-height: 94px;

  display: grid;

  grid-template-columns: 0.8fr 1.4fr 0.9fr 0.9fr;

  align-items: center;

  gap: 15px;

  padding: 20px;

  border: 1px solid #e2eaf0;

  border-radius: 12px;

  background: white;

  box-shadow: 0 8px 22px rgba(15, 42, 66, 0.04);
}

.flight-number {
  color: var(--blue);

  font-size: 12px;

  font-weight: 800;
}

.small-route {
  display: flex;

  align-items: center;

  gap: 10px;
}

.small-route span {
  color: #9aa9b6;
}

.aircraft {
  color: var(--muted);

  font-size: 12px;
}

.flight-status {
  display: flex;

  align-items: center;

  gap: 7px;

  font-size: 11px;

  font-weight: 700;
}

.flight-status span {
  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--green);
}

.flight-status.boarding span {
  background: var(--orange);
}


/* =========================================================
   DESTINATIONS ACCUEIL
========================================================= */

.destination-grid {
  display: grid;

  grid-template-columns: 1.2fr 0.8fr 0.8fr 1.2fr;

  gap: 16px;
}

.destination-card {
  min-height: 470px;

  position: relative;

  overflow: hidden;

  border-radius: 15px;

  background-size: cover;

  background-position: center;

  transition: 0.3s ease;
}

.destination-card:hover {
  transform: translateY(-7px);

  box-shadow: var(--shadow);
}

.destination-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(5, 20, 38, 0.92),
      transparent 70%
    );
}

.destination-content {
  position: absolute;

  left: 25px;
  right: 25px;
  bottom: 25px;

  color: white;
}

.destination-content span {
  font-size: 9px;

  font-weight: 800;

  letter-spacing: 2px;
}

.destination-content h3 {
  margin: 7px 0;

  font-family: "Montserrat", sans-serif;

  font-size: 34px;
}

.destination-content p {
  margin: 0;

  color: rgba(255, 255, 255, 0.68);

  font-size: 12px;
}

.paris {
  background-image:
    url("https://images.unsplash.com/photo-1502602898657-3e91760cbb34?auto=format&fit=crop&w=1000&q=85");
}

.london {
  background-image:
    url("https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?auto=format&fit=crop&w=1000&q=85");
}

.montreal {
  background-image:
    url("https://images.unsplash.com/photo-1519178614-68673b201f36?auto=format&fit=crop&w=1000&q=85");
}

.tokyo {
  background-image:
    url("https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?auto=format&fit=crop&w=1000&q=85");
}


/* =========================================================
   FLOTTE ACCUEIL
========================================================= */

.fleet-home {
  min-height: 720px;

  position: relative;

  display: flex;

  align-items: center;

  padding: 100px 7vw;

  color: white;

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(7, 26, 47, 0.96),
      rgba(7, 26, 47, 0.45)
    ),
    url("https://images.unsplash.com/photo-1529074963764-98f45c47344b?auto=format&fit=crop&w=2200&q=90");

  background-size: cover;

  background-position: center;
}

.fleet-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(5, 20, 37, 0.3),
      transparent 60%
    );
}

.fleet-home-content {
  position: relative;

  z-index: 2;

  max-width: 800px;
}

.fleet-home-content p {
  max-width: 620px;

  color: rgba(255, 255, 255, 0.72);

  line-height: 1.75;
}

.fleet-selector {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 30px;
}

.fleet-button {
  padding: 10px 16px;

  border: 1px solid rgba(255, 255, 255, 0.25);

  border-radius: 100px;

  background: rgba(255, 255, 255, 0.06);

  color: white;

  cursor: pointer;

  transition: 0.2s ease;
}

.fleet-button:hover {
  background: rgba(255, 255, 255, 0.13);
}

.fleet-button.active {
  background: white;

  color: var(--navy);
}

.fleet-stats {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;

  margin: 40px 0 30px;
}

.fleet-stats div {
  padding-top: 18px;

  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.fleet-stats strong {
  display: block;

  font-family: "Montserrat", sans-serif;

  font-size: 22px;
}

.fleet-stats span {
  display: block;

  margin-top: 6px;

  color: rgba(255, 255, 255, 0.5);

  font-size: 10px;

  letter-spacing: 1px;

  text-transform: uppercase;
}


/* =========================================================
   COMPAGNIE ACCUEIL
========================================================= */

.company-grid {
  display: grid;

  grid-template-columns: 1.1fr 0.9fr;

  gap: 90px;

  align-items: center;
}

.company-text {
  color: var(--muted);

  line-height: 1.8;
}

.values-box {
  overflow: hidden;

  border-radius: 15px;

  background: var(--background);
}

.value-item {
  display: grid;

  grid-template-columns: 60px 1fr;

  padding: 30px;

  border-bottom: 1px solid var(--border);
}

.value-item:last-child {
  border-bottom: 0;
}

.value-item > span {
  color: var(--blue);

  font-weight: 800;
}

.value-item strong {
  font-family: "Montserrat", sans-serif;

  font-size: 20px;
}

.value-item p {
  color: var(--muted);

  font-size: 13px;

  line-height: 1.6;
}


/* =========================================================
   RECRUTEMENT
========================================================= */

.join-section {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 40px;

  padding: 80px 7vw;

  color: white;

  background:
    linear-gradient(
      135deg,
      #126fc2,
      #0b497f
    );
}

.join-section p {
  color: rgba(255, 255, 255, 0.75);
}


/* =========================================================
   FOOTER
========================================================= */

footer {
  padding: 70px 7vw 25px;

  color: white;

  background: #04111f;
}

.footer-grid {
  display: grid;

  grid-template-columns: 2fr repeat(3, 1fr);

  gap: 50px;
}

.footer-logo {
  display: flex;

  align-items: center;

  gap: 12px;
}

.footer-column {
  display: flex;

  flex-direction: column;

  gap: 12px;
}

.footer-column strong {
  font-size: 12px;

  letter-spacing: 1px;

  text-transform: uppercase;
}

.footer-column a {
  color: rgba(255, 255, 255, 0.5);

  font-size: 12px;
}

.footer-column a:hover {
  color: white;
}

.footer-bottom {
  display: flex;

  justify-content: space-between;

  gap: 30px;

  margin-top: 60px;

  padding-top: 20px;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  color: rgba(255, 255, 255, 0.35);

  font-size: 10px;
}


/* =========================================================
   PAGES INTERNES
========================================================= */

.page-header {
  min-height: 440px;

  display: flex;

  align-items: flex-end;

  padding: 150px 7vw 70px;

  color: white;

  background:
    linear-gradient(
      120deg,
      rgba(7, 26, 47, 0.96),
      rgba(15, 67, 107, 0.72)
    );
}

.page-header p {
  max-width: 700px;

  color: rgba(255, 255, 255, 0.72);

  line-height: 1.7;
}


/* =========================================================
   CARTES GÉNÉRALES
========================================================= */

.cards-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;
}

.simple-card {
  padding: 30px;

  border: 1px solid var(--border);

  border-radius: 14px;

  background: white;

  transition: 0.25s ease;
}

.simple-card:hover {
  transform: translateY(-5px);

  box-shadow: var(--shadow);
}

.simple-card h3 {
  margin-top: 0;

  font-family: "Montserrat", sans-serif;
}

.simple-card p {
  color: var(--muted);

  line-height: 1.7;
}


/* =========================================================
   PAGE FLOTTE
========================================================= */

.fleet-page {
  background: #f5f8fb;
}

.fleet-category {
  margin-bottom: 90px;
}

.fleet-category:last-child {
  margin-bottom: 0;
}

.fleet-category-title {
  display: flex;

  align-items: flex-start;

  gap: 22px;

  margin-bottom: 30px;
}

.category-code {
  flex-shrink: 0;

  padding: 8px 12px;

  border-radius: 6px;

  background: var(--blue);

  color: white;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 1.5px;
}

.fleet-category-title h2 {
  margin: 0;

  font-family: "Montserrat", sans-serif;

  font-size: 34px;
}

.fleet-category-title p {
  margin: 8px 0 0;

  color: var(--muted);

  line-height: 1.6;
}

.aircraft-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 16px;
}

.aircraft-card {
  min-height: 215px;

  padding: 25px;

  border: 1px solid var(--border);

  border-radius: 12px;

  background: white;

  transition: 0.25s ease;
}

.aircraft-card:hover {
  transform: translateY(-5px);

  box-shadow: var(--shadow);
}

.aircraft-card > span {
  display: inline-block;

  margin-bottom: 25px;

  color: var(--blue);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 1.5px;
}

.aircraft-card h3 {
  margin: 0 0 10px;

  font-family: "Montserrat", sans-serif;

  font-size: 20px;
}

.aircraft-card p {
  min-height: 42px;

  margin: 0 0 22px;

  color: var(--muted);

  font-size: 13px;

  line-height: 1.6;
}

.aircraft-card strong {
  font-size: 12px;
}


/* =========================================================
   PAGE DESTINATIONS
========================================================= */

.hub-highlight {
  margin-bottom: 80px;

  padding: 45px;

  border-radius: 16px;

  color: white;

  background:
    linear-gradient(
      135deg,
      #0b2845,
      #126fc2
    );

  box-shadow: var(--shadow);
}

.hub-highlight h2 {
  margin: 0;

  font-family: "Montserrat", sans-serif;

  font-size: 45px;
}

.hub-highlight p {
  max-width: 750px;

  line-height: 1.8;

  color: rgba(255, 255, 255, 0.75);
}

.hub-code {
  width: fit-content;

  margin-top: 25px;

  padding: 10px 14px;

  border-radius: 7px;

  background: rgba(255, 255, 255, 0.12);

  font-weight: 800;

  letter-spacing: 1px;
}

.destination-group {
  margin-bottom: 75px;
}

.destination-group:last-child {
  margin-bottom: 0;
}

.destination-group > h2 {
  margin-bottom: 30px;

  font-family: "Montserrat", sans-serif;

  font-size: 32px;
}


/* =========================================================
   RESPONSIVE TABLETTE
========================================================= */

@media (max-width: 1100px) {

  .nav-links {
    display: none;
  }

  .nav-links.open {
    display: flex;

    position: absolute;

    top: 80px;
    left: 5vw;
    right: 5vw;

    flex-direction: column;

    align-items: flex-start;

    padding: 25px;

    border-radius: 12px;

    background: var(--navy);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.18);
  }

  .menu-button {
    display: block;
  }

  .featured-flight {
    display: none;
  }

  .live-grid {
    grid-template-columns: 1fr;
  }

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

  .company-grid {
    grid-template-columns: 1fr;
  }

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

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

}


/* =========================================================
   RESPONSIVE MOBILE
========================================================= */

@media (max-width: 700px) {

  .navbar {
    padding: 0 20px;
  }

  .nav-actions .btn {
    display: none;
  }

  .brand-text strong {
    font-size: 15px;
  }

  .brand-text small {
    letter-spacing: 4px;
  }

  .hero {
    padding: 130px 22px 80px;
  }

  .hero h1 {
    font-size: 55px;

    letter-spacing: -3px;
  }

  .hero p {
    font-size: 16px;
  }

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

  .stat-card {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .stat-card:nth-child(2n) {
    border-right: 0;
  }

  .stat-card:last-child {
    grid-column: 1 / -1;
  }

  .section {
    padding: 75px 22px;
  }

  .section-header {
    flex-direction: column;

    align-items: flex-start;
  }

  .flight-row {
    grid-template-columns: 1fr 1fr;
  }

  .destination-grid {
    grid-template-columns: 1fr;
  }

  .destination-card {
    min-height: 350px;
  }

  .fleet-home {
    padding: 80px 22px;
  }

  .fleet-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .company-grid {
    gap: 45px;
  }

  .join-section {
    flex-direction: column;

    align-items: flex-start;

    padding: 60px 22px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-logo {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;

    gap: 10px;
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .aircraft-grid {
    grid-template-columns: 1fr;
  }

  .fleet-category-title {
    flex-direction: column;
  }

  .page-header {
    padding: 140px 22px 60px;
  }

  .hub-highlight {
    padding: 30px 24px;
  }

  .hub-highlight h2 {
    font-size: 34px;
  }

}
/* =========================================================
   ESPACE PILOTE - CONNEXION
========================================================= */

.login-body {
  min-height: 100vh;

  background: var(--navy);
}

.login-page {
  min-height: 100vh;

  padding-top: 90px;
}

.login-container {
  min-height: calc(100vh - 90px);

  display: grid;

  grid-template-columns: 1.15fr 0.85fr;
}


/* VISUEL GAUCHE */

.login-visual {
  min-height: calc(100vh - 90px);

  position: relative;

  display: flex;

  align-items: flex-end;

  padding: 70px;

  overflow: hidden;

  color: white;

  background:
    linear-gradient(
      120deg,
      rgba(4, 18, 35, 0.35),
      rgba(7, 26, 47, 0.15)
    ),
    url("https://images.unsplash.com/photo-1436491865332-7a61a109cc05?auto=format&fit=crop&w=1800&q=90");

  background-size: cover;

  background-position: center;
}


.login-visual-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(4, 17, 31, 0.95),
      rgba(4, 17, 31, 0.2) 70%
    );
}


.login-visual-content {
  position: relative;

  z-index: 2;

  max-width: 650px;
}


.login-visual-content h1 {
  margin: 0;

  font-family: "Montserrat", sans-serif;

  font-size: clamp(52px, 5vw, 78px);

  line-height: 1;

  letter-spacing: -3px;
}


.login-visual-content p {
  max-width: 600px;

  margin: 24px 0;

  color: rgba(255, 255, 255, 0.75);

  font-size: 16px;

  line-height: 1.8;
}


.login-hub {
  width: fit-content;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px 16px;

  border: 1px solid rgba(255, 255, 255, 0.15);

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(12px);
}


.login-hub div {
  display: flex;

  flex-direction: column;
}


.login-hub small {
  margin-bottom: 3px;

  color: rgba(255, 255, 255, 0.5);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 2px;
}


.login-hub strong {
  font-size: 12px;
}


/* PANNEAU DROIT */

.login-panel {
  display: flex;

  align-items: center;

  justify-content: center;

  padding: 60px;

  background: white;
}


.login-form-wrapper {
  width: 100%;

  max-width: 440px;
}


.login-title {
  margin-bottom: 40px;
}


.login-title h2 {
  margin: 0;

  font-family: "Montserrat", sans-serif;

  font-size: 42px;

  letter-spacing: -2px;
}


.login-title p {
  margin-top: 12px;

  color: var(--muted);

  line-height: 1.6;
}


/* FORMULAIRE */

.login-form {
  width: 100%;
}


.form-group {
  margin-bottom: 22px;
}


.form-group label {
  display: block;

  margin-bottom: 9px;

  font-size: 12px;

  font-weight: 700;
}


.form-group input {
  width: 100%;

  height: 52px;

  padding: 0 15px;

  border: 1px solid #d8e1e8;

  border-radius: 8px;

  outline: none;

  background: #f9fbfc;

  color: var(--text);

  font-size: 14px;

  transition: 0.2s;
}


.form-group input:focus {
  border-color: var(--blue);

  background: white;

  box-shadow:
    0 0 0 3px rgba(18, 111, 194, 0.08);
}


.password-field {
  position: relative;
}


.password-field input {
  padding-right: 85px;
}


.show-password {
  position: absolute;

  top: 50%;
  right: 12px;

  transform: translateY(-50%);

  border: none;

  background: transparent;

  color: var(--blue);

  font-size: 11px;

  font-weight: 800;

  cursor: pointer;
}


.login-options {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  margin-bottom: 25px;

  font-size: 11px;
}


.login-options a {
  color: var(--blue);

  font-weight: 700;
}


.remember-me {
  display: flex;

  align-items: center;

  gap: 7px;

  color: var(--muted);
}


.remember-me input {
  accent-color: var(--blue);
}


.login-submit {
  width: 100%;

  height: 54px;

  border: none;
}


.login-message {
  min-height: 20px;

  margin-top: 15px;

  text-align: center;

  font-size: 12px;

  font-weight: 700;
}


.login-message.error {
  color: #c73d3d;
}


.login-message.success {
  color: var(--green);
}


/* SEPARATEUR */

.login-separator {
  position: relative;

  margin: 32px 0;

  text-align: center;
}


.login-separator::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 0;
  right: 0;

  height: 1px;

  background: #e4eaef;
}


.login-separator span {
  position: relative;

  padding: 0 13px;

  background: white;

  color: #9aa7b3;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 2px;
}


/* NOUVEAU PILOTE */

.new-pilot-box {
  padding: 25px;

  border-radius: 12px;

  background: var(--background);
}


.new-pilot-box h3 {
  margin: 0;

  font-family: "Montserrat", sans-serif;

  font-size: 18px;
}


.new-pilot-box p {
  margin: 10px 0 18px;

  color: var(--muted);

  font-size: 12px;

  line-height: 1.7;
}


.pilot-register-button {
  width: 100%;

  border-color: #cad7e1;

  color: var(--navy);

  background: white;
}


/* DEMO */

.login-demo {
  margin-top: 22px;

  padding: 16px;

  border: 1px dashed #cbd7e0;

  border-radius: 9px;

  background: #fbfcfd;
}


.login-demo > span {
  color: var(--blue);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1.5px;
}


.login-demo p {
  margin: 8px 0 0;

  color: var(--muted);

  font-size: 11px;

  line-height: 1.7;
}


/* RESPONSIVE */

@media (max-width: 950px) {

  .login-container {
    grid-template-columns: 1fr;
  }


  .login-visual {
    min-height: 480px;

    padding: 50px 30px;
  }


  .login-panel {
    padding: 60px 25px;
  }

}


@media (max-width: 600px) {

  .login-page {
    padding-top: 74px;
  }


  .login-visual {
    min-height: 400px;
  }


  .login-visual-content h1 {
    font-size: 46px;
  }


  .login-options {
    align-items: flex-start;

    flex-direction: column;
  }

}
/* =========================================================
   CREW CENTER
========================================================= */

.crew-body {
  margin: 0;

  min-height: 100vh;

  background: #eef3f7;

  color: var(--text);
}


/* SIDEBAR */

.crew-sidebar {
  width: 270px;

  height: 100vh;

  position: fixed;

  top: 0;
  left: 0;

  z-index: 1500;

  display: flex;

  flex-direction: column;

  padding: 25px 18px;

  color: white;

  background:
    linear-gradient(
      180deg,
      #06192d,
      #04111f
    );

  overflow-y: auto;
}


.crew-brand {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 0 10px 25px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.08);
}


.crew-brand-logo {
  width: 42px;

  height: 42px;

  display: grid;

  place-items: center;

  border: 2px solid white;

  border-radius: 50%;

  font-family: "Montserrat", sans-serif;

  font-weight: 800;

  font-size: 13px;
}


.crew-brand-text {
  display: flex;

  flex-direction: column;
}


.crew-brand-text strong {
  font-family: "Montserrat", sans-serif;

  font-size: 15px;

  letter-spacing: 1.5px;
}


.crew-brand-text span {
  margin-top: 4px;

  color: rgba(255, 255, 255, 0.45);

  font-size: 8px;

  letter-spacing: 2px;
}


.crew-profile-mini {
  display: flex;

  align-items: center;

  gap: 12px;

  margin: 24px 0;

  padding: 15px;

  border-radius: 11px;

  background:
    rgba(255, 255, 255, 0.06);
}


.crew-profile-mini > div:last-child {
  display: flex;

  flex-direction: column;
}


.crew-profile-mini strong {
  font-size: 12px;
}


.crew-profile-mini span {
  margin-top: 4px;

  color: rgba(255, 255, 255, 0.5);

  font-size: 9px;
}


.crew-avatar {
  width: 42px;

  height: 42px;

  flex-shrink: 0;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: white;

  background:
    linear-gradient(
      135deg,
      var(--blue),
      #0b4d87
    );

  font-weight: 800;

  font-size: 11px;
}


.crew-avatar.small {
  width: 36px;

  height: 36px;
}


/* MENU */

.crew-menu {
  display: flex;

  flex-direction: column;

  gap: 5px;

  flex: 1;
}


.crew-menu-title {
  margin:
    18px
    13px
    7px;

  color:
    rgba(255, 255, 255, 0.3);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1.7px;
}


.crew-menu-link {
  min-height: 46px;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 0 13px;

  border-radius: 8px;

  color:
    rgba(255, 255, 255, 0.66);

  font-size: 12px;

  font-weight: 600;

  transition: 0.2s;
}


.crew-menu-link:hover {
  color: white;

  background:
    rgba(255, 255, 255, 0.06);
}


.crew-menu-link.active {
  color: white;

  background:
    linear-gradient(
      90deg,
      rgba(18, 111, 194, 0.8),
      rgba(18, 111, 194, 0.3)
    );
}


.crew-menu-icon {
  width: 22px;

  color:
    rgba(255, 255, 255, 0.8);

  text-align: center;

  font-size: 15px;
}


.crew-sidebar-footer {
  padding: 20px 10px 0;

  border-top:
    1px solid rgba(255, 255, 255, 0.08);

  display: flex;

  flex-direction: column;

  gap: 8px;
}


.crew-logout {
  color: #e77b7b;

  font-size: 11px;

  font-weight: 700;
}


.crew-sidebar-footer span {
  color:
    rgba(255, 255, 255, 0.25);

  font-size: 8px;
}


/* MAIN */

.crew-main {
  min-height: 100vh;

  margin-left: 270px;
}


/* TOPBAR */

.crew-topbar {
  height: 82px;

  position: sticky;

  top: 0;

  z-index: 1000;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 35px;

  border-bottom:
    1px solid #dde6ed;

  background:
    rgba(255, 255, 255, 0.95);

  backdrop-filter: blur(15px);
}


.crew-topbar-left {
  display: flex;

  align-items: center;

  gap: 15px;
}


.crew-page-label {
  color: var(--blue);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 2px;
}


.crew-topbar h1 {
  margin: 4px 0 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 22px;
}


.crew-topbar-right {
  display: flex;

  align-items: center;

  gap: 18px;
}


.crew-network-status {
  display: flex;

  align-items: center;

  gap: 7px;

  font-size: 10px;

  font-weight: 700;

  color: var(--muted);
}


.crew-network-status span {
  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--green);

  box-shadow:
    0 0 10px
    rgba(35, 182, 111, 0.55);
}


.crew-notification {
  width: 38px;

  height: 38px;

  position: relative;

  border: 1px solid #dce5ec;

  border-radius: 50%;

  background: white;

  cursor: pointer;
}


.crew-notification span {
  width: 16px;

  height: 16px;

  position: absolute;

  top: -3px;

  right: -2px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: white;

  background: var(--blue);

  font-size: 8px;

  font-weight: 800;
}


.crew-top-profile {
  display: flex;

  align-items: center;

  gap: 10px;
}


.crew-top-profile > div:last-child {
  display: flex;

  flex-direction: column;
}


.crew-top-profile strong {
  font-size: 11px;
}


.crew-top-profile span {
  margin-top: 2px;

  color: var(--muted);

  font-size: 9px;
}


.crew-mobile-menu {
  display: none;

  border: none;

  background: transparent;

  font-size: 24px;

  cursor: pointer;
}


/* CONTENT */

.crew-content {
  padding: 32px;

  max-width: 1600px;

  margin: 0 auto;
}


/* WELCOME */

.crew-welcome {
  min-height: 180px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  margin-bottom: 25px;

  padding: 35px;

  border-radius: 17px;

  color: white;

  background:
    linear-gradient(
      120deg,
      #0a2947,
      #126fc2
    );

  box-shadow:
    0 15px 35px
    rgba(11, 52, 88, 0.15);
}


.crew-welcome-label {
  font-size: 9px;

  font-weight: 800;

  letter-spacing: 2px;

  opacity: 0.7;
}


.crew-welcome h2 {
  margin: 8px 0 7px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 38px;

  letter-spacing: -1.5px;
}


.crew-welcome p {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.7);
}


.crew-hub-chip {
  min-width: 235px;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 16px;

  border:
    1px solid
    rgba(255, 255, 255, 0.15);

  border-radius: 11px;

  background:
    rgba(255, 255, 255, 0.08);
}


.crew-hub-chip > div {
  display: flex;

  flex-direction: column;
}


.crew-hub-chip small {
  margin-bottom: 4px;

  color:
    rgba(255, 255, 255, 0.5);

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.5px;
}


.crew-hub-chip strong {
  font-size: 11px;
}


/* STATS */

.pilot-stat-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 18px;

  margin-bottom: 25px;
}


.pilot-stat-card {
  padding: 24px;

  border:
    1px solid #dfe7ed;

  border-radius: 13px;

  background: white;

  box-shadow:
    0 8px 20px
    rgba(15, 42, 66, 0.04);
}


.pilot-stat-top {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 20px;
}


.pilot-stat-top > span:first-child {
  color: #8b9aa7;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1.4px;
}


.pilot-stat-icon {
  color: var(--blue);

  font-size: 17px;
}


.pilot-stat-card > strong {
  display: block;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 27px;
}


.pilot-stat-card p {
  margin: 7px 0 0;

  color: var(--muted);

  font-size: 10px;
}


/* PANELS */

.crew-two-columns {
  display: grid;

  grid-template-columns:
    1.35fr 0.65fr;

  gap: 20px;

  margin-bottom: 25px;
}


.crew-panel {
  padding: 26px;

  border:
    1px solid #dfe7ed;

  border-radius: 14px;

  background: white;

  box-shadow:
    0 8px 25px
    rgba(15, 42, 66, 0.04);

  margin-bottom: 25px;
}


.crew-two-columns .crew-panel {
  margin-bottom: 0;
}


.crew-panel-header {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 25px;
}


.crew-panel-label {
  color: var(--blue);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1.6px;
}


.crew-panel-header h3 {
  margin: 5px 0 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 23px;
}


.crew-panel-link {
  color: var(--blue);

  font-size: 10px;

  font-weight: 800;
}


/* PROCHAIN VOL */

.flight-ready-badge {
  padding: 7px 10px;

  border-radius: 100px;

  color: var(--green);

  background:
    rgba(35, 182, 111, 0.1);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1px;
}


.crew-next-route {
  display: grid;

  grid-template-columns:
    1fr 1.5fr 1fr;

  align-items: center;

  gap: 20px;

  margin: 30px 0;
}


.crew-next-route strong {
  display: block;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 33px;
}


.crew-next-route span {
  color: var(--muted);

  font-size: 10px;
}


.crew-next-route .right {
  text-align: right;
}


.crew-route-center {
  text-align: center;
}


.crew-route-center > span {
  color: var(--blue);

  font-size: 9px;

  font-weight: 800;
}


.crew-route-line {
  display: flex;

  align-items: center;

  gap: 7px;

  margin: 7px 0;
}


.crew-route-line i {
  flex: 1;

  height: 1px;

  background: #d5e0e8;
}


.crew-route-line b {
  color: var(--blue);

  font-size: 18px;
}


.crew-route-center small {
  color: #8797a5;

  font-size: 9px;
}


.next-flight-details {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 10px;

  padding:
    20px 0;

  border-top:
    1px solid #edf1f4;

  border-bottom:
    1px solid #edf1f4;
}


.next-flight-details div {
  display: flex;

  flex-direction: column;
}


.next-flight-details span {
  margin-bottom: 5px;

  color: #91a0ac;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1px;
}


.next-flight-details strong {
  font-size: 10px;
}


.next-flight-actions {
  display: flex;

  justify-content: flex-end;

  gap: 10px;

  margin-top: 20px;
}


.crew-btn {
  min-height: 42px;

  padding: 0 16px;

  border-radius: 7px;

  border: 1px solid transparent;

  font-size: 10px;

  font-weight: 800;

  cursor: pointer;
}


.crew-btn.primary {
  color: white;

  background: var(--blue);
}


.crew-btn.secondary {
  color: var(--navy);

  background: white;

  border-color: #dbe4eb;
}


/* POSITION */

.pilot-location-visual {
  min-height: 210px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 11px;

  background:
    linear-gradient(
      135deg,
      #edf5fa,
      #e5eef5
    );

  overflow: hidden;
}


.location-radar {
  width: 180px;

  height: 180px;

  position: relative;

  display: grid;

  place-items: center;
}


.radar-ring {
  position: absolute;

  border:
    1px solid
    rgba(18, 111, 194, 0.22);

  border-radius: 50%;
}


.ring-one {
  width: 170px;

  height: 170px;
}


.ring-two {
  width: 120px;

  height: 120px;
}


.ring-three {
  width: 70px;

  height: 70px;
}


.radar-center {
  width: 45px;

  height: 45px;

  z-index: 2;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: white;

  background: var(--blue);

  box-shadow:
    0 0 20px
    rgba(18, 111, 194, 0.35);

  font-size: 9px;

  font-weight: 800;
}


.pilot-location-bottom {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 20px;

  margin-top: 18px;
}


.pilot-location-bottom div {
  display: flex;

  flex-direction: column;
}


.pilot-location-bottom span {
  margin-bottom: 5px;

  color: #91a0ac;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1px;
}


.pilot-location-bottom strong {
  font-size: 11px;
}


/* TABLE */

.crew-flight-table-wrapper {
  overflow-x: auto;
}


.crew-flight-table {
  width: 100%;

  border-collapse: collapse;
}


.crew-flight-table th {
  padding:
    12px 15px;

  border-bottom:
    1px solid #e4ebf0;

  color: #8d9ba7;

  text-align: left;

  font-size: 7px;

  letter-spacing: 1.3px;
}


.crew-flight-table td {
  padding:
    17px 15px;

  border-bottom:
    1px solid #eef2f5;

  color: #546575;

  font-size: 10px;
}


.crew-flight-table td strong {
  color: var(--navy);
}


.pirep-status {
  display: inline-flex;

  padding:
    6px 9px;

  border-radius: 100px;

  font-size: 8px;

  font-weight: 800;
}


.pirep-status.approved {
  color: var(--green);

  background:
    rgba(35, 182, 111, 0.1);
}


.pirep-status.pending {
  color: #d79222;

  background:
    rgba(233, 156, 44, 0.12);
}


/* PROGRESSION */

.rank-header {
  display: flex;

  align-items: center;

  gap: 15px;

  margin-bottom: 25px;
}


.rank-icon {
  width: 50px;

  height: 50px;

  display: grid;

  place-items: center;

  border-radius: 12px;

  color: white;

  background:
    linear-gradient(
      135deg,
      var(--blue),
      #0b4d87
    );

  font-size: 20px;
}


.rank-header > div:last-child {
  display: flex;

  flex-direction: column;
}


.rank-header span {
  color: #8a99a6;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.2px;
}


.rank-header strong {
  margin-top: 4px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 18px;
}


.rank-progress-info {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 10px;

  font-size: 10px;
}


.rank-progress-info span {
  color: var(--muted);
}


.rank-progress {
  width: 100%;

  height: 7px;

  overflow: hidden;

  border-radius: 100px;

  background: #e5ebef;
}


.rank-progress div {
  height: 100%;

  border-radius: 100px;

  background:
    linear-gradient(
      90deg,
      #126fc2,
      #3d9fec
    );
}


.rank-description {
  margin:
    13px 0 0;

  color: var(--muted);

  font-size: 10px;
}


/* QUALIFICATIONS */

.qualification-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 10px;
}


.qualification-item {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 14px;

  border:
    1px solid #e0e7ed;

  border-radius: 9px;
}


.qualification-item > span {
  width: 30px;

  height: 30px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  font-size: 10px;

  font-weight: 800;
}


.qualification-item.unlocked > span {
  color: var(--green);

  background:
    rgba(35, 182, 111, 0.1);
}


.qualification-item.locked > span {
  color: #b2bbc3;

  background: #edf1f4;
}


.qualification-item > div {
  display: flex;

  flex-direction: column;
}


.qualification-item strong {
  font-size: 10px;
}


.qualification-item small {
  margin-top: 3px;

  color: var(--muted);

  font-size: 8px;
}


/* NEWS */

.crew-news-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 15px;
}


.crew-news-card {
  padding: 20px;

  border:
    1px solid #e0e7ed;

  border-radius: 10px;

  background: #fafcfd;
}


.crew-news-card > span {
  color: var(--blue);

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1px;
}


.crew-news-card h4 {
  margin:
    9px 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 14px;
}


.crew-news-card p {
  margin: 0;

  color: var(--muted);

  font-size: 10px;

  line-height: 1.7;
}


/* RESPONSIVE */

@media (max-width: 1200px) {

  .pilot-stat-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .crew-two-columns {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 900px) {

  .crew-sidebar {
    transform:
      translateX(-100%);

    transition: 0.3s;
  }


  .crew-sidebar.open {
    transform:
      translateX(0);
  }


  .crew-main {
    margin-left: 0;
  }


  .crew-mobile-menu {
    display: block;
  }


  .crew-topbar {
    padding:
      0 20px;
  }


  .crew-content {
    padding: 20px;
  }


  .crew-welcome {
    align-items: flex-start;

    flex-direction: column;
  }


  .crew-news-grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 600px) {

  .pilot-stat-grid {
    grid-template-columns: 1fr;
  }


  .crew-topbar-right
  .crew-network-status {
    display: none;
  }


  .crew-top-profile > div:last-child {
    display: none;
  }


  .crew-welcome {
    padding: 25px;
  }


  .crew-welcome h2 {
    font-size: 30px;
  }


  .crew-hub-chip {
    min-width: 100%;
  }


  .crew-next-route {
    grid-template-columns:
      1fr
      1fr
      1fr;
  }


  .crew-next-route strong {
    font-size: 25px;
  }


  .next-flight-details {
    grid-template-columns:
      repeat(2, 1fr);

    gap: 20px;
  }


  .qualification-grid {
    grid-template-columns: 1fr;
  }


  .pilot-location-bottom {
    grid-template-columns: 1fr;
  }

}
/* =========================================================
   CREW CENTER - RESERVATION DE VOL
========================================================= */

.booking-welcome {
  background:
    linear-gradient(
      120deg,
      #092642,
      #126fc2
    );
}

.flight-search-form {
  display: grid;

  grid-template-columns:
    1.2fr
    1.4fr
    1.1fr
    1.1fr
    auto;

  gap: 14px;

  align-items: end;
}

.flight-search-field {
  display: flex;

  flex-direction: column;
}

.flight-search-field label {
  margin-bottom: 8px;

  color: #7f8e9b;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1.2px;

  text-transform: uppercase;
}

.flight-search-field select {
  height: 47px;

  padding: 0 12px;

  border: 1px solid #d8e2e9;

  border-radius: 8px;

  outline: none;

  color: var(--navy);

  background: #fafcfd;

  font-size: 11px;
}

.flight-search-field select:focus {
  border-color: var(--blue);

  background: white;

  box-shadow:
    0 0 0 3px
    rgba(18, 111, 194, 0.08);
}

.flight-search-button {
  height: 47px;

  padding: 0 22px;
}

.booking-summary-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 18px;

  margin-bottom: 25px;
}

.booking-summary-card {
  padding: 22px;

  border: 1px solid #dfe7ed;

  border-radius: 12px;

  background: white;
}

.booking-summary-card > span {
  color: #8d9ba7;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.3px;
}

.booking-summary-card strong {
  display: block;

  margin-top: 8px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 24px;
}

.booking-summary-card p {
  margin: 6px 0 0;

  color: var(--muted);

  font-size: 9px;
}

.booking-results-count {
  padding: 7px 10px;

  border-radius: 100px;

  color: var(--blue);

  background:
    rgba(18, 111, 194, 0.08);

  font-size: 8px;

  font-weight: 800;
}

.available-flight-list {
  display: flex;

  flex-direction: column;

  gap: 14px;
}

.available-flight-card {
  border: 1px solid #dfe7ed;

  border-radius: 12px;

  overflow: hidden;

  background: #fbfcfd;

  transition: 0.2s ease;
}

.available-flight-card:hover {
  border-color: #c8d9e6;

  box-shadow:
    0 10px 25px
    rgba(16, 45, 70, 0.06);
}

.available-flight-main {
  display: grid;

  grid-template-columns:
    140px 1fr;

  gap: 25px;

  align-items: center;

  padding: 22px 24px;
}

.available-flight-code {
  display: flex;

  flex-direction: column;

  gap: 6px;
}

.available-flight-code span {
  color: var(--blue);

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 22px;

  font-weight: 800;
}

.available-flight-code strong {
  color: var(--muted);

  font-size: 8px;

  text-transform: uppercase;

  letter-spacing: 1.1px;
}

.available-flight-route {
  display: grid;

  grid-template-columns:
    1fr 1.5fr 1fr;

  align-items: center;

  gap: 25px;
}

.available-flight-route strong {
  display: block;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 28px;
}

.available-flight-route span {
  color: var(--muted);

  font-size: 9px;
}

.available-flight-route .right {
  text-align: right;
}

.available-route-middle {
  text-align: center;
}

.available-route-middle > div {
  display: flex;

  align-items: center;

  gap: 7px;

  margin: 5px 0;

  color: var(--blue);
}

.available-route-middle > div span {
  flex: 1;

  height: 1px;

  background: #d5e0e8;
}

.available-route-middle small {
  color: #8a9aa7;

  font-size: 8px;
}

.available-flight-info {
  display: grid;

  grid-template-columns:
    1fr 1fr 1fr auto;

  gap: 20px;

  align-items: center;

  padding: 16px 24px;

  border-top: 1px solid #e9eef2;

  background: white;
}

.available-flight-info > div {
  display: flex;

  flex-direction: column;
}

.available-flight-info span {
  margin-bottom: 4px;

  color: #98a5af;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1px;
}

.available-flight-info strong {
  font-size: 10px;
}

.booking-empty {
  display: none;

  padding: 40px;

  text-align: center;

  color: var(--muted);

  font-size: 12px;
}

.available-flight-card.hidden {
  display: none;
}

.book-flight-button.booked {
  color: var(--green);

  background:
    rgba(35, 182, 111, 0.1);

  cursor: default;
}


/* RESPONSIVE */

@media (max-width: 1200px) {

  .flight-search-form {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .flight-search-button {
    width: 100%;
  }

}

@media (max-width: 750px) {

  .flight-search-form {
    grid-template-columns: 1fr;
  }

  .booking-summary-grid {
    grid-template-columns: 1fr;
  }

  .available-flight-main {
    grid-template-columns: 1fr;
  }

  .available-flight-route {
    grid-template-columns:
      1fr
      1fr
      1fr;

    gap: 12px;
  }

  .available-flight-route strong {
    font-size: 22px;
  }

  .available-flight-info {
    grid-template-columns:
      1fr 1fr;
  }

  .available-flight-info button {
    width: 100%;
  }

}
/* =========================================================
   CREW CENTER - MES VOLS
========================================================= */

.active-flight-empty {
  min-height: 300px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;
}

.active-flight-empty-icon {
  width: 70px;

  height: 70px;

  display: grid;

  place-items: center;

  margin-bottom: 18px;

  border-radius: 50%;

  color: var(--blue);

  background:
    rgba(18, 111, 194, 0.08);

  font-size: 27px;
}

.active-flight-empty h4 {
  margin: 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 20px;
}

.active-flight-empty p {
  margin:
    8px 0 20px;

  color: var(--muted);

  font-size: 11px;
}

.active-flight-content {
  display: none;
}

.active-flight-route {
  display: grid;

  grid-template-columns:
    1fr
    1.5fr
    1fr;

  align-items: center;

  gap: 25px;

  padding: 25px 0;
}

.active-flight-route strong {
  display: block;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 34px;
}

.active-flight-route span {
  color: var(--muted);

  font-size: 10px;
}

.active-flight-route .right {
  text-align: right;
}

.active-flight-center {
  text-align: center;
}

.active-flight-center > span {
  color: var(--blue);

  font-size: 9px;

  font-weight: 800;
}

.active-flight-center > div {
  display: flex;

  align-items: center;

  gap: 8px;

  margin: 7px 0;
}

.active-flight-center i {
  flex: 1;

  height: 1px;

  background: #d5e0e8;
}

.active-flight-center b {
  color: var(--blue);

  font-size: 18px;
}

.active-flight-center small {
  color: #8998a5;

  font-size: 9px;
}

.active-flight-details {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 20px;

  padding: 22px 0;

  border-top: 1px solid #e8eef2;

  border-bottom: 1px solid #e8eef2;
}

.active-flight-details div {
  display: flex;

  flex-direction: column;
}

.active-flight-details span {
  margin-bottom: 5px;

  color: #96a4af;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1px;
}

.active-flight-details strong {
  font-size: 10px;
}

.active-flight-actions {
  display: flex;

  justify-content: flex-end;

  gap: 10px;

  margin-top: 20px;
}

.flight-checklist {
  display: flex;

  flex-direction: column;

  gap: 12px;
}

.flight-check-item {
  display: flex;

  align-items: flex-start;

  gap: 12px;

  padding: 15px;

  border: 1px solid #e1e8ed;

  border-radius: 9px;

  background: #fafcfd;
}

.flight-check-item > span {
  width: 30px;

  height: 30px;

  flex-shrink: 0;

  display: grid;

  place-items: center;

  border-radius: 50%;

  font-size: 10px;

  font-weight: 800;
}

.check-ok {
  color: var(--green);

  background:
    rgba(35, 182, 111, 0.1);
}

.check-warning {
  color: var(--orange);

  background:
    rgba(233, 156, 44, 0.12);
}

.flight-check-item strong {
  font-size: 10px;
}

.flight-check-item p {
  margin:
    4px 0 0;

  color: var(--muted);

  font-size: 9px;

  line-height: 1.6;
}

.flight-timeline {
  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 230px;
}

.flight-timeline-item {
  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;
}

.flight-timeline-item > span {
  width: 18px;

  height: 18px;

  border: 3px solid #dce5eb;

  border-radius: 50%;

  background: white;
}

.flight-timeline-item.completed > span {
  border-color: var(--green);

  background: var(--green);
}

.flight-timeline-item.current > span {
  border-color: var(--blue);

  background: var(--blue);

  box-shadow:
    0 0 0 5px
    rgba(18, 111, 194, 0.1);
}

.flight-timeline-item strong {
  display: block;

  margin-top: 10px;

  font-size: 9px;
}

.flight-timeline-item small {
  display: block;

  margin-top: 3px;

  color: var(--muted);

  font-size: 7px;
}

.flight-timeline-line {
  width: 55px;

  height: 2px;

  margin:
    0 5px 27px;

  background: #dce5eb;
}

@media (max-width: 700px) {

  .active-flight-details {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .active-flight-actions {
    align-items: stretch;

    flex-direction: column;
  }

  .active-flight-route strong {
    font-size: 25px;
  }

  .flight-timeline {
    align-items: flex-start;

    flex-direction: column;

    gap: 0;
  }

  .flight-timeline-item {
    flex-direction: row;

    gap: 10px;

    text-align: left;
  }

  .flight-timeline-item > div {
    padding-bottom: 15px;
  }

  .flight-timeline-line {
    width: 2px;

    height: 35px;

    margin:
      -3px 0 -3px 8px;
  }

}
/* =========================================================
   CREW CENTER - PIREP
========================================================= */

.pirep-no-flight {
  min-height: 330px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;
}

.pirep-no-flight-icon {
  width: 72px;

  height: 72px;

  display: grid;

  place-items: center;

  margin-bottom: 18px;

  border-radius: 50%;

  color: var(--blue);

  background:
    rgba(18, 111, 194, 0.08);

  font-size: 28px;
}

.pirep-no-flight h3 {
  margin: 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 22px;
}

.pirep-no-flight p {
  max-width: 420px;

  margin:
    10px 0 22px;

  color: var(--muted);

  font-size: 11px;

  line-height: 1.7;
}

.pirep-route {
  display: grid;

  grid-template-columns:
    1fr
    1.5fr
    1fr;

  align-items: center;

  gap: 25px;

  padding: 20px 0 30px;
}

.pirep-route strong {
  display: block;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 35px;
}

.pirep-route span {
  color: var(--muted);

  font-size: 10px;
}

.pirep-route .right {
  text-align: right;
}

.pirep-route-center {
  text-align: center;
}

.pirep-route-center > span {
  color: var(--blue);

  font-size: 9px;

  font-weight: 800;
}

.pirep-route-center > div {
  display: flex;

  align-items: center;

  gap: 8px;

  margin-top: 8px;

  color: var(--blue);
}

.pirep-route-center i {
  flex: 1;

  height: 1px;

  background: #d7e0e7;
}

.pirep-route-center b {
  font-size: 18px;
}

.pirep-flight-info {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 18px;

  padding-top: 20px;

  border-top: 1px solid #e8eef2;
}

.pirep-flight-info > div {
  display: flex;

  flex-direction: column;
}

.pirep-flight-info span {
  margin-bottom: 5px;

  color: #94a2ad;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1px;
}

.pirep-flight-info strong {
  font-size: 10px;
}


/* FORMULAIRE */

.pirep-form-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 18px;
}

.pirep-field {
  display: flex;

  flex-direction: column;

  margin-bottom: 20px;
}

.pirep-field label {
  margin-bottom: 8px;

  color: #7d8d9b;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1px;

  text-transform: uppercase;
}

.pirep-field input,
.pirep-field select,
.pirep-field textarea {
  width: 100%;

  border: 1px solid #d8e2e9;

  border-radius: 8px;

  outline: none;

  color: var(--navy);

  background: #fafcfd;

  font-family: "Inter", sans-serif;

  font-size: 11px;

  transition: 0.2s;
}

.pirep-field input,
.pirep-field select {
  height: 48px;

  padding: 0 13px;
}

.pirep-field textarea {
  resize: vertical;

  min-height: 110px;

  padding: 13px;
}

.pirep-field input:focus,
.pirep-field select:focus,
.pirep-field textarea:focus {
  border-color: var(--blue);

  background: white;

  box-shadow:
    0 0 0 3px
    rgba(18, 111, 194, 0.08);
}

.pirep-field-full {
  width: 100%;
}

.pirep-confirmation-box {
  padding: 16px;

  border: 1px solid #e0e7ed;

  border-radius: 9px;

  background: #fafcfd;
}

.pirep-confirmation-box label {
  display: flex;

  align-items: flex-start;

  gap: 10px;

  color: var(--muted);

  font-size: 10px;

  line-height: 1.6;

  cursor: pointer;
}

.pirep-confirmation-box input {
  margin-top: 2px;

  accent-color: var(--blue);
}

.pirep-actions {
  display: flex;

  justify-content: flex-end;

  gap: 10px;

  margin-top: 20px;
}

.pirep-message {
  min-height: 20px;

  margin-top: 15px;

  text-align: right;

  font-size: 10px;

  font-weight: 700;
}

.pirep-message.success {
  color: var(--green);
}

.pirep-message.error {
  color: #c44747;
}

@media (max-width: 1100px) {

  .pirep-form-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}

@media (max-width: 700px) {

  .pirep-route strong {
    font-size: 25px;
  }

  .pirep-flight-info {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .pirep-form-grid {
    grid-template-columns: 1fr;
  }

  .pirep-actions {
    flex-direction: column;
  }

}
/* =========================================================
   CREW CENTER - PROGRESSION
========================================================= */

.career-hero {
  min-height: 200px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  margin-bottom: 25px;

  padding: 35px;

  border-radius: 16px;

  color: white;

  background:
    linear-gradient(
      120deg,
      #071a2f,
      #0d4f88,
      #126fc2
    );

  box-shadow:
    0 15px 35px
    rgba(15, 42, 66, 0.14);
}

.career-hero h2 {
  margin: 8px 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 42px;

  letter-spacing: -2px;
}

.career-hero p {
  max-width: 600px;

  margin: 0;

  color:
    rgba(255, 255, 255, 0.7);

  font-size: 12px;

  line-height: 1.7;
}

.career-rank-emblem {
  width: 120px;

  height: 120px;

  flex-shrink: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  border:
    1px solid
    rgba(255, 255, 255, 0.15);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(10px);
}

.career-rank-emblem span {
  margin-bottom: 5px;

  font-size: 30px;
}

.career-rank-emblem strong {
  font-size: 13px;

  letter-spacing: 3px;
}


/* STATS */

.career-stat-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 18px;

  margin-bottom: 25px;
}

.career-stat-card {
  padding: 22px;

  border:
    1px solid #dfe7ed;

  border-radius: 12px;

  background: white;
}

.career-stat-card > span {
  color: #8d9ba7;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.3px;
}

.career-stat-card strong {
  display: block;

  margin-top: 8px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 25px;
}

.career-stat-card p {
  margin:
    6px 0 0;

  color: var(--muted);

  font-size: 9px;
}


/* GRADE */

.career-level-badge {
  padding:
    7px 11px;

  border-radius: 100px;

  color: var(--blue);

  background:
    rgba(18, 111, 194, 0.08);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1px;
}

.career-progress-large {
  padding:
    10px 0;
}

.career-progress-header {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 12px;

  font-size: 10px;
}

.career-progress-header span {
  color: var(--muted);
}

.career-progress-bar {
  height: 10px;

  overflow: hidden;

  border-radius: 100px;

  background: #e5ebef;
}

.career-progress-bar div {
  height: 100%;

  border-radius: 100px;

  background:
    linear-gradient(
      90deg,
      #126fc2,
      #42a1ec
    );
}

.career-progress-footer {
  display: flex;

  justify-content: space-between;

  margin-top: 8px;

  color: #82919e;

  font-size: 8px;
}


/* LISTE DES GRADES */

.career-rank-list {
  display: flex;

  flex-direction: column;

  gap: 10px;
}

.career-rank-card {
  min-height: 105px;

  display: grid;

  grid-template-columns:
    60px 1fr auto;

  align-items: center;

  gap: 20px;

  padding: 20px;

  border:
    1px solid #e0e7ed;

  border-radius: 11px;

  background: #fafcfd;
}

.career-rank-card.completed {
  border-color:
    rgba(35, 182, 111, 0.25);

  background:
    rgba(35, 182, 111, 0.03);
}

.career-rank-card.current {
  border-color:
    rgba(18, 111, 194, 0.35);

  background:
    rgba(18, 111, 194, 0.05);

  box-shadow:
    0 6px 20px
    rgba(18, 111, 194, 0.07);
}

.career-rank-card.locked {
  opacity: 0.65;
}

.career-rank-number {
  width: 48px;

  height: 48px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: var(--blue);

  background:
    rgba(18, 111, 194, 0.08);

  font-size: 10px;

  font-weight: 800;
}

.career-rank-card.completed
.career-rank-number {
  color: var(--green);

  background:
    rgba(35, 182, 111, 0.1);
}

.career-rank-content > span {
  color: #8c9aa6;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1px;
}

.career-rank-content h4 {
  margin:
    5px 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 16px;
}

.career-rank-content p {
  margin: 0;

  color: var(--muted);

  font-size: 9px;

  line-height: 1.6;
}

.career-rank-status {
  min-width: 50px;

  text-align: center;

  color: var(--blue);

  font-size: 9px;

  font-weight: 800;
}

.career-rank-card.completed
.career-rank-status {
  color: var(--green);
}


/* CATÉGORIES */

.career-category-list {
  display: flex;

  flex-direction: column;

  gap: 19px;
}

.career-category-row > div:first-child {
  display: flex;

  justify-content: space-between;

  margin-bottom: 7px;

  font-size: 9px;
}

.career-category-row span {
  color: var(--muted);
}

.career-category-row strong {
  font-size: 9px;
}

.career-category-bar {
  width: 100%;

  height: 7px;

  overflow: hidden;

  border-radius: 100px;

  background: #e8edf1;
}

.career-category-bar span {
  display: block;

  height: 100%;

  border-radius: 100px;

  background: var(--blue);
}


/* OBJECTIFS */

.career-objective-list {
  display: flex;

  flex-direction: column;

  gap: 11px;
}

.career-objective {
  display: grid;

  grid-template-columns:
    42px 1fr auto;

  align-items: center;

  gap: 12px;

  padding: 13px;

  border:
    1px solid #e1e8ed;

  border-radius: 9px;

  background: #fafcfd;
}

.career-objective-icon {
  width: 38px;

  height: 38px;

  display: grid;

  place-items: center;

  border-radius: 10px;

  color: var(--blue);

  background:
    rgba(18, 111, 194, 0.08);

  font-size: 15px;
}

.career-objective > div:nth-child(2) {
  display: flex;

  flex-direction: column;
}

.career-objective strong {
  font-size: 10px;
}

.career-objective span {
  margin-top: 3px;

  color: var(--muted);

  font-size: 8px;
}

.career-objective small {
  color: var(--blue);

  font-size: 9px;

  font-weight: 800;
}


/* RESPONSIVE */

@media (max-width: 1050px) {

  .career-stat-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}

@media (max-width: 650px) {

  .career-hero {
    align-items: flex-start;

    flex-direction: column;
  }

  .career-rank-emblem {
    width: 90px;

    height: 90px;
  }

  .career-stat-grid {
    grid-template-columns: 1fr;
  }

  .career-rank-card {
    grid-template-columns:
      50px 1fr;
  }

  .career-rank-status {
    grid-column: 2;

    text-align: left;
  }

  .career-progress-header {
    flex-direction: column;

    gap: 5px;
  }

}
/* =========================================================
   CREW CENTER - QUALIFICATIONS
========================================================= */

.qualification-hero {
  min-height: 200px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  margin-bottom: 25px;

  padding: 35px;

  border-radius: 16px;

  color: white;

  background:
    linear-gradient(
      120deg,
      #071a2f,
      #0c416f,
      #126fc2
    );
}


.qualification-hero h2 {
  margin: 8px 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 39px;

  letter-spacing: -1.5px;
}


.qualification-hero p {
  max-width: 620px;

  margin: 0;

  color:
    rgba(255, 255, 255, 0.7);

  font-size: 12px;

  line-height: 1.7;
}


.qualification-hero-score {
  width: 125px;

  height: 125px;

  flex-shrink: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  border:
    1px solid
    rgba(255, 255, 255, 0.16);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.08);
}


.qualification-hero-score strong {
  font-family:
    "Montserrat",
    sans-serif;

  font-size: 39px;
}


.qualification-hero-score span {
  margin-top: 4px;

  color:
    rgba(255, 255, 255, 0.55);

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.3px;
}


/* SUMMARY */

.qualification-summary-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 18px;

  margin-bottom: 25px;
}


.qualification-summary-card {
  padding: 22px;

  border:
    1px solid #dfe7ed;

  border-radius: 12px;

  background: white;
}


.qualification-summary-card > span {
  color: #8e9ca7;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.1px;
}


.qualification-summary-card strong {
  display: block;

  margin-top: 8px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 25px;
}


.qualification-summary-card p {
  margin:
    5px 0 0;

  color: var(--muted);

  font-size: 9px;
}


/* CARDS */

.qualification-card-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 16px;
}


.qualification-big-card {
  min-height: 310px;

  display: flex;

  flex-direction: column;

  padding: 23px;

  border:
    1px solid #dfe7ed;

  border-radius: 13px;

  background: #fbfcfd;

  transition:
    transform 0.2s,
    box-shadow 0.2s,
    border 0.2s;
}


.qualification-big-card:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 12px 30px
    rgba(13, 43, 68, 0.07);
}


.qualification-big-card.unlocked {
  border-color:
    rgba(35, 182, 111, 0.25);
}


.qualification-big-card.featured {
  border-color:
    rgba(18, 111, 194, 0.4);

  background:
    linear-gradient(
      145deg,
      rgba(18, 111, 194, 0.06),
      white
    );
}


.qualification-big-card.locked {
  opacity: 0.75;
}


.qualification-card-top {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 22px;
}


.qualification-card-icon {
  width: 42px;

  height: 42px;

  display: grid;

  place-items: center;

  border-radius: 10px;

  color: var(--green);

  background:
    rgba(35, 182, 111, 0.1);

  font-size: 15px;

  font-weight: 800;
}


.qualification-card-icon.locked {
  color: #8d9aa4;

  background: #e9eef2;
}


.qualification-state {
  padding:
    6px 9px;

  border-radius: 100px;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1px;
}


.qualification-state.active {
  color: var(--green);

  background:
    rgba(35, 182, 111, 0.1);
}


.qualification-state.locked {
  color: #8896a1;

  background: #edf1f4;
}


.qualification-type {
  color: var(--blue);

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.4px;
}


.qualification-big-card h4 {
  margin:
    6px 0 8px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 20px;
}


.qualification-big-card > p {
  min-height: 48px;

  margin: 0 0 18px;

  color: var(--muted);

  font-size: 9px;

  line-height: 1.7;
}


.qualification-aircraft {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-bottom: 20px;
}


.qualification-aircraft span {
  padding:
    5px 7px;

  border-radius: 5px;

  color: var(--navy);

  background: #eaf0f5;

  font-size: 7px;

  font-weight: 800;
}


.qualification-condition {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  margin-top: auto;

  padding-top: 15px;

  border-top:
    1px solid #e6ebef;
}


.qualification-condition span {
  color: #8d9ba6;

  font-size: 8px;
}


.qualification-condition strong {
  font-size: 9px;
}


/* LOCKED PROGRESS */

.qualification-progress {
  margin-top: auto;

  padding-top: 15px;

  border-top:
    1px solid #e4e9ed;
}


.qualification-progress > div:first-child {
  display: flex;

  justify-content: space-between;

  margin-bottom: 8px;
}


.qualification-progress span {
  color: #8796a1;

  font-size: 8px;
}


.qualification-progress strong {
  font-size: 8px;
}


.qualification-progress-bar {
  height: 6px;

  overflow: hidden;

  border-radius: 100px;

  background: #e5ebef;
}


.qualification-progress-bar span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background: var(--blue);
}


/* AUTHORIZED */

.authorized-fleet-list {
  display: flex;

  flex-direction: column;

  gap: 8px;
}


.authorized-fleet-list > div {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding:
    13px 15px;

  border:
    1px solid #e2e8ed;

  border-radius: 8px;

  background: #fafcfd;
}


.authorized-fleet-list span {
  color: var(--text);

  font-size: 10px;
}


.authorized-fleet-list strong {
  color: var(--green);

  font-size: 8px;
}


.authorized-fleet-list .locked {
  opacity: 0.6;
}


.authorized-fleet-list .locked strong {
  color: #8d9aa4;
}


/* NEXT */

.qualification-next {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  min-height: 360px;

  text-align: center;
}


.qualification-next-icon {
  width: 70px;

  height: 70px;

  display: grid;

  place-items: center;

  margin-bottom: 15px;

  border-radius: 50%;

  color: var(--blue);

  background:
    rgba(18, 111, 194, 0.08);

  font-size: 26px;
}


.qualification-next h4 {
  margin: 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 20px;
}


.qualification-next p {
  max-width: 390px;

  margin:
    9px 0 22px;

  color: var(--muted);

  font-size: 10px;

  line-height: 1.7;
}


.qualification-next-progress {
  width: 100%;

  max-width: 360px;
}


.qualification-next-progress > div:first-child {
  display: flex;

  justify-content: space-between;

  margin-bottom: 7px;

  color: #8796a1;

  font-size: 8px;
}


.qualification-next-progress > div:last-child {
  height: 8px;

  overflow: hidden;

  border-radius: 100px;

  background: #e6ebef;
}


.qualification-next-progress > div:last-child span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #126fc2,
      #42a1ec
    );
}


.qualification-next > strong {
  margin-top: 12px;

  color: var(--blue);

  font-size: 10px;
}


/* RESPONSIVE */

@media (max-width: 1150px) {

  .qualification-summary-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .qualification-card-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


@media (max-width: 700px) {

  .qualification-hero {
    align-items: flex-start;

    flex-direction: column;
  }


  .qualification-hero-score {
    width: 90px;

    height: 90px;
  }


  .qualification-summary-grid {
    grid-template-columns: 1fr;
  }


  .qualification-card-grid {
    grid-template-columns: 1fr;
  }

}
/* =========================================================
   CREW CENTER - TOURS
========================================================= */

.tours-hero {
  min-height: 205px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  margin-bottom: 25px;

  padding: 35px;

  border-radius: 16px;

  color: white;

  background:
    linear-gradient(
      120deg,
      #06192d,
      #0b426f,
      #126fc2
    );
}

.tours-hero h2 {
  margin: 8px 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 40px;

  letter-spacing: -1.6px;
}

.tours-hero p {
  max-width: 650px;

  margin: 0;

  color:
    rgba(255, 255, 255, 0.7);

  font-size: 12px;

  line-height: 1.7;
}

.tours-hero-badge {
  width: 120px;

  height: 120px;

  flex-shrink: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  border:
    1px solid
    rgba(255, 255, 255, 0.16);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.08);
}

.tours-hero-badge > span {
  font-size: 20px;
}

.tours-hero-badge strong {
  margin-top: 2px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 33px;
}

.tours-hero-badge small {
  color:
    rgba(255, 255, 255, 0.5);

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.5px;
}


/* SUMMARY */

.tours-summary-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 18px;

  margin-bottom: 25px;
}

.tours-summary-card {
  padding: 22px;

  border:
    1px solid #dfe7ed;

  border-radius: 12px;

  background: white;
}

.tours-summary-card > span {
  color: #8c9aa6;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.2px;
}

.tours-summary-card strong {
  display: block;

  margin-top: 8px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 27px;
}

.tours-summary-card p {
  margin:
    5px 0 0;

  color: var(--muted);

  font-size: 9px;
}


/* ACTIVE TOURS */

.active-tour-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 17px;
}

.active-tour-card {
  padding: 24px;

  border:
    1px solid
    rgba(18, 111, 194, 0.25);

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      rgba(18, 111, 194, 0.04),
      white
    );
}

.active-tour-header {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 15px;
}

.active-tour-header > div > span {
  color: var(--blue);

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.3px;
}

.active-tour-header h4 {
  margin:
    5px 0 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 20px;
}

.tour-status {
  padding:
    6px 9px;

  border-radius: 100px;

  font-size: 7px;

  font-weight: 800;
}

.tour-status.active {
  color: var(--blue);

  background:
    rgba(18, 111, 194, 0.08);
}

.active-tour-card > p {
  margin:
    12px 0 20px;

  color: var(--muted);

  font-size: 10px;

  line-height: 1.7;
}

.active-tour-progress-info {
  display: flex;

  justify-content: space-between;

  gap: 15px;

  margin-bottom: 8px;

  font-size: 9px;
}

.active-tour-progress-info span {
  color: var(--muted);
}

.tour-progress-bar {
  height: 7px;

  overflow: hidden;

  border-radius: 100px;

  background: #e5ebef;
}

.tour-progress-bar span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--blue),
      #44a2ec
    );
}

.active-tour-next {
  margin:
    20px 0;

  padding: 15px;

  border:
    1px solid #e2e8ed;

  border-radius: 9px;

  background: #fafcfd;
}

.active-tour-next > span {
  color: #8d9ba6;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.1px;
}

.active-tour-next > div {
  display: flex;

  align-items: center;

  gap: 12px;

  margin: 7px 0 4px;
}

.active-tour-next strong {
  font-family:
    "Montserrat",
    sans-serif;

  font-size: 16px;
}

.active-tour-next small {
  color: var(--muted);

  font-size: 8px;
}


/* CATALOGUE */

.tour-catalog-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 18px;
}

.tour-card {
  overflow: hidden;

  border:
    1px solid #dfe7ed;

  border-radius: 13px;

  background: white;

  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.tour-card:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 13px 30px
    rgba(15, 42, 66, 0.07);
}

.tour-card-cover {
  height: 145px;

  position: relative;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  padding: 18px;

  color: white;
}

.tour-france {
  background:
    linear-gradient(
      135deg,
      #0a2a49,
      #126fc2
    );
}

.tour-europe {
  background:
    linear-gradient(
      135deg,
      #183153,
      #4169a1
    );
}

.tour-med {
  background:
    linear-gradient(
      135deg,
      #0b5575,
      #1ca3b8
    );
}

.tour-atlantic {
  background:
    linear-gradient(
      135deg,
      #031d38,
      #075a95
    );
}

.tour-africa {
  background:
    linear-gradient(
      135deg,
      #5d3f1f,
      #a87535
    );
}

.tour-vfr {
  background:
    linear-gradient(
      135deg,
      #245a3a,
      #4b9a61
    );
}

.tour-cargo {
  background:
    linear-gradient(
      135deg,
      #222b33,
      #596672
    );
}

.tour-world {
  background:
    linear-gradient(
      135deg,
      #241749,
      #4e3a93
    );
}

.tour-card-category {
  position: absolute;

  top: 16px;
  left: 16px;

  padding:
    6px 8px;

  border:
    1px solid
    rgba(255, 255, 255, 0.18);

  border-radius: 100px;

  background:
    rgba(255, 255, 255, 0.1);

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.1px;
}

.tour-card-icon {
  margin-left: auto;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 25px;

  font-weight: 800;

  opacity: 0.9;
}

.tour-card-body {
  padding: 22px;
}

.tour-card-body h4 {
  margin: 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 18px;
}

.tour-card-body > p {
  min-height: 48px;

  margin:
    9px 0 18px;

  color: var(--muted);

  font-size: 9px;

  line-height: 1.7;
}

.tour-card-stats {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 8px;

  margin-bottom: 16px;
}

.tour-card-stats div {
  display: flex;

  flex-direction: column;

  padding: 9px;

  border-radius: 7px;

  background: #f3f6f8;
}

.tour-card-stats span {
  color: #8c99a4;

  font-size: 6px;

  font-weight: 800;

  letter-spacing: 0.8px;
}

.tour-card-stats strong {
  margin-top: 4px;

  font-size: 9px;
}

.tour-card-route {
  margin-bottom: 17px;

  padding: 11px;

  border:
    1px dashed #d8e1e8;

  border-radius: 7px;

  color: #748592;

  background: #fafcfd;

  font-size: 8px;

  line-height: 1.6;
}

.tour-card-body .crew-btn {
  width: 100%;
}


/* BADGES */

.tour-badge-grid {
  display: grid;

  grid-template-columns:
    repeat(6, 1fr);

  gap: 14px;
}

.tour-badge {
  min-height: 150px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 15px;

  border:
    1px solid #e0e7ed;

  border-radius: 11px;

  text-align: center;

  background: #fafcfd;
}

.tour-badge > div {
  width: 55px;

  height: 55px;

  display: grid;

  place-items: center;

  margin-bottom: 10px;

  border-radius: 50%;

  color: white;

  background:
    linear-gradient(
      135deg,
      var(--blue),
      #084d86
    );

  font-size: 10px;

  font-weight: 800;
}

.tour-badge strong {
  font-size: 9px;
}

.tour-badge span {
  margin-top: 5px;

  color: var(--green);

  font-size: 7px;

  font-weight: 800;
}

.tour-badge.locked {
  opacity: 0.45;
}

.tour-badge.locked span {
  color: var(--muted);
}


/* RESPONSIVE */

@media (max-width: 1200px) {

  .tour-catalog-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .tour-badge-grid {
    grid-template-columns:
      repeat(3, 1fr);
  }

}

@media (max-width: 900px) {

  .tours-summary-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .active-tour-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 650px) {

  .tours-hero {
    align-items: flex-start;

    flex-direction: column;
  }

  .tours-hero-badge {
    width: 90px;

    height: 90px;
  }

  .tours-summary-grid {
    grid-template-columns: 1fr;
  }

  .tour-catalog-grid {
    grid-template-columns: 1fr;
  }

  .tour-badge-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}
/* =========================================================
   CREW CENTER - PROFIL PILOTE
========================================================= */

.profile-hero {
  min-height: 220px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  margin-bottom: 25px;

  padding: 35px;

  border-radius: 16px;

  color: white;

  background:
    linear-gradient(
      120deg,
      #06192d,
      #0c416f,
      #126fc2
    );
}


.profile-main-info {
  display: flex;

  align-items: center;

  gap: 25px;
}


.profile-large-avatar {
  width: 95px;

  height: 95px;

  flex-shrink: 0;

  display: grid;

  place-items: center;

  border:
    2px solid
    rgba(255, 255, 255, 0.3);

  border-radius: 50%;

  color: white;

  background:
    rgba(255, 255, 255, 0.12);

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 25px;

  font-weight: 800;
}


.profile-main-info h2 {
  margin:
    7px 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 35px;

  letter-spacing: -1.4px;
}


.profile-main-info p {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.68);

  font-size: 11px;
}


.profile-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 15px;
}


.profile-tags span {
  padding:
    6px 9px;

  border:
    1px solid
    rgba(255, 255, 255, 0.16);

  border-radius: 100px;

  color:
    rgba(255, 255, 255, 0.85);

  background:
    rgba(255, 255, 255, 0.07);

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 0.8px;
}


.profile-id-card {
  width: 170px;

  min-height: 115px;

  flex-shrink: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  border:
    1px solid
    rgba(255, 255, 255, 0.16);

  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.08);

  text-align: center;
}


.profile-id-card span {
  color:
    rgba(255, 255, 255, 0.55);

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.5px;
}


.profile-id-card strong {
  margin:
    7px 0 3px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 27px;
}


.profile-id-card small {
  color:
    rgba(255, 255, 255, 0.45);

  font-size: 7px;
}


/* STATS */

.profile-stat-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 18px;

  margin-bottom: 25px;
}


.profile-stat-card {
  padding: 22px;

  border:
    1px solid #dfe7ed;

  border-radius: 12px;

  background: white;
}


.profile-stat-card span {
  color: #8c9aa6;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.1px;
}


.profile-stat-card strong {
  display: block;

  margin-top: 8px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 24px;
}


.profile-stat-card p {
  margin:
    5px 0 0;

  color: var(--muted);

  font-size: 9px;
}


/* LAYOUT */

.profile-layout {
  display: grid;

  grid-template-columns:
    1fr 360px;

  gap: 22px;
}


/* FORM */

.profile-form-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 18px;
}


.profile-field {
  display: flex;

  flex-direction: column;
}


.profile-field label {
  margin-bottom: 8px;

  color: #80909d;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1px;

  text-transform: uppercase;
}


.profile-field input,
.profile-field select {
  width: 100%;

  height: 48px;

  padding: 0 13px;

  border:
    1px solid #d8e2e9;

  border-radius: 8px;

  outline: none;

  color: var(--navy);

  background: #fafcfd;

  font-family:
    "Inter",
    sans-serif;

  font-size: 11px;
}


.profile-field input:focus,
.profile-field select:focus {
  border-color: var(--blue);

  background: white;

  box-shadow:
    0 0 0 3px
    rgba(18, 111, 194, 0.08);
}


.profile-field input:disabled {
  color: #8b98a3;

  background: #eef2f5;

  cursor: not-allowed;
}


.profile-form-actions {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 15px;

  margin-top: 24px;
}


.profile-save-message {
  color: var(--green);

  font-size: 9px;

  font-weight: 700;
}


/* COMPANY INFO */

.profile-company-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 12px;
}


.profile-company-grid > div {
  padding: 15px;

  border:
    1px solid #e2e8ed;

  border-radius: 9px;

  background: #fafcfd;
}


.profile-company-grid span {
  display: block;

  margin-bottom: 6px;

  color: #909da8;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1px;
}


.profile-company-grid strong {
  font-size: 10px;
}


.profile-status-active {
  color: var(--green);
}


/* PILOT CARD */

.profile-card-panel {
  padding: 0;

  overflow: hidden;
}


.pilot-card {
  min-height: 330px;

  display: flex;

  flex-direction: column;

  padding: 25px;

  color: white;

  background:
    radial-gradient(
      circle at top right,
      rgba(55, 139, 211, 0.38),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #051525,
      #0a3154
    );
}


.pilot-card-header {
  display: flex;

  align-items: center;

  gap: 10px;
}


.pilot-card-logo {
  width: 42px;

  height: 42px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(255, 255, 255, 0.55);

  border-radius: 50%;

  font-size: 10px;

  font-weight: 800;
}


.pilot-card-header > div:last-child {
  display: flex;

  flex-direction: column;
}


.pilot-card-header strong {
  font-size: 12px;

  letter-spacing: 1px;
}


.pilot-card-header span {
  margin-top: 2px;

  color:
    rgba(255, 255, 255, 0.45);

  font-size: 7px;

  letter-spacing: 2px;
}


.pilot-card-body {
  flex: 1;

  padding-top: 45px;
}


.pilot-card-body > span {
  color:
    rgba(255, 255, 255, 0.45);

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.8px;
}


.pilot-card-body h3 {
  margin:
    8px 0 28px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 28px;

  line-height: 1;

  letter-spacing: 1px;
}


.pilot-card-info {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 18px;
}


.pilot-card-info div {
  display: flex;

  flex-direction: column;
}


.pilot-card-info small {
  color:
    rgba(255, 255, 255, 0.4);

  font-size: 6px;

  font-weight: 800;

  letter-spacing: 1.2px;
}


.pilot-card-info strong {
  margin-top: 4px;

  font-size: 10px;
}


.pilot-card-footer {
  display: flex;

  justify-content: space-between;

  gap: 15px;

  padding-top: 17px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.1);

  color:
    rgba(255, 255, 255, 0.35);

  font-size: 6px;

  font-weight: 700;

  letter-spacing: 1px;
}


/* SECURITY */

.profile-security-list {
  display: flex;

  flex-direction: column;

  gap: 10px;
}


.profile-security-item {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  padding: 14px;

  border:
    1px solid #e1e8ed;

  border-radius: 9px;

  background: #fafcfd;
}


.profile-security-item > div {
  display: flex;

  flex-direction: column;
}


.profile-security-item strong {
  font-size: 10px;
}


.profile-security-item span {
  margin-top: 3px;

  color: var(--muted);

  font-size: 8px;
}


.security-ok {
  width: 27px;

  height: 27px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: var(--green) !important;

  background:
    rgba(35, 182, 111, 0.1);

  font-weight: 800;
}


/* PREFERENCES */

.profile-preference-list {
  display: flex;

  flex-direction: column;

  gap: 9px;
}


.profile-preference-list label {
  display: flex;

  align-items: center;

  gap: 9px;

  padding: 11px 13px;

  border:
    1px solid #e2e8ed;

  border-radius: 8px;

  background: #fafcfd;

  cursor: pointer;
}


.profile-preference-list input {
  accent-color: var(--blue);
}


.profile-preference-list span {
  font-size: 9px;
}


/* RESPONSIVE */

@media (max-width: 1200px) {

  .profile-layout {
    grid-template-columns: 1fr;
  }


  .profile-company-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


@media (max-width: 900px) {

  .profile-stat-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


@media (max-width: 650px) {

  .profile-hero {
    align-items: flex-start;

    flex-direction: column;
  }


  .profile-main-info {
    align-items: flex-start;

    flex-direction: column;
  }


  .profile-id-card {
    width: 100%;
  }


  .profile-stat-grid {
    grid-template-columns: 1fr;
  }


  .profile-form-grid {
    grid-template-columns: 1fr;
  }


  .profile-company-grid {
    grid-template-columns: 1fr;
  }


  .profile-form-actions {
    align-items: stretch;

    flex-direction: column;
  }

}
/* =========================================================
   CONTINENTAL CONTROL CENTER - ADMIN
========================================================= */

.admin-body {
  margin: 0;

  min-height: 100vh;

  background: #edf2f6;

  color: var(--text);
}


/* =========================================================
   SIDEBAR
========================================================= */

.admin-sidebar {
  width: 275px;

  height: 100vh;

  position: fixed;

  top: 0;
  left: 0;

  z-index: 2000;

  display: flex;

  flex-direction: column;

  padding: 24px 18px;

  overflow-y: auto;

  color: white;

  background:
    linear-gradient(
      180deg,
      #041321 0%,
      #061a2e 50%,
      #03101d 100%
    );
}


.admin-brand {
  display: flex;

  align-items: center;

  gap: 12px;

  padding:
    0 10px 23px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.08);
}


.admin-brand-logo {
  width: 43px;

  height: 43px;

  display: grid;

  place-items: center;

  border:
    2px solid white;

  border-radius: 50%;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 12px;

  font-weight: 800;
}


.admin-brand-text {
  display: flex;

  flex-direction: column;
}


.admin-brand-text strong {
  font-family:
    "Montserrat",
    sans-serif;

  font-size: 14px;

  letter-spacing: 1.3px;
}


.admin-brand-text span {
  margin-top: 4px;

  color:
    rgba(255, 255, 255, 0.4);

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 1.8px;
}


/* PROFILE */

.admin-profile-mini {
  display: flex;

  align-items: center;

  gap: 12px;

  margin:
    22px 0;

  padding: 14px;

  border:
    1px solid
    rgba(255, 255, 255, 0.06);

  border-radius: 10px;

  background:
    rgba(255, 255, 255, 0.04);
}


.admin-avatar {
  width: 42px;

  height: 42px;

  flex-shrink: 0;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: white;

  background:
    linear-gradient(
      135deg,
      #126fc2,
      #074877
    );

  font-size: 10px;

  font-weight: 800;
}


.admin-avatar.small {
  width: 36px;

  height: 36px;
}


.admin-profile-mini > div:last-child {
  display: flex;

  flex-direction: column;
}


.admin-profile-mini strong {
  font-size: 11px;
}


.admin-profile-mini span {
  margin-top: 4px;

  color:
    rgba(255, 255, 255, 0.45);

  font-size: 8px;
}


/* MENU */

.admin-menu {
  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 4px;
}


.admin-menu-title {
  margin:
    18px
    13px
    7px;

  color:
    rgba(255, 255, 255, 0.26);

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.6px;
}


.admin-menu-link {
  min-height: 44px;

  position: relative;

  display: flex;

  align-items: center;

  gap: 12px;

  padding:
    0 13px;

  border-radius: 8px;

  color:
    rgba(255, 255, 255, 0.62);

  font-size: 11px;

  font-weight: 600;

  transition: 0.2s;
}


.admin-menu-link > span {
  width: 19px;

  text-align: center;

  font-size: 14px;
}


.admin-menu-link:hover {
  color: white;

  background:
    rgba(255, 255, 255, 0.05);
}


.admin-menu-link.active {
  color: white;

  background:
    linear-gradient(
      90deg,
      rgba(18, 111, 194, 0.9),
      rgba(18, 111, 194, 0.25)
    );
}


.admin-menu-count {
  min-width: 20px;

  height: 20px;

  margin-left: auto;

  display: grid;

  place-items: center;

  border-radius: 100px;

  color: white;

  background: #c94d4d;

  font-size: 7px;

  font-weight: 800;
}


.admin-sidebar-footer {
  display: flex;

  flex-direction: column;

  gap: 8px;

  padding:
    18px 10px 0;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.08);
}


.admin-sidebar-footer a {
  color: #df7070;

  font-size: 10px;

  font-weight: 700;
}


.admin-sidebar-footer span {
  color:
    rgba(255, 255, 255, 0.22);

  font-size: 7px;
}


/* =========================================================
   MAIN
========================================================= */

.admin-main {
  min-height: 100vh;

  margin-left: 275px;
}


/* TOPBAR */

.admin-topbar {
  height: 82px;

  position: sticky;

  top: 0;

  z-index: 1500;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding:
    0 35px;

  border-bottom:
    1px solid #dde5eb;

  background:
    rgba(255, 255, 255, 0.96);

  backdrop-filter: blur(15px);
}


.admin-topbar-left {
  display: flex;

  align-items: center;

  gap: 15px;
}


.admin-page-label {
  color: var(--blue);

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.8px;
}


.admin-topbar h1 {
  margin:
    4px 0 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 21px;
}


.admin-topbar-right {
  display: flex;

  align-items: center;

  gap: 18px;
}


.admin-server-status {
  display: flex;

  align-items: center;

  gap: 7px;

  color: var(--muted);

  font-size: 9px;

  font-weight: 700;
}


.admin-server-status > span {
  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--green);

  box-shadow:
    0 0 10px
    rgba(35, 182, 111, 0.55);
}


.admin-notification {
  width: 38px;

  height: 38px;

  position: relative;

  border:
    1px solid #dce4ea;

  border-radius: 50%;

  background: white;

  cursor: pointer;
}


.admin-notification > span {
  width: 16px;

  height: 16px;

  position: absolute;

  top: -3px;
  right: -3px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: white;

  background: #cb4d4d;

  font-size: 7px;

  font-weight: 800;
}


.admin-top-profile {
  display: flex;

  align-items: center;

  gap: 9px;
}


.admin-top-profile > div:last-child {
  display: flex;

  flex-direction: column;
}


.admin-top-profile strong {
  font-size: 10px;
}


.admin-top-profile span {
  margin-top: 2px;

  color: var(--muted);

  font-size: 8px;
}


.admin-mobile-menu {
  display: none;

  border: none;

  background: transparent;

  font-size: 23px;

  cursor: pointer;
}


/* =========================================================
   CONTENT
========================================================= */

.admin-content {
  max-width: 1650px;

  margin: 0 auto;

  padding: 32px;
}


/* WELCOME */

.admin-welcome {
  min-height: 180px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  margin-bottom: 24px;

  padding: 35px;

  border-radius: 16px;

  color: white;

  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(45, 137, 214, 0.25),
      transparent 35%
    ),
    linear-gradient(
      120deg,
      #061729,
      #0a3153
    );

  box-shadow:
    0 12px 30px
    rgba(9, 34, 57, 0.12);
}


.admin-welcome-label {
  color:
    rgba(255, 255, 255, 0.55);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 2px;
}


.admin-welcome h2 {
  margin:
    8px 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 36px;

  letter-spacing: -1.5px;
}


.admin-welcome p {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.65);

  font-size: 11px;
}


.admin-date-box {
  min-width: 190px;

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 20px;

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.06);
}


.admin-date-box span {
  color:
    rgba(255, 255, 255, 0.45);

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.4px;
}


.admin-date-box strong {
  margin:
    7px 0 3px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 27px;
}


.admin-date-box small {
  color:
    rgba(255, 255, 255, 0.5);

  font-size: 8px;
}


/* =========================================================
   STATS
========================================================= */

.admin-stat-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 18px;

  margin-bottom: 24px;
}


.admin-stat-card {
  padding: 22px;

  border:
    1px solid #dfe6eb;

  border-radius: 12px;

  background: white;
}


.admin-stat-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 18px;
}


.admin-stat-header > span {
  color: #84939f;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.2px;
}


.admin-stat-icon {
  width: 34px;

  height: 34px;

  display: grid;

  place-items: center;

  border-radius: 9px;

  color: var(--blue);

  background:
    rgba(18, 111, 194, 0.08);

  font-size: 14px;
}


.admin-stat-icon.warning {
  color: var(--orange);

  background:
    rgba(233, 156, 44, 0.1);
}


.admin-stat-card > strong {
  display: block;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 28px;
}


.admin-stat-card > p {
  margin:
    5px 0 13px;

  color: var(--muted);

  font-size: 9px;
}


.admin-stat-change {
  width: fit-content;

  padding:
    5px 7px;

  border-radius: 100px;

  font-size: 7px;

  font-weight: 800;
}


.admin-stat-change.positive {
  color: var(--green);

  background:
    rgba(35, 182, 111, 0.09);
}


.admin-stat-change.warning {
  color: #d28b21;

  background:
    rgba(233, 156, 44, 0.1);
}


.admin-stat-change.neutral {
  color: #718290;

  background: #edf2f5;
}


/* =========================================================
   PANELS
========================================================= */

.admin-panel {
  margin-bottom: 24px;

  padding: 25px;

  border:
    1px solid #dfe6eb;

  border-radius: 13px;

  background: white;

  box-shadow:
    0 7px 20px
    rgba(15, 42, 66, 0.035);
}


.admin-panel-header {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 22px;
}


.admin-panel-label {
  color: var(--blue);

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.5px;
}


.admin-panel-header h3 {
  margin:
    5px 0 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 20px;
}


.admin-panel-header > a {
  color: var(--blue);

  font-size: 9px;

  font-weight: 800;
}


.admin-two-columns {
  display: grid;

  grid-template-columns:
    1.3fr 0.7fr;

  gap: 20px;
}


.admin-two-columns .admin-panel {
  margin-bottom: 24px;
}


/* =========================================================
   PIREP
========================================================= */

.admin-pirep-list {
  display: flex;

  flex-direction: column;
}


.admin-pirep-row {
  display: grid;

  grid-template-columns:
    1.1fr
    1fr
    1fr
    auto;

  align-items: center;

  gap: 20px;

  padding:
    15px 0;

  border-bottom:
    1px solid #edf1f4;
}


.admin-pirep-row:last-child {
  border-bottom: none;
}


.admin-pirep-pilot {
  display: flex;

  align-items: center;

  gap: 10px;
}


.admin-small-avatar {
  width: 34px;

  height: 34px;

  flex-shrink: 0;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: var(--blue);

  background:
    rgba(18, 111, 194, 0.09);

  font-size: 8px;

  font-weight: 800;
}


.admin-pirep-pilot > div:last-child {
  display: flex;

  flex-direction: column;
}


.admin-pirep-pilot strong {
  font-size: 10px;
}


.admin-pirep-pilot span {
  margin-top: 3px;

  color: var(--muted);

  font-size: 8px;
}


.admin-pirep-route {
  display: flex;

  align-items: center;

  gap: 8px;
}


.admin-pirep-route strong {
  font-size: 10px;
}


.admin-pirep-route span {
  color: #98a4ae;

  font-size: 9px;
}


.admin-pirep-plane {
  display: flex;

  flex-direction: column;
}


.admin-pirep-plane strong {
  font-size: 9px;
}


.admin-pirep-plane span {
  margin-top: 3px;

  color: var(--muted);

  font-size: 7px;
}


.admin-pirep-actions {
  display: flex;

  gap: 6px;
}


.admin-icon-button {
  width: 32px;

  height: 32px;

  display: grid;

  place-items: center;

  border: none;

  border-radius: 7px;

  cursor: pointer;

  font-size: 12px;

  font-weight: 800;
}


.admin-icon-button.accept {
  color: var(--green);

  background:
    rgba(35, 182, 111, 0.1);
}


.admin-icon-button.reject {
  color: #cb5050;

  background:
    rgba(203, 80, 80, 0.09);
}


/* =========================================================
   ACTIVITY
========================================================= */

.admin-activity-list {
  display: flex;

  flex-direction: column;

  gap: 0;
}


.admin-activity-item {
  display: flex;

  align-items: flex-start;

  gap: 12px;

  padding:
    13px 0;

  border-bottom:
    1px solid #edf1f4;
}


.admin-activity-item:last-child {
  border-bottom: none;
}


.admin-activity-dot {
  width: 8px;

  height: 8px;

  flex-shrink: 0;

  margin-top: 5px;

  border-radius: 50%;
}


.admin-activity-dot.green {
  background: var(--green);
}


.admin-activity-dot.blue {
  background: var(--blue);
}


.admin-activity-dot.orange {
  background: var(--orange);
}


.admin-activity-item strong {
  font-size: 9px;
}


.admin-activity-item p {
  margin:
    3px 0;

  color: var(--muted);

  font-size: 8px;
}


.admin-activity-item small {
  color: #a0abb3;

  font-size: 7px;
}


/* =========================================================
   TABLE
========================================================= */

.admin-table-wrapper {
  overflow-x: auto;
}


.admin-table {
  width: 100%;

  border-collapse: collapse;
}


.admin-table th {
  padding:
    11px 14px;

  border-bottom:
    1px solid #e3e9ed;

  color: #8b99a4;

  text-align: left;

  font-size: 7px;

  letter-spacing: 1.1px;
}


.admin-table td {
  padding:
    15px 14px;

  border-bottom:
    1px solid #edf1f4;

  color: #596a78;

  font-size: 9px;
}


.admin-table-pilot {
  display: flex;

  align-items: center;

  gap: 10px;
}


.admin-table-pilot strong {
  color: var(--navy);

  font-size: 9px;
}


.admin-status {
  display: inline-flex;

  padding:
    5px 8px;

  border-radius: 100px;

  font-size: 7px;

  font-weight: 800;
}


.admin-status.active {
  color: var(--green);

  background:
    rgba(35, 182, 111, 0.1);
}


.admin-status.new {
  color: var(--blue);

  background:
    rgba(18, 111, 194, 0.08);
}


.admin-action-button {
  padding:
    7px 10px;

  border:
    1px solid #dbe4ea;

  border-radius: 6px;

  color: var(--blue);

  background: white;

  font-size: 8px;

  font-weight: 800;

  cursor: pointer;
}


/* =========================================================
   OPERATIONS
========================================================= */

.admin-three-columns {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 20px;
}


.admin-operation-card {
  display: flex;

  flex-direction: column;
}


.admin-operation-icon {
  width: 45px;

  height: 45px;

  display: grid;

  place-items: center;

  margin-bottom: 18px;

  border-radius: 10px;

  color: var(--blue);

  background:
    rgba(18, 111, 194, 0.08);

  font-size: 18px;
}


.admin-operation-card > span {
  color: #8d9aa5;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.2px;
}


.admin-operation-card > strong {
  margin-top: 5px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 30px;
}


.admin-operation-card > p {
  margin:
    3px 0 18px;

  color: var(--muted);

  font-size: 9px;
}


.admin-operation-card > a {
  margin-top: auto;

  color: var(--blue);

  font-size: 9px;

  font-weight: 800;
}


/* =========================================================
   SYSTEM
========================================================= */

.admin-system-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 12px;
}


.admin-system-service {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 14px;

  border:
    1px solid #e2e8ed;

  border-radius: 9px;

  background: #fafcfd;
}


.admin-system-dot {
  width: 10px;

  height: 10px;

  flex-shrink: 0;

  border-radius: 50%;
}


.admin-system-dot.online {
  background: var(--green);

  box-shadow:
    0 0 8px
    rgba(35, 182, 111, 0.35);
}


.admin-system-dot.development {
  background: var(--orange);
}


.admin-system-service > div {
  display: flex;

  flex-direction: column;
}


.admin-system-service strong {
  font-size: 9px;
}


.admin-system-service span {
  margin-top: 3px;

  color: var(--muted);

  font-size: 7px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {

  .admin-stat-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .admin-two-columns {
    grid-template-columns: 1fr;
  }


  .admin-three-columns {
    grid-template-columns: 1fr;
  }


  .admin-system-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


@media (max-width: 900px) {

  .admin-sidebar {
    transform:
      translateX(-100%);

    transition:
      transform 0.3s ease;
  }


  .admin-sidebar.open {
    transform:
      translateX(0);
  }


  .admin-main {
    margin-left: 0;
  }


  .admin-mobile-menu {
    display: block;
  }


  .admin-content {
    padding: 20px;
  }


  .admin-topbar {
    padding:
      0 20px;
  }

}


@media (max-width: 650px) {

  .admin-welcome {
    align-items: flex-start;

    flex-direction: column;
  }


  .admin-date-box {
    width: 100%;
  }


  .admin-stat-grid {
    grid-template-columns: 1fr;
  }


  .admin-system-grid {
    grid-template-columns: 1fr;
  }


  .admin-server-status {
    display: none;
  }


  .admin-top-profile > div:last-child {
    display: none;
  }


  .admin-pirep-row {
    grid-template-columns:
      1fr
      auto;
  }


  .admin-pirep-route,
  .admin-pirep-plane {
    display: none;
  }

}
/* =========================================================
   ADMIN - GESTION PILOTES
========================================================= */

.admin-pilots-hero {
  min-height: 160px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  margin-bottom: 24px;

  padding: 32px;

  border-radius: 15px;

  color: white;

  background:
    linear-gradient(
      120deg,
      #061729,
      #0a3458,
      #126fc2
    );
}


.admin-pilots-hero h2 {
  margin:
    7px 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 32px;

  letter-spacing: -1px;
}


.admin-pilots-hero p {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.65);

  font-size: 10px;
}


.admin-create-pilot-button {
  min-height: 46px;

  padding:
    0 18px;

  border:
    1px solid
    rgba(255, 255, 255, 0.2);

  border-radius: 8px;

  color: var(--navy);

  background: white;

  font-size: 10px;

  font-weight: 800;

  cursor: pointer;
}


/* =========================================================
   FILTERS
========================================================= */

.admin-pilot-filters {
  display: grid;

  grid-template-columns:
    1.8fr
    1fr
    1fr
    1fr;

  gap: 12px;

  margin-bottom: 20px;
}


.admin-pilot-search input,
.admin-pilot-filters select {
  width: 100%;

  height: 45px;

  padding:
    0 12px;

  border:
    1px solid #d9e2e8;

  border-radius: 8px;

  outline: none;

  color: var(--navy);

  background: #fafcfd;

  font-family:
    "Inter",
    sans-serif;

  font-size: 9px;
}


.admin-pilot-search input:focus,
.admin-pilot-filters select:focus {
  border-color: var(--blue);

  background: white;

  box-shadow:
    0 0 0 3px
    rgba(18, 111, 194, 0.07);
}


/* TABLE PILOTE */

.admin-pilot-table-name {
  display: flex;

  flex-direction: column;
}


.admin-pilot-table-name span {
  margin-top: 3px;

  color: var(--muted);

  font-size: 7px;
}


.admin-role {
  display: inline-flex;

  padding:
    5px 8px;

  border-radius: 100px;

  font-size: 7px;

  font-weight: 800;
}


.admin-role.pilot {
  color: #687987;

  background: #edf2f5;
}


.admin-role.staff {
  color: var(--blue);

  background:
    rgba(18, 111, 194, 0.09);
}


.admin-role.owner {
  color: #8056bd;

  background:
    rgba(128, 86, 189, 0.1);
}


.admin-role.admin {
  color: #d28a22;

  background:
    rgba(233, 156, 44, 0.1);
}


.admin-status.suspended {
  color: #cb4e4e;

  background:
    rgba(203, 78, 78, 0.09);
}


.admin-row-actions {
  display: flex;

  gap: 6px;
}


.admin-empty-results {
  display: none;

  padding: 40px;

  text-align: center;

  color: var(--muted);

  font-size: 10px;
}


/* =========================================================
   MODALES
========================================================= */

.admin-modal-overlay {
  position: fixed;

  inset: 0;

  z-index: 5000;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 25px;

  background:
    rgba(2, 12, 22, 0.72);

  backdrop-filter: blur(7px);
}


.admin-modal-overlay.open {
  display: flex;
}


.admin-modal {
  width: 100%;

  max-width: 760px;

  max-height: 90vh;

  overflow-y: auto;

  padding: 28px;

  border-radius: 15px;

  background: white;

  box-shadow:
    0 25px 70px
    rgba(0, 0, 0, 0.25);
}


.admin-modal-large {
  max-width: 900px;
}


.admin-modal-header {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 28px;
}


.admin-modal-header span {
  color: var(--blue);

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1.5px;
}


.admin-modal-header h2 {
  margin:
    5px 0 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 25px;
}


.admin-modal-close {
  width: 36px;

  height: 36px;

  border: none;

  border-radius: 8px;

  color: #6f7f8c;

  background: #eef3f6;

  font-size: 22px;

  cursor: pointer;
}


/* FORM */

.admin-modal-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 16px;
}


.admin-form-field {
  display: flex;

  flex-direction: column;
}


.admin-form-field label {
  margin-bottom: 7px;

  color: #7e8e9a;

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 1px;

  text-transform: uppercase;
}


.admin-form-field input,
.admin-form-field select,
.admin-form-field textarea {
  width: 100%;

  border:
    1px solid #d9e2e8;

  border-radius: 8px;

  outline: none;

  color: var(--navy);

  background: #fafcfd;

  font-family:
    "Inter",
    sans-serif;

  font-size: 10px;
}


.admin-form-field input,
.admin-form-field select {
  height: 46px;

  padding:
    0 12px;
}


.admin-form-field textarea {
  padding: 12px;

  resize: vertical;
}


.admin-form-field input:focus,
.admin-form-field select:focus,
.admin-form-field textarea:focus {
  border-color: var(--blue);

  background: white;
}


.admin-form-field input:disabled {
  color: #71818e;

  background: #eef2f5;
}


.admin-form-full {
  margin-top: 16px;
}


.admin-create-info {
  display: flex;

  align-items: flex-start;

  gap: 10px;

  margin-top: 18px;

  padding: 14px;

  border:
    1px solid
    rgba(18, 111, 194, 0.15);

  border-radius: 8px;

  background:
    rgba(18, 111, 194, 0.04);
}


.admin-create-info > span {
  width: 24px;

  height: 24px;

  flex-shrink: 0;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: var(--blue);

  background:
    rgba(18, 111, 194, 0.1);

  font-weight: 800;
}


.admin-create-info p {
  margin: 0;

  color: var(--muted);

  font-size: 9px;

  line-height: 1.6;
}


.admin-modal-actions {
  display: flex;

  justify-content: flex-end;

  gap: 10px;

  margin-top: 24px;

  padding-top: 20px;

  border-top:
    1px solid #e8edf1;
}


/* =========================================================
   DOSSIER PILOTE
========================================================= */

.admin-pilot-profile-header {
  display: flex;

  align-items: center;

  gap: 18px;

  margin-bottom: 25px;

  padding: 20px;

  border-radius: 11px;

  color: white;

  background:
    linear-gradient(
      120deg,
      #06192d,
      #0b4a7e
    );
}


.admin-large-avatar {
  width: 65px;

  height: 65px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(255, 255, 255, 0.25);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.08);

  font-size: 15px;

  font-weight: 800;
}


.admin-pilot-profile-header h3 {
  margin:
    0 0 4px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 20px;
}


.admin-pilot-profile-header span {
  color:
    rgba(255, 255, 255, 0.6);

  font-size: 9px;
}


.admin-pilot-details-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 12px;

  margin-bottom: 28px;
}


.admin-pilot-details-grid > div {
  padding: 14px;

  border:
    1px solid #e1e7ec;

  border-radius: 8px;

  background: #fafcfd;
}


.admin-pilot-details-grid span {
  display: block;

  margin-bottom: 5px;

  color: #8998a4;

  font-size: 6px;

  font-weight: 800;

  letter-spacing: 1px;
}


.admin-pilot-details-grid strong {
  font-size: 9px;
}


.admin-pilot-management {
  padding-top: 5px;
}


.admin-pilot-management > h3 {
  margin:
    0 0 15px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 16px;
}


.admin-pilot-management-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 15px;
}


.admin-danger-zone {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  margin-top: 25px;

  padding: 16px;

  border:
    1px solid
    rgba(202, 72, 72, 0.18);

  border-radius: 9px;

  background:
    rgba(202, 72, 72, 0.035);
}


.admin-danger-zone strong {
  font-size: 10px;
}


.admin-danger-zone p {
  margin:
    4px 0 0;

  color: var(--muted);

  font-size: 8px;
}


.admin-danger-button {
  min-height: 38px;

  padding:
    0 13px;

  border:
    1px solid
    rgba(202, 72, 72, 0.2);

  border-radius: 7px;

  color: #bd4242;

  background: white;

  font-size: 8px;

  font-weight: 800;

  cursor: pointer;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

  .admin-pilot-filters {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .admin-pilot-details-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


@media (max-width: 650px) {

  .admin-pilots-hero {
    align-items: flex-start;

    flex-direction: column;
  }


  .admin-create-pilot-button {
    width: 100%;
  }


  .admin-pilot-filters {
    grid-template-columns: 1fr;
  }


  .admin-modal-grid {
    grid-template-columns: 1fr;
  }


  .admin-pilot-management-grid {
    grid-template-columns: 1fr;
  }


  .admin-pilot-details-grid {
    grid-template-columns: 1fr;
  }


  .admin-danger-zone {
    align-items: stretch;

    flex-direction: column;
  }


  .admin-modal-actions {
    flex-direction: column;
  }

}
/* CONTINENTAL AIRLINES - FLOTTE HOME IMAGE FIX */
.fleet-home {
    background-image:
        linear-gradient(
            90deg,
            rgba(5, 25, 47, 0.90) 0%,
            rgba(5, 25, 47, 0.65) 48%,
            rgba(5, 25, 47, 0.25) 100%
        ),
        url("../images/continental-gallery/continental-flotte.png") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/* CTA FLOTTE OFFICIAL IMAGE V2 */
.fleet-home {
    background-image:
        linear-gradient(
            90deg,
            rgba(5,25,47,.88),
            rgba(5,25,47,.30)
        ),
        url("../images/continental-gallery/continental-flotte.png") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}