/*
 * Matrice FTTH Swisscom — CSS v2.1
 * Mobile-first · Terrain monteur fibre · Scopé .mftth-wrap
 * OukiWeb — oukiweb.ch
 */

/* ──────────────────────────────────────────────────────────────────
   VARIABLES
────────────────────────────────────────────────────────────────── */
.mftth-wrap {
  /* Couleurs */
  --p:    #7C5CFF;
  --a:    #2EE5FF;
  --bg:   #080B14;
  --bg2:  #0C1020;
  --tx:   #E8EFFF;
  --tx2:  #8A9BB8;
  --mu:   #4E5F7A;
  --bd:   rgba(255,255,255,.07);
  --glow: rgba(124,92,255,.2);
  --edge: linear-gradient(90deg,transparent,rgba(124,92,255,.7),rgba(46,229,255,.5),transparent);

  /* Fibres Swisscom CCM */
  --c-rouge:#E8211B; --c-vert:#00A651; --c-jaune:#FFE200; --c-bleu:#0050C8;
  --c-blanc:#F0F0EE; --c-violet:#7A2E9A; --c-orange:#F07428; --c-noir:#141414;
  --c-gris:#969696; --c-brun:#804828; --c-rose:#E8007E; --c-turquoise:#00B4C8;

  /* Layout */
  --r:    16px;
  --r-sm: 10px;
  --r-xs: 8px;
  --pad:  clamp(1rem, 3vw, 1.6rem);
  --gap:  1.1rem;      /* espacement cohérent entre blocs */
  --tr:   all .22s cubic-bezier(.4,0,.2,1);
  --blur: blur(18px) saturate(160%);
  --sh:   0 8px 32px rgba(0,0,0,.45);
  --font: "Inter",ui-sans-serif,system-ui,sans-serif;
  --mono: "JetBrains Mono",ui-monospace,Menlo,monospace;

  /* Cellules matrice */
  --cs:  clamp(40px,4.2vw,52px);
  --cfs: clamp(.52rem,1vw,.65rem);
  --hw:  clamp(64px,9vw,90px);

  /* Base widget */
  position:      relative;
  font-family:   var(--font);
  color:         var(--tx);
  background:    var(--bg);
  border-radius: var(--r);
  overflow:      hidden;
  line-height:   1.5;
  -webkit-font-smoothing: antialiased;
}

/* Ambiance lumineuse */
.mftth-wrap::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 70% 40% at 10% 0%,  rgba(124,92,255,.08) 0%,transparent 60%),
    radial-gradient(ellipse 50% 35% at 90% 100%,rgba(46,229,255,.05) 0%,transparent 60%);
}
.mftth-wrap *, .mftth-wrap *::before, .mftth-wrap *::after { box-sizing:border-box; }
.mftth-wrap h1,.mftth-wrap h2,.mftth-wrap p,.mftth-wrap ul,.mftth-wrap li { margin:0;padding:0; }

/* ──────────────────────────────────────────────────────────────────
   ZONE HAUTE (header + control card)
────────────────────────────────────────────────────────────────── */
.mftth-top {
  position: relative; z-index: 2;
  padding: var(--pad) var(--pad) 0;
}

/* ──────────────────────────────────────────────────────────────────
   HEADER
────────────────────────────────────────────────────────────────── */
.mftth-header {
  display:flex; align-items:center;
  justify-content:space-between; gap:.75rem;
  flex-wrap:wrap;
  margin-bottom: var(--gap);
}
.mftth-brand { display:flex; align-items:center; gap:.65rem; }
.mftth-brand-logo {
  width:40px; height:40px; flex-shrink:0;
  background:linear-gradient(135deg,var(--p),var(--a));
  border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:11px; color:#fff;
  box-shadow:0 0 18px var(--glow), 0 4px 10px rgba(0,0,0,.3);
}
.mftth-brand-text h1 { font-size:clamp(.9rem,2vw,1.15rem); font-weight:700; color:var(--tx); line-height:1.25; }
.mftth-brand-text p  { font-size:.68rem; color:var(--mu); margin-top:2px; }
.mftth-badge {
  background:rgba(124,92,255,.12); border:1px solid rgba(124,92,255,.28);
  color:var(--a); padding:.22rem .7rem; border-radius:20px;
  font-family:var(--mono); font-size:.62rem; font-weight:600;
  white-space:nowrap; letter-spacing:.05em; flex-shrink:0;
}

/* ──────────────────────────────────────────────────────────────────
   CONTROL CARD — carte sticky : sélecteur + recherche
────────────────────────────────────────────────────────────────── */
.mftth-ctrl {
  position:   sticky;
  top:        0;
  z-index:    40;
  background: rgba(10,14,26,.97);
  backdrop-filter: var(--blur);
  border:     1px solid rgba(124,92,255,.26);
  border-radius: var(--r);
  overflow:   hidden;
  box-shadow: var(--sh), 0 0 0 1px rgba(255,255,255,.03) inset;
  /* Barre lumineuse haut */
  padding-top: 1px; /* réservé pour le ::before */
}
.mftth-ctrl::before {
  content:''; position:absolute; left:0; right:0; top:0; height:1px; z-index:5;
  background: var(--edge);
}

/* Sections internes de la control card */
.mftth-ctrl-section {
  padding: .6rem .85rem;
}

/* Séparateur entre cables et search */
.mftth-ctrl-sep {
  height:1px; margin:0 .85rem;
  background:linear-gradient(90deg,transparent,rgba(124,92,255,.18) 25%,rgba(124,92,255,.18) 75%,transparent);
}

/* ──────────────────────────────────────────────────────────────────
   CABLE GROUPS — dans la control card
────────────────────────────────────────────────────────────────── */
.mftth-cable-groups {
  display:flex; flex-direction:column; gap:.35rem;
}
.mftth-cable-group {
  display:flex; align-items:stretch; gap:.4rem; min-width:0;
}

/* Badge label — largeur fixe identique sur les 2 lignes */
.mftth-group-label {
  flex-shrink:0; width:46px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-size:.48rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  border-radius:8px; padding:.2rem 0; cursor:default;
  border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.03);
}
.mftth-group-label span { line-height:1; }
.mftth-group-label.ftth  { color:rgba(124,92,255,.9);  border-color:rgba(124,92,255,.22); background:rgba(124,92,255,.07); }
.mftth-group-label.small { color:rgba(46,229,255,.85); border-color:rgba(46,229,255,.18); background:rgba(46,229,255,.06); }

/* Scroll tabs */
.mftth-cable-sel-scroll {
  flex:1; min-width:0;
  display:flex; gap:.25rem;
  overflow-x:auto; overflow-y:visible;
  padding:.15rem .05rem .2rem;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.mftth-cable-sel-scroll::-webkit-scrollbar { display:none; }

/* Fade fade droite */
.mftth-cable-group { position:relative; }
.mftth-cable-group::after {
  content:''; pointer-events:none;
  position:absolute; right:0; top:0; bottom:0; width:24px;
  background:linear-gradient(to right,transparent,rgba(10,14,26,.95));
  z-index:2;
}

/* Tabs */
.mftth-tab {
  flex-shrink:0; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:.4rem .78rem;
  border-radius:8px; border:1.5px solid rgba(255,255,255,.07);
  background:rgba(17,24,39,.65); color:var(--mu);
  font-family:var(--font); font-size:.74rem; font-weight:700;
  cursor:pointer; transition:var(--tr); white-space:nowrap; line-height:1.2;
  min-height:38px;
  user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
}
.mftth-tab .fc { font-size:.5rem; font-weight:400; opacity:.55; margin-top:1px; font-family:var(--mono); }
.mftth-tab:hover  { color:var(--tx); border-color:rgba(124,92,255,.3); background:rgba(124,92,255,.1); }
.mftth-tab:active { transform:scale(.95); }
.mftth-tab.group-small.active {
  background:linear-gradient(135deg,#0A7A8A,#055D6B); color:#fff;
  border-color:rgba(46,229,255,.4); box-shadow:0 0 12px rgba(46,229,255,.18);
}
.mftth-tab.group-ftth.active {
  background:linear-gradient(135deg,var(--p),#5438CC); color:#fff;
  border-color:rgba(124,92,255,.45); box-shadow:0 0 12px var(--glow);
}

/* ──────────────────────────────────────────────────────────────────
   SEARCH — dans la control card
────────────────────────────────────────────────────────────────── */
/* ── SEARCH SECTION ─────────────────────────────────────────────── */
.mftth-ctrl-search {
  padding: .55rem .85rem .6rem;
}

/*
 * Approche FLEX pure — l'icône et le bouton clear sont des enfants
 * directs du pill, PAS en absolute. Zéro overlap garanti.
 *
 * Structure : .mftth-search-pill [ icon | input | clear-btn ]
 */
.mftth-search-wrap {
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* Le pill est le flex container — max-width pour ne pas trop s'étirer */
.mftth-search-pill {
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 400px;
  gap: 0;
  background: rgba(124,92,255,.09);
  border: 1.5px solid rgba(124,92,255,.28);
  border-radius: 50px;
  padding: 0 .5rem 0 .85rem;
  min-height: 44px;
  transition: border-color .22s, box-shadow .22s, background .22s;
}
.mftth-search-pill:focus-within {
  background: rgba(124,92,255,.13);
  border-color: var(--p);
  box-shadow: 0 0 0 3px rgba(124,92,255,.18), 0 0 20px rgba(124,92,255,.08);
}

/* Icône loupe — flex item, jamais en absolute */
.mftth-search-icon {
  flex-shrink: 0;
  width: 15px; height: 15px;
  color: rgba(124,92,255,.75);
  transition: color .2s;
  margin-right: .55rem; /* espace entre loupe et texte */
  pointer-events: none;
}
.mftth-search-pill:focus-within .mftth-search-icon {
  color: var(--a);
}

/* Input — flex:1, sans border ni background propre */
.mftth-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none !important;   /* pas de bordure native browser */
  outline: none !important;
  box-shadow: none !important;
  padding: 0;
  color: var(--tx);
  font-family: var(--mono);
  font-size: max(1rem, 16px); /* ≥16px → no iOS zoom */
  font-weight: 600;
  line-height: 1;
  -webkit-appearance: none; appearance: none;
  -moz-appearance: textfield; /* Firefox : masque spinner */
  caret-color: var(--a);
}
.mftth-search-input::placeholder {
  color: var(--mu);
  font-family: var(--font);
  font-weight: 400;
  font-size: .85rem;
  opacity: 1;
}
/* Masque les flèches spinner sur tous les navigateurs */
.mftth-search-input::-webkit-inner-spin-button,
.mftth-search-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;  /* masquage total */
  margin: 0;
}

/* Bouton clear — carré forcé, centré, cercle parfait */
.mftth-search-clear {
  flex-shrink: 0;
  display: none;                  /* caché par défaut */
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;     /* carré → circle via border-radius */
  min-width: 24px;                /* empêche la compression flex */
  padding: 0;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  cursor: pointer;
  color: var(--mu);
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
  margin-left: .35rem;
}
.mftth-search-clear:hover  { background: rgba(255,255,255,.18); color: var(--tx); }
.mftth-search-clear.visible { display: flex; }

/* Pill câble actif — badge à droite du pill search */
.mftth-cable-pill {
  display: flex; align-items: center; gap: .3rem;
  flex-shrink: 0;
  background: rgba(124,92,255,.1);
  border: 1px solid rgba(124,92,255,.28);
  border-radius: var(--r-xs);
  padding: .3rem .65rem;
  white-space: nowrap;
}
.mftth-cable-pill svg  { color: var(--a); flex-shrink: 0; }
.mftth-cable-badge     { font-family: var(--mono); font-size: .68rem; font-weight: 700; color: var(--a); }
.mftth-cable-desc      { font-size: .58rem; color: var(--mu); }

/* ──────────────────────────────────────────────────────────────────
   CORPS — padding + gap cohérents
────────────────────────────────────────────────────────────────── */
.mftth-body {
  position:relative; z-index:1;
  padding: var(--gap) var(--pad) var(--pad);
  display:flex; flex-direction:column; gap:var(--gap);
}

/* ──────────────────────────────────────────────────────────────────
   SEARCH ERROR
────────────────────────────────────────────────────────────────── */
.mftth-error {
  display:none;
  background:rgba(232,33,27,.1); border:1px solid rgba(232,33,27,.3);
  border-radius:var(--r-sm); padding:.55rem .9rem;
  font-size:.78rem; color:#f87171;
  animation:mftthDown .2s ease both;
}
.mftth-error.visible { display:flex; align-items:center; gap:.5rem; }

@keyframes mftthDown {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ──────────────────────────────────────────────────────────────────
   SEARCH RESULT
────────────────────────────────────────────────────────────────── */
.mftth-result {
  display:none;
  border-radius:var(--r); overflow:hidden;
  border:2px solid rgba(124,92,255,.28);
  box-shadow:var(--sh),0 0 24px rgba(124,92,255,.1);
  animation:mftthDown .22s ease both;
}
.mftth-result.visible { display:block; }
.mftth-result-inner {
  display:flex; align-items:stretch;
  background:rgba(10,15,30,.96); backdrop-filter:var(--blur);
}
.mftth-res-color {
  width:90px; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.25rem; padding:.75rem .4rem; position:relative; overflow:hidden;
}
.mftth-res-num        { font-family:var(--mono); font-size:1.75rem; font-weight:800; line-height:1; position:relative; z-index:2; }
.mftth-res-fiber-name { font-size:.7rem; font-weight:700; position:relative; z-index:2; text-align:center; }
.mftth-res-stripe-lbl {
  font-size:.52rem; font-weight:700; opacity:.75;
  letter-spacing:.1em; text-transform:uppercase; position:relative; z-index:2;
  background:rgba(0,0,0,.24); border-radius:3px; padding:1px 5px;
}
.mftth-res-body {
  flex:1; padding:.8rem .95rem;
  display:flex; flex-direction:column; justify-content:center; gap:.45rem;
  border-left:1px solid rgba(255,255,255,.06);
}
.mftth-res-label { font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--mu); }
.mftth-res-tags  { display:flex; flex-wrap:wrap; gap:.32rem; }
.mftth-tag {
  display:flex; align-items:center; gap:.28rem;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:6px; padding:.28rem .55rem; font-size:.68rem; color:var(--tx2); line-height:1.2;
}
.mftth-tag span { font-size:.58rem; opacity:.65; }
.mftth-tag strong { color:var(--tx); font-weight:700; margin-left:.12rem; }
.mftth-tag .tag-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.mftth-tag.primary { border-color:rgba(124,92,255,.35); background:rgba(124,92,255,.1); }
.mftth-tag.primary strong { color:var(--a); }
.mftth-res-goto {
  display:inline-flex; align-items:center; gap:.4rem;
  background:linear-gradient(135deg,var(--p),#5438CC); color:#fff;
  border:none; border-radius:8px; padding:.48rem .9rem;
  font-family:var(--font); font-size:.72rem; font-weight:700;
  cursor:pointer; transition:var(--tr); white-space:nowrap; align-self:flex-start;
  box-shadow:0 0 12px var(--glow); min-height:36px;
  -webkit-tap-highlight-color:transparent;
}
.mftth-res-goto:hover  { filter:brightness(1.12); transform:translateY(-1px); }
.mftth-res-goto:active { transform:scale(.97); }

/* ──────────────────────────────────────────────────────────────────
   INFO CHIPS
────────────────────────────────────────────────────────────────── */
.mftth-info-bar { display:flex; gap:.35rem; flex-wrap:wrap; }
.mftth-chip {
  display:flex; align-items:center; gap:.38rem;
  background:rgba(17,24,39,.8); border:1px solid var(--bd);
  border-radius:var(--r-xs); padding:.26rem .6rem;
  font-size:.67rem; color:var(--tx2); white-space:nowrap;
}
.mftth-chip .dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.mftth-chip strong { color:var(--tx); font-weight:600; }

/* ──────────────────────────────────────────────────────────────────
   LÉGENDE
────────────────────────────────────────────────────────────────── */
.mftth-legend-panel {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:var(--gap);
}
.mftth-legend-card {
  background:rgba(15,20,38,.8); border:1px solid rgba(124,92,255,.14);
  border-radius:var(--r); padding:1rem 1.1rem;
  backdrop-filter:var(--blur); box-shadow:var(--sh); position:relative; overflow:hidden;
}
.mftth-legend-card::before { content:''; position:absolute; left:8%; right:8%; top:0; height:1px; background:var(--edge); opacity:.55; }
.mftth-legend-title { font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--mu); margin-bottom:.7rem; }
.mftth-legend-grid  { display:grid; grid-template-columns:repeat(6,1fr); gap:.25rem; }
.mftth-legend-fiber { display:flex; flex-direction:column; align-items:center; gap:.2rem; }
.mftth-swatch {
  width:100%; min-width:24px; height:18px; border-radius:3px;
  border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.52rem; font-weight:700; position:relative; overflow:hidden;
}
.mftth-swatch.striped::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 22%,rgba(0,0,0,.38) 22%,rgba(0,0,0,.38) 27%,transparent 27%,transparent 72%,rgba(0,0,0,.38) 72%,rgba(0,0,0,.38) 77%,transparent 77%);
}
.mftth-swatch.striped.on-light::before {
  background:linear-gradient(90deg,transparent 22%,rgba(0,0,0,.46) 22%,rgba(0,0,0,.46) 27%,transparent 27%,transparent 72%,rgba(0,0,0,.46) 72%,rgba(0,0,0,.46) 77%,transparent 77%);
}
.mftth-legend-lbl { font-size:.48rem; color:var(--mu); text-align:center; line-height:1.2; }
.mftth-tube-legend { display:flex; flex-direction:column; gap:.5rem; }
.mftth-tube-item   { display:flex; align-items:flex-start; gap:.6rem; }
.mftth-tube-swatch { width:38px; min-width:38px; height:17px; border-radius:3px; border:1px solid rgba(255,255,255,.1); margin-top:2px; }
.mftth-tube-info   { font-size:.7rem; }
.mftth-tube-info strong { color:var(--tx); display:block; font-weight:600; }
.mftth-tube-info span   { color:var(--mu); font-size:.62rem; }
.mftth-tube-divider { border-top:1px solid var(--bd); padding-top:.5rem; }

/* ──────────────────────────────────────────────────────────────────
   MATRICE
────────────────────────────────────────────────────────────────── */
.mftth-matrix-box {
  background:rgba(15,20,38,.8); border:1px solid rgba(124,92,255,.16);
  border-radius:var(--r); backdrop-filter:var(--blur);
  box-shadow:var(--sh), 0 0 24px rgba(124,92,255,.04);
  overflow:hidden; position:relative;
  animation:mftthFadeUp .3s ease both;
}
.mftth-matrix-box::before { content:''; position:absolute; left:8%; right:8%; top:0; height:1px; background:var(--edge); opacity:.6; z-index:5; }
@keyframes mftthFadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.mftth-matrix-bar {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.4rem;
  padding:.7rem 1rem; border-bottom:1px solid var(--bd);
}
.mftth-matrix-title { font-size:clamp(.8rem,1.6vw,.9rem); font-weight:700; color:var(--tx); }
.mftth-matrix-title span { color:var(--a); margin-left:.3rem; }
.mftth-matrix-stats { display:flex; flex-wrap:wrap; gap:.25rem .65rem; font-size:.63rem; color:var(--mu); }
.mftth-matrix-stats strong { color:var(--a); }

.mftth-scroll-hint {
  display:none; align-items:center; gap:.3rem;
  padding:.28rem .9rem; font-size:.6rem; color:var(--mu);
  background:rgba(124,92,255,.04); border-bottom:1px solid var(--bd);
}
.mftth-scroll {
  overflow-x:auto; overflow-y:auto; max-height:65vh;
  padding:.6rem .7rem .75rem;
  scrollbar-width:thin; scrollbar-color:rgba(124,92,255,.35) transparent;
  -webkit-overflow-scrolling:touch; scroll-behavior:smooth; overscroll-behavior:contain;
}
.mftth-scroll::-webkit-scrollbar { width:4px; height:4px; }
.mftth-scroll::-webkit-scrollbar-thumb { background:rgba(124,92,255,.4); border-radius:3px; }

/* ── Table ── */
.mftth-table { border-collapse:separate; border-spacing:2px; font-size:var(--cfs); width:max-content; }

.toron-group-row td {
  background:rgba(124,92,255,.07); border-top:2px solid rgba(124,92,255,.4);
  color:var(--a); font-size:clamp(.46rem,.88vw,.56rem); font-weight:700;
  text-transform:uppercase; letter-spacing:.09em;
  text-align:center; padding:.2rem .35rem; white-space:nowrap;
}
.corner-cell {
  position:sticky; left:0; z-index:6;
  background:#0C1020; border-radius:5px 0 0 0; color:var(--mu);
  font-size:clamp(.44rem,.8vw,.52rem); font-family:var(--mono);
  padding:.26rem .4rem; text-align:center; white-space:nowrap;
  min-width:var(--hw); border-right:1px solid rgba(124,92,255,.12);
}
.tube-head {
  padding:.38rem .26rem; border-radius:5px; text-align:center;
  font-family:var(--font); font-weight:700; font-size:clamp(.48rem,.82vw,.58rem);
  white-space:nowrap; min-width:var(--cs); min-height:40px;
  border:1px solid rgba(255,255,255,.06); line-height:1.3;
}
.tube-head.pilot     { background:var(--c-rouge); color:#fff; box-shadow:0 0 7px rgba(232,33,27,.5); border-color:rgba(232,33,27,.4); }
.tube-head.direction { background:var(--c-vert);  color:#fff; box-shadow:0 0 7px rgba(0,166,81,.5);  border-color:rgba(0,166,81,.4); }
.tube-head.natural   { background:rgba(48,58,75,.9); color:var(--tx2); }
.tube-num { display:block; font-size:.46rem; opacity:.62; font-weight:400; font-family:var(--mono); }

.fiber-row-head {
  position:sticky; left:0; z-index:3;
  padding:.26rem .44rem; text-align:center;
  font-family:var(--font); font-size:clamp(.44rem,.82vw,.54rem); font-weight:700;
  white-space:nowrap; border-radius:5px; border:1px solid rgba(255,255,255,.06);
  min-width:var(--hw); line-height:1.3; overflow:hidden;
  border-right:1px solid rgba(255,255,255,.1);
}
.fiber-row-head .fnum {
  display:inline-block; background:rgba(0,0,0,.28); border-radius:3px; padding:0 3px;
  font-size:.48rem; font-family:var(--mono); margin-bottom:1px; position:relative; z-index:2;
}
.fiber-row-head .fname { position:relative; z-index:2; }

/* Stripe overlay */
.fiber-row-head .stripe-ol, .fiber-cell .stripe-ol {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(90deg,transparent 22%,rgba(0,0,0,.38) 22%,rgba(0,0,0,.38) 27%,transparent 27%,transparent 72%,rgba(0,0,0,.38) 72%,rgba(0,0,0,.38) 77%,transparent 77%);
}
.fiber-row-head .stripe-ol.onl, .fiber-cell .stripe-ol.onl {
  background:linear-gradient(90deg,transparent 22%,rgba(0,0,0,.46) 22%,rgba(0,0,0,.46) 27%,transparent 27%,transparent 72%,rgba(0,0,0,.46) 72%,rgba(0,0,0,.46) 77%,transparent 77%);
}

/* Cellules */
.fiber-cell {
  padding:.26rem .35rem; text-align:center; border-radius:4px;
  font-family:var(--mono); font-size:var(--cfs); font-weight:600;
  min-width:var(--cs); min-height:40px;
  cursor:pointer; transition:transform .11s,box-shadow .11s,filter .11s;
  position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.04); line-height:1.2;
  user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
}
.fiber-cell:hover  { transform:scale(1.12); box-shadow:0 4px 14px rgba(0,0,0,.5); filter:brightness(1.12); z-index:10; border-color:rgba(255,255,255,.18); }
.fiber-cell:active { transform:scale(1.06); filter:brightness(1.18); }
.fiber-cell .cell-num { position:relative; z-index:2; }
.fiber-cell.highlighted {
  outline:3px solid #fff !important; outline-offset:1px;
  filter:brightness(1.3) !important; transform:scale(1.2) !important;
  z-index:20 !important; box-shadow:0 0 0 6px rgba(255,255,255,.2),0 6px 18px rgba(0,0,0,.5) !important;
  animation:mftthPop .28s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes mftthPop { 0%{transform:scale(1)} 60%{transform:scale(1.27)} 100%{transform:scale(1.2)} }

.toron-boundary { border-left:2px solid rgba(124,92,255,.45) !important; }
.divider-row td { padding:2px 0; background:transparent; }
.divider-inner  { height:1px; background:linear-gradient(90deg,transparent,rgba(124,92,255,.3),rgba(46,229,255,.2),transparent); opacity:.5; }

/* ──────────────────────────────────────────────────────────────────
   TOOLTIP desktop
────────────────────────────────────────────────────────────────── */
.mftth-tooltip {
  position:fixed; background:rgba(6,9,20,.97);
  border:1px solid rgba(124,92,255,.35); border-radius:var(--r-sm);
  padding:.48rem .78rem; font-size:.67rem; color:var(--tx);
  pointer-events:none; z-index:9999; opacity:0;
  transition:opacity .1s; backdrop-filter:blur(20px);
  box-shadow:0 8px 28px rgba(0,0,0,.6),0 0 14px rgba(124,92,255,.08);
  white-space:nowrap; font-family:var(--font);
}
.mftth-tooltip.visible { opacity:1; }
.mftth-tooltip::before { content:''; position:absolute; left:8%; right:8%; top:0; height:1px; background:var(--edge); opacity:.8; }
.mftth-tt-title { font-weight:700; color:var(--a); margin-bottom:4px; font-size:.7rem; }
.mftth-tt-row   { display:flex; justify-content:space-between; gap:.7rem; color:var(--mu); padding:1px 0; }
.mftth-tt-row strong { color:var(--tx); font-weight:600; }

/* Tap info mobile */
.mftth-tap-info {
  display:none; position:fixed; bottom:1rem; left:50%; transform:translateX(-50%);
  background:rgba(6,9,20,.97); border:1.5px solid rgba(124,92,255,.42);
  border-radius:var(--r-sm); padding:.6rem 1rem;
  font-size:.7rem; color:var(--tx); z-index:9999;
  pointer-events:none; backdrop-filter:blur(20px);
  box-shadow:0 8px 28px rgba(0,0,0,.65);
  text-align:center; width:max-content; max-width:90vw; font-family:var(--font);
}
.mftth-tap-info.visible { display:block; animation:mftthDown .2s ease both; }
.mftth-tap-title { color:var(--a); font-weight:700; margin-bottom:3px; font-size:.76rem; }
.mftth-tap-body  { color:var(--tx2); font-size:.67rem; }

/* ──────────────────────────────────────────────────────────────────
   SUPPORT
────────────────────────────────────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────────
   SUPPORT / DON PAYPAL
────────────────────────────────────────────────────────────────── */
.mftth-support-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  /* Dégradé de fond subtil orienté PayPal */
  background: linear-gradient(135deg, rgba(13,19,36,.98) 0%, rgba(8,15,32,.98) 60%, rgba(0,30,60,.92) 100%);
  border: 1px solid rgba(0,112,186,.22);
  backdrop-filter: var(--blur);
  box-shadow: var(--sh), 0 0 40px rgba(0,112,186,.06);
}

/* Barre lumineuse top — dégradé PayPal */
.mftth-support-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,112,186,.8) 35%, rgba(23,155,215,.7) 65%, transparent);
  z-index: 5;
}

/* Fond déco : lueur bleue en bas à droite */
.mftth-sup-deco {
  position: absolute; pointer-events: none;
  right: -60px; bottom: -60px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(0,112,186,.12) 0%, transparent 65%);
  z-index: 0;
}

.mftth-support-inner {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  padding: 1.5rem 1.7rem;
  flex-wrap: wrap;
}

/* ── Texte gauche ── */
.mftth-support-text { flex: 1; min-width: 200px; }

.mftth-sup-head { margin-bottom: .65rem; }

.mftth-support-badge {
  display: inline-flex; align-items: center; gap: .28rem;
  background: rgba(46,229,255,.07);
  border: 1px solid rgba(46,229,255,.2);
  color: var(--a); border-radius: 20px;
  padding: .2rem .72rem;
  font-size: .58rem; font-weight:700;
  letter-spacing: .08em; text-transform: uppercase;
}

.mftth-support-title {
  font-size: clamp(.92rem, 2vw, 1.08rem);
  font-weight: 700; color: var(--tx); line-height: 1.38;
  margin-bottom: .55rem;
}
.mftth-sup-highlight {
  background: linear-gradient(90deg, #0070BA, #2EE5FF);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mftth-support-desc {
  font-size: .77rem; color: var(--tx2);
  line-height: 1.7; margin-bottom: .8rem;
  max-width: 46ch;
}

.mftth-support-features {
  display: flex; flex-wrap: wrap; gap: .28rem .6rem;
}
.mftth-sf {
  display: flex; align-items: center; gap: .28rem;
  font-size: .66rem; color: var(--mu);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px; padding: .18rem .6rem;
}
.mftth-sf svg { color: var(--a); flex-shrink: 0; }

/* ── CTA droite ── */
.mftth-support-action {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0;
}

/* Carte don isolée */
.mftth-donate-card {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  background: rgba(0,20,50,.6);
  border: 1px solid rgba(0,112,186,.35);
  border-radius: var(--r);
  padding: 1.2rem 1.5rem 1rem;
  min-width: 180px;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,50,130,.3), inset 0 1px 0 rgba(255,255,255,.06);
}
.mftth-donate-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(23,155,215,.8), transparent);
}

.mftth-donate-emoji {
  font-size: 2.2rem; line-height: 1;
  filter: drop-shadow(0 0 10px rgba(255,200,50,.4));
  animation: mftthCoffee 3s ease-in-out infinite;
  margin-bottom: .1rem;
}
@keyframes mftthCoffee {
  0%,100% { transform: rotate(-5deg) scale(1); }
  50%      { transform: rotate(5deg) scale(1.08); }
}

.mftth-donate-label {
  font-size: .85rem; font-weight: 700; color: var(--tx);
  letter-spacing: .02em;
}
.mftth-donate-sub {
  font-size: .62rem; color: rgba(23,155,215,.8);
  font-family: var(--mono); margin-bottom: .2rem;
}

/* Bouton PayPal — logo SVG intégré */
.mftth-btn-donate {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  background: linear-gradient(135deg, #009CDE 0%, #0070BA 50%, #003087 100%);
  color: #fff; text-decoration: none;
  border-radius: var(--r-sm);
  padding: .65rem 1.1rem;
  transition: var(--tr);
  box-shadow:
    0 4px 18px rgba(0,112,186,.4),
    0 0 0 1px rgba(255,255,255,.08) inset;
  min-height: 44px;
  animation: mftthPaypalPulse 3.5s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}
@keyframes mftthPaypalPulse {
  0%,100% { box-shadow: 0 4px 18px rgba(0,112,186,.4), 0 0 0 1px rgba(255,255,255,.08) inset; }
  50%     { box-shadow: 0 6px 28px rgba(0,112,186,.65), 0 0 20px rgba(23,155,215,.25), 0 0 0 1px rgba(255,255,255,.1) inset; }
}
.mftth-btn-donate:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
  color: #fff; text-decoration: none;
  animation: none;
  box-shadow: 0 8px 32px rgba(0,112,186,.6), 0 0 24px rgba(23,155,215,.3);
}
.mftth-btn-donate:active { transform: scale(.97); }

.mftth-secure {
  display: flex; align-items: center; gap: .26rem;
  font-size: .57rem; color: rgba(100,130,170,.7);
  margin-top: .1rem;
}
.mftth-secure svg { opacity: .6; }

/* ──────────────────────────────────────────────────────────────────
   FOOTER
────────────────────────────────────────────────────────────────── */
.mftth-footer { text-align:center; font-size:.62rem; color:var(--mu); padding:.5rem; line-height:1.6; }
.mftth-footer a { color:var(--a); text-decoration:none; }
.mftth-footer a:hover { text-decoration:underline; }

/* ──────────────────────────────────────────────────────────────────
   RESPONSIVE
────────────────────────────────────────────────────────────────── */

/* Touch — désactiver hover, garder active */
@media (hover:none) {
  .mftth-wrap .fiber-cell:hover { transform:none; filter:none; }
  .mftth-wrap .fiber-cell:active { filter:brightness(1.15); transform:scale(1.06); }
}

/* Tablet ≤ 900px */
@media (max-width:900px) {
  .mftth-wrap { --cs:clamp(36px,5.5vw,44px); --hw:68px; }
  .mftth-scroll-hint { display:flex; }
}

/* Mobile ≤ 640px */
@media (max-width:640px) {
  .mftth-wrap { --cs:38px; --cfs:.52rem; --hw:58px; --pad:4px; --gap:.85rem; }

  .mftth-brand-logo  { width:36px; height:36px; font-size:10px; }
  .mftth-brand-text h1 { font-size:.88rem; }
  .mftth-brand-text p  { display:none; }
  .mftth-badge         { display:none; }

  /* Control card */
  .mftth-ctrl-section  { padding: .5rem .7rem; }
  .mftth-ctrl-search   { padding: .45rem .7rem; }
  .mftth-ctrl-sep      { margin: 0 .7rem; }

  /* Tabs */
  .mftth-group-label  { width:40px; font-size:.44rem; border-radius:7px; }
  .mftth-tab { padding:.36rem .6rem; font-size:.68rem; min-height:34px; }
  .mftth-tab .fc { font-size:.46rem; }

  /* Search mobile — pill pleine largeur */
  .mftth-search-pill   { max-width: 100%; }
  .mftth-cable-pill    { display: none; }

  /* Result */
  .mftth-res-color { width:78px; }
  .mftth-res-num   { font-size:1.5rem; }
  .mftth-res-body  { padding:.68rem .82rem; }
  .mftth-tag       { font-size:.64rem; }

  /* Matrice */
  .mftth-matrix-bar   { padding:.55rem .85rem; }
  .mftth-matrix-stats { gap:.22rem .48rem; font-size:.59rem; }
  .mftth-scroll       { max-height:55vh; padding:.45rem .45rem .6rem; }

  /* Légende */
  .mftth-legend-panel { grid-template-columns:1fr; }
  .mftth-legend-grid  { grid-template-columns:repeat(4,1fr); }

  /* Support */
  .mftth-support-inner { padding:1.1rem 1rem; gap:1.2rem; flex-direction:column; }
  .mftth-donate-card { width:100%; min-width:unset; flex-direction:row; flex-wrap:wrap; justify-content:center; padding:1rem; gap:.6rem; }
  .mftth-btn-donate { width:auto; }
  
}

/* Très petits écrans ≤ 380px */
@media (max-width:380px) {
  .mftth-wrap { --cs:28px; --cfs:.44rem; --hw:50px; --pad:4px; }
  .mftth-group-label { width:32px; }
  .mftth-group-label span { display:none; }
  .mftth-tab { padding:.32rem .42rem; font-size:.62rem; min-height:32px; }
  .mftth-legend-grid { grid-template-columns:repeat(3,1fr); }
}

/* Landscape mobile */
@media (max-width:768px) and (orientation:landscape) {
  .mftth-scroll { max-height:45vh; }
  .mftth-ctrl-section { padding:.4rem .75rem; }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion:reduce) {
  .mftth-wrap *, .mftth-wrap *::before, .mftth-wrap *::after,
  .mftth-tooltip, .mftth-tap-info { animation:none!important; transition:none!important; }
}