/*
Theme Name: Objets Golf
Theme URI: https://objets-golf.com
Author: Omnipub
Author URI: https://www.omnipub.net
Description: Thème sur-mesure pour objets-golf.com, spécialiste des objets publicitaires golf. Une sélection proposée par Omnipub.
Version: 1.0
Requires PHP: 7.4
Text Domain: objets-golf
*/

/* ==========================================================================
   DESIGN TOKENS
   Direction : le carton de score de golf. Papier crème, encre verte fairway,
   filets rouge drapeau, colonnes façon scorecard, typo gravée façon plaque
   de clubhouse. Rien de générique "startup SaaS".
   ========================================================================== */

:root {
  /* Couleurs */
  --ink: #1C231D;
  --fairway: #1F3D2B;
  --fairway-deep: #14291C;
  --turf: #4A7856;
  --scorecard: #F3EEE1;
  --scorecard-line: #E4DBC3;
  --sand: #D8C9A3;
  --flag: #B3382C;
  --flag-deep: #8C2B22;
  --paper: #FBF9F3;

  /* Typo */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Échelle */
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
  --step-3: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  --step-4: clamp(2.75rem, 2.1rem + 3vw, 4.5rem);

  --radius: 4px;
  --max-w: 1180px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--fairway); text-decoration: none; }
a:hover { color: var(--flag); }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--flag);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 0.5em;
  color: var(--fairway-deep);
}

h1 { font-size: var(--step-4); font-weight: 700; }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 1.2em; }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--turf);
  display: inline-block;
  margin-bottom: 0.75em;
}

/* ==========================================================================
   SIGNATURE : la ligne "scorecard"
   Un filet fin avec des repères en pointillé, comme les colonnes de trous
   sur une carte de score. Utilisé entre les sections plutôt qu'un simple
   espace vide ou une numérotation générique 01/02/03.
   ========================================================================== */

.scorecard-rule {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto;
  max-width: var(--max-w);
  padding: 0 24px;
}

.scorecard-rule::before,
.scorecard-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    var(--sand) 0,
    var(--sand) 4px,
    transparent 4px,
    transparent 10px
  );
}

.scorecard-rule span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--turf);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
  background: var(--fairway);
  color: var(--scorecard);
  border-bottom: 3px solid var(--flag);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
  gap: 24px;
}

.site-branding {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.site-branding a { color: var(--scorecard); }

.site-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.site-tagline {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sand);
  margin-top: 4px;
}

.primary-nav ul {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
}

.primary-nav a {
  color: var(--scorecard);
  font-size: 0.92rem;
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}

.primary-nav a:hover {
  color: #fff;
  border-bottom-color: var(--flag);
}

.header-cta {
  display: inline-block;
  background: var(--flag);
  color: #fff !important;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
}

.header-cta:hover { background: var(--flag-deep); }

.menu-toggle { display: none; }

/* ==========================================================================
   HERO — traité comme l'en-tête d'une carte de score
   ========================================================================== */

.hero {
  background: var(--fairway-deep);
  color: var(--scorecard);
  padding: 72px 0 56px;
  position: relative;
}

.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.hero h1 {
  color: var(--paper);
  margin-bottom: 0.3em;
}

.hero h1 em {
  font-style: normal;
  color: var(--sand);
}

.hero-lede {
  font-size: 1.15rem;
  color: var(--scorecard);
  max-width: 46ch;
  opacity: 0.92;
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 13px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn-primary { background: var(--flag); color: #fff; }
.btn-primary:hover { background: var(--flag-deep); color: #fff; transform: translateY(-1px); }

.btn-ghost { border-color: var(--sand); color: var(--paper); background: transparent; }
.btn-ghost:hover { border-color: var(--paper); color: #fff; }

/* Carte "scorecard" dans le hero */
.hero-card {
  background: var(--scorecard);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

.hero-card-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--turf);
  border-bottom: 1px solid var(--scorecard-line);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}

.hero-stat-num {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--fairway-deep);
  display: block;
}

.hero-stat-label {
  font-size: 0.78rem;
  color: var(--ink);
  opacity: 0.75;
}

/* ==========================================================================
   UNIVERS / CATÉGORIES
   ========================================================================== */

.section { padding: 64px 0; }
.section-cream { background: var(--scorecard); }

.section-head {
  max-width: 62ch;
  margin-bottom: 40px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.category-card {
  background: var(--paper);
  border: 1px solid var(--scorecard-line);
  border-radius: var(--radius);
  padding: 26px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.category-card:hover {
  border-color: var(--turf);
  transform: translateY(-3px);
}

.category-card .eyebrow { margin-bottom: 0.4em; }

.category-card h3 { margin-bottom: 0.35em; }

.category-card p {
  font-size: 0.92rem;
  opacity: 0.85;
  margin-bottom: 0.8em;
}

.category-card a.card-link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--flag);
  font-weight: 600;
}

/* ==========================================================================
   POURQUOI OMNIPUB — bandeau fournisseur
   ========================================================================== */

.trust-band {
  background: var(--fairway);
  color: var(--scorecard);
  padding: 48px 0;
}

.trust-band .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.trust-band h2 { color: var(--paper); }

.trust-band p { color: var(--scorecard); opacity: 0.9; }

.trust-band .btn-primary { margin-top: 6px; }

/* ==========================================================================
   GUIDES / ARTICLES PILIERS
   ========================================================================== */

.guide-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.guide-card {
  border: 1px solid var(--scorecard-line);
  border-radius: var(--radius);
  padding: 24px;
  background: var(--paper);
}

.guide-card .eyebrow { color: var(--flag); }

/* Contenu type page/guide */
.entry-content {
  max-width: 74ch;
  margin: 0 auto;
}

.entry-content h2 { margin-top: 1.4em; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content blockquote {
  border-left: 3px solid var(--flag);
  padding-left: 1.2em;
  margin-left: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--fairway-deep);
}

.page-hero {
  background: var(--scorecard);
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--scorecard-line);
}

.page-hero .eyebrow { color: var(--flag); }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  background: var(--fairway-deep);
  color: var(--sand);
  padding: 56px 0 28px;
  margin-top: 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-grid h4 {
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1em;
}

.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 0.6em; }
.footer-grid a { color: var(--sand); font-size: 0.92rem; }
.footer-grid a:hover { color: #fff; }

.footer-brand p { color: var(--sand); opacity: 0.85; font-size: 0.92rem; max-width: 40ch; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 20px;
  font-size: 0.8rem;
  color: rgba(216,201,163,0.7);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 880px) {
  .primary-nav { display: none; }
  .menu-toggle {
    display: inline-flex;
    background: transparent;
    border: 1px solid var(--sand);
    color: var(--scorecard);
    border-radius: var(--radius);
    padding: 8px 12px;
  }
  .hero .container { grid-template-columns: 1fr; }
  .trust-band .container { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .guide-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}