/* thesocle.io — « la production ». 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 : claire et chaude, l'orange et l'anthracite du logo de thesocle.eu, et des
   titres condensés en capitales qui reprennent le dessin du mot THE SOCLE. */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600&display=swap');

:root { --td-largeur: 56rem; --ts-anthracite: #333333; --ts-creme: #FFF6EE; }

@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); }
}

/* Les titres : condensés, en capitales, comme le mot-logo. */
.td-hero h1, .td-hero .td-hero__titre, .td-page h2, .td-cta h2, .td-bandeau h2 {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 600;
}
.td-hero h1, .td-hero .td-hero__titre { font-size: clamp(2.2rem, 5.6vw, 3.8rem); line-height: 1.02; }

/* Le héros : une crème chaude, la pointe d'orange du socle en haut à droite. */
.td-hero {
  background:
    radial-gradient(60rem 28rem at 100% -10%, color-mix(in srgb, var(--td-orange) 22%, transparent), transparent 60%),
    var(--ts-creme);
  border-bottom: 4px solid var(--td-orange);
}

/* Les cartes : un socle orange sous chacune, plutôt qu'un liseré au-dessus. */
.td-carte--accent { border-top: 0; border-bottom: 4px solid var(--td-orange); }

/* Le rappel à l'action : l'anthracite de l'ardoise, le bouton orange en contraste. */
.td-cta { background: var(--ts-anthracite); color: #fff; border: 0; }
.td-cta h2 { color: #fff; }
.td-cta p { color: #E6E6E6; opacity: 1; }
.td-cta .td-bouton--creux .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }

.td-chiffre strong { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-weight: 600; }

/* 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; }