/**
 * ==============================================================================
 * COUCHE 00 - BASE : RESET, ACCESSIBILITÉ & TOKENS TECHNIQUES
 * Thème : The Timer's (thetimers)
 * ==============================================================================
 * RÈGLE D'ARCHITECTURE :
 * Aucune chaîne @import n'est autorisée. Cette feuille est la couche socle
 * chargée en première position par inc/assets.php avec la dépendance wp-block-library.
 */

:root {
  /* Variables techniques de secours et utilitaires officielles */
  --tt-color-base: var(--wp--preset--color--base, #FFFFFF);
  --tt-color-base-2: var(--wp--preset--color--base-2, #FFF6F0);
  --tt-color-contrast: var(--wp--preset--color--contrast, #000000);
  --tt-color-contrast-2: var(--wp--preset--color--contrast-2, #555B62);
  --tt-color-muted-on-dark: var(--wp--preset--color--muted-on-dark, #C9C7DB);
  --tt-color-primary: var(--wp--preset--color--primary, #272361);
  --tt-color-accent: var(--wp--preset--color--accent, #E7B088);
  --tt-color-accent-text: var(--wp--preset--color--accent-text, #8E6E53);
  --tt-color-border: var(--wp--preset--color--border, #E9E9E9);
  --tt-color-success: var(--wp--preset--color--success, #1E6E38);
  --tt-color-danger: var(--wp--preset--color--danger, #CE4440);

  /* Rayon de courbure sobre horloger */
  --tt-radius-sm: 2px;
  --tt-radius-md: 4px;

  /* Cible tactile minimale recommandée WCAG 2.1 AA */
  --tt-touch-target-min: 44px;

  /* ==========================================================================
     ARCHITECTURE TYPOGRAPHIQUE À 3 NIVEAUX (Échelle Modulaire Fluide 1.25)
     Base stricte : 1rem = 16px. Aucune taille inférieure à 12px (0.75rem).
     ========================================================================== */

  /* 1. Familles */
  --tt-font-heading: var(--wp--preset--font-family--heading, "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  --tt-font-body: var(--wp--preset--font-family--body, "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);

  /* 2. Échelle fluide multi-écrans (Mobile 360px -> Tablette -> Desktop 1440px)
        Lisibilité mobile renforcée : corps et descriptions >= 16px, secondaire >= 15px, surtitres >= 13px */
  --tt-text-display: clamp(2.125rem, 1.65rem + 2.4vw, 3.4375rem); /* Hero : 34px -> 55px */
  --tt-text-h1: var(--wp--preset--font-size--3xl, clamp(2rem, 1.6rem + 2vw, 3rem)); /* H1 : 32px -> 48px */
  --tt-text-h2: var(--wp--preset--font-size--2xl, clamp(1.625rem, 1.35rem + 1.35vw, 2.25rem)); /* H2 : 26px -> 36px */
  --tt-text-h2-card: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); /* H2 Encart (Fondateur, SEO, Newsletter) : 24px -> 32px */
  --tt-text-h3: var(--wp--preset--font-size--xl, clamp(1.25rem, 1.12rem + 0.65vw, 1.5rem)); /* H3 : 20px -> 24px */
  --tt-text-h4: var(--wp--preset--font-size--lg, clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem)); /* H4 / Question FAQ : 18px -> 20px */
  --tt-text-lead: var(--wp--preset--font-size--lg, clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem)); /* Chapô / Sous-titre : 18px -> 20px */
  --tt-text-body: var(--wp--preset--font-size--md, clamp(1rem, 0.96rem + 0.2vw, 1.0625rem)); /* Corps de texte : 16px -> 17px */
  --tt-text-ui: clamp(1rem, 0.96rem + 0.15vw, 1.03125rem); /* UI / Navigation / Boutons / Cartes : 16px -> 16.5px */
  --tt-text-sm: var(--wp--preset--font-size--sm, clamp(0.9375rem, 0.91rem + 0.15vw, 1rem)); /* Secondaire / Méta : 15px -> 16px */
  --tt-text-xs: var(--wp--preset--font-size--xs, clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem)); /* Surtitres / Badges : 13px -> 14px */

  /* 3. Interlignes sémantiques (Loi inverse : serré sur grands titres, aéré sur lecture longue) */
  --tt-leading-display: 1.12;
  --tt-leading-tight: 1.2;
  --tt-leading-snug: 1.35;
  --tt-leading-normal: 1.5;
  --tt-leading-relaxed: 1.65;

  /* 4. Interlettrages sémantiques (Tracking optique aéré) */
  --tt-tracking-tighter: -0.015em;
  --tt-tracking-tight: -0.01em;
  --tt-tracking-normal: 0em;
  --tt-tracking-wide: 0.04em;
  --tt-tracking-widest: 0.1em;
}

/* 1. Box-sizing universel et prévention absolue des débordements horizontaux */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--tt-font-body);
  font-size: var(--tt-text-body);
  font-weight: 400;
  line-height: var(--tt-leading-relaxed);
  color: var(--wp--preset--color--contrast, #000000);
  background-color: var(--wp--preset--color--base, #FFFFFF);
}

/* La police du corps est fixée par theme.json (styles.typography).
   Seuls les champs de formulaire n'en héritent pas nativement. */
input,
button,
select,
textarea {
  font: inherit;
}

/* Hiérarchie stricte des titres horlogers — finesse minimaliste (poids 500) */
h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading {
  font-family: var(--tt-font-heading);
  font-weight: 500;
  line-height: var(--tt-leading-tight);
  letter-spacing: var(--tt-tracking-tight);
  color: var(--wp--preset--color--primary, #272361);
  overflow-wrap: break-word;
  text-wrap: balance;
}

h1 {
  font-size: var(--tt-text-h1);
  font-weight: 500;
  line-height: var(--tt-leading-display);
  letter-spacing: var(--tt-tracking-tighter);
}

h2 {
  font-size: var(--tt-text-h2);
  font-weight: 500;
  line-height: var(--tt-leading-tight);
  letter-spacing: var(--tt-tracking-tight);
}

h3 {
  font-size: var(--tt-text-h3);
  font-weight: 500;
  line-height: 1.28;
}

h4 {
  font-size: var(--tt-text-h4);
  font-weight: 500;
  line-height: var(--tt-leading-snug);
}

p,
li,
dd,
dt {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* Surtitres de section minimalistes (overline discret avec index horloger cuivre #E7B088) */
.tt-eyebrow,
.tt-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--tt-font-body);
  font-size: var(--tt-text-xs);
  font-weight: 500;
  line-height: var(--tt-leading-normal);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #6E6E77;
  margin-bottom: 0.625rem;
}

.tt-eyebrow::before,
.tt-section-eyebrow::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 1.5px;
  background-color: var(--tt-color-accent, #E7B088);
  flex-shrink: 0;
}

/* Sur les blocs centrés : encadrement symétrique gauche/droite (pas de décalage optique) */
.has-text-align-center > .tt-eyebrow,
.has-text-align-center > .tt-section-eyebrow,
.tt-brands-section__eyebrow {
  display: flex;
  justify-content: center;
}

.has-text-align-center > .tt-eyebrow::after,
.has-text-align-center > .tt-section-eyebrow::after,
.tt-brands-section__eyebrow::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 1.5px;
  background-color: var(--tt-color-accent, #E7B088);
  flex-shrink: 0;
}

/* Variante sur fond sombre (#272361) : or cuivré #E7B088 */
.tt-eyebrow--on-dark {
  color: var(--tt-color-accent, #E7B088);
}

/* Médias fluides : jamais de débordement d'image ou vidéo */
img,
picture,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Les SVG restent en ligne : les icônes natives (WooCommerce, navigation) en dépendent. */
svg {
  max-width: 100%;
}

/* 2. Accessibilité WCAG 2.1 AA : Lien d'évitement natif WordPress (.skip-link) */
.skip-link {
  position: absolute;
  top: -9999px;
  left: 1rem;
  z-index: 999999;
  padding: 0.75rem 1.5rem;
  background-color: var(--tt-color-contrast);
  color: var(--tt-color-base);
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--tt-radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: top 0.2s ease-in-out;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 1rem;
  outline: 3px solid var(--tt-color-accent);
  outline-offset: 2px;
}

/* 3. Accessibilité WCAG 2.1 AA : Indicateur de focus visible et sans ambiguïté */
:focus-visible {
  outline: 2px solid var(--tt-color-accent);
  outline-offset: 3px;
}

/* Neutralisation du contour pour les clics souris (préservé au clavier par :focus-visible) */
:focus:not(:focus-visible) {
  outline: none;
}

/* 4. Accessibilité WCAG 2.1 AA : Cibles tactiles minimales >= 44x44px
   (Exclut les pages transactionnelles natives WooCommerce Panier, Commande, Confirmation et Mon Compte — ADR-004) */
:where(
  button,
  .wp-block-button__link,
  .wp-block-navigation-item__content,
  .tt-btn,
  input[type="submit"],
  input[type="button"]
):not(.tt-wc-native *, .woocommerce-cart *, .woocommerce-checkout *, .woocommerce-account *) {
  min-height: var(--tt-touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Préservation de l'alignement natif des icônes de paiement WooCommerce sur la page Commande */
.tt-wc-native .payment_methods li img,
.woocommerce-checkout .payment_methods li img {
  display: inline-block;
}

/* 5. Accessibilité WCAG 2.1 AA : Prise en compte du réglage prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}