:root {
        --font-sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "SF Pro", -apple-system-subheadline, "Helvetica Neue", Helvetica, Arial, sans-serif;
        --font-sf-rounded: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "SF Pro Display", sans-serif;
        --font-sf-mono: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
      }

      html, body, #root,
      h1, h2, h3, h4, h5, h6, p, a, button, input, textarea, select, label,
      span:not([class*="fa-"]):not(.fas):not(.far):not(.fab):not(.fa),
      div:not([class*="fa-"]):not(.fas):not(.far):not(.fab):not(.fa) {
        font-family: var(--font-sf);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        letter-spacing: -0.015em;
      }

      .font-runde, [class*="font-['Open_Runde'"] {
        font-family: var(--font-sf) !important;
      }

      code, pre, .font-mono, [class*="font-mono"] {
        font-family: var(--font-sf-mono) !important;
      }

      /* Protect FontAwesome Everywhere */
      .fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, [class*="fa-"] {
        font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
        font-style: normal !important;
        display: inline-block;
      }

      /* Strict sizing and positioning for Apple SF Symbol SVGs */
      svg.sf-symbol, .sf-symbol svg {
        display: inline-block !important;
        vertical-align: middle !important;
        flex-shrink: 0 !important;
      }
    
      /* Footer contact row: 4 boutons en ligne sur PC (>= 768px), 2 lignes sur mobile */
      #mobile-contact {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        margin-bottom: 2rem !important;
        padding-top: 1rem !important;
      }
      #mobile-contact > div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
      }
      @media (min-width: 768px) {
        #mobile-contact {
          flex-direction: row !important;
          flex-wrap: nowrap !important;
          gap: 12px !important;
        }
        #mobile-contact > div {
          flex-wrap: nowrap !important;
          gap: 12px !important;
        }
      }