/*
Theme Name:   HorizonGuide Child
Theme URI:    https://horizonguide.fr
Description:  Thème enfant de Kadence pour HorizonGuide — portail lifestyle & comparateur camping-car. Design éditorial inspiré des magazines de voyage, typographie Cormorant Garamond + DM Sans, palette Ink/Rust/Cream/Gold.
Author:       HorizonGuide
Author URI:   https://horizonguide.fr
Template:     kadence
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  horizonguide-child
*/

/* =========================================================================
   HORIZONGUIDE — DESIGN TOKENS
   Variables globales accessibles partout dans le site.
   ========================================================================= */

:root {
  /* ---- PALETTE ---- */
  --hg-ink:        #1C1A18;   /* Titres, nav, texte principal */
  --hg-ink-80:     rgba(28, 26, 24, 0.80);
  --hg-ink-60:     rgba(28, 26, 24, 0.60);
  --hg-ink-40:     rgba(28, 26, 24, 0.40);
  --hg-ink-20:     rgba(28, 26, 24, 0.20);
  --hg-ink-10:     rgba(28, 26, 24, 0.10);
  --hg-ink-05:     rgba(28, 26, 24, 0.05);

  --hg-rust:       #B85C2C;   /* Accents, CTA, liens hover */
  --hg-rust-dark:  #9A4A22;   /* Hover CTA */
  --hg-rust-light: #D67A4C;   /* Variantes claires */

  --hg-cream:      #F7F2EB;   /* Fonds clairs, cartes */
  --hg-cream-dark: #EDE5D8;   /* Variantes, hover zones claires */
  --hg-cream-50:   rgba(247, 242, 235, 0.50);

  --hg-gold:       #C9A84C;   /* Mise en avant, badges, icônes premium */
  --hg-gold-dark:  #A88A38;

  --hg-white:      #FFFFFF;
  --hg-black:      #000000;

  /* ---- TYPOGRAPHIE ---- */
  --hg-font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --hg-font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Échelle typographique (fluid) */
  --hg-text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);    /* 12-13px */
  --hg-text-sm:   clamp(0.875rem, 0.85rem + 0.125vw, 0.9375rem);  /* 14-15px */
  --hg-text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);       /* 16-17px */
  --hg-text-lg:   clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);      /* 18-20px */
  --hg-text-xl:   clamp(1.375rem, 1.3rem + 0.4vw, 1.625rem);      /* 22-26px */
  --hg-text-2xl:  clamp(1.75rem, 1.6rem + 0.75vw, 2.25rem);       /* 28-36px */
  --hg-text-3xl:  clamp(2.25rem, 2rem + 1.25vw, 3rem);            /* 36-48px */
  --hg-text-4xl:  clamp(2.75rem, 2.3rem + 2.25vw, 4.25rem);       /* 44-68px */
  --hg-text-5xl:  clamp(3.5rem, 2.8rem + 3.5vw, 6rem);            /* 56-96px */
  --hg-text-hero: clamp(4rem, 3rem + 5vw, 8rem);                  /* 64-128px */

  /* Line heights */
  --hg-lh-tight:   1.05;
  --hg-lh-snug:    1.2;
  --hg-lh-normal:  1.5;
  --hg-lh-relaxed: 1.7;

  /* Letter spacing */
  --hg-ls-tighter: -0.03em;
  --hg-ls-tight:   -0.015em;
  --hg-ls-normal:  0;
  --hg-ls-wide:    0.05em;
  --hg-ls-widest:  0.18em;  /* Petits caps / eyebrows */

  /* ---- ESPACEMENTS ---- */
  --hg-space-1:  0.25rem;   /* 4 */
  --hg-space-2:  0.5rem;    /* 8 */
  --hg-space-3:  0.75rem;   /* 12 */
  --hg-space-4:  1rem;      /* 16 */
  --hg-space-5:  1.5rem;    /* 24 */
  --hg-space-6:  2rem;      /* 32 */
  --hg-space-7:  2.5rem;    /* 40 */
  --hg-space-8:  3rem;      /* 48 */
  --hg-space-9:  4rem;      /* 64 */
  --hg-space-10: 6rem;      /* 96 */
  --hg-space-11: 8rem;      /* 128 */
  --hg-space-12: 10rem;     /* 160 */

  /* ---- LAYOUT ---- */
  --hg-container: 1320px;
  --hg-container-narrow: 760px;   /* Articles */
  --hg-container-wide: 1600px;    /* Hero, grandes images */
  --hg-gutter: clamp(1.25rem, 3vw, 2.5rem);

  /* ---- TRANSITIONS ---- */
  --hg-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --hg-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --hg-duration-fast:   180ms;
  --hg-duration-normal: 320ms;
  --hg-duration-slow:   640ms;

  /* ---- BORDURES & RAYONS ---- */
  --hg-radius-sm:   2px;
  --hg-radius-md:   4px;
  --hg-radius-lg:   8px;
  --hg-radius-full: 999px;

  /* ---- OMBRES ---- */
  --hg-shadow-sm:  0 1px 2px rgba(28, 26, 24, 0.06);
  --hg-shadow-md:  0 4px 12px rgba(28, 26, 24, 0.08);
  --hg-shadow-lg:  0 12px 32px rgba(28, 26, 24, 0.12);
  --hg-shadow-xl:  0 24px 64px rgba(28, 26, 24, 0.16);

  /* ---- Z-INDEX ---- */
  --hg-z-base:    1;
  --hg-z-dropdown: 100;
  --hg-z-sticky:  500;
  --hg-z-header:  1000;
  --hg-z-modal:   9000;
  --hg-z-toast:   9500;
}

/* =========================================================================
   RESET & BASE
   ========================================================================= */

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--hg-font-body);
  font-size: var(--hg-text-base);
  line-height: var(--hg-lh-relaxed);
  color: var(--hg-ink);
  background-color: var(--hg-cream);
  font-feature-settings: 'ss01', 'cv11';  /* DM Sans variantes */
}

/* Les fichiers CSS modulaires sont chargés via functions.php
   (header.css, footer.css, templates.css, homepage.css, etc.)
   Ce fichier contient uniquement les variables et le reset global. */

/* =========================================================================
   TYPOGRAPHIE GLOBALE
   ========================================================================= */

h1, h2, h3, h4, h5, h6,
.entry-title, .widget-title {
  font-family: var(--hg-font-display);
  font-weight: 500;
  line-height: var(--hg-lh-tight);
  letter-spacing: var(--hg-ls-tight);
  color: var(--hg-ink);
}

h1 { font-size: var(--hg-text-4xl); }
h2 { font-size: var(--hg-text-3xl); }
h3 { font-size: var(--hg-text-2xl); }
h4 { font-size: var(--hg-text-xl); }
h5 { font-size: var(--hg-text-lg); }
h6 { font-size: var(--hg-text-base); letter-spacing: var(--hg-ls-widest); text-transform: uppercase; font-family: var(--hg-font-body); font-weight: 600; }

/* Emphase italique = signature éditoriale */
em, .hg-italic, h1 em, h2 em, h3 em {
  font-family: var(--hg-font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--hg-rust);
}

p { margin-bottom: var(--hg-space-5); }

a {
  color: var(--hg-ink);
  text-decoration: none;
  transition: color var(--hg-duration-fast) var(--hg-ease-out);
}

a:hover { color: var(--hg-rust); }

/* Eyebrow / suréclaration (DM Sans majuscule spacé) */
.hg-eyebrow {
  font-family: var(--hg-font-body);
  font-size: var(--hg-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--hg-ls-widest);
  color: var(--hg-rust);
  display: inline-block;
  margin-bottom: var(--hg-space-3);
}

/* =========================================================================
   COMPOSANTS RÉUTILISABLES
   ========================================================================= */

/* --- Container --- */
.hg-container {
  width: 100%;
  max-width: var(--hg-container);
  margin-inline: auto;
  padding-inline: var(--hg-gutter);
}
.hg-container--narrow { max-width: var(--hg-container-narrow); }
.hg-container--wide   { max-width: var(--hg-container-wide); }

/* --- Boutons --- */
.hg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hg-space-2);
  padding: var(--hg-space-4) var(--hg-space-6);
  font-family: var(--hg-font-body);
  font-size: var(--hg-text-sm);
  font-weight: 500;
  letter-spacing: var(--hg-ls-wide);
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--hg-radius-sm);
  transition: all var(--hg-duration-normal) var(--hg-ease-out);
  text-decoration: none;
  line-height: 1;
}

.hg-btn--primary {
  background: var(--hg-rust);
  color: var(--hg-white);
}
.hg-btn--primary:hover {
  background: var(--hg-rust-dark);
  color: var(--hg-white);
  transform: translateY(-2px);
  box-shadow: var(--hg-shadow-md);
}

.hg-btn--ghost {
  background: transparent;
  color: var(--hg-ink);
  border-color: var(--hg-ink);
}
.hg-btn--ghost:hover {
  background: var(--hg-ink);
  color: var(--hg-cream);
}

.hg-btn--gold {
  background: var(--hg-gold);
  color: var(--hg-ink);
}
.hg-btn--gold:hover {
  background: var(--hg-gold-dark);
  color: var(--hg-ink);
}

/* Lien-flèche éditorial */
.hg-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--hg-space-3);
  font-family: var(--hg-font-body);
  font-size: var(--hg-text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--hg-ls-wide);
  color: var(--hg-ink);
  border-bottom: 1px solid var(--hg-ink);
  padding-bottom: var(--hg-space-2);
  transition: all var(--hg-duration-fast) var(--hg-ease-out);
}
.hg-link-arrow::after {
  content: "→";
  transition: transform var(--hg-duration-fast) var(--hg-ease-out);
}
.hg-link-arrow:hover { color: var(--hg-rust); border-color: var(--hg-rust); }
.hg-link-arrow:hover::after { transform: translateX(4px); }

/* --- Cartes article --- */
.hg-card {
  background: var(--hg-white);
  display: flex;
  flex-direction: column;
  transition: transform var(--hg-duration-normal) var(--hg-ease-out);
}
.hg-card:hover { transform: translateY(-4px); }
.hg-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--hg-space-4);
}
.hg-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--hg-duration-slow) var(--hg-ease-out);
}
.hg-card:hover .hg-card__media img { transform: scale(1.05); }
.hg-card__category {
  position: absolute;
  top: var(--hg-space-4);
  left: var(--hg-space-4);
  font-size: var(--hg-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--hg-ls-widest);
  background: var(--hg-cream);
  color: var(--hg-ink);
  padding: var(--hg-space-2) var(--hg-space-3);
}
.hg-card__title {
  font-family: var(--hg-font-display);
  font-size: var(--hg-text-xl);
  font-weight: 500;
  line-height: var(--hg-lh-snug);
  margin-bottom: var(--hg-space-3);
}
.hg-card__excerpt {
  font-size: var(--hg-text-sm);
  color: var(--hg-ink-60);
  line-height: var(--hg-lh-normal);
}
.hg-card__meta {
  display: flex;
  gap: var(--hg-space-4);
  font-size: var(--hg-text-xs);
  color: var(--hg-ink-60);
  text-transform: uppercase;
  letter-spacing: var(--hg-ls-wide);
  margin-top: var(--hg-space-4);
  padding-top: var(--hg-space-4);
  border-top: 1px solid var(--hg-ink-10);
}

/* --- Séparateur éditorial --- */
.hg-divider {
  display: flex;
  align-items: center;
  gap: var(--hg-space-4);
  margin: var(--hg-space-8) 0;
}
.hg-divider::before,
.hg-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hg-ink-20);
}
.hg-divider__mark {
  font-family: var(--hg-font-display);
  font-style: italic;
  color: var(--hg-gold);
  font-size: var(--hg-text-xl);
}

/* --- Utilitaires --- */
.hg-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Surcharges Kadence pour harmoniser */
.site-main, .content-container { background: var(--hg-cream); }
.site-container { max-width: var(--hg-container); }

/* Accessibilité : focus visible */
*:focus-visible {
  outline: 2px solid var(--hg-rust);
  outline-offset: 3px;
}

/* Préférences de mouvement réduites */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}