/* =========================================================================
   PLEIN FORMAT (meelk.fr) : systeme de design « conduite d un tirage grand
   format », prefixe clg-.
   Vocabulaire : le procede, du calage au bon a tirer. laize (largeur utile
   du rouleau = conteneur), calage (en-tete), chemin-de-fer (navigation),
   blanchet (la surface qui porte l image = heros), aplat (voile en dur),
   etalon (la mesure de reference = bandeau de trois reperes chiffres),
   fascicule (section numerotee), hirondelle (le repere imprime en marge =
   surtitre), imposition (mosaique), typon (carte-bloc), coupe (cadre
   d image), pave (bloc de texte compose), epreuve (flux date), exemplaire
   (une entree du flux), quantieme (la date), margeur (l entree de la
   feuille = tete d article), justif (colonne de lecture), gamme (gamme de
   fabrication = fiche technique), oeillet (encadre), bon-a-tirer
   (check-list), nomenclature (tableau de donnees), raccord (a lire
   ensuite), rainage (separateur), filigrane (ornement SVG), massicot
   (pied de page), taquet (fil d Ariane), amorcage (lien d evitement),
   marbre (table de montage = conteneur des pages interieures), rail
   (colonne de repere collante), colophon (methode et sources).
   Palette : noir de presse verdi + jaune de calage + rouge de repere.
   Une seule identite, SOMBRE. Aucun prefers-color-scheme, aucune police
   distante, aucun CDN, aucun degrade decoratif, aucun angle arrondi.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* ---- 1. COULEURS · l atelier d impression ---------------------------- */
  --noir-de-presse:  #151d1a;  /* fond de toutes les pages                  */
  --noir-creux:      #1e2a26;  /* bandes en creux, sections alternees       */
  --gris-machine:    #26332e;  /* panneaux : gamme, nomenclature, oeillet   */
  --blanc-tournant:  #e6ece7;  /* encre du texte courant                    */
  --blanc-casse:     #a9b8b0;  /* notes, legendes, meta                     */
  --jaune-calage:    #e8a33d;  /* accent : liens, surtitres, chiffres       */
  --rouge-repere:    #d4541b;  /* signal : filets, puces, jamais du texte   */
  --trait-de-coupe:  #3a4a43;  /* filet, 1,83:1, jamais un texte            */

  /* Les six teintes de fascicule, une par rubrique. */
  --fascicule-1: #e8a33d;  /* signaletique       */
  --fascicule-2: #5ab0a6;  /* stand              */
  --fascicule-3: #d4541b;  /* retail             */
  --fascicule-4: #8fb85a;  /* plv eco-conception */
  --fascicule-5: #b98fd0;  /* creation graphique */
  --fascicule-6: #5a92c9;  /* site web           */
  --teinte: var(--jaune-calage);   /* teinte courante, surchargee par page  */

  /* ---- 2. CARACTERES · piles systeme, rien ne part chercher dehors ----- */
  --caractere-titre: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Geneva, "Nimbus Sans", "Liberation Sans", sans-serif;
  --caractere-texte: Athelas, Constantia, "PT Serif", "Noto Serif", serif;
  --caractere-chiffre: Menlo, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;

  --graisse-titre: 600;
  --approche-titre: -0.005em;
  --approche-capitale: 0.16em;

  --corps-texte: clamp(1.02rem, 0.97rem + 0.22vw, 1.13rem);
  --interligne: 1.66;
  --corps-h1: clamp(2.05rem, 1.32rem + 2.55vw, 3.5rem);
  --corps-h2: clamp(1.42rem, 1.14rem + 1.05vw, 2.05rem);
  --corps-h3: clamp(1.1rem, 1.02rem + 0.38vw, 1.34rem);
  --corps-h4: 1.02rem;

  /* ---- 3. RYTHME -------------------------------------------------------- */
  --justification: 66ch;              /* colonne de lecture                  */
  --pleine-page: 1360px;
  --fond-perdu: clamp(1.05rem, 3.6vw, 3.4rem);
  --gouttiere: clamp(0.85rem, 1.9vw, 1.7rem);
  --avance: clamp(2.1rem, 4.8vw, 4.2rem);
  --rail-largeur: 15.5rem;

  /* ---- 4. DETAILS ------------------------------------------------------- */
  --arete: 0;                          /* angles vifs partout                */
  --trait-mince: 1px solid var(--trait-de-coupe);
  --cadence: 140ms ease;
}

/* =========================================================================
   BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--noir-de-presse);
  color: var(--blanc-tournant);
  font-family: var(--caractere-texte);
  font-size: var(--corps-texte);
  line-height: var(--interligne);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }
svg.clg-filigrane { display: inline-block; vertical-align: -0.14em; }

h1, h2, h3, h4 {
  font-family: var(--caractere-titre);
  font-weight: var(--graisse-titre);
  letter-spacing: var(--approche-titre);
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--corps-h1); }
h2 { font-size: var(--corps-h2); }
h3 { font-size: var(--corps-h3); }
h4 { font-size: var(--corps-h4); }

p, ul, ol { margin: 0 0 1.1em; }
a {
  color: var(--jaune-calage);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.17em;
  transition: color var(--cadence);
}
a:hover { color: #f2c176; }
:focus-visible { outline: 2px solid var(--jaune-calage); outline-offset: 3px; }
hr { border: 0; border-top: var(--trait-mince); margin: var(--avance) 0; }
::selection { background: var(--jaune-calage); color: var(--noir-de-presse); }

/* Les six teintes se posent sur une page entiere, un rail ou une entree de
   flux. Elles ne changent que la variable, jamais une regle. */
.clg-t1 { --teinte: var(--fascicule-1); }
.clg-t2 { --teinte: var(--fascicule-2); }
.clg-t3 { --teinte: var(--fascicule-3); }
.clg-t4 { --teinte: var(--fascicule-4); }
.clg-t5 { --teinte: var(--fascicule-5); }
.clg-t6 { --teinte: var(--fascicule-6); }

/* Chiffres, dates, cotes et cellules en chasse tabulaire. */
.clg-nomenclature, .clg-gamme, .clg-etalon, .clg-quantieme, .clg-references,
.clg-fascicule__numero, .clg-typon__mention, .clg-rail__index {
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   OSSATURE
   ========================================================================= */

.clg-amorcage {
  position: absolute; left: -9999px; top: 0;
  background: var(--jaune-calage); color: var(--noir-de-presse);
  font-family: var(--caractere-titre);
  padding: 0.65rem 1.1rem; z-index: 60;
}
.clg-amorcage:focus { left: 0.5rem; top: 0.5rem; }

/* La laize : largeur utile de chaque zone de contenu. */
.clg-laize {
  width: 100%;
  max-width: var(--pleine-page);
  margin-inline: auto;
  padding-inline: var(--fond-perdu);
}

/* --- Le calage : l en-tete, ce qu on regle avant de tirer ---------------- */
.clg-calage {
  background: var(--noir-de-presse);
  border-bottom: 1px solid var(--trait-de-coupe);
  padding-block: clamp(0.5rem, 1.1vw, 0.78rem);
}
.clg-calage__rang {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 0.5rem 1.8rem;
}
.clg-calage__nom { display: inline-block; text-decoration: none; }
.clg-calage__marque {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--caractere-titre);
  font-size: clamp(1.2rem, 1.02rem + 0.75vw, 1.62rem);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blanc-tournant);
  transition: color var(--cadence);
}
.clg-calage__marque::before {             /* le trait de coupe, seul ornement du wordmark */
  content: "";
  width: 1.05rem; height: 1.05rem;
  border-left: 2px solid var(--jaune-calage);
  border-bottom: 2px solid var(--jaune-calage);
  flex: none;
}
.clg-calage__nom:hover .clg-calage__marque { color: #fff; }
.clg-calage__accroche {
  display: block;
  font-family: var(--caractere-chiffre);
  font-size: 0.61rem;
  letter-spacing: 0.13em;
  color: var(--blanc-casse);
  margin-top: 0.18rem;
  padding-left: 1.65rem;
}
.clg-chemin-de-fer ul {
  display: flex; flex-wrap: wrap;
  gap: 0.3rem 1.15rem;
  list-style: none; margin: 0; padding: 0;
}
.clg-chemin-de-fer a {
  font-family: var(--caractere-titre);
  font-size: 0.83rem;
  letter-spacing: 0.055em;
  color: var(--blanc-casse);
  text-decoration: none;
  padding-block: 0.28rem;
  border-bottom: 2px solid transparent;
  transition: color var(--cadence), border-color var(--cadence);
}
.clg-chemin-de-fer a:hover { color: var(--blanc-tournant); border-bottom-color: var(--teinte); }

/* --- Le taquet : le fil d Ariane ---------------------------------------- */
.clg-taquet { padding-block: clamp(0.75rem, 1.6vw, 1.15rem); }
.clg-taquet ol {
  display: flex; flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--caractere-chiffre);
  font-size: 0.74rem;
  color: var(--blanc-casse);
}
.clg-taquet li + li::before { content: "/"; margin-right: 0.5rem; color: var(--trait-de-coupe); }
.clg-taquet a { color: var(--blanc-casse); text-decoration: none; }
.clg-taquet a:hover { color: var(--jaune-calage); text-decoration: underline; }
.clg-taquet [aria-current="page"] { color: var(--blanc-tournant); }

/* =========================================================================
   ACCUEIL · LE BLANCHET (bande courte : la grille de fascicules doit
   commencer avant 700 px de hauteur de page sur 1456 x 800)
   ========================================================================= */

.clg-blanchet { position: relative; isolation: isolate; border-bottom: 1px solid var(--trait-de-coupe); }
.clg-blanchet__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* L aplat : couleur EN DUR par doctrine, jamais un var(). */
.clg-aplat {
  position: absolute; inset: 0;
  background: rgba(21, 29, 26, 0.8);
  z-index: -1;
}
.clg-blanchet__texte {
  padding-block: clamp(1.6rem, 3.2vw, 2.4rem) clamp(1.05rem, 2.2vw, 1.6rem);
  max-width: 64rem;
}
.clg-blanchet__texte h1 {
  max-width: 26ch;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.clg-blanchet__chapo {
  font-size: clamp(1.02rem, 0.96rem + 0.34vw, 1.18rem);
  line-height: 1.5;
  max-width: 64ch;
  color: var(--blanc-tournant);
  margin: 0.8rem 0 0;
}

/* L etalon : trois reperes chiffres, en ligne compacte sous le chapo. */
.clg-etalon {
  display: flex; flex-wrap: wrap;
  gap: 0 2.4rem;
  list-style: none;
  margin: 1.05rem 0 0; padding: 0.7rem 0 0;
  border-top: 2px solid var(--jaune-calage);
  max-width: 58rem;
}
.clg-etalon li { display: flex; align-items: baseline; gap: 0.55rem; padding-block: 0.15rem; }
.clg-etalon b {
  font-family: var(--caractere-chiffre);
  font-size: 1.24rem;
  font-weight: 600;
  color: var(--jaune-calage);
  letter-spacing: -0.02em;
}
.clg-etalon span {
  font-family: var(--caractere-titre);
  font-size: 0.72rem;
  letter-spacing: var(--approche-capitale);
  text-transform: uppercase;
  color: var(--blanc-casse);
}

/* =========================================================================
   LES FASCICULES · les sections de l accueil, numerotees
   ========================================================================= */

.clg-fascicule { padding-block: clamp(1.25rem, 2.6vw, 2.2rem); }
.clg-fascicule--creux { background: var(--noir-creux); border-block: 1px solid var(--trait-de-coupe); }
.clg-fascicule__tete {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0.4rem 2rem;
  border-bottom: 2px solid var(--trait-de-coupe);
  padding-bottom: 0.6rem;
  margin-bottom: clamp(0.95rem, 2vw, 1.5rem);
}
.clg-fascicule__numero {
  display: block;
  font-family: var(--caractere-chiffre);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  color: var(--jaune-calage);
  margin-bottom: 0.42rem;
}
.clg-fascicule__titre { font-size: var(--corps-h2); }
.clg-fascicule__note {
  grid-column: 2;
  justify-self: end;
  text-align: right;
  margin: 0;
  color: var(--blanc-casse);
  font-size: 0.9rem;
  max-width: 40ch;
}

/* Le rainage : le pli qui separe deux grandes sections. */
.clg-rainage {
  display: flex; justify-content: center;
  padding-block: clamp(0.3rem, 1vw, 0.9rem);
  color: var(--rouge-repere);
}

/* L hirondelle : le repere imprime en marge, devenu surtitre. */
.clg-hirondelle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--caractere-titre);
  font-size: 0.71rem;
  letter-spacing: var(--approche-capitale);
  text-transform: uppercase;
  color: var(--teinte);
  margin: 0 0 0.6rem;
}
.clg-hirondelle::before {
  content: "";
  width: 1.5rem; height: 0;
  border-top: 2px solid currentColor;
  flex: none;
}

/* =========================================================================
   L IMPOSITION · la mosaique de typons (les cartes)
   ========================================================================= */

.clg-imposition {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gouttiere);
  list-style: none; margin: 0; padding: 0;
}
.clg-typon {
  margin: 0;
  --teinte: var(--jaune-calage);
  border-top: 3px solid var(--teinte);
  padding-top: 0.85rem;
}
.clg-typon--t1 { --teinte: var(--fascicule-1); }
.clg-typon--t2 { --teinte: var(--fascicule-2); }
.clg-typon--t3 { --teinte: var(--fascicule-3); }
.clg-typon--t4 { --teinte: var(--fascicule-4); }
.clg-typon--t5 { --teinte: var(--fascicule-5); }
.clg-typon--t6 { --teinte: var(--fascicule-6); }
.clg-typon--pleine { grid-column: span 12; }
.clg-typon--tiers  { grid-column: span 4; }
.clg-typon--quart  { grid-column: span 3; }
.clg-typon--demi   { grid-column: span 6; }

.clg-typon__coupe {
  position: relative;
  overflow: hidden;
  background: var(--noir-creux);
  border: 1px solid var(--trait-de-coupe);
}
.clg-typon__coupe--paysage { aspect-ratio: 4 / 3; }
.clg-typon__coupe--bande   { aspect-ratio: 16 / 9; }
.clg-typon__coupe--carre   { aspect-ratio: 1 / 1; }
.clg-typon__vue {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity var(--cadence);
}
.clg-typon:hover .clg-typon__vue { opacity: 0.86; }
.clg-typon__pave { padding-top: 0.7rem; }
.clg-typon__titre { margin: 0 0 0.32rem; }
.clg-typon__lien {
  color: var(--blanc-tournant);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--cadence), border-color var(--cadence);
}
.clg-typon__lien:hover { color: var(--teinte); border-bottom-color: var(--teinte); }
.clg-typon__note { margin: 0; color: var(--blanc-casse); font-size: 0.92rem; line-height: 1.48; }
.clg-typon__mention {
  display: inline-block;
  margin-top: 0.55rem;
  font-family: var(--caractere-chiffre);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teinte);
  border: 1px solid currentColor;
  padding: 0.1rem 0.45rem;
}

/* =========================================================================
   L EPREUVE · le flux date, liste dense a filets (une ligne par entree,
   quantieme a gauche en chasse fixe, vignette reduite, aucune lettrine)
   ========================================================================= */

.clg-epreuve { list-style: none; margin: 0; padding: 0; border-top: var(--trait-mince); }
.clg-exemplaire {
  display: grid;
  grid-template-columns: 7.2rem 5.4rem 1fr;
  align-items: start;
  gap: 0 1.15rem;
  padding-block: 0.72rem;
  border-bottom: var(--trait-mince);
  margin: 0;
}
.clg-exemplaire:hover { background: var(--noir-creux); }
.clg-quantieme {
  margin: 0;
  font-family: var(--caractere-chiffre);
  font-size: 0.78rem;
  color: var(--blanc-casse);
  padding-top: 0.18rem;
}
.clg-exemplaire__vue {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--trait-de-coupe);
}
.clg-exemplaire h3 { margin: 0 0 0.2rem; font-size: 1.06rem; }
.clg-exemplaire h3 a { color: var(--blanc-tournant); text-decoration: none; }
.clg-exemplaire h3 a:hover { color: var(--jaune-calage); text-decoration: underline; }
.clg-exemplaire__note { margin: 0; color: var(--blanc-casse); font-size: 0.9rem; line-height: 1.46; }
.clg-exemplaire__cahier {
  font-family: var(--caractere-titre);
  font-size: 0.67rem;
  letter-spacing: var(--approche-capitale);
  text-transform: uppercase;
  color: var(--teinte);
  margin-left: 0.6rem;
}

/* =========================================================================
   PAGES INTERIEURES · le marbre, le rail collant, la justification
   ========================================================================= */

.clg-marbre { display: block; padding-bottom: var(--avance); }
.clg-margeur { padding-block: clamp(0.3rem, 1.2vw, 0.9rem) clamp(1.15rem, 2.6vw, 1.9rem); max-width: 56rem; }
.clg-margeur h1 { max-width: 22ch; }
.clg-margeur__chapo {
  font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.28rem);
  line-height: 1.5;
  color: var(--blanc-casse);
  max-width: 58ch;
  margin: 0.85rem 0 0;
}
.clg-references {
  display: flex; flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  list-style: none; margin: 1rem 0 0; padding: 0.75rem 0 0;
  border-top: var(--trait-mince);
  font-family: var(--caractere-chiffre);
  font-size: 0.75rem;
  color: var(--blanc-casse);
}
.clg-references a { color: var(--blanc-casse); }
.clg-references a:hover { color: var(--jaune-calage); }

/* La coupe : le cadre d image. En tete de page elle prend une bande large
   pour que le texte suivant reste dans le premier ecran. */
.clg-coupe { margin: 0; }
.clg-coupe__vue {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--trait-de-coupe);
}
.clg-coupe--tete .clg-coupe__vue { aspect-ratio: 21 / 9; max-height: 26rem; }
.clg-coupe figcaption {
  margin-top: 0.5rem;
  font-size: 0.83rem;
  color: var(--blanc-casse);
  border-left: 3px solid var(--teinte);
  padding-left: 0.7rem;
}

/* Le montage a deux colonnes : rail collant a GAUCHE, lecture a droite. */
.clg-marbre__montage {
  display: grid;
  grid-template-columns: var(--rail-largeur) minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 3.4vw, 3.4rem);
  padding-block: clamp(1.3rem, 2.8vw, 2.2rem) 0;
  align-items: start;
}
.clg-rail {
  position: sticky; top: 1.4rem;
  min-width: 0;
  border-top: 3px solid var(--teinte);
  padding-top: 0.85rem;
  font-size: 0.86rem;
}
.clg-rail__index {
  font-family: var(--caractere-chiffre);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--teinte);
  margin: 0 0 0.6rem;
}
.clg-rail h2 {
  font-size: 0.72rem;
  letter-spacing: var(--approche-capitale);
  text-transform: uppercase;
  color: var(--blanc-casse);
  margin: 0 0 0.55rem;
}
.clg-rail ul { list-style: none; margin: 0 0 1.15rem; padding: 0; }
.clg-rail li { padding-block: 0.22rem; border-bottom: var(--trait-mince); }
.clg-rail li:last-child { border-bottom: 0; }
.clg-rail a { color: var(--blanc-casse); text-decoration: none; }
.clg-rail a:hover { color: var(--jaune-calage); text-decoration: underline; }

.clg-justif { max-width: var(--justification); min-width: 0; }
.clg-justif > * + * { margin-top: 0.95em; }
.clg-justif h2 {
  margin-top: 1.7em;
  padding-left: 0.75rem;
  border-left: 4px solid var(--teinte);
}
.clg-justif h3 { margin-top: 1.3em; color: var(--blanc-tournant); }
.clg-justif ul, .clg-justif ol { padding-left: 1.3rem; }
.clg-justif li::marker { color: var(--rouge-repere); }
.clg-justif li + li { margin-top: 0.42em; }
.clg-justif strong { color: #fff; }
.clg-justif--seule { max-width: 60ch; padding-block: clamp(1rem, 2.4vw, 1.9rem) 0; }
.clg-justif--large { max-width: none; padding-block: clamp(1.2rem, 2.6vw, 2rem) 0; }

/* La gamme : la fiche technique en tete d une fiche de support. */
.clg-gamme {
  margin: 1.6em 0;
  background: var(--gris-machine);
  border: 1px solid var(--trait-de-coupe);
  border-left: 4px solid var(--teinte);
  padding: 1.05rem 1.2rem 1.15rem;
}
.clg-gamme h2 {
  font-family: var(--caractere-titre);
  font-size: 0.74rem;
  letter-spacing: var(--approche-capitale);
  text-transform: uppercase;
  color: var(--teinte);
  margin: 0 0 0.75rem;
  padding: 0; border: 0;
}
.clg-gamme dl {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr);
  gap: 0;
  margin: 0;
  font-size: 0.93rem;
}
.clg-gamme dt {
  font-family: var(--caractere-titre);
  font-size: 0.73rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blanc-casse);
  padding: 0.42rem 0.8rem 0.42rem 0;
  border-top: var(--trait-mince);
}
.clg-gamme dd {
  margin: 0;
  padding: 0.42rem 0;
  border-top: var(--trait-mince);
  color: var(--blanc-tournant);
}
.clg-gamme dl > dt:first-child, .clg-gamme dl > dt:first-child + dd { border-top: 0; }
.clg-gamme dd:empty::after { content: "à compléter"; color: var(--trait-de-coupe); font-style: italic; }
.clg-gamme__renvoi {
  margin: 0.9rem 0 0;
  padding-top: 0.7rem;
  border-top: var(--trait-mince);
  font-size: 0.85rem;
  color: var(--blanc-casse);
}

/* L oeillet : le point de vigilance, perce dans la marge. */
.clg-oeillet {
  background: var(--noir-creux);
  border: 1px solid var(--trait-de-coupe);
  border-left: 4px solid var(--rouge-repere);
  padding: 0.95rem 1.15rem;
  font-size: 0.96em;
}
.clg-oeillet p { margin: 0; }
.clg-oeillet p + p { margin-top: 0.6rem; }

/* Le bon a tirer : la check-list avant de lancer. */
.clg-bon-a-tirer {
  list-style: none;
  background: var(--gris-machine);
  border: 1px solid var(--trait-de-coupe);
  padding: 0.95rem 1.2rem 0.95rem 2.5rem;
  font-size: 0.96em;
}
.clg-justif ul.clg-bon-a-tirer { padding-left: 2.5rem; }
.clg-bon-a-tirer li { position: relative; }
.clg-bon-a-tirer li::before {
  content: "";
  position: absolute; left: -1.35rem; top: 0.45em;
  width: 0.7rem; height: 0.7rem;
  border: 2px solid var(--teinte);
}

/* La nomenclature : le tableau du repertoire. Il defile DANS son
   conteneur ; la page ne defile jamais horizontalement. */
.clg-nomenclature {
  overflow-x: auto;
  margin: 1.5em 0;
  border: 1px solid var(--trait-de-coupe);
}
.clg-nomenclature table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 86rem;
  font-size: 0.87rem;
  font-family: var(--caractere-texte);
}
.clg-nomenclature caption {
  caption-side: top;
  text-align: left;
  padding: 0.65rem 0.85rem;
  font-family: var(--caractere-titre);
  font-size: 0.73rem;
  letter-spacing: var(--approche-capitale);
  text-transform: uppercase;
  color: var(--jaune-calage);
  background: var(--noir-creux);
  border-bottom: 1px solid var(--trait-de-coupe);
}
.clg-nomenclature th, .clg-nomenclature td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--trait-de-coupe);
  vertical-align: top;
}
.clg-nomenclature thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--gris-machine);
  color: var(--blanc-tournant);
  font-family: var(--caractere-titre);
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 2px solid var(--jaune-calage);
}
/* Les deux premieres colonnes restent visibles quand le reste defile. */
.clg-nomenclature th:nth-child(1), .clg-nomenclature td:nth-child(1) {
  position: sticky; left: 0; z-index: 2;
  background: var(--noir-creux);
  width: 9.5rem; min-width: 9.5rem;
  border-right: 1px solid var(--trait-de-coupe);
}
.clg-nomenclature th:nth-child(2), .clg-nomenclature td:nth-child(2) {
  position: sticky; left: 9.5rem; z-index: 2;
  background: var(--noir-creux);
  width: 6.5rem; min-width: 6.5rem;
  border-right: 1px solid var(--trait-de-coupe);
}
.clg-nomenclature thead th:nth-child(1), .clg-nomenclature thead th:nth-child(2) { z-index: 4; background: var(--gris-machine); }
.clg-nomenclature tbody tr:nth-child(even) td { background: rgba(38, 51, 46, 0.42); }
.clg-nomenclature tbody tr:nth-child(even) td:nth-child(-n+2) { background: #223029; }
.clg-nomenclature tbody td:empty::after { content: "à compléter"; color: var(--trait-de-coupe); font-style: italic; white-space: nowrap; }
.clg-nomenclature tbody td { min-width: 8.5rem; }
.clg-nomenclature--pleine { margin-inline: 0; }
.clg-nomenclature tbody th a { color: var(--blanc-tournant); text-decoration: none; border-bottom: 1px solid var(--trait-de-coupe); }
.clg-nomenclature tbody th a:hover { color: var(--jaune-calage); border-bottom-color: var(--jaune-calage); }
.clg-nomenclature tbody th { font-weight: 600; font-family: var(--caractere-titre); }

/* Le raccord : les deux les qui se rejoignent, donc a lire ensuite. */
.clg-raccord {
  margin-top: 2.2em;
  padding-top: 1.1rem;
  border-top: 2px solid var(--teinte);
}
.clg-raccord h2 {
  font-family: var(--caractere-titre);
  font-size: 0.75rem;
  letter-spacing: var(--approche-capitale);
  text-transform: uppercase;
  color: var(--blanc-casse);
  margin: 0 0 0.6rem;
  padding: 0; border: 0;
}
.clg-raccord ul { list-style: none; margin: 0; padding: 0; }
.clg-raccord li { padding: 0.3rem 0; border-bottom: var(--trait-mince); }
.clg-raccord li:last-child { border-bottom: 0; }

/* Le colophon : methode, sources et signature en pied d article. */
.clg-colophon {
  margin-top: 2.2em;
  background: var(--noir-creux);
  border: 1px solid var(--trait-de-coupe);
  padding: 1rem 1.2rem;
  font-size: 0.9rem;
  color: var(--blanc-casse);
}
.clg-colophon h2 {
  font-family: var(--caractere-titre);
  font-size: 0.73rem;
  letter-spacing: var(--approche-capitale);
  text-transform: uppercase;
  color: var(--jaune-calage);
  margin: 0 0 0.5rem;
  padding: 0; border: 0;
}
.clg-colophon p { margin: 0; }
.clg-colophon p + p { margin-top: 0.5rem; }

/* =========================================================================
   LE MASSICOT · le pied de page, la ou tout est rogne
   ========================================================================= */

.clg-massicot {
  margin-top: var(--avance);
  background: var(--noir-creux);
  border-top: 3px solid var(--jaune-calage);
}
.clg-massicot__rang {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--gouttiere) * 1.6);
  padding-block: clamp(1.7rem, 3.8vw, 2.7rem);
}
.clg-massicot h2 {
  font-family: var(--caractere-titre);
  font-size: 0.74rem;
  letter-spacing: var(--approche-capitale);
  text-transform: uppercase;
  color: var(--jaune-calage);
  margin-bottom: 0.7rem;
}
.clg-massicot ul { list-style: none; margin: 0; padding: 0; }
.clg-massicot li { padding-block: 0.2rem; }
.clg-massicot a { color: var(--blanc-casse); text-decoration: none; }
.clg-massicot a:hover { color: var(--blanc-tournant); text-decoration: underline; }
.clg-massicot__pied {
  border-top: 1px solid var(--trait-de-coupe);
  padding-block: 1rem;
  font-family: var(--caractere-chiffre);
  font-size: 0.74rem;
  color: var(--blanc-casse);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem 0.9rem;
}
.clg-massicot__pied .clg-filigrane { color: var(--jaune-calage); }

/* =========================================================================
   ADAPTATION
   ========================================================================= */

@media (max-width: 1080px) {
  .clg-marbre__montage { grid-template-columns: minmax(0, 1fr); }
  .clg-rail {
    position: static;
    display: flex; flex-wrap: wrap;
    gap: 0 2rem;
    margin-bottom: 1.4rem;
  }
  .clg-rail ul { display: flex; flex-wrap: wrap; gap: 0 1.1rem; margin-bottom: 0.5rem; }
  .clg-rail li { border-bottom: 0; }
  .clg-typon--tiers { grid-column: span 6; }
  .clg-typon--quart { grid-column: span 6; }
}

@media (max-width: 760px) {
  .clg-typon--tiers, .clg-typon--quart, .clg-typon--demi { grid-column: span 12; }
  .clg-massicot__rang { grid-template-columns: 1fr; }
  .clg-fascicule__tete { grid-template-columns: 1fr; align-items: start; }
  .clg-fascicule__note { grid-column: 1; justify-self: start; text-align: left; margin-top: 0.45rem; max-width: 60ch; }
  .clg-exemplaire { grid-template-columns: 4.8rem minmax(0, 1fr); column-gap: 0.9rem; }
  .clg-exemplaire__vue { grid-column: 1; grid-row: 1 / span 2; }
  .clg-quantieme { grid-column: 2; grid-row: 1; }
  .clg-exemplaire > div { grid-column: 2; grid-row: 2; }
  .clg-gamme dl { grid-template-columns: 1fr; }
  .clg-gamme dd { border-top: 0; padding-top: 0; padding-bottom: 0.5rem; }
  .clg-etalon { gap: 0 1.5rem; }
  .clg-blanchet__texte { padding-block: 1.9rem 1.5rem; }
  .clg-nomenclature table { min-width: 62rem; }
}

@media (max-width: 480px) {
  .clg-calage__rang { align-items: flex-start; }
  .clg-chemin-de-fer ul { gap: 0.25rem 0.85rem; }
  .clg-etalon li { flex-basis: 100%; }
}

/* Courtoisie du mouvement. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Impression : une epreuve sur papier. */
@media print {
  .clg-calage, .clg-massicot, .clg-amorcage, .clg-taquet, .clg-rainage, .clg-rail { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .clg-justif { max-width: none; }
  .clg-gamme, .clg-oeillet, .clg-bon-a-tirer, .clg-colophon { background: #fff; color: #000; border: 1pt solid #000; }
  .clg-aplat { background: rgba(21, 29, 26, 0.94); }
}