/* =========================================================
   HANCOCK MOTORS — Charte graphique v1.0 (30/09/2026)
   Source de vérité : CHARTE-GRAPHIQUE.md
   Ce fichier ne contient que des variables et des classes
   de la charte. Il ne style aucune page à lui seul.
   ========================================================= */

/* ---------- Police : Archivo, auto-hébergée (pas de Google Fonts CDN) ----------
   Adapter le chemin selon l'emplacement du fichier dans le site. */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2-variations"),
       url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Palette ---------- */
  --hm-rouge: #E51A26;          /* Rouge Hancock : logo, aplats, boutons, étiquettes, point rouge */
  --hm-rouge-eclat: #FA2E3A;    /* Rouge des textes et icônes sur fond sombre */
  --hm-rouge-profond: #B7151E;  /* Rouge des textes et icônes sur fond clair */

  --hm-noir: #030404;           /* Noir Hancock */
  --hm-anthracite: #17191B;
  --hm-graphite: #2B2E31;

  --hm-blanc-casse: #F5F5F2;
  --hm-blanc: #FFFFFF;
  --hm-gris-perle: #E3E3DF;

  --hm-gris-argent: #A7AAAD;    /* Texte secondaire sur fond sombre */
  --hm-gris-acier: #5E6164;     /* Texte secondaire sur fond clair */

  /* ---------- Typographie ---------- */
  --hm-police: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --hm-largeur-titre: 125%;     /* Étendue */
  --hm-largeur-texte: 100%;     /* Normale. Jamais en dessous de 100 % (pas de Condensée) */
  --hm-graisse-titre: 800;
  --hm-graisse-intertitre: 600;
  --hm-graisse-texte: 300;
  --hm-graisse-texte-petit: 400; /* textes de moins de 14 px */

  /* ---------- Thème clair (par défaut) ---------- */
  --hm-fond: var(--hm-blanc-casse);
  --hm-surface: var(--hm-blanc);
  --hm-bordure: var(--hm-gris-perle);
  --hm-texte: var(--hm-noir);
  --hm-texte-secondaire: var(--hm-gris-acier);
  --hm-rouge-texte: var(--hm-rouge-profond);
}

/* ---------- Thème sombre : à poser sur une section ou sur <body> ---------- */
.hm-sombre {
  --hm-fond: var(--hm-noir);
  --hm-surface: var(--hm-anthracite);
  --hm-bordure: var(--hm-graphite);
  --hm-texte: var(--hm-blanc-casse);
  --hm-texte-secondaire: var(--hm-gris-argent);
  --hm-rouge-texte: var(--hm-rouge-eclat);
}

/* ---------- Titres (Étendue) et texte (Normale) ---------- */
.hm-titre {
  font-family: var(--hm-police);
  font-stretch: var(--hm-largeur-titre);
  font-weight: var(--hm-graisse-titre);
  line-height: 1.3;
  letter-spacing: 0.025em;
}
.hm-intertitre {
  font-family: var(--hm-police);
  font-stretch: var(--hm-largeur-texte);
  font-weight: var(--hm-graisse-intertitre);
}
.hm-texte {
  font-family: var(--hm-police);
  font-stretch: var(--hm-largeur-texte);
  font-weight: var(--hm-graisse-texte);
  line-height: 1.7;
  letter-spacing: 0.015em;
}

/* ---------- Élément 1 : le point rouge ----------
   Carré incliné à 12°, 20 % de la taille du texte, toujours en Rouge Hancock.
   Usage : <h2 class="hm-titre hm-point">Trouvée en Allemagne</h2> */
.hm-point::after {
  content: "";
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  margin-left: 0.06em;
  background: var(--hm-rouge);
  transform: skewX(-12deg);
}
/* Puce de liste */
.hm-liste { list-style: none; padding-left: 0; }
.hm-liste li { position: relative; padding-left: 1.1em; }
.hm-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.42em;
  height: 0.42em;
  background: var(--hm-rouge);
  transform: skewX(-12deg);
}
/* Séparateur entre deux informations (remplace « · ») */
.hm-sep {
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  margin: 0 0.5em 0.12em;
  background: var(--hm-rouge);
  transform: skewX(-12deg);
}

/* ---------- Élément 2 : l'étiquette biseautée ----------
   Parallélogramme incliné à 12°, texte en Étendue 800.
   Rouge = prix et offres ; noir = statuts ; blanc = mentions. */
.hm-etiquette {
  display: inline-block;
  font-family: var(--hm-police);
  font-stretch: var(--hm-largeur-titre);
  font-weight: var(--hm-graisse-titre);
  line-height: 1;
  padding: 0.35em 1em;
  background: var(--hm-rouge);
  color: var(--hm-blanc);
  clip-path: polygon(0.36em 0, 100% 0, calc(100% - 0.36em) 100%, 0 100%);
  white-space: nowrap;
}
.hm-etiquette--noir  { background: var(--hm-noir);  color: var(--hm-blanc-casse); }
.hm-etiquette--blanc { background: var(--hm-blanc); color: var(--hm-noir); }

/* ---------- Élément 3 : le monogramme H. ----------
   Fichiers image à venir (construits à partir du H du logo). */