/* ============================================================
   Skydex — design-system.css : variables, palettes de tiers,
   composant carte + dos de carte (template validé).
   ============================================================ */

:root {
  /* fonds navy sombres */
  --bg-0: #070c14;
  --bg-1: #0a111d;
  --bg-2: #0d1626;
  --bg-3: #101828;
  --bg-4: #14273f;
  /* accents */
  --blue: #3d8bfd;
  --blue-btn: #2f7bf0;
  --blue-soft: #6fa8ff;
  --green: #37d67a;
  --green-check: #4ade80;
  /* texte */
  --txt: #fff;
  --txt-2: #9db0c6;
  --txt-3: #8fa1b8;
  --txt-hint: #6b7a90;
}

/* ---- palettes de tiers (variables par carte) ---- */
.tier-commune {
  --frame: linear-gradient(165deg, #efece3, #d9d4c5 55%, #efece3);
  --dark: #16324f; --dark-on-light: #16324f;
  --body-bg: #16324f; --badge-bg: #f4f2ea;
  --accent: #9db7d4; --star: #16324f;
  --panel-bg: #f4f2ec; --light: #edeae1;
  --glow: #7da7d9;
}
.tier-rare {
  --frame: linear-gradient(160deg, #b8f0d6, #57c79a 15%, #12674a 50%, #a7e8cd 85%, #2e8f68);
  --dark: #06231b; --dark-on-light: #0f5c42;
  --body-bg: #06231b; --badge-bg: #dff3e8;
  --accent: #5fd0a4; --star: #e3b23c;
  --panel-bg: #e7f5ec; --light: #dfefe5;
  --glow: #57c79a;
}
.tier-epique {
  --frame: linear-gradient(160deg, #f5b8c4, #e0485e 18%, #a03a8c 55%, #6d3f97 82%, #e8c8f0);
  --dark: #380f33; --dark-on-light: #8c2f6e;
  --body-bg: #380f33; --badge-bg: #fae4f0;
  --accent: #f096c8; --star: #e3b23c;
  --panel-bg: #f7ecf3; --light: #f1e4ec;
  --glow: #e0559c;
}
.tier-legendaire {
  --frame: linear-gradient(160deg, #f9e9ae, #f3d878 12%, #a8791f 45%, #f6e6a0 78%, #c99b33);
  --dark: #1a1509; --dark-on-light: #6b5416;
  --body-bg: #1a1509; --badge-bg: #f7ecc4;
  --accent: #d9b64a; --star: #e3b23c;
  --panel-bg: #f7eecd; --light: #f3ead1;
  --glow: #f3d878;
}

/* ============ LA CARTE (template validé) ============ */
.card { position: relative; width: min(400px, 92vw); border-radius: 24px; padding: 9px; background: var(--frame); box-shadow: 0 12px 40px rgba(0,0,0,.5); color: #fff; }

/* Reflet holographique — piloté par holo.js (--px/--py/--sheen).
   Vaut pour TOUTES les cartes : révélation et Hangar. */
.card.holo::after {
  content: ''; position: absolute; inset: 0; border-radius: 24px; pointer-events: none;
  background: radial-gradient(circle at var(--px, 50%) var(--py, 40%), rgba(255,255,255,.22), transparent 42%);
  opacity: var(--sheen, 0);
}
.card-inner { border-radius: 16px; overflow: hidden; background: var(--body-bg); }
.card .head { display: flex; background: var(--dark); }
.card .head-left { flex: 1; padding: 14px 16px 10px; min-width: 0; }
.card .head-left h2 { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800; font-size: 2.05rem; line-height: .95; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.card .head-left .cat { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-top: 3px; }
/* ⚠️ max-width OBLIGATOIRE, bug d'affichage constaté sur téléphone (5 août
   2026, Challenger 350) : la puce Instance reçoit la variante du registre, qui
   peut être très longue (« BOMBARDIER BD-100 Challenger 350 »). Sans borne, la
   colonne de droite (flex: 0 0 auto, donc jamais compressée) s'élargit à la
   mesure de ce texte et écrase la colonne du titre, replié sur 3 lignes dans un
   couloir de quelques dizaines de pixels, partiellement sous le badge. Le
   template avait été validé avec des instances courtes (« A320-214 »), le cas
   long n'avait jamais été exercé. */
.card .head-right { flex: 0 0 auto; display: flex; flex-direction: column;
  max-width: 52%; min-width: 0; }
.card .badge { background: var(--badge-bg); color: var(--dark); padding: 8px 14px 6px; border-bottom-left-radius: 14px; display: flex; align-items: center; gap: 10px; }
.card .badge .num { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800; font-size: 1.5rem; line-height: 1; }
.card .badge .tier-label { font-weight: 700; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.card .badge .stars { color: var(--star); font-size: 1rem; letter-spacing: 1px; }
/* Ellipse et non repli : une variante interminable se coupe (« BOMBARDIER
   BD-100 Challen… ») au lieu de gonfler le bandeau sur plusieurs lignes. La
   variante complète n'est pas perdue, elle reste dans la donnée de capture. */
.card .instance-chip { background: var(--dark); color: #cfd6e0; font-size: .66rem; padding: 5px 14px 7px; text-align: right; letter-spacing: .03em; border-top: 1px solid rgba(255,255,255,.12);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .instance-chip b { color: #fff; font-weight: 600; }
.card .hero { position: relative; height: 205px; background: #22303c; }
.card .hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* placeholder photo, en attendant le module Commons */
.card .hero-ph { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, #2c4360 0%, #1c2c42 70%, #16233a 100%); }
.card .hero-ph svg { width: 64px; height: 64px; fill: rgba(255,255,255,.25); }
.card .hero-ph span { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.card .body { display: flex; background: var(--dark); padding: 12px; gap: 10px; }
.card .idcol { flex: 1 1 46%; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.card .idrow { display: flex; align-items: center; gap: 9px; padding: 6px 2px; }
.card .idrow + .idrow { border-top: 1px dotted rgba(255,255,255,.25); }
.card .idrow .ic { flex: 0 0 30px; height: 30px; border: 1.6px solid rgba(255,255,255,.85); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.card .idrow .ic svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 1.8; }
.card .idrow .lbl { font-size: .6rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.card .idrow .val { font-size: .8rem; color: #fff; line-height: 1.15; overflow-wrap: anywhere; }
/* width serait ignoré ici : flex-basis (54%) prime sur width pour un élément flex */
.card .statcol { flex: 1 1 54%; background: var(--panel-bg); border-radius: 14px; padding: 8px 10px; color: #111; align-self: flex-start; }
.card .stat2 { display: flex; align-items: center; gap: 9px; padding: 6.5px 0; }
.card .stat2 + .stat2 { border-top: 1px solid rgba(0,0,0,.1); }
.card .stat2 .ic { flex: 0 0 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.card .stat2 .ic svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 1.9; }
.card .stat2 .lblwrap { flex: 1; min-width: 0; }
.card .stat2 .lbl { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 700; font-size: .82rem; text-transform: uppercase; line-height: 1; }
.card .stat2 .unit { font-size: .62rem; color: #555; }
.card .stat2 .val { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800; font-size: 1.6rem; line-height: 1; white-space: nowrap; }
.card .desc { display: flex; gap: 12px; padding: 13px 16px; background: var(--light); color: #222; align-items: flex-start; }
.card .desc svg { flex: 0 0 22px; width: 22px; height: 22px; fill: var(--dark-on-light); margin-top: 2px; }
.card .desc p { font-size: .8rem; line-height: 1.45; }
/* Bandeau de vol : une ligne, façon souche de billet. Masqué s'il n'y a
   ni indicatif ni route (le rendu ne génère alors pas l'élément). */
.card .flight-band { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: var(--dark); color: #cfd6e0; padding: 7px 14px 8px;
  border-top: 1px solid rgba(255,255,255,.1); font-size: .68rem; }
.card .flight-band .cs { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800;
  font-size: .95rem; letter-spacing: .03em; color: #fff; }
.card .flight-band .rt { color: #cfd6e0; }
.card .flight-band .rt b { color: #fff; font-weight: 700; letter-spacing: .04em; }
/* cran 2 de la cascade : opérateur + pays, quand il n'y a pas de route.
   Volontairement plus discret que la route (pas de blanc pur, pas de gras) :
   c'est un lot de consolation, il ne doit pas se lire comme un itinéraire. */
.card .flight-band .rt.op { color: #b9c4d2; font-style: italic; }
.card .flight-band .arrow { color: var(--accent); padding: 0 3px; font-weight: 700; }

.card .capture-strip { display: flex; background: var(--light); border-top: 1px dashed rgba(0,0,0,.25); padding: 10px 8px; color: #1a1a1a; }
.card .cap-item { flex: 1; display: flex; gap: 8px; padding: 0 8px; min-width: 0; }
.card .cap-item + .cap-item { border-left: 1px solid rgba(0,0,0,.15); }
.card .cap-item .ic { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--dark-on-light); display: flex; align-items: center; justify-content: center; }
.card .cap-item .ic svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 1.9; }
/* ⚠️ Les valeurs de la colonne identité sont PLAFONNÉES à 3 lignes (constaté
   le 6 août 2026 sur le 767-400ER capturé en test : sa capacité fait 146
   caractères — « Environ 245 passagers en configuration 2 classes (243 selon
   flugzeuginfo), jusqu'à… » — et la carte doublait de hauteur). 79 types sur
   219 ont une capacité verbeuse : les fiches du pipeline de recherche ont
   gardé leur traçabilité dans le champ d'affichage. Le plafond CSS protège la
   carte QUEL QUE SOIT le contenu ; le nettoyage des données elles-mêmes est à
   faire avec la vague 2 (raccourcir à l'essentiel, la traçabilité reste dans
   la colonne notes de l'Excel). */
.card .idrow .val { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; }
.card .cap-item .lbl { font-size: .56rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dark-on-light); }
.card .cap-item .val { font-size: .74rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.card .cap-item .sub { font-size: .58rem; color: #555; }
.card .credits { display: flex; justify-content: space-between; gap: 12px; background: var(--light); padding: 8px 14px 10px; border-top: 1px solid rgba(0,0,0,.12); }
.card .credits div { font-size: .55rem; color: #444; line-height: 1.35; }

/* ============ DOS DE CARTE ============ */
.cardback { width: 100%; height: 100%; border-radius: 24px; padding: 9px; background: var(--frame); }
.cardback-inner {
  height: 100%; border-radius: 16px; background: var(--dark); position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1.2px, transparent 1.3px),
    radial-gradient(rgba(255,255,255,.035) 1.2px, transparent 1.3px);
  background-size: 26px 26px, 26px 26px;
  background-position: 0 0, 13px 13px;
}
.cardback-inner::before {
  content: ''; position: absolute; inset: 10px; border-radius: 11px;
  border: 1.5px solid rgba(255,255,255,.28); pointer-events: none;
}
.cardback-inner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .1;
  background:
    radial-gradient(circle at 50% 46%, transparent 118px, rgba(255,255,255,.55) 119px, transparent 121px),
    linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.4)) 50% 46% / 1.5px 300px no-repeat,
    linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.4)) 50% 46% / 300px 1.5px no-repeat;
}
.cardback-inner .mark {
  width: 96px; height: 128px; border-radius: 16px; border: 3px solid #efe9da;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.cardback-inner .mark svg { width: 52px; height: 52px; fill: #efe9da; }
.cardback-inner .mark .spark { position: absolute; top: 12px; right: 14px; color: #efe9da; font-size: .85rem; line-height: 1; }
.cardback-inner .mark .trail {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 26px;
  background: linear-gradient(180deg, #7da7d9, transparent);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  opacity: .85;
}
.cardback-inner .logo {
  font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800; font-size: 2rem;
  letter-spacing: .1em; text-transform: uppercase; color: #efe9da;
}
.cardback-inner .logo b {
  background: linear-gradient(120deg, #9dc4f0, #4a7fc9);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cardback-inner .baseline { font-size: .6rem; color: #8fa5c4; letter-spacing: .28em; text-transform: uppercase; margin-top: -6px; }
.cardback-inner .tap { font-size: .72rem; color: var(--accent); letter-spacing: .18em; text-transform: uppercase; animation: blink 1.8s infinite; }
@keyframes blink { 50% { opacity: .35; } }