/* ====================================================================
GÎTE AMAZIGH — Design tokens
« Maison kabyle, esthétique éditoriale »
--------------------------------------------------------------------
Une seule source de vérité pour toute la palette, la typo, les
espacements, les bordures et les transitions du site.
Light + dark theme via [data-theme="dark"] sur .
==================================================================== */
:root {
/* ---- Couleurs neutres (light) ---- */
--ka-bg: #f3ede2; /* Crème pierre Béjaïa */
--ka-bg-alt: #ebe2d2; /* Variation plus chaude */
--ka-bg-elevated: #faf6ee; /* Cards, panneaux */
--ka-bg-deep: #1f1810; /* Bandeaux sombres, footer */
--ka-ink: #1f1810; /* Texte primaire — encre de noix */
--ka-ink-soft: #4a3d2f; /* Texte secondaire */
--ka-ink-muted: #8a7860; /* Texte tertiaire, captions */
--ka-line: #d4c8b4; /* Bordures discrètes */
--ka-line-strong: #b5a78b; /* Bordures marquées */
/* ---- Couleurs de marque (palette Kabyle) ---- */
--ka-terracotta: #b85638; /* Couleur signature — CTA, accents */
--ka-terracotta-deep: #8e3f24; /* Hover, état actif */
--ka-terracotta-soft: #d97950; /* Mode sombre */
--ka-olive: #6b7c3a; /* Vert olive Akfadou */
--ka-olive-deep: #4f5d28;
--ka-mediterrane: #0c5a6e; /* Bleu Méditerranée Tichy */
--ka-mediterrane-deep: #074452;
--ka-brass: #c89958; /* Brass patiné — frises, ⵣ */
--ka-brass-deep: #a37941;
--ka-ivory: #f5f1e8; /* Ivoire ancien */
/* ---- Surfaces sémantiques (utilisé par les composants) ---- */
--ka-card-bg: var(--ka-bg-elevated);
--ka-card-border: var(--ka-line);
--ka-cta-bg: var(--ka-terracotta);
--ka-cta-bg-hover: var(--ka-terracotta-deep);
--ka-cta-text: var(--ka-ivory);
--ka-link: var(--ka-mediterrane);
--ka-link-hover: var(--ka-terracotta);
/* ---- Hero overlays ---- */
--ka-hero-overlay: linear-gradient(180deg, rgba(31, 24, 16, 0.15) 0%, rgba(31, 24, 16, 0.55) 60%, rgba(31, 24, 16, 0.85) 100%);
--ka-hero-overlay-light: linear-gradient(180deg, rgba(243, 237, 226, 0) 0%, rgba(243, 237, 226, 0.4) 100%);
/* ---- Typographie ---- */
--ka-font-display: 'Fraunces', 'Marcellus', 'Playfair Display', serif;
--ka-font-body: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
--ka-font-arabic: 'Amiri', 'Noto Naskh Arabic', serif;
--ka-font-mono: 'JetBrains Mono', ui-monospace, monospace;
/* Échelle typographique — fluide via clamp() */
--ka-text-xs: 0.75rem;
--ka-text-sm: 0.875rem;
--ka-text-base: 1.0625rem; /* Body un poil plus grand */
--ka-text-lg: 1.25rem;
--ka-text-xl: 1.5rem;
--ka-text-2xl: clamp(1.875rem, 3vw, 2.5rem);
--ka-text-3xl: clamp(2.25rem, 4vw, 3.5rem);
--ka-text-display: clamp(3.5rem, 9vw, 7.5rem);
/* Line-heights */
--ka-leading-tight: 1.05;
--ka-leading-snug: 1.25;
--ka-leading-normal: 1.5;
--ka-leading-loose: 1.75;
/* Letter-spacing */
--ka-tracking-tight: -0.02em;
--ka-tracking-normal: 0;
--ka-tracking-wide: 0.08em;
--ka-tracking-wider: 0.18em;
/* ---- Espacements ---- */
--ka-space-2xs: 0.25rem;
--ka-space-xs: 0.5rem;
--ka-space-sm: 1rem;
--ka-space-md: 2rem;
--ka-space-lg: 4rem;
--ka-space-xl: 6rem;
--ka-space-2xl: 9rem;
/* ---- Bordures & rayons ---- */
--ka-radius: 2px; /* Net, pas arrondi (pas de "modern blob") */
--ka-radius-frame: 0; /* Cadres photo brass = carrés stricts */
--ka-border-fine: 1px solid var(--ka-line);
--ka-border-brass: 1px solid var(--ka-brass);
--ka-border-ink: 1px solid var(--ka-ink);
/* ---- Ombres ---- */
--ka-shadow-soft: 0 6px 24px rgba(31, 24, 16, 0.08);
--ka-shadow-medium: 0 12px 36px rgba(31, 24, 16, 0.12);
--ka-shadow-frame: 0 0 0 1px var(--ka-brass), 0 8px 30px rgba(184, 86, 56, 0.12);
--ka-shadow-deep: 0 20px 60px rgba(31, 24, 16, 0.25);
/* ---- Animations ---- */
--ka-ease: cubic-bezier(0.32, 0.72, 0, 1);
--ka-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ka-duration-fast: 0.2s;
--ka-duration: 0.4s;
--ka-duration-slow: 0.8s;
/* ---- Layout ---- */
--ka-container: 78rem; /* 1248px max */
--ka-container-tight: 56rem; /* 896px pour textes longs */
--ka-gutter: clamp(1rem, 4vw, 3rem);
}
/* ====================================================================
Dark theme — encre de noix profonde, terracotta plus chaude
==================================================================== */
[data-theme="dark"] {
--ka-bg: #1a1410;
--ka-bg-alt: #221a13;
--ka-bg-elevated: #2c2218;
--ka-bg-deep: #0d0906;
--ka-ink: #f3ede2;
--ka-ink-soft: #ccc0a8;
--ka-ink-muted: #8a7860;
--ka-line: #4a3d2f;
--ka-line-strong: #6b5a44;
--ka-terracotta: #d97950;
--ka-terracotta-deep: #b85638;
--ka-olive: #8a9c4d;
--ka-mediterrane: #1a8aa6;
--ka-brass: #d4a865;
--ka-brass-deep: #b58c4d;
--ka-link: var(--ka-brass);
--ka-link-hover: var(--ka-terracotta);
--ka-shadow-soft: 0 6px 24px rgba(0, 0, 0, 0.4);
--ka-shadow-medium: 0 12px 36px rgba(0, 0, 0, 0.5);
--ka-shadow-frame: 0 0 0 1px var(--ka-brass), 0 8px 30px rgba(0, 0, 0, 0.6);
--ka-shadow-deep: 0 20px 60px rgba(0, 0, 0, 0.7);
--ka-hero-overlay: linear-gradient(180deg, rgba(13, 9, 6, 0.3) 0%, rgba(13, 9, 6, 0.7) 60%, rgba(13, 9, 6, 0.95) 100%);
}
/* ====================================================================
Reset & base
==================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
background: var(--ka-bg);
color-scheme: light;
}
[data-theme="dark"] html { color-scheme: dark; }
body {
margin: 0;
overscroll-behavior: none;
background: var(--ka-bg);
color: var(--ka-ink);
font-family: var(--ka-font-body);
font-size: var(--ka-text-base);
line-height: var(--ka-leading-normal);
font-feature-settings: 'liga', 'kern', 'onum';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background-color var(--ka-duration) var(--ka-ease), color var(--ka-duration) var(--ka-ease);
}
::selection {
background: var(--ka-terracotta);
color: var(--ka-ivory);
}
/* ====================================================================
Utilities — appliqués manuellement sur les éléments éditoriaux
==================================================================== */
/* Display — pour les titres signature, italics fluides via Fraunces variable */
.ka-display {
font-family: var(--ka-font-display);
font-variation-settings: 'opsz' 144, 'wght' 600, 'SOFT' 50;
font-weight: 600;
line-height: var(--ka-leading-tight);
letter-spacing: var(--ka-tracking-tight);
color: var(--ka-ink);
}
.ka-display-italic {
font-family: var(--ka-font-display);
font-style: italic;
font-variation-settings: 'opsz' 144, 'wght' 400, 'SOFT' 100;
letter-spacing: -0.01em;
}
/* Heading — pour h2/h3 standard */
.ka-heading {
font-family: var(--ka-font-display);
font-variation-settings: 'opsz' 60, 'wght' 500;
font-weight: 500;
line-height: var(--ka-leading-snug);
letter-spacing: -0.01em;
color: var(--ka-ink);
}
/* Eyebrow — petits labels au-dessus des titres, lettrage espacé */
.ka-eyebrow {
font-family: var(--ka-font-body);
font-style: italic;
font-size: var(--ka-text-sm);
font-weight: 500;
letter-spacing: var(--ka-tracking-wider);
text-transform: uppercase;
color: var(--ka-terracotta);
display: inline-flex;
align-items: center;
gap: 0.75rem;
}
.ka-eyebrow::before,
.ka-eyebrow::after {
content: '';
width: 1.5rem;
height: 1px;
background: currentColor;
opacity: 0.4;
}
/* Body lead — paragraphe d'introduction plus grand */
.ka-lead {
font-family: var(--ka-font-body);
font-size: clamp(1.125rem, 1.6vw, 1.375rem);
line-height: 1.55;
color: var(--ka-ink-soft);
}
/* Quote — citation italique encadrée */
.ka-quote {
font-family: var(--ka-font-display);
font-style: italic;
font-variation-settings: 'opsz' 100, 'wght' 350;
font-size: clamp(1.5rem, 2.5vw, 2rem);
line-height: 1.3;
color: var(--ka-ink);
position: relative;
padding-left: 1.5rem;
border-left: 2px solid var(--ka-terracotta);
}
/* Tifinagh ⵣ — glyphe de marque */
.ka-tifinagh {
font-family: 'Noto Sans Tifinagh', var(--ka-font-arabic), serif;
color: var(--ka-brass);
font-weight: 400;
display: inline-block;
vertical-align: middle;
}
/* Arabic — pour les rares mots arabes (Azul, Tanmirt) */
.ka-arabic {
font-family: var(--ka-font-arabic);
font-feature-settings: 'liga';
}
/* ====================================================================
Boutons
==================================================================== */
.ka-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.625rem;
padding: 0.875rem 1.875rem;
font-family: var(--ka-font-body);
font-size: 1rem;
font-weight: 600;
letter-spacing: var(--ka-tracking-wide);
text-transform: uppercase;
text-decoration: none;
border: none;
cursor: pointer;
position: relative;
transition: all var(--ka-duration) var(--ka-ease);
border-radius: var(--ka-radius);
}
.ka-btn-primary {
background: var(--ka-cta-bg);
color: var(--ka-cta-text);
}
.ka-btn-primary:hover {
background: var(--ka-cta-bg-hover);
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(184, 86, 56, 0.3);
}
.ka-btn-ghost {
background: transparent;
color: var(--ka-ivory);
border: 1px solid var(--ka-ivory);
}
.ka-btn-ghost:hover {
background: var(--ka-ivory);
color: var(--ka-ink);
}
.ka-btn-outline {
background: transparent;
color: var(--ka-terracotta);
border: 1px solid var(--ka-terracotta);
}
.ka-btn-outline:hover {
background: var(--ka-terracotta);
color: var(--ka-ivory);
}
.ka-btn-brass {
background: var(--ka-brass);
color: var(--ka-ink);
border: 1px solid var(--ka-brass);
}
.ka-btn-brass:hover {
background: var(--ka-brass-deep);
border-color: var(--ka-brass-deep);
color: var(--ka-ivory);
}
/* ====================================================================
Frise décorative Tifinagh + ligne — pour séparateurs sections
==================================================================== */
.ka-frieze {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
margin: 0 auto;
width: 100%;
max-width: 24rem;
color: var(--ka-brass);
}
.ka-frieze::before,
.ka-frieze::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--ka-brass) 50%, transparent);
opacity: 0.6;
}
.ka-frieze-glyph {
font-family: var(--ka-font-arabic);
font-size: 1.5rem;
line-height: 1;
letter-spacing: 0.5rem;
padding-right: 0; /* compensate letter-spacing right */
text-indent: 0.25rem;
}
/* ====================================================================
Pattern Beni Ouarain (losanges berbères) — fond de section discret
==================================================================== */
.ka-beni-ouarain {
position: relative;
}
.ka-beni-ouarain::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
pointer-events: none;
z-index: 0;
}
[data-theme="dark"] .ka-beni-ouarain::before {
background-image: url("data:image/svg+xml;utf8,");
}
.ka-beni-ouarain > * { position: relative; z-index: 1; }
/* ====================================================================
Cadres brass (pour photos chambres / packages)
==================================================================== */
.ka-frame {
position: relative;
overflow: hidden;
border-radius: var(--ka-radius-frame);
box-shadow: var(--ka-shadow-frame);
}
.ka-frame::after {
content: '';
position: absolute;
inset: 0;
border: 1px solid rgba(245, 241, 232, 0.15);
pointer-events: none;
}
.ka-frame img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ka-ease);
}
.ka-frame:hover img {
transform: scale(1.04);
}
/* ====================================================================
Animations
==================================================================== */
@keyframes ka-fade-up {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes ka-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ka-ken-burns {
0% { transform: scale(1.0) translate(0, 0); }
100% { transform: scale(1.08) translate(-1%, -1%); }
}
@keyframes ka-shimmer {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
.ka-animate-up { animation: ka-fade-up 1s var(--ka-ease-out) backwards; }
.ka-animate-in { animation: ka-fade-in 1.2s var(--ka-ease-out) backwards; }
.ka-animate-ken { animation: ka-ken-burns 18s var(--ka-ease-out) infinite alternate; }
.ka-delay-1 { animation-delay: 0.15s; }
.ka-delay-2 { animation-delay: 0.3s; }
.ka-delay-3 { animation-delay: 0.45s; }
.ka-delay-4 { animation-delay: 0.6s; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ====================================================================
Container
==================================================================== */
.ka-container {
max-width: var(--ka-container);
margin-inline: auto;
padding-inline: var(--ka-gutter);
}
.ka-container-tight {
max-width: var(--ka-container-tight);
margin-inline: auto;
padding-inline: var(--ka-gutter);
}
/* ====================================================================
Liens éditoriaux (souligné en biais subtil)
==================================================================== */
.ka-link {
color: var(--ka-link);
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 100% 1px;
background-position: 0 100%;
padding-bottom: 2px;
transition: color var(--ka-duration) var(--ka-ease);
}
.ka-link:hover {
color: var(--ka-link-hover);
}
/* ====================================================================
Composants partagés — disponibles sur toutes les pages
==================================================================== */
/* ============ Hero pages intérieures ============ */
.ka-page-hero {
position: relative;
height: clamp(40vh, 55vw, 60vh);
min-height: 360px;
display: flex;
align-items: flex-end;
overflow: hidden;
background: var(--ka-bg-deep);
}
.ka-page-hero-bg {
position: absolute;
inset: 0;
overflow: hidden;
}
.ka-page-hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
animation: ka-ken-burns 20s var(--ka-ease-out) infinite alternate;
}
.ka-page-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(31,24,16,0.2) 0%,
rgba(31,24,16,0.5) 50%,
rgba(31,24,16,0.9) 100%);
}
.ka-page-hero-content {
position: relative;
z-index: 2;
padding-top: 7rem;
padding-bottom: clamp(3rem, 5vw, 4rem);
width: 100%;
}
/* ============ Room card (partagé home + chambres) ============ */
.ka-room-card { background: var(--ka-bg-elevated); transition: transform var(--ka-duration-slow) var(--ka-ease); }
.ka-room-card:hover { transform: translateY(-6px); }
.ka-room-card-frame { position: relative; aspect-ratio: 4 / 3; }
.ka-room-card-price {
position: absolute; top: 1rem; left: 1rem;
background: var(--ka-bg-elevated); color: var(--ka-terracotta);
font-family: var(--ka-font-display); font-variation-settings: 'opsz' 60, 'wght' 600;
font-size: 1.375rem; padding: 0.5rem 0.875rem 0.4rem; line-height: 1; z-index: 2;
}
.ka-room-card-price small { font-family: var(--ka-font-body); font-style: italic; font-size: 0.8rem; color: var(--ka-ink-muted); margin-left: 0.25rem; }
.ka-room-card-body { padding: 1.75rem 1.5rem 1.875rem; }
.ka-room-card-name { font-family: var(--ka-font-display); font-variation-settings: 'opsz' 96, 'wght' 500; font-size: 1.625rem; line-height: 1.15; color: var(--ka-ink); margin: 0 0 0.5rem; }
.ka-room-card-meta { font-family: var(--ka-font-body); font-style: italic; font-size: 0.875rem; color: var(--ka-ink-muted); margin: 0 0 1rem; display: flex; gap: 0.625rem; align-items: center; }
.ka-room-card-meta-sep { color: var(--ka-brass); }
.ka-room-card-desc { font-family: var(--ka-font-body); font-size: 1rem; line-height: 1.55; color: var(--ka-ink-soft); margin: 0 0 1.25rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ka-room-card-amenities { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ka-room-card-amenities li { font-family: var(--ka-font-body); font-size: 0.825rem; color: var(--ka-ink-soft); padding: 0.25rem 0.625rem; background: var(--ka-bg); border: 1px solid var(--ka-line); }
.ka-room-card-link { font-family: var(--ka-font-body); font-size: 0.95rem; font-weight: 600; color: var(--ka-terracotta); text-decoration: none; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 0.5rem; transition: gap var(--ka-duration) var(--ka-ease), color var(--ka-duration) var(--ka-ease); }
.ka-room-card-link:hover { color: var(--ka-terracotta-deep); gap: 0.875rem; }
/* ============ CTA final terracotta ============ */
.ka-cta-final { background: var(--ka-terracotta); color: var(--ka-ivory); padding: clamp(5rem, 10vw, 9rem) 0; text-align: center; position: relative; overflow: hidden; }
.ka-cta-final-content { position: relative; z-index: 1; max-width: 48rem; margin-inline: auto; padding-inline: var(--ka-gutter); }
.ka-cta-final-eyebrow { font-family: var(--ka-font-display); font-style: italic; font-size: 1.125rem; color: rgba(245,241,232,0.9); margin: 0 0 1.5rem; }
.ka-cta-final-title { font-family: var(--ka-font-display); font-variation-settings: 'opsz' 144, 'wght' 500; font-size: clamp(3rem, 7vw, 5rem); line-height: 1; color: var(--ka-ivory); margin: 0 0 2rem; letter-spacing: -0.02em; }
.ka-cta-final-title em { color: var(--ka-brass); font-style: italic; font-variation-settings: 'opsz' 144, 'wght' 400; }
.ka-cta-final-text { font-family: var(--ka-font-display); font-style: italic; font-size: clamp(1.125rem, 2vw, 1.5rem); color: rgba(245,241,232,0.92); margin: 0 0 2.5rem; }
.ka-cta-final-actions { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; align-items: center; }
.ka-cta-final-phone { font-family: var(--ka-font-display); font-size: 1.125rem; color: var(--ka-ivory); text-decoration: none; display: inline-flex; align-items: center; gap: 0.625rem; border-bottom: 1px solid rgba(245,241,232,0.4); padding-bottom: 4px; transition: border-color var(--ka-duration) var(--ka-ease); }
.ka-cta-final-phone:hover { border-bottom-color: var(--ka-ivory); }
/* ============ Legal pages ============ */
.ka-legal-hero { padding: clamp(8rem, 12vw, 10rem) 0 clamp(3rem, 5vw, 4rem); background: var(--ka-bg); border-bottom: 1px solid var(--ka-line); }
.ka-legal-section { padding: clamp(4rem, 7vw, 6rem) 0; background: var(--ka-bg); }
.ka-legal-content { display: flex; flex-direction: column; gap: 1.5rem; }
.ka-legal-card { background: var(--ka-bg-elevated); border: 1px solid var(--ka-line); border-left: 2px solid var(--ka-terracotta); padding: 2rem; }
.ka-legal-h2 { font-family: var(--ka-font-display); font-variation-settings: 'opsz' 60, 'wght' 500; font-size: 1.25rem; color: var(--ka-ink); margin: 0 0 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--ka-line); }
.ka-legal-card p, .ka-legal-card li { font-family: var(--ka-font-body); font-size: 1rem; line-height: 1.65; color: var(--ka-ink-soft); margin: 0; }
.ka-legal-card p + p { margin-top: 0.75rem; }
.ka-legal-list { margin: 0.75rem 0 0; padding-left: 1.25rem; font-family: var(--ka-font-body); font-size: 1rem; color: var(--ka-ink-soft); line-height: 1.6; }
.ka-legal-callout { background: rgba(107,124,58,0.08); border: 1px solid var(--ka-olive); padding: 1.25rem; margin-top: 1rem; }
.ka-legal-callout-title { font-weight: 700; color: var(--ka-olive); margin: 0 0 0.5rem; }
.ka-legal-callout-text { font-size: 0.95rem; color: var(--ka-olive); display: block; }
.ka-legal-date { font-family: var(--ka-font-body); font-style: italic; font-size: 0.85rem; color: var(--ka-ink-muted); text-align: center; margin-top: 1rem; }
/* ============ Avail bar (chambres) ============ */
.ka-avail-bar { background: var(--ka-bg-elevated); border-bottom: 1px solid var(--ka-line); padding: 2rem 0; }
.ka-avail-form { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-end; }
.ka-avail-field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 9rem; }
.ka-avail-field label { font-family: var(--ka-font-body); font-style: italic; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ka-ink-muted); }
.ka-avail-field input, .ka-avail-field select { background: var(--ka-bg); border: 1px solid var(--ka-line); border-radius: var(--ka-radius); padding: 0.625rem 0.875rem; font-family: var(--ka-font-body); font-size: 1rem; color: var(--ka-ink); outline: none; transition: border-color var(--ka-duration) var(--ka-ease); }
.ka-avail-field input:focus, .ka-avail-field select:focus { border-color: var(--ka-terracotta); }
.ka-avail-sep { font-family: var(--ka-font-display); font-style: italic; color: var(--ka-brass); font-size: 1.5rem; padding-bottom: 0.4rem; align-self: flex-end; }
.ka-avail-actions { display: flex; gap: 0.75rem; align-items: center; align-self: flex-end; }
.ka-avail-reset { font-family: var(--ka-font-body); font-size: 0.9rem; color: var(--ka-ink-muted); text-decoration: underline; text-underline-offset: 3px; }
.ka-avail-result { font-family: var(--ka-font-body); font-style: italic; font-size: 0.95rem; color: var(--ka-olive); margin: 1.25rem 0 0; display: flex; align-items: center; gap: 0.625rem; }
/* ============ Dark mode overrides Tailwind ============ */
[data-theme="dark"] .bg-white { background-color: var(--ka-bg-elevated) !important; }
[data-theme="dark"] .bg-gray-50, [data-theme="dark"] .bg-gray-100 { background-color: var(--ka-bg-alt) !important; }
[data-theme="dark"] .text-gray-900, [data-theme="dark"] .text-gray-800, [data-theme="dark"] .text-gray-700 { color: var(--ka-ink) !important; }
[data-theme="dark"] .text-gray-600, [data-theme="dark"] .text-gray-500 { color: var(--ka-ink-soft) !important; }
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: var(--ka-bg-elevated); color: var(--ka-ink); border-color: var(--ka-line); }
/* ============ Helpers divers ============ */
.h-cover { height: 100vh; height: 100svh; min-height: 600px; }
.hero-overlay { background: var(--ka-hero-overlay); }
.text-shadow { text-shadow: 0 2px 12px rgba(0,0,0,0.6); }