/* Gaston — design system. Couleurs, typographie et composants de la marque, validés par Jules en octobre 2026.
   Référence unique : toute page, slide ou visuel Gaston charge ce fichier. Règles d'usage : AGENTS.md. Aperçu : guide.html.
   Ne pas modifier une valeur sans décision de Jules ; les décisions sont consignées dans GASTON/gtm/site.md. */
@font-face{font-family:"Bricolage";src:url("fonts/bricolagegrotesque.woff2") format("woff2"),url("fonts/bricolagegrotesque.ttf") format("truetype");font-weight:200 800;font-stretch:75% 100%}
@font-face{font-family:"DM Sans";src:url("fonts/dmsans.woff2") format("woff2"),url("fonts/dmsans.ttf") format("truetype");font-weight:100 1000}
@font-face{font-family:"Bagel Fat One";src:url("fonts/bagelfatone.woff2") format("woff2"),url("fonts/bagelfatone.ttf") format("truetype");font-weight:400}

:root{
  /* couleurs */
  --g-fond:#FFFDF8;      /* fond de page */
  --g-filet:#EFE8DA;     /* filets, bordures */
  --g-encadre:#FFFFFF;   /* encadré clair */
  --g-texte:#2B211C;     /* texte courant */
  --g-sapin:#1F3B2E;     /* titres, blocs, boutons */
  --g-bleu:#4C9BFF;      /* pastille, aplat fort */
  --g-vif:#B9ED48;       /* appui : trait, surlignage, étape en cours */
  /* typo */
  --g-titre:"Bricolage",system-ui,sans-serif;
  --g-corps:"DM Sans",system-ui,sans-serif;
  --g-logo:"Bagel Fat One",system-ui,sans-serif;
  /* formes */
  --g-r-s:12px; --g-r-m:24px; --g-r-pile:999px;
}

.g{background:var(--g-fond);color:var(--g-texte);font-family:var(--g-corps);font-size:16px;line-height:1.5}
.g *{box-sizing:border-box;margin:0;padding:0}
.g-t1,.g-t2,.g-t3,.g-t4,.g-chiffre{font-family:var(--g-titre);font-weight:650;font-stretch:100%;letter-spacing:-.02em;color:var(--g-sapin)}
.g-t1{font-size:72px;line-height:1.02}
.g-t2{font-size:44px;line-height:1.05}
.g-t3{font-size:26px;line-height:1.15}
.g-t4{font-size:18px;line-height:1.25}
.g-chapo{font-size:22px;line-height:1.35}
.g-petit{font-size:13px;line-height:1.45;opacity:.75}
.g-mot{font-family:var(--g-logo);font-weight:400;letter-spacing:-.01em;line-height:1;color:var(--g-sapin)}

/* chiffre : toujours avec sa condition juste dessous */
.g-chiffre{display:inline-block;position:relative;z-index:0;font-size:96px;line-height:.95}
.g-chiffre::after{content:"";position:absolute;z-index:-1;left:-.06em;right:-.08em;bottom:.04em;height:.3em;border-radius:var(--g-r-pile);background:var(--g-vif)}

.g-bouton{display:inline-block;padding:15px 24px;border-radius:var(--g-r-pile);background:var(--g-vif);color:var(--g-sapin);font:600 16px var(--g-corps);border:1.5px solid var(--g-vif)}
.g-bouton.second{background:transparent;border-color:var(--g-sapin);color:var(--g-sapin)}
.g-bouton.fleche::after{content:"→";margin-left:10px}
.g-lien{color:var(--g-sapin);font-weight:600;text-decoration:underline;text-decoration-color:var(--g-vif);text-decoration-thickness:3px;text-underline-offset:4px}
.g-etiquette{display:inline-block;font:600 12px var(--g-corps);background:var(--g-sapin);color:var(--g-fond);border-radius:var(--g-r-pile);padding:3px 10px}
.g-surligne{background:var(--g-vif);color:var(--g-texte);padding:0 .2em;border-radius:.3em}
.g-encadre{background:var(--g-encadre);border:1.5px solid var(--g-filet);border-radius:var(--g-r-m);padding:20px 26px}
.g-bloc{background:var(--g-sapin);color:var(--g-fond);border-radius:var(--g-r-m);padding:20px 26px}
.g-bloc .g-t4{color:var(--g-fond);margin-bottom:6px}

.g-etapes{list-style:none;display:grid;gap:14px}
.g-etapes li{display:flex;gap:18px;align-items:flex-start}
.g-etapes .n{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1.5px solid var(--g-sapin);font:650 26px/1 var(--g-titre);color:var(--g-sapin)}
.g-etapes .encours .n{background:var(--g-vif);border-color:var(--g-vif);color:var(--g-texte)}

.g-tableau{width:100%;border-collapse:collapse;font-size:15px}
.g-tableau th{text-align:left;font:600 13px var(--g-corps);padding:10px 14px;border-bottom:1.5px solid var(--g-sapin);color:var(--g-sapin)}
.g-tableau td{padding:14px;border-bottom:1.5px solid var(--g-filet);vertical-align:top}
.g-tableau td.fort{font:650 20px/1.2 var(--g-titre);color:var(--g-sapin);white-space:nowrap}

/* geste : un objet sur sa pastille, qui déborde du cadre. Un seul par support. */
.g-pastille{position:absolute;border-radius:50%;background:var(--g-bleu)}
.g-objet{position:absolute;filter:drop-shadow(0 22px 22px rgba(0,0,0,.2))}

/* aplat bleu : surtout un grand titre et un bouton. Titres et logo en blanc chaud ; le peu de texte courant en brun-noir. */
.g-aplat{background:var(--g-bleu);color:var(--g-texte)}
.g-aplat .g-t1,.g-aplat .g-t2,.g-aplat .g-t3,.g-aplat .g-mot{color:var(--g-fond)}

/* logo, version longue : le mot puis la cocotte, à la hauteur du mot */
.g-logo-long{display:inline-flex;align-items:center;gap:.22em}
.g-logo-long img{height:1.06em;width:auto}