* { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; }
    a { color: inherit; text-decoration: none; }
    .navlink { cursor: pointer; }
    .card { border: 1px solid #e6ddcc; border-radius: 6px; }
    .badge { display: inline-block; width: fit-content; padding: 2px 8px; border-radius: 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }
    .btn { display: inline-block; padding: 12px 24px; border-radius: 999px; font-weight: 600; font-size: 14px; text-align: center; cursor: pointer; }
    .formule-card { position: relative; background: #ffffff; border: 1px solid #e6ddcc; border-radius: 10px; padding: 20px 16px 16px 16px; display: flex; flex-direction: column; gap: 6px; transition: transform 0.18s ease, box-shadow 0.18s ease; }
    .formule-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px -12px rgba(60, 50, 30, 0.25); }
    .formule-num { position: absolute; top: -14px; left: 18px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #faf6f0; font-size: 13px; font-weight: 700; }
    .formule-topbar { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 10px 10px 0 0; }
    .passage-dots { display: flex; gap: 4px; align-items: center; }
    .passage-dot { width: 7px; height: 7px; border-radius: 50%; }
    .teaser { border: 1px solid #e6ddcc; border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; background: #fff; }
    .teaser:hover { transform: translateY(-3px); box-shadow: 0 10px 22px -14px rgba(60,50,30,0.28); }
    .teaser-featured { cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; }
    .teaser-featured:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(60,50,30,0.32); }
    .whatsapp-fab:hover { transform: scale(1.08); box-shadow: 0 10px 24px -6px rgba(0,0,0,0.4); }

    /* Mode téléphone : évite que le menu reste collé en haut et prenne trop de place à l'écran,
       et réduit le bouton WhatsApp pour qu'il gêne moins le contenu sur petit écran. */
    html, body { overflow-x: hidden; }
    @media (max-width: 640px) {
      .site-header { position: relative !important; }
      .whatsapp-fab { width: 46px !important; height: 46px !important; bottom: 14px !important; right: 14px !important; }
      .whatsapp-fab svg { width: 22px !important; height: 22px !important; }

      /* Menu plus compact et centré sur téléphone au lieu d'être aligné à gauche sur 3 lignes */
      .nav-inner { justify-content: center !important; padding-top: 10px !important; padding-bottom: 10px !important; row-gap: 8px !important; }
      .nav-inner > div { gap: 10px !important; font-size: 12px !important; }
      .nav-inner > a.btn { padding: 8px 18px !important; font-size: 12.5px !important; }

      /* Moins de vide en haut/bas des sections pour réduire le scroll sur petit écran */
      .hero-pad { padding-top: 30px !important; padding-bottom: 22px !important; }
      .content-wrap { padding-top: 32px !important; padding-bottom: 36px !important; }
    }