/* ==========================================================================
   BASE.CSS
   - "Reset" + styles de base
   - Objectif : partir sur une base propre et cohérente sur toutes les pages
   - IMPORTANT : on reste minimaliste (le design est géré par theme/layout/reference)
   ========================================================================== */


/* ===========================
   Reset global
   =========================== */

/*
  On fixe box-sizing au niveau html, puis on hérite partout.
  Avantage : le calcul des tailles (width/height) devient plus prévisible.
*/
html {
    box-sizing: border-box;
}

/*
  Reset des marges/padding par défaut + box-sizing hérité.
  - margin/padding à 0 : évite les "surprises" navigateur
  - box-sizing : border-box : évite que le padding fasse "déborder" les blocs
*/
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}


/* ===========================
   Body (base de la typographie)
   =========================== */

/*
  Base globale :
  - font-family : définie via variable CSS (--font-primary) dans theme.css
  - color       : texte principal (variable)
  - background  : fond global du site
  - line-height : confort de lecture (ne change pas le design, juste plus lisible)
*/
body {
    font-family: var(--font-primary);
    color: var(--text-color-dark);
    background-color: #d6dee7;
    line-height: 1.5;
}


/* ===========================
   Liens / éléments courants
   =========================== */

/*
  Bouton "contact" :
  - on garde ton intention : pas de soulignement
  - le style visuel est géré ailleurs (theme/layout/reference)
*/
.contact-button {
    text-decoration: none;
}


/* ===========================
   Sécurité responsive (sans changer le design)
   =========================== */

/*
  Les images peuvent sinon déborder d'un conteneur sur mobile.
  - max-width:100% : empêche le débordement
  - height:auto    : conserve les proportions
*/
img {
    max-width: 100%;
    height: auto;
}


/* ===========================
   Confort lecture mobile uniquement
   =========================== */

/*
  Sur petit écran :
  - on limite la largeur de lecture des paragraphes
  - 75ch = environ 75 caractères par ligne (zone de confort)
*/
@media (max-width: 600px) {
    p {
        max-width: 75ch;
    }
}