/* ============================================================
   MONT NOIR · MN30 — DESIGN TOKENS
   Variables CSS officielles. Copier-coller dans tout projet web.
   v1.3 — 03 mai 2026 — ajout signature cuivre MONT NOIR
   ============================================================ */


/* ============================================================
   IMPORTS POLICES GOOGLE FONTS (Playfair + Inter)
   À placer EN PREMIER, avant toute autre règle CSS.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,900;1,400;1,900&display=swap');


/* ============================================================
   POLICES PAYANTES (Bison + ES Schwarzweiss)
   Héberger les fichiers .woff2/.ttf dans /fonts/ sur le serveur.
   ============================================================ */

@font-face {
  font-family: 'Bison';
  src: url('../fonts/Bison-Bold.woff2') format('woff2'),
       url('../fonts/Bison-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ES Schwarzweiss';
  src: url('../fonts/ESSchwarzweiss-Extrabold.woff2') format('woff2'),
       url('../fonts/ESSchwarzweiss-Extrabold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {

  /* ========== NEUTRES (socle, 80-90% de l'usage) ========== */

  --mn-black:    #000000; /* Fonds principaux, supports premium */
  --mn-ink:      #0A0A0B; /* Fonds digital, landing pages */
  --mn-graphite: #141416; /* Cartes, blocs structurels */
  --mn-coal:     #1C1C1F; /* Reliefs, sections secondaires */
  --mn-smoke:    #2A2A2E; /* Bordures, séparateurs */
  --mn-steel:    #4A4A4F; /* Textes secondaires */
  --mn-fog:      #8C8C92; /* Eyebrow, légendes */
  --mn-mist:     #B8B8BD; /* Sous-titres */
  --mn-bone:     #E8E6E1; /* Touche lifestyle, blanc cassé chaud */
  --mn-paper:    #F4F2ED; /* Surfaces premium claires, texte sur fond noir */


  /* ========== ARCHES MN30 (accent, 10-20% maximum) ========== */

  --arch-1: #FF00E0; /* Magenta électrique  · Entrée */
  --arch-2: #E300FF; /* Magenta-violet      · Immersion */
  --arch-3: #C400FF; /* Violet intense      · Transformation */
  --arch-4: #9B00FF; /* Violet profond      · Premium */
  --arch-5: #6A1AFF; /* Violet-bleu         · Transition */
  --arch-6: #3A2BFF; /* Bleu électrique     · Précision */
  --arch-7: #1E2EFF; /* Bleu intense        · Vitesse */
  --arch-8: #0F1FE8; /* Bleu profond        · Fond futuriste */


  /* ========== CUIVRE — SIGNATURE MONT NOIR (5-10% maximum) ========== */
  /* Univers chromatique de la marque mère. Ne JAMAIS cohabiter avec
     les arches dans la même zone visuelle (cf. règle de dualité). */

  --mn-copper-deep:  #8B5A2B; /* Patine, profondeur, ombre du cuivre */
  --mn-copper:       #B87333; /* Cuivre signature, tonalité de référence */
  --mn-copper-light: #D89B5C; /* Cuivre clair, lumière, accent texte fin */


  /* ========== DÉGRADÉS SIGNATURES ========== */

  /* Dégradé arches MN30 — 8 stops, magenta entrée → bleu fond */
  --mn-arch-gradient: linear-gradient(
    90deg,
    var(--arch-1) 0%,
    var(--arch-2) 14%,
    var(--arch-3) 28%,
    var(--arch-4) 42%,
    var(--arch-5) 56%,
    var(--arch-6) 70%,
    var(--arch-7) 84%,
    var(--arch-8) 100%
  );

  /* Dégradé cuivre MONT NOIR — 3 stops, dark → light, 135° éditorial */
  --mn-copper-gradient: linear-gradient(
    135deg,
    var(--mn-copper-deep) 0%,
    var(--mn-copper)      50%,
    var(--mn-copper-light) 100%
  );


  /* ========== TYPOGRAPHIES ========== */

  --font-impact:    'Bison', 'Oswald', 'Arial Narrow', sans-serif;
  --font-editorial: 'Playfair Display', 'Times New Roman', serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mn30:      'ES Schwarzweiss', 'Bison', sans-serif;


  /* ========== ÉCHELLE TYPOGRAPHIQUE ========== */

  --fs-display:    96px;  /* H1 impact desktop */
  --fs-h1:         72px;
  --fs-h2:         48px;
  --fs-h3:         28px;
  --fs-quote:      24px;  /* Citations Playfair italic */
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-eyebrow:    12px;
  --fs-cta:        15px;


  /* ========== ESPACEMENTS ========== */

  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;
  --space-3xl:  96px;


  /* ========== LETTER-SPACING ========== */

  --tracking-tight:    -0.02em;
  --tracking-normal:    0;
  --tracking-wide:      0.02em;   /* MONT NOIR Playfair Black majuscules */
  --tracking-wider:     0.15em;   /* CTA */
  --tracking-widest:    0.3em;    /* Eyebrow */


  /* ========== LINE-HEIGHTS ========== */

  --leading-tight:   0.92;  /* Bison impact */
  --leading-snug:    1.1;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;   /* Body Inter */
  --leading-loose:   1.8;


  /* ========== BORDURES & RADIUS ========== */

  --radius-none:  0;
  --radius-sm:    2px;
  --radius-md:    4px;
  /* MONT NOIR privilégie les angles vifs. Éviter les radius > 8px. */

  --border-subtle: 0.5px solid var(--mn-smoke);
  --border-strong: 1px solid var(--mn-mist);


  /* ========== OMBRES & GLOW (usage parcimonieux) ========== */

  --shadow-card:     0 10px 40px rgba(0, 0, 0, 0.5);
  --glow-arch-1:     0 0 12px var(--arch-1);
  --glow-arch-4:     0 0 12px var(--arch-4);
  --glow-arch-8:     0 0 12px var(--arch-8);
}


/* ============================================================
   RESET MINIMAL POUR PROJETS MONT NOIR
   ============================================================ */

.mn-context {
  background: var(--mn-black);
  color: var(--mn-paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mn-context * {
  box-sizing: border-box;
}


/* ============================================================
   CLASSES TYPOGRAPHIQUES UTILITAIRES
   ============================================================ */

/* === EYEBROW === Surtitre Inter Medium très tracké */
.mn-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--mn-fog);
}


/* === H1 IMPACT === Bison Bold majuscules — Faire AGIR */
.mn-h1-impact {
  font-family: var(--font-impact);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--mn-paper);
}


/* === H1 PREMIUM === Playfair Black 900 (titres premium éditoriaux) */
.mn-h1-premium {
  font-family: var(--font-editorial);
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  color: var(--mn-paper);
}

/* Variante majuscules pour MONT NOIR */
.mn-h1-premium-uppercase {
  font-family: var(--font-editorial);
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--mn-paper);
}


/* === H2 ÉDITORIAL === Playfair Regular 400 italic (sous-titres profonds) */
.mn-h2-editorial {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-h2);
  line-height: var(--leading-snug);
  color: var(--mn-paper);
}


/* === CITATION === Playfair Regular 400 italic (citations, manifestos) */
.mn-quote {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-quote);
  line-height: 1.4;
  color: var(--mn-paper);
}


/* === H3 === Inter Bold uppercase tracké */
.mn-h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--mn-paper);
}


/* === BODY === Inter Regular */
.mn-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--mn-mist);
}

.mn-body-lg {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--mn-mist);
}

.mn-body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--mn-mist);
}


/* === CTA === Inter SemiBold tracké */
.mn-cta {
  font-family: var(--font-body);
  font-size: var(--fs-cta);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--mn-paper);
}


/* === SIGNATURE MN30 === ES Schwarzweiss (usage rare) */
.mn-signature-mn30 {
  font-family: var(--font-mn30);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mn-paper);
}


/* === ACCENT DÉGRADÉ ARCHES === Sur un mot ou groupe (1 par titre maximum)
       Univers MN30 — usage exclusif sur supports MN30 ou pour souligner
       l'expérience signature dans un contexte mixte (ex. synthèse). */
.mn-text-arch {
  background: var(--mn-arch-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* === ACCENT CUIVRE === Sur un mot ou groupe (1 par titre maximum)
       Univers MONT NOIR — usage exclusif sur supports marque mère ou pour
       souligner la transformation/positionnement dans un contexte mixte.
       Ne JAMAIS combiner avec .mn-text-arch dans la même zone visuelle. */
.mn-text-copper {
  background: var(--mn-copper-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* ============================================================
   COMPOSANTS UI PRÊTS À L'EMPLOI
   ============================================================ */

/* === EYEBROW AVEC LIGNE === Surtitre avec ligne horizontale gauche */
.mn-eyebrow-line {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--mn-fog);
}

.mn-eyebrow-line::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--mn-fog);
}


/* === BOUTON CTA MN30 === Bouton hero conversion */
.mn-button-mn30 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-xl);
  font-family: var(--font-body);
  font-size: var(--fs-cta);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--mn-paper);
  background: var(--mn-black);
  border: 1px solid var(--mn-paper);
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.mn-button-mn30:hover {
  background: var(--mn-arch-gradient);
  border-color: transparent;
  box-shadow: var(--glow-arch-4);
}


/* === BOUTON INSTITUTIONNEL === MONT NOIR plus sobre */
.mn-button-institutional {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-xl);
  font-family: var(--font-body);
  font-size: var(--fs-cta);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--mn-paper);
  background: transparent;
  border: 1px solid var(--mn-mist);
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.mn-button-institutional:hover {
  background: var(--mn-paper);
  color: var(--mn-black);
}


/* === FLÈCHE CTA === Trait + flèche pour bouton ou lien */
.mn-arrow {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
  position: relative;
}

.mn-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}


/* === QUOTE BLOCK === Citation avec bordure dégradé arches */
.mn-quote-block {
  border-left: 2px solid;
  border-image: var(--mn-arch-gradient) 1;
  border-image-slice: 1;
  padding-left: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.mn-quote-block-text {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--fs-quote);
  line-height: 1.4;
  color: var(--mn-paper);
  margin-bottom: var(--space-sm);
}

.mn-quote-block-context {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--mn-fog);
}


/* === DOT PULSÉ === Marqueur "live" en haut-gauche des créas */
.mn-dot-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-widest);
  color: var(--mn-fog);
  text-transform: uppercase;
}

.mn-dot-live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--arch-3);
  box-shadow: 0 0 12px var(--arch-3);
  animation: mn-pulse 2.4s ease-in-out infinite;
}

@keyframes mn-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}


/* === SÉPARATEUR DÉGRADÉ === Ligne fine en dégradé arches */
.mn-divider-arch {
  height: 1px;
  background: var(--mn-arch-gradient);
  border: none;
  margin: var(--space-xl) 0;
}


/* === TEST DE VALIDATION === Encadré avec bordure dégradée */
.mn-validation-box {
  background: var(--mn-graphite);
  border-left: 2px solid;
  border-image: var(--mn-arch-gradient) 1;
  border-image-slice: 1;
  padding: var(--space-lg);
}


/* ============================================================
   USAGE TYPE — EXEMPLE COMPLET
   ============================================================ */

/*

<div class="mn-context">

  <!-- Eyebrow -->
  <span class="mn-eyebrow-line">Coaching Club Premium · La Possession</span>

  <!-- Titre impact MN30 -->
  <h1 class="mn-h1-impact">
    30 MINUTES.<br>
    UN COACH.<br>
    <span class="mn-text-arch">UN PROTOCOLE.</span>
  </h1>

  <!-- Sous-titre éditorial -->
  <p class="mn-quote">
    Pour celles et ceux qui veulent retrouver bien plus qu'une silhouette.
  </p>

  <!-- Body -->
  <p class="mn-body">
    Vous n'avez pas besoin d'une salle. Vous avez besoin d'un accompagnement.
  </p>

  <!-- CTA -->
  <a href="#" class="mn-button-mn30">
    Réserver mon diagnostic
    <span class="mn-arrow"></span>
  </a>

  <!-- Pour pages corporate MONT NOIR (Playfair Black 900) -->
  <h1 class="mn-h1-premium-uppercase">MONT NOIR</h1>
  <h2 class="mn-h2-editorial">Brand System</h2>

</div>

*/


/* ============================================================
   RAPPEL — RÈGLES DE COMPOSITION CRITIQUES
   ============================================================
   1. Noir dominant à 80%+ du visuel.
   2. Une seule accentuation arches par visuel (1 mot maximum).
   3. Maximum 2 polices simultanées.
   4. MONT NOIR toujours en MAJUSCULES.
   5. MN30 jamais sans MONT NOIR (sauf en signature solo après contexte établi).
   6. Vide = premium. Marges généreuses.
   ============================================================ */