@import 'tailwindcss';

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

/*
 * Palette de marque NH TRANS — corrigée lors de l'intervention CLAUDE-002
 * (voir coordination.md) à partir de valeurs mesurées par analyse pixel
 * réelle sur le logo officiel `logo NH Trans.jpg`. Le logo est en réalité
 * multicolore (bleu, or, vert, jaune-vert) ; la première extraction
 * (CLAUDE-001) ne restituait qu'une seule teinte bleue. Structure à
 * plusieurs familles de couleurs ci-dessous, le bleu restant la couleur de
 * marque dominante (header, boutons principaux, liens, hero, footer),
 * l'or servant d'accent premium avec parcimonie (bordures, séparateurs,
 * badges), et le vert / jaune-vert d'accents ponctuels et discrets.
 */
@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';

    /* Bleu — couleur de marque dominante */
    --color-brand-blue-dark: #012f5d;
    --color-brand-blue: #024c90;
    --color-brand-blue-bright: #0581cc;
    --color-brand-blue-teal: #4c9eb2;

    /* Or — accent premium, à utiliser avec parcimonie (jamais en grand aplat) */
    --color-brand-gold: #e8bb45;
    --color-brand-gold-dark: #c57f17;

    /* Vert — accent secondaire discret */
    --color-brand-green: #8ec291;

    /* Jaune-vert — accent ponctuel uniquement, jamais en fond de texte (contraste insuffisant) */
    --color-brand-yellow: #eddf62;
    --color-brand-yellow-bright: #f4f047;

    /* Neutres */
    --color-brand-ink: #2d3637;
    --color-brand-muted: #55606b;
    --color-brand-border: #dde4ec;
    --color-brand-surface: #f5f8fb;
    --color-brand-white: #ffffff;

    /*
     * Alias de compatibilité — CLAUDE-002 : la structure héritée de
     * CLAUDE-001 (mono-bleue) exposait --color-brand-primary/-dark/-light,
     * utilisées dans ~250 endroits des vues publiques (classes Tailwind
     * bg-brand-primary, text-brand-dark, etc.). Plutôt que renommer chaque
     * usage, ces alias pointent vers les nouvelles variables bleues afin de
     * ne rien casser.
     */
    --color-brand-primary: var(--color-brand-blue);
    --color-brand-dark: var(--color-brand-blue-dark);
    --color-brand-light: var(--color-brand-blue-bright);
}

/*
 * Important : tout le CSS additionnel ci-dessous est déclaré dans les
 * mêmes couches de cascade que Tailwind (`base`, `components`) plutôt
 * qu'en dehors de toute @layer. En CSS, une règle non "layered" l'emporte
 * toujours sur une règle "layered", quel que soit l'ordre d'apparition —
 * un `body { background-color: ... }` non encapsulé aurait donc rendu les
 * classes utilitaires Tailwind (ex. `bg-brand-dark`) inopérantes sur
 * `<body>`.
 */

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

    body {
        background-color: var(--color-brand-white);
        color: var(--color-brand-ink);
        -webkit-font-smoothing: antialiased;
    }

    ::selection {
        background-color: var(--color-brand-primary);
        color: var(--color-brand-white);
    }

    :focus-visible {
        outline: 2px solid var(--color-brand-primary);
        outline-offset: 2px;
        border-radius: 2px;
    }

    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }
    }
}

@layer components {
    /* ---------------------------------------------------------------------- */
    /* Boutons                                                                 */
    /* ---------------------------------------------------------------------- */

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border-radius: 0.5rem;
        padding: 0.75rem 1.5rem;
        font-size: 0.9375rem;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
    }

    .btn:active {
        transform: translateY(1px);
    }

    .btn:disabled,
    .btn[aria-disabled='true'] {
        opacity: 0.55;
        pointer-events: none;
    }

    .btn-primary {
        background-color: var(--color-brand-primary);
        color: var(--color-brand-white);
        border: 1px solid var(--color-brand-primary);
    }

    .btn-primary:hover {
        background-color: var(--color-brand-dark);
        border-color: var(--color-brand-dark);
    }

    .btn-secondary {
        background-color: transparent;
        color: var(--color-brand-primary);
        border: 1px solid var(--color-brand-primary);
    }

    .btn-secondary:hover {
        background-color: var(--color-brand-primary);
        color: var(--color-brand-white);
    }

    .btn-secondary-inverse {
        background-color: transparent;
        color: var(--color-brand-white);
        border: 1px solid color-mix(in srgb, var(--color-brand-white) 55%, transparent);
    }

    .btn-secondary-inverse:hover {
        background-color: var(--color-brand-white);
        color: var(--color-brand-dark);
    }

    .btn-text {
        padding: 0;
        border-radius: 0;
        color: var(--color-brand-primary);
        position: relative;
    }

    .btn-text::after {
        content: '';
        position: absolute;
        left: 0;
        right: 100%;
        bottom: -2px;
        height: 2px;
        background-color: currentColor;
        transition: right 200ms ease;
    }

    .btn-text:hover::after {
        right: 0;
    }

    /* ---------------------------------------------------------------------- */
    /* En-tête : rétrécissement discret au défilement                         */
    /* ---------------------------------------------------------------------- */

    .site-header {
        transition: box-shadow 200ms ease, padding-block 200ms ease;
    }

    .site-header[data-scrolled='true'] {
        box-shadow: 0 1px 0 0 var(--color-brand-border), 0 8px 24px -16px rgb(1 47 93 / 0.25);
    }

    .site-header[data-scrolled='true'] .site-header__inner {
        padding-block: 0.625rem;
    }

    /* ---------------------------------------------------------------------- */
    /* Menu mobile                                                            */
    /* ---------------------------------------------------------------------- */

    .mobile-menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 250ms ease;
    }

    .mobile-menu[data-open='true'] {
        max-height: 32rem;
    }

    /* ---------------------------------------------------------------------- */
    /* Motif "route commerciale" — décoration sobre, purement CSS             */
    /* ---------------------------------------------------------------------- */

    .route-divider {
        height: 1px;
        background-image: repeating-linear-gradient(
            to right,
            color-mix(in srgb, var(--color-brand-gold) 35%, var(--color-brand-border)) 0,
            color-mix(in srgb, var(--color-brand-gold) 35%, var(--color-brand-border)) 6px,
            transparent 6px,
            transparent 14px
        );
    }

    .map-grid {
        background-image:
            linear-gradient(color-mix(in srgb, var(--color-brand-primary) 8%, transparent) 1px, transparent 1px),
            linear-gradient(90deg, color-mix(in srgb, var(--color-brand-primary) 8%, transparent) 1px, transparent 1px);
        background-size: 32px 32px;
    }

    /* ---------------------------------------------------------------------- */
    /* Animations d'apparition légères (data-reveal)                          */
    /* ---------------------------------------------------------------------- */

    /*
     * Par défaut (sans JavaScript, ou avant l'exécution du script), les
     * éléments [data-reveal] restent pleinement visibles. Seule la classe
     * `.js-reveal-ready`, ajoutée par `resources/js/app.js` juste avant la
     * mise en place de l'IntersectionObserver, active l'état masqué
     * initial. Ainsi, si le script échoue ou est désactivé, aucun contenu
     * ne disparaît.
     */
    [data-reveal] {
        opacity: 1;
        transform: none;
    }

    @media (prefers-reduced-motion: no-preference) {
        .js-reveal-ready [data-reveal] {
            opacity: 0;
            transition: opacity 600ms ease, transform 600ms ease;
            will-change: opacity, transform;
        }

        .js-reveal-ready [data-reveal='up'] {
            transform: translateY(16px);
        }

        .js-reveal-ready [data-reveal='left'] {
            transform: translateX(-16px);
        }

        .js-reveal-ready [data-reveal='right'] {
            transform: translateX(16px);
        }

        .js-reveal-ready [data-reveal].is-revealed {
            opacity: 1;
            transform: none;
        }
    }

    /* ---------------------------------------------------------------------- */
    /* Cartes : légère élévation au survol                                    */
    /* ---------------------------------------------------------------------- */

    .lift-on-hover {
        transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    }

    @media (prefers-reduced-motion: no-preference) {
        .lift-on-hover:hover {
            transform: translateY(-3px);
        }
    }

    .lift-on-hover:hover {
        box-shadow: 0 12px 28px -18px rgb(1 47 93 / 0.35);
        border-color: color-mix(in srgb, var(--color-brand-primary) 35%, var(--color-brand-border));
    }

    /* ---------------------------------------------------------------------- */
    /* Défilement horizontal des logos partenaires/clients (CLAUDE-003)       */
    /* ---------------------------------------------------------------------- */

    .logo-marquee {
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
        mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    }

    .logo-marquee__track {
        display: flex;
        width: max-content;
    }

    .logo-marquee__group {
        display: flex;
        gap: 1rem;
        padding-inline-end: 1rem;
    }

    @media (prefers-reduced-motion: no-preference) {
        .logo-marquee__track {
            animation: logo-marquee-left var(--marquee-duration, 35s) linear infinite;
        }

        .logo-marquee__track[data-direction='right'] {
            animation-name: logo-marquee-right;
        }

        .logo-marquee[data-pause-hover='true']:hover .logo-marquee__track,
        .logo-marquee:focus-within .logo-marquee__track {
            animation-play-state: paused;
        }
    }

    @keyframes logo-marquee-left {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
    }

    @keyframes logo-marquee-right {
        from { transform: translateX(-50%); }
        to { transform: translateX(0); }
    }

    @media (prefers-reduced-motion: reduce) {
        .logo-marquee {
            overflow-x: auto;
            -webkit-mask-image: none;
            mask-image: none;
        }

        .logo-marquee__track {
            animation: none;
        }

        .logo-marquee__group[aria-hidden='true'] {
            display: none;
        }
    }
}
