/*
 * ================================================
 *  MTZ COUVERTURE — STYLE GUIDE (Source of truth)
 *  Importé par index.html ET mentions-legales.html
 * ================================================
 *
 *  TYPOGRAPHIE
 *  ──────────────────────────────────────────────
 *  --heading-font  : Mona Sans Condensed ExtraBold 800
 *    → H1, H2, H3, grands chiffres, titres décoratifs
 *    → Toujours : text-transform uppercase, font-style normal
 *
 *  --body-font     : Mona Sans Medium 500
 *    → Boutons, navigation, tags, badges, labels,
 *      surtitre de section, infos contact
 *    → Toujours : text-transform uppercase, letter-spacing 0.08–0.1em,
 *      font-style normal
 *
 *  --paragraph-font: Mona Sans Light 400
 *    → Corps de texte long : paragraphes, descriptions,
 *      textes d'avis, réponses FAQ
 *    → Jamais uppercase, line-height 1.7–1.75
 *
 *  COULEURS
 *  ──────────────────────────────────────────────
 *  --dark       : #070708   fond principal
 *  --purple     : #2462a0   bleu principal (CTA, accents)
 *  --dark-purple: #0b2f4e   bleu foncé (hover boutons)
 *  --red-urgence: #b71c1c   rouge urgences
 *  --white      : #ffffff
 *  --text-muted : rgba(255,255,255,0.55)  texte secondaire
 *  --text-subtle: rgba(255,255,255,0.30)  texte tertiaire (copyright, etc.)
 *  --border-light: rgba(255,255,255,0.08) séparateurs fins
 *
 *  RÈGLES GÉNÉRALES
 *  ──────────────────────────────────────────────
 *  - Aucun texte gris (#696969) sur fond noir → toujours blanc ou variantes rgba(255,255,255,x)
 *  - Tous les labels/surtitre : --body-font, uppercase, letter-spacing 0.08em
 *  - Tous les H2 : --heading-font, uppercase géré par le template
 *  - Tous les boutons : --body-font, uppercase, skew(-15deg), padding 18–20px 40–44px
 *  - Hover bouton principal : --dark-purple
 *  - Hover bouton urgence : #8b0000
 *  - Les images de service ont un clip-path parallélogramme côté gauche
 *  - Scroll : JS custom 420ms easeOutQuart (pas CSS scroll-behavior)
 * ================================================
 */

:root {
  --red-urgence: #b71c1c;
  --text-muted: rgba(255, 255, 255, 0.55);
  --text-subtle: rgba(255, 255, 255, 0.30);
  --border-light: rgba(255, 255, 255, 0.08);
}

/* ─── RESET TYPOGRAPHIQUE GLOBAL ────────────────
   Empêche les polices système de s'infiltrer
   ─────────────────────────────────────────────── */

/* Surtitre de section (classe réutilisable) */
.mtz-label {
  font-family: var(--body-font);
  font-size: clamp(11px, 0.9vw, 13px);
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* Corps de texte standard */
.mtz-body {
  font-family: var(--paragraph-font);
  font-size: clamp(14px, 1.2vw, 17px);
  font-style: normal;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.75);
}

/* Bouton standard (à combiner avec skew côté HTML) */
.mtz-btn {
  font-family: var(--body-font);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--purple);
  border: none;
  padding: 18px 40px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s;
}
.mtz-btn:hover { background: var(--dark-purple); }

.mtz-btn--urgence {
  background: var(--red-urgence);
}
.mtz-btn--urgence:hover { background: #8b0000; }