/*
Theme Name:   Vélo Dingo Child
Theme URI:    https://www.velodingo.fr/
Description:  Thème enfant Divi pour Vélo Dingo — PBN performant et 100% éditable dans Divi Builder. Direction artistique "Performance Technique" : cockpit GPS, fiche mécanique, encre nuit + vermillon.
Author:       Vélo Dingo
Template:     Divi
Version:      1.0.0
Text Domain:  vd-child
*/

/* =========================================================================
   1. TOKENS — Direction "Performance Technique"
   ========================================================================= */

:root {
  /* COULEURS */
  --c-bg:             #f4f5f7;
  --c-bg-alt:         #e8eaee;
  --c-bg-dark:        #0e1116;
  --c-ink:            #0e1116;
  --c-ink-soft:       #4a525c;
  --c-on-dark:        #f4f5f7;
  --c-on-dark-soft:   #a8b0bc;
  --c-primary:        #0e1116;
  --c-secondary:      #2d4a5a;
  --c-accent:         #c63b14;
  --c-accent-on-dark: #ff7a3d;
  --c-border:         #cdd1d8;
  --c-border-soft:    #e1e4ea;

  /* TYPOGRAPHIES */
  --ff-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --ff-body:    "Manrope", system-ui, -apple-system, sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, "Courier New", monospace;

  /* TAILLES */
  --fs-h1:      clamp(3rem, 6vw + 1rem, 6rem);
  --fs-h2:      clamp(2rem, 3vw + 1rem, 3rem);
  --fs-h3:      clamp(1.5rem, 2vw + 0.5rem, 2rem);
  --fs-h4:      clamp(1.25rem, 1.5vw + 0.25rem, 1.5rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.75rem;
  --fs-button:  0.875rem;

  /* INTERLIGNAGES */
  --lh-tight:  0.95;
  --lh-snug:   1.15;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  /* LETTER-SPACING */
  --ls-tighter: -0.03em;
  --ls-tight:   -0.015em;
  --ls-normal:  0;
  --ls-wide:    0.08em;
  --ls-wider:   0.14em;

  /* ESPACEMENTS */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --space-7: 4rem;
  --space-8: 6rem;

  /* LAYOUT */
  --container-max: 1240px;
  --radius:        2px;
  --radius-lg:     6px;
  --shadow-sm:     0 1px 3px rgba(14,17,22,0.08);
  --shadow-lg:     0 12px 40px rgba(14,17,22,0.15);
  --transition:    180ms ease;
  --vd-header-h:   72px;
}

/* =========================================================================
   2. BASE — Reset et typo globale
   ========================================================================= */

body {
  background-color: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  color: var(--c-ink);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  font-weight: 800;
  text-transform: uppercase;
}

p { margin-bottom: var(--space-4); }
a { color: var(--c-accent); transition: var(--transition); text-decoration: none; }
a:hover { color: var(--c-primary); }

/* =========================================================================
   3. OVERRIDES DIVI — Containers, typo, boutons, forms
   ========================================================================= */

.et_pb_row { max-width: var(--container-max) !important; }
.et_pb_section { padding-top: var(--space-7); padding-bottom: var(--space-7); }

body .et_pb_text,
body .et_pb_post_content,
body .et_pb_module {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--c-ink);
}

body .et_pb_module h1,
body .et_pb_module h2,
body .et_pb_module h3,
body .et_pb_module h4,
body .et_pb_module h5,
body .et_pb_module h6 {
  font-family: var(--ff-display);
  color: var(--c-ink);
  letter-spacing: var(--ls-tight);
  font-weight: 800;
  text-transform: uppercase;
}

/* Boutons Divi avec variantes */
body .et_pb_button,
body .et_pb_button:hover {
  font-family: var(--ff-body) !important;
  font-size: var(--fs-button) !important;
  font-weight: 700 !important;
  letter-spacing: var(--ls-wider) !important;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-5) !important;
  border-radius: var(--radius) !important;
  transition: var(--transition) !important;
  border-width: 2px !important;
}
body .et_pb_button::after { display: none !important; }

body .et_pb_button.btn-on-light {
  background-color: var(--c-ink) !important;
  color: var(--c-bg) !important;
  border-color: var(--c-ink) !important;
}
body .et_pb_button.btn-on-light:hover {
  background-color: transparent !important;
  color: var(--c-ink) !important;
}

body .et_pb_button.btn-accent {
  background-color: var(--c-accent) !important;
  color: var(--c-bg) !important;
  border-color: var(--c-accent) !important;
}
body .et_pb_button.btn-accent:hover {
  background-color: transparent !important;
  color: var(--c-accent) !important;
}

body .et_pb_button.btn-ghost-on-light {
  background-color: transparent !important;
  color: var(--c-ink) !important;
  border-color: var(--c-ink) !important;
}
body .et_pb_button.btn-ghost-on-light:hover {
  background-color: var(--c-ink) !important;
  color: var(--c-bg) !important;
}

body .et_pb_button.btn-on-dark {
  background-color: var(--c-accent-on-dark) !important;
  color: var(--c-bg-dark) !important;
  border-color: var(--c-accent-on-dark) !important;
}
body .et_pb_button.btn-on-dark:hover {
  background-color: transparent !important;
  color: var(--c-accent-on-dark) !important;
}

/* Formulaires Divi opaques */
body .et_pb_contact_field input,
body .et_pb_contact_field textarea,
body .et_pb_contact_field select {
  background-color: var(--c-bg) !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-ink) !important;
  font-family: var(--ff-body) !important;
  font-size: var(--fs-body) !important;
  padding: var(--space-3) var(--space-4) !important;
  border-radius: var(--radius) !important;
}

body .et_pb_contact_field input:focus,
body .et_pb_contact_field textarea:focus,
body .et_pb_contact_field select:focus {
  border-color: var(--c-accent) !important;
  outline: none;
}

/* Menu Divi propre — typo Manrope en uppercase */
body .et_pb_menu .et_pb_menu__menu nav li a,
body .et_pb_menu nav li a,
body .et_pb_fullwidth_menu nav li a {
  font-family: var(--ff-body) !important;
  font-weight: 600 !important;
  letter-spacing: var(--ls-wide) !important;
  font-size: var(--fs-small) !important;
  text-transform: uppercase;
  color: var(--c-ink);
}

body .et_pb_menu nav li a:hover {
  color: var(--c-accent) !important;
  opacity: 1 !important;
}

/* Post content : typo body lisible */
body .et_pb_post_content p,
body .et_pb_post_content li {
  font-family: var(--ff-body);
  font-size: 1.125rem;
  line-height: var(--lh-loose);
  color: var(--c-ink);
}

body .et_pb_post_content h2,
body .et_pb_post_content h3 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-4);
}

body .et_pb_post_content blockquote {
  border-left: 3px solid var(--c-accent);
  padding-left: var(--space-5);
  margin: var(--space-6) 0;
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
}

body .et_pb_post_content code {
  font-family: var(--ff-mono);
  background-color: var(--c-bg-alt);
  padding: 0.15em 0.4em;
  border-radius: var(--radius);
  font-size: 0.95em;
  color: var(--c-secondary);
}

/* Blog module — grille d'articles propre */
body .et_pb_blog_grid .et_pb_post {
  background-color: var(--c-bg);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5) !important;
  transition: var(--transition);
}
body .et_pb_blog_grid .et_pb_post:hover {
  border-color: var(--c-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

body .et_pb_blog_grid .et_pb_post h2.entry-title,
body .et_pb_post h2.entry-title a {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.5rem !important;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--c-ink) !important;
}

body .et_pb_post .post-meta,
body .et_pb_post .post-meta a {
  font-family: var(--ff-mono) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--c-ink-soft) !important;
}

/* Suppression de la marge mystère du footer Divi */
#main-content .container { padding-bottom: 0 !important; }
.et_pb_section:last-of-type { padding-bottom: var(--space-7) !important; }

/* =========================================================================
   4. UTILITAIRES — classes thématiques Vélo Dingo
   ========================================================================= */

.vd-eyebrow {
  font-family: var(--ff-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-secondary);
  margin-bottom: var(--space-4);
  display: inline-block;
}

.vd-eyebrow-accent {
  color: var(--c-accent);
}

.vd-section-dark {
  background-color: var(--c-bg-dark);
  color: var(--c-on-dark);
}
.vd-section-dark h1,
.vd-section-dark h2,
.vd-section-dark h3,
.vd-section-dark h4,
.vd-section-dark p,
.vd-section-dark .et_pb_module h1,
.vd-section-dark .et_pb_module h2,
.vd-section-dark .et_pb_module h3 {
  color: var(--c-on-dark) !important;
}

.vd-section-alt {
  background-color: var(--c-bg-alt);
}

/* Card cockpit / data box */
.vd-cockpit-card {
  background-color: var(--c-bg-dark);
  color: var(--c-on-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  font-family: var(--ff-mono);
}

/* Pipe technique pour les eyebrows (style "// ...") */
.vd-pipe {
  font-family: var(--ff-mono) !important;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-size: var(--fs-eyebrow);
  color: var(--c-secondary);
}
.vd-pipe::before {
  content: "// ";
  color: var(--c-accent);
}

/* Tag technique (chip avec bordure) */
.vd-chip {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-ink-soft);
  margin-right: var(--space-2);
}

/* Logo VD (utilisable inline dans header) */
.vd-logo-text {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: 1.75rem;
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  line-height: 1;
  color: var(--c-ink);
}
.vd-logo-text .dot {
  color: var(--c-accent);
}