/* =========================================================
   THÈME CLIENT — Atelier 27 Carrosserie (Gigean)
   Seul fichier CSS « charte » : polices, couleurs, arrondis.
   Charte du site carrosserie-atelier27.fr : Syne (titres, logo) + Montserrat (texte),
   noir #040404 / blanc / gris #535353 / gris clair #ebebeb, boutons carrés, cartes à bordure épaisse.
   Tricolore (col des Meilleurs Ouvriers de France) : réservé aux éléments MOF, jamais aux boutons.
   ========================================================= */

/* Polices auto-hébergées (fichiers variables latin : un seul fichier par famille) */
@font-face { font-family: "Syne"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/syne-var.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/montserrat-var.woff2") format("woff2"); }
/* Archivo (logo Atelier 27) : sous-ensemble majuscules + chiffres, axes largeur 62-125 % et graisse 400-900 */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; src: url("../fonts/archivo-logo.woff2") format("woff2"); }
/* Polices de repli calibrées : limite le décalage de mise en page (CLS) pendant le chargement */
@font-face { font-family: "Syne Fallback"; src: local("Arial Black"), local("Arial"); size-adjust: 104%; ascent-override: 90%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "Montserrat Fallback"; src: local("Arial"); size-adjust: 113%; ascent-override: 85%; descent-override: 22%; line-gap-override: 0%; }

:root {
  --font: "Montserrat", "Montserrat Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Syne", "Syne Fallback", "Arial Black", sans-serif;
  --font-logo: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --ink: #040404;            /* noir du site */
  --brand: #040404;          /* titres, liens, champs actifs */
  --brand-dark: #000000;
  --brand-soft: #ebebeb;     /* gris clair du site */
  --brand-soft-2: #dcdcdc;
  --accent: #040404;         /* boutons : noirs et carrés, comme le site */
  --accent-hover: #2b2b2b;
  --accent-light: #0055a4;   /* contour de focus : bleu du drapeau (bien visible sur noir et blanc) */

  /* Tricolore MOF */
  --bleu: #0055a4;
  --blanc: #ffffff;
  --rouge: #ef4135;
  --tricolore: linear-gradient(90deg, var(--bleu) 0 33.4%, var(--blanc) 33.4% 66.6%, var(--rouge) 66.6% 100%);

  --text: #262626;
  --muted: #535353;          /* gris texte du site (contraste 7,4:1 sur blanc) */
  --bg: #ffffff;
  --bg-alt: #f4f4f4;
  --line: #d6d6d6;
  --error: #c0392b;

  --radius: 0px;             /* le site n'utilise aucun arrondi */
  --radius-btn: 0px;
  --radius-field: 0px;       /* champs, messages, FAQ (lp.css) */
  --radius-pill: 0px;        /* choix en pilules du formulaire */
  --border: 3px solid var(--ink);
}