/* niche-clair.css : les fiches de marché, remises dans la veine de la landing
   claire.

   Chargée APRÈS niche.css, qu'elle ne remplace pas : la largeur, les grilles,
   le tableau et le repli sur téléphone restent les siens.

   POURQUOI ELLES NE SONT PLUS SOMBRES. niche.css les assumait sombres dans les
   deux thèmes « comme la landing », avec une barre du haut sombre en
   permanence. Les deux raisons sont tombées : la landing est claire, et la
   barre suit le thème. Restées sombres, ces pages étaient les seules du site à
   ne ressembler à rien de ce qui les entoure, et ce sont celles où l'on arrive
   depuis Google.

   COMMENT. niche.css dessine tout avec ses propres variables (`--nf-*`). On
   les rebranche ici sur les jetons de theme.css, donc la page suit la bascule
   claire ou sombre sans qu'on réécrive ses règles. Les NOMS ne disent plus la
   teinte (`--nf-noir` est le fond, crème en thème clair) : ils disent le rôle
   que niche.css leur donne. Seules les couleurs écrites en dur (`#fff`) et les
   deux endroits où une variable servait à la fois de texte et de fond sont
   repris un par un.

   La couleur est le vert de Flair : chaque fiche mène à une analyse. */

.nf {
    --nf-noir: var(--mr-surface);
    --nf-noir-doux: var(--mr-surface-card);
    --nf-creme: var(--mr-text);
    --nf-creme-carte: var(--mr-surface-card);
    --nf-beige: var(--mr-vert);
    --nf-bordure: var(--mr-border);
    --nf-gris: var(--mr-text-muted);
    --nf-gris-clair: var(--mr-text);
    --nf-encre: var(--mr-text-strong);
    --nf-encre-douce: var(--mr-text-muted);
    --nf-bordure-claire: var(--mr-border);
    --nf-titre: 'Bricolage Grotesque', 'Inter', -apple-system, sans-serif;
    --nf-detente: cubic-bezier(0.16, 1, 0.3, 1);
    --nf-accent: var(--mr-vert);
}

/* ===== L'en-tête =====
   Le halo de la landing à la place des courbes : le même que sous sa fenêtre,
   en plus discret. Il s'éteint avant les bords, que `overflow: hidden`
   couperait net. */
.nf-hero::before {
    inset: 0 5% 20%;
    background:
        radial-gradient(28% 42% at 30% 45%, color-mix(in srgb, var(--mr-vert) 24%, transparent), transparent),
        radial-gradient(28% 42% at 70% 40%, color-mix(in srgb, var(--mr-bleu) 24%, transparent), transparent);
    filter: blur(2rem);
    -webkit-mask-image: none;
    mask-image: none;
}

.nf-fil, .nf-fil a {
    font-family: var(--mr-sans);
    font-size: 0.875rem;
    letter-spacing: 0;
    text-transform: none;
}

.nf-fil a:hover { color: var(--mr-text-strong); }

/* `!important` sur les tailles : mobile.css impose les siennes aux h1 et h2
   sous 768 px, et niche.css les reprend déjà de la même façon. */
.nf-hero h1 {
    max-width: 18ch;
    color: var(--mr-text-strong);
    font-family: var(--nf-titre);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.nf h2 {
    color: var(--mr-text-strong);
    font-family: var(--nf-titre);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.nf-sous { font-size: 1.15rem; line-height: 1.5; color: var(--mr-text-muted); }

/* ===== Les quatre mesures =====
   Quatre cartes séparées et non un tableau à traits : c'est la tuile de la
   landing, et chaque mesure se lit seule. */
.nf-chiffres {
    gap: 0.75rem;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
}

.nf-chiffre { border: 1px solid var(--mr-border); border-radius: 24px; }

.nf-chiffre b {
    color: var(--mr-text-strong);
    font-family: var(--nf-titre);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
}

.nf-chiffre span, .nf-voisines span, .nf-axe {
    font-family: var(--mr-sans);
    font-size: 0.875rem;
    letter-spacing: 0;
    text-transform: none;
}

.nf-chiffre--cache { background: var(--mr-surface-sunken); border-style: dashed; }
.nf-chiffre--cache b { color: var(--mr-text-muted); letter-spacing: 0.1em; }

/* ===== La courbe ===== */
.nf-courbe { border-radius: 28px; }

/* ===== La zone de ce qu'on annonce =====
   Elle était crème sur une page sombre, et c'est ce contraste qui la
   détachait. Sur une page claire il n'existe plus : la teinte verte le
   remplace. `--nf-creme` vaut maintenant la couleur du texte, d'où le fond
   réécrit ici. */
.nf-clair {
    background: color-mix(in srgb, var(--nf-accent) 10%, var(--mr-surface));
    color: var(--mr-text);
}

.nf-verrou { border-radius: 24px; }

.nf-verrou-flou span:nth-child(even) { color: var(--mr-text-muted); opacity: 0.55; }
.nf-verrou-mot a { text-underline-offset: 0.2em; }

/* ===== Les boutons =====
   Même raison : `--nf-creme` servait de fond au bouton et de couleur au texte
   courant, et les deux ne peuvent plus être la même valeur. */
.nf-bouton, .nf-clair .nf-bouton {
    padding: 1rem 1.75rem;
    border: 0;
    background: var(--mr-btn-bg);
    color: var(--mr-btn-text);
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.3s var(--nf-detente), background 0.2s ease;
}

.nf-bouton:hover, .nf-clair .nf-bouton:hover { background: var(--mr-btn-bg-hover); }
.nf-bouton:active { transform: scale(0.97); }

/* ===== Les appels à l'action ===== */
.nf-appel-phrase {
    color: var(--mr-text-strong);
    font-family: var(--nf-titre);
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.nf-appel-phrase b { font-style: normal; }

.nf-appel { border-radius: 32px; }

/* L'appel du haut n'est pas une carte : c'est la suite de l'en-tête, et un
   cadre de plus sous les quatre mesures en faisait un cinquième bloc. */
.nf-appel--haut { padding: 0; border: 0; background: none; }

.nf-appel li { font-size: 1.0625rem; color: var(--mr-text); }
.nf-appel li::before { opacity: 1; }

/* ===== Les marchés voisins et l'index ===== */
.nf-voisines li {
    border-radius: 20px;
    transition: transform 0.4s var(--nf-detente), box-shadow 0.4s var(--nf-detente), border-color 0.2s ease;
}

.nf-voisines li:hover { border-color: var(--mr-border-strong); transform: translateY(-4px); box-shadow: var(--mr-shadow); }

.nf-voisines a {
    color: var(--mr-text-strong);
    font-family: var(--nf-titre);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.nf-liste thead th {
    font-family: var(--mr-sans);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.nf-liste tbody th a { color: var(--mr-text-strong); font-weight: 600; }
.nf-liste tbody td { font-variant-numeric: tabular-nums; }

.nf-absent { border-radius: 20px; }
.nf-absent a { color: var(--mr-text-strong); font-weight: 600; text-underline-offset: 0.2em; }

/* ===== Le mouvement =====
   À remplissage « backwards » : l'état de départ n'existe que pendant
   l'animation, donc rien ne peut rester caché, et le texte reste lisible par
   un moteur qui n'anime rien. */
@media (prefers-reduced-motion: no-preference) {
    .nf-fil, .nf-hero h1 { animation: nf-monter 0.8s var(--nf-detente) backwards; }
    .nf-sous { animation: nf-monter 0.8s var(--nf-detente) 0.08s backwards; }
    .nf-chiffres, .nf-appel--haut { animation: nf-monter 0.9s var(--nf-detente) 0.16s backwards; }

    @keyframes nf-monter { from { opacity: 0; transform: translateY(18px); } }
}

/* ===== L'alignement =====
   Tout l'en-tête part du bord gauche. style.css centre les h1, et l'appel du
   haut était centré lui aussi : entre un fil d'Ariane et un chapeau alignés à
   gauche, la page avait deux axes. */
.nf-hero h1, .nf-appel--haut { text-align: left; }
.nf-appel--haut .nf-appel-phrase { margin-left: 0; }