/*
Theme Name: La Table des Copains
Theme URI: https://latabledescopains.preprod-ptl.fr
Author: Agence PTL
Author URI: https://agence-ptl.fr
Description: Theme sur mesure de La Table des Copains, brasserie, bar et pizzeria a Besancon. Construit sur le design system du client : memes couleurs, memes polices et meme echelle que la carte imprimee. Journal editorial avec affichage en grille.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietaire, Agence PTL
Text Domain: latabledescopains
*/

/* Les jetons et les polices vivent dans assets/, produits par
   generer-assets.py depuis la charte. Ils sont charges avant cette feuille. */

/* =============================================================
   BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--f-texte);
  font-size: var(--t-xs);
  line-height: var(--lh-normal);
  color: var(--c-texte);
  background: var(--c-papier);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1, "liga" 1;
  margin: 0;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--c-brique); outline-offset: 3px; }
.tdc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tdc-saut {
  position: absolute; left: 50%; translate: -50% -120%;
  background: var(--c-creme); color: var(--c-noir); padding: .7rem 1.2rem;
  border-radius: 0 0 8px 8px; z-index: 200; font-weight: 700;
  transition: translate .2s var(--a-souple);
}
.tdc-saut:focus { translate: -50% 0; }

.tdc-wrap { width: 100%; max-width: var(--w-max); margin-inline: auto; padding-inline: var(--w-gout); }
.tdc-wrap--lecture { max-width: var(--w-lecture); }

/* =============================================================
   EN-TETE
   ============================================================= */
.tdc-entete {
  position: sticky; top: 0; z-index: 90;
  background: var(--c-noir); color: var(--c-texte-clair);
  border-bottom: 1px solid var(--c-filet-sombre);
}
.tdc-entete__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--w-6); min-height: 4.5rem;
}
.tdc-marque { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
.tdc-marque svg { width: 30px; height: 30px; }
.tdc-marque svg path { fill: var(--c-creme); }
.tdc-marque__nom {
  font-family: var(--f-display); font-size: .72rem; letter-spacing: .13em;
  text-transform: uppercase; line-height: 1.15; color: var(--c-papier);
}
@media (max-width: 420px) { .tdc-marque__nom { display: none; } }

.tdc-nav { display: flex; align-items: center; gap: clamp(.4rem, 2vw, 1.4rem); }
.tdc-nav a {
  text-decoration: none; font-size: .84rem; white-space: nowrap;
  color: rgba(247, 242, 234, .76); padding: .45rem .1rem;
  transition: color .2s ease;
}
.tdc-nav a:hover, .tdc-nav a:focus-visible,
.tdc-nav .current-menu-item > a { color: var(--c-papier); }
.tdc-nav__cta {
  background: var(--c-creme); color: var(--c-noir) !important;
  border-radius: 999px; padding: .6rem 1.1rem !important;
  font-weight: 700; font-size: .74rem !important; letter-spacing: .09em;
  text-transform: uppercase;
}

/* =============================================================
   BANDEAU DE SECTION
   ============================================================= */
.j-hero {
  background: var(--c-noir); color: var(--c-texte-clair);
  padding-block: clamp(3.5rem, 9vw, 7rem);
  position: relative; overflow: hidden;
}
.j-hero::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 120%;
  background: radial-gradient(ellipse at 50% 0%, rgba(210,181,141,.14), transparent 62%);
  pointer-events: none;
}
.j-hero__in { position: relative; }
.j-hero__sur {
  font-size: var(--t-xxs); letter-spacing: var(--ls-sur); text-transform: uppercase;
  color: var(--c-creme); font-weight: 700; display: block; margin-bottom: var(--w-4);
}
.j-hero__t {
  font-family: var(--f-display); font-size: var(--t-xxl);
  letter-spacing: .03em; text-transform: uppercase; line-height: 1;
  text-wrap: balance;
}
.j-hero__s {
  margin-top: var(--w-6); max-width: 54ch; color: var(--c-fumee-clair);
  font-size: var(--t-s); line-height: var(--lh-aere);
}

/* =============================================================
   FILTRES PAR THEMATIQUE
   ============================================================= */
.j-filtres {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding-block: var(--w-8) 0;
}
.j-filtre {
  text-decoration: none; font-size: .76rem; font-weight: 600;
  letter-spacing: .06em; padding: .55rem 1rem; border-radius: 999px;
  border: 1px solid var(--c-filet); color: var(--c-fumee);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.j-filtre:hover, .j-filtre:focus-visible { border-color: var(--c-noir); color: var(--c-texte); }
.j-filtre[aria-current="page"] {
  background: var(--c-noir); border-color: var(--c-noir); color: var(--c-papier);
}
.j-filtre__n { opacity: .55; margin-left: .35rem; font-variant-numeric: tabular-nums; }

/* =============================================================
   GRILLE D'ARTICLES
   ============================================================= */
.j-grille {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 7rem);
}
.j-grille > * { min-width: 0; }

.j-carte {
  display: flex; flex-direction: column;
  background: var(--c-papier-2);
  border: 1px solid transparent;
  border-radius: 4px; overflow: hidden;
  transition: transform .35s var(--a-souple), border-color .25s ease, box-shadow .35s var(--a-souple);
}
.j-carte:hover, .j-carte:focus-within {
  transform: translateY(-4px);
  border-color: var(--c-filet);
  box-shadow: 0 16px 36px rgba(16, 16, 16, .09);
}

/* Illustration : tant que les photos n'existent pas, chaque article porte
   le pictogramme de sa thematique sur un aplat de la marque. Ce n'est pas
   un pis-aller : une grille de pictos monoline tient mieux qu'une grille
   de photos de banque d'images. */
.j-carte__ill {
  aspect-ratio: 16 / 10; display: grid; place-items: center;
  background: var(--c-noir); position: relative; overflow: hidden;
}
.j-carte__ill::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 10%, rgba(210,181,141,.18), transparent 60%);
}
.j-carte__ill svg {
  width: 38%; max-width: 110px; height: auto; color: var(--c-creme);
  position: relative; z-index: 1;
  transition: scale .45s var(--a-rebond);
}
.j-carte:hover .j-carte__ill svg { scale: 1.07; }
.j-carte__ill img { width: 100%; height: 100%; object-fit: cover; }

.j-carte__corps { padding: var(--w-6); display: flex; flex-direction: column; flex: 1; gap: var(--w-3); }
.j-carte__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: var(--t-xxs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-brique); font-weight: 700;
}
.j-carte__meta time { color: var(--c-fumee); font-weight: 500; letter-spacing: .08em; }
.j-carte__t { font-family: var(--f-display); font-size: var(--t-l); line-height: 1.18; letter-spacing: .01em; }
.j-carte__t a { text-decoration: none; }
.j-carte__t a::after { content: ""; position: absolute; inset: 0; }
.j-carte { position: relative; }
.j-carte__r { color: var(--c-fumee); font-size: var(--t-xs); line-height: var(--lh-aere); }
.j-carte__lire {
  margin-top: auto; padding-top: var(--w-2);
  font-size: var(--t-xxs); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-texte);
  display: inline-flex; align-items: center; gap: .45rem;
}
.j-carte__lire span { transition: translate .3s var(--a-souple); }
.j-carte:hover .j-carte__lire span { translate: 4px 0; }

/* La vedette : premiere carte de la premiere page, en pleine largeur */
@media (min-width: 60rem) {
  .j-carte--vedette { grid-column: 1 / -1; flex-direction: row; }
  .j-carte--vedette .j-carte__ill { aspect-ratio: auto; flex: 0 0 46%; }
  .j-carte--vedette .j-carte__ill svg { width: 30%; max-width: 150px; }
  .j-carte--vedette .j-carte__corps { padding: clamp(2rem, 4vw, 3.2rem); justify-content: center; }
  .j-carte--vedette .j-carte__t { font-size: clamp(1.6rem, 3vw, 2.3rem); }
  .j-carte--vedette .j-carte__r { font-size: var(--t-s); }
}

/* =============================================================
   ARTICLE
   ============================================================= */
.j-art { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(4rem, 8vw, 7rem); }
.j-art__fil {
  font-size: var(--t-xxs); color: var(--c-fumee); margin-bottom: var(--w-6);
  letter-spacing: .06em;
}
.j-art__fil a { text-decoration: none; }
.j-art__fil a:hover { text-decoration: underline; }

.j-art__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem var(--w-4);
  font-size: var(--t-xxs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-fumee); margin-bottom: var(--w-4);
}
.j-art__meta a { color: var(--c-brique); font-weight: 700; text-decoration: none; }

.j-art__t {
  font-family: var(--f-display); font-size: clamp(1.9rem, 4.6vw, 3rem);
  line-height: 1.06; letter-spacing: .01em; text-wrap: balance;
}
.j-art__chapo {
  margin-top: var(--w-6); font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.65; color: var(--c-fumee);
  padding-left: var(--w-6); border-left: 3px solid var(--c-creme);
}

.j-art__corps { margin-top: clamp(2rem, 4vw, 3rem); }
.j-art__corps > * + * { margin-top: var(--w-6); }
.j-art__corps p { font-size: var(--t-s); line-height: var(--lh-aere); }
.j-art__corps h2 {
  font-family: var(--f-display); font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  line-height: 1.2; margin-top: clamp(2.4rem, 5vw, 3.4rem);
  padding-top: var(--w-6); border-top: 1px solid var(--c-filet);
  text-wrap: balance;
}
.j-art__corps h3 {
  font-family: var(--f-texte); font-weight: 700; font-size: var(--t-m);
  letter-spacing: .02em; margin-top: var(--w-8);
}
.j-art__corps ul, .j-art__corps ol { padding-left: 1.3rem; }
.j-art__corps li + li { margin-top: var(--w-2); }
.j-art__corps li { font-size: var(--t-s); line-height: var(--lh-aere); }
.j-art__corps a { color: var(--c-brique); text-underline-offset: .2em; }
.j-art__corps strong { font-weight: 700; }

.j-art__corps table {
  width: 100%; border-collapse: collapse; font-size: var(--t-xs);
}
.j-art__corps th, .j-art__corps td {
  text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--c-filet);
}
.j-art__corps th { font-weight: 700; text-transform: uppercase; font-size: var(--t-xxs); letter-spacing: .1em; }
.j-art__corps td:last-child, .j-art__corps th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.j-tableau { overflow-x: auto; }

.j-art__corps blockquote {
  padding: var(--w-6); background: var(--c-papier-2); border-left: 3px solid var(--c-brique);
  font-size: var(--t-s); line-height: var(--lh-aere);
}
.j-art__corps blockquote p + p { margin-top: var(--w-3); }

/* Mention sanitaire : obligatoire des qu'un contenu evoque une boisson
   alcoolisee (loi Evin, art. L.3323-4 du code de la sante publique). */
.j-evin {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: var(--w-4) var(--w-6);
  border: 1px solid var(--c-filet); border-radius: 3px;
  font-size: var(--t-xxs); color: var(--c-fumee); letter-spacing: .02em;
}

.j-art__pied {
  margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: var(--w-8);
  border-top: 2px solid var(--c-noir);
}

/* Encart de rappel : l'etablissement, au bas de chaque article */
.j-encart {
  background: var(--c-noir); color: var(--c-texte-clair);
  border-radius: 4px; padding: clamp(1.6rem, 4vw, 2.6rem);
  display: grid; gap: var(--w-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.j-encart__t {
  font-family: var(--f-display); font-size: var(--t-l); letter-spacing: .04em;
  text-transform: uppercase; grid-column: 1 / -1;
}
.j-encart dt {
  font-size: var(--t-xxs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-creme); margin-bottom: var(--w-2);
}
.j-encart dd { margin: 0; font-size: var(--t-xs); line-height: 1.7; color: rgba(247,242,234,.84); }
.j-encart a { color: inherit; }

/* Articles voisins */
.j-suite { padding-block: 0 clamp(4rem, 8vw, 7rem); }
.j-suite__t {
  font-family: var(--f-display); font-size: var(--t-l); letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: var(--w-8);
  padding-bottom: var(--w-3); border-bottom: 2px solid var(--c-noir);
}

/* =============================================================
   PAGINATION
   ============================================================= */
.j-pagination { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
                padding-bottom: clamp(4rem, 8vw, 7rem); }
.j-pagination .page-numbers {
  display: inline-grid; place-items: center; min-width: 2.6rem; height: 2.6rem;
  padding-inline: .7rem; border: 1px solid var(--c-filet); border-radius: 3px;
  text-decoration: none; font-size: var(--t-xs); font-weight: 600;
}
.j-pagination .page-numbers.current { background: var(--c-noir); color: var(--c-papier); border-color: var(--c-noir); }
.j-pagination a.page-numbers:hover { border-color: var(--c-noir); }

/* =============================================================
   PIED
   ============================================================= */
.tdc-pied {
  background: var(--c-noir); color: var(--c-texte-clair);
  padding-block: clamp(3rem, 7vw, 5rem) var(--w-8);
}
.tdc-pied__haut {
  display: grid; gap: var(--w-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  padding-bottom: var(--w-8); border-bottom: 1px solid var(--c-filet-sombre);
}
.tdc-pied__logo { width: min(260px, 70vw); }
.tdc-pied__logo svg path { fill: var(--c-creme); }
.tdc-pied__t {
  font-size: var(--t-xxs); letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-creme); margin-bottom: var(--w-4);
}
.tdc-pied li { font-size: var(--t-xs); line-height: 1.9; color: rgba(247,242,234,.8); }
.tdc-pied a { text-decoration: none; }
.tdc-pied a:hover { color: var(--c-papier); text-decoration: underline; }
.tdc-pied__bas {
  padding-top: var(--w-6); font-size: var(--t-xxs); color: var(--c-fumee-clair);
  display: flex; flex-wrap: wrap; gap: var(--w-2) var(--w-6); justify-content: space-between;
}

/* =============================================================
   PAGES SIMPLES / 404
   ============================================================= */
.tdc-page { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(4rem, 8vw, 7rem); }
.tdc-page h1 {
  font-family: var(--f-display); font-size: var(--t-xl);
  text-transform: uppercase; letter-spacing: .03em; line-height: 1.1;
}
.tdc-page > * + * { margin-top: var(--w-6); }
.tdc-vide { color: var(--c-fumee); font-size: var(--t-s); }

/* =============================================================
   APPARITION
   ============================================================= */
@media (prefers-reduced-motion: no-preference) {
  .j-anim { opacity: 0; translate: 0 18px; }
  .j-anim.est-vu {
    opacity: 1; translate: 0 0;
    transition: opacity .6s var(--a-souple) var(--d, 0ms),
                translate .6s var(--a-souple) var(--d, 0ms);
  }
}

@media print {
  .tdc-entete, .tdc-pied, .j-filtres, .j-suite, .j-pagination { display: none !important; }
  body { background: #fff; }
}