/* thesocle.net — « l'atelier ». Feuille propre au site, chargée APRÈS la feuille commune
   de la méthode (mu-habillage.css). Elle ne touche qu'à nos classes .td-*.

   L'allure : des bandeaux sombres couleur ardoise (celle du logo), des repères en chasse
   fixe comme dans une console, le violet des écrans du Hub. Le corps des pages reste sur le
   fond du thème : on assombrit les sections, pas le site. */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&display=swap');

:root { --td-largeur: 56rem; --ts-ardoise: #14121C; --ts-ardoise-2: #1E1B2E; --ts-clair: #F4F1FF; }

/* Trois éléments = trois colonnes. La feuille commune vise 2×2 pour quatre éléments ; à
   trois, elle laissait une carte seule sur sa ligne (constaté en capture le 2026-09-23). */
@media (min-width: 60rem) {
  .td-cartes:has(> :nth-child(3):last-child),
  .td-etapes:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
  .td-cartes:has(> :nth-child(5):last-child),
  .td-etapes:has(> :nth-child(5):last-child),
  .td-cartes:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
}

/* Le héros, le bandeau et le rappel à l'action : l'ardoise. */
.td-hero, .td-bandeau, .td-cta {
  background:
    radial-gradient(70rem 30rem at 12% -20%, color-mix(in srgb, var(--td-orange) 38%, transparent), transparent 62%),
    radial-gradient(50rem 26rem at 100% 0%, color-mix(in srgb, var(--td-orange-sombre) 30%, transparent), transparent 60%),
    var(--ts-ardoise);
  color: var(--ts-clair);
  border: 0;
}
.td-hero h1, .td-hero .td-hero__titre, .td-bandeau h2, .td-cta h2 { color: #fff; }
.td-hero .td-hero__chapo, .td-bandeau p, .td-cta p { color: #D8D2EE; opacity: 1; }
.td-hero a:not(.wp-block-button__link), .td-bandeau a, .td-cta a:not(.wp-block-button__link) { color: #C9B3FF; }

.td-hero__surtitre {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: none !important;
  letter-spacing: 0 !important;
  background: color-mix(in srgb, var(--td-orange) 28%, transparent) !important;
  color: #E6DBFF !important;
  border-color: color-mix(in srgb, var(--td-orange) 55%, transparent) !important;
}
.td-hero__surtitre::before { content: "$ "; opacity: .7; }

.td-hero .td-bouton--creux .wp-block-button__link,
.td-cta .td-bouton--creux .wp-block-button__link {
  color: #fff;
  border-color: color-mix(in srgb, #fff 45%, transparent);
  background: transparent;
}

/* Les titres de section : le liseré violet, et un numéro de console discret. */
.td-page h2 { font-weight: 700; letter-spacing: -0.01em; }
.td-etape::before { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.td-chiffre strong { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Le code du blog technique : fond ardoise, lisible. */
.td-page pre, .td-page .wp-block-code {
  background: var(--ts-ardoise-2);
  color: #EDE7FF;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .88rem;
  overflow-x: auto;
}

/* Les copies d'écran des articles : un cadre et une ombre, pour qu'on les lise comme des
   écrans et pas comme des photos posées dans le texte. Le logo du site n'est pas visé. */
.td-page img:not(.custom-logo) {
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 10px;
  box-shadow: 0 12px 34px -14px rgba(20, 12, 40, .35);
  margin-block: .6rem 1rem;
}
.td-page p:has(> img) + p > em:only-child { display: block; font-size: .92rem; opacity: .75; margin-top: -.4rem; }