/* ==========================================================================
   TME Theme — Main stylesheet
   Importe les tokens, applique le reset, definit les briques de base.
   Les styles propres a chaque section seront ajoutes au fur et a mesure.
   ========================================================================== */

@import url('tokens.css');

/* ── Reset minimal ────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--ff-base);
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  color:var(--text-body);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video{ max-width:100%; display:block; height:auto; }
a{ color:var(--primary); text-decoration:none; transition:color var(--tr-fast); }
a:hover{ color:var(--primary-2); }
button{ font-family:inherit; cursor:pointer; }
ul,ol{ padding-left:1.25em; }

/* ── Typographie ──────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6{
  color:var(--text);
  margin:0 0 var(--sp-4);
  line-height:var(--lh-tight);
  font-weight:var(--fw-bold);
  letter-spacing:-0.01em;
}
h1{ font-size:var(--fs-2xl); font-weight:var(--fw-extra); letter-spacing:-0.02em; }
h2{ font-size:var(--fs-xl); }
h3{ font-size:var(--fs-lg); }
p{ margin:0 0 var(--sp-4); }

/* ── Layout helpers ───────────────────────────────────────── */
.tme-container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}
.tme-section{
  padding:var(--sp-16) 0;
}
.tme-section--tight{ padding:var(--sp-12) 0; }

/* ── Boutons ──────────────────────────────────────────────── */
.tme-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  padding:14px 28px;
  border-radius:var(--rd-sm);
  border:2px solid transparent;
  font-size:var(--fs-sm);
  font-weight:var(--fw-semi);
  letter-spacing:.02em;
  text-transform:uppercase;
  transition:all var(--tr-base);
  white-space:nowrap;
}
.tme-btn--primary{
  background:var(--primary);
  color:#fff;
}
.tme-btn--primary:hover{
  background:var(--primary-2);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:var(--sh-md);
}
.tme-btn--ghost{
  background:transparent;
  color:var(--primary);
  border-color:var(--primary);
}
.tme-btn--ghost:hover{
  background:var(--primary);
  color:#fff;
}

/* ── Header skeleton (a remplacer en derniere phase) ──────── */
.tme-header{
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.tme-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--sp-4) var(--gutter);
}
.tme-header__logo{
  font-size:var(--fs-lg);
  font-weight:var(--fw-black);
  color:var(--text);
  letter-spacing:-0.02em;
}
.tme-header__logo span{ color:var(--primary); }

/* ── Section placeholders (etat actuel — squelette) ───────── */
.tme-placeholder{
  padding:var(--sp-16) 0;
  border-bottom:1px dashed var(--border);
}
.tme-placeholder:nth-of-type(even){ background:var(--surface); }

.tme-placeholder__inner{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  align-items:flex-start;
}
.tme-placeholder__tag{
  display:inline-block;
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--primary);
  background:rgba(0,76,148,.08);
  padding:6px 12px;
  border-radius:var(--rd-pill);
}
.tme-placeholder__title{
  font-size:var(--fs-xl);
  margin:0;
}
.tme-placeholder__desc{
  color:var(--muted);
  max-width:60ch;
  margin:0;
}
.tme-placeholder__status{
  display:inline-block;
  font-size:var(--fs-xs);
  font-weight:var(--fw-semi);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--sale);
  background:rgba(168,25,25,.08);
  padding:6px 12px;
  border-radius:var(--rd-pill);
  border:1px dashed rgba(168,25,25,.4);
}

/* ── Responsive base ──────────────────────────────────────── */
@media (max-width:768px){
  :root{
    --fs-2xl: 2.25rem;
    --fs-xl: 1.5rem;
    --fs-lg: 1.25rem;
    --gutter: 16px;
  }
  .tme-section{ padding:var(--sp-12) 0; }
  .tme-placeholder{ padding:var(--sp-12) 0; }
}