@layer base {
    h1.bordered, h2.bordered, h3.bordered, h4.bordered, h5.bordered, h6.bordered {
        @apply border-b-3 pb-3 font-regular border-primary;
    }
}

@layer components {
    h1 {
        font-size: 55px;
        line-height: 110%;
    }

    h2 {
        font-size: 40px;
    }

    h3 {
        font-size: 32px;
    }

    h6.font-semibold {
        font-weight: 600;
    }

    footer h6 {
        @apply font-title text-light;
        font-weight: 500;
        font-size: 18px;
    }

    /* ===== Variantes Tailwind text-* pour h1..h6 ===== */
    h1.text-xs, h2.text-xs, h3.text-xs, h4.text-xs, h5.text-xs, h6.text-xs {
        font-size: 0.75rem;  /* 12px */
        line-height: 1rem;   /* 16px */
    }
    h1.text-sm, h2.text-sm, h3.text-sm, h4.text-sm, h5.text-sm, h6.text-sm {
        font-size: 0.875rem; /* 14px */
        line-height: 1.25rem;/* 20px */
    }
    h1.text-base, h2.text-base, h3.text-base, h4.text-base, h5.text-base, h6.text-base {
        font-size: 1rem;     /* 16px */
        line-height: 1.5rem; /* 24px */
    }
    h1.text-lg, h2.text-lg, h3.text-lg, h4.text-lg, h5.text-lg, h6.text-lg {
        font-size: 1.125rem; /* 18px */
        line-height: 1.75rem;/* 28px */
    }
    h1.text-xl, h2.text-xl, h3.text-xl, h4.text-xl, h5.text-xl, h6.text-xl {
        font-size: 1.25rem;  /* 20px */
        line-height: 1.75rem;/* 28px */
    }
    h1.text-2xl, h2.text-2xl, h3.text-2xl, h4.text-2xl, h5.text-2xl, h6.text-2xl {
        font-size: 1.5rem;   /* 24px */
        line-height: 2rem;   /* 32px */
    }
    h1.text-3xl, h2.text-3xl, h3.text-3xl, h4.text-3xl, h5.text-3xl, h6.text-3xl {
        font-size: 1.875rem; /* 30px */
        line-height: 2.25rem;/* 36px */
    }
    h1.text-4xl, h2.text-4xl, h3.text-4xl, h4.text-4xl, h5.text-4xl, h6.text-4xl {
        font-size: 2.25rem;  /* 36px */
        line-height: 2.5rem; /* 40px */
    }
    h1.text-5xl, h2.text-5xl, h3.text-5xl, h4.text-5xl, h5.text-5xl, h6.text-5xl {
        font-size: 3rem;     /* 48px */
        line-height: 1;
    }
    h1.text-6xl, h2.text-6xl, h3.text-6xl, h4.text-6xl, h5.text-6xl, h6.text-6xl {
        font-size: 3.75rem;  /* 60px */
        line-height: 1;
    }

    /* ===== Breakpoints responsives pour h1..h6 (mobile-first override + sm/md/lg/xl) ===== */

    /* Mobile (petits écrans) : < 640px */
    @media (max-width: 639px) {
        h1 { font-size: 2rem;    /* 32px */ line-height: 1.1; }
        h2 { font-size: 1.5rem;  /* 24px */ line-height: 1.15; }
        h3 { font-size: 1.25rem; /* 20px */ line-height: 1.2; }
        h4 { font-size: 1.125rem;/* 18px */ line-height: 1.25; }
        h5 { font-size: 1rem;    /* 16px */ line-height: 1.25; }
        h6 { font-size: 0.875rem;/* 14px */ line-height: 1.25; }
    }

    /* sm : ≥ 640px */
    @media (min-width: 640px) {
        h1 { font-size: 2.5rem;    /* 40px */ line-height: 1.08; }
        h2 { font-size: 1.875rem;  /* 30px */ line-height: 1.12; }
        h3 { font-size: 1.5rem;    /* 24px */ line-height: 1.15; }
        h4 { font-size: 1.25rem;   /* 20px */ line-height: 1.2; }
        h5 { font-size: 1.125rem;  /* 18px */ line-height: 1.2; }
        h6 { font-size: 1rem;      /* 16px */ line-height: 1.25; }
    }

    /* md : ≥ 768px */
    @media (min-width: 768px) {
        h1 { font-size: 3rem;      /* 48px */ line-height: 1.06; }
        h2 { font-size: 2.25rem;   /* 36px */ line-height: 1.1; }
        h3 { font-size: 1.875rem;  /* 30px */ line-height: 1.12; }
        h4 { font-size: 1.5rem;    /* 24px */ line-height: 1.2; }
        h5 { font-size: 1.25rem;   /* 20px */ line-height: 1.25; }
        h6 { font-size: 1.125rem;  /* 18px */ line-height: 1.25; }
    }

    /* lg : ≥ 1024px */
    @media (min-width: 1024px) {
        h1 { font-size: 3.4375rem; /* 55px */ line-height: 1.02; } /* conserve la valeur desktop actuelle */
        h2 { font-size: 2.5rem;    /* 40px */ line-height: 1.08; }
        h3 { font-size: 2rem;      /* 32px */ line-height: 1.1; }
        h4 { font-size: 1.5rem;    /* 24px */ line-height: 1.2; }
        h5 { font-size: 1.125rem;  /* 18px */ line-height: 1.25; }
        h6 { font-size: 1rem;      /* 16px */ line-height: 1.25; }
    }

    /* xl : ≥ 1280px */
    @media (min-width: 1280px) {
        h1 { font-size: 55px;      /* 64px */ line-height: 1.1; }
        h2 { font-size: 45px;      /* 48px */ line-height: 1.02; }
        h3 { font-size: 33px;   /* 36px */ line-height: 1.06; }
        h4 { font-size: 25px;   /* 28px */ line-height: 1.1; }
        h5 { font-size: 20px;   /* 20px */ line-height: 1.2; }
        h6 { font-size: 16px;  /* 18px */ line-height: 1.25; }
    }

}