/* =============================================================================
   Indeso Design System - base
   -----------------------------------------------------------------------------
   Applique les tokens : reset minimal, typographie, regles responsive.
   Ne contient aucun style de composant (ceux-ci vivent a cote du composant)
   et aucune valeur en dur : uniquement des var(--my-*).
   ============================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    font-family: var(--my-font-sans);
    font-size: var(--my-font-size-md);
    font-weight: var(--my-font-weight-regular);
    line-height: var(--my-line-height-normal);
    color: var(--my-text-body);
    background-color: var(--my-surface-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =============================================================================
   Titres
   Echelle applicative, plus resserree que celle du site vitrine : dans un
   ecran de gestion, un titre a 46px repousse le contenu utile sous la ligne
   de flottaison. Le registre display reste disponible via .my-display.

   Rappel : Lato ne propose que 300 / 400 / 700 / 900. Aucun titre n'utilise
   donc de graisse intermediaire.
   ============================================================================= */

h1, h2, h3, h4, h5, h6,
.my-h1, .my-h2, .my-h3, .my-h4, .my-h5, .my-h6 {
    margin: 0;
    font-family: var(--my-font-sans);
    color: var(--my-text-heading);
    font-weight: var(--my-font-weight-bold);
    line-height: var(--my-line-height-tight);
    letter-spacing: var(--my-letter-spacing-tight);
}

h1, .my-h1 { font-size: var(--my-font-size-4xl); }
h2, .my-h2 { font-size: var(--my-font-size-3xl); }
h3, .my-h3 { font-size: var(--my-font-size-2xl); }
h4, .my-h4 { font-size: var(--my-font-size-xl); }

h5, .my-h5 {
    font-size: var(--my-font-size-lg);
    line-height: var(--my-line-height-snug);
    letter-spacing: var(--my-letter-spacing-normal);
}

h6, .my-h6 {
    font-size: var(--my-font-size-md);
    line-height: var(--my-line-height-snug);
    letter-spacing: var(--my-letter-spacing-normal);
}

/* Registre display - pages d'accueil, portails, ecrans de presentation */
.my-display {
    font-size: var(--my-font-size-5xl);
    font-weight: var(--my-font-weight-black);
    line-height: var(--my-line-height-tight);
    letter-spacing: var(--my-letter-spacing-tight);
    color: var(--my-text-heading);
}

/* =============================================================================
   Texte courant
   ============================================================================= */

p {
    margin: 0 0 var(--my-space-md) 0;
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--my-text-link);
    text-decoration: none;
    transition: color var(--my-transition-fast);
}

a:hover {
    text-decoration: underline;
}

small,
.my-caption {
    font-size: var(--my-font-size-xs);
    color: var(--my-text-muted);
}

/* Libelle en capitales - intitules de section, en-tetes de colonne */
.my-label {
    font-size: var(--my-font-size-2xs);
    font-weight: var(--my-font-weight-bold);
    letter-spacing: var(--my-letter-spacing-caps);
    text-transform: uppercase;
    color: var(--my-text-muted);
}

/* Donnees techniques : references, codes, identifiants, montants alignes.
   Chiffres a largeur fixe pour que les colonnes ne tremblent pas. */
.my-mono,
code,
kbd {
    font-family: var(--my-font-mono);
    font-size: 0.95em;
    font-variant-numeric: tabular-nums;
}

/* =============================================================================
   Utilitaires de marque
   ============================================================================= */

.my-gradient {
    background: var(--my-brand-gradient);
    color: var(--my-text-on-brand);
}

.my-surface {
    background: var(--my-surface-card);
    border-radius: var(--my-radius-md);
    box-shadow: var(--my-shadow-sm);
    padding: var(--my-space-md);
}

/* =============================================================================
   Accessibilite
   ============================================================================= */

:focus-visible {
    outline: 2px solid var(--my-border-focus);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* =============================================================================
   Mobile
   -----------------------------------------------------------------------------
   Anticipe le projet LIVIN (saisie des heures de mobilite sur smartphone).
   Deux ajustements, tokenises et non ponctuels :
     - le corps de texte passe a 16px : en dessous, iOS Safari zoome
       automatiquement au focus d'un champ de saisie
     - les controles passent a la hauteur tactile minimale

   La valeur du breakpoint est reecrite en dur car une media query ne peut pas
   consommer une variable CSS. Elle doit rester alignee sur
   --my-breakpoint-sm dans tokens.css.
   ============================================================================= */

@media (max-width: 599px) {
    body {
        font-size: var(--my-font-size-lg);
    }

    :root {
        --my-control-height-md: var(--my-control-height-lg);
    }

    input,
    select,
    textarea,
    button {
        min-height: var(--my-touch-target-min);
        font-size: var(--my-font-size-lg);
    }

    h1, .my-h1 { font-size: var(--my-font-size-3xl); }
    h2, .my-h2 { font-size: var(--my-font-size-2xl); }

    .my-display { font-size: var(--my-font-size-4xl); }
}