<div class="mb-2 fw-bold">
    Partager cet article
</div>
<div class="mb-5" data-share="device facebook twitter linkedin" data-share-label="Share on" data-share-device="Share using device sharing"></div>
<script>
    function Share(element) {
        const options = element.dataset.share.split(' ');
        const shareIndex = options.findIndex(option => {
            return option === 'device'
        });

        let isMobileDevice = window.matchMedia("(max-width: 767px)").matches;

        function handleMatchMedia(mql) {
            isMobileDevice = mql.matches;
        }

        const mediaQueryList = window.matchMedia("(max-width: 767px)");
        mediaQueryList.addEventListener('change', handleMatchMedia);

        if (shareIndex > -1 && !isMobileDevice) {
            options.splice(shareIndex, 1);
        }

        if (shareIndex > -1 && isMobileDevice && 'share' in window.navigator) {
            const shareButton = h('button', {
                'aria-label': `${element.dataset.shareDevice}`,
                'data-share-item': ''
            }, [h('i')]);
            shareButton.addEventListener('click', () => {
                navigator.share({
                    title: document.title,
                    url: location.href
                }).catch(() => {
                    return
                });
            })
            element.appendChild(shareButton);
        } else {
            options.forEach(option => {
                const shareLink = h('a', {
                    'aria-label': `${element.dataset.shareLabel} ${option}`,
                    'data-share-item': option,
                    href: option === 'facebook' ? 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(location.href) : option === 'linkedin' ? 'https://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(location.href) : option === 'twitter' ? 'https://twitter.com/share?url=' + encodeURIComponent(location.href) : '',
                    onclick: option === 'facebook' ? 'window.open(\'https://www.facebook.com/sharer/sharer.php?u=\' + encodeURIComponent(location.href), \'social-share-dialog\', \'height=\' + Math.min(436, screen.availHeight) + \',width=\' + Math.min(626, screen.availWidth) + \',left=\' + Math.max(0, ((document.documentElement.clientWidth - 626) / 2 + window.screenX)) + \',top=\' + Math.max(0, ((document.documentElement.clientHeight - 436) / 2 + window.screenY))); return false;' : option === 'linkedin' ? 'window.open(\'https://www.linkedin.com/sharing/share-offsite/?url=\' + encodeURIComponent(location.href), \'social-share-dialog\', \'height=\' + Math.min(436, screen.availHeight) + \',width=\' + Math.min(626, screen.availWidth) + \',left=\' + Math.max(0, ((document.documentElement.clientWidth - 626) / 2 + window.screenX)) + \',top=\' + Math.max(0, ((document.documentElement.clientHeight - 436) / 2 + window.screenY))); return false;' : option === 'twitter' ? 'window.open(\'https://twitter.com/share?url=\' + encodeURIComponent(location.href), \'social-share-dialog\', \'height=\' + Math.min(436, screen.availHeight) + \',width=\' + Math.min(626, screen.availWidth) + \',left=\' + Math.max(0, ((document.documentElement.clientWidth - 626) / 2 + window.screenX)) + \',top=\' + Math.max(0, ((document.documentElement.clientHeight - 436) / 2 + window.screenY))); return false;' : '',
                    rel: 'noopener noreferrer',
                    target: '_blank'
                }, [h('i')])
                element.appendChild(shareLink);
            })
        }
    }

    function h(type, attributes, children = []) {
        const element = document.createElement(type);
        for (let key in attributes) {
            element.setAttribute(key, attributes[key]);
        }
        if (children.length) {
            children.forEach(child => {
                if (typeof child === 'string') {
                    element.appendChild(document.createTextNode(child));
                } else {
                    element.appendChild(child);
                }
            });
        }
        return element;
    }

    const shares = document.querySelectorAll(`[data-share]`);
    shares.forEach(element => {
        Share(element);
    });
</script>

/* share function  */
:root {
    --ico-share: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13.5 11c-0.706 0-1.342 0.293-1.797 0.763l-6.734-3.367c0.021-0.129 0.032-0.261 0.032-0.396s-0.011-0.267-0.032-0.396l6.734-3.367c0.455 0.47 1.091 0.763 1.797 0.763 1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5-2.5 1.119-2.5 2.5c0 0.135 0.011 0.267 0.031 0.396l-6.734 3.367c-0.455-0.47-1.091-0.763-1.797-0.763-1.381 0-2.5 1.119-2.5 2.5s1.119 2.5 2.5 2.5c0.706 0 1.343-0.293 1.797-0.763l6.734 3.367c-0.021 0.129-0.031 0.261-0.031 0.396 0 1.381 1.119 2.5 2.5 2.5s2.5-1.119 2.5-2.5c0-1.381-1.119-2.5-2.5-2.5z"></path></svg>');
    --ico-facebook: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9.5 3h2.5v-3h-2.5c-1.93 0-3.5 1.57-3.5 3.5v1.5h-2v3h2v8h3v-8h2.5l0.5-3h-3v-1.5c0-0.271 0.229-0.5 0.5-0.5z"></path></svg>');
    --ico-linkedin: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6 6h2.767v1.418h0.040c0.385-0.691 1.327-1.418 2.732-1.418 2.921 0 3.461 1.818 3.461 4.183v4.817h-2.885v-4.27c0-1.018-0.021-2.329-1.5-2.329-1.502 0-1.732 1.109-1.732 2.255v4.344h-2.883v-9z"></path><path d="M1 6h3v9h-3v-9z"></path><path d="M4 3.5c0 0.828-0.672 1.5-1.5 1.5s-1.5-0.672-1.5-1.5c0-0.828 0.672-1.5 1.5-1.5s1.5 0.672 1.5 1.5z"></path></svg>');
    --ico-twitter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M16 3.538c-0.588 0.263-1.222 0.438-1.884 0.516 0.678-0.406 1.197-1.050 1.444-1.816-0.634 0.375-1.338 0.65-2.084 0.797-0.6-0.638-1.453-1.034-2.397-1.034-1.813 0-3.281 1.469-3.281 3.281 0 0.256 0.028 0.506 0.084 0.747-2.728-0.138-5.147-1.444-6.766-3.431-0.281 0.484-0.444 1.050-0.444 1.65 0 1.138 0.578 2.144 1.459 2.731-0.538-0.016-1.044-0.166-1.488-0.409 0 0.013 0 0.028 0 0.041 0 1.591 1.131 2.919 2.634 3.219-0.275 0.075-0.566 0.116-0.866 0.116-0.212 0-0.416-0.022-0.619-0.059 0.419 1.303 1.631 2.253 3.066 2.281-1.125 0.881-2.538 1.406-4.078 1.406-0.266 0-0.525-0.016-0.784-0.047 1.456 0.934 3.181 1.475 5.034 1.475 6.037 0 9.341-5.003 9.341-9.341 0-0.144-0.003-0.284-0.009-0.425 0.641-0.459 1.197-1.038 1.637-1.697z"></path></svg>');
}

[data-share] {
    --bdrs: 50%;
    --bgc: lightgrey;
    --bxsh: 0 0 0 2px hsla(210, 24%, 15%, 0.65);
    --icon: var(--ico-share);
    --icon-bgc:  hsl(210, 24%, 35%);
    --icon-size: 60%;
    --m: 0 0.5rem;
    --size: 3rem;
    min-height: var(--size);
}

[data-share-item] {
    background-color: var(--bgc);
    border: 0;
    border-radius: var(--bdrs);
    display: inline-block;
    height: var(--size);
    margin: var(--m);
    outline: none;
    width: var(--size);
}

[data-share-item] i {
    background-color: var(--icon-bgc);
    display: inline-block;
    height: 100%;
    mask: no-repeat center center/var(--icon-size) var(--icon);
    -webkit-mask: no-repeat center center/var(--icon-size) var(--icon);
    width: 100%;
}

[data-share-item]:focus,
[data-share-item]:hover {
    box-shadow: var(--bxsh);
}