/* vitrine-barre.css : la palette, la barre du haut et les boutons des pages
   publiques claires.

   Ce fichier est le seul que TOUTES ces pages chargent : la landing, « Qui
   sommes-nous », la FAQ, la confidentialité et le blog. Il ne contient donc
   aucune remise à zéro des marges ni aucune règle sur `body` : le blog a sa
   propre mise en page d'article, et une remise à zéro posée ici lui
   écraserait l'espacement de ses paragraphes. */

:root {
    /* La palette de theme.css, recopiée et non importée : cette page n'a pas
       de thème sombre, et charger theme.css y poserait un `data-theme` que
       rien ne bascule. */
    --encre: #1a1712;
    --encre-douce: #57503f;
    --fond: #f7f2e9;
    --carte: #fffdf8;
    --creme: #f7f2e9;
    --beige: #ece3d1;
    --trait: rgba(26, 23, 18, 0.1);
    --vert: #266741;
    --bleu: #3d6a8f;
    --violet: #715e93;
    --orange: #8a5222;

    --titre: 'Bricolage Grotesque', 'Inter', -apple-system, sans-serif;
    --texte: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --marge: clamp(1.25rem, 4vw, 3rem);
    --large: 75rem;
    --detente: cubic-bezier(0.16, 1, 0.3, 1);
}

/* TOUT EST EN REM, ET LE REM GRANDIT AVEC L'ÉCRAN. À 1920 il vaut 16 px, à
   3840 il en vaut 30 : la page garde les mêmes proportions sur un écran 4K
   au lieu d'y devenir une colonne de 1200 px perdue au milieu. Mesuré avec
   une pente plus douce (24 px en 4K), le contenu n'occupait plus que 47 %
   de la largeur contre 62 % à 1920. */
html {
    font-size: clamp(16px, 0.73vw + 2px, 32px);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}


/* ===== La barre du haut ===== */
/* `.barre` et pas `nav` : le blog a un second `<nav>`, son fil d'Ariane, qui
   héritait de la barre fixe et venait se poser par-dessus elle. */
.barre {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: 3.75rem;
    padding: 0 var(--marge);
    background: rgba(247, 242, 233, 0.8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.barre.a-defile { border-bottom-color: var(--trait); }

.logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--titre);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
}

/* Une découpe : le SVG est dessiné en `currentColor`, qui ne vaut rien dans
   une balise `<img>`. En masque il prend la couleur du lien. */
.logo-mark {
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    background-color: currentColor;
    -webkit-mask: url('../img/logo-mr.svg') center / contain no-repeat;
    mask: url('../img/logo-mr.svg') center / contain no-repeat;
}

.nav-right { display: flex; align-items: center; gap: 2rem; }
.nav-links { display: flex; gap: 1.75rem; font-size: 0.875rem; }
.nav-links a { color: var(--encre-douce); transition: color 0.2s ease; }
.nav-links a:hover { color: var(--encre); }

.nav-burger { display: none; }

/* ===== Les boutons ===== */
.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.6rem;
    border: 1px solid var(--encre);
    border-radius: 999px;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s var(--detente);
}

.bouton:active { transform: scale(0.97); }
.bouton--plein { background: var(--encre); color: var(--creme); }
.bouton--plein:hover { background: #000; }
.bouton--clair:hover { background: var(--encre); color: var(--creme); }
.bouton--petit { padding: 0.6rem 1.1rem; font-size: 0.875rem; }

/* ===== Petits écrans ===== */
@media (max-width: 900px) {
    .nav-right { gap: 0.75rem; }

    /* Le bouton du menu : sans lui, le blog, la FAQ et « Qui sommes-nous »
       sont injoignables depuis un téléphone, sur la page où arrive le trafic
       payant. Le comportement vient de nav-mobile.js. */
    .nav-burger {
        display: grid;
        gap: 5px;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        place-content: center;
        border: 0;
        background: none;
        cursor: pointer;
    }
    .nav-burger span { width: 1.25rem; height: 1.5px; background: var(--encre); }

    .nav-links {
        position: absolute;
        inset: 3.75rem 0 auto 0;
        display: none;
        flex-direction: column;
        gap: 0;
        padding: 0.5rem var(--marge) 1rem;
        background: var(--fond);
        border-bottom: 1px solid var(--trait);
        font-size: 1.05rem;
    }
    .nav-links a { display: block; padding: 0.8rem 0; color: var(--encre); }
    .barre.menu-ouvert .nav-links { display: flex; }
}

/* La page où l'on est, dans la barre. */
.nav-links a.nav-active { color: var(--encre); font-weight: 500; }

/* Le blog ne charge pas la remise à zéro de la landing : sans ces trois
   lignes, la liste de la barre y garde ses puces et son retrait, et ses liens
   leur soulignement. */
.barre .nav-links { margin: 0; padding-left: 0; list-style: none; }
.barre a, .bouton { text-decoration: none; }
.barre .logo { color: var(--encre); }