/* ============================================================
   base.css — Reset, typographie globale, accessibilité de base
   ============================================================ */

/* --- Polices auto-hébergées (Poppins + Inter, latin / latin-ext) ---
   Source : @fontsource (OFL). Fichiers dans assets/fonts/.
   font-display: swap comme l’ancien chargement Google Fonts. */

/* Repli à métriques ajustées : Arial est recalé sur les mesures d'Inter
   pour que le passage Arial → Inter ne décale pas le texte pendant le
   chargement (CLS visible sur les pages de texte long). */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../assets/fonts/inter-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../assets/fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../assets/fonts/inter-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../assets/fonts/inter-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url('../assets/fonts/poppins-latin-ext-300-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url('../assets/fonts/poppins-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../assets/fonts/poppins-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('../assets/fonts/poppins-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('../assets/fonts/poppins-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('../assets/fonts/poppins-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Reset minimal --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Défilement doux + ancres sous l'en-tête collant */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* sécurité : jamais de défilement horizontal */
  /* Pied de page collé en bas sur les pages courtes (ex. confidentialité) */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* --- Changement de thème : fondu court des couleurs ---
   La classe .theme-anim n'est posée par js/theme.js que le temps de la
   transition : la première peinture (et l'arrivée sur une page) n'est
   donc jamais animée. « prefers-reduced-motion » neutralise le fondu. */
html.theme-anim body,
html.theme-anim body * {
  transition:
    background-color var(--dur-theme) var(--ease-out),
    color var(--dur-theme) var(--ease-out),
    border-color var(--dur-theme) var(--ease-out);
}

/* --- Titres --- */
h1, h2, h3, h4 {
  font-family: var(--font-title);
  line-height: 1.2;
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 600; }
h2 { font-size: var(--fs-h2); font-weight: 500; }
h3 { font-size: 1.125rem; font-weight: 500; }

p { text-wrap: pretty; }

/* --- Liens --- */
a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

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

/* --- Images --- */
img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --- Boutons : on repart d'une base neutre (habillé dans components.css) --- */
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* --- États de focus visibles (accessibilité clavier) --- */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Sur fond nuit, l'anneau de focus passe en bleu ciel pour rester visible */
.hero :focus-visible,
.site-nav :focus-visible,
.configurator__summary :focus-visible,
.contact :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--focus-ring-night);
}

/* --- Utilitaire : contenu réservé aux lecteurs d'écran --- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Lien d'évitement (skip link) --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  color: var(--btn-primary-text);
  background: var(--btn-primary-bg);
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top var(--dur) var(--ease-out);
}

.skip-link:focus {
  top: 0;
  color: var(--btn-primary-text);
}

/* --- Sélection --- */
::selection {
  background: var(--accent-night);
  color: var(--bg-night);
}

/* --- Préférence « mouvement réduit » : tout devient statique --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    /* Pas seulement 0,01 ms : une transition, même ultra-courte, laisse
       encore une image à son état de départ. Sur l'intro forcée, le wrapper
       restait ainsi une image sans son transform (carrés hors des coins). */
    transition: none !important;
  }
}