/* thesocle.eu — reprise de la feuille de thesocle.net le 2026-10-05, recolorée en sarcelle.
   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: 64rem; --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); }
  /* Quatre cartes : 2×2. La feuille commune en met trois par ligne, et la
     quatrième restait seule — vu en capture le 2026-10-05 sur /deja-fait/. */
  .td-cartes:has(> :nth-child(4):last-child),
  .td-etapes:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 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; }

/* Les billets (menus « Le Hub », « Minihubs et mmh ») s'ouvrent sur notre propre héros : la
   ligne « Par / date » qu'Astra pose au-dessus faisait une boîte vide, et l'en-tête du thème
   répétait le titre. Même allure que les pages, comme le demandait le commanditaire. */
.single-post .entry-header .entry-meta,
.single-post .ast-single-post-order .entry-meta,
.single-post .entry-header:has(+ .entry-content .td-hero) { display: none; }
.single-post .ast-article-single { padding-top: 0; }

/* L'en-tête : un menu sur une seule ligne, même sur un écran de portable. Astra espace ses
   entrées de 1 em de chaque côté ; à neuf entrées, cela débordait (CE du 2026-09-23). */
@media (min-width: 922px) {
  .main-header-menu > .menu-item > .menu-link { padding-inline: .62em; font-size: .95rem; }
  .main-header-bar .ast-builder-grid-row { grid-column-gap: 1.2rem; }
}

/* La bande blanche entre l'en-tête et notre héros : Astra réserve un espace en haut du
   contenu, et un en-tête de page vide, que notre héros rend inutiles. */
.td-a-hero #primary, .td-a-hero .site-main, .td-a-hero .ast-article-single,
.td-a-hero .ast-article-post, .td-a-hero .entry-content > .td-bloc:first-child { margin-top: 0 !important; padding-top: 0 !important; }
.td-a-hero .entry-header { display: none; }

/* ==========================================================================
   LE CADRE — ajouté le 2026-10-05
   ==========================================================================

   Les pages héritées de Twenty Twenty-Five portent `alignfull` et `alignwide`
   sur presque tous leurs blocs. Ce thème-là leur donnait une gouttière globale
   (`has-global-padding`) ; Astra ne la connaît pas. Résultat, constaté en
   capture le 2026-10-05 sur la page d'accueil : **le texte touchait le bord
   gauche de l'écran**, et chaque bloc s'alignait à une largeur différente.

   Ces trois règles rendent le cadre à toutes les pages, anciennes comme
   neuves, sans rien réécrire. Elles ne visent que ce qui est DANS le contenu :
   l'en-tête, le pied de page et nos blocs `.td-*` ont déjà le leur. */

:root {
  --td-gouttiere: clamp(1rem, 4vw, 3rem);   /* la marge au bord de l'écran */
  --td-large: 82rem;                         /* la largeur des blocs « wide » */
}

/* UNE SEULE MESURE. C'est la règle, et c'est tout l'enjeu : le défaut vu en
   capture n'était pas l'absence de marge, c'était TROIS marges différentes sur
   la même page — le titre au bord, les sections en retrait, les paragraphes
   ailleurs encore. Tout ce qui n'est pas un de nos blocs `.td-*` partage donc
   désormais la même largeur et le même axe. */

.entry-content { padding-inline: var(--td-gouttiere); }

/* Le titre de la page vit HORS de `.entry-content` (Astra le met dans
   `.entry-header`). Sans cette ligne il reste collé au bord pendant que tout le
   reste est centré — c'est le décalage le plus visible, et le premier qu'on
   remarque en arrivant sur une page. */
.entry-header { padding-inline: var(--td-gouttiere); }
.entry-header > * { max-width: var(--td-largeur); margin-inline: auto; }

.entry-content > *:not(.td-bloc):not(.alignfull),
.entry-content > .alignfull > *:not(.alignfull) {
  max-width: var(--td-largeur);
  margin-inline: auto;
}

/* Un bloc pleine largeur garde son fond d'un bord à l'autre — il reprend la
   gouttière que `.entry-content` vient de poser, puis la rend à son contenu. */
.entry-content > .alignfull {
  margin-inline: calc(-1 * var(--td-gouttiere));
  padding-inline: var(--td-gouttiere);
}

/* `alignwide` reste plus large que la mesure de lecture, mais borné. */
.entry-content .alignwide { max-width: var(--td-large); margin-inline: auto; }

/* ---- Le rythme vertical : un seul intervalle entre deux sections ---------- */
.entry-content > * + * { margin-block-start: clamp(2rem, 5vw, 3.5rem); }
.entry-content > .td-bloc + .td-bloc { margin-block-start: clamp(2.5rem, 6vw, 4.5rem); }

/* ---- Les images : la même allure partout ---------------------------------
   Sans règle, une capture d'écran arrive avec les coins vifs et sans ombre, et
   une illustration ancienne avec les arrondis du thème précédent. */
.entry-content img,
.td-carte img,
.td-bloc img {
  max-width: 100%;
  height: auto;
  border-radius: .75rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 12px 28px -14px rgb(0 0 0 / .35);
}
.td-carte img { margin-block-end: .9rem; display: block; }
.entry-content figure { margin-inline: auto; }
.entry-content figcaption {
  font-size: .85rem;
  opacity: .72;
  text-align: center;
  margin-block-start: .6rem;
}

/* Une image dans une carte occupe toute sa largeur et garde la même hauteur
   que ses voisines : sans cela, trois cartes côte à côte ont trois hauteurs
   d'image, et les titres ne s'alignent plus. */
.td-cartes .td-carte img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
}