/**
 * realisations.css — styles de l'archive du CPT realisation
 * Emplacement : wp-content/themes/Karr-Koncept-child/assets/realisations.css
 * Autonome : tokens du design system redéclarés en variables --kk-*
 * (Newsreader et Manrope sont déjà chargées par le kit Elementor.)
 */

.kk-real {
	--kk-surface: #f9f9f9;
	--kk-surface-low: #f3f3f3;
	--kk-surface-lowest: #ffffff;
	--kk-surface-high: #e8e8e8;
	--kk-ink: #1a1c1c;
	--kk-text: #50453b;
	--kk-primary: #535353;
	--kk-secondary: #7f562b;
	--kk-secondary-hover: #ffc792;
	--kk-peche-clair: #f2bc88;
	--kk-inverse: #2f3131;
	--kk-on-inverse: #f1f1f1;
	--kk-stone-400: #a8a29e;

	--kk-font-serif: "Newsreader", Georgia, serif;
	--kk-font-sans: "Manrope", system-ui, sans-serif;

	--kk-pad-x: clamp(2rem, 8vw, 8rem);

	font-family: var(--kk-font-sans);
	color: var(--kk-ink);
	background: var(--kk-surface);
}

/* ---------- Fondu du filtrage ---------- */
.kk-real__usage, .kk-real-card { transition: opacity .25s ease; opacity: 1; }
.kk-fade-out { opacity: 0; pointer-events: none; }

/* ---------- Hero ---------- */
.kk-real__hero { padding: 4rem var(--kk-pad-x) 2.5rem; max-width: none; }
.kk-real__crumb { display: flex; gap: .5rem; align-items: center; font-size: 11px; letter-spacing: .25em; text-transform: uppercase; font-weight: 700; color: var(--kk-text); margin-bottom: 1.5rem; }
.kk-real__crumb a { color: inherit; text-decoration: none; }
.kk-real__crumb a:hover, .kk-real__crumb .is-current { color: var(--kk-secondary); }
.kk-real__surtitre { display: block; color: var(--kk-secondary); font-weight: 700; letter-spacing: .3em; font-size: 12px; text-transform: uppercase; margin-bottom: 1rem; }
.kk-real__hero h1 { font-family: var(--kk-font-serif); font-weight: 400; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.1; letter-spacing: -.01em; color: var(--kk-primary); margin: 0 0 1rem; }
.kk-real__hero p { font-size: 1.125rem; font-weight: 300; line-height: 1.7; color: var(--kk-text); max-width: 42rem; margin: 0; }

/* ---------- Recherche (autocomplétion + filtrage live) ---------- */
.kk-real__toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.5rem; width: 100%; }
.kk-real__search { flex: 1 1 340px; max-width: 34rem; }
.kk-real__search-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-variant: small-caps; color: var(--kk-ink); margin-bottom: .75rem; }
.kk-real__search-field { display: flex; align-items: center; gap: 1rem; max-width: 34rem; background: var(--kk-surface-low); padding: 0 1.25rem 0 0; position: relative; }

/* Panneau de suggestions */
.kk-real__suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; background: #ffffff; box-shadow: 0 16px 40px rgba(26, 28, 28, .12); border-radius: 2px; max-height: 320px; overflow-y: auto; overflow-x: hidden; }
.kk-real .kk-real__suggest-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; border: 0; background: #ffffff !important; cursor: pointer; text-align: left; padding: .85rem 1.25rem; font: 400 .9rem/1.4 var(--kk-font-sans); color: var(--kk-ink) !important; transition: background .2s; }
.kk-real .kk-real__suggest-title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-real .kk-real__suggest-item:hover, .kk-real .kk-real__suggest-item:focus { background: var(--kk-surface-low) !important; color: var(--kk-ink) !important; outline: none; }
.kk-real__suggest-item + .kk-real__suggest-item { border-top: 1px solid var(--kk-surface-low); }
.kk-real__suggest-num { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--kk-text); background: transparent; border: 1px solid #d4c3b6; padding: .3rem .6rem; border-radius: 2px; }
.kk-real__search-field input[type="search"] { flex: 1; min-width: 0; border: 0; background: transparent; padding: 1.05rem 1.25rem; font: 400 1rem/1.2 var(--kk-font-sans); color: var(--kk-ink); }
.kk-real__search-field input[type="search"]::placeholder { color: rgba(80,69,59,.5); }
.kk-real__search-field input[type="search"]:focus { outline: 2px solid var(--kk-secondary); outline-offset: -2px; }
.kk-real__search-count { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kk-secondary); white-space: nowrap; }

/* ---------- Filtres ---------- */
.kk-real__filters { padding: 0 var(--kk-pad-x) 3rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.kk-real__tabs { display: flex; flex-wrap: wrap; gap: 4px; }
/* Spécificité renforcée (.kk-real …) : neutralise les styles [type=button] de Hello Biz (theme.css, #c36) */
.kk-real .kk-real__tab,
.kk-real .kk-real__tab:visited { border: 0; cursor: pointer; padding: .65rem 1.25rem; font: 700 11px/1 var(--kk-font-sans); letter-spacing: .1em; text-transform: uppercase; background: var(--kk-surface-low); color: var(--kk-text); border-radius: 2px; transition: background .25s, color .25s; text-decoration: none; box-shadow: none; }
.kk-real .kk-real__tab:hover,
.kk-real .kk-real__tab:focus,
.kk-real .kk-real__tab:active { background: var(--kk-surface-high); color: var(--kk-text); text-decoration: none; outline: none; }
.kk-real .kk-real__tab:focus-visible { outline: 2px solid var(--kk-secondary); outline-offset: 2px; }
.kk-real .kk-real__tab.is-active,
.kk-real .kk-real__tab.is-active:hover,
.kk-real .kk-real__tab.is-active:focus,
.kk-real .kk-real__tab.is-active:active { background: var(--kk-ink); color: #fff; }
.kk-real__porteur { display: flex; align-items: center; gap: .75rem; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--kk-text); }
.kk-real .kk-real__porteur select { border: 0; background: var(--kk-surface-low); font: 400 14px/1.2 var(--kk-font-sans); color: var(--kk-ink); padding: .65rem 2.25rem .65rem 1rem; border-radius: 2px; }
.kk-real .kk-real__porteur select:focus { outline: 2px solid var(--kk-secondary); outline-offset: 1px; }

/* ---------- Catalogue (grille unique) ---------- */
.kk-real__catalog { padding: 1rem var(--kk-pad-x) 4rem; background: var(--kk-surface); }
.kk-real__catalog .kk-real-card { background: var(--kk-surface-low); }
.kk-real__catalog .kk-real-card:hover { background: var(--kk-surface-high); }

/* ---------- Sections usage (conservé si réutilisé plus tard) ---------- */
.kk-real__usage { padding: 4rem var(--kk-pad-x); background: var(--kk-surface); }
.kk-real__usage.is-low { background: var(--kk-surface-low); }
.kk-real__usage-head { margin-bottom: 2.5rem; max-width: 42rem; }
.kk-real__usage-head h2 { font-family: var(--kk-font-serif); font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.2; color: var(--kk-primary); margin: 0 0 .75rem; }
.kk-real__usage-head p { font-size: .875rem; line-height: 1.7; color: var(--kk-text); margin: 0; }

/* ---------- Grille classique : texte sous l'image ---------- */
.kk-real__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px; }

.kk-real-card { background: var(--kk-surface-lowest); display: flex; flex-direction: column; text-decoration: none; border-radius: 2px; overflow: hidden; transition: background .4s, opacity .25s ease; }
.kk-real-card:hover { background: var(--kk-surface-high); }

.kk-real-card__media { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.kk-real-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s ease; }
.kk-real-card:hover .kk-real-card__media img { transform: scale(1.05); }
.kk-real-card__empty { display: block; width: 100%; height: 100%; background: var(--kk-surface-high); }

/* Badge numéro de projet (champ ACF numero_realisation) */
.kk-real-card__num { position: absolute; top: 12px; left: 12px; background: var(--kk-secondary); color: #fff; font: 700 11px/1 var(--kk-font-sans); letter-spacing: .1em; text-transform: uppercase; padding: .45rem .8rem; border-radius: 2px; }

.kk-real-card__body { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.kk-real-card__porteur { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kk-secondary); }
.kk-real-card__title { font-family: var(--kk-font-serif); font-style: normal; font-size: 1.2rem; line-height: 1.3; color: var(--kk-ink); flex: 1; }
.kk-real-card__accroche { font-size: .875rem; line-height: 1.6; color: var(--kk-text); }
.kk-real-card__more { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kk-secondary); padding-top: .25rem; }

/* ---------- Bandeau services de l'usage ---------- */
.kk-real__services { margin-top: 1.5rem; padding: 1.5rem; background: var(--kk-surface-lowest); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; border-radius: 2px; }
.kk-real__usage:not(.is-low) .kk-real__services { background: var(--kk-surface-low); }
.kk-real__services-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kk-text); }
.kk-real__services-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.kk-real__services-chips a { padding: .6rem 1rem; background: var(--kk-surface-high); color: var(--kk-ink); font-size: .75rem; font-weight: 600; text-decoration: none; border-radius: 2px; transition: background .25s, color .25s; }
.kk-real__services-chips a:hover { background: var(--kk-secondary); color: #fff; }

/* ---------- Aucun résultat ---------- */
.kk-real__empty { padding: 4rem var(--kk-pad-x); text-align: center; color: var(--kk-text); }
.kk-real__empty a { color: var(--kk-secondary); font-weight: 700; }

/* ---------- CTA ---------- */
.kk-real__cta { padding: 6rem var(--kk-pad-x); background: var(--kk-inverse); color: var(--kk-on-inverse); text-align: center; }
.kk-real__cta h2 { font-family: var(--kk-font-serif); font-weight: 400; font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.15; margin: 0 0 1.5rem; }
.kk-real__cta h2 em { font-style: italic; }
.kk-real__cta p { color: var(--kk-stone-400); font-weight: 300; font-size: 1.125rem; max-width: 42rem; margin: 0 auto 2rem; line-height: 1.7; }
.kk-real__cta-btn { display: inline-block; padding: 1.25rem 3rem; background: var(--kk-secondary); color: #fff; font: 700 12px/1 var(--kk-font-sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border-radius: 2px; transition: background .25s; }
.kk-real__cta-btn:hover { background: var(--kk-secondary-hover); color: var(--kk-ink); }


/* ============================================================
   Grands écrans : contenu plafonné à 1600 px, fonds pleine largeur
============================================================ */
.kk-real__hero,
.kk-real__filters,
.kk-real__catalog,
.kk-real__empty,
.kk-real__cta {
	padding-inline: max(var(--kk-pad-x), calc((100% - 1600px) / 2));
}