/* ═══════════════════════════════════════════════════════════════
   tgl.css · The Garel Lab · jetons et composants officiels · V3
   Source de vérité : Drive branding/The-Garel-Lab (Règles DA V3)
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* couleurs : bichromie stricte, aucune troisième couleur */
  --tgl-vert: #107C4B;          /* fond maître · 85 % */
  --tgl-blanc: #FFFFFF;         /* texte sur vert, panneaux · 12 % */
  --tgl-vert-profond: #0B5A36;  /* petits textes sur blanc · 3 % */
  --tgl-encre-print: #101010;   /* print uniquement, jamais à l'écran */

  /* typographies */
  --tgl-serif: 'Young Serif', 'Iowan Old Style', Georgia, serif;
  --tgl-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  --tgl-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;   /* la face de lecture : les paragraphes, jamais les étiquettes (03/09) */

  /* échelle */
  --tgl-display: clamp(38px, 5vw, 64px);
  --tgl-heading: clamp(24px, 3vw, 34px);
  --tgl-corps: 14px;
  --tgl-etiquette: 11px;

  /* géométrie */
  --tgl-radius: 10px;
  --tgl-filet: 2px;
  --tgl-u: 8px;                 /* unité d'espacement */
  --tgl-max: 1420px;   /* plein cadre, marges vivantes, comme les planches Design */

  /* motion */
  --tgl-t: 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ── base ── */
.tgl { background: var(--tgl-vert); color: var(--tgl-blanc); font-family: var(--tgl-mono); font-size: var(--tgl-corps); line-height: 1.8; }
.tgl-serif { font-family: var(--tgl-serif); font-weight: 400; }
.tgl-etiquette { font-family: var(--tgl-mono); font-size: var(--tgl-etiquette); text-transform: uppercase; letter-spacing: 0.24em; }
.tgl-display { font-family: var(--tgl-serif); font-size: var(--tgl-display); line-height: 1.05; font-weight: 400; }
.tgl-heading { font-family: var(--tgl-serif); font-size: var(--tgl-heading); line-height: 1.15; font-weight: 400; }

/* panneau blanc sur champ vert */
.tgl-panneau { background: var(--tgl-blanc); color: var(--tgl-vert-profond); border-radius: var(--tgl-radius); }
.tgl-panneau .tgl-heading, .tgl-panneau .tgl-display { color: var(--tgl-vert); }

/* ── boutons : pleins, contours, états ── */
.tgl-btn {
  display: inline-block; font-family: var(--tgl-mono); font-size: var(--tgl-etiquette);
  text-transform: uppercase; letter-spacing: 0.24em; text-decoration: none; cursor: pointer;
  padding: 14px 28px; border-radius: var(--tgl-radius); border: var(--tgl-filet) solid transparent;
  transition: background var(--tgl-t), color var(--tgl-t), border-color var(--tgl-t);
}
/* sur fond vert */
.tgl-btn-plein { background: var(--tgl-blanc); color: var(--tgl-vert); }
.tgl-btn-plein:hover { background: transparent; color: var(--tgl-blanc); border-color: var(--tgl-blanc); }
.tgl-btn-contour { background: transparent; color: var(--tgl-blanc); border-color: var(--tgl-blanc); }
.tgl-btn-contour:hover { background: var(--tgl-blanc); color: var(--tgl-vert); }
/* sur panneau blanc */
.tgl-panneau .tgl-btn-plein { background: var(--tgl-vert); color: var(--tgl-blanc); }
.tgl-panneau .tgl-btn-plein:hover { background: transparent; color: var(--tgl-vert); border-color: var(--tgl-vert); }
.tgl-panneau .tgl-btn-contour { color: var(--tgl-vert); border-color: var(--tgl-vert); }
.tgl-panneau .tgl-btn-contour:hover { background: var(--tgl-vert); color: var(--tgl-blanc); }
/* focus clavier : toujours visible, jamais supprimé */
.tgl-btn:focus-visible, .tgl-champ:focus-visible, a.tgl:focus-visible {
  outline: var(--tgl-filet) dashed currentColor; outline-offset: 3px;
}
.tgl-btn[disabled], .tgl-btn.est-inactif { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ── carte ── */
.tgl-carte { border: var(--tgl-filet) solid currentColor; border-radius: var(--tgl-radius); padding: calc(var(--tgl-u) * 3); transition: transform var(--tgl-t); }
.tgl-carte:hover { transform: translateY(-2px); }
.tgl-carte .k { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.7; margin-bottom: 10px; }

/* ── badge / étiquette ── */
.tgl-badge { display: inline-block; border: 1.2px solid currentColor; border-radius: 99px; font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; padding: 4px 12px; }
.tgl-badge-plein { background: currentColor; }
.tgl-badge-plein > span { color: var(--tgl-vert); mix-blend-mode: normal; }

/* ── tableau ── */
.tgl-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.tgl-table th { font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; text-align: left; border-bottom: var(--tgl-filet) solid currentColor; padding: 10px 16px 8px 0; }
.tgl-table td { border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); padding: 12px 16px 12px 0; }
.tgl-table td.serif { font-family: var(--tgl-serif); font-size: 15.5px; }

/* ── formulaire : champ, erreur, état vide ── */
.tgl-champ { font-family: var(--tgl-mono); font-size: 13px; padding: 12px 14px; border-radius: var(--tgl-radius); border: 1.5px solid currentColor; background: transparent; color: inherit; width: 100%; }
.tgl-champ::placeholder { color: currentColor; opacity: 0.45; }
.tgl-champ.est-erreur { border-style: dashed; }
.tgl-erreur { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 6px; }
.tgl-erreur::before { content: "✕ "; }
.tgl-vide { border: 1.5px dashed currentColor; border-radius: var(--tgl-radius); padding: calc(var(--tgl-u) * 5); text-align: center; opacity: 0.75; font-size: 12px; }

/* ── le sceau (version HTML/CSS, typo fidèle) ── */
.tgl-sceau { display: inline-block; border: var(--tgl-filet) solid currentColor; border-radius: var(--tgl-radius); padding: 14px 16px 12px; text-align: center; }
.tgl-sceau .mono-g { font-family: var(--tgl-serif); font-size: 26px; line-height: 1; letter-spacing: 0.04em; }
.tgl-sceau .tete { width: 74px; height: 74px; border-radius: 6px; margin: 10px auto 8px; display: block; }
.tgl-sceau .nom { font-size: 8px; letter-spacing: 0.32em; text-transform: uppercase; line-height: 1.7; }

/* ── filigrane ── */
.tgl-filigrane { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--tgl-serif); opacity: 0.15; pointer-events: none; overflow: hidden; }

/* ── le grain : la texture du champ vert ──
   Pointillé discret sur les fonds pleins, jamais sur les panneaux blancs ni en print.
   Usage : class="tgl tgl-grain" sur le body. */
body.tgl-grain::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 40;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1.3px);
  background-size: 4px 4px;
}
@media print { body.tgl-grain::before { display: none; } }

/* ── le tampon : micro-signature d'apparition ──
   Deux usages autorisés, pas un de plus : le chargement d'une page maison, la validation d'un livrable. */
@keyframes tgl-tamponne {
  0% { transform: scale(1.12) rotate(-1deg); opacity: 0; }
  60% { transform: scale(0.985) rotate(0deg); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.tgl-tamponne { animation: tgl-tamponne 300ms cubic-bezier(0.2, 0.8, 0.3, 1) 1 both; }

/* ── le sceau d'acte : scellement d'un livrable (Sealed by the lab) ── */
.tgl-scelle { display: inline-flex; gap: 16px; align-items: center; border: var(--tgl-filet) solid currentColor; border-radius: var(--tgl-radius); padding: 12px 18px; }
.tgl-scelle .m { font-family: var(--tgl-serif); font-size: 24px; line-height: 1; }
.tgl-scelle .d { font-family: var(--tgl-mono); font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.9; }
.tgl-scelle .d b { display: block; font-size: 10px; font-weight: 600; }
.tgl-scelle .d code { font-size: 8.5px; letter-spacing: 0.06em; background: none; padding: 0; opacity: 0.75; text-transform: none; }

/* ── icônes : le pack officiel (41 SVG, /assets/icones/) ──
   Usage : <span class="tgl-ic" style="--ic: url('/assets/icones/decider.svg')"></span>
   L'icône prend la couleur du texte courant (masque). */
.tgl-ic {
  display: inline-block; width: 24px; height: 24px; background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}

/* ── motion : règles globales ── */
.tgl-revele { opacity: 0; transform: translateY(12px); transition: opacity var(--tgl-t), transform var(--tgl-t); }
.tgl-revele.est-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tgl *, .tgl-revele { transition: none !important; animation: none !important; transform: none !important; opacity: 1 !important; }
}