/* nav-mobile.css — La barre du haut sur petit écran
 *
 * Le même bandeau est recopié dans quatre gabarits (`landing-new.html`,
 * `faq.html`, `about.html`, `privacy.html`), chacun avec sa propre feuille de
 * style. Sous 968px la liste de liens ne tenait nulle part : sur la landing
 * elle passait en `display: none` et rien ne la remplaçait, sur les trois
 * autres elle s'empilait par-dessus le logo. Quatre copies d'un même défaut.
 *
 * Ce fichier porte le menu pour les quatre. Il doit être chargé APRÈS la
 * feuille ou le bloc `<style>` de la page : à spécificité égale, c'est le
 * dernier déclaré qui gagne, et les pages définissent déjà `.nav-links`.
 */

/* Le bouton n'existe que sous 968px, là où la liste se replie en panneau.
   Trois barres plutôt qu'une icône importée : le dessin se retourne en croix
   à l'ouverture, ce qu'un SVG figé ne sait pas faire. */
.nav-burger {
    /* `flex: none` : dans une barre en flex le bouton se faisait comprimer à
       16px de large, soit une cible tactile qu'on rate au pouce. */
    flex: none;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0 8px;
    margin-left: 0.75rem;
    background: none;
    border: 0;
    cursor: pointer;
}

.nav-burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--cream, #f7f2e9);
    transition: transform 0.25s ease, opacity 0.2s ease;
}

body > nav.menu-ouvert .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body > nav.menu-ouvert .nav-burger span:nth-child(2) { opacity: 0; }
body > nav.menu-ouvert .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 968px) {
    .nav-burger { display: flex; }

    /* La liste devient un panneau sous la barre. `visibility` plutôt que
       `display` pour garder la transition, et pour que les liens restent hors
       du parcours clavier tant que c'est fermé. */
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 0.5rem 0 1rem;
        list-style: none;
        /* Fond plein, sans `backdrop-filter` : imbriqué dans une barre qui en a
           déjà un, le même réglage à 0.97 d'opacité laissait lire le titre du
           héros à travers les liens. Un menu n'a rien à gagner à être
           translucide, et tout à perdre à être illisible. */
        background: #1a1712;
        border-bottom: 1px solid rgba(247, 242, 233, 0.08);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    }

    .nav-links li { list-style: none; }

    .nav-links a {
        display: block;
        /* Cible tactile confortable : des liens de 20px empilés à 4px d'écart
           se ratent une fois sur trois au pouce. */
        padding: 0.85rem clamp(1rem, 6vw, 2rem);
        font-size: 1rem;
    }

    body > nav.menu-ouvert .nav-links {
        visibility: visible;
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 600px) {
    /* Logo 199px + bouton 125px + langues 70px font 394px pour 327px
       disponibles à 375px de large. Le mot « MarketRaccoon » coûte 151px à lui
       seul, et c'est ce qui se déduit le mieux : la marque reste
       reconnaissable à son icône. */
    .logo-text { display: none; }

    /* `--gouttiere` quand la page en definit une, sinon 1rem. La landing en
       pose une pour aligner la barre sur ses sections ; les autres pages n en
       ont pas et gardent la valeur d origine. */
    body > nav { padding: 0.9rem var(--gouttiere, 1rem); }
}

@media (max-width: 968px) {
    /* Les trois pages secondaires marquent la page courante par un contour
       arrondi, dessiné pour une pastille dans une barre horizontale. Empilé
       sur toute la largeur, il devient une gélule qui flotte au milieu du
       panneau. Un trait à gauche dit la même chose sans faire un bouton d'un
       lien qui n'en est pas un. */
    .nav-links a.nav-active {
        border: 0;
        /* Le rayon d'arrondi de la pastille survivait au retrait de la
           bordure et courbait le trait en croissant. */
        border-radius: 0;
        border-left: 3px solid rgba(247, 242, 233, 0.6);
        font-weight: 600;
    }
}

/* ===== La barre compactée au défilement =====
   `nav.scrolled` reprend le creux latéral du bureau, `clamp(3rem, 9vw, 10rem)`,
   dont le minimum de 48 px s'applique tel quel sur un téléphone. Le creux
   passait donc de 16 à 48 px de chaque côté DÈS QU'ON FAISAIT DÉFILER, et les
   64 px perdus suffisaient à coller le logo au bouton « Commencer » : écart
   mesuré à 375 px, 40 px en haut de page, 0 une fois défilé.

   Les valeurs reprennent exactement celles de l'état non défilé : se compacter
   doit changer la hauteur de la barre, pas sa largeur utile. Déclaré après
   `landing.css` et après le bloc `<style>` des trois autres pages, à
   spécificité égale c'est celui-ci qui gagne. */
@media (max-width: 968px) {
    body > nav.scrolled { padding: 0.7rem var(--gouttiere, 1.5rem); }
}

@media (max-width: 600px) {
    body > nav.scrolled { padding: 0.7rem var(--gouttiere, 1rem); }
}

/* ===== Le bouton « Commencer », recollé à droite =====
   Les 20 px de marge droite de `.nav-right` séparaient le bouton du sélecteur
   FR/EN. Celui-ci retiré, le bouton flottait au milieu : 110 px de vide côté
   logo, 32 côté menu, pour une marge qui ne séparait plus rien.

   Le bouton et le menu forment maintenant un groupe à droite, avec le seul
   écart du menu. Le vide restant tombe entre le logo et ce groupe, là où il
   sépare vraiment deux choses. */
@media (max-width: 968px) {
    .nav-right { margin-right: 0; }
    .nav-burger { margin-left: 0.65rem; }
}

/* ══════════ Ce qui se vise au doigt, sur les quatre pages autonomes ══════════
   Ces gabarits (`landing-new`, `faq`, `about`, `privacy`) sont des documents
   ENTIERS : ils n'etendent pas `base.html` et ne chargent donc pas
   `mobile.css`. Une correction globale ne les atteint pas — elle doit vivre
   ici, dans la seule feuille commune aux quatre.

   RELEVE DU 22/08/2026 a 375 px, sur la landing : logo 36 px, bascule de
   langue 30, liens de pied 16, adresses de contact 19, pastilles du carrousel
   13. Le seuil sous lequel on rate la cible au doigt est 44.

   ON AGRANDIT LA ZONE, JAMAIS LE TEXTE : la typographie de ces pages a ete
   reglee pour etre lue. Un lien de pied de page a 16 px de haut n'a pas besoin
   d'un texte plus gros, il a besoin d'air autour. */
@media (max-width: 900px) {
    nav .logo,
    .lang-switch a,
    footer li a,
    .contact-value a,
    .mr-cookies-texte a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Les pastilles du carrousel : 13 px, impossibles a viser. C'est le
       pseudo-element qui recoit le doigt — la pastille garde sa taille a
       l'ecran, sa zone tactile passe a 45 px. */
    .testimonial-dot { position: relative; }
    .testimonial-dot::after { content: ''; position: absolute; inset: -16px; }

    /* Sous 12 px on ne lit pas, on devine. Releve jusqu'a 9,6 px sur les
       etiquettes de la maquette de demonstration. */
    /* Les classes viennent d'un RELEVE : `preview-stat-label` a 9,6 px,
       `contact-label` a 9,9, `article-cat` a 10,9. On remonte au plancher
       de lisibilite sans toucher au reste de la hierarchie. */
    .preview-stat-label, .contact-label { font-size: 11.5px; letter-spacing: 0.03em; }
    .article-cat, .mr-etiquette, .badge, .tag { font-size: 11.5px; }
}