/* ======================================
   LucaBTP — Design system custom
   Patterns non exprimables nativement en Tailwind utilities.
   ====================================== */

:root {
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --slate-700: #334155;
    --slate-800: #1e293b;
}

::selection { background: var(--amber-500); color: white; }

/* ---- Liens "soulignement crayon" qui s'allonge au hover ---- */
.link-underline {
    position: relative;
    display: inline-block;
}
.link-underline::after {
    content: "";
    position: absolute;
    left: 0; bottom: -3px;
    width: 100%; height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
}
.link-underline:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ---- Eyebrow (libellé chapô avec traits) ---- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--amber-600);
}
.eyebrow::before, .eyebrow::after {
    content: "";
    width: 36px;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}
.eyebrow-light { color: rgba(255, 255, 255, 0.85); }

/* ---- Section title : trait fin sous le titre ---- */
.section-title-bar {
    display: inline-block;
    width: 56px;
    height: 3px;
    background: var(--amber-500);
    border-radius: 9999px;
}

/* ---- Frame offset pour images (cadre décalé derrière) ---- */
.frame-offset {
    position: relative;
}
.frame-offset::before {
    content: "";
    position: absolute;
    inset: 16px -16px -16px 16px;
    border: 2px solid var(--amber-500);
    border-radius: 1rem;
    z-index: 0;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.frame-offset:hover::before {
    transform: translate(-8px, -8px);
}
.frame-offset > img {
    position: relative;
    z-index: 1;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.frame-offset:hover > img {
    transform: translate(4px, 4px);
}

/* ---- Gradient text (utilisé sur les chiffres clés / titres accents) ---- */
.text-gradient-amber {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---- Service card : flèche qui apparait au hover ---- */
.service-card { position: relative; }
.service-card .arrow-indicator {
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.service-card:hover .arrow-indicator {
    opacity: 1;
    transform: translateX(0);
}

/* ---- Chip localité : underline animé au hover (subtil) ---- */
.chip-locality {
    position: relative;
    transition: color 0.3s ease;
}
.chip-locality::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 6px;
    width: 0; height: 1px;
    background: currentColor;
    transition: width 0.35s ease, left 0.35s ease;
}
.chip-locality:hover::after {
    width: 50%;
    left: 25%;
}

/* ---- Réduction performance mobile ---- */
@media (max-width: 768px) {
    .frame-offset::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}