/* ============================================================================
   TRACKFLY — Design System CLAIR (monochrome « aluminium »)
   ----------------------------------------------------------------------------
   Feuille SÉPARÉE de trackfly.css (thème dark de l'app/studio, à ne pas casser).
   Réservée aux pages MARKETING passées en clair (welcome.html, tarifs.html…).

   PARTI PRIS (validé par la direction) :
     • Palette 100% MONOCHROME : noir & blanc + gris ALUMINIUM froids (façon
       Apple silver / space-gray). AUCUNE couleur de marque, ZÉRO ambre.
       « Noir sur blanc » pour le marketing clair ; « blanc sur quasi-noir »
       pour les respirations sombres (bandeaux CTA, carte Pro recommandée).
     • Finition premium « Samsung copie Apple » : niveau vvault (typo énorme
       très serrée, blancs généreux, cartes arrondies à bordure fine, boutons
       pilule noir plein / blanc contour, transitions douces, ombres discrètes),
       mais goût Trackfly dans les DÉTAILS : wordmark « Trackfly. » en Fraunces
       italique (monochrome), copy FR à notre ton, micro-choix maison.
     • Matière métallique : fins dégradés aluminium, liserés clairs, ombres
       douces multi-couches — de la profondeur sans jamais casser le N&B.

   PORTÉE : styles de base sur « body.tf-light », composants préfixés « .tl-* »
   (aucune collision possible avec le thème dark ni ses classes « .tf-page »).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------------------- */
:root{
  /* Encres (froides, légèrement « space-gray ») */
  --ink:#0b0c0f;          /* titres, texte fort — ~19:1 sur blanc */
  --ink-2:#33363c;        /* corps de texte — ~10:1 */
  --dim:#585c63;          /* secondaire — ~6.6:1 (AA) */
  --faint:#6a6e76;        /* le plus discret, mais TOUJOURS AA sur blanc (~5.0:1) */
  --white:#ffffff;

  /* Fonds & surfaces */
  --bg:#ffffff;
  --bg-alu:#f4f5f7;       /* bandeau off-white froid */
  --bg-alu-2:#eceef1;
  --surface:#ffffff;

  /* Lignes (hairlines aluminium) */
  --line:rgba(11,12,15,.10);
  --line-2:rgba(11,12,15,.16);
  --line-strong:rgba(11,12,15,.26);

  /* Dégradés aluminium (matière métallique) */
  --alu-card:linear-gradient(180deg,#ffffff 0%,#f6f7f9 100%);
  --alu-chip:linear-gradient(145deg,#f7f8f9 0%,#e3e6ea 48%,#d0d4da 100%);
  --alu-chip-dark:linear-gradient(145deg,#3a3d44 0%,#212329 55%,#111317 100%);
  --alu-edge:inset 0 1px 0 rgba(255,255,255,.75); /* liseré haut « brossé » */

  /* Bloc sombre (respirations : bandeaux CTA, carte recommandée) — « pas trop dark » */
  --dark:#121418;
  --dark-grad:linear-gradient(180deg,#1c1f25 0%,#131519 58%,#0d0e11 100%);
  --on-dark:#f4f5f6;
  --on-dark-dim:#a6abb3;
  --line-on-dark:rgba(255,255,255,.16);
  --line-on-dark-2:rgba(255,255,255,.26);

  /* Ombres douces (Apple-like, multi-couches) */
  --sh-sm:0 1px 2px rgba(12,14,18,.06),0 1px 1px rgba(12,14,18,.04);
  --sh:0 2px 8px rgba(12,14,18,.05),0 14px 40px -12px rgba(12,14,18,.14);
  --sh-lg:0 40px 90px -34px rgba(12,14,18,.32),0 12px 30px -14px rgba(12,14,18,.16);
  --sh-dark:0 30px 80px -30px rgba(0,0,0,.7);

  /* Forme & mouvement */
  --r:14px;
  --r-lg:22px;
  --r-pill:100px;
  --ease:cubic-bezier(.16,.84,.28,1);
  --ease-out:cubic-bezier(.22,1,.36,1);

  /* Typo */
  --font-sans:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-serif:'Fraunces',Georgia,'Times New Roman',serif;

  /* Conteneur */
  --wrap:1180px;
  --pad:24px;
}

/* ----------------------------------------------------------------------------
   2. BASE
   ---------------------------------------------------------------------------- */
*{box-sizing:border-box}
.tf-light{
  margin:0;background:var(--bg);color:var(--ink-2);
  font-family:var(--font-sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.tf-light img{max-width:100%;display:block}
/* Pas de color:inherit ici : sinon « .tf-light a » (0,1,1) écraserait toutes les
   couleurs de boutons/liens à une seule classe (.tl-btn--solid, .tl-navlink…).
   On ne réinitialise que le soulignement ; chaque lien porte sa propre couleur. */
.tf-light a{text-decoration:none}
.tf-light button{font-family:inherit}
.tf-light ::selection{background:var(--ink);color:var(--white)}

/* Focus clavier — monochrome, toujours visible */
.tf-light :focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;border-radius:6px}
.tl-dark :focus-visible,.tf-light .tl-dark :focus-visible{outline-color:var(--white)}

/* Lien d'évitement */
.tl-skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--ink);color:var(--white);
  font-weight:600;font-size:13px;padding:11px 18px;border-radius:10px;transition:top .18s var(--ease)}
.tl-skip:focus{top:16px}

/* Conteneur */
.tl-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.tl-wrap--narrow{max-width:1080px}

/* ----------------------------------------------------------------------------
   3. TYPOGRAPHIE
   ---------------------------------------------------------------------------- */
.tl-eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin:0 0 18px}
.tl-eyebrow--dark{color:var(--on-dark-dim)}

.tl-display{             /* titre géant type hero */
  font-family:var(--font-sans);font-weight:800;
  font-size:clamp(2.7rem,6.4vw,5.35rem);line-height:1.0;letter-spacing:-.037em;
  color:var(--ink);margin:0}
.tl-h2{font-weight:800;font-size:clamp(2rem,3.9vw,3.15rem);line-height:1.05;
  letter-spacing:-.03em;color:var(--ink);margin:0}
.tl-h3{font-weight:700;font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.15;
  letter-spacing:-.02em;color:var(--ink);margin:0}
.tl-lead{font-size:clamp(1.02rem,1.35vw,1.19rem);line-height:1.55;color:var(--dim);margin:0}
.tl-serif{font-family:var(--font-serif);font-style:italic}

/* En-tête de section centré, réutilisable */
.tl-sec-head{max-width:720px;margin:0 auto;text-align:center}
.tl-sec-head .tl-lead{margin-top:18px}

/* ----------------------------------------------------------------------------
   4. WORDMARK « Trackfly. » — Fraunces italique, monochrome
   Le point (b) est notre signature : non-italique, même encre. Personnalité
   par la TYPO, plus par la couleur.
   ---------------------------------------------------------------------------- */
.tl-brand{font-family:var(--font-serif);font-style:italic;font-weight:600;
  font-size:20px;letter-spacing:.005em;color:var(--ink);white-space:nowrap;display:inline-block}
.tl-brand b{font-style:normal;font-weight:700}
.tl-brand--on-dark{color:var(--white)}

/* ----------------------------------------------------------------------------
   5. BOUTONS PILULE — noir plein / blanc contour (façon vvault)
   ---------------------------------------------------------------------------- */
.tl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:15px;line-height:1;padding:14px 24px;border-radius:var(--r-pill);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .2s,border-color .2s,color .2s;
  -webkit-appearance:none;appearance:none}
.tl-btn:active{transform:translateY(0) scale(.985)}
.tl-btn svg{width:1.05em;height:1.05em;flex-shrink:0}

/* Plein noir */
.tl-btn--solid{background:var(--ink);color:var(--white);box-shadow:var(--sh-sm)}
.tl-btn--solid:hover{transform:translateY(-1.5px);box-shadow:var(--sh);background:#000}
/* Contour blanc */
.tl-btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2);box-shadow:var(--sh-sm)}
.tl-btn--ghost:hover{border-color:var(--ink);transform:translateY(-1.5px);box-shadow:var(--sh)}
/* Sur fond sombre */
.tl-btn--light{background:var(--white);color:var(--ink);box-shadow:0 8px 30px -10px rgba(0,0,0,.6)}
.tl-btn--light:hover{transform:translateY(-1.5px);background:#f2f3f4}
.tl-btn--outline{background:transparent;color:var(--white);border-color:var(--line-on-dark-2)}
.tl-btn--outline:hover{border-color:var(--white);transform:translateY(-1.5px);background:rgba(255,255,255,.06)}

.tl-btn--sm{padding:10px 17px;font-size:14px}
.tl-btn--lg{padding:16px 30px;font-size:16px}
.tl-btn--block{display:flex;width:100%}

/* Flèche animée (cartes / liens) */
.tl-arrow{display:inline-flex;transition:transform .28s var(--ease)}
.tl-arrowlink:hover .tl-arrow{transform:translateX(4px)}

/* ----------------------------------------------------------------------------
   6. TOPBAR
   ---------------------------------------------------------------------------- */
.tl-top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line)}
.tl-top__in{display:flex;align-items:center;gap:22px;height:64px}
.tl-top__nav{display:flex;align-items:center;gap:4px;margin:0 auto}
.tl-navlink{font-size:14.5px;font-weight:500;color:var(--dim);padding:9px 14px;border-radius:var(--r-pill);
  transition:color .18s,background .18s}
.tl-navlink:hover{color:var(--ink);background:var(--bg-alu)}
.tl-top__cta{display:flex;align-items:center;gap:10px}
.tl-top__cta .tl-signin{font-size:14.5px;font-weight:500;color:var(--dim);padding:9px 8px;transition:color .18s}
.tl-top__cta .tl-signin:hover{color:var(--ink)}
.tl-burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line-2);
  background:var(--surface);align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .16s var(--ease),background .16s var(--ease)}
.tl-burger:hover{border-color:var(--ink);background:var(--bg-alu)}
.tl-burger svg{width:20px;height:20px;stroke:var(--ink)}

/* ----------------------------------------------------------------------------
   7. RYTHME DE SECTION
   ---------------------------------------------------------------------------- */
.tl-section{padding:clamp(72px,10vw,128px) 0}
.tl-section--tight{padding:clamp(52px,7vw,84px) 0}
.tl-band-alu{background:var(--bg-alu);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* Bloc sombre pleine largeur (respiration N&B inversée) */
.tl-dark{position:relative;background:var(--dark);background:var(--dark-grad);color:var(--on-dark);overflow:hidden}
.tl-dark .tl-h2,.tl-dark .tl-h3,.tl-dark .tl-display{color:var(--white)}
.tl-dark .tl-lead{color:var(--on-dark-dim)}
/* fine texture métallique du bloc sombre */
.tl-dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 82% -10%,rgba(255,255,255,.10),transparent 60%),
             radial-gradient(50% 70% at 6% 108%,rgba(255,255,255,.06),transparent 55%)}

/* ----------------------------------------------------------------------------
   8. CARTES « feature » (motif vvault : arrondi, bordure fine, flèche au survol)
   ---------------------------------------------------------------------------- */
.tl-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tl-card{position:relative;display:flex;flex-direction:column;gap:14px;
  background:var(--alu-card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px 26px;box-shadow:var(--sh-sm),var(--alu-edge);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.tl-card:hover{transform:translateY(-4px);box-shadow:var(--sh),var(--alu-edge);border-color:var(--line-2)}
.tl-card__ic{width:46px;height:46px;border-radius:13px;background:var(--alu-chip);
  border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;
  box-shadow:var(--alu-edge)}
.tl-card__ic svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.6}
.tl-card h3{margin:0}
.tl-card p{margin:0;color:var(--dim);font-size:15px;line-height:1.55}
.tl-card__more{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:7px;
  font-weight:600;font-size:14px;color:var(--ink)}
.tl-card__more svg{width:16px;height:16px}

/* ----------------------------------------------------------------------------
   9. GRILLE CATALOGUE (cartes de beats)
   ---------------------------------------------------------------------------- */
.tl-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 18px;margin-bottom:22px;flex-wrap:wrap}
.tl-bar h2{margin:0}
.tl-more{font-size:14px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tl-more svg{width:15px;height:15px}

.tl-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.tl-tab{font-size:14px;font-weight:600;color:var(--dim);padding:9px 16px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:var(--surface);cursor:pointer;transition:.18s var(--ease)}
.tl-tab:hover{color:var(--ink);border-color:var(--ink)}
.tl-tab.on{background:var(--ink);color:var(--white);border-color:var(--ink)}

.tl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:20px}
.tl-beat{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;cursor:pointer;box-shadow:var(--sh-sm);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.tl-beat:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--line-2)}
.tl-beat__art{position:relative;aspect-ratio:1;background:var(--alu-chip);overflow:hidden}
.tl-beat__art img{width:100%;height:100%;object-fit:cover;filter:contrast(1.02);
  transition:transform .4s var(--ease),filter .4s}
.tl-beat:hover .tl-beat__art img{transform:scale(1.045);filter:contrast(1.05)}
.tl-beat__play{position:absolute;left:14px;bottom:14px;width:46px;height:46px;border-radius:50%;
  background:var(--white);color:var(--ink);display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh);opacity:0;transform:translateY(8px) scale(.9);transition:.24s var(--ease)}
.tl-beat__play svg{width:17px;height:17px;fill:var(--ink)}
.tl-beat:hover .tl-beat__play{opacity:1;transform:none}
.tl-beat__badge{position:absolute;right:12px;top:12px;font-size:11px;font-weight:700;letter-spacing:.02em;
  color:var(--white);background:rgba(11,12,15,.72);backdrop-filter:blur(6px);padding:5px 11px;border-radius:var(--r-pill)}
.tl-beat__meta{padding:15px 16px 16px;display:flex;flex-direction:column;gap:3px}
.tl-beat__t{font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-beat__s{color:var(--dim);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-beat__buy{display:flex;align-items:center;justify-content:space-between;margin-top:13px;
  padding-top:13px;border-top:1px solid var(--line)}
.tl-beat__price{font-weight:700;font-size:15px;color:var(--ink)}
.tl-beat__add{font-size:13px;font-weight:700;color:var(--ink);padding:7px 13px;border:1px solid var(--line-2);
  border-radius:var(--r-pill);transition:.18s var(--ease)}
.tl-beat:hover .tl-beat__add{border-color:var(--ink);background:var(--ink);color:var(--white)}

/* État vide / chargement propre */
.tl-empty{grid-column:1/-1;padding:26px 20px;border:1px dashed var(--line-2);border-radius:var(--r-lg);
  text-align:center;color:var(--dim);font-size:14.5px;background:var(--bg-alu)}

/* ----------------------------------------------------------------------------
   10. TARIFS — toggle, cartes, tableau comparatif
   ---------------------------------------------------------------------------- */
/* Toggle Mensuel / Annuel (segmented control monochrome, knob glissant) */
.tl-billing{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:34px}
.tl-toggle{position:relative;display:inline-flex;padding:5px;background:var(--bg-alu-2);
  border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:var(--alu-edge)}
.tl-toggle .tl-knob{position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/2);
  background:var(--ink);border-radius:var(--r-pill);box-shadow:var(--sh-sm);
  transition:transform .38s var(--ease);z-index:0}
.tl-toggle.annual .tl-knob{transform:translateX(100%)}
.tl-toggle button{position:relative;z-index:1;min-width:118px;border:0;background:transparent;cursor:pointer;
  font-weight:600;font-size:14.5px;color:var(--dim);padding:10px 20px;border-radius:var(--r-pill);
  transition:color .28s}
.tl-toggle button.on{color:var(--white)}
.tl-toggle button:not(.on):hover{color:var(--ink)}
.tl-save{font-size:13px;font-weight:600;color:var(--dim)}
.tl-save b{color:var(--ink);font-weight:700}

.tl-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;margin-top:52px}
.tl-plan{position:relative;display:flex;flex-direction:column;background:var(--alu-card);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 30px;box-shadow:var(--sh-sm),var(--alu-edge);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.tl-plan:hover{transform:translateY(-4px);box-shadow:var(--sh),var(--alu-edge);border-color:var(--line-2)}
.tl-plan__badge{position:absolute;top:18px;right:18px;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);padding:5px 11px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:var(--surface)}
.tl-plan__name{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.tl-plan__price{display:flex;align-items:baseline;gap:8px;margin-top:22px}
.tl-plan__amt{font-size:clamp(2.6rem,4vw,3.3rem);font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1}
.tl-plan__per{font-size:14px;font-weight:600;color:var(--dim)}
.tl-plan__sub{margin-top:8px;min-height:20px;font-size:13px;color:var(--dim)}
.tl-plan__pitch{margin:16px 0 24px;font-size:15px;color:var(--ink-2);line-height:1.5}
.tl-plan .tl-btn{margin-bottom:26px}
.tl-plan__feats{list-style:none;margin:0;padding:22px 0 0;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:13px}
.tl-plan__feats li{display:flex;gap:11px;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.tl-plan__feats li svg{width:19px;height:19px;flex-shrink:0;margin-top:1px;stroke:var(--ink);fill:none;stroke-width:2}
.tl-plan__feats li.muted{color:var(--dim)}
.tl-plan__feats li.muted svg{stroke:var(--faint)}

/* Carte recommandée = INVERSÉE en sombre (le contraste dit « recommandé », sans couleur) */
.tl-plan--reco{background:var(--dark);background:var(--dark-grad);border-color:transparent;
  color:var(--on-dark);box-shadow:var(--sh-lg);transform:translateY(-10px);overflow:hidden;isolation:isolate}
/* Spécificité égale à .tl-plan:hover (deux classes) : le survol de la carte
   déjà surélevée doit gagner, d'où la règle déclarée après — cascade, pas
   d'!important. On approfondit simplement le lift déjà appliqué (-10px). */
.tl-plan--reco:hover{transform:translateY(-13px)}
.tl-plan--reco::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(70% 60% at 88% -8%,rgba(255,255,255,.12),transparent 60%)}
.tl-plan--reco>*{position:relative;z-index:1}
.tl-plan--reco .tl-plan__badge{position:absolute;z-index:2;color:var(--white);
  border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.07)}
.tl-plan--reco .tl-plan__name{color:#cfd3da}
.tl-plan--reco .tl-plan__amt{color:var(--white)}
.tl-plan--reco .tl-plan__per,.tl-plan--reco .tl-plan__sub{color:var(--on-dark-dim)}
.tl-plan--reco .tl-plan__pitch{color:#e7e9ec}
.tl-plan--reco .tl-plan__feats{border-top-color:var(--line-on-dark)}
.tl-plan--reco .tl-plan__feats li{color:#e7e9ec}
.tl-plan--reco .tl-plan__feats li svg{stroke:var(--white)}
.tl-plan--reco .tl-plan__feats li.muted{color:var(--on-dark-dim)}

.tl-reassure{text-align:center;margin-top:34px;font-size:14px;color:var(--dim)}
.tl-reassure b{color:var(--ink);font-weight:700}

/* Tableau comparatif */
/* overflow-x:clip (et non auto) : « clip » ne crée PAS de conteneur de
   défilement, donc le thead sticky se cale bien sur le viewport (sous la
   topbar de 64px) au défilement de la page. « auto » faisait de .tl-compare-wrap
   le conteneur de scroll et cassait le sticky. En mobile on repasse à
   overflow-x:auto (scroll horizontal) + 1re colonne gelée — voir §14. */
.tl-compare-wrap{margin-top:26px;overflow-x:clip;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm)}
.tl-compare{width:100%;min-width:720px;border-collapse:collapse;background:var(--surface)}
.tl-compare thead th{position:sticky;top:64px;z-index:2;background:var(--surface);
  text-align:center;padding:18px 18px;border-bottom:1px solid var(--line-2)}
.tl-compare thead th:first-child{text-align:left}
.tl-compare .th-plan{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.tl-compare .th-plan.reco{position:relative}
.tl-compare .th-plan.reco::after{content:"Recommandé";display:block;margin-top:4px;font-size:10px;
  letter-spacing:.06em;color:var(--dim);font-weight:600;text-transform:none}
.tl-compare tbody th{text-align:left;font-weight:600;font-size:14px;color:var(--ink);padding:15px 18px;
  border-bottom:1px solid var(--line)}
.tl-compare tbody th small{display:block;font-weight:400;font-size:12px;color:var(--dim);margin-top:3px;max-width:340px}
.tl-compare tbody td{text-align:center;font-size:13.5px;color:var(--ink-2);padding:15px 18px;border-bottom:1px solid var(--line)}
.tl-compare td.col-reco,.tl-compare th.col-reco{background:var(--bg-alu)}
.tl-compare .cat td{background:var(--bg-alu-2);font-weight:700;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);text-align:left;padding:12px 18px}
.tl-compare svg.yes{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2.2}
.tl-compare .no{color:var(--faint)}
.tl-compare tbody tr:last-child th,.tl-compare tbody tr:last-child td{border-bottom:0}

/* ----------------------------------------------------------------------------
   11. FAQ (accordéon monochrome)
   ---------------------------------------------------------------------------- */
.tl-faq{max-width:800px;margin:0 auto;border-top:1px solid var(--line)}
.tl-faq details{border-bottom:1px solid var(--line)}
.tl-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:24px 4px;font-weight:700;font-size:17px;color:var(--ink);border-radius:12px;
  transition:background .16s var(--ease)}
.tl-faq summary:hover{background:var(--bg-alu)}
.tl-faq summary::-webkit-details-marker{display:none}
.tl-faq summary .tl-pm{position:relative;width:18px;height:18px;flex-shrink:0}
.tl-faq summary .tl-pm::before,.tl-faq summary .tl-pm::after{content:"";position:absolute;background:var(--ink);
  border-radius:2px;transition:transform .28s var(--ease)}
.tl-faq summary .tl-pm::before{left:0;right:0;top:8px;height:2px}
.tl-faq summary .tl-pm::after{top:0;bottom:0;left:8px;width:2px}
.tl-faq details[open] summary .tl-pm::after{transform:scaleY(0)}
.tl-faq details>div{padding:0 4px 24px;color:var(--dim);font-size:15px;line-height:1.6;max-width:660px}

/* ----------------------------------------------------------------------------
   12. FORMULAIRE (envoie ta maquette)
   ---------------------------------------------------------------------------- */
.tl-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px;max-width:560px;box-shadow:var(--sh-sm),var(--alu-edge)}
.tl-form label{display:block;font-size:12.5px;font-weight:600;color:var(--dim);margin:16px 0 7px}
.tl-form label:first-child{margin-top:0}
.tl-form input,.tl-form textarea{width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--line-2);
  background:var(--bg-alu);color:var(--ink);font-size:15px;font-family:inherit;transition:border-color .18s,background .18s,box-shadow .18s}
.tl-form input:focus,.tl-form textarea:focus{outline:none;border-color:var(--ink);background:var(--surface);
  box-shadow:0 0 0 4px rgba(11,12,15,.06)}
.tl-form textarea{min-height:92px;resize:vertical}
.tl-form .tl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tl-form .tl-note{color:var(--faint);font-size:12.5px;margin-top:14px;line-height:1.5}
.tl-msg{margin-top:14px;font-size:14px;line-height:1.5;display:none}
.tl-msg.show{display:block}
.tl-msg.ok{color:var(--ink);font-weight:600}
.tl-msg.err{color:#b3261e;font-weight:600}

/* ----------------------------------------------------------------------------
   13. PIED DE PAGE
   ---------------------------------------------------------------------------- */
.tl-footer{border-top:1px solid var(--line);padding:44px 0 40px;background:var(--bg-alu)}
.tl-footer__in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
.tl-footer__links{display:flex;flex-wrap:wrap;gap:8px 20px}
.tl-footer__links a{font-size:13.5px;color:var(--dim);transition:color .16s}
.tl-footer__links a:hover{color:var(--ink)}
.tl-footer__cr{font-size:13px;color:var(--faint)}

/* ----------------------------------------------------------------------------
   14. RESPONSIVE
   ---------------------------------------------------------------------------- */
@media(max-width:960px){
  .tl-cards{grid-template-columns:1fr;gap:16px}
  .tl-plans{grid-template-columns:1fr;gap:18px;max-width:460px;margin-left:auto;margin-right:auto}
  .tl-plan--reco{transform:none}
}
@media(max-width:820px){
  .tl-top__nav{display:none}
  .tl-burger{display:flex}
  .tl-top__cta .tl-signin{display:none}
  /* Tableau comparatif : scroll horizontal + 1re colonne (libellés) GELÉE
     pour rester lisible en scrollant vers Pro/Ultra. */
  .tl-compare-wrap{overflow-x:auto}
  .tl-compare thead th:first-child,.tl-compare tbody th{position:sticky;left:0;background:var(--surface);z-index:1}
  .tl-compare thead th:first-child{z-index:3}
}
@media(max-width:560px){
  :root{--pad:18px}
  .tl-btn{padding:13px 20px}
  .tl-form{padding:22px}
  .tl-plan{padding:28px 24px}
}

/* ----------------------------------------------------------------------------
   15. PRÉFÉRENCE MOUVEMENT RÉDUIT
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .tf-light *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}