@import 'tailwindcss';

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

/*
 * Système éditorial athlétique.
 *
 * Trois règles tenues sans exception :
 *   1. la typographie porte la page (condensée, capitales, échelle brutale) ;
 *   2. le filet remplace la carte — pas d'encadré, pas d'ombre, pas d'angle rond ;
 *   3. l'accent est une couleur de REMPLISSAGE, jamais de petit texte.
 *
 * Les utilitaires pointent vers les variables écrites par le back-office
 * (App\Support\Theme) : `inline` garde la référence `var()` dans le CSS compilé,
 * donc changer une couleur en admin repeint le site sans recompiler Vite.
 */
@theme inline {
    --color-brand: var(--brand-primary);
    --color-brand-soft: var(--brand-primary-soft);
    --color-brand-hover: var(--brand-primary-hover);
    --color-brand-contrast: var(--brand-primary-contrast);
    --color-ink: var(--brand-ink);
    --color-ink-soft: var(--brand-ink-soft);
    --color-ink-strong: var(--brand-ink-strong);
    --color-ink-contrast: var(--brand-secondary-contrast);
    --color-accent: var(--brand-accent);
    --color-accent-contrast: var(--brand-accent-contrast);
    --color-surface: var(--brand-surface);
    --color-surface-alt: var(--brand-surface-alt);
    --color-body: var(--brand-text);
    --color-muted: var(--brand-muted);
    --color-hairline: var(--brand-border);
    --color-rule: var(--brand-rule);

    --font-heading: var(--brand-font-heading);
    --font-body: var(--brand-font-body);

    --radius-brand: var(--brand-radius);
    --radius-button: var(--brand-radius-button);
}

/* Repli si la feuille serveur n'a pas été injectée (page d'erreur nue, tests). */
@layer base {
    :root {
        --brand-primary: #d4ff3f;
        --brand-primary-soft: #faffe8;
        --brand-primary-hover: #bbe037;
        --brand-primary-contrast: #0f172a;
        --brand-secondary: #0b0b0c;
        --brand-secondary-contrast: #ffffff;
        --brand-ink: #0b0b0c;
        --brand-ink-soft: #1c1c1d;
        --brand-ink-strong: #060607;
        --brand-accent: #0b0b0c;
        --brand-accent-contrast: #ffffff;
        --brand-surface: #f4f2ed;
        --brand-surface-alt: #e8e6e2;
        --brand-text: #0b0b0c;
        --brand-muted: #68665f;
        --brand-border: #d8d6d2;
        --brand-rule: #c5c4c0;
        --brand-radius: 0px;
        --brand-radius-button: 0px;
        --brand-container: 1280px;
        --brand-font-heading: 'Oswald', ui-sans-serif, system-ui, sans-serif;
        --brand-font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
    }

    body {
        font-family: var(--brand-font-body);
        -webkit-font-smoothing: antialiased;
        /* Grain de papier : sort le fond de l'aplat numérique. */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)' opacity='0.028'/%3E%3C/svg%3E");
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--brand-font-heading);
        font-weight: 600;
        letter-spacing: 0;
        text-wrap: balance;
    }

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

    @media (prefers-reduced-motion: no-preference) {
        html { scroll-behavior: smooth; }
    }
}

@layer components {
    .container-brand {
        width: 100%;
        max-width: var(--brand-container);
        margin-inline: auto;
        padding-inline: 1.5rem;
    }

    /* ═══════════════════════════════════════════════════════ Typographie */

    /*
     * Titre de héros. Oswald est déjà condensée : le resserrement vient de
     * l'interligne (0.84) et non d'un crénage négatif qui ferait collisionner
     * les capitales accentuées françaises.
     */
    .display {
        font-family: var(--brand-font-heading);
        font-weight: 700;
        /*
         * Plafonné à 7.5rem : à 10rem, un mot long saisi en back-office
         * (« D'ENTRAÎNEMENT ») dépassait sa colonne de 53 px.
         */
        font-size: clamp(2rem, 8.5vw, 7.5rem);
        /*
         * 1.12 minimum. Mesuré en navigateur : les capitales d'Oswald font
         * 0.83 em et son circonflexe dépasse encore de 0.25 em au-dessus. En
         * deçà de ~1.11, l'accent d'un « Ô » percute la ligne précédente.
         * Les capitales n'ayant pas de jambage, l'interligne reste serré à l'œil.
         */
        line-height: 1.12;
        letter-spacing: -0.005em;
        text-transform: uppercase;
        text-wrap: balance;
        overflow-wrap: break-word;
    }

    .display-2 {
        font-family: var(--brand-font-heading);
        font-weight: 700;
        font-size: clamp(2rem, 5vw, 3.75rem);
        line-height: 1.12;
        text-transform: uppercase;
        text-wrap: balance;
        overflow-wrap: break-word;
    }

    .display-3 {
        font-family: var(--brand-font-heading);
        font-weight: 600;
        font-size: clamp(1.35rem, 2.3vw, 1.75rem);
        line-height: 1.15;
        text-transform: uppercase;
        overflow-wrap: break-word;
    }

    /*
     * Micro-étiquette technique. Remplace la pastille arrondie : même fonction
     * de repérage, sans le vocabulaire « SaaS ».
     */
    .label {
        font-family: var(--brand-font-body);
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        line-height: 1;
    }

    /* Numéro d'index : la structure de la page est visible et assumée. */
    .numeral {
        font-family: var(--brand-font-heading);
        font-weight: 500;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.02em;
    }

    .tabular { font-variant-numeric: tabular-nums; }

    /* Surlignage au feutre : l'accent en aplat, jamais en couleur de texte. */
    .highlight {
        background: var(--brand-primary);
        color: var(--brand-text);
        padding-inline: 0.14em;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
    }

    /* ══════════════════════════════════════════════════════════ Filets */

    .rule-top { border-top: 1px solid var(--brand-rule); }
    .rule-bottom { border-bottom: 1px solid var(--brand-rule); }

    /* Filet sur fond sombre. */
    .rule-top-ink { border-top: 1px solid rgb(255 255 255 / 0.16); }
    .rule-bottom-ink { border-bottom: 1px solid rgb(255 255 255 / 0.16); }

    /* ═══════════════════════════════════════════════════ Sections sombres */

    /*
     * Aplat d'encre franc — volontairement sans dégradé ni halo : c'est le
     * contraste papier/encre qui fait l'image, pas un effet lumineux.
     */
    .section-ink {
        position: relative;
        isolation: isolate;
        background: var(--brand-ink);
        color: #ffffff;
    }

    .section-ink::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        opacity: 0.5;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    }

    /* Colonnes de repérage, comme les repères d'une maquette imprimée. */
    .column-guides {
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background-image: linear-gradient(to right, rgb(255 255 255 / 0.055) 1px, transparent 1px);
        background-size: calc(100% / 6) 100%;
    }

    .column-guides-paper {
        background-image: linear-gradient(to right, var(--brand-rule) 1px, transparent 1px);
        opacity: 0.45;
    }

    .text-on-ink-muted { color: rgb(255 255 255 / 0.62); }

    /* ═════════════════════════════════════════════════════════ Boutons */

    /*
     * Pas de bouton « pilule » : un bloc rectangulaire, libellé en capitales
     * espacées. L'état de survol inverse les valeurs plutôt que d'assombrir.
     */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.65rem;
        border-radius: var(--brand-radius-button);
        padding: 1.05rem 1.9rem;
        font-family: var(--brand-font-body);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        line-height: 1.3;
        /*
         * Pas de `nowrap` : en capitales espacées, un libellé long élargissait
         * la page entière sur mobile. Il se met sur deux lignes centrées.
         */
        text-align: center;
        text-wrap: balance;
        border: 1px solid transparent;
        transition: background-color .25s ease, color .25s ease, border-color .25s ease;
    }

    /* Sur petit écran, on resserre le gabarit avant de laisser le texte passer à la ligne. */
    @media (max-width: 30rem) {
        .btn {
            padding-inline: 1.25rem;
            letter-spacing: 0.12em;
        }
    }

    .btn:focus-visible {
        outline: 2px solid var(--brand-text);
        outline-offset: 3px;
    }

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

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

    .btn-outline {
        background: transparent;
        color: var(--brand-text);
        border-color: var(--brand-text);
    }

    .btn-outline:hover {
        background: var(--brand-text);
        color: var(--brand-surface);
    }

    .btn-ghost {
        background: transparent;
        color: var(--brand-text);
        border-color: var(--brand-rule);
    }

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

    /* Sur fond sombre. */
    .btn-on-ink {
        background: transparent;
        color: #ffffff;
        border-color: rgb(255 255 255 / 0.32);
    }

    .btn-on-ink:hover {
        background: #ffffff;
        color: var(--brand-ink);
        border-color: #ffffff;
    }

    .btn-light {
        background: #ffffff;
        color: var(--brand-ink);
        border-color: #ffffff;
    }

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

    /* ══════════════════════════════════════════════════ Lignes de liste */

    /*
     * Le remplaçant de la carte : une ligne pleine largeur, séparée par un
     * filet, qui se remplit d'accent au survol. Le contenu glisse légèrement
     * pour signaler l'interaction sans ombre ni élévation.
     */
    .row {
        position: relative;
        display: block;
        border-top: 1px solid var(--brand-rule);
        transition: background-color .3s cubic-bezier(0.16, 1, 0.3, 1), color .3s ease;
    }

    .row:last-child { border-bottom: 1px solid var(--brand-rule); }

    .row:hover { background: var(--brand-primary); }

    .row-inner {
        transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @media (prefers-reduced-motion: no-preference) {
        .row:hover .row-inner { transform: translateX(0.75rem); }
    }

    /* Le texte atténué doit rester lisible une fois la ligne remplie. */
    .row:hover .row-muted { color: color-mix(in srgb, var(--brand-text) 72%, transparent); }

    .row-arrow {
        transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1), opacity .3s ease;
        opacity: 0;
        transform: translateX(-0.75rem);
    }

    .row:hover .row-arrow {
        opacity: 1;
        transform: translateX(0);
    }

    /* Variante sur fond sombre. */
    .row-ink {
        border-top-color: rgb(255 255 255 / 0.16);
    }

    .row-ink:last-child { border-bottom-color: rgb(255 255 255 / 0.16); }

    .row-ink:hover { background: var(--brand-primary); color: var(--brand-text); }

    /* ══════════════════════════════════════════════════════════ Blocs */

    /* Encadré à filet, sans ombre ni arrondi : sert pour les formulaires. */
    .panel {
        background: var(--brand-surface);
        border: 1px solid var(--brand-rule);
        border-radius: var(--brand-radius);
    }

    .panel-ink {
        border: 1px solid rgb(255 255 255 / 0.16);
        border-radius: var(--brand-radius);
    }

    /* Conservé pour compatibilité, réaligné sur le nouveau vocabulaire. */
    .card-brand {
        background: var(--brand-surface);
        border: 1px solid var(--brand-rule);
        border-radius: var(--brand-radius);
    }

    /* ═════════════════════════════════════════════════════════ Champs */

    .field {
        width: 100%;
        border: 1px solid var(--brand-rule);
        border-radius: var(--brand-radius);
        background: var(--brand-surface);
        padding: 0.95rem 1rem;
        color: var(--brand-text);
        transition: border-color .15s ease, box-shadow .15s ease;
    }

    .field:focus {
        outline: none;
        border-color: var(--brand-text);
        box-shadow: inset 0 -2px 0 0 var(--brand-primary);
    }

    /* ═══════════════════════════════════════════════════ Bandeau défilant */

    .marquee {
        display: flex;
        overflow: hidden;
        user-select: none;
    }

    .marquee-track {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        gap: 3.5rem;
        padding-right: 3.5rem;
        min-width: 100%;
    }

    @media (prefers-reduced-motion: no-preference) {
        .marquee-track { animation: marquee 42s linear infinite; }
        .marquee:hover .marquee-track { animation-play-state: paused; }
    }

    /* ══════════════════════════════════════════════════════════ Liens */

    .link-sweep {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .link-sweep::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -3px;
        height: 1px;
        width: 100%;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .link-sweep:hover::after {
        transform: scaleX(1);
        transform-origin: left;
    }

    /* ═══════════════════════════════════════════════════════════ Prose */

    .prose-brand :where(h2) { font-size: 1.5rem; text-transform: uppercase; margin-block: 2.25rem 0.85rem; }
    .prose-brand :where(h3) { font-size: 1.15rem; text-transform: uppercase; margin-block: 1.75rem 0.5rem; }
    .prose-brand :where(p) { margin-block: 1rem; line-height: 1.75; }
    .prose-brand :where(ul) { margin-block: 1rem; padding-left: 1.25rem; list-style: none; }
    .prose-brand :where(ul) :where(li)::before { content: '—'; margin-left: -1.25rem; padding-right: 0.5rem; color: var(--brand-muted); }
    .prose-brand :where(ol) { margin-block: 1rem; padding-left: 1.25rem; list-style: decimal; }
    .prose-brand :where(li) { margin-block: 0.4rem; }
    .prose-brand :where(a) { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
    .prose-brand :where(a):hover { background: var(--brand-primary); }
    .prose-brand :where(blockquote) {
        border-left: 2px solid var(--brand-text);
        padding-left: 1.25rem;
        margin-block: 1.5rem;
        font-family: var(--brand-font-heading);
        font-size: 1.35rem;
        line-height: 1.3;
        text-transform: uppercase;
    }
    .prose-brand :where(img) { border-radius: var(--brand-radius); margin-block: 1.75rem; }
}

/*
 * Apparition au défilement (directive `v-reveal`).
 *
 * Le dévoilement passe par un MASQUE, pas par `clip-path` ni `scaleX` : ces
 * deux techniques ramènent à zéro le rectangle d'intersection de l'élément, si
 * bien que l'IntersectionObserver qui doit déclencher l'animation ne se
 * déclenche jamais et le contenu reste invisible. Un masque est un effet de
 * peinture : il n'affecte pas la géométrie observée (vérifié en navigateur).
 *
 * Déclaré sous `no-preference` uniquement — sans la media query, un visiteur en
 * mouvement réduit resterait sur un contenu masqué.
 */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(0.35em);
        -webkit-mask-image: linear-gradient(to top, transparent 50%, #000 50%);
                mask-image: linear-gradient(to top, transparent 50%, #000 50%);
        -webkit-mask-size: 100% 200%;
                mask-size: 100% 200%;
        -webkit-mask-position: 0 100%;
                mask-position: 0 100%;
        transition:
            opacity .45s linear var(--reveal-delay, 0ms),
            transform .95s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
            -webkit-mask-position .95s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
            mask-position .95s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
    }

    .reveal.is-visible {
        opacity: 1;
        transform: none;
        -webkit-mask-position: 0 0;
                mask-position: 0 0;
    }

    /* Filet qui se trace de gauche à droite, même technique. */
    .reveal-rule {
        -webkit-mask-image: linear-gradient(to right, #000 50%, transparent 50%);
                mask-image: linear-gradient(to right, #000 50%, transparent 50%);
        -webkit-mask-size: 200% 100%;
                mask-size: 200% 100%;
        -webkit-mask-position: 100% 0;
                mask-position: 100% 0;
        transition:
            -webkit-mask-position 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
            mask-position 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
    }

    .reveal-rule.is-visible {
        -webkit-mask-position: 0 0;
                mask-position: 0 0;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}