/*
Theme Name: Sud Campers
Theme URI: https://sudcampers.com
Author: Sud Campers
Description: Thème sur mesure Sud Campers — aménagement de fourgons L3/L4 et sièges homologués. Reprend le design system maison (crème/carbone/terracotta, Fraunces + Outfit).
Version: 2.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: proprietary
Text Domain: sudcampers
*/

/* Le design system principal est chargé depuis /assets/css/main.css (racine du site).
   Ce fichier ne contient que les surcharges spécifiques à WordPress et WooCommerce. */

/* ---------- structure WP ---------- */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); word-wrap: normal;
}

/* ---------- WooCommerce : habillage aux couleurs du site ---------- */
.woocommerce-page main { padding-top: calc(var(--header-h) + 2.5rem); min-height: 70vh; }
.wc-wrap { width: min(1080px, 92vw); margin-inline: auto; padding-bottom: 4rem; }
.wc-wrap h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1.6rem; }

.woocommerce .button, .woocommerce button.button, .woocommerce a.button,
.woocommerce #respond input#submit, .wc-block-components-button {
  background: var(--terra) !important; color: #fff !important;
  border-radius: 999px !important; padding: .9em 1.8em !important;
  font-weight: 600 !important; border: none !important;
  transition: background .25s, transform .3s var(--ease) !important;
}
.woocommerce .button:hover, .woocommerce a.button:hover { background: var(--terra-dark) !important; transform: translateY(-1px); }

.woocommerce table.shop_table {
  border: 1px solid var(--line) !important; border-radius: var(--radius-sm);
  border-collapse: separate !important; overflow: hidden;
}
.woocommerce table.shop_table th { background: var(--cream-2); }

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  padding: .8em 1em; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font: inherit;
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus {
  outline: none; border-color: var(--terra); box-shadow: 0 0 0 4px rgba(217,107,47,.15);
}
.woocommerce-message, .woocommerce-info {
  border-top-color: var(--terra) !important; border-radius: var(--radius-sm);
  background: var(--cream-2) !important;
}
.woocommerce-error { border-radius: var(--radius-sm); }

/* ---------- galerie réalisations : état vide admin ---------- */
.gallery-empty {
  padding: 3rem; text-align: center; color: var(--txt-soft);
  border: 1.5px dashed var(--line); border-radius: var(--radius);
}

/* ---------- landings SEO ---------- */
.landing-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .5rem 1.5rem; }
.landing-links a { color: var(--txt-soft); font-size: .95rem; transition: color .2s; position: relative; padding-left: 1.1em; display: inline-block; }
.landing-links a::before { content: "→"; position: absolute; left: 0; color: var(--terra); }
.landing-links a:hover { color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose table th, .prose table td { padding: .7em .9em; border: 1px solid var(--line); text-align: left; }
.prose table th { background: var(--cream-2); font-weight: 600; }
.prose .prose-note { border-left: 3px solid var(--terra); background: var(--cream-2); padding: 1em 1.2em; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .95rem; }
.prose .faq { margin-top: .5rem; }

/* ---------- accueil : lisibilité du hero ---------- */
/* La photo d'intérieur est claire et détaillée : on assombrit nettement
   le fond et on resserre le titre pour garder tout au-dessus de la ligne
   de flottaison. */
body.home .hero-media img { filter: brightness(.68) saturate(.92); }
body.home .hero::after {
  background: linear-gradient(180deg, rgba(25,22,17,.55) 0%, rgba(25,22,17,.38) 45%, rgba(25,22,17,.85) 100%);
}
body.home .hero h1 { font-size: clamp(2.7rem, 6.6vw, 5.4rem); max-width: 14ch; text-shadow: 0 2px 24px rgba(25,22,17,.45); }
body.home .hero .lead { max-width: 52ch; text-shadow: 0 1px 12px rgba(25,22,17,.5); }