Outiref

Code source de l'URL : http://infra-nfc.com/

<!DOCTYPE html>
<html lang="fr">
<head>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-M94P4B77');</script>
    <!-- End Google Tag Manager -->
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="index, follow">
    <meta name="googlebot" content="index, follow">
    <link rel="icon" type="image/ico" href="/favicon.ico">
    
    <!-- Désactiver Turbo pour éviter les conflits avec Canvas -->
    <meta name="turbo-visit-control" content="disable">

    <!-- SEO -->
    <meta name="author" content="INFRA NFC">
        <meta name="description" content="INFRA NFC accompagne les TPE et PME dans leur transformation digitale avec des solutions sur mesure : infogérance, téléphonie VoIP, serveurs, développement d'applications métier.">
    <link rel="canonical" href="http://infra-nfc.com/">

    <!-- Open Graph / Twitter -->
        <meta property="og:type" content="website">
    <meta property="og:title" content="INFRA NFC - Votre partenaire IT pour PME">
    <meta property="og:description" content="Expert en infogérance, téléphonie VoIP, serveurs et développement Symfony/API/React. Solutions personnalisées, support réactif, supervision 24/7.">
    <meta property="og:url" content="http://infra-nfc.com/">
    <meta property="og:image" content="/images/og-accueil.jpg">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@infra_nfc">

    <title>INFRA NFC - Infogérance, VoIP et Développement IT pour TPE/PME</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,400&family=Istok+Web:wght@400;700&display=swap" rel="stylesheet">

    <!-- Stylesheets -->
            <link rel="stylesheet" href="/css/style.css">
        <link rel="stylesheet" href="/css/hosting.css">
        <link rel="stylesheet" href="/css/custom.css">
        <link rel="stylesheet" href="/css/font-icons.css">
        
    <!-- JavaScripts -->
            
<link rel="stylesheet" href="/assets/styles/app-GHt_kLz.css">
<script type="importmap" data-turbo-track="reload">
{
    "imports": {
        "app": "/assets/app-tSx_I0F.js",
        "/assets/bootstrap.js": "/assets/bootstrap-xCO4u8H.js",
        "/assets/styles/app.css": "data:application/javascript,",
        "@symfony/ux-react": "/assets/@symfony/ux-react/loader-nMSutMp.js",
        "/assets/build/react/controllers/Hello.js": "/assets/build/react/controllers/Hello-_bgAnvw.js",
        "/assets/build/react/controllers/HtmlEditor.js": "/assets/build/react/controllers/HtmlEditor-JG8muKX.js",
        "@symfony/stimulus-bundle": "/assets/@symfony/stimulus-bundle/loader-kxG46ja.js",
        "/assets/@symfony/ux-react/components.js": "/assets/@symfony/ux-react/components-6dR9_My.js",
        "react": "/assets/vendor/react/react.index-QKFP2bs.js",
        "@hotwired/stimulus": "/assets/vendor/@hotwired/stimulus/stimulus.index-S4zNcea.js",
        "/assets/@symfony/stimulus-bundle/controllers.js": "/assets/@symfony/stimulus-bundle/controllers-_TMNXP7.js",
        "/assets/@symfony/ux-react/render_controller.js": "/assets/@symfony/ux-react/render_controller-eJeX8hc.js",
        "/assets/@symfony/ux-turbo/turbo_controller.js": "/assets/@symfony/ux-turbo/turbo_controller-zl4y2v3.js",
        "/assets/controllers/hello_controller.js": "/assets/controllers/hello_controller-VYgvytJ.js",
        "@hotwired/turbo": "/assets/vendor/@hotwired/turbo/turbo.index-bxxZ9I5.js",
        "cookie-consent": "/assets/js/cookie-consent-BYY0UhW.js",
        "/assets/controllers/csrf_protection_controller.js": "/assets/controllers/csrf_protection_controller-E_gSC5e.js",
        "react-dom": "/assets/vendor/react-dom/react-dom.index-_7wLC9H.js",
        "scheduler": "/assets/vendor/scheduler/scheduler.index-xZGSAz0.js",
        "@uiw/react-codemirror": "/assets/vendor/@uiw/react-codemirror/react-codemirror.index-dBCvdbI.js",
        "@codemirror/lang-html": "/assets/vendor/@codemirror/lang-html/lang-html.index-2nX2K1U.js",
        "@codemirror/theme-one-dark": "/assets/vendor/@codemirror/theme-one-dark/theme-one-dark.index-f_a_Xrq.js",
        "codemirror": "/assets/vendor/codemirror/codemirror.index-4CL6c4H.js",
        "@codemirror/state": "/assets/vendor/@codemirror/state/state.index-fOkU_x3.js",
        "@codemirror/view": "/assets/vendor/@codemirror/view/view.index-l_xbYzE.js",
        "@codemirror/language": "/assets/vendor/@codemirror/language/language.index-iOXopYi.js",
        "remirror": "/assets/vendor/remirror/remirror.index-3KAkRpo.js",
        "@remirror/core": "/assets/vendor/@remirror/core/core.index-x-XFfTf.js",
        "@remirror/theme": "/assets/vendor/@remirror/theme/theme.index-4HGoBms.js",
        "@remirror/core-helpers": "/assets/vendor/@remirror/core-helpers/core-helpers.index-lQbwlgS.js",
        "@remirror/core-constants": "/assets/vendor/@remirror/core-constants/core-constants.index-mhbKG-y.js",
        "@remirror/core-utils": "/assets/vendor/@remirror/core-utils/core-utils.index-0fk6lj0.js",
        "@remirror/messages": "/assets/vendor/@remirror/messages/messages.index-cF5A2CA.js",
        "@remirror/pm/model": "/assets/vendor/@remirror/pm/model-VV1VtJ9.js",
        "@remirror/pm/state": "/assets/vendor/@remirror/pm/state-j2Dh0St.js",
        "@remirror/pm/commands": "/assets/vendor/@remirror/pm/commands-IiCsmP-.js",
        "@remirror/pm/view": "/assets/vendor/@remirror/pm/view-B0HpuJn.js",
        "@remirror/pm/inputrules": "/assets/vendor/@remirror/pm/inputrules-46Oak5L.js",
        "@remirror/pm/keymap": "/assets/vendor/@remirror/pm/keymap-_vX--3-.js",
        "@remirror/pm/paste-rules": "/assets/vendor/@remirror/pm/paste-rules-eAYritE.js",
        "@remirror/pm/suggest": "/assets/vendor/@remirror/pm/suggest-5aPnLPB.js",
        "nanoevents": "/assets/vendor/nanoevents/nanoevents.index-1PWEu-b.js",
        "tiny-warning": "/assets/vendor/tiny-warning/tiny-warning.index-haaH-Ki.js",
        "@remirror/core-types": "/assets/vendor/@remirror/core-types/core-types.index-U9JS9rz.js",
        "color2k": "/assets/vendor/color2k/color2k.index-JAG8MwE.js",
        "make-error": "/assets/vendor/make-error/make-error.index-838gqjc.js",
        "clsx": "/assets/vendor/clsx/clsx.index-Moypee7.js",
        "deepmerge": "/assets/vendor/deepmerge/deepmerge.index-TYCxsFM.js",
        "fast-deep-equal": "/assets/vendor/fast-deep-equal/fast-deep-equal.index-IUYkPuI.js",
        "object.omit": "/assets/vendor/object.omit/object.omit.index-5ngJX4s.js",
        "object.pick": "/assets/vendor/object.pick/object.pick.index-otcwQQX.js",
        "case-anything": "/assets/vendor/case-anything/case-anything.index-2zCtDJx.js",
        "throttle-debounce": "/assets/vendor/throttle-debounce/throttle-debounce.index-4gO-iLn.js",
        "@remirror/pm/transform": "/assets/vendor/@remirror/pm/transform-dFWvtqh.js",
        "css-in-js-utils": "/assets/vendor/css-in-js-utils/css-in-js-utils.index-PifKRKJ.js",
        "get-dom-document": "/assets/vendor/get-dom-document/get-dom-document.index-GOM14o1.js",
        "parenthesis": "/assets/vendor/parenthesis/parenthesis.index-Exu0ru4.js",
        "@remirror/pm": "/assets/vendor/@remirror/pm/pm.index-xrCbUVi.js",
        "prosemirror-model": "/assets/vendor/prosemirror-model/prosemirror-model.index-GMfc5Rb.js",
        "prosemirror-state": "/assets/vendor/prosemirror-state/prosemirror-state.index-bV1o9Mq.js",
        "prosemirror-commands": "/assets/vendor/prosemirror-commands/prosemirror-commands.index-0P7jKtj.js",
        "prosemirror-view": "/assets/vendor/prosemirror-view/prosemirror-view.index-jAd4zsI.js",
        "prosemirror-inputrules": "/assets/vendor/prosemirror-inputrules/prosemirror-inputrules.index-Rh36aKx.js",
        "prosemirror-keymap": "/assets/vendor/prosemirror-keymap/prosemirror-keymap.index-ZPqM8fD.js",
        "prosemirror-paste-rules": "/assets/vendor/prosemirror-paste-rules/prosemirror-paste-rules.index-OI2ZWlu.js",
        "prosemirror-suggest": "/assets/vendor/prosemirror-suggest/prosemirror-suggest.index-8MZT17s.js",
        "@remirror/types": "/assets/vendor/@remirror/types/types.index-CmqXspX.js",
        "is-extendable": "/assets/vendor/is-extendable/is-extendable.index-htDW5h4.js",
        "isobject": "/assets/vendor/isobject/isobject.index-gu572XH.js",
        "prosemirror-transform": "/assets/vendor/prosemirror-transform/prosemirror-transform.index-XewZJTA.js",
        "hyphenate-style-name": "/assets/vendor/hyphenate-style-name/hyphenate-style-name.index-LnmrYI_.js",
        "orderedmap": "/assets/vendor/orderedmap/orderedmap.index-X3jnVbk.js",
        "w3c-keyname": "/assets/vendor/w3c-keyname/w3c-keyname.index-vP61OVj.js",
        "escape-string-regexp": "/assets/vendor/escape-string-regexp/escape-string-regexp.index-fIVsQvy.js",
        "prosemirror-view/style/prosemirror.min.css": "data:application/javascript,document.head.appendChild%28Object.assign%28document.createElement%28%22link%22%29%2C%7Brel%3A%22stylesheet%22%2Chref%3A%22%2Fassets%2Fvendor%2Fprosemirror-view%2Fstyle%2Fprosemirror.min-VLPNpS_.css%22%7D%29%29",
        "is-plain-object": "/assets/vendor/is-plain-object/is-plain-object.index-RvyIPys.js",
        "@remirror/react": "/assets/vendor/@remirror/react/react.index-3K-UBNb.js",
        "@remirror/extension-react-component": "/assets/vendor/@remirror/extension-react-component/extension-react-component.index--HR2sF-.js",
        "@remirror/preset-react": "/assets/vendor/@remirror/preset-react/preset-react.index-gUVJyQn.js",
        "@remirror/react-components": "/assets/vendor/@remirror/react-components/react-components.index-rJeabeU.js",
        "@remirror/react-core": "/assets/vendor/@remirror/react-core/react-core.index-Me1zsRE.js",
        "@remirror/react-hooks": "/assets/vendor/@remirror/react-hooks/react-hooks.index-3SDeyiZ.js",
        "@remirror/react-renderer": "/assets/vendor/@remirror/react-renderer/react-renderer.index--WKkATR.js",
        "@remirror/react-utils": "/assets/vendor/@remirror/react-utils/react-utils.index-cCx9DyO.js",
        "@remirror/extension-placeholder": "/assets/vendor/@remirror/extension-placeholder/extension-placeholder.index-YbE6mfH.js",
        "@floating-ui/react": "/assets/vendor/@floating-ui/react/react.index-hWPSi2v.js",
        "@remirror/extension-positioner": "/assets/vendor/@remirror/extension-positioner/extension-positioner.index-vN7tpXX.js",
        "@seznam/compose-react-refs": "/assets/vendor/@seznam/compose-react-refs/compose-react-refs.index-Yt6J298.js",
        "@remirror/icons": "/assets/vendor/@remirror/icons/icons.index-DYkqlV5.js",
        "@remirror/preset-core": "/assets/vendor/@remirror/preset-core/preset-core.index-K2KX9aU.js",
        "@remirror/extension-events": "/assets/vendor/@remirror/extension-events/extension-events.index-wY4GPPa.js",
        "@remirror/extension-emoji": "/assets/vendor/@remirror/extension-emoji/extension-emoji.index-ilJhHBc.js",
        "multishift": "/assets/vendor/multishift/multishift.index-r09CGwG.js",
        "@remirror/extension-history": "/assets/vendor/@remirror/extension-history/extension-history.index-Bq7znSQ.js",
        "@remirror/extension-mention": "/assets/vendor/@remirror/extension-mention/extension-mention.index-o_6AQv8.js",
        "@remirror/extension-mention-atom": "/assets/vendor/@remirror/extension-mention-atom/extension-mention-atom.index-K8Gplo0.js",
        "@floating-ui/react-dom": "/assets/vendor/@floating-ui/react-dom/react-dom.index-esvTN6W.js",
        "aria-hidden": "/assets/vendor/aria-hidden/aria-hidden.index-0zkjtff.js",
        "tabbable": "/assets/vendor/tabbable/tabbable.index-kVIoW1i.js",
        "@remirror/extension-doc": "/assets/vendor/@remirror/extension-doc/extension-doc.index-zi-dBZt.js",
        "@remirror/extension-gap-cursor": "/assets/vendor/@remirror/extension-gap-cursor/extension-gap-cursor.index-mJvg5F5.js",
        "@remirror/extension-paragraph": "/assets/vendor/@remirror/extension-paragraph/extension-paragraph.index-g0IUFPg.js",
        "@remirror/extension-text": "/assets/vendor/@remirror/extension-text/extension-text.index-csKAjRy.js",
        "emojibase-regex/emoji.js": "/assets/vendor/emojibase-regex/emoji-h0jyPxU.js",
        "emojibase-regex/emoticon.js": "/assets/vendor/emojibase-regex/emoticon-FyQyQh3.js",
        "emojibase-regex/shortcode.js": "/assets/vendor/emojibase-regex/shortcode-qKo-jXf.js",
        "@ocavue/svgmoji-cjs": "/assets/vendor/@ocavue/svgmoji-cjs/svgmoji-cjs.index-7optVEh.js",
        "a11y-status": "/assets/vendor/a11y-status/a11y-status.index-SXzZ7fV.js",
        "compute-scroll-into-view": "/assets/vendor/compute-scroll-into-view/compute-scroll-into-view.index-miJXd5n.js",
        "@remirror/pm/history": "/assets/vendor/@remirror/pm/history-uZReWzR.js",
        "@floating-ui/dom": "/assets/vendor/@floating-ui/dom/dom.index-1vE1TK6.js",
        "@remirror/pm/gapcursor": "/assets/vendor/@remirror/pm/gapcursor-DwTne7v.js",
        "svgmoji": "/assets/vendor/svgmoji/svgmoji.index-i4jSAwz.js",
        "prosemirror-history": "/assets/vendor/prosemirror-history/prosemirror-history.index-pczKHT_.js",
        "@floating-ui/core": "/assets/vendor/@floating-ui/core/core.index-_BeBNq_.js",
        "prosemirror-gapcursor": "/assets/vendor/prosemirror-gapcursor/prosemirror-gapcursor.index--4E1EOu.js",
        "@svgmoji/blob": "/assets/vendor/@svgmoji/blob/blob.index-cwicMWX.js",
        "@svgmoji/core": "/assets/vendor/@svgmoji/core/core.index-mMEQPJY.js",
        "@svgmoji/noto": "/assets/vendor/@svgmoji/noto/noto.index-H76lMs-.js",
        "@svgmoji/openmoji": "/assets/vendor/@svgmoji/openmoji/openmoji.index-i4578bb.js",
        "@svgmoji/twemoji": "/assets/vendor/@svgmoji/twemoji/twemoji.index-92E5D2R.js",
        "rope-sequence": "/assets/vendor/rope-sequence/rope-sequence.index-xzv9Ys-.js",
        "@babel/runtime/helpers/esm/defineProperty": "/assets/vendor/@babel/runtime/helpers/esm/defineProperty-pW9qPpP.js",
        "@babel/runtime/helpers/esm/objectSpread2": "/assets/vendor/@babel/runtime/helpers/esm/objectSpread2-nYFux7z.js",
        "@babel/runtime/helpers/esm/classPrivateFieldGet": "/assets/vendor/@babel/runtime/helpers/esm/classPrivateFieldGet-WEs3cXS.js",
        "emojibase": "/assets/vendor/emojibase/emojibase.index-ZZEkxXN.js",
        "match-sorter": "/assets/vendor/match-sorter/match-sorter.index-OF671yk.js",
        "@babel/runtime/helpers/esm/objectWithoutProperties": "/assets/vendor/@babel/runtime/helpers/esm/objectWithoutProperties-lgvpd23.js",
        "idb-keyval": "/assets/vendor/idb-keyval/idb-keyval.index-qD0OEME.js",
        "prosemirror-gapcursor/style/gapcursor.min.css": "data:application/javascript,document.head.appendChild%28Object.assign%28document.createElement%28%22link%22%29%2C%7Brel%3A%22stylesheet%22%2Chref%3A%22%2Fassets%2Fvendor%2Fprosemirror-gapcursor%2Fstyle%2Fgapcursor.min-sNFTux_.css%22%7D%29%29",
        "@babel/runtime/helpers/esm/extends": "/assets/vendor/@babel/runtime/helpers/esm/extends-3bdNfiX.js",
        "remove-accents": "/assets/vendor/remove-accents/remove-accents.index-TWcIQLJ.js",
        "@remirror/extension-bold": "/assets/vendor/@remirror/extension-bold/extension-bold.index-EQdAf9Z.js",
        "@remirror/extension-italic": "/assets/vendor/@remirror/extension-italic/extension-italic.index-U4UsTr_.js",
        "@remirror/extension-heading": "/assets/vendor/@remirror/extension-heading/extension-heading.index-HJKEzZ1.js",
        "@remirror/extension-code": "/assets/vendor/@remirror/extension-code/extension-code.index-wbEJWgX.js",
        "@remirror/extension-link": "/assets/vendor/@remirror/extension-link/extension-link.index-iT6Yh9a.js",
        "extract-domain": "/assets/vendor/extract-domain/extract-domain.index-McZe03C.js",
        "react-draft-wysiwyg": "/assets/vendor/react-draft-wysiwyg/react-draft-wysiwyg.index-qVw2IyR.js",
        "draft-js": "/assets/vendor/draft-js/draft-js.index-isF7HRL.js",
        "immutable": "/assets/vendor/immutable/immutable.index-jWWWezz.js",
        "fbjs/lib/invariant": "/assets/vendor/fbjs/lib/invariant-hQdN83v.js",
        "fbjs/lib/UnicodeBidiService": "/assets/vendor/fbjs/lib/UnicodeBidiService-CxvAzAv.js",
        "fbjs/lib/nullthrows": "/assets/vendor/fbjs/lib/nullthrows-YBwOIc1.js",
        "fbjs/lib/cx": "/assets/vendor/fbjs/lib/cx-ImD28ju.js",
        "object-assign": "/assets/vendor/object-assign/object-assign.index-vDVVzjg.js",
        "fbjs/lib/UserAgent": "/assets/vendor/fbjs/lib/UserAgent-0wz9R95.js",
        "fbjs/lib/Keys": "/assets/vendor/fbjs/lib/Keys-nQ87OQM.js",
        "fbjs/lib/UnicodeBidi": "/assets/vendor/fbjs/lib/UnicodeBidi-87i5omH.js",
        "fbjs/lib/UnicodeBidiDirection": "/assets/vendor/fbjs/lib/UnicodeBidiDirection-fBBEonm.js",
        "fbjs/lib/containsNode": "/assets/vendor/fbjs/lib/containsNode-PLseR0D.js",
        "fbjs/lib/getActiveElement": "/assets/vendor/fbjs/lib/getActiveElement-INGxnfG.js",
        "fbjs/lib/Scroll": "/assets/vendor/fbjs/lib/Scroll-yWLMSYk.js",
        "fbjs/lib/Style": "/assets/vendor/fbjs/lib/Style-h2mi0XL.js",
        "fbjs/lib/getElementPosition": "/assets/vendor/fbjs/lib/getElementPosition-kVUQ60J.js",
        "fbjs/lib/getScrollPosition": "/assets/vendor/fbjs/lib/getScrollPosition-iOISGu6.js",
        "fbjs/lib/getViewportDimensions": "/assets/vendor/fbjs/lib/getViewportDimensions-qWE1_G-.js",
        "fbjs/lib/joinClasses": "/assets/vendor/fbjs/lib/joinClasses-fy4Tk48.js",
        "fbjs/lib/DataTransfer": "/assets/vendor/fbjs/lib/DataTransfer-v9PugP0.js",
        "fbjs/lib/setImmediate": "/assets/vendor/fbjs/lib/setImmediate-Ivyui5A.js",
        "fbjs/lib/UnicodeUtils": "/assets/vendor/fbjs/lib/UnicodeUtils-CqYHHZc.js",
        "fbjs/lib/warning": "/assets/vendor/fbjs/lib/warning-p8H2VM7.js",
        "fbjs/lib/TokenizeUtil": "/assets/vendor/fbjs/lib/TokenizeUtil-rwBa1yH.js",
        "fbjs/lib/URI": "/assets/vendor/fbjs/lib/URI-14ymkal.js",
        "draft-js/dist/Draft.min.css": "data:application/javascript,document.head.appendChild%28Object.assign%28document.createElement%28%22link%22%29%2C%7Brel%3A%22stylesheet%22%2Chref%3A%22%2Fassets%2Fvendor%2Fdraft-js%2Fdist%2FDraft.min-11LogTp.css%22%7D%29%29",
        "ua-parser-js": "/assets/vendor/ua-parser-js/ua-parser-js.index-m1l1xsu.js",
        "setimmediate": "/assets/vendor/setimmediate/setimmediate.index-nr8sxgZ.js",
        "draft-convert": "/assets/vendor/draft-convert/draft-convert.index-kbPTDxw.js",
        "invariant": "/assets/vendor/invariant/invariant.index-IJizbVI.js",
        "react-dom/server": "/assets/vendor/react-dom/server-cHO1TJ3.js",
        "@babel/runtime/helpers/esm/toConsumableArray": "/assets/vendor/@babel/runtime/helpers/esm/toConsumableArray-_mNpdxy.js",
        "@babel/runtime/helpers/esm/typeof": "/assets/vendor/@babel/runtime/helpers/esm/typeof-G00vsMm.js",
        "@floating-ui/react/utils": "/assets/vendor/@floating-ui/react/utils-5tDkhzW.js",
        "react/jsx-runtime": "/assets/vendor/react/jsx-runtime-KqnIVh7.js",
        "@floating-ui/utils/dom": "/assets/vendor/@floating-ui/utils/dom-9ctxOXy.js",
        "@floating-ui/utils": "/assets/vendor/@floating-ui/utils/utils.index-M2YHc9q.js",
        "draftjs-to-html": "/assets/vendor/draftjs-to-html/draftjs-to-html.index-mLqY8Re.js",
        "html-to-draftjs": "/assets/vendor/html-to-draftjs/html-to-draftjs.index-iXjnPkM.js",
        "draft-js-import-html": "/assets/vendor/draft-js-import-html/draft-js-import-html.index-E8xCSC0.js",
        "draft-js-import-element": "/assets/vendor/draft-js-import-element/draft-js-import-element.index-144AVsn.js",
        "draft-js-utils": "/assets/vendor/draft-js-utils/draft-js-utils.index-RyPn4p2.js",
        "synthetic-dom": "/assets/vendor/synthetic-dom/synthetic-dom.index-adaea0J.js",
        "fbjs/lib/emptyFunction": "/assets/vendor/fbjs/lib/emptyFunction-n8I7QB8.js"
    }
}
</script><script data-turbo-track="reload">
if (!HTMLScriptElement.supports || !HTMLScriptElement.supports('importmap')) (function () {
    const script = document.createElement('script');
    script.src = 'https://ga.jspm.io/npm:es-module-shims@1.10.0/dist/es-module-shims.js';
    script.setAttribute('crossorigin', 'anonymous');
    script.setAttribute('integrity', 'sha384-ie1x72Xck445i0j4SlNJ5W5iGeL3Dpa0zD48MZopgWsjNB/lt60SuG1iduZGNnJn');
    script.setAttribute('data-turbo-track', 'reload');
    document.head.appendChild(script);
})();
</script>
<link rel="modulepreload" href="/assets/app-tSx_I0F.js">
<link rel="modulepreload" href="/assets/bootstrap-xCO4u8H.js">
<link rel="modulepreload" href="/assets/@symfony/ux-react/loader-nMSutMp.js">
<link rel="modulepreload" href="/assets/build/react/controllers/Hello-_bgAnvw.js">
<link rel="modulepreload" href="/assets/build/react/controllers/HtmlEditor-JG8muKX.js">
<link rel="modulepreload" href="/assets/@symfony/stimulus-bundle/loader-kxG46ja.js">
<link rel="modulepreload" href="/assets/@symfony/ux-react/components-6dR9_My.js">
<link rel="modulepreload" href="/assets/vendor/react/react.index-QKFP2bs.js">
<link rel="modulepreload" href="/assets/vendor/@hotwired/stimulus/stimulus.index-S4zNcea.js">
<link rel="modulepreload" href="/assets/@symfony/stimulus-bundle/controllers-_TMNXP7.js">
<link rel="modulepreload" href="/assets/@symfony/ux-react/render_controller-eJeX8hc.js">
<link rel="modulepreload" href="/assets/@symfony/ux-turbo/turbo_controller-zl4y2v3.js">
<link rel="modulepreload" href="/assets/controllers/hello_controller-VYgvytJ.js">
<link rel="modulepreload" href="/assets/vendor/@hotwired/turbo/turbo.index-bxxZ9I5.js">
<link rel="modulepreload" href="/assets/js/cookie-consent-BYY0UhW.js">
<script type="module" data-turbo-track="reload">import 'app';import 'cookie-consent';</script>        
</head>
<body class="stretched" data-turbo="false">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M94P4B77"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
    <div id="wrapper">
            <div id="top-bar" class="text-center dark d-none d-md-block">
        <p class="mb-0 text-white" style="font-size: 14px;">
            Simplifiez votre informatique avec INFRA NFC, l'expert IT des TPE & PME.
            <a href="/contact" class="ms-2 font-primary fw-bold text-white"><u>Contactez-nous</u> &#8250;</a>
        </p>
    </div>

    <header id="header" class="full-header transparent-header dark" data-sticky-class="not-dark" data-responsive-class="not-dark">
        <div id="header-wrap">
            <div class="container">
                <div class="header-row">
                    <!-- Logo ============================================= -->
                    <div id="logo">
                        <a href="/">
                            <img class="logo-default" srcset="/svg/logo.svg" src="/svg/logo.svg" alt="Infra NFC">
                            <img class="logo-dark" srcset="/svg/logoNB.svg" src="/svg/logoNB.svg" alt="Infra NFC">
                        </a>
                    </div><!-- #logo end

                    <!-- <div class="header-misc">
                        <a href="#" class="button bg-contrast-1000 text-contrast-100 h-bg-dark h-text-light button-rounded">Espace Client</a>
                    </div> -->

                    <div class="primary-menu-trigger">
                        <button class="cnvs-hamburger" type="button" title="Ouvrir le menu">
                            <span class="cnvs-hamburger-box"><span class="cnvs-hamburger-inner"></span></span>
                        </button>
                    </div>

                    <!-- Primary Navigation
                    ============================================= -->
                    <nav class="primary-menu with-arrows">

                        <ul class="menu-container">
                            <li class="menu-item current"><a class="menu-link" href="/"><div>Accueil</div></a></li>
                            <li class="menu-item mega-menu"><a class="menu-link" href="/services"><div>Nos Services</div></a>
                                <div class="mega-menu-content mega-menu-style-2 border-top-0 not-dark">
                                    <div class="container">
                                        <div class="row">
                                            <ul class="sub-menu-container mega-menu-column col-lg-3">
                                                <li class="menu-item">
                                                    <div class="widget">
                                                        <div class="feature-box not-dark fbox-center mb-0">
                                                            <div class="fbox-icon mb-4">
                                                                <img src="/images/infogerance.png" class="rounded-0 bg-transparent text-start" alt="Image">
                                                            </div>
                                                            <div class="fbox-content">
                                                                <h3 class="fw-medium"><a href="/services/infogerance-informatique">Infogérance Informatique</a></h3>
                                                                <p class="d-none d-lg-block mb-0 fw-light">
                                                                    Supervision 24/7, maintenance proactive, sécurité renforcée : nous gérons toute votre infrastructure IT avec réactivité et précision.
                                                                </p>
                                                                <a href="/services/infogerance-informatique" class="btn btn-link mt-2 color p-0">En savoir plus &#8250;</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                            <ul class="sub-menu-container mega-menu-column col-lg-3">
                                                <li class="menu-item">
                                                    <div class="widget">
                                                        <div class="feature-box not-dark fbox-center mb-0">
                                                            <div class="fbox-icon mb-4">
                                                                <img src="/images/voip.png" class="rounded-0 bg-transparent text-start" alt="Image">
                                                            </div>
                                                            <div class="fbox-content">
                                                                <h3 class="fw-medium"><a href="/services/telephonie-voip">Téléphonie VoIP</a></h3>
                                                                <p class="d-none d-lg-block mb-0 fw-light">
                                                                    Téléphonie IP flexible, interconnectée avec vos outils métiers, pour des communications unifiées, fluides et sans rupture.
                                                                </p>
                                                                <a href="/services/telephonie-voip" class="btn btn-link mt-2 color p-0">En savoir plus &#8250;</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                            <ul class="sub-menu-container mega-menu-column col-lg-3">
                                                <li class="menu-item">
                                                    <div class="widget">
                                                        <div class="feature-box not-dark fbox-center mb-0">
                                                            <div class="fbox-icon mb-4">
                                                                <img src="/images/serveur.png" class="rounded-0 bg-transparent text-start" alt="Image">
                                                            </div>
                                                            <div class="fbox-content">
                                                                <h3 class="fw-medium"><a href="/services/infrastructure-serveurs">Infrastructure serveurs</a></h3>
                                                                <p class="d-none d-lg-block mb-0 fw-light">
                                                                    Serveurs physiques ou en datacenter, redondance, sauvegardes et haute disponibilité pour garantir votre continuité d'activité.
                                                                </p>
                                                                <a href="/services/infrastructure-serveurs" class="btn btn-link mt-2 color p-0">En savoir plus &#8250;</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                            <ul class="sub-menu-container mega-menu-column col-lg-3">
                                                <li class="menu-item">
                                                    <div class="widget">
                                                        <div class="feature-box not-dark fbox-center mb-0">
                                                            <div class="fbox-icon mb-4">
                                                                <img src="/images/developpement.png" class="rounded-0 bg-transparent text-start" alt="Image">
                                                            </div>
                                                            <div class="fbox-content">
                                                                <h3 class="fw-medium"><a href="/services/developpement-sur-mesure">Développement sur mesure</a></h3>
                                                                <p class="d-none d-lg-block mb-0 fw-light">
                                                                    Applications métiers, ERP, portails clients : nous développons vos outils digitaux 100% sur mesure avec Symfony, API Platform & React.
                                                                </p>
                                                                <a href="/services/developpement-sur-mesure" class="btn btn-link mt-2 color p-0">En savoir plus &#8250;</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="menu-item"><a class="menu-link" href="https://assist.rg.gg/" target="_blank"><div>Assistance</div></a></li>
                            <li class="menu-item"><a class="menu-link" href="/blog"><div>Blog</div></a>
                                <ul class="sub-menu-container">
                                                                                                                        <li class="menu-item">
                                                <a class="menu-link" href="/blog/categorie/articles-conseils">
                                                    <div>Articles conseils</div>
                                                </a>
                                            </li>
                                                                                    <li class="menu-item">
                                                <a class="menu-link" href="/blog/categorie/veille-actualite">
                                                    <div>Veille &amp; actualités IT</div>
                                                </a>
                                            </li>
                                                                                    <li class="menu-item">
                                                <a class="menu-link" href="/blog/categorie/fiches-pratiques">
                                                    <div>Fiches pratiques</div>
                                                </a>
                                            </li>
                                                                                    <li class="menu-item">
                                                <a class="menu-link" href="/blog/categorie/faq-technique">
                                                    <div>FAQ technique</div>
                                                </a>
                                            </li>
                                                                                <li class="menu-item menu-separator"></li>
                                        <li class="menu-item">
                                            <a class="menu-link" href="/blog">
                                                <div><strong>Tous les articles</strong></div>
                                            </a>
                                        </li>
                                                                    </ul>
                            </li>
                            <li class="menu-item"><a class="menu-link" href="#"><div>Outils</div></a>
                                <ul class="sub-menu-container">
                                    <li class="menu-item">
                                        <a class="menu-link" href="/nos-outils/test-debit">
                                            <div>Test de débit</div>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="menu-item"><a class="menu-link" href="/contact"><div>Contactez-nous</div></a></li>
                            <li class="menu-item"><a class="menu-link" href="/a-propos"><div>A propos</div></a></li>
                        </ul>

                    </nav><!-- #primary-menu end -->

                </div>
            </div>
        </div>
        <div class="header-wrap-clone"></div>
    </header><!-- #header end -->        		<!-- Slider
		============================================= -->
		<section id="slider" class="slider-element bg-angle include-header">

			<!-- Slider Background Map
			============================================= -->
			<img class="img-map parallax position-absolute" src="/svg/map-light.svg" alt="Image" data-0="opacity: 0.05;margin-top:0px" data-800="opacity: 0.5;margin-top:150px">

			<!-- Slider Background Cloud
			============================================= -->
			<div class="cloud-wrap">
				<div class="c1"><div class="cloud"></div></div>
				<div class="c2"><div class="cloud"></div></div>
				<div class="c3"><div class="cloud"></div></div>
				<div class="c4"><div class="cloud"></div></div>
				<div class="c5"><div class="cloud"></div></div>
			</div>

			<!-- Slider Titiles
			============================================= -->
			<div class="vertical-middle container dark">
				<div class="row justify-content-between align-items-center">
					<div class="col-md-5">
						<div class="slider-title">
							<h2 class="text-white mb-3 d-inline-block text-center">
                                En panne Informatique, Téléphonie ou Serveurs ? <br />On intervient immédiatement !
                            </h2>
						</div>
                        <div class="col-auto d-flex justify-content-center mt-3 d-md-none">
                            <div class="d-flex flex-column align-items-center rounded-pill px-4 py-2 me-3 mb-3 w-100">
                                <div class="d-flex align-items-center">
                                    <i class="bi-star-fill text-warning me-2"></i>
                                    <small class="fw-medium text-white">5/5 sur Google</small>
                                </div>
                                <small class="fw-medium text-white pt-2">Intervention Physique 100km autour de Belfort</small>
                                <small class="fw-medium text-white pt-2">Intervention à distance possible</small>
                            </div>
                        </div>
						<div class="text-center">
							<a href="tel:+33339830006" class="button bg-white text-dark button-light button-rounded button-large color ms-0 mt-3">
								Appelez-nous <i class="bi-arrow-right fw-semibold"></i>
							</a>
						</div>
					</div>
					<div class="col-md-5 d-none d-md-block">
						<img src="/images/slider.png" alt="Image">
					</div>
				</div>
			</div>

		</section><!-- #slider end -->

		<!-- Content
		============================================= -->
		<section id="content">
			<div class="content-wrap py-0 d-none d-lg-block">

				<div class="container">

					<!-- Slider negetive Box
					============================================= -->
					<div class="row justify-content-center slider-box-wrap">
						<div class="col-10">
							<div class="slider-bottom-box">
								<div class="row align-items-center">
									<div class="col-lg-4 mb-3 mb-lg-0">
										<h2 class="mb-3 h1 fw-light">Pourquoi choisir INFRA NFC&nbsp;?</h2>
										<p class="fw-normal text-muted mb-0">
                                            Une équipe expérimentée, un accompagnement réactif, et des solutions informatiques sur-mesure pour les entreprises ambitieuses.
                                        </p>
									</div>
									<div class="col-lg-4 col-sm-6">
										<ul class="iconlist m-0">
											<li><img src="/svg/checked.svg" width="20" height="20" alt="✓" class="me-2">Support&nbsp;<strong>réactif et humain</strong></li>
                                            <li class="pt-3"><img src="/svg/checked.svg" width="20" height="20" alt="✓" class="me-2">Supervision de vos systèmes&nbsp;<strong>24h/24</strong></li>
                                            <li class="pt-3"><img src="/svg/checked.svg" width="20" height="20" alt="✓" class="me-2">Développement&nbsp;<strong>100% sur mesure</strong></li>
										</ul>
									</div>
									<div class="col-lg-4 col-sm-6">
										<ul class="iconlist m-0">
											<li><img src="/svg/checked.svg" width="20" height="20" alt="✓" class="me-2">Infrastructures&nbsp;<strong>hautement sécurisées</strong></li>
                                            <li class="pt-3"><img src="/svg/checked.svg" width="20" height="20" alt="✓" class="me-2">Intégration&nbsp;<strong>fluide à vos outils métiers</strong></li>
                                            <li class="pt-3"><img src="/svg/checked.svg" width="20" height="20" alt="✓" class="me-2">Interlocuteur&nbsp;<strong>unique & dédié</strong></li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
                        <div class="row justify-content-center mt-5 d-md-none">
                <div class="col-10">
                    <div class="row mt-5">

                                                <div class="col-12 mb-4">
                            <div class="card h-100 border-0 shadow-sm bg-white">
                                <div class="card-body p-4">
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="flex-shrink-0">
                                            <img src="/images/avis/nicolas.png" alt="Nicolas Bockstahl" class="img-fluid" style="max-width: 50px; max-height: 50px; object-fit: contain;">
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <h6 class="mb-0 fw-bold">Nicolas Bockstahl</h6>
                                            <small class="text-muted">Société 1D Solutions</small>
                                            <div class="text-warning mt-1">
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="text-muted mb-0 fst-italic">
                                        "J'ai sollicité Infra Nfc pour gérer mon parc informatique et y apporter des améliorations. Ils sont réactifs et à l'écoute de nos demandes."
                                    </p>
                                </div>
                            </div>
                        </div>

                                                <div class="col-12 mb-4">
                            <div class="card h-100 border-0 shadow-sm bg-white">
                                <div class="card-body p-4">
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="flex-shrink-0">
                                            <div class="rounded-circle bg-success text-white d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; font-weight: bold;">
                                                RD
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <h6 class="mb-0 fw-bold">Robin PICCHEREDDU</h6>
                                            <small class="text-muted">Société Impacteo Digital</small>
                                            <div class="text-warning mt-1">
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="text-muted mb-0 fst-italic">
                                        "Nous sommes satisfaits de la gestion de nos serveurs et sites Internet par Dylan. Suivi régulier, rapports détaillés, il reçoit les alertes pour intervenir si besoin. Je recommande, merci pour le professionnalisme."
                                    </p>
                                </div>
                            </div>
                        </div>

                                                <div class="col-12 mb-4">
                            <div class="card h-100 border-0 shadow-sm bg-white">
                                <div class="card-body p-4">
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="flex-shrink-0">
                                            <div class="rounded-circle bg-info text-white d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; font-weight: bold;">
                                                <img src="/images/avis/pauline.png" alt="Pauline Tenebre" class="img-fluid" style="max-width: 50px; max-height: 50px; object-fit: contain;">
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <h6 class="mb-0 fw-bold">Pauline Tenebre</h6>
                                            <small class="text-muted">Société ORPI BELFORT</small>
                                            <div class="text-warning mt-1">
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="text-muted mb-0 fst-italic">
                                        "Monsieur Travers m'a efficacement guidée dans la définition de mon besoin. L'équipe est réactive, compétente et sympa. Bravo."
                                    </p>
                                </div>
                            </div>
                        </div>

                                                <div class="col-12 mb-4">
                            <div class="card h-100 border-0 shadow-sm bg-white">
                                <div class="card-body p-4">
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="flex-shrink-0">
                                            <div class="rounded-circle bg-warning text-white d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; font-weight: bold;">
                                                HM
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <h6 class="mb-0 fw-bold">Henda Magassa</h6>
                                            <small class="text-muted">Société Oud Evasion</small>
                                            <div class="text-warning mt-1">
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="text-muted mb-0 fst-italic">
                                        "Très satisfait des services de la société , un service client de qualité rapide et efficace. Résolution des problèmes en un temp remarquable ! J'ai recommander la société auprès de mes collaborateurs et sur différentes plateformes de communication. Merci !"
                                    </p>
                                </div>
                            </div>
                        </div>

                                                <div class="col-12 mb-4">
                            <div class="card h-100 border-0 shadow-sm bg-white">
                                <div class="card-body p-4">
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="flex-shrink-0">
                                            <div class="rounded-circle bg-danger text-white d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; font-weight: bold;">
                                                <img src="/images/avis/alfredo.png" alt="Alfredo" class="img-fluid" style="max-width: 50px; max-height: 50px; object-fit: contain;">
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <h6 class="mb-0 fw-bold">Alfredo</h6>
                                            <small class="text-muted">Société Louis Schneider</small>
                                            <div class="text-warning mt-1">
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="text-muted mb-0 fst-italic">
                                        "Une équipe très professionnelle, à l'écoute des besoins et de très bon conseil, en plus d'être très sympathique. Une réelle expertise et de larges connaissances dans tous ce qui concerne l'informatique d'entreprise et son infrastructure. Capable de proposer et de développer des solutions personnalisées selon les besoins."
                                    </p>
                                </div>
                            </div>
                        </div>

                                                <div class="col-12 mb-4">
                            <div class="card h-100 border-0 shadow-sm bg-white">
                                <div class="card-body p-4">
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="flex-shrink-0">
                                            <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; font-weight: bold;">
                                                MD
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <h6 class="mb-0 fw-bold">Marianne dorian</h6>
                                            <small class="text-muted">Belfort Tourisme</small>
                                            <div class="text-warning mt-1">
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="text-muted mb-0 fst-italic">
                                        "Belfort Tourisme travaille depuis de nombreuses années avec Infra NFC. Ce sont des professionnels qui répondent très rapidement à nos différentes attentes. Je les recommande."
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>

                                        <div class="text-center mt-4 p-4 rounded bg-white">
                        <div class="d-flex justify-content-center align-items-center mb-2">
                            <span class="display-6 fw-bold text-primary me-3">5.0</span>
                            <div>
                                <div class="text-warning mb-1" style="font-size: 1.2rem;">
                                    <i class="bi-star-fill"></i>
                                    <i class="bi-star-fill"></i>
                                    <i class="bi-star-fill"></i>
                                    <i class="bi-star-fill"></i>
                                    <i class="bi-star-fill"></i>
                                </div>
                                <small class="text-muted">Basé sur 23 avis Google</small>
                            </div>
                        </div>
                        <p class="mb-0 text-muted">
                            <a href="https://www.google.com/search?sa=X&sca_esv=d04797fb9f77f3ab&rlz=1C5CHFA_enFR1141FR1141&hl=fr-FR&tbm=lcl&sxsrf=AE3TifN9Eks2zMwMJO2a-L1r9aNbex7aJw:1751363168252&q=INFRA+NFC+-+Informatique+%26+T%C3%A9l%C3%A9phonie+Professionnel+Belfort+Avis&rflfq=1&num=20&stick=H4sIAAAAAAAAAONgkxIxNLcwMzQ3MTGxNDM0M7AwNTIwMd3AyPiK0cnTzy3IUcHPzVlBV8EzLy2_KDexJLOwNFVBTSHk8MqcwysLMvLzMlMVAory01KLizPz8_JScxScUnOASksUHMsyixexUsEQAFqnQ1alAAAA&rldimm=17861744496160852045&ved=2ahUKEwiHw5CcsJuOAxUgdaQEHbw3GR4Q9fQKegQIZhAF&biw=2548&bih=1279&dpr=1#lkt=LocalPoiReviews" target="_blank" class="text-decoration-none">
                                <strong>Consulter tous nos avis Google</strong>
                            </a>
                        </p>
                    </div>
                </div>
            </div>

                        <div class="heading-block text-center mt-6 mx-auto border-bottom-0" style="max-width: 700px">
                <h2>Nos services</h2>
                <p>Des solutions informatiques pensées pour les TPE/PME : infogérance, téléphonie VoIP, infrastructures serveurs et développement sur mesure.</p>
            </div>

            <div class="row justify-content-center">
                <div class="col-9">
                    <div class="row col-mb-50 mb-0 mt-4">

                                                <div class="col-lg-3 col-md-6 col-sm-6">
                            <div class="text-center p-4 h-100 d-flex flex-column">
                                <div class="mb-4 d-flex justify-content-center align-items-center" style="height: 100px;">
                                    <img src="/images/infogerance.png" alt="Infogérance" class="img-fluid" style="max-width: 120px; max-height: 100px; object-fit: contain;">
                                </div>
                                <div class="flex-grow-1 d-flex flex-column">
                                    <h3 class="fw-bold text-primary mb-3">Infogérance</h3>
                                    <p class="fw-light mb-4 flex-grow-1">Déléguez la gestion de votre parc informatique pour gagner en tranquillité et en performance. On s'occupe de tout, 24/7.</p>
                                    <div class="mt-auto">
                                        <a href="/services/infogerance-informatique" class="btn btn-sm btn-outline-primary">Découvrir</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                                                <div class="col-lg-3 col-md-6 col-sm-6">
                            <div class="text-center p-4 h-100 d-flex flex-column">
                                <div class="mb-4 d-flex justify-content-center align-items-center" style="height: 100px;">
                                    <img src="/images/voip.png" alt="Téléphonie VoIP" class="img-fluid" style="max-width: 120px; max-height: 100px; object-fit: contain;">
                                </div>
                                <div class="flex-grow-1 d-flex flex-column">
                                    <h3 class="fw-bold text-dark mb-3">Téléphonie VoIP</h3>
                                    <p class="fw-light mb-4 flex-grow-1">Passez à une téléphonie moderne, fluide et connectée à vos outils métiers. Moins de coupures, plus de productivité.</p>
                                    <div class="mt-auto">
                                        <a href="/services/telephonie-voip" class="btn btn-sm btn-outline-dark">Découvrir</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                                                <div class="col-lg-3 col-md-6 col-sm-6">
                            <div class="text-center p-4 h-100 d-flex flex-column">
                                <div class="mb-4 d-flex justify-content-center align-items-center" style="height: 100px;">
                                    <img src="/images/serveur.png" alt="Infrastructure Serveur" class="img-fluid" style="max-width: 120px; max-height: 100px; object-fit: contain;">
                                </div>
                                <div class="flex-grow-1 d-flex flex-column">
                                    <h3 class="fw-bold text-dark mb-3">Infrastructure Serveurs</h3>
                                    <p class="fw-light mb-4 flex-grow-1">Des serveurs robustes et bien gardés, sur site ou dans le cloud, pour assurer votre activité en continu.</p>
                                    <div class="mt-auto">
                                        <a href="/services/infrastructure-serveurs" class="btn btn-sm btn-outline-dark">Découvrir</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                                                <div class="col-lg-3 col-md-6 col-sm-6">
                            <div class="text-center p-4 h-100 d-flex flex-column">
                                <div class="mb-4 d-flex justify-content-center align-items-center" style="height: 100px;">
                                    <img src="/images/developpement.png" alt="Développement sur mesure" class="img-fluid" style="max-width: 120px; max-height: 100px; object-fit: contain;">
                                </div>
                                <div class="flex-grow-1 d-flex flex-column">
                                    <h3 class="fw-bold text-dark mb-3">Développement sur mesure</h3>
                                    <p class="fw-light mb-4 flex-grow-1">Vos outils métiers, comme vous les imaginez. On développe des applis 100% sur mesure, taillées pour vos besoins.</p>
                                    <div class="mt-auto">
                                        <a href="/services/developpement-sur-mesure" class="btn btn-sm btn-outline-dark">Découvrir</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <!-- Trusted Client Section
				============================================= -->
							<div class="section mt-3 mb-4 pt-0 bg-transparent">
				<div class="container">
					<div class="mx-auto" style="max-width: 1400px">
						<div class="heading-block text-center mx-auto border-bottom-0" style="max-width: 700px">
							<div class="before-heading">Déjà à nos côtés</div>
							<h2>Ils nous font confiance</h2>
							<p>Nos clients nous font confiance pour gérer leur informatique, leur téléphonie VoIP, leur infrastructure serveurs et leur développement sur mesure.</p>
						</div>
						<!-- Clients Images -->
						<div class="row text-center">
							<div class="col-lg-2 col-md-3 col-6"><a href="https://hans-associes.fr/" target="_blank"><img src="/images/clients/hans.png" alt="Hans & Associés" class="clients"></a></div>
							<div class="col-lg-2 col-md-3 col-6"><a href="https://www.belfort-tourisme.com/" target="_blank"><img src="/images/clients/belfort_tourisme.png" alt="Belfort Tourisme" class="clients"></a></div>
							<div class="col-lg-2 col-md-3 col-6"><a href="https://www.refletcommunication.com/fr" target="_blank"><img src="/images/clients/REFLET.png" alt="Reflet Communication" class="clients"></a></div>
							<div class="col-lg-2 col-md-3 col-6"><a href="https://cpmenfc.fr/" target="_blank"><img src="/images/clients/cpme.png" alt="CPME NFC" class="clients"></a></div>
							<div class="col-lg-2 col-md-3 col-6"><a href="https://www.inser-vet.com/laressourceriebelfort" target="_blank"><img src="/images/clients/ressourcerie.png" alt="La Ressourcerie 90" class="clients mt-4 mt-lg-0"></a></div>
							<div class="col-lg-2 col-md-3 col-6"><a href="https://www.e-m-t.fr/" target="_blank"><img src="/images/clients/emt.png" alt="Est Machines Techniques" class="clients mt-4 mt-lg-0"></a></div>
							<div class="col-lg-2 col-md-3 col-6"><a href="https://www.agence.gan.fr/205-gan-assurances-belfort-esplanade" target="_blank"><img src="/images/clients/gan.png" alt="Gan Assurances" class="clients mt-4"></a></div>
							<div class="col-lg-2 col-md-3 col-6"><a href="https://belfort.centreservices.fr/" target="_blank"><img src="/images/clients/centre_service.png" alt="Centre Services" class="clients mt-4"></a></div>
							<div class="col-lg-2 col-md-3 col-6"><a href="https://www.bestwestern.fr/fr/hotel-Belfort-Best-Western-Hotel-Belfort-93725" target="_blank"><img src="/images/clients/bw.png" alt="Best Western" class="clients mt-4"></a></div>
							<div class="col-lg-2 col-md-3 col-6"><a href="https://belfort.kyriad.com/fr-fr/" target="_blank"><img src="/images/clients/kyriad.png" alt="Kyriad" class="clients mt-4"></a></div>
							<div class="col-lg-2 col-md-3 col-6"><a href="https://admr-alsace.com/" target="_blank"><img src="/images/clients/admr.png" alt="Association Des Maisons de Retraites" class="clients mt-4"></a></div>
							<div class="col-lg-2 col-md-3 col-6"><a href="https://cemmaheyer.fr/" target="_blank"><img src="/images/clients/cemma.png" alt="Cemma Heyer Production" class="clients mt-4"></a></div>
						</div>
						</div>
					</div>
                                        <div class="text-center mt-5">
                        <a href="/contact" class="btn btn-lg btn-primary text-white px-5 py-3 shadow-sm rounded">Discutons de votre projet</a>
                    </div>
				</div>

                        <div class="heading-block text-center mt-3 mx-auto border-bottom-0" style="max-width: 700px">
                <h2>Chiffres clés et Témoignages</h2>
                <p>Des chiffres clés et des témoignages de nos clients pour vous aider à comprendre notre expertise et notre engagement.</p>
            </div>

            <div class="container col-10">
                <div class="position-relative p-5 mb-4 z-3 rounded shadow bg-white service-feature mt-5 mt-lg-0">
                    <div class="row align-items-center justify-content-center grid-border">
                        <div class="col-lg-3 text-center mb-5 mb-lg-0">
                            <div class="counter color fw-normal mb-2"><span class="display-4 fw-bold" data-from="40" data-to="175" data-refresh-interval="100" data-speed="2000"></span></div>
                            <h5 class="mb-0 h6 text-transform-none">Clients accompagnés</h5>
                        </div>

                        <div class="col-lg-3 text-center mb-5 mb-lg-0">
                            <div class="counter color fw-normal mb-2"><span class="display-4 fw-bold" data-from="0" data-to="100" data-refresh-interval="100" data-speed="2000"></span></div>
                            <h5 class="mb-0 h6 text-transform-none">Contrats actifs</h5>
                        </div>

                        <div class="col-lg-3 text-center">
                            <div class="counter color fw-normal mb-2"><span class="display-4 fw-bold" data-from="150" data-to="300" data-refresh-interval="100" data-speed="2000"></span></div>
                            <h5 class="mb-0 h6 text-transform-none">interventions mensuelles</h5>
                        </div>

                        <div class="col-lg-3 text-center">
                            <div class="counter color fw-normal mb-2"><span class="display-4 fw-bold" data-from="30" data-to="80" data-refresh-interval="100" data-speed="2000"></span></div>
                            <h5 class="mb-0 h6 text-transform-none">Serveurs gérés</h5>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row justify-content-center d-none d-lg-flex">
                <div class="col-10">
                    <div class="row mt-5">

                                                <div class="col-lg-4 col-md-6 mb-4">
                            <div class="card h-100 border-0 shadow-sm bg-white">
                                <div class="card-body p-4">
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="flex-shrink-0">
                                            <img src="/images/avis/nicolas.png" alt="Nicolas Bockstahl" class="img-fluid" style="max-width: 50px; max-height: 50px; object-fit: contain;">
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <h6 class="mb-0 fw-bold">Nicolas Bockstahl</h6>
                                            <small class="text-muted">Société 1D Solutions</small>
                                            <div class="text-warning mt-1">
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="text-muted mb-0 fst-italic">
                                        "J'ai sollicité Infra Nfc pour gérer mon parc informatique et y apporter des améliorations. Ils sont réactifs et à l'écoute de nos demandes."
                                    </p>
                                </div>
                            </div>
                        </div>

                                                <div class="col-lg-4 col-md-6 mb-4">
                            <div class="card h-100 border-0 shadow-sm bg-white">
                                <div class="card-body p-4">
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="flex-shrink-0">
                                            <div class="rounded-circle bg-success text-white d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; font-weight: bold;">
                                                RD
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <h6 class="mb-0 fw-bold">Robin PICCHEREDDU</h6>
                                            <small class="text-muted">Société Impacteo Digital</small>
                                            <div class="text-warning mt-1">
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="text-muted mb-0 fst-italic">
                                        "Nous sommes satisfaits de la gestion de nos serveurs et sites Internet par Dylan. Suivi régulier, rapports détaillés, il reçoit les alertes pour intervenir si besoin. Je recommande, merci pour le professionnalisme."
                                    </p>
                                </div>
                            </div>
                        </div>

                                                <div class="col-lg-4 col-md-6 mb-4">
                            <div class="card h-100 border-0 shadow-sm bg-white">
                                <div class="card-body p-4">
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="flex-shrink-0">
                                            <div class="rounded-circle bg-info text-white d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; font-weight: bold;">
                                                <img src="/images/avis/pauline.png" alt="Pauline Tenebre" class="img-fluid" style="max-width: 50px; max-height: 50px; object-fit: contain;">
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <h6 class="mb-0 fw-bold">Pauline Tenebre</h6>
                                            <small class="text-muted">Société ORPI BELFORT</small>
                                            <div class="text-warning mt-1">
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="text-muted mb-0 fst-italic">
                                        "Monsieur Travers m'a efficacement guidée dans la définition de mon besoin. L'équipe est réactive, compétente et sympa. Bravo."
                                    </p>
                                </div>
                            </div>
                        </div>

                                                <div class="col-lg-4 col-md-6 mb-4">
                            <div class="card h-100 border-0 shadow-sm bg-white">
                                <div class="card-body p-4">
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="flex-shrink-0">
                                            <div class="rounded-circle bg-warning text-white d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; font-weight: bold;">
                                                HM
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <h6 class="mb-0 fw-bold">Henda Magassa</h6>
                                            <small class="text-muted">Société Oud Evasion</small>
                                            <div class="text-warning mt-1">
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="text-muted mb-0 fst-italic">
                                        "Très satisfait des services de la société , un service client de qualité rapide et efficace. Résolution des problèmes en un temp remarquable ! J'ai recommander la société auprès de mes collaborateurs et sur différentes plateformes de communication. Merci !"
                                    </p>
                                </div>
                            </div>
                        </div>

                                                <div class="col-lg-4 col-md-6 mb-4">
                            <div class="card h-100 border-0 shadow-sm bg-white">
                                <div class="card-body p-4">
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="flex-shrink-0">
                                            <div class="rounded-circle bg-danger text-white d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; font-weight: bold;">
                                                <img src="/images/avis/alfredo.png" alt="Alfredo" class="img-fluid" style="max-width: 50px; max-height: 50px; object-fit: contain;">
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <h6 class="mb-0 fw-bold">Alfredo</h6>
                                            <small class="text-muted">Société Louis Schneider</small>
                                            <div class="text-warning mt-1">
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="text-muted mb-0 fst-italic">
                                        "Une équipe très professionnelle, à l'écoute des besoins et de très bon conseil, en plus d'être très sympathique. Une réelle expertise et de larges connaissances dans tous ce qui concerne l'informatique d'entreprise et son infrastructure. Capable de proposer et de développer des solutions personnalisées selon les besoins."
                                    </p>
                                </div>
                            </div>
                        </div>

                                                <div class="col-lg-4 col-md-6 mb-4">
                            <div class="card h-100 border-0 shadow-sm bg-white">
                                <div class="card-body p-4">
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="flex-shrink-0">
                                            <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; font-weight: bold;">
                                                MD
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <h6 class="mb-0 fw-bold">Marianne dorian</h6>
                                            <small class="text-muted">Belfort Tourisme</small>
                                            <div class="text-warning mt-1">
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                                <i class="bi-star-fill"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="text-muted mb-0 fst-italic">
                                        "Belfort Tourisme travaille depuis de nombreuses années avec Infra NFC. Ce sont des professionnels qui répondent très rapidement à nos différentes attentes. Je les recommande."
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>

                                        <div class="text-center mt-4 p-4 rounded bg-white">
                        <div class="d-flex justify-content-center align-items-center mb-2">
                            <span class="display-6 fw-bold text-primary me-3">5.0</span>
                            <div>
                                <div class="text-warning mb-1" style="font-size: 1.2rem;">
                                    <i class="bi-star-fill"></i>
                                    <i class="bi-star-fill"></i>
                                    <i class="bi-star-fill"></i>
                                    <i class="bi-star-fill"></i>
                                    <i class="bi-star-fill"></i>
                                </div>
                                <small class="text-muted">Basé sur 23 avis Google</small>
                            </div>
                        </div>
                        <p class="mb-0 text-muted">
                            <a href="https://www.google.com/search?sa=X&sca_esv=d04797fb9f77f3ab&rlz=1C5CHFA_enFR1141FR1141&hl=fr-FR&tbm=lcl&sxsrf=AE3TifN9Eks2zMwMJO2a-L1r9aNbex7aJw:1751363168252&q=INFRA+NFC+-+Informatique+%26+T%C3%A9l%C3%A9phonie+Professionnel+Belfort+Avis&rflfq=1&num=20&stick=H4sIAAAAAAAAAONgkxIxNLcwMzQ3MTGxNDM0M7AwNTIwMd3AyPiK0cnTzy3IUcHPzVlBV8EzLy2_KDexJLOwNFVBTSHk8MqcwysLMvLzMlMVAory01KLizPz8_JScxScUnOASksUHMsyixexUsEQAFqnQ1alAAAA&rldimm=17861744496160852045&ved=2ahUKEwiHw5CcsJuOAxUgdaQEHbw3GR4Q9fQKegQIZhAF&biw=2548&bih=1279&dpr=1#lkt=LocalPoiReviews" target="_blank" class="text-decoration-none">
                                <strong>Consulter tous nos avis Google</strong>
                            </a>
                        </p>
                    </div>
                </div>
            </div>
		</section><!-- #content end -->

                <!-- Section Contact avec design moderne -->
        <section class="section py-2" style="background-color: #f8f9fa;">
            <div class="container">
                <div class="text-center mb-5">
                    <h2 class="display-5 fw-bold text-dark mb-3">Parlons de votre projet</h2>
                    <p class="lead text-muted">Notre équipe est là pour vous accompagner dans votre transformation digitale</p>
                </div>

                <div class="row justify-content-center">
                    <div class="col-lg-12 col-xl-10">
                        <div class="card border-0 shadow-lg overflow-hidden" style="border-radius: 20px;">
                            <div class="row g-0">
                                <!-- Panel d'informations contact -->
                                <div class="col-lg-4 position-relative" style="background-color: #4EBFF0;">
                                    <div class="position-absolute w-100 h-100" style="background: rgba(0,0,0,0.05);"></div>
                                    <div class="p-5 position-relative text-white h-100 d-flex flex-column justify-content-center">
                                        <div class="mb-4">
                                            <h3 class="fw-bold mb-2 text-primary" style="font-size: 1.75rem;">Contactez-nous</h3>
                                            <p class="mb-0 opacity-90">Nous venons à votre rencontre pour comprendre vos besoins</p>
                                        </div>

                                        <div class="contact-info">
                                            <div class="d-flex align-items-start mb-4">
                                                <div class="flex-shrink-0 me-3">
                                                    <div class="bg-white bg-opacity-20 rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                                        <i class="bi-geo-alt-fill text-white" style="font-size: 1.2rem;"></i>
                                                    </div>
                                                </div>
                                                <div>
                                                    <h6 class="fw-bold mb-1 text-primary">Nos locaux</h6>
                                                    <p class="mb-0 opacity-90" style="font-size: 0.95rem;">
                                                        21b rue Aristide Briand<br>
                                                        90300 Offemont
                                                    </p>
                                                </div>
                                            </div>

                                            <div class="d-flex align-items-start mb-4">
                                                <div class="flex-shrink-0 me-3">
                                                    <div class="bg-white bg-opacity-20 rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                                        <i class="bi-telephone-fill text-white" style="font-size: 1.2rem;"></i>
                                                    </div>
                                                </div>
                                                <div>
                                                    <h6 class="fw-bold mb-1 text-primary">Téléphone</h6>
                                                    <a href="tel:0339830006" class="text-white text-decoration-none opacity-90 hover-opacity-100" style="font-size: 0.95rem;">
                                                        03 39 83 00 06
                                                    </a>
                                                </div>
                                            </div>

                                            <div class="d-flex align-items-start">
                                                <div class="flex-shrink-0 me-3">
                                                    <div class="bg-white bg-opacity-20 rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                                        <i class="bi-clock-fill text-white" style="font-size: 1.2rem;"></i>
                                                    </div>
                                                </div>
                                                <div>
                                                    <h6 class="fw-bold mb-1 text-primary">Horaires</h6>
                                                    <p class="mb-0 opacity-90" style="font-size: 0.95rem;">
                                                        Lundi au Vendredi<br>
                                                        9h-12h / 14h-18h
                                                    </p>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="mt-5 pt-4 border-top border-white border-opacity-20">
                                            <p class="mb-0 opacity-75" style="font-size: 0.9rem;">
                                                <i class="bi-shield-check me-2"></i>
                                                Réponse sous 2h en moyenne
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <!-- Formulaire modernisé -->
                                <div class="col-lg-8 bg-white">
                                    <div class="p-5">
                                        <h4 class="fw-bold text-dark mb-4">Décrivez-nous votre projet</h4>

                                        <form method="post" action="/contact/send" class="contact-form" id="contactForm">
                                            <input type="hidden" name="_token" value="ea5a966154df1.TOivEyv4zFxJgCPObmg61akoF8Q4Q6-y38lxdxyMNrE.DZnWUnu_qi0Y0nGMIQUXuP9NebdnC-XdmpgVI2b1cugYm9lWe7e1K3rDag">
                                            
                                            <input type="text" name="website" id="website" style="position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important;" tabindex="-1" autocomplete="off">

                                            <div aria-hidden="true" style="position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important;">
                                                <label for="company_url">Ne pas remplir ce champ</label>
                                                <input type="text" name="company_url" id="company_url" tabindex="-1" autocomplete="off">
                                            </div>

                                            <input type="hidden" name="form_timestamp" value="1789605741">
                                            
                                            <div class="row g-4">
                                                <div class="col-md-6">
                                                    <div class="form-floating">
                                                        <input type="text" id="nom" name="nom" class="form-control border-0 bg-light" placeholder="Votre nom" required style="border-radius: 12px; height: 60px;">
                                                        <label for="nom" class="text-muted">Nom complet *</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-floating">
                                                        <input type="tel" id="telephone" name="telephone" class="form-control border-0 bg-light" placeholder="Votre téléphone" required style="border-radius: 12px; height: 60px;">
                                                        <label for="telephone" class="text-muted">Téléphone *</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-floating">
                                                        <input type="email" id="email" name="email" class="form-control border-0 bg-light" placeholder="Votre email" required style="border-radius: 12px; height: 60px;">
                                                        <label for="email" class="text-muted">Adresse email *</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-floating">
                                                        <select id="interet" name="interet" class="form-select border-0 bg-light" required style="border-radius: 12px; height: 60px;">
                                                            <option value="">-- Choisissez un service --</option>
                                                            <option value="infogerance">🖥️ Infogérance</option>
                                                            <option value="voip">📞 Téléphonie VoIP</option>
                                                            <option value="serveurs">🔒 Infrastructure serveurs</option>
                                                            <option value="developpement">⚡ Développement sur mesure</option>
                                                            <option value="audit">🔍 Audit informatique</option>
                                                            <option value="autre">💡 Autre projet</option>
                                                        </select>
                                                        <label for="interet" class="text-muted">Service souhaité *</label>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="form-floating">
                                                        <textarea id="message" name="message" rows="4" class="form-control border-0 bg-light" placeholder="Décrivez votre projet..." required style="border-radius: 12px; height: 120px; resize: none;"></textarea>
                                                        <label for="message" class="text-muted">Comment pouvons-nous vous aider ? *</label>
                                                    </div>
                                                </div>
                                                <div class="col-12">
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <small class="text-muted">
                                                            <i class="bi-shield-check text-success me-1"></i>
                                                            Vos données sont protégées
                                                        </small>
                                                        <button type="submit" class="btn px-4 py-2 text-white fw-medium" style="background-color: #4EBFF0; border-radius: 8px; border: none; box-shadow: 0 2px 8px rgba(78, 191, 240, 0.2);">
                                                            Envoyer
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Badges de confiance -->
                        <div class="text-center mt-5">
                            <div class="row justify-content-center">
                                                                 <div class="col-auto">
                                     <div class="d-flex align-items-center bg-white rounded-pill px-4 py-2 shadow-sm me-3 mb-3">
                                         <i class="bi-clock me-2" style="color: #4EBFF0;"></i>
                                         <small class="fw-medium">Réponse rapide</small>
                                     </div>
                                 </div>
                                <div class="col-auto">
                                    <div class="d-flex align-items-center bg-white rounded-pill px-4 py-2 shadow-sm me-3 mb-3">
                                        <i class="bi-star-fill text-warning me-2"></i>
                                        <small class="fw-medium">5/5 sur Google</small>
                                    </div>
                                </div>
                                                                 <div class="col-auto">
                                     <div class="d-flex align-items-center bg-white rounded-pill px-4 py-2 shadow-sm mb-3">
                                         <i class="bi-people me-2" style="color: #4EBFF0;"></i>
                                         <small class="fw-medium">100+ clients satisfaits</small>
                                     </div>
                                 </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Modal de confirmation -->
        <div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="contactModalLabel">Message</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body" id="contactModalBody">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                    </div>
                </div>
            </div>
        </div>

        <style>
        /* Protection honeypot - champ invisible mais présent dans le DOM */
        #website {
            position: absolute !important;
            left: -9999px !important;
            top: -9999px !important;
            width: 1px !important;
            height: 1px !important;
            opacity: 0 !important;
            pointer-events: none !important;
            z-index: -1 !important;
            overflow: hidden !important;
        }
        </style>

        <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('contactForm');
            const submitBtn = form.querySelector('button[type="submit"]');
            const originalBtnText = submitBtn.innerHTML;

            form.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // Désactiver le bouton et afficher un indicateur de chargement
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Envoi en cours...';
                
                // Récupérer les données du formulaire
                const formData = new FormData(form);
                
                // Envoyer la requête AJAX
                fetch(form.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Succès
                        document.getElementById('contactModalBody').innerHTML = 
                            '<div class="text-center"><i class="bi bi-check-circle-fill text-success" style="font-size: 3rem;"></i><p class="mt-3">' + data.message + '</p></div>';
                        
                        // Réinitialiser le formulaire
                        form.reset();
                    } else {
                        // Erreur
                        let errorHtml = '<div class="alert alert-danger"><ul class="mb-0">';
                        if (data.errors) {
                            data.errors.forEach(error => {
                                errorHtml += '<li>' + error + '</li>';
                            });
                        } else {
                            errorHtml += '<li>' + data.message + '</li>';
                        }
                        errorHtml += '</ul></div>';
                        
                        document.getElementById('contactModalBody').innerHTML = errorHtml;
                    }
                    
                    // Afficher la modal
                    const modal = new bootstrap.Modal(document.getElementById('contactModal'));
                    modal.show();
                })
                .catch(error => {
                    console.error('Erreur:', error);
                    document.getElementById('contactModalBody').innerHTML = 
                        '<div class="alert alert-danger">Une erreur est survenue lors de l\'envoi du message. Veuillez réessayer.</div>';
                    
                    const modal = new bootstrap.Modal(document.getElementById('contactModal'));
                    modal.show();
                })
                .finally(() => {
                    // Réactiver le bouton
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalBtnText;
                });
            });
        });
        </script>    </div>
    <!-- Footer
		============================================= -->
		<footer id="footer" class="dark mt-5">
			<div class="container">

				<!-- Footer Widgets
				============================================= -->
				<div class="footer-widgets-wrap pb-4">

					<div class="row">

						<div class="col-md-4 col-sm-6 mb-0 mb-sm-4 mb-md-0">

							<div class="widget">

								<h4>Infra NFC</h4>

								<p>Infra NFC est une entreprise de services numériques qui propose des solutions innovantes pour les entreprises sur le territoire de Belfort et le Haut-Rhin.</p>

								<div style="background: url(/images/world-map.png) no-repeat left center; background-size: auto 100%;">
									<address>
										<strong>Adresse:</strong><br>
										21b rue Aristide Briand<br>
										90300 Offemont<br>
									</address>
									<strong>Téléphone:</strong> <a href="tel:0339830006">03 39 83 00 06</a><br>
									<strong>Email:</strong> <a href="mailto:welcome@infra-nfc.com">welcome@infra-nfc.com</a>
								</div>

							</div>

						</div>

						<div class="col-md-3 col-6 mt-5 mt-sm-0">

							<div class="widget">

								<h4>Services</h4>

								<ul class="list-unstyled iconlist ms-0">
									<li><a href="/services/infogerance-informatique">Infogérance Informatique</a></li>
									<li><a href="/services/telephonie-voip">Téléphonie VoIP</a></li>
									<li><a href="/services/infrastructure-serveurs">Infrastructure Serveurs</a></li>
									<li><a href="/services/developpement-sur-mesure">Développement sur mesure</a></li>
								</ul>

							</div>

							<div class="widget">

								<h4>Nos outils</h4>

								<ul class="list-unstyled iconlist ms-0">
									<li><a href="/nos-outils/test-debit">Test de débit</a></li>
								</ul>

							</div>

						</div>

						<div class="col-md-3 col-6 mt-5 mt-sm-0">

							<div class="widget">

								<h4>Blog</h4>

								<ul class="list-unstyled iconlist">
																														<li><a href="/blog/categorie/articles-conseils">Articles conseils</a></li>
																					<li><a href="/blog/categorie/veille-actualite">Veille &amp; actualités IT</a></li>
																					<li><a href="/blog/categorie/fiches-pratiques">Fiches pratiques</a></li>
																					<li><a href="/blog/categorie/faq-technique">FAQ technique</a></li>
																				<li><a href="/blog"><strong>Tous les articles</strong></a></li>
																	</ul>

							</div>

						</div>

						<div class="col-md-2 col-sm-6 mt-4 mt-sm-0">

							<div class="widget">

								<h4>Autres pages</h4>

								<ul class="list-unstyled iconlist ms-0">
									<li><a href="https://assist.rg.gg/" target="_blank">Assistance</a></li>
									<li><a href="/mentions-legales">Mentions légales</a></li>
									<li><a href="/a-propos">A propos</a></li>
									<li><a href="/contact">Contactez-nous</a></li>
								</ul>

							</div>
							<div class="widget">

								<h4>Social</h4>

								<ul class="list-unstyled iconlist">
									<li><i class="fa-brands fa-facebook-f text-white"></i><a href="https://www.facebook.com/infraNFC" target="_blank"> Facebook</a></li>
									<li><i class="fa-brands fa-linkedin text-white"></i><a href="https://www.linkedin.com/company/infra-nfc" target="_blank"> Linked'in</a></li>
								</ul>

							</div>

						</div>

					</div>

				</div><!-- .footer-widgets-wrap end -->

				<div class="line line-sm m-0"></div>

			</div>


			<!-- Copyrights
			============================================= -->
			<div id="copyrights" class="bg-transparent">
				<div class="container">

					<div class="row justify-content-between col-mb-30">
						<div class="col-12 col-md-auto text-center text-md-start">
							Copyrights &copy; 2026 Tous droits réservés par Infra NFC.<br>
							<div class="copyright-links">
								<a href="/mentions-legales">Mentions légales</a> / 
								<a href="/politique-de-confidentialite">Politique de confidentialité</a> / 
								<a href="#" data-cookie-preferences><i class="bi bi-cookie me-1"></i>Préférences cookies</a>
							</div>
						</div>

						<div class="col-12 col-md-auto text-center text-md-end">
							<div class="copyrights-menu copyright-links">
								<a href="/">Accueil</a>/<a href="/a-propos">A propos</a>/<a href="/contact">Contactez-nous</a>
							</div>
						</div>
					</div>

				</div>
			</div><!-- #copyrights end -->
		</footer><!-- #footer end -->
    <!-- Go To Top
	============================================= -->
	<div id="gotoTop" class="uil uil-angle-up"></div>
</body>

<!-- JavaScripts
	============================================= -->
	<script src="/js/plugins.min.js"></script>
    <script src="/js/functions.bundle.js"></script>

	<!-- Parallax Script
	============================================= -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>
	<script>!SEMICOLON.Mobile.any() && skrollr.init({forceHeight: false});</script>

	<!-- HotSpot -->
	<script src="/js/jquery.hotspot.js"></script>

	<!-- Range Slider -->
	<script src="/js/components/rangeslider.min.js"></script>

	<!-- Cookie Consent -->
	<script type="module">
		import { CookieConsent } from '/assets/js/cookie-consent-BYY0UhW.js';
		
		// Fonction d'initialisation sécurisée
		function initCookieConsent() {
			// Vérifier si déjà initialisé
			if (window.cookieConsent) {
				console.warn('CookieConsent déjà initialisé');
				return;
			}
			
			// Nettoyer les bandeaux existants avant initialisation
			const existingBanners = document.querySelectorAll('#cookie-consent-banner');
			if (existingBanners.length > 0) {
				console.warn('Bandeaux de cookies existants détectés, nettoyage...');
				existingBanners.forEach(banner => banner.remove());
			}
			
			// Initialiser le gestionnaire de cookies
			window.cookieConsent = new CookieConsent();
		}
		
		// Attendre que tous les scripts soient chargés
		window.addEventListener('load', () => {
			// Attendre un peu plus pour s'assurer que Bootstrap est initialisé
			setTimeout(() => {
				initCookieConsent();
			}, 200);
		});
	</script>

	<script>
		jQuery(window).on( 'load', function(){
			jQuery('#hotspot-img').hotSpot();
		});
	</script>
</html>