/* ==========================================================================
   BASE — Reset, typographie globale, body, liens, focus
   ========================================================================== */

/* Import des polices via Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* --- Reset ciblé --------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Corps ---------------------------------------------------------------- */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--clr-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Titres dans les blocs EMI-LAB uniquement ----------------------------- */
/* Scopé sur .emi-* pour ne pas écraser les widgets Elementor natifs */

.emi-home h1, .emi-home h2, .emi-home h3,
.emi-trainings h1, .emi-trainings h2, .emi-trainings h3,
.emi-events h1, .emi-events h2, .emi-events h3,
.emi-profiles h1, .emi-profiles h2, .emi-profiles h3,
.emi-about h1, .emi-about h2, .emi-about h3,
.emi-section-title,
.emi-train-card-title,
.emi-trainings-title {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
}

/* Scopé sur .emi-* — ne pas écraser les paragraphes des widgets Elementor */
[class^="emi-"] p,
[class*=" emi-"] p {
  margin: 0 0 1em;
  line-height: var(--leading-loose);
}

[class^="emi-"] p:last-child,
[class*=" emi-"] p:last-child { margin-bottom: 0; }

/* --- Liens dans blocs EMI ------------------------------------------------- */

[class^="emi-"] a,
[class*=" emi-"] a {
  color: var(--clr-navy-700);
  text-decoration: none;
  transition: color var(--transition-base);
}

[class^="emi-"] a:hover,
[class*=" emi-"] a:hover {
  color: var(--clr-gold-700);
}

/* --- Focus visible (accessibilité clavier) -------------------------------- */

:focus-visible {
  outline: 2px solid var(--clr-gold-700);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --- Utilitaires de conteneur --------------------------------------------- */

.emi-container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
}

.emi-container--wide {
  max-width: var(--container-max-wide);
}

.emi-container--narrow {
  max-width: var(--container-max-narrow);
}

@media (max-width: 768px) {
  .emi-container {
    padding-left: var(--container-px-sm);
    padding-right: var(--container-px-sm);
  }
}

/* --- Utilitaires visuels -------------------------------------------------- */

.emi-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Ligne séparatrice dorée */
.emi-gold-line {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--clr-gold-700);
  border-radius: var(--radius-full);
  margin: var(--space-4) 0;
}

.emi-gold-line--center {
  margin-left: auto;
  margin-right: auto;
}

/* --- En-têtes de section standardisés ------------------------------------ */

.emi-section-head {
  margin-bottom: var(--space-12);
}

.emi-section-head--center {
  text-align: center;
}

.emi-section-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--clr-gold-700);
  margin-bottom: var(--space-3);
}

.emi-section-title {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  margin: 0 0 var(--space-4);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.emi-section-sub {
  font-size: var(--text-lg);
  color: var(--clr-ink-mid);
  line-height: var(--leading-loose);
  max-width: 640px;
}

.emi-section-head--center .emi-section-sub {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-xl); }
  .emi-section-title { font-size: var(--text-3xl); }
}

/* --- Badges --------------------------------------------------------------- */

.emi-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
}

.emi-badge--navy {
  background: var(--clr-navy-050);
  color: var(--clr-navy-700);
  border-color: var(--clr-navy-100);
}

.emi-badge--gold {
  background: var(--clr-gold-100);
  color: var(--clr-gold-800);
  border-color: var(--clr-gold-400);
}

.emi-badge--outline {
  background: transparent;
  color: var(--clr-gold-700);
  border-color: var(--clr-gold-700);
}

/* --- Boutons -------------------------------------------------------------- */

.emi-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    transform var(--transition-base),
    box-shadow var(--transition-base);
  white-space: nowrap;
}

.emi-btn:hover {
  transform: translateY(-2px);
}

.emi-btn:active {
  transform: translateY(0);
}

.emi-btn--primary {
  background: var(--clr-navy-800);
  color: var(--clr-white);
  border-color: var(--clr-navy-800);
}

.emi-btn--primary:hover {
  background: var(--clr-navy-700);
  border-color: var(--clr-navy-700);
  color: var(--clr-white);
  box-shadow: var(--shadow-md);
}

.emi-btn--gold {
  background: var(--clr-gold-700);
  color: var(--clr-navy-800);
  border-color: var(--clr-gold-700);
}

.emi-btn--gold:hover {
  background: var(--clr-gold-600);
  border-color: var(--clr-gold-600);
  color: var(--clr-navy-800);
  box-shadow: var(--shadow-md);
}

.emi-btn--outline {
  background: transparent;
  color: var(--clr-navy-800);
  border-color: var(--clr-stone-dark);
}

.emi-btn--outline:hover {
  border-color: var(--clr-navy-700);
  color: var(--clr-navy-700);
  background: var(--clr-navy-050);
}

.emi-btn--outline-white {
  background: transparent;
  color: var(--clr-white);
  border-color: rgba(255,255,255,0.4);
}

.emi-btn--outline-white:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.7);
  color: var(--clr-white);
}

.emi-btn--sm {
  font-size: var(--text-xs);
  padding: 8px 16px;
}

.emi-btn--lg {
  font-size: var(--text-base);
  padding: 16px 36px;
}