/* ============================================================
   Feuille de corrections — Les Vertus des Simples
   ------------------------------------------------------------
   Surcharges minimales appliquées PAR-DESSUS les CSS d'origine.
   Aucun fichier de design d'Antigravity n'est modifié : tout ce
   qui est ici peut être retiré sans rien casser d'autre.
   ============================================================ */

/* ------------------------------------------------------------
   1. Barre de navigation
   L'ajout du lien « Le Carnet » porte le menu à 9 entrées. Avec
   l'espacement d'origine (2,5 rem), la dernière passait à la
   ligne entre 1025 et 1500 px de large. On resserre uniquement
   dans cette fenêtre : au-delà, le design d'origine est intact,
   en dessous c'est le menu hamburger qui prend le relais.
   ------------------------------------------------------------ */

.nav-links a {
    white-space: nowrap;
}

@media (min-width: 1025px) and (max-width: 1500px) {
    .nav-links {
        gap: 1.5rem;
    }

    .nav-links a {
        letter-spacing: 1.6px;
    }
}

@media (min-width: 1025px) and (max-width: 1180px) {
    .nav-links {
        gap: 1.05rem;
    }

    .nav-links a {
        font-size: 0.71rem;
        letter-spacing: 1.1px;
    }
}

/* ------------------------------------------------------------
   2. Accordéon FAQ (page Équilibre)
   equilibre-new.css pose `.faq-answer { max-height: 0 }` mais
   n'a jamais défini la règle d'ouverture. Le JS ajoutait bien la
   classe `active`, l'icône tournait — et la réponse restait
   invisible. Les questions fréquentes n'étaient donc lisibles
   par personne depuis la mise en ligne.
   ------------------------------------------------------------ */

.faq-item.active .faq-answer {
    /* Valeur généreuse : max-height ne peut pas s'animer vers
       `auto`, on prend donc une borne haute suffisante pour la
       réponse la plus longue, y compris repliée sur mobile. */
    max-height: 60rem;
}

.faq-question {
    /* Rendre la question atteignable au clavier et annoncée
       correctement : le HTML d'origine utilise un <div>. */
    min-height: 44px;
}

.faq-answer a {
    color: var(--forest-soft, #204C2E);
    text-decoration: underline;
    text-decoration-color: rgba(201, 169, 110, 0.7);
    text-underline-offset: 3px;
}

.faq-answer a:hover {
    color: var(--gold, #C9A96E);
}

/* ------------------------------------------------------------
   3. Note légale de bas de page
   ------------------------------------------------------------
   Mesuré avant correction, identique sur toutes les pages :
   72 px de respiration AU-DESSUS de l'encadré, 8 px en dessous.
   L'encadré se retrouvait collé au footer, et comme il était posé
   sur le fond crème de la page alors que la section précédente et
   le footer sont en vert sauge, on voyait une bande claire coincée
   entre deux bandes vertes.

   Correction : la note adopte le fond du footer — l'ensemble ne
   forme plus qu'une seule zone de pied de page — et la respiration
   devient symétrique, 72 px de chaque côté de l'encadré.
   ------------------------------------------------------------ */

.pre-footer-note {
    padding: 4.5rem 6% 0;
    background: var(--sage-light, #E8F0E6);
    border-top: 1px solid rgba(155, 126, 164, 0.12);
}

/* Le trait de séparation est désormais porté par la note :
   le footer enchaîne sans nouvelle bordure. */
.pre-footer-note + .footer {
    border-top: none;
    padding-top: 4.5rem;
}

@media (max-width: 768px) {
    .pre-footer-note {
        padding: 3.2rem 5% 0;
    }

    .pre-footer-note + .footer {
        padding-top: 3.2rem;
    }
}

/* ------------------------------------------------------------
   4. Pied de page — lisibilité
   ------------------------------------------------------------
   Le footer est CLAIR (--sage-light, #E8F0E6) avec du texte foncé.
   Plusieurs éléments avaient pourtant été écrits comme pour un
   footer sombre. Contrastes mesurés avant correction :

     texte blanc du bloc avis .................... 1,16
     doré #C9A96E (nom, lien boutique, étoiles,
     bouton avis, crédit pjmweb.fr) .............. 1,92
     petits liens légaux #5A7361 ................. 4,44

   Le doré de la charte est inutilisable sur ce fond. On introduit
   ici un doré ancien --lvs-gold-ink (#7E6128), qui garde la même
   famille chromatique mais atteint 4,97. Le doré d'origine reste
   intact partout ailleurs sur le site (fonds sombres).
   ------------------------------------------------------------ */

.footer {
    --lvs-gold-ink: #7E6128;   /* doré lisible sur fond clair — 4,97 */
    --lvs-green-ink: #4A6B52;  /* vert de texte secondaire — 5,13 */
}

/* Nom de l'herboriste sous la marque */
.footer .footer-owner {
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-size: 1.02rem;
    color: var(--lvs-gold-ink);
    margin: 0.2rem 0 0.6rem;
    letter-spacing: 0.5px;
}

/* Lien boutique mis en avant dans la colonne « Mes disciplines » */
.footer .footer-links__highlight {
    color: var(--lvs-gold-ink);
    font-weight: 600;
}

.footer .footer-links__highlight:hover {
    color: var(--forest, #0A1C10);
}

/* Petits liens légaux et mention de crédit */
.footer .footer-bottom p,
.footer .footer-bottom a,
.footer .lvs-cookie-reopen,
.footer .footer-credit__eyebrow {
    color: var(--lvs-green-ink);
}

.footer .footer-bottom a:hover,
.footer .lvs-cookie-reopen:hover {
    color: var(--forest, #0A1C10);
}

/* Signature pjmweb.fr */
.footer .footer-credit__brand a {
    color: var(--lvs-gold-ink);
}

/* --- Bandeau « laisser un avis », en tête du footer ---
   Il vivait dans la colonne « Contact », comprimé sur 268 px.
   Il occupe maintenant toute la largeur, aligné sur la grille
   du footer, avec le texte à gauche et le bouton à droite. */

.footer .footer-review {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto 3.2rem;
    padding: 1.7rem 2.2rem;
    background: #fff;
    border: 1px solid rgba(126, 97, 40, 0.2);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(13, 26, 17, 0.06);
}

.footer .footer-review__intro {
    min-width: 0;
}

.footer .footer-review__stars {
    display: block;
    color: var(--lvs-gold-ink);
    font-size: 1rem;
    letter-spacing: 4px;
    margin-bottom: 0.4rem;
}

.footer .footer-review__text {
    font-family: var(--font-display, 'Marcellus', serif);
    font-size: 1.18rem;
    line-height: 1.35;
    color: var(--forest, #0A1C10);
    margin: 0 0 0.3rem;
}

.footer .footer-review__sub {
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--lvs-green-ink);
    margin: 0;
}

/* min-height 44px : cible tactile confortable sur mobile */
.footer .footer-review__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.6rem 1.3rem;
    border-radius: 40px;
    background: var(--forest, #0A1C10);
    color: #fff;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.71rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.3s ease;
}

.footer .footer-review__btn:hover {
    background: var(--forest-soft, #204C2E);
    color: #fff;
}

.footer .footer-review__btn i {
    font-size: 0.95rem;
    color: var(--gold-bright, #D4B87A);
}

/* Le bouton ne doit jamais se comprimer ni passer à la ligne */
.footer .footer-review__btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .footer .footer-review {
        flex-direction: column;
        text-align: center;
        gap: 1.3rem;
        padding: 1.5rem 1.4rem;
        margin-bottom: 2.6rem;
    }
}

@media (max-width: 600px) {
    .footer .footer-review {
        padding: 1.4rem 1.1rem;
    }

    .footer .footer-review__text { font-size: 1.08rem; }
    .footer .footer-review__sub  { font-size: 0.95rem; }

    .footer .footer-review__btn {
        width: 100%;
        white-space: normal;
    }
}

/* ------------------------------------------------------------
   5. Menu mobile
   ------------------------------------------------------------
   Le panneau d'origine centrait neuf liens de 1,6 rem espacés de
   2,5 rem : environ 660 px de contenu, sans `overflow`. Sur un
   téléphone court (iPhone SE, 667 px de haut) les derniers liens
   sortaient de l'écran sans qu'on puisse les atteindre.

   Corrigé ici : le panneau défile, la hauteur suit la zone
   réellement visible (100dvh), l'espacement est resserré, et le
   menu gagne une identité — en-tête de marque, page courante en
   doré, pied avec panier, téléphone et réseaux.
   ------------------------------------------------------------ */

.mobile-nav {
    /* 100dvh suit la barre d'adresse mobile ; 100vh reste le repli */
    height: 100vh;
    height: 100dvh;
    justify-content: flex-start;
    /* Filet de sécurité : le contenu est dimensionné pour tenir sur un
       écran (voir les clamp en vh ci-dessous), mais si un téléphone
       vraiment minuscule débordait quand même, les liens doivent rester
       atteignables. Ce n'est pas censé se déclencher. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Tout est exprimé en vh : le menu s'adapte à la hauteur du
       téléphone au lieu d'imposer des tailles fixes qui obligeaient
       à faire défiler sur les petits écrans. */
    /* Le plancher de 5.2rem (83 px) est imposé par la navbar fixe :
       en dessous, la brindille de l'en-tête passait sous la barre. */
    padding: clamp(5.2rem, 12vh, 6.4rem) 1.5rem clamp(0.7rem, 2vh, 1.8rem);
    background:
        radial-gradient(520px 320px at 50% 0%, rgba(201, 169, 110, 0.13), transparent 62%),
        radial-gradient(420px 300px at 90% 100%, rgba(143, 169, 140, 0.16), transparent 66%),
        linear-gradient(170deg, #0F2615 0%, #0A1C10 55%, #102A18 100%);
}

/* --- En-tête du panneau --- */

.mobile-nav__head {
    text-align: center;
    margin-bottom: clamp(0.35rem, 2vh, 1.7rem);
    padding-bottom: clamp(0.35rem, 1.6vh, 1.3rem);
    border-bottom: 1px solid rgba(201, 169, 110, 0.22);
    width: 100%;
    max-width: 320px;
}

.mobile-nav__sprig {
    display: block;
    width: clamp(62px, 20vw, 100px);
    margin: 0 auto clamp(0.15rem, 0.9vh, 0.8rem);
    color: var(--gold, #C9A96E);
    opacity: 0.9;
}

.mobile-nav__sprig svg { display: block; width: 100%; height: auto; }

.mobile-nav__brand {
    display: block;
    font-family: var(--font-display, 'Marcellus', serif);
    font-size: clamp(0.82rem, 2.1vh, 1rem);
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--cream, #FAF8F5);
    line-height: 1.4;
}

.mobile-nav__tagline {
    display: block;
    margin-top: 0.25rem;
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-style: italic;
    font-size: clamp(0.74rem, 1.8vh, 0.88rem);
    color: rgba(250, 248, 245, 0.62);
}

/* --- Liste des liens --- */

.mobile-nav .mobile-menu-links {
    gap: 0;
    width: 100%;
    max-width: 320px;
}

/* Hauteur et taille de texte proportionnelles à l'écran : les neuf
   entrées tiennent ainsi sans défilement, du petit téléphone au grand.
   Plancher à 38 px pour rester confortable au doigt. */
.mobile-nav .mobile-menu-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(38px, 5.1vh, 50px);
    width: 100%;
    padding: 0.25rem 0.5rem;
    font-size: clamp(0.88rem, 2.1vh, 1.06rem);
    letter-spacing: 2.4px;
    border-bottom: 1px solid rgba(250, 248, 245, 0.08);
}

.mobile-nav .mobile-menu-links a:last-child {
    border-bottom: none;
}

/* Page courante : doré, avec un repère à gauche */
.mobile-nav .mobile-menu-links a.active {
    position: relative;
    color: var(--gold, #C9A96E);
}

.mobile-nav .mobile-menu-links a.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 3px;
    background: var(--gold, #C9A96E);
}

/* --- Pied du panneau --- */

/* Pied compact : le bouton panier sur toute la largeur, puis le
   téléphone et les réseaux sur UNE SEULE ligne. Empilés, ils
   coûtaient une cinquantaine de pixels qui forçaient le défilement. */
.mobile-nav__foot {
    width: 100%;
    max-width: 320px;
    margin-top: clamp(0.7rem, 2vh, 1.6rem);
    padding-top: clamp(0.7rem, 1.8vh, 1.4rem);
    border-top: 1px solid rgba(201, 169, 110, 0.22);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(0.5rem, 1.4vh, 0.9rem);
}

.mobile-nav__cta,
.mobile-nav__phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: clamp(40px, 5.4vh, 48px);
    border-radius: 40px;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: clamp(0.64rem, 1.6vh, 0.74rem);
    letter-spacing: 1.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.mobile-nav__cta {
    flex: 1 1 100%;
    background: var(--gold, #C9A96E);
    color: var(--forest, #0A1C10);
}

.mobile-nav__phone {
    flex: 1 1 auto;
    padding: 0 0.8rem;
    border: 1px solid rgba(201, 169, 110, 0.45);
    color: var(--gold, #C9A96E);
}

.mobile-nav__socials {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    margin: 0;
}

.mobile-nav__socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(40px, 5.4vh, 48px);
    height: clamp(40px, 5.4vh, 48px);
    border-radius: 50%;
    border: 1px solid rgba(250, 248, 245, 0.18);
    color: rgba(250, 248, 245, 0.75);
    font-size: 0.9rem;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.mobile-nav__socials a:hover {
    color: var(--gold, #C9A96E);
    border-color: rgba(201, 169, 110, 0.5);
}

/* Écrans vraiment courts (iPhone SE de 1re génération et assimilés) :
   on retire le superflu plutôt que de rapetisser les cibles tactiles.
   La signature fait doublon avec le nom juste au-dessus, et les
   réseaux sociaux sont déjà présents dans le footer. */
@media (max-height: 620px) {
    .mobile-nav__tagline { display: none; }
    .mobile-nav__socials { display: none; }

    /* Panier et téléphone passent sur UNE seule ligne : masquer les
       réseaux ne suffisait pas, le téléphone restait seul sur la
       sienne et le pied occupait toujours deux rangées. */
    .mobile-nav__cta,
    .mobile-nav__phone {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 0.6rem;
        letter-spacing: 0.8px;
    }
}

/* ------------------------------------------------------------
   6. Galerie immersive — défilement latéral sur mobile
   ------------------------------------------------------------
   En dessous de 768 px, style.css passe la grille sur une seule
   colonne : les six photos s'empilaient alors sur près de 1 700 px
   de haut, et il fallait scroller longtemps pour passer la section.

   La grille devient un carrousel horizontal avec accroche
   (scroll-snap). La photo suivante dépasse volontairement du bord :
   c'est ce débord qui fait comprendre qu'on peut faire glisser.
   ------------------------------------------------------------ */

@media (max-width: 768px) {
    .gallery-grid {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap;
        gap: 0.9rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.9rem;
        /* masque la barre de défilement, le débord suffit à guider */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .gallery-grid::-webkit-scrollbar {
        display: none;
    }

    .gallery-grid img {
        flex: 0 0 82%;
        height: 320px !important;
        scroll-snap-align: center;
        /* le survol n'a pas de sens au doigt, et l'agrandissement
           provoquait un débordement horizontal de la page */
        transition: none;
    }

    .gallery-grid img:hover {
        transform: none;
        box-shadow: none;
    }
}

@media (max-width: 480px) {
    .gallery-grid img {
        flex-basis: 86%;
        height: 270px !important;
    }
}