/*
 * typography.css — Calzedonia Maroc
 * Hiérarchie Spezia (LTR) + Noto Sans Arabic (RTL)
 * Toutes les tailles et line-heights extraites du source Calzedonia.
 * Propriétés logiques partout — flip RTL natif.
 */

/* ─────────────────────────────────────────────
   HIÉRARCHIE DISPLAY / HEADINGS
   ───────────────────────────────────────────── */

/*
 * .t-display — hero banner, grand titre homepage
 * Extrait : css-1ikaiz9 { font-size:1.5rem / 2.5rem desktop }
 */
.t-display {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xl);           /* 1.5rem — 21px mobile */
  line-height: var(--leading-hero-sm); /* 1.75rem */
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .t-display {
    font-size: var(--text-2xl);         /* 2rem — 28px tablet */
    line-height: var(--leading-hero-lg);
  }
}

@media (min-width: 1024px) {
  .t-display {
    font-size: var(--text-4xl);         /* 2.5rem — 35px desktop */
    line-height: var(--leading-hero-lg);
  }
}

/*
 * .t-heading-1 — titres sections, bannières éditoriales
 * Extrait : css-1rn8m6n { font-size:1.25rem / 2rem desktop }
 */
.t-heading-1 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg);            /* 1.25rem — 17.5px mobile */
  line-height: var(--leading-relaxed);  /* 1.5rem */
}

@media (min-width: 768px) {
  .t-heading-1 {
    font-size: var(--text-2xl);          /* 2rem — 28px desktop */
    line-height: var(--leading-hero-lg); /* 2.75rem */
  }
}

/*
 * .t-heading-2 — titres composants, méga-menu sections
 * Extrait : css-1g31453 { font-size:0.875rem / 1rem desktop, weight:500, uppercase }
 */
.t-heading-2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--text-md);           /* 1.125rem — 15.75px */
  line-height: var(--leading-relaxed);
}

/*
 * .t-heading-3 — sous-titres, labels forts
 * Extrait : seocontent.css h3 { font-size:2.28571rem }
 * Usage SEO content — taille large uniquement dans ce contexte
 */
.t-heading-3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}

/* ─────────────────────────────────────────────
   NAVIGATION
   ───────────────────────────────────────────── */

/*
 * .t-nav — items navigation desktop
 * Extrait : css-1ww41yt { font-family:'helvetica-neue-lt-pro'; font-size:0.875rem;
 *           font-weight:300; line-height:1.125rem; color:#646464; text-transform:uppercase }
 */
.t-nav {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--text-sm);        /* 0.875rem */
  line-height: var(--leading-tight);/* 1.125rem */
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

@media (min-width: 1024px) {
  .t-nav {
    font-size: var(--text-base);    /* 1rem desktop */
    line-height: var(--leading-snug);
  }
}

/*
 * .t-nav-label — labels nav de premier niveau (FEMME, HOMME, ENFANTS)
 * Extrait : css-18xbllv { font-weight:500; text-transform:uppercase }
 */
.t-nav-label {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────────
   CORPS DE TEXTE
   ───────────────────────────────────────────── */

/*
 * .t-body — corps principal
 * Extrait : css-6atw8u { font-size:0.875rem; font-weight:300; line-height:1.125rem }
 */
.t-body {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--text-sm);         /* 0.875rem */
  line-height: var(--leading-tight); /* 1.125rem */
}

@media (min-width: 768px) {
  .t-body {
    font-size: var(--text-base);
    line-height: var(--leading-snug);
  }
}

/*
 * .t-body-roman — corps avec poids regular (liens, textes importants)
 * Extrait : css-475tdb { font-weight:400; line-height:1.25rem; color:#000 }
 */
.t-body-roman {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

/* ─────────────────────────────────────────────
   LABELS / UI
   ───────────────────────────────────────────── */

/*
 * .t-label — labels UI, catégorie subtitle
 * Extrait : seocontent.css .category-subtitle { font-size:1rem; font-weight:400; line-height:1.5rem }
 */
.t-label {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/*
 * .t-label-sm — petits labels, metadata produit
 */
.t-label-sm {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

/*
 * .t-stripe — bande promotionnelle
 * Extrait : css-v4bveg { font-size:0.75rem; font-weight:300; line-height:1.375rem; text-transform:uppercase }
 */
.t-stripe {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--text-xs);          /* 0.75rem */
  line-height: var(--leading-normal); /* 1.375rem */
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/*
 * .t-price — affichage prix
 * Extrait : pattern observé dans les product tiles
 */
.t-price {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  font-variant-numeric: tabular-nums;
}

.t-price--sale {
  color: var(--color-primary);
}

.t-price--original {
  text-decoration: line-through;
  color: var(--color-text-secondary);
  font-weight: var(--fw-light);
}

/*
 * .t-btn — texte bouton CTA
 * Extrait : css-j9vlmb { font-size:0.875rem; font-weight:400; text-transform:uppercase }
 */
.t-btn {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────────
   SEO CONTENT (fidèle au composant source)
   Extrait : seocontent.css
   ───────────────────────────────────────────── */

.seo-content h3 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);     /* 2.28571rem — extrait exact */
  font-weight: var(--fw-regular);
  line-height: var(--leading-display);
}

.seo-content .category-title {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: var(--fw-light);
  line-height: 2.25rem;
  text-transform: none;
  margin-block-end: 1.35714rem;
}

@media (max-width: 63.93625em) {
  .seo-content .category-title {
    margin-block-end: 1.14286rem;
  }
}

.seo-content .category-subtitle {
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--leading-relaxed);
  margin-block-end: 0.67143rem;
}

.seo-content .category-description,
.seo-content .category-text {
  font-size: var(--text-sm);
  font-weight: var(--fw-light);
  line-height: var(--leading-tight);
}

/* ─────────────────────────────────────────────
   ARABE — Surcharges RTL
   ───────────────────────────────────────────── */

[dir="rtl"] .t-display,
[dir="rtl"] .t-heading-1,
[dir="rtl"] .t-heading-2,
[dir="rtl"] .t-heading-3 {
  font-family: var(--font-arabic);
  letter-spacing: 0;               /* pas de letter-spacing en arabe */
}

[dir="rtl"] .t-nav,
[dir="rtl"] .t-nav-label,
[dir="rtl"] .t-body,
[dir="rtl"] .t-body-roman,
[dir="rtl"] .t-label,
[dir="rtl"] .t-label-sm,
[dir="rtl"] .t-stripe,
[dir="rtl"] .t-btn {
  font-family: var(--font-arabic);
  letter-spacing: 0;
}

[dir="rtl"] .t-stripe {
  letter-spacing: 0;              /* annule le tracking uppercase sur l'arabe */
}

/* Nombres arabes : garder la logique LTR pour les prix et quantités */
[dir="rtl"] .t-price,
[dir="rtl"] [data-numeric] {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-body);  /* Spezia pour les chiffres — plus propre */
}

/* ─────────────────────────────────────────────
   ACCESSIBILITÉ — tailles minimales (Chantier 5)
   Corps : --text-base (14px). Navigation mobile lisible — les tailles
   vivent dans les composants (header.css : drawer trigger 1.125rem,
   sous-liens 1rem ; chatbot.css : messages 0.9375rem). On évite toute
   surcharge ici (conflits de spécificité). Seul garde-fou : empêcher le
   zoom iOS au focus des champs (font-size ≥ 16px effectif sur tactile).
   ───────────────────────────────────────────── */

@media (max-width: 767px) {
  input,
  textarea,
  select {
    font-size: max(1.0625rem, 16px);   /* 16px → pas de zoom iOS au focus */
  }
}