/*
Theme Name: Terroir & Tech
Description: Portfolio d'Adrien — électronique, ruches et vignes.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: terroir-tech
*/

:root { --tt-radius: 18px; --tt-gap: clamp(20px, 3vw, 32px); }

body { -webkit-font-smoothing: antialiased; }
img { height: auto; }
mark.tt-accent { background: none; color: var(--wp--preset--color--vigne); }

/* ---------- En-tête ---------- */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.tt-header { padding-block: 22px; background: color-mix(in srgb, var(--wp--preset--color--creme) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; }
.tt-header .wp-block-site-title a { text-decoration: none; color: var(--wp--preset--color--encre); }
.tt-header .wp-block-navigation a { text-decoration: none; padding: 10px 12px; border-radius: 999px; }
.tt-header .wp-block-navigation a:hover { background: var(--wp--preset--color--sable); }
.tt-header .tt-nav-cta a { background: var(--wp--preset--color--encre); color: var(--wp--preset--color--creme) !important; padding-inline: 18px; }
.tt-header .tt-nav-cta a:hover { background: var(--wp--preset--color--vigne); }

/* ---------- Commun ---------- */
.tt-section { padding-block: clamp(64px, 9vw, 112px); }
.tt-eyebrow { font-size: 14px !important; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--miel); margin-bottom: 6px !important; }
.tt-muted { color: var(--wp--preset--color--gris); }
.tt-round img, .tt-round { border-radius: var(--tt-radius); }
.wp-block-image.tt-round img { width: 100%; object-fit: cover; }
.tt-link a, a.tt-link { font-weight: 600; text-decoration: none; }
.tt-link a:hover { text-decoration: underline; }

/* ---------- Accueil : hero ---------- */
.tt-hero { padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px); }
.tt-hero h1 { font-size: clamp(44px, 7.5vw, 96px) !important; line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; margin-bottom: 36px; }
.tt-hero__row { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; }
.tt-hero__row > p { max-width: 580px; font-size: 19px; margin: 0; }
.tt-hero__img img { width: 100%; aspect-ratio: 21 / 8; min-height: 240px; object-fit: cover; border-radius: 22px; }

/* ---------- Projets ---------- */
.tt-feature { gap: clamp(28px, 5vw, 56px) !important; align-items: center !important; margin-block: 56px !important; }
.tt-feature .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--tt-radius); }
.tt-feature h3 { font-size: clamp(30px, 3.4vw, 40px) !important; margin-block: 6px 12px; }
.tt-feature--reverse { flex-direction: row-reverse; }
.tt-tags { font-size: 14px; color: var(--wp--preset--color--gris); margin: 0 !important; }

.tt-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--tt-gap); padding-top: 32px; border-top: 1px solid var(--wp--preset--color--ligne); }
.tt-grid > * { margin: 0 !important; }
.tt-card { display: flex; flex-direction: column; gap: 10px; }
.tt-card .wp-block-image, .tt-card .wp-block-image a { display: block; margin: 0; }
.tt-card .wp-block-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; transition: transform .3s ease; }
.tt-card .wp-block-image a:hover img { transform: scale(1.02); }
.tt-card h3 { font-size: 23px !important; margin: 6px 0 0; }
.tt-card h3 a { text-decoration: none; color: inherit; }
.tt-card h3 a:hover { color: var(--wp--preset--color--vigne); }
.tt-card p { margin: 0; font-size: 15px; color: var(--wp--preset--color--gris); }
.tt-tile { aspect-ratio: 3 / 2; border-radius: 14px; background: var(--wp--preset--color--sable); display: flex; align-items: flex-end; padding: 20px !important; margin: 0 !important; font-family: var(--wp--preset--font-family--fraunces); font-size: 30px !important; line-height: 1.1; color: var(--wp--preset--color--vigne); }
.tt-tile--miel { background: var(--wp--preset--color--miel-clair); color: var(--wp--preset--color--miel); }

/* ---------- Atelier ---------- */
.tt-atelier { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 32px !important; }
.tt-atelier > * { margin: 0 !important; }
.tt-atelier img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; }
.tt-atelier figcaption { font-size: 15px; color: var(--wp--preset--color--gris); text-align: left; margin-top: 8px; }

/* ---------- Passions ---------- */
.tt-passions { background: var(--wp--preset--color--vigne); color: var(--wp--preset--color--creme); }
.tt-passions .tt-eyebrow { color: var(--wp--preset--color--miel-clair); }
.tt-passions h2, .tt-passions h3 { color: var(--wp--preset--color--creme); }
.tt-passions p { color: var(--wp--preset--color--vigne-clair); }
.tt-passions .wp-block-columns { gap: clamp(28px, 5vw, 56px) !important; margin-top: 40px; }
.tt-passions .wp-block-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; }
.tt-passions h3 { font-size: 28px !important; margin-block: 18px 8px; }
.tt-passions a { color: var(--wp--preset--color--miel-clair); }

/* ---------- À propos ---------- */
.tt-about { gap: clamp(28px, 5vw, 64px) !important; align-items: flex-start !important; }
.tt-portrait img { width: 100%; max-width: 400px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 200px 200px 18px 18px; }
.tt-lead { font-family: var(--wp--preset--font-family--fraunces); font-size: clamp(24px, 2.6vw, 30px) !important; line-height: 1.35; }
.tt-chips { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 24px !important; }
.tt-chips li { padding: 7px 14px; border: 1px solid #CFC4AD; border-radius: 999px; font-size: 15px; margin: 0; }

/* ---------- Contact / pied de page ---------- */
.tt-cta { border-top: 1px solid var(--wp--preset--color--ligne); padding-block: clamp(64px, 8vw, 96px) 32px; }
.tt-cta h2 { font-size: clamp(34px, 5vw, 60px) !important; text-wrap: balance; padding-right: min(30%, 380px); margin-bottom: 28px; }
.tt-footer { padding-block: 28px 40px; font-size: 14px; color: var(--wp--preset--color--gris); }
.tt-footer a { color: inherit; }

/* ---------- Boutons ---------- */
.wp-block-button.is-style-outline .wp-block-button__link { border: 1.5px solid currentColor; background: transparent; color: var(--wp--preset--color--encre); }
.wp-element-button { transition: background-color .2s ease; }

/* ---------- Pages intérieures (contenu Elementor existant) ---------- */
.tt-page-head { padding-block: clamp(48px, 7vw, 88px) 40px; position: relative; z-index: 2; }
.tt-page-body { position: relative; z-index: 1; }
.tt-page-body .elementor-widget-image img { max-height: 70vh; width: auto; object-fit: contain; }
.tt-page-head h1 { font-size: clamp(40px, 6vw, 72px) !important; letter-spacing: -.02em; }
.tt-page-body { padding-bottom: 96px; }
.tt-page-body .elementor-heading-title { font-family: var(--wp--preset--font-family--fraunces) !important; color: var(--wp--preset--color--encre) !important; }
.tt-page-body .elementor img { border-radius: 12px; }

@media (max-width: 781px) {
  .tt-feature--reverse { flex-direction: column; }
  .tt-header { padding-block: 14px; }
}