/* ============================================================
   ML Design System — Base
   Rôle :
   - reset léger
   - typographie globale
   - comportement des titres
   - éléments de base (p, a, ul, etc.)

   Les classes ml-* utilisent !important pour garantir la priorité
   face aux sélecteurs générés par Divi 5.
   ============================================================ */

/* =========================
   Reset léger
   ========================= */

   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }
   
   html {
     font-size: 100%;
   }
   
   body {
     margin: 0;
     font-family: var(--ml-font-body);
     font-size: var(--ml-fs-body);
     line-height: var(--ml-lh-body);
     color: var(--ml-color-text);
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
   }
   
   
   
   /* =========================
      Images / médias
      ========================= */
   
   img,
   picture,
   video,
   canvas {
     max-width: 100%;
     display: block;
   }
   
   /* =========================
      Liens
      ========================= */
   
   a {
     color: inherit;
     text-decoration: none;
     transition: color var(--ml-transition-fast);
   }
   
   a:hover {
     text-decoration: none;
   }
   
   /* =========================
      Paragraphes
      ========================= */
   
   p {
     margin: 0;
   }
   
   /* =========================
      Listes
      ========================= */
   
   ul,
   ol {
     margin: 0;
     padding-left: 1.2em;
     line-height: var(--ml-lh-list);
   }
   
   li + li {
     margin-top: var(--ml-space-3);
   }
   
   /* =========================
      Titres — reset
      ========================= */
   
   h1, h2, h3, h4, h5, h6 {
     margin: 0;
     font-weight: var(--ml-fw-extrabold);
   }
   
   /* =========================
      Titres — classes d'override Divi
      ========================= */
   
   .ml-h1,
   .ml-h1 h1 {
     font-family: var(--ml-font-display) !important;
     font-size: var(--ml-fs-h1) !important;
     line-height: var(--ml-lh-tight) !important;
     font-weight: var(--ml-fw-regular) !important;
   }
   
   .ml-h2,
   .ml-h2 h2 {
     font-family: var(--ml-font-display) !important;
     font-size: var(--ml-fs-h2) !important;
     line-height: var(--ml-lh-heading) !important;
     font-weight: var(--ml-fw-regular) !important;
   }
   
   .ml-h3,
   .ml-h3 h3 {
     font-family: var(--ml-font-body) !important;
     font-size: var(--ml-fs-h3) !important;
     font-weight: var(--ml-fw-extrabold) !important;
     line-height: var(--ml-lh-subheading) !important;
   }
   
   .ml-h4,
   .ml-h4 h4 {
     font-family: var(--ml-font-body) !important;
     font-size: var(--ml-fs-h4) !important;
     font-weight: var(--ml-fw-bold) !important;
   }
   
   /* =========================
      Variantes de taille de titre
      Logique : --sm = taille du niveau inférieur, --lg = taille du niveau supérieur
      Font-family et font-weight identiques à la classe de base.
      Seuls font-size et line-height changent.
      ========================= */
   
   /* H1 variants */
   .ml-h1--sm {
     font-family: var(--ml-font-display) !important;
     font-size: var(--ml-fs-h2) !important;
     line-height: var(--ml-lh-heading) !important;
     font-weight: var(--ml-fw-regular) !important;
   }
   .ml-h1--lg {
     font-family: var(--ml-font-display) !important;
     font-size: var(--ml-fs-hero) !important;
     line-height: var(--ml-lh-tight) !important;
     font-weight: var(--ml-fw-regular) !important;
   }
   
   /* H2 variants */
   .ml-h2--sm {
     font-family: var(--ml-font-display) !important;
     font-size: var(--ml-fs-h3) !important;
     line-height: var(--ml-lh-subheading) !important;
     font-weight: var(--ml-fw-regular) !important;
   }
   .ml-h2--lg {
     font-family: var(--ml-font-display) !important;
     font-size: var(--ml-fs-h1) !important;
     line-height: var(--ml-lh-tight) !important;
     font-weight: var(--ml-fw-regular) !important;
   }
   
   /* H3 variants */
   .ml-h3--sm {
     font-family: var(--ml-font-body) !important;
     font-size: var(--ml-fs-h4) !important;
     font-weight: var(--ml-fw-extrabold) !important;
     line-height: var(--ml-lh-subheading) !important;
   }
   .ml-h3--lg {
     font-family: var(--ml-font-body) !important;
     font-size: var(--ml-fs-h2) !important;
     font-weight: var(--ml-fw-extrabold) !important;
     line-height: var(--ml-lh-heading) !important;
   }
   
   /* H4 variants */
   .ml-h4--sm {
     font-family: var(--ml-font-body) !important;
     font-size: var(--ml-fs-body-lg) !important;
     font-weight: var(--ml-fw-bold) !important;
     line-height: var(--ml-lh-body) !important;
   }
   .ml-h4--lg {
     font-family: var(--ml-font-body) !important;
     font-size: var(--ml-fs-h3) !important;
     font-weight: var(--ml-fw-bold) !important;
     line-height: var(--ml-lh-subheading) !important;
   }
   
   /* =========================
      Hero title
      ========================= */
   
   .ml-hero-title {
     font-family: var(--ml-font-display) !important;
     font-size: var(--ml-fs-hero) !important;
     line-height: var(--ml-lh-tight) !important;
     font-weight: var(--ml-fw-regular) !important;
   }
   
   .ml-hero-subtitle {
     font-family: var(--ml-font-body) !important;
     font-size: var(--ml-fs-body-lg) !important;
     line-height: var(--ml-lh-body) !important;
     font-weight: var(--ml-fw-medium) !important;
   }
   
   /* =========================
      Texte
      ========================= */
   
   .ml-body-lg {
     font-size: var(--ml-fs-body-lg) !important;
     line-height: var(--ml-lh-body) !important;
     font-family: var(--ml-font-body) !important;
   }
   
   .ml-small {
     font-size: var(--ml-fs-small) !important;
   }
   
   .ml-xs {
     font-size: var(--ml-fs-xs) !important;
   }
   
   /* =========================
      Kicker / label
      ========================= */
   
   .ml-kicker {
     font-size: var(--ml-fs-xs) !important;
     font-weight: var(--ml-fw-bold) !important;
     letter-spacing: 0.08em !important;
   }
   
   /* =========================
      Override Divi 5 — éléments internes
      Divi cible ses éléments avec des sélecteurs composés
      (.et_pb_text .et_pb_text_inner p, etc.)
      Ce bloc force les styles du design system sur tous les
      éléments typographiques dans le contexte Divi.
      ========================= */
   
   /* Variantes de titres sur wrappers Divi
      Les classes peuvent etre posees sur le module parent.
      On cible donc explicitement le titre interne pour depasser
      les overrides typographiques Divi existants. */
   .et_pb_module.ml-h1--sm h1,
   .et_pb_text.ml-h1--sm .et_pb_text_inner h1 {
     font-family: var(--ml-font-display) !important;
     font-size: var(--ml-fs-h2) !important;
     line-height: var(--ml-lh-heading) !important;
     font-weight: var(--ml-fw-regular) !important;
   }
   
   .et_pb_module.ml-h1--lg h1,
   .et_pb_text.ml-h1--lg .et_pb_text_inner h1 {
     font-family: var(--ml-font-display) !important;
     font-size: var(--ml-fs-hero) !important;
     line-height: var(--ml-lh-tight) !important;
     font-weight: var(--ml-fw-regular) !important;
   }
   
   .et_pb_module.ml-h2--sm h2,
   .et_pb_text.ml-h2--sm .et_pb_text_inner h2 {
     font-family: var(--ml-font-display) !important;
     font-size: var(--ml-fs-h3) !important;
     line-height: var(--ml-lh-subheading) !important;
     font-weight: var(--ml-fw-regular) !important;
   }
   
   .et_pb_module.ml-h2--lg h2,
   .et_pb_text.ml-h2--lg .et_pb_text_inner h2 {
     font-family: var(--ml-font-display) !important;
     font-size: var(--ml-fs-h1) !important;
     line-height: var(--ml-lh-tight) !important;
     font-weight: var(--ml-fw-regular) !important;
   }
   
   .et_pb_module.ml-h3--sm h3,
   .et_pb_text.ml-h3--sm .et_pb_text_inner h3 {
     font-family: var(--ml-font-body) !important;
     font-size: var(--ml-fs-h4) !important;
     font-weight: var(--ml-fw-extrabold) !important;
     line-height: var(--ml-lh-subheading) !important;
   }
   
   .et_pb_module.ml-h3--lg h3,
   .et_pb_text.ml-h3--lg .et_pb_text_inner h3 {
     font-family: var(--ml-font-body) !important;
     font-size: var(--ml-fs-h2) !important;
     font-weight: var(--ml-fw-extrabold) !important;
     line-height: var(--ml-lh-heading) !important;
   }
   
   .et_pb_module.ml-h4--sm h4,
   .et_pb_text.ml-h4--sm .et_pb_text_inner h4 {
     font-family: var(--ml-font-body) !important;
     font-size: var(--ml-fs-body-lg) !important;
     font-weight: var(--ml-fw-bold) !important;
     line-height: var(--ml-lh-body) !important;
   }
   
   .et_pb_module.ml-h4--lg h4,
   .et_pb_text.ml-h4--lg .et_pb_text_inner h4 {
     font-family: var(--ml-font-body) !important;
     font-size: var(--ml-fs-h3) !important;
     font-weight: var(--ml-fw-bold) !important;
     line-height: var(--ml-lh-subheading) !important;
   }
   
   .et_pb_module a {
     color: inherit !important;
     text-decoration: none !important;
   }
   
   .et_pb_module ul,
   .et_pb_module ol {
     font-family: var(--ml-font-body) !important;
     font-size: var(--ml-fs-body) !important;
     line-height: var(--ml-lh-list) !important;
     padding-left: 1.2em !important;
   }
   
   .et_pb_module li {
     font-family: var(--ml-font-body) !important;
     font-size: var(--ml-fs-body) !important;
   }
   
   .et_pb_module blockquote {
     font-family: var(--ml-font-body) !important;
     font-size: var(--ml-fs-body-lg) !important;
     line-height: var(--ml-lh-body) !important;
   }
   
   /* =========================
      Accessibilité
      ========================= */
   
   :focus-visible {
     outline: 2px solid var(--ml-color-navy);
     outline-offset: 2px;
   }
   
   /* =========================
      Motion reduced
      ========================= */
   
   @media (prefers-reduced-motion: reduce) {
     * {
       transition: none !important;
     }
   }