/* =========================================================
   TRUCKSYNE - TYPOGRAPHIE GLOBALE
   PC / 2K / 4K / TABLETTE / MOBILE

   Objectif :
   - tailles normales
   - aucun micro-texte
   - aucune taille géante sur 4K
   - formulaires lisibles
   - responsive cohérent
   ========================================================= */

:root {
    --ts-font-body: 14px;
    --ts-font-body-mobile: 14px;

    --ts-font-xs: 11.5px;
    --ts-font-sm: 12.5px;
    --ts-font-md: 14px;
    --ts-font-lg: 16px;

    --ts-font-h1: clamp(24px, 1.5vw, 30px);
    --ts-font-h2: clamp(18px, 1.15vw, 22px);
    --ts-font-h3: clamp(15px, .95vw, 18px);

    --ts-line-height: 1.5;
}


/* =========================================================
   BASE
   ========================================================= */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-size: var(--ts-font-body);
    line-height: var(--ts-line-height);
}


/* =========================================================
   TITRES
   ========================================================= */

h1 {
    font-size: var(--ts-font-h1);
    line-height: 1.2;
}

h2 {
    font-size: var(--ts-font-h2);
    line-height: 1.25;
}

h3 {
    font-size: var(--ts-font-h3);
    line-height: 1.3;
}


/* =========================================================
   TEXTE STANDARD
   ========================================================= */

p,
li,
td,
input,
textarea,
select,
button {
    line-height: 1.5;
}


/*
 * On empêche les interfaces TruckSyne de descendre
 * dans des tailles minuscules.
 */

.ts-content p,
.ts-content span,
.ts-content a,
.ts-content button,
.ts-content input,
.ts-content select,
.ts-content textarea,

.ts-admin-content p,
.ts-admin-content span,
.ts-admin-content a,
.ts-admin-content button,
.ts-admin-content input,
.ts-admin-content select,
.ts-admin-content textarea {
    text-rendering: optimizeLegibility;
}


/* =========================================================
   FORMULAIRES
   ========================================================= */

input,
select,
textarea {
    font-size: 13px;
}

button,
.btn,
[class*="-button"],
[class*="-btn"] {
    font-size: 13px;
}


/* Libellés de formulaire */

label,
label > span {
    font-size: 12.5px;
}


/* =========================================================
   SIDEBARS / NAVIGATION
   ========================================================= */

.ts-sidebar a,
.ts-sidebar button,
.ts-sidebar span,
.admin-sidebar a,
.admin-sidebar button {
    font-size: 13px;
}


/* Noms de catégories */

.ts-sidebar-section-title,
.ts-sidebar-title,
.admin-sidebar-section-title,
.sidebar-label {
    font-size: 10.5px;
    letter-spacing: .08em;
}


/* =========================================================
   TABLEAUX
   ========================================================= */

table td {
    font-size: 12.5px;
}

table th {
    font-size: 11px;
}


/* =========================================================
   CARDS / CONTAINERS
   ========================================================= */

[class*="-card"] p,
[class*="-container"] p,
[class*="-panel"] p {
    font-size: 12.5px;
}

[class*="-card"] h3,
[class*="-container"] h3,
[class*="-panel"] h3 {
    font-size: 15px;
}


/* =========================================================
   SMALL / META
   ========================================================= */

small,
[class*="-meta"],
[class*="-hint"],
[class*="-subtitle"],
[class*="-date"] {
    font-size: max(11.5px, .72rem);
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 1024px) {

    :root {
        --ts-font-body: 14px;

        --ts-font-h1: clamp(23px, 3vw, 28px);
        --ts-font-h2: clamp(18px, 2.5vw, 21px);
        --ts-font-h3: 16px;
    }

    input,
    select,
    textarea,
    button {
        font-size: 13.5px;
    }

    .ts-sidebar a,
    .ts-sidebar button {
        font-size: 13.5px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    :root {
        --ts-font-body: 14px;

        --ts-font-h1: 23px;
        --ts-font-h2: 19px;
        --ts-font-h3: 16px;
    }

    body {
        font-size: 14px;
    }

    /*
     * 16 px sur les champs évite également le zoom
     * automatique sur certains navigateurs mobiles.
     */

    input,
    select,
    textarea {
        font-size: 16px;
    }

    button,
    .btn,
    [class*="-button"],
    [class*="-btn"] {
        font-size: 13px;
    }

    table td {
        font-size: 13px;
    }

    table th {
        font-size: 11.5px;
    }

    .ts-sidebar a,
    .ts-sidebar button,
    .ts-sidebar span {
        font-size: 13.5px;
    }

    small,
    [class*="-meta"],
    [class*="-hint"] {
        font-size: 11.5px;
    }
}


/* =========================================================
   PETITS MOBILES
   320 / 360 / 375 / 390 / 430 px
   ========================================================= */

@media (max-width: 480px) {

    :root {
        --ts-font-h1: 22px;
        --ts-font-h2: 18px;
        --ts-font-h3: 15px;
    }

    body {
        font-size: 14px;
    }

    button,
    .btn,
    [class*="-button"],
    [class*="-btn"] {
        min-height: 42px;
    }
}


/* =========================================================
   ÉCRANS 2K / 4K
   On évite que tout devienne énorme.
   ========================================================= */

@media (min-width: 1800px) {

    :root {
        --ts-font-body: 14px;

        --ts-font-h1: 29px;
        --ts-font-h2: 21px;
        --ts-font-h3: 16px;
    }
}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

button,
a,
input,
select,
textarea {
    font-family: inherit;
}

textarea {
    line-height: 1.6;
}