/*
Theme Name: MTDS Magazine
Theme URI: https://www.mtdsdigital.fr/
Author: MTDS Digital
Author URI: https://www.mtdsdigital.fr/
Description: Thème bloc (FSE) ultra-léger pour magazines de contenu — orienté PageSpeed 100, SEO et netlinking. Réutilisable sur tout le portefeuille (couleurs/logo configurables par site via theme.json + Éditeur de site).
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
Version: 0.3.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mtds-magazine
Tags: blog, news, magazine, full-site-editing, block-patterns
*/

/* ===================================================================
   Design system « magazine » — miroir de la maquette (preview/mtds.css),
   adapté au markup des blocs WordPress. Police système, 0 JS, 0 framework.
   Couleurs depuis theme.json (var(--wp--preset--color--*)).
   =================================================================== */

:root { --mtds-accent-dark: #b50500; }

body { line-height: 1.65; }
a { text-underline-offset: 2px; }

h1, h2, h3, h4, .wp-block-post-title, .wp-block-query-title, .wp-block-heading {
  font-weight: 800; letter-spacing: -0.01em; line-height: 1.15;
}
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px;
}

/* ---------- Topbar (barre sombre au-dessus du header) ---------- */
.mtds-topbar {
  background: var(--wp--preset--color--ink); color: #cfd3da;
  font-size: .78rem; letter-spacing: .02em;
}
.mtds-topbar .mtds-topbar-inner {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  max-width: 1200px; margin-inline: auto; padding: .5rem 1.25rem;
}
.mtds-topbar a { color: #cfd3da; text-decoration: none; }
.mtds-topbar a:hover { color: #fff; }
.mtds-topbar .mtds-social a { margin-left: 1rem; }

/* ---------- En-tête sticky + wordmark ---------- */
.mtds-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(6px);
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.mtds-brand {
  font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1;
  color: var(--wp--preset--color--ink); text-decoration: none; text-transform: uppercase;
}
.mtds-brand b { color: var(--wp--preset--color--accent); }

.mtds-header .wp-block-navigation-item__content {
  font-weight: 600; position: relative; padding-block: .35rem; text-decoration: none;
}
.mtds-header .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.15rem; height: 2px;
  background: var(--wp--preset--color--accent); transform: scaleX(0);
  transform-origin: left; transition: transform .18s ease;
}
.mtds-header .wp-block-navigation-item:hover .wp-block-navigation-item__content { color: var(--wp--preset--color--accent); }
.mtds-header .wp-block-navigation-item:hover .wp-block-navigation-item__content::after { transform: scaleX(1); }
.mtds-header .wp-block-search__button {
  border: 1px solid var(--wp--preset--color--border); background: var(--wp--preset--color--surface);
  border-radius: 50%; width: 40px; height: 40px; padding: 0; color: var(--wp--preset--color--ink);
}
.mtds-header .wp-block-search__button:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }

/* ---------- En-têtes de section (barre d'accent + « voir tout ») ---------- */
.mtds-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.mtds-section-head h2 { position: relative; padding-left: .85rem; font-size: 1.5rem; margin: 0; }
.mtds-section-head h2::before {
  content: ""; position: absolute; left: 0; top: .15em; bottom: .15em; width: 5px;
  border-radius: 3px; background: var(--wp--preset--color--accent);
}
.mtds-seeall { margin: 0; }
.mtds-seeall a { font-size: .85rem; font-weight: 700; color: var(--wp--preset--color--accent); text-decoration: none; }
.mtds-seeall a:hover { color: var(--mtds-accent-dark); }

/* ---------- Cartes d'article (grilles) ---------- */
.mtds-card .wp-block-post-featured-image {
  overflow: hidden; border-radius: 10px; aspect-ratio: 16 / 10; background: var(--wp--preset--color--surface); margin: 0;
}
.mtds-card .wp-block-post-featured-image img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease;
}
.mtds-card:hover .wp-block-post-featured-image img { transform: scale(1.05); }
.mtds-card .wp-block-post-title { font-size: 1.12rem; margin: .6rem 0 .35rem; line-height: 1.25; }
.mtds-card .wp-block-post-title a { text-decoration: none; transition: color .15s; }
.mtds-card:hover .wp-block-post-title a { color: var(--wp--preset--color--accent); }
.mtds-card .wp-block-post-terms { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--wp--preset--color--accent); margin-top: .7rem; }
.mtds-card .wp-block-post-terms a { text-decoration: none; }
.mtds-card .wp-block-post-date { font-size: .8rem; color: var(--wp--preset--color--muted); }

/* ---------- Hero / Une ---------- */
.mtds-hero-main .wp-block-post-featured-image { overflow: hidden; border-radius: 10px; aspect-ratio: 16 / 9; margin: 0; }
.mtds-hero-main .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mtds-hero-main:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.mtds-hero-main .wp-block-post-terms { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .72rem; color: var(--wp--preset--color--accent); margin-top: .8rem; }
.mtds-hero-main .wp-block-post-title { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin: .4rem 0 .5rem; }
.mtds-hero-main .wp-block-post-title a { text-decoration: none; }
.mtds-hero-main .wp-block-post-excerpt { color: var(--wp--preset--color--muted); font-size: 1.05rem; }
.mtds-hero-main .wp-block-post-date { font-size: .82rem; color: var(--wp--preset--color--muted); }

/* Brèves latérales : vignette 90px + texte, séparées d'un filet */
.mtds-hero-side .wp-block-post-template { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; }
.mtds-hero-item { display: flex; gap: .85rem; align-items: flex-start; padding: 1.05rem 0; border-bottom: 1px solid var(--wp--preset--color--border); }
.mtds-hero-side .wp-block-post-template > li:first-child .mtds-hero-item { padding-top: 0; }
.mtds-hero-side .wp-block-post-template > li:last-child .mtds-hero-item { border-bottom: 0; }
.mtds-hero-item .wp-block-post-featured-image { flex: none; width: 90px; height: 90px; border-radius: 8px; overflow: hidden; margin: 0; }
.mtds-hero-item .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.mtds-hero-item .wp-block-post-terms { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--wp--preset--color--accent); margin: 0 0 .2rem; }
.mtds-hero-item .wp-block-post-title { font-size: .98rem; line-height: 1.25; margin: 0; }
.mtds-hero-item .wp-block-post-title a { text-decoration: none; transition: color .15s; }
.mtds-hero-item:hover .wp-block-post-title a { color: var(--wp--preset--color--accent); }

/* ---------- « Les plus lus » (colonne latérale, liste numérotée) ---------- */
.mtds-trending {
  background: var(--wp--preset--color--surface);
  border-radius: 10px; padding: 1.4rem 1.5rem;
}
.mtds-trending > .wp-block-heading { font-size: 1.15rem; margin: 0 0 1rem; }
.mtds-trending .wp-block-query { margin: 0; }
.mtds-trending .wp-block-post-template {
  list-style: none; margin: 0; padding: 0; counter-reset: t;
  display: flex; flex-direction: column;
}
.mtds-trending .wp-block-post-template > li {
  counter-increment: t; display: grid; grid-template-columns: 32px 1fr;
  gap: .8rem; align-items: baseline;
  padding: .7rem 0; border-bottom: 1px dashed var(--wp--preset--color--border);
}
.mtds-trending .wp-block-post-template > li:first-child { padding-top: 0; }
.mtds-trending .wp-block-post-template > li:last-child { border-bottom: 0; padding-bottom: 0; }
.mtds-trending .wp-block-post-template > li::before {
  content: counter(t); font-weight: 900; font-size: 1.3rem;
  color: var(--wp--preset--color--accent); line-height: 1;
}
.mtds-trending .wp-block-post-title { font-size: .95rem; font-weight: 600; margin: 0; line-height: 1.3; }
.mtds-trending .wp-block-post-title a { text-decoration: none; }
.mtds-trending .wp-block-post-title a:hover { color: var(--wp--preset--color--accent); }

/* ---------- Bande newsletter ---------- */
.mtds-newsletter { background: var(--wp--preset--color--ink); color: #fff; border-radius: 10px; padding: 2.2rem; text-align: center; }
.mtds-newsletter h2 { color: #fff; font-size: 1.6rem; margin: 0 0 .4rem; }
.mtds-newsletter p { color: #b9bfc9; margin: 0 0 1.3rem; }
.mtds-newsletter form { display: flex; gap: .6rem; max-width: 480px; margin-inline: auto; }
.mtds-newsletter input { flex: 1; border: 0; border-radius: 8px; padding: .8rem 1rem; font-size: 1rem; }
.mtds-newsletter button { border: 0; border-radius: 8px; padding: .8rem 1.4rem; background: var(--wp--preset--color--accent); color: #fff; font-weight: 700; cursor: pointer; }
.mtds-newsletter button:hover { background: var(--mtds-accent-dark); }

/* ---------- Article ---------- */
.wp-block-post-content { font-size: 1.08rem; line-height: 1.8; }
.wp-block-post-content h2 { font-size: 1.6rem; margin-top: 2rem; }
.wp-block-post-content h3 { font-size: 1.25rem; margin-top: 1.5rem; }

/* ---------- Footer sombre (4 colonnes) ---------- */
.mtds-footer { background: var(--wp--preset--color--ink) !important; color: #aeb4bf; margin-top: 3rem; }
.mtds-footer .mtds-brand { font-size: 1.4rem; color: #fff; }
.mtds-footer .mtds-brand b { color: var(--wp--preset--color--accent); }
.mtds-footer h2, .mtds-footer h3 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; }
.mtds-footer a { color: #aeb4bf; text-decoration: none; }
.mtds-footer a:hover { color: #fff; }
.mtds-footer .wp-block-categories { list-style: none; padding: 0; margin: 0; }
.mtds-footer .wp-block-categories li { padding: .22rem 0; }
.mtds-footer .wp-block-categories a:hover,
.mtds-footer .wp-block-navigation-item__content:hover { color: #fff; }
.mtds-footer .mtds-footer-bottom { border-top: 1px solid #232831; margin-top: 2rem; padding-top: 1.4rem; font-size: .82rem; color: #80868f; text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .mtds-hero > .wp-block-columns { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .mtds-brand { font-size: 1.2rem; }
  .mtds-newsletter form { flex-direction: column; }
  .mtds-topbar .mtds-topbar-inner { font-size: .72rem; }
}