/* ===========================================================================
   Image de marque — projet infogérance (ITSM)
   Dérivé de tokens.json. Modifier le JSON d'abord, répercuter ici ensuite.
   Règles : branding/itsm/brand.md — MàJ 2026-09-16
   Thème clair uniquement. N'inventer aucune valeur absente de ce fichier.
   =========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500&family=Instrument+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* --- Neutres (biais vert léger, accordés à l'accent) -------------------- */
  --paper:        #FBFAF7; /* fond principal */
  --paper-2:      #F4F3EE; /* cartes, bandeaux */
  --paper-3:      #EBEAE3; /* surface enfoncée, zébrure, bloc statu quo */
  --ink:          #191B18; /* texte principal            — 17,2:1 */
  --ink-2:        #5A5F58; /* texte secondaire           —  6,3:1 */
  --ink-3:        #6E7369; /* libellés, légendes         —  4,7:1 */
  --rule:         #E0DFD7; /* filet standard */
  --rule-strong:  #C9C8BE; /* séparation forte, bordure bouton secondaire */

  /* --- Accent : vert anglais ----------------------------------------------
     La couleur de la marque. Wordmark, liens, repères de lecture, tampons —
     et le bouton primaire à l'impression.                                    */
  --accent:       #1F4D3D; /* — 9,2:1 sur paper */
  --accent-hover: #163A2E;
  --accent-soft:  #E6EDE9; /* bandeau de preuve, surlignage */
  --on-accent:    #FBFAF7;

  /* --- Accent vif : jaune signal — SITE ET DOCUMENTS COMMERCIAUX UNIQUEMENT
     Ce n'est pas une seconde couleur de marque, c'est un signal. Trois
     emplois, pas un de plus : bouton primaire, filet 3px sous le chiffre,
     repère de section active. Un seul par écran, 0,5 % de la surface.
     JAMAIS dans le produit — c'est là que vit le jeu d'états, et le jaune
     vit dans la même région que --state-warn.
     Il porte de l'ENCRE, jamais du papier : 1,5:1 sur fond clair.
     Son survol FONCE — éclaircir rapprocherait le texte du fond.            */
  --accent-vif:       #FFC400; /* — 10,9:1 sur ink */
  --accent-vif-hover: #EDB800; /* —  9,5:1 sur ink */
  --accent-vif-soft:  #FBF4D9; /* surlignage de phrase, très rare */
  --on-accent-vif:    #191B18;

  /* --- États : PRODUIT UNIQUEMENT ----------------------------------------
     « Tout va bien n'a pas de couleur. » L'état normal est neutre ; seul ce
     qui demande une attention est coloré. Ne sortent jamais du produit.
     Toujours pastille + libellé, jamais la couleur seule.                   */
  --state-ok:     #6E7369;
  --state-warn:   #8F5E0F;
  --state-crit:   #A5342A;

  /* --- Familles ----------------------------------------------------------
     Le serif parle, le sans compte, le mono prouve.                          */
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans:  "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Échelle typographique --------------------------------------------- */
  --size-display-xl: 5rem;  /* 80 — l'accroche de l'accueil, et elle seule */
  --size-display: 3.5rem;   /* 56 */
  --size-h1:      2.5rem;   /* 40 */
  --size-h2:      1.75rem;  /* 28 */
  --size-h3:      1.25rem;  /* 20 */
  --size-body-lg: 1.125rem; /* 18 */
  --size-body:    1rem;     /* 16 */
  --size-small:   0.875rem; /* 14 */
  --size-price:   2.75rem;  /* 44 */
  --size-price-xl: 7rem;    /* 112 — le prix du socle, et lui seul */
  --size-data:    0.875rem; /* 14 */
  --size-label:   0.75rem;  /* 12 */

  /* --- Espacement, multiples de 4 ---------------------------------------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --sp-32: 128px;
  --gutter-min: 16px;

  /* --- Rayons, par rôle (le rayon est une information) -------------------- */
  --r-document: 0;      /* tableaux, filets, bandeaux, blocs de document */
  --r-control:  3px;    /* boutons, champs, pastilles de texte */
  --r-card:     6px;    /* cartes de forfait, captures encadrées */
  --r-pill:     999px;  /* pastilles d'état — produit uniquement */

  /* --- Filets et ombre ---------------------------------------------------
     Doctrine : un filet plutôt qu'une ombre. Seule ombre du système,
     réservée aux surfaces qui flottent réellement.                          */
  --border-w: 1px;
  --shadow-float: 0 1px 3px rgba(25, 27, 24, 0.10);
  --shadow-accroche: 0 12px 32px rgba(25, 27, 24, 0.35); /* illustration d'accroche seule, § 8 */

  /* --- Schémas ------------------------------------------------------------
     Appuyé, jamais ténu. Le 2px est l'unique exception à la doctrine du
     filet de 1px, et elle ne vaut qu'à l'intérieur d'un schéma : un dessin
     qui porte l'information ne se trace pas comme une séparation.           */
  --schema-stroke:         2px;    /* traits et contours, en --ink-2         */
  --schema-stroke-porteur: 2.5px;  /* chemin principal, brique centrale      */
  --schema-text:           15px;   /* éléments nommés                        */
  --schema-text-legende:   13px;   /* plancher absolu                        */

  /* --- Mouvement -----------------------------------------------------------
     Rien ne bouge en continu. Deux emplois seulement : accuser réception
     d'un geste (état), et accompagner une arrivée (entrée). Une entrée ne
     se joue qu'une fois — elle n'est pas rejouée au passage suivant.
     Toute valeur de durée, de retard ou de distance vient d'ici.            */
  --dur-state:    120ms;  /* survol et état pressé d'un bouton               */
  --dur-control:  150ms;  /* filet de carte ou de champ, chevron, lien       */
  --dur-entry:    600ms;  /* arrivée d'une bande, arrivée de l'accroche      */
  --dur-illus:    620ms;  /* illustration d'accroche                         */
  --dur-trait:    760ms;  /* le trait qui encercle : un geste, pas une entrée */
  --dur-defile:      3s;  /* UNE ligne de la liste des métiers, seule boucle  */
  --delay-step:    60ms;  /* décalage entre deux éléments d'UNE MÊME bande   */
  --delay-illus:  280ms;  /* le dessin arrive après le texte de sa bande     */
  --delay-trait:  280ms;  /* le trait part une fois l'accroche posée          */
  --rise-entry:    24px;  /* la montée d'un élément qui entre                */
  --rise-illus:    40px;
  --ease-state: ease;                             /* un état ne se met pas en scène */
  --ease-entry: cubic-bezier(0.2, 0.7, 0.3, 1);   /* départ franc, arrivée posée    */
  --ease-trait: cubic-bezier(0.65, 0, 0.35, 1);   /* la main part, file, et se pose  */
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Titres : serif, casse de phrase, jamais en capitales. */
.t-display-xl,
.t-display,
.t-h1,
.t-h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  text-wrap: balance;
}
.t-display-xl { font-size: var(--size-display-xl); line-height: 1.0; letter-spacing: -0.035em; }
.t-display { font-size: var(--size-display); line-height: 1.02; letter-spacing: -0.03em; }
.t-h1      { font-size: var(--size-h1);      line-height: 1.06; letter-spacing: -0.025em; }
.t-h2      { font-size: var(--size-h2);      line-height: 1.15; letter-spacing: -0.02em; }

.t-h3 {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--size-h3); line-height: 1.25; letter-spacing: -0.01em;
  text-wrap: balance;
}

.t-body-lg { font-size: var(--size-body-lg); line-height: 1.6; }
.t-body    { font-size: var(--size-body);    line-height: 1.6; }
.t-small   { font-size: var(--size-small);   line-height: 1.5; color: var(--ink-2); }

/* Prix et chiffres : sans, tabulaires. Un prix qui ne s'aligne pas est une faute. */
.t-price {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--size-price); line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
/* Filet sous le chiffre — emploi 2 de l'accent vif. Jamais un fond. */
.t-price--xl { font-size: var(--size-price-xl); }
.t-price--marked {
  border-bottom: 3px solid var(--accent-vif);
  padding-bottom: var(--sp-1);
  align-self: flex-start;
}

.t-data {
  font-family: var(--font-mono); font-weight: 400;
  font-size: var(--size-data); line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.t-label {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--size-label); line-height: 1.3;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}

/* Le texte courant reste lisible. */
.prose { max-width: 68ch; }

/* Tout tableau, toute grille de prix, tout rapport. */
table, .tabular { font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
  :root {
    --size-display-xl: 2.75rem; /* 44 */
    --size-display: 2.5rem;   /* 40 */
    --size-h1:      1.9375rem;/* 31 */
    --size-price-xl: 4rem;    /* 64 */
  }
}

/* ---------------------------------------------------------------------------
   Composants
   --------------------------------------------------------------------------- */

/* Bouton — le libellé dit ce qui se passe. Un seul primaire par écran. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding-inline: 18px;
  border-radius: var(--r-control);
  font-family: var(--font-sans); font-size: var(--size-body); font-weight: 600;
  border: var(--border-w) solid transparent;
  cursor: pointer; text-decoration: none;
}
.btn--primary   { background: var(--accent-vif); color: var(--on-accent-vif); }
.btn--primary:hover { background: var(--accent-vif-hover); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--text      { background: none; color: var(--accent); height: auto; padding: 0; border: 0; }
.btn--text:hover { text-decoration: underline; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Carte de forfait — porte toujours « ce qui n'est pas compris ». */
.plan-card {
  background: var(--paper-2);
  border: var(--border-w) solid var(--rule);
  border-radius: var(--r-card);
  padding: var(--sp-6);
}
.plan-card ul { list-style: none; display: grid; gap: var(--sp-2); }
.plan-card li { display: flex; gap: var(--sp-2); align-items: baseline; }
.plan-card li::before { content: "—"; color: var(--accent); flex: none; } /* jamais de coche verte */

/* Colonne « statu quo » — le seul bloc délibérément terne du système. */
.status-quo {
  background: var(--paper-3); color: var(--ink-3);
  border-radius: var(--r-document); padding: var(--sp-6);
}

/* Tableau — filets horizontaux seulement, aucun filet vertical. */
.table { width: 100%; border-collapse: collapse; }
.table th {
  font-family: var(--font-mono); font-size: var(--size-label); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
  text-align: left; padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--border-w) solid var(--rule-strong);
}
.table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--border-w) solid var(--rule);
}
.table tbody tr:nth-child(even) { background: var(--paper-3); }
.table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }

/* Pastille d'état — produit uniquement, libellé obligatoire. */
.status {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--size-small); color: var(--ink-2);
}
.status::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--r-pill);
  background: var(--state-ok); flex: none;
}
.status--warn::before { background: var(--state-warn); }
.status--crit::before { background: var(--state-crit); }

/* Citation client — reste vide tant qu'il n'y a pas de client. */
.quote {
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--size-h3); line-height: 1.45;
  border-left: 2px solid var(--accent);
  padding-left: var(--sp-4);
}

/* Bandeau de preuve — porte un chiffre ET sa source. */
.proof {
  background: var(--accent-soft);
  border-radius: var(--r-document);
  padding: var(--sp-6);
}

/* Bloc technique — la preuve de compétence. Au moins une fois en page d'accueil. */
.tech {
  background: var(--paper-2);
  font-family: var(--font-mono); font-size: var(--size-data); line-height: 1.45;
  border-left: 2px solid var(--rule-strong);
  padding: var(--sp-4);
  overflow-x: auto;
}

/* Capture d'écran encadrée — remplace toute illustration. */
.shot {
  border: var(--border-w) solid var(--rule);
  border-radius: var(--r-card);
  max-width: 100%;
  display: block;
}

/* Surface flottante — seul usage autorisé de l'ombre. */
.float { box-shadow: var(--shadow-float); background: var(--paper); border-radius: var(--r-control); }

/* Repère de section active — emploi 3 de l'accent vif. Filet de 2 px.
   La graisse porte l'information en parallèle : le filet seul ne suffit pas. */
.nav-link { color: var(--ink-2); text-decoration: none; padding-bottom: var(--sp-1); }
.nav-link[aria-current] {
  color: var(--ink); font-weight: 600;
  border-bottom: 2px solid var(--accent-vif);
}

/* ---------------------------------------------------------------------------
   Impression — la compensation noir et blanc, obligatoire.
   Le jumeau gris de --accent-vif est #BFBFBF : un bouton primaire jaune
   s'efface sur la page. Il revient donc au vert. C'est la condition à
   laquelle ce jaune a été accepté (brand.md § 3 et § 11).
   Les deux autres emplois ne perdent rien : le chiffre reste en .t-price,
   la section active reste indiquée par la graisse.
   --------------------------------------------------------------------------- */
@media print {
  .btn--primary { background: var(--accent); color: var(--on-accent); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}