/* ============================================================
   CFM — Chevalley Facility Management
   Jetons de design (design tokens) · v1 · 22.10.2026
   Source de vérité pour le site web. À charger avant tout autre CSS.
   ============================================================ */

/* ---------- 1. Polices (auto-hébergées, latin) ---------- */
/* Playfair Display : titres, sigle. Inter : texte, interface, lettres Q·E·S·H. */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/playfair-display-latin-700-normal.woff2") format("woff2"), url("fonts/playfair-display-latin-700-normal.woff") format("woff"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("fonts/playfair-display-latin-900-normal.woff2") format("woff2"), url("fonts/playfair-display-latin-900-normal.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/inter-latin-400-normal.woff2") format("woff2"), url("fonts/inter-latin-400-normal.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/inter-latin-500-normal.woff2") format("woff2"), url("fonts/inter-latin-500-normal.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/inter-latin-600-normal.woff2") format("woff2"), url("fonts/inter-latin-600-normal.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/inter-latin-700-normal.woff2") format("woff2"), url("fonts/inter-latin-700-normal.woff") format("woff"); }

/* Alternative sans auto-hébergement (une seule ligne, dans <head>) :
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Inter:wght@400;500;600;700&display=swap"> */

:root {
  /* ---------- 2. Couleurs ---------- */
  --cfm-bleu-nuit:   #0F1F3D;   /* principal : textes, en-tête, pied de page, fûts du logo */
  --cfm-ivoire:      #F7F5F0;   /* fond de page */
  --cfm-blanc:       #FFFFFF;   /* cartes, surfaces */
  --cfm-gris-pierre: #6B6F76;   /* textes secondaires, légendes */
  --cfm-gris-pale:   #E4E0D6;   /* filets, bordures de cartes */
  --cfm-sable:       #DED9CC;   /* séparateurs discrets, grilles */
  --cfm-or:          #B8975A;   /* accent : filets, soulignés, icônes, anneau du logo — jamais en aplat large */
  --cfm-or-clair:    #C9B082;   /* facette claire des pointes (écran uniquement) */
  --cfm-or-fonce:    #907646;   /* facette foncée des pointes (écran uniquement) */
  --cfm-vert:        #2F7A5B;   /* état conforme / succès */
  --cfm-bordeaux:    #7A1F2B;   /* alerte, non-conformité, erreur de formulaire */

  /* Rôles sémantiques */
  --cfm-bg:            var(--cfm-ivoire);
  --cfm-surface:       var(--cfm-blanc);
  --cfm-text:          var(--cfm-bleu-nuit);
  --cfm-text-muted:    var(--cfm-gris-pierre);
  --cfm-border:        var(--cfm-gris-pale);
  --cfm-accent:        var(--cfm-or);
  --cfm-inverse-bg:    var(--cfm-bleu-nuit);
  --cfm-inverse-text:  var(--cfm-ivoire);
  --cfm-inverse-muted: #C9C3B5;

  /* ---------- 3. Typographie ---------- */
  --cfm-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --cfm-font-text:    "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --cfm-h1: clamp(2.5rem, 1.6rem + 3vw, 4rem);      /* 40 → 64 px · Playfair 900 · lh 1.05 · ls -0.01em */
  --cfm-h2: clamp(1.75rem, 1.3rem + 1.5vw, 2.25rem);/* 28 → 36 px · Playfair 700 · lh 1.15 */
  --cfm-h3: 1.5rem;                                 /* 24 px · Playfair 700 · lh 1.25 */
  --cfm-lead: 1.25rem;                              /* 20 px · Inter 400 · lh 1.5 */
  --cfm-body: 1.0625rem;                            /* 17 px · Inter 400 · lh 1.65 (16 px sous 768 px) */
  --cfm-small: 0.875rem;                            /* 14 px · Inter 400/500 · lh 1.5 */
  --cfm-label: 0.75rem;                             /* 12 px · Inter 600 · capitales · ls 0.18em */
  --cfm-overline: 0.6875rem;                        /* 11 px · Inter 600 · capitales · ls 0.3em */

  /* ---------- 4. Espacements (base 8) ---------- */
  --cfm-s1: 0.5rem; --cfm-s2: 1rem; --cfm-s3: 1.5rem; --cfm-s4: 2rem; --cfm-s6: 3rem; --cfm-s8: 4rem; --cfm-s12: 6rem;
  --cfm-container: 1200px;
  --cfm-gutter: clamp(1rem, 4vw, 3rem);
  --cfm-section: clamp(4rem, 8vw, 6rem);

  /* ---------- 5. Formes ---------- */
  --cfm-radius: 0;            /* angles droits partout : registre institutionnel */
  --cfm-rule: 1px;            /* filets */
  --cfm-rule-strong: 2px;     /* filet de titre */
  --cfm-shadow: none;         /* pas d'ombres portées ; la hiérarchie vient des filets et des fonds */
}

/* ---------- 6. Base ---------- */
html { background: var(--cfm-bg); color: var(--cfm-text); font-family: var(--cfm-font-text); font-size: 100%; -webkit-font-smoothing: antialiased; }
body { margin: 0; font-size: var(--cfm-body); line-height: 1.65; }
@media (max-width: 768px) { body { font-size: 1rem; } }

h1, h2, h3 { font-family: var(--cfm-font-display); color: var(--cfm-text); margin: 0 0 var(--cfm-s3); }
h1 { font-size: var(--cfm-h1); font-weight: 900; line-height: 1.05; letter-spacing: -0.01em; }
h2 { font-size: var(--cfm-h2); font-weight: 700; line-height: 1.15; }
h3 { font-size: var(--cfm-h3); font-weight: 700; line-height: 1.25; }
p { margin: 0 0 var(--cfm-s3); }
.cfm-lead { font-size: var(--cfm-lead); line-height: 1.5; color: var(--cfm-text); }
.cfm-small { font-size: var(--cfm-small); }
.cfm-muted { color: var(--cfm-text-muted); }
.cfm-label { font-family: var(--cfm-font-text); font-size: var(--cfm-label); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cfm-text-muted); }
.cfm-overline { font-size: var(--cfm-overline); font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cfm-accent); }

a { color: var(--cfm-text); text-decoration: underline; text-decoration-color: var(--cfm-accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--cfm-or-fonce); }

/* Filet de titre : trait fin sous un titre de section */
.cfm-title-rule { padding-bottom: var(--cfm-s2); border-bottom: var(--cfm-rule-strong) solid var(--cfm-bleu-nuit); }
hr.cfm-rule { border: 0; border-top: var(--cfm-rule) solid var(--cfm-border); margin: var(--cfm-s6) 0; }

/* ---------- 7. Composants ---------- */
.cfm-container { max-width: var(--cfm-container); margin: 0 auto; padding: 0 var(--cfm-gutter); }
.cfm-section { padding: var(--cfm-section) 0; }
.cfm-section--inverse { background: var(--cfm-inverse-bg); color: var(--cfm-inverse-text); }
.cfm-section--inverse h1, .cfm-section--inverse h2, .cfm-section--inverse h3, .cfm-section--inverse a { color: var(--cfm-inverse-text); }
.cfm-section--inverse .cfm-muted, .cfm-section--inverse .cfm-label { color: var(--cfm-inverse-muted); }

.cfm-card { background: var(--cfm-surface); border: var(--cfm-rule) solid var(--cfm-border); border-radius: var(--cfm-radius); padding: var(--cfm-s4); }
.cfm-grid { display: grid; gap: var(--cfm-s3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.cfm-btn { display: inline-block; font-family: var(--cfm-font-text); font-size: var(--cfm-small); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; padding: 0.9rem 1.6rem; border: var(--cfm-rule) solid var(--cfm-bleu-nuit); border-radius: var(--cfm-radius); color: var(--cfm-bleu-nuit); background: transparent; cursor: pointer; min-height: 44px; }
.cfm-btn:hover { background: var(--cfm-bleu-nuit); color: var(--cfm-ivoire); }
.cfm-btn--primary { background: var(--cfm-bleu-nuit); color: var(--cfm-ivoire); }
.cfm-btn--primary:hover { background: #1A2E55; border-color: #1A2E55; color: var(--cfm-ivoire); }
.cfm-btn--inverse { border-color: var(--cfm-ivoire); color: var(--cfm-ivoire); }
.cfm-btn--inverse:hover { background: var(--cfm-ivoire); color: var(--cfm-bleu-nuit); }

/* En-tête : logo horizontal positif, 220 px minimum, zone de protection incluse dans le fichier */
.cfm-header { background: var(--cfm-ivoire); border-bottom: var(--cfm-rule) solid var(--cfm-border); }
.cfm-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--cfm-s4); min-height: 96px; }
.cfm-header__logo img { display: block; width: clamp(220px, 22vw, 300px); height: auto; }
.cfm-nav { display: flex; gap: var(--cfm-s4); flex-wrap: wrap; }
.cfm-nav a { font-size: var(--cfm-small); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; padding: 0.5rem 0; border-bottom: 2px solid transparent; }
.cfm-nav a:hover, .cfm-nav a[aria-current="page"] { border-bottom-color: var(--cfm-accent); color: var(--cfm-text); }

/* Pied de page : fond bleu nuit, logo négatif */
.cfm-footer { background: var(--cfm-inverse-bg); color: var(--cfm-inverse-muted); padding: var(--cfm-s8) 0 var(--cfm-s4); font-size: var(--cfm-small); }
.cfm-footer a { color: var(--cfm-inverse-text); text-decoration: none; }
.cfm-footer a:hover { color: var(--cfm-or); }
.cfm-footer__logo img { width: 240px; height: auto; display: block; }

/* Les quatre piliers QHSE : lettre en Playfair, intitulé en capitales espacées */
.cfm-pillar { border-top: var(--cfm-rule-strong) solid var(--cfm-bleu-nuit); padding-top: var(--cfm-s3); }
.cfm-pillar__letter { font-family: var(--cfm-font-display); font-weight: 900; font-size: 3rem; line-height: 1; color: var(--cfm-bleu-nuit); }
.cfm-pillar__letter::after { content: ""; display: block; width: 32px; height: 2px; background: var(--cfm-or); margin: 0.75rem 0 1rem; }

/* Tableaux : filets fins, chiffres tabulaires */
table.cfm-table { width: 100%; border-collapse: collapse; font-size: var(--cfm-small); font-variant-numeric: tabular-nums; }
.cfm-table th { text-align: left; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--cfm-label); color: var(--cfm-text-muted); border-bottom: var(--cfm-rule-strong) solid var(--cfm-bleu-nuit); padding: 0.75rem 0.5rem; }
.cfm-table td { border-bottom: var(--cfm-rule) solid var(--cfm-border); padding: 0.75rem 0.5rem; vertical-align: top; }

/* Formulaires */
.cfm-input { font: inherit; width: 100%; box-sizing: border-box; padding: 0.8rem 1rem; border: var(--cfm-rule) solid var(--cfm-gris-pierre); border-radius: var(--cfm-radius); background: var(--cfm-blanc); color: var(--cfm-text); min-height: 44px; }
.cfm-input:focus { outline: 2px solid var(--cfm-or); outline-offset: 1px; border-color: var(--cfm-bleu-nuit); }
.cfm-input[aria-invalid="true"] { border-color: var(--cfm-bordeaux); }
.cfm-status--ok { color: var(--cfm-vert); } .cfm-status--alert { color: var(--cfm-bordeaux); }

/* Accessibilité : contrastes vérifiés — bleu nuit/ivoire 15.6:1 · gris pierre/ivoire 4.6:1 · ivoire/bleu nuit 15.6:1.
   L'or (#B8975A) fait 2.6:1 sur ivoire : réservé aux filets, icônes et textes ≥ 24 px en 600+, jamais au texte courant. */