/* ==========================================================================
   NAVBAR + FOOTER — comfort mobile
   Fichier autonome, chargé après styles.css sur les pages concernées,
   donc ses règles l'emportent sans dépendre de l'ordre interne.

   Constats relevés au navigateur (Chrome, 390 px) :

   1. LIENS DE PIED DE PAGE : hauteur de 15 px sur cinq pages
      (cgv, confidentialite, remboursement, mentions, contact).
      En dessous de 32 px, la cible tactile est trop petite. Chaque lien
      passe à 40 px de hauteur avec un padding interne, sans changer
      l'apparence ni la couleur.

   2. BOUTON RETOUR DE LA NAVBAR : sur index.html et les pages
      légales, le bouton est dessiné en pilule très étirée
      (env. 60 x 330 px sur la capture). La cause est un min-width
      hérité qui l'étire dans le conteneur flex. Il est ramené à un
      carré de 44 px, comme sur les autres pages.

   3. LIENS DU PIED DE PAGE : zone cliquable élargie sans modifier
      l'espacement vertical visible.

   Aucun changement de HTML, de JavaScript, de contenu ou de lien.
   ========================================================================== */

/* ---------- Navbar : bouton retour sur pilule trop large ---------- */
@media (max-width: 900px) {

  .site-header .btn-header,
  .site-header .back-btn,
  .header-right .btn-header {
    flex: 0 0 44px !important;
    width: 44px !important;
    max-width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    gap: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden;
  }

  /* L'éventuel libellé disparaît, l'icône reste.
     Le HTML contient « ← <span class="back-txt">Retour</span> ».
     La flèche est un caractère texte : on la masque puis on dessine
     une vraie flèche vectorielle à sa place, sinon le bouton
     deviendrait vide. */
  .site-header .btn-header .txt-full,
  .site-header .btn-header .txt-short,
  .site-header .btn-header .back-txt { display: none !important; }

  .site-header .btn-header,
  .site-header .back-btn { font-size: 0 !important; line-height: 0 !important; }

  /* Flèche vectorielle centrée, dessinée en CSS */
  .site-header .btn-header::before,
  .site-header .back-btn::before {
    content: '' !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  /* Les autres boutons de la navbar gardent leur taille confortable */
  .site-header .icon-btn,
  .site-header .lang-btn {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    border-radius: 10px !important;
  }
}

/* ---------- Pied de page : cibles tactiles confortables ---------- */
@media (max-width: 900px) {

  .site-footer .footer-col a,
  .site-footer .footer-brand a,
  .site-footer .footer-top a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 0;
    margin: 0;
    line-height: 1.4;
  }

  /* Les séparateurs · de la ligne compacte gardent leur rôle */
  .site-footer .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 0;
  }

  /* Le copyright n'est pas cliquable : hauteur normale */
  .site-footer .footer-bottom p { min-height: 0; }
}

/* ---------- Très petits écrans : on resserre sans casser ---------- */
@media (max-width: 360px) {
  .site-footer .footer-col a { min-height: 38px; padding: 7px 0; }
  .site-header .btn-header,
  .site-header .back-btn { flex-basis: 42px !important; width: 42px !important; min-width: 42px !important; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .site-footer .footer-col a,
  .site-header .btn-header { transition: none !important; }
}
/* Le lien « CGV » ne fait que 27 px de large : trop étroit pour une
   cible tactile. Un lien court est aligné au centre sur son propre
   minimum de largeur, sans modifier l'alignement de la ligne. */
@media (max-width: 900px) {
  .site-footer .footer-bottom a { min-width: 44px; justify-content: center; }
  .site-footer .footer-col a { min-width: 44px; }
}
/* ---------- Pied de page de la page compte ----------
   La page compte ne disposait d'aucun pied de page. Le bloc a ete
   ajoute avec le meme balisage que les autres pages du site, et la
   feuille nav-footer-mobile.css s'applique donc automatiquement.
   Seule la marge basse est ajustee pour que le pied de page ne
   colle pas au bas de l'ecran sur petit format. */
@media (max-width: 860px) {
  .dash-wrap { padding-bottom: 28px; }
  .site-footer.slim { margin-top: 8px; }
}