@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

@theme {
    --font-sans: 'Barlow', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';

    /*
    | Charte Box137
    | Dominante  : graphite rgb(85, 83, 83)  → texte courant + grands aplats
    | Dominantes : blanc (fond des contenus) + turquoise rgb(53, 174, 183) (accent)
    */
    --color-ink: #555353; /* DOMINANTE : texte courant et aplats principaux */
    --color-ink-dark: #3d3b3b; /* graphite foncé : assurance, footer, titres */
    --color-ink-light: #8a8888;
    --color-ink-tint: #f2f1f1; /* gris très clair : fonds de section alternés */

    /*
    | Turquoise repris du logo. La valeur ci-dessous est une ESTIMATION à l'œil :
    | à corriger en relevant la teinte exacte dans public/images/logo.png.
    | Les 5 nuances sont dérivées de --color-brand, à recalculer avec elle.
    */
    --color-brand: #55bfd0; /* accent : aplats, filets, boutons */
    --color-brand-dark: #1c7d8c; /* accent lisible sur blanc (4,8:1) */
    --color-brand-bright: #7dd2e0; /* accent lisible sur graphite (4,4:1) */
    --color-brand-deep: #0f4a55;
    --color-brand-light: #e6f6fa;
    --color-brand-tint: #f4fbfd;

    --color-available: #4f7d1f;
    --color-limited: #9a6f12;
    --color-unavailable: #b8431a;
}

@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        @apply bg-white text-ink antialiased;
    }
}

/* Masque la barre de défilement sans désactiver le défilement lui-même */
@utility no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        display: none;
    }
}

@utility container-site {
    @apply mx-auto w-full max-w-[1280px] px-5 sm:px-8;
}

/* Boutons */
@utility btn {
    @apply inline-flex items-center justify-center gap-2 rounded-sm px-7 py-3.5
           text-sm font-bold tracking-wider uppercase transition-colors duration-150;
}

/* Turquoise plein + texte sombre : le contraste reste conforme AA */
@utility btn-brand {
    @apply btn bg-brand text-ink-dark hover:bg-brand-dark hover:text-white;
}

/* Sur fond turquoise ou turquoise profond */
@utility btn-white {
    @apply btn bg-white text-ink-dark hover:bg-ink-dark hover:text-white;
}

@utility btn-outline-white {
    @apply btn border-2 border-white text-white hover:bg-white hover:text-ink-dark;
}

@utility btn-outline-brand {
    @apply btn border-2 border-brand-dark text-brand-dark hover:bg-brand-dark hover:text-white;
}

/* Titres de section : sur-titre turquoise + titre + filet */
@utility section-eyebrow {
    @apply mb-2 text-sm font-bold tracking-[0.2em] text-brand-dark uppercase;
}

@utility section-title {
    @apply text-3xl leading-tight font-extrabold text-ink-dark uppercase sm:text-4xl;
}

@utility section-rule {
    &::after {
        content: '';
        @apply mt-5 block h-1 w-16 bg-brand;
    }
}

@utility section-rule-center {
    &::after {
        @apply mx-auto;
    }
}

/*
| Apparition au défilement. L'élément part décalé et estompé, puis se pose
| quand il entre dans l'écran (classe ajoutée par app.js).
| Neutralisé si le visiteur a demandé moins d'animations.
*/
@media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
        opacity: 0;
        translate: 0 24px;
        transition:
            opacity 0.6s ease-out,
            translate 0.6s ease-out;
    }

    [data-reveal].is-visible {
        opacity: 1;
        translate: none;
    }
}

/* Barre de comparaison des longueurs : se remplit à l'apparition */
.size-bar > span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--color-brand);
    transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.is-visible .size-bar > span {
    width: var(--bar, 0%);
}

@media (prefers-reduced-motion: reduce) {
    .size-bar > span {
        width: var(--bar, 0%);
        transition: none;
    }
}

/*
| Simulateur Calcumate : masquage de deux libellés de volume.
|
| Le nom du box (« 70m3 ») est rendu par styled-components, dont la classe se
| termine par un identifiant régénéré à chaque version. On cible donc la partie
| stable du nom, pas la classe complète.
|
| Le second libellé (« Volume: 70m³ ») n'a ni classe ni identifiant : il est
| masqué par app.js, qui le repère à son texte.
*/
#calcumate-root [class*='ProposedUnits__UnitName'] {
    display: none !important;
}

/* Contenu riche injecté depuis config/site.php (FAQ) */
.rich p {
    @apply mb-3;
}

.rich ul {
    @apply mb-4 space-y-1.5;
}

.rich li {
    @apply relative pl-6;
}

.rich li::before {
    content: '✔';
    @apply absolute left-0 font-bold text-brand-dark;
}