/* ==========================================================================
   Dégaine Ton Style — vignettes de thème
   Piste retenue : 5d (bannière « impact » + grille « étiquette tissée »)
   Livrée par Claude Design le 10 août 2026, intégrée telle quelle.

   Aucune image, aucune police supplémentaire. Anton et DM Sans sont déjà
   chargées par le thème.

   Tout part d'une graine calculée à partir du nom de la catégorie (voir
   vignettes-themes.php). Le PHP ne pose que des custom properties ; toute
   la mise en forme vit ici.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LA CARTE
   -------------------------------------------------------------------------- */

.dts-theme-card {
  background: var(--fond-depliant, #FFFDF7);
  border: 1px solid rgba(17, 17, 17, 0.10);
  border-radius: 14px;
  overflow: hidden;
}

.dts-theme-card__body { padding: 14px 14px 16px; }

/* Le lien est porté par un titre de niveau 2 : sans lui, la grille n'a aucune
   structure pour un moteur ni pour un lecteur d'écran. Le h2 hérite du style
   du lien pour ne rien changer au dessin d'origine. */
.dts-theme-card__h { margin: 0; font: inherit; text-transform: none; }

.dts-theme-card__link {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--vermillon-fonce, #C0301A);
  text-decoration: none;
}
.dts-theme-card__link:hover { color: var(--encre, #111111); }

/* --------------------------------------------------------------------------
   2. LA VIGNETTE

   Variables posées par le PHP :
     --v-fond    fond de la tuile
     --v-trait   couleur de la trame, opacité comprise (13 à 17 %)
     --v-angle   angle des rayures, 45deg à 126deg
     --v-etq-bg  fond de l'étiquette
     --v-etq-fg  texte de l'étiquette
     --v-past-bg fond de la pastille de compte
     --v-past-fg texte de la pastille
   -------------------------------------------------------------------------- */

.dts-theme-vignette {
  position: relative;
  height: 150px;
  background: var(--v-fond);
  overflow: hidden;
  display: flex;
  align-items: center;      /* centré, comme sur la démo de Claude Design */
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

/*
 * ⚠️ ÉCART AVEC LE CSS LIVRÉ, mais RETOUR à la démo.
 * Le fichier d'origine posait « align-items: flex-end » et 34px de rembourrage
 * bas, avec ce commentaire : « l'étiquette occupe le bas, en bannière l'impact
 * vit dans la bande haute, cette réserve empêche les deux de se superposer ».
 *
 * Or l'impact ne paraît QUE dans la bannière, jamais sur une tuile : la réserve
 * ne protège de rien et l'étiquette pendait en bas sans raison. La capture de
 * présentation de Claude Design, elle, montre bien des étiquettes centrées.
 * On revient donc à ce qu'il a montré.
 *
 * La pastille de compte reste en bas à gauche, en position absolue : une
 * étiquette centrée de deux lignes ne la touche pas.
 */

/* --- les quatre trames, tirées par la graine modulo 4 -------------------- */

.dts-trame-0::before,
.dts-trame-1::before,
.dts-trame-2::before,
.dts-trame-3::before { content: ""; position: absolute; inset: 0; }

.dts-trame-0::before {
  background: repeating-linear-gradient(var(--v-angle), var(--v-trait) 0 9px, transparent 9px 26px);
}
.dts-trame-1::before {
  background:
    repeating-linear-gradient( 45deg, var(--v-trait) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, var(--v-trait) 0 2px, transparent 2px 14px);
}
.dts-trame-2::before {
  background: radial-gradient(circle, var(--v-trait) 2.4px, transparent 2.6px);
  background-size: 17px 17px;
}
.dts-trame-3::before {
  background: repeating-conic-gradient(from 0deg at 50% 50%, var(--v-trait) 0 25%, transparent 0 50%);
  background-size: 26px 26px;
}

/* --------------------------------------------------------------------------
   3. L'ÉTIQUETTE

   ⚠️ box-sizing: border-box est OBLIGATOIRE. Sans lui le plafond ne compte pas
   les 28px de padding et l'étiquette déborde de la tuile sur les noms longs.
   C'est la seule chose qui tient la grille avec « Occasions Noël, Halloween,
   Anniversaires… ».
   -------------------------------------------------------------------------- */

.dts-theme-label {
  position: relative;
  background: var(--v-etq-bg);
  border-radius: 5px;
  padding: 9px 14px;
  box-shadow: 0 5px 14px -6px rgba(17, 17, 17, 0.55);
  max-width: calc(100% - 28px);
  box-sizing: border-box;
}

.dts-theme-label span {
  display: block;
  font-family: "Anton", sans-serif;
  font-size: 21px;
  line-height: 1.05;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  color: var(--v-etq-fg);
}

/* Nom de plus de 12 caractères : deux lignes, corps réduit. */
.dts-theme-label--long span { font-size: 17px; letter-spacing: 0.02em; }

/* --------------------------------------------------------------------------
   4. LA PASTILLE DE COMPTE
   -------------------------------------------------------------------------- */

.dts-theme-count {
  position: absolute;
  bottom: 11px;
  left: 12px;
  background: var(--v-past-bg);
  color: var(--v-past-fg);
  font-family: "Anton", sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 5px 9px;
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   5. LA BANNIÈRE « IMPACT »

   Une seule fois par page, en haut. Trois couches centrées sur le même point :
   les ondes, les éclats, le point d'impact. Répété sur chaque vignette il
   s'userait ; ici il signe la marque sans lasser.
   -------------------------------------------------------------------------- */

.dts-theme-banner {
  position: relative;
  background: var(--encre, #111111);
  overflow: hidden;
  padding: 74px 40px 78px;
}

/* les ondes */
.dts-theme-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(circle at var(--b-x) var(--b-y),
    transparent 0 26px, var(--b-onde) 26px 29px);
}

/* les éclats, six raies fines éteintes avant le bord par le masque */
.dts-theme-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(from var(--b-angle) at var(--b-x) var(--b-y),
    transparent 0deg 18deg,       var(--b-trait) 18deg 19.4deg,
    transparent 19.4deg 74deg,    var(--b-trait) 74deg 75.4deg,
    transparent 75.4deg 138deg,   var(--b-trait) 138deg 139.4deg,
    transparent 139.4deg 206deg,  var(--b-trait) 206deg 207.4deg,
    transparent 207.4deg 272deg,  var(--b-trait) 272deg 273.4deg,
    transparent 273.4deg 330deg,  var(--b-trait) 330deg 331.4deg,
    transparent 331.4deg 360deg);
  -webkit-mask-image: radial-gradient(circle at var(--b-x) var(--b-y),
    #000 0 10%, rgba(0,0,0,.4) 40%, transparent 66%);
          mask-image: radial-gradient(circle at var(--b-x) var(--b-y),
    #000 0 10%, rgba(0,0,0,.4) 40%, transparent 66%);
}

/* le point d'impact */
.dts-theme-banner__hit {
  position: absolute;
  top: var(--b-y);
  left: var(--b-x);
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: var(--b-trait);
  box-shadow: 0 0 0 12px rgba(217, 58, 33, 0.2);
}

.dts-theme-banner__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 640px;
}

.dts-theme-banner__eyebrow {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #FF7A5E;                /* vermillon clair : 7,37:1 sur encre */
}

.dts-theme-banner h1 {
  margin: 0;
  font-family: "Anton", sans-serif;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--creme, #F5F1E8);
  text-wrap: balance;
}

.dts-theme-banner p {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(245, 241, 232, 0.8);
}

/* --------------------------------------------------------------------------
   6. LA GRILLE
   -------------------------------------------------------------------------- */

.dts-theme-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 1024px) {
  .dts-theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .dts-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .dts-theme-vignette { height: 128px; padding-bottom: 30px; }
  .dts-theme-label span { font-size: 18px; }
  .dts-theme-label--long span { font-size: 15px; }
  .dts-theme-banner { padding: 48px 22px 54px; }
}

/* --------------------------------------------------------------------------
   7. ACCESSIBILITÉ

   Le nom de la catégorie est déjà lisible sur l'étiquette, mais il DOIT rester
   dans le libellé du lien : sans lui la grille présente autant de liens
   identiques à un lecteur d'écran.

   Les trames sont décoratives et n'ont pas d'équivalent textuel : elles vivent
   dans un ::before, donc invisibles pour les technologies d'assistance.
   -------------------------------------------------------------------------- */

@media (prefers-contrast: more) {
  .dts-trame-0::before,
  .dts-trame-1::before,
  .dts-trame-2::before,
  .dts-trame-3::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dts-theme-card { transition: none; }
}