courcellematthi/assets/css/base.css

/* ==========================================================================
   base.css — Reset moderne et styles des éléments HTML natifs
   --------------------------------------------------------------------------
   Uniquement des sélecteurs d'éléments, aucune classe. Objectif : un HTML
   sémantique écrit sans classe doit déjà être présentable et accessible.
   ========================================================================== */

@layer base {

  /* ======================================================================
     RESET
     Reset ciblé plutôt que « * { margin:0; padding:0 } » aveugle : on
     neutralise ce qui gêne, on garde ce qui est utile (styles de listes,
     comportements natifs des formulaires).
     ====================================================================== */

  *,
  *::before,
  *::after {
    box-sizing: border-box; /* La largeur inclut padding et bordure */
  }

  /* Suppression des marges par défaut : elles varient d'un navigateur à
     l'autre et provoquent des fusions de marges imprévisibles. Les
     espacements sont pilotés explicitement par les composants. */
  body, h1, h2, h3, h4, h5, h6,
  p, figure, blockquote, dl, dd {
    margin-block: 0;
  }

  html {
    /* Empêche iOS d'agrandir le texte en paysage sans demande explicite */
    -webkit-text-size-adjust: 100%;

    /* Défilement fluide pour les ancres — neutralisé plus bas si
       l'utilisateur a demandé la réduction des animations */
    scroll-behavior: smooth;

    /* Décale la cible des ancres pour qu'elle ne passe pas sous
       l'en-tête collant. Indispensable dès qu'un header est sticky. */
    scroll-padding-block-start: calc(var(--header-height) + var(--space-md));
  }

  body {
    min-block-size: 100svh; /* svh : hauteur stable malgré la barre d'URL mobile */
    background-color: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);

    /* Lissage : rend Inter plus fidèle sur écrans macOS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Ligatures et crénage activés pour le texte courant */
    text-rendering: optimizeLegibility;
    font-kerning: normal;
  }

  /* ======================================================================
     MÉDIAS
     ====================================================================== */

  img, picture, svg, video, canvas {
    display: block;          /* Supprime l'espace fantôme sous les images
                                (dû à l'alignement sur la ligne de base) */
    max-inline-size: 100%;   /* Jamais de débordement horizontal */
    block-size: auto;        /* Préserve le rapport d'aspect */
  }

  /* ======================================================================
     TYPOGRAPHIE
     ====================================================================== */

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-mono);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em; /* Compense l'aération naturelle du monospace
                                aux grandes tailles */
    text-wrap: balance;      /* Répartit les mots sur des lignes de longueur
                                comparable — évite le mot orphelin */
  }

  p, li, dd, figcaption {
    text-wrap: pretty;       /* Évite les orphelins en fin de paragraphe */
  }

  /* Les listes porteuses de role="list" sont des listes sémantiques dont on
     ne veut pas la puce native. Le rôle explicite est nécessaire : Safari
     retire la sémantique de liste quand list-style vaut none. */
  ul[role="list"],
  ol[role="list"] {
    list-style: none;
    padding-inline-start: 0;
  }

  /* Texte mis en avant */
  strong, b { font-weight: var(--weight-semibold); }

  /* Abréviations : curseur d'aide + soulignement pointillé */
  abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
  }

  /* ======================================================================
     LIENS
     ====================================================================== */

  a {
    color: var(--color-accent-dark);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em; /* Le soulignement ne coupe pas les jambages */
    transition: color var(--transition-fast);
  }

  a:hover { color: var(--color-accent); }

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

  /* :focus-visible plutôt que :focus — l'anneau apparaît à la navigation
     clavier mais pas au clic souris. Ne jamais faire « outline: none »
     sans remplacement visible : c'est la faute d'accessibilité la plus
     répandue sur le web. */
  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  /* Marge lors du saut vers une ancre (complément de scroll-padding) */
  :target {
    scroll-margin-block-start: calc(var(--header-height) + var(--space-md));
  }

  /* ======================================================================
     FORMULAIRES ET BOUTONS
     ====================================================================== */

  button, input, select, textarea {
    font: inherit;   /* Les navigateurs n'héritent pas la police par défaut */
    color: inherit;
  }

  button {
    background: none;
    border: none;
    cursor: pointer;
  }

  /* ======================================================================
     PRÉFÉRENCES SYSTÈME
     Respecter les réglages d'accessibilité de l'utilisateur n'est pas
     optionnel : les animations peuvent déclencher nausées et migraines
     chez les personnes sensibles aux troubles vestibulaires.
     ====================================================================== */

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* Mode contraste élevé (Windows, préférence système) */
  @media (prefers-contrast: more) {
    :root {
      --color-ink-faint: #4c5a56;
      --color-line: #9aa5a2;
      --color-line-strong: #6b7674;
    }
  }
}