{"id":873,"date":"2026-01-06T19:54:38","date_gmt":"2026-01-06T19:54:38","guid":{"rendered":"https:\/\/www.lois-guillermond.com\/non-categorise\/surfboard-volume-calculator\/"},"modified":"2026-02-13T15:30:52","modified_gmt":"2026-02-13T15:30:52","slug":"calculer-volume-surf","status":"publish","type":"post","link":"https:\/\/www.lois-guillermond.com\/fr\/surf-culture\/calculer-volume-surf\/","title":{"rendered":"Calculer le volume de votre planche de surf ou trouver votre planche id\u00e9ale"},"content":{"rendered":"\n<h2>Calculez le Volume de Votre Planche en Quelques Secondes<\/h2>\n\n<p>Comprendre le volume de votre planche de surf est essentiel pour choisir la bonne planche et am\u00e9liorer vos performances dans l&rsquo;eau. Que vous cherchiez une nouvelle planche ou compariez votre quiver actuel, conna\u00eetre le volume exact vous aide \u00e0 prendre des d\u00e9cisions \u00e9clair\u00e9es concernant la flottabilit\u00e9, la puissance de rame et la capacit\u00e9 \u00e0 prendre des vagues.<\/p>\n\n<p>Notre Calculateur de Volume de Planche \u00e9limine les approximations. Il vous suffit d&rsquo;entrer les dimensions de votre planche\u2014longueur, largeur et \u00e9paisseur\u2014pour obtenir instantan\u00e9ment une mesure pr\u00e9cise du volume en litres. L&rsquo;outil fonctionne avec les unit\u00e9s m\u00e9triques (centim\u00e8tres) et imp\u00e9riales (pieds\/pouces), ce qui le rend accessible aux surfeurs du monde entier.<\/p>\n\n\n    <div id=\"surf-calc-fr-app\" style=\"margin: 30px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\">\n        <div style=\"background: white; border-radius: 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); padding: 50px; border: 1px solid #D4E9F0;\">\n            \n            <h3 style=\"color: #E63946; font-size: 32px; margin-bottom: 10px; text-align: center; font-weight: 700;\">\ud83c\udfc4 Calculateur de Volume de Planche<\/h3>\n            <p style=\"color: #718096; text-align: center; margin-bottom: 30px; font-size: 16px;\">Calculez le volume de votre planche de surf<\/p>\n\n            <!-- Toggle Unit\u00e9s -->\n            <div style=\"display: flex; background: #D4E9F0; border-radius: 12px; padding: 4px; margin-bottom: 40px; max-width: 400px; margin-left: auto; margin-right: auto;\">\n                <button id=\"btn-metric\" style=\"flex: 1; padding: 14px; border: none; background: white; color: #E63946; font-weight: 600; cursor: pointer; border-radius: 8px; font-size: 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\">\n                    M\u00e9trique (cm)\n                <\/button>\n                <button id=\"btn-imperial\" style=\"flex: 1; padding: 14px; border: none; background: transparent; color: #718096; font-weight: 600; cursor: pointer; border-radius: 8px; font-size: 15px;\">\n                    Imp\u00e9rial (ft\/in)\n                <\/button>\n            <\/div>\n\n            <!-- Curseurs M\u00e9triques -->\n            <div id=\"inputs-metric\">\n                <!-- Curseur Longueur -->\n                <div style=\"margin-bottom: 35px;\">\n                    <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;\">\n                        <label style=\"color: #4a5568; font-weight: 600; font-size: 16px;\">Longueur<\/label>\n                        <span style=\"color: #E63946; font-weight: 700; font-size: 18px;\"><span id=\"length-cm-display\">184<\/span> cm<\/span>\n                    <\/div>\n                    <input type=\"range\" id=\"length-cm\" min=\"120\" max=\"300\" value=\"184\" step=\"1\" style=\"width: 100%; height: 8px; border-radius: 5px; background: linear-gradient(to right, #D4E9F0 0%, #D4E9F0 35%, #2d3748 35%, #2d3748 100%); outline: none; -webkit-appearance: none; cursor: pointer;\">\n                    <div style=\"display: flex; justify-content: space-between; margin-top: 5px; font-size: 12px; color: #a0aec0;\">\n                        <span>120 cm<\/span>\n                        <span>300 cm<\/span>\n                    <\/div>\n                <\/div>\n\n                <!-- Curseur Largeur -->\n                <div style=\"margin-bottom: 35px;\">\n                    <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;\">\n                        <label style=\"color: #4a5568; font-weight: 600; font-size: 16px;\">Largeur<\/label>\n                        <span style=\"color: #E63946; font-weight: 700; font-size: 18px;\"><span id=\"width-cm-display\">45<\/span> cm<\/span>\n                    <\/div>\n                    <input type=\"range\" id=\"width-cm\" min=\"30\" max=\"70\" value=\"45\" step=\"0.5\" style=\"width: 100%; height: 8px; border-radius: 5px; background: linear-gradient(to right, #D4E9F0 0%, #D4E9F0 37.5%, #2d3748 37.5%, #2d3748 100%); outline: none; -webkit-appearance: none; cursor: pointer;\">\n                    <div style=\"display: flex; justify-content: space-between; margin-top: 5px; font-size: 12px; color: #a0aec0;\">\n                        <span>30 cm<\/span>\n                        <span>70 cm<\/span>\n                    <\/div>\n                <\/div>\n\n                <!-- Curseur \u00c9paisseur -->\n                <div style=\"margin-bottom: 35px;\">\n                    <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;\">\n                        <label style=\"color: #4a5568; font-weight: 600; font-size: 16px;\">\u00c9paisseur<\/label>\n                        <span style=\"color: #E63946; font-weight: 700; font-size: 18px;\"><span id=\"thickness-cm-display\">5.0<\/span> cm<\/span>\n                    <\/div>\n                    <input type=\"range\" id=\"thickness-cm\" min=\"3\" max=\"10\" value=\"5\" step=\"0.1\" style=\"width: 100%; height: 8px; border-radius: 5px; background: linear-gradient(to right, #D4E9F0 0%, #D4E9F0 28.6%, #2d3748 28.6%, #2d3748 100%); outline: none; -webkit-appearance: none; cursor: pointer;\">\n                    <div style=\"display: flex; justify-content: space-between; margin-top: 5px; font-size: 12px; color: #a0aec0;\">\n                        <span>3 cm<\/span>\n                        <span>10 cm<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Curseurs Imp\u00e9riaux -->\n            <div id=\"inputs-imperial\" style=\"display: none;\">\n                <!-- Curseur Longueur -->\n                <div style=\"margin-bottom: 35px;\">\n                    <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;\">\n                        <label style=\"color: #4a5568; font-weight: 600; font-size: 16px;\">Longueur<\/label>\n                        <span style=\"color: #E63946; font-weight: 700; font-size: 18px;\"><span id=\"length-ft-display\">6<\/span>'<span id=\"length-in-display\">0<\/span>\"<\/span>\n                    <\/div>\n                    <input type=\"range\" id=\"length-total-in\" min=\"48\" max=\"120\" value=\"72\" step=\"0.5\" style=\"width: 100%; height: 8px; border-radius: 5px; background: linear-gradient(to right, #D4E9F0 0%, #D4E9F0 33%, #2d3748 33%, #2d3748 100%); outline: none; -webkit-appearance: none; cursor: pointer;\">\n                    <div style=\"display: flex; justify-content: space-between; margin-top: 5px; font-size: 12px; color: #a0aec0;\">\n                        <span>4'0\"<\/span>\n                        <span>10'0\"<\/span>\n                    <\/div>\n                <\/div>\n\n                <!-- Curseur Largeur -->\n                <div style=\"margin-bottom: 35px;\">\n                    <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;\">\n                        <label style=\"color: #4a5568; font-weight: 600; font-size: 16px;\">Largeur<\/label>\n                        <span style=\"color: #E63946; font-weight: 700; font-size: 18px;\"><span id=\"width-in-display\">19.0<\/span>\"<\/span>\n                    <\/div>\n                    <input type=\"range\" id=\"width-in\" min=\"12\" max=\"28\" value=\"19\" step=\"0.25\" style=\"width: 100%; height: 8px; border-radius: 5px; background: linear-gradient(to right, #D4E9F0 0%, #D4E9F0 43.75%, #2d3748 43.75%, #2d3748 100%); outline: none; -webkit-appearance: none; cursor: pointer;\">\n                    <div style=\"display: flex; justify-content: space-between; margin-top: 5px; font-size: 12px; color: #a0aec0;\">\n                        <span>12\"<\/span>\n                        <span>28\"<\/span>\n                    <\/div>\n                <\/div>\n\n                <!-- Curseur \u00c9paisseur -->\n                <div style=\"margin-bottom: 35px;\">\n                    <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;\">\n                        <label style=\"color: #4a5568; font-weight: 600; font-size: 16px;\">\u00c9paisseur<\/label>\n                        <span style=\"color: #E63946; font-weight: 700; font-size: 18px;\"><span id=\"thickness-in-display\">2.0<\/span>\"<\/span>\n                    <\/div>\n                    <input type=\"range\" id=\"thickness-in\" min=\"1.5\" max=\"4\" value=\"2\" step=\"0.0625\" style=\"width: 100%; height: 8px; border-radius: 5px; background: linear-gradient(to right, #D4E9F0 0%, #D4E9F0 20%, #2d3748 20%, #2d3748 100%); outline: none; -webkit-appearance: none; cursor: pointer;\">\n                    <div style=\"display: flex; justify-content: space-between; margin-top: 5px; font-size: 12px; color: #a0aec0;\">\n                        <span>1.5\"<\/span>\n                        <span>4\"<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- R\u00e9sultat -->\n            <div id=\"result-box\" style=\"margin-top: 40px; padding: 35px; background: linear-gradient(135deg, #D4E9F0 0%, #E63946 100%); border-radius: 15px; text-align: center;\">\n                <div style=\"color: rgba(255, 255, 255, 0.95); font-size: 15px; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px;\">Volume de la Planche<\/div>\n                <div style=\"color: white; font-size: 56px; font-weight: 900; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\">\n                    <span id=\"volume-result\">26.91<\/span><span style=\"font-size: 28px; margin-left: 8px;\">L<\/span>\n                <\/div>\n            <\/div>\n\n            <div style=\"margin-top: 25px; padding: 18px; background: #D4E9F0; border-left: 4px solid #E63946; border-radius: 8px; font-size: 14px; color: #4a5568; line-height: 1.6;\">\n                <strong style=\"color: #E63946;\">\ud83d\udca1 Astuce :<\/strong> Le volume est calcul\u00e9 avec la formule : \n                Longueur \u00d7 Largeur \u00d7 \u00c9paisseur \u00d7 0.65 (coefficient de forme approximatif pour une planche standard)\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <style>\n    #surf-calc-fr-app input[type=\"range\"]::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 24px;\n        height: 24px;\n        border-radius: 50%;\n        background: #E63946;\n        cursor: pointer;\n        box-shadow: 0 2px 8px rgba(230, 57, 70, 0.4);\n        transition: all 0.2s ease;\n    }\n\n    #surf-calc-fr-app input[type=\"range\"]::-webkit-slider-thumb:hover {\n        transform: scale(1.2);\n        box-shadow: 0 4px 12px rgba(230, 57, 70, 0.6);\n    }\n\n    #surf-calc-fr-app input[type=\"range\"]::-moz-range-thumb {\n        width: 24px;\n        height: 24px;\n        border-radius: 50%;\n        background: #E63946;\n        cursor: pointer;\n        border: none;\n        box-shadow: 0 2px 8px rgba(230, 57, 70, 0.4);\n        transition: all 0.2s ease;\n    }\n\n    #surf-calc-fr-app input[type=\"range\"]::-moz-range-thumb:hover {\n        transform: scale(1.2);\n        box-shadow: 0 4px 12px rgba(230, 57, 70, 0.6);\n    }\n    <\/style>\n\n    <script>\n    jQuery(document).ready(function($) {\n        var currentUnit = 'metric';\n\n        function updateSliderBackground(slider, value, min, max) {\n            var percentage = ((value - min) \/ (max - min)) * 100;\n            slider.css('background', 'linear-gradient(to right, #D4E9F0 0%, #D4E9F0 ' + percentage + '%, #2d3748 ' + percentage + '%, #2d3748 100%)');\n        }\n\n        function calculateVolume() {\n            var lengthCm, widthCm, thicknessCm;\n            \n            if (currentUnit === 'metric') {\n                lengthCm = parseFloat($('#length-cm').val());\n                widthCm = parseFloat($('#width-cm').val());\n                thicknessCm = parseFloat($('#thickness-cm').val());\n            } else {\n                var totalInches = parseFloat($('#length-total-in').val());\n                var widthIn = parseFloat($('#width-in').val());\n                var thicknessIn = parseFloat($('#thickness-in').val());\n                \n                lengthCm = totalInches * 2.54;\n                widthCm = widthIn * 2.54;\n                thicknessCm = thicknessIn * 2.54;\n            }\n            \n            var volumeLiters = (lengthCm * widthCm * thicknessCm * 0.65) \/ 1000;\n            $('#volume-result').text(volumeLiters.toFixed(2));\n        }\n\n        $('#length-cm').on('input', function() {\n            $('#length-cm-display').text($(this).val());\n            updateSliderBackground($(this), $(this).val(), 120, 300);\n            calculateVolume();\n        });\n\n        $('#width-cm').on('input', function() {\n            var val = parseFloat($(this).val()).toFixed(1);\n            $('#width-cm-display').text(val);\n            updateSliderBackground($(this), $(this).val(), 30, 70);\n            calculateVolume();\n        });\n\n        $('#thickness-cm').on('input', function() {\n            var val = parseFloat($(this).val()).toFixed(1);\n            $('#thickness-cm-display').text(val);\n            updateSliderBackground($(this), $(this).val(), 3, 10);\n            calculateVolume();\n        });\n\n        $('#length-total-in').on('input', function() {\n            var totalInches = parseFloat($(this).val());\n            var feet = Math.floor(totalInches \/ 12);\n            var inches = Math.round(totalInches % 12);\n            $('#length-ft-display').text(feet);\n            $('#length-in-display').text(inches);\n            updateSliderBackground($(this), totalInches, 48, 120);\n            calculateVolume();\n        });\n\n        $('#width-in').on('input', function() {\n            var val = parseFloat($(this).val()).toFixed(2);\n            $('#width-in-display').text(val);\n            updateSliderBackground($(this), $(this).val(), 12, 28);\n            calculateVolume();\n        });\n\n        $('#thickness-in').on('input', function() {\n            var val = parseFloat($(this).val()).toFixed(2);\n            $('#thickness-in-display').text(val);\n            updateSliderBackground($(this), $(this).val(), 1.5, 4);\n            calculateVolume();\n        });\n\n        $('#btn-metric').click(function() {\n            currentUnit = 'metric';\n            $(this).css({'background': 'white', 'color': '#E63946', 'box-shadow': '0 2px 8px rgba(0, 0, 0, 0.1)'});\n            $('#btn-imperial').css({'background': 'transparent', 'color': '#718096', 'box-shadow': 'none'});\n            $('#inputs-metric').show();\n            $('#inputs-imperial').hide();\n            calculateVolume();\n        });\n        \n        $('#btn-imperial').click(function() {\n            currentUnit = 'imperial';\n            $(this).css({'background': 'white', 'color': '#E63946', 'box-shadow': '0 2px 8px rgba(0, 0, 0, 0.1)'});\n            $('#btn-metric').css({'background': 'transparent', 'color': '#718096', 'box-shadow': 'none'});\n            $('#inputs-metric').hide();\n            $('#inputs-imperial').show();\n            calculateVolume();\n        });\n\n        updateSliderBackground($('#length-cm'), 184, 120, 300);\n        updateSliderBackground($('#width-cm'), 45, 30, 70);\n        updateSliderBackground($('#thickness-cm'), 5, 3, 10);\n        updateSliderBackground($('#length-total-in'), 72, 48, 120);\n        updateSliderBackground($('#width-in'), 19, 12, 28);\n        updateSliderBackground($('#thickness-in'), 2, 1.5, 4);\n    });\n    <\/script>\n    \n\n\n\n<h2>Trouvez la Planche de Surf Parfaite pour Vous<\/h2>\n\n<p>Choisir la bonne planche de surf peut faire toute la diff\u00e9rence dans votre exp\u00e9rience de surf. Trop de volume et vous aurez du mal \u00e0 tourner ; pas assez et vous ne prendrez pas de vagues. Le mauvais type de planche pour votre niveau signifie de la frustration dans l&rsquo;eau au lieu de progression et de plaisir.<\/p>\n\n<p>Notre Trouveur de Planche \u00e9limine la confusion en fournissant des recommandations personnalis\u00e9es bas\u00e9es sur votre profil unique. En analysant votre poids, votre taille, votre niveau de comp\u00e9tence, vos conditions de vagues habituelles et votre style de surf, l&rsquo;outil calcule votre volume de planche id\u00e9al et sugg\u00e8re le type de planche parfait pour r\u00e9pondre \u00e0 vos besoins.<\/p>\n\n\n    <div id=\"surf-finder-fr-app\" style=\"margin: 30px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\">\n        <div style=\"background: white; border-radius: 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); padding: 50px; border: 1px solid #D4E9F0;\">\n            \n            <h3 style=\"color: #E63946; font-size: 32px; margin-bottom: 10px; text-align: center; font-weight: 700;\">\ud83c\udfc4 Trouveur de Planche<\/h3>\n            <p style=\"color: #718096; text-align: center; margin-bottom: 30px; font-size: 16px;\">Trouvez la planche parfaite pour votre style<\/p>\n\n            <!-- Toggle Unit\u00e9s -->\n            <div style=\"display: flex; background: #D4E9F0; border-radius: 12px; padding: 4px; margin-bottom: 40px; max-width: 400px; margin-left: auto; margin-right: auto;\">\n                <button id=\"finder-metric-btn\" style=\"flex: 1; padding: 14px; border: none; background: white; color: #E63946; font-weight: 600; cursor: pointer; border-radius: 8px; font-size: 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\">\n                    M\u00e9trique (kg\/cm)\n                <\/button>\n                <button id=\"finder-imperial-btn\" style=\"flex: 1; padding: 14px; border: none; background: transparent; color: #718096; font-weight: 600; cursor: pointer; border-radius: 8px; font-size: 15px;\">\n                    Imp\u00e9rial (lbs\/ft)\n                <\/button>\n            <\/div>\n\n            <!-- Curseurs M\u00e9triques -->\n            <div id=\"finder-metric-inputs\">\n                <!-- Curseur Poids -->\n                <div style=\"margin-bottom: 35px;\">\n                    <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;\">\n                        <label style=\"color: #4a5568; font-weight: 600; font-size: 16px;\">Poids<\/label>\n                        <span style=\"color: #E63946; font-weight: 700; font-size: 18px;\"><span id=\"weight-kg-display\">70<\/span> kg<\/span>\n                    <\/div>\n                    <input type=\"range\" id=\"weight-kg\" min=\"40\" max=\"120\" value=\"70\" step=\"1\" style=\"width: 100%; height: 8px; border-radius: 5px; background: linear-gradient(to right, #D4E9F0 0%, #D4E9F0 37.5%, #2d3748 37.5%, #2d3748 100%); outline: none; -webkit-appearance: none; cursor: pointer;\">\n                    <div style=\"display: flex; justify-content: space-between; margin-top: 5px; font-size: 12px; color: #a0aec0;\">\n                        <span>40 kg<\/span>\n                        <span>120 kg<\/span>\n                    <\/div>\n                <\/div>\n\n                <!-- Curseur Taille -->\n                <div style=\"margin-bottom: 35px;\">\n                    <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;\">\n                        <label style=\"color: #4a5568; font-weight: 600; font-size: 16px;\">Taille<\/label>\n                        <span style=\"color: #E63946; font-weight: 700; font-size: 18px;\"><span id=\"height-cm-display\">175<\/span> cm<\/span>\n                    <\/div>\n                    <input type=\"range\" id=\"height-cm\" min=\"150\" max=\"210\" value=\"175\" step=\"1\" style=\"width: 100%; height: 8px; border-radius: 5px; background: linear-gradient(to right, #D4E9F0 0%, #D4E9F0 41.7%, #2d3748 41.7%, #2d3748 100%); outline: none; -webkit-appearance: none; cursor: pointer;\">\n                    <div style=\"display: flex; justify-content: space-between; margin-top: 5px; font-size: 12px; color: #a0aec0;\">\n                        <span>150 cm<\/span>\n                        <span>210 cm<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Curseurs Imp\u00e9riaux -->\n            <div id=\"finder-imperial-inputs\" style=\"display: none;\">\n                <!-- Curseur Poids -->\n                <div style=\"margin-bottom: 35px;\">\n                    <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;\">\n                        <label style=\"color: #4a5568; font-weight: 600; font-size: 16px;\">Poids<\/label>\n                        <span style=\"color: #E63946; font-weight: 700; font-size: 18px;\"><span id=\"weight-lbs-display\">150<\/span> lbs<\/span>\n                    <\/div>\n                    <input type=\"range\" id=\"weight-lbs\" min=\"90\" max=\"260\" value=\"150\" step=\"1\" style=\"width: 100%; height: 8px; border-radius: 5px; background: linear-gradient(to right, #D4E9F0 0%, #D4E9F0 35.3%, #2d3748 35.3%, #2d3748 100%); outline: none; -webkit-appearance: none; cursor: pointer;\">\n                    <div style=\"display: flex; justify-content: space-between; margin-top: 5px; font-size: 12px; color: #a0aec0;\">\n                        <span>90 lbs<\/span>\n                        <span>260 lbs<\/span>\n                    <\/div>\n                <\/div>\n\n                <!-- Curseur Taille -->\n                <div style=\"margin-bottom: 35px;\">\n                    <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;\">\n                        <label style=\"color: #4a5568; font-weight: 600; font-size: 16px;\">Taille<\/label>\n                        <span style=\"color: #E63946; font-weight: 700; font-size: 18px;\"><span id=\"height-ft-display\">5<\/span>'<span id=\"height-in-display\">9<\/span>\"<\/span>\n                    <\/div>\n                    <input type=\"range\" id=\"height-total-in\" min=\"60\" max=\"84\" value=\"69\" step=\"1\" style=\"width: 100%; height: 8px; border-radius: 5px; background: linear-gradient(to right, #D4E9F0 0%, #D4E9F0 37.5%, #2d3748 37.5%, #2d3748 100%); outline: none; -webkit-appearance: none; cursor: pointer;\">\n                    <div style=\"display: flex; justify-content: space-between; margin-top: 5px; font-size: 12px; color: #a0aec0;\">\n                        <span>5'0\"<\/span>\n                        <span>7'0\"<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Niveau de Comp\u00e9tence -->\n            <div style=\"margin-bottom: 35px;\">\n                <label style=\"display: block; color: #4a5568; font-weight: 600; margin-bottom: 10px; font-size: 16px;\">Niveau de Comp\u00e9tence<\/label>\n                <select id=\"skill-level\" style=\"width: 100%; padding: 16px 18px; border: 2px solid #D4E9F0; border-radius: 10px; font-size: 17px; background: #f7fafc; color: #4a5568; cursor: pointer; box-sizing: border-box;\">\n                    <option value=\"\">S\u00e9lectionnez votre niveau<\/option>\n                    <option value=\"beginner\">D\u00e9butant - Je commence<\/option>\n                    <option value=\"intermediate\">Interm\u00e9diaire - Je prends des vagues facilement<\/option>\n                    <option value=\"advanced\">Avanc\u00e9 - Je g\u00e8re la plupart des conditions<\/option>\n                    <option value=\"expert\">Expert - Surf haute performance<\/option>\n                <\/select>\n            <\/div>\n\n            <!-- Type de Vagues -->\n            <div style=\"margin-bottom: 35px;\">\n                <label style=\"display: block; color: #4a5568; font-weight: 600; margin-bottom: 10px; font-size: 16px;\">Conditions de Vagues Habituelles<\/label>\n                <select id=\"wave-type\" style=\"width: 100%; padding: 16px 18px; border: 2px solid #D4E9F0; border-radius: 10px; font-size: 17px; background: #f7fafc; color: #4a5568; cursor: pointer; box-sizing: border-box;\">\n                    <option value=\"\">S\u00e9lectionnez le type de vagues<\/option>\n                    <option value=\"small\">Petites vagues (1-3 ft \/ 30-90 cm)<\/option>\n                    <option value=\"medium\">Vagues moyennes (3-5 ft \/ 90-150 cm)<\/option>\n                    <option value=\"large\">Grandes vagues (5+ ft \/ 150+ cm)<\/option>\n                    <option value=\"mixed\">Conditions mixtes<\/option>\n                <\/select>\n            <\/div>\n\n            <!-- Style de Surf -->\n            <div style=\"margin-bottom: 35px;\">\n                <label style=\"display: block; color: #4a5568; font-weight: 600; margin-bottom: 10px; font-size: 16px;\">Style de Surf<\/label>\n                <select id=\"surf-style\" style=\"width: 100%; padding: 16px 18px; border: 2px solid #D4E9F0; border-radius: 10px; font-size: 17px; background: #f7fafc; color: #4a5568; cursor: pointer; box-sizing: border-box;\">\n                    <option value=\"\">S\u00e9lectionnez votre style<\/option>\n                    <option value=\"cruising\">Cruising - Glisse tranquille et fluide<\/option>\n                    <option value=\"performance\">Performance - Man\u0153uvres et figures<\/option>\n                    <option value=\"allround\">Polyvalent - Un peu de tout<\/option>\n                <\/select>\n            <\/div>\n\n            <button id=\"finder-calculate-btn\" style=\"width: 100%; padding: 18px; background: #E63946; color: white; border: none; border-radius: 12px; font-size: 17px; font-weight: 700; cursor: pointer; margin-top: 10px; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease;\">\n                Trouver Ma Planche\n            <\/button>\n\n            <!-- R\u00e9sultats -->\n            <div id=\"finder-results\" style=\"margin-top: 40px; display: none;\">\n                <!-- Volume Recommand\u00e9 -->\n                <div style=\"padding: 35px; background: linear-gradient(135deg, #D4E9F0 0%, #E63946 100%); border-radius: 15px; text-align: center; margin-bottom: 25px;\">\n                    <div style=\"color: rgba(255, 255, 255, 0.95); font-size: 15px; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px;\">Volume Recommand\u00e9<\/div>\n                    <div style=\"color: white; font-size: 56px; font-weight: 900; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\">\n                        <span id=\"recommended-volume\">0<\/span><span style=\"font-size: 28px; margin-left: 8px;\">L<\/span>\n                    <\/div>\n                <\/div>\n\n                <!-- Recommandation Type de Planche -->\n                <div id=\"board-recommendation\" style=\"padding: 30px; background: white; border: 2px solid #D4E9F0; border-radius: 15px;\">\n                    <h3 style=\"color: #E63946; font-size: 22px; margin-bottom: 15px; font-weight: 700;\">\ud83d\udccb Type de Planche Recommand\u00e9<\/h3>\n                    <div id=\"board-type-content\"><\/div>\n                <\/div>\n\n                <!-- Guide des Dimensions -->\n                <div style=\"margin-top: 25px; padding: 20px; background: #D4E9F0; border-left: 4px solid #E63946; border-radius: 8px;\">\n                    <strong style=\"color: #E63946; font-size: 15px;\">\ud83d\udccf Dimensions Sugg\u00e9r\u00e9es :<\/strong>\n                    <div id=\"dimensions-guide\" style=\"margin-top: 10px; color: #4a5568; font-size: 14px; line-height: 1.8;\"><\/div>\n                <\/div>\n            <\/div>\n\n            <div style=\"margin-top: 25px; padding: 18px; background: #D4E9F0; border-left: 4px solid #E63946; border-radius: 8px; font-size: 14px; color: #4a5568; line-height: 1.6;\">\n                <strong style=\"color: #E63946;\">\ud83d\udca1 Note :<\/strong> Ce sont des recommandations g\u00e9n\u00e9rales. Vos pr\u00e9f\u00e9rences personnelles, votre condition physique et les conditions locales peuvent n\u00e9cessiter des ajustements. Consultez votre surf shop local pour des conseils personnalis\u00e9s.\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <style>\n    #surf-finder-fr-app input[type=\"range\"]::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 24px;\n        height: 24px;\n        border-radius: 50%;\n        background: #E63946;\n        cursor: pointer;\n        box-shadow: 0 2px 8px rgba(230, 57, 70, 0.4);\n        transition: all 0.2s ease;\n    }\n\n    #surf-finder-fr-app input[type=\"range\"]::-webkit-slider-thumb:hover {\n        transform: scale(1.2);\n        box-shadow: 0 4px 12px rgba(230, 57, 70, 0.6);\n    }\n\n    #surf-finder-fr-app input[type=\"range\"]::-moz-range-thumb {\n        width: 24px;\n        height: 24px;\n        border-radius: 50%;\n        background: #E63946;\n        cursor: pointer;\n        border: none;\n        box-shadow: 0 2px 8px rgba(230, 57, 70, 0.4);\n        transition: all 0.2s ease;\n    }\n\n    #surf-finder-fr-app input[type=\"range\"]::-moz-range-thumb:hover {\n        transform: scale(1.2);\n        box-shadow: 0 4px 12px rgba(230, 57, 70, 0.6);\n    }\n    <\/style>\n\n    <script>\n    jQuery(document).ready(function($) {\n        var currentUnit = 'metric';\n\n        function updateSliderBackground(slider, value, min, max) {\n            var percentage = ((value - min) \/ (max - min)) * 100;\n            slider.css('background', 'linear-gradient(to right, #D4E9F0 0%, #D4E9F0 ' + percentage + '%, #2d3748 ' + percentage + '%, #2d3748 100%)');\n        }\n\n        $('#weight-kg').on('input', function() {\n            $('#weight-kg-display').text($(this).val());\n            updateSliderBackground($(this), $(this).val(), 40, 120);\n        });\n\n        $('#height-cm').on('input', function() {\n            $('#height-cm-display').text($(this).val());\n            updateSliderBackground($(this), $(this).val(), 150, 210);\n        });\n\n        $('#weight-lbs').on('input', function() {\n            $('#weight-lbs-display').text($(this).val());\n            updateSliderBackground($(this), $(this).val(), 90, 260);\n        });\n\n        $('#height-total-in').on('input', function() {\n            var totalInches = parseInt($(this).val());\n            var feet = Math.floor(totalInches \/ 12);\n            var inches = totalInches % 12;\n            $('#height-ft-display').text(feet);\n            $('#height-in-display').text(inches);\n            updateSliderBackground($(this), totalInches, 60, 84);\n        });\n\n        $('#finder-metric-btn').click(function() {\n            currentUnit = 'metric';\n            $(this).css({'background': 'white', 'color': '#E63946', 'box-shadow': '0 2px 8px rgba(0, 0, 0, 0.1)'});\n            $('#finder-imperial-btn').css({'background': 'transparent', 'color': '#718096', 'box-shadow': 'none'});\n            $('#finder-metric-inputs').show();\n            $('#finder-imperial-inputs').hide();\n            $('#finder-results').hide();\n        });\n        \n        $('#finder-imperial-btn').click(function() {\n            currentUnit = 'imperial';\n            $(this).css({'background': 'white', 'color': '#E63946', 'box-shadow': '0 2px 8px rgba(0, 0, 0, 0.1)'});\n            $('#finder-metric-btn').css({'background': 'transparent', 'color': '#718096', 'box-shadow': 'none'});\n            $('#finder-metric-inputs').hide();\n            $('#finder-imperial-inputs').show();\n            $('#finder-results').hide();\n        });\n\n        $('#finder-calculate-btn').hover(\n            function() { $(this).css({'transform': 'translateY(-2px)', 'box-shadow': '0 10px 25px rgba(230, 57, 70, 0.4)'}); },\n            function() { $(this).css({'transform': 'translateY(0)', 'box-shadow': 'none'}); }\n        );\n        \n        $('#finder-calculate-btn').click(function() {\n            var weightKg, heightCm;\n            \n            if (currentUnit === 'metric') {\n                weightKg = parseFloat($('#weight-kg').val());\n                heightCm = parseFloat($('#height-cm').val());\n            } else {\n                var weightLbs = parseFloat($('#weight-lbs').val());\n                var totalInches = parseFloat($('#height-total-in').val());\n                \n                weightKg = weightLbs * 0.453592;\n                heightCm = totalInches * 2.54;\n            }\n            \n            var skillLevel = $('#skill-level').val();\n            var waveType = $('#wave-type').val();\n            var surfStyle = $('#surf-style').val();\n            \n            if (!skillLevel || !waveType || !surfStyle) {\n                alert('Veuillez remplir tous les champs.');\n                return;\n            }\n            \n            var baseVolume = weightKg;\n            var skillMultiplier = {\n                'beginner': 1.8,\n                'intermediate': 1.3,\n                'advanced': 0.9,\n                'expert': 0.7\n            };\n            \n            var recommendedVolume = baseVolume * (skillMultiplier[skillLevel] || 1);\n            \n            if (waveType === 'small') {\n                recommendedVolume *= 1.1;\n            } else if (waveType === 'large') {\n                recommendedVolume *= 0.9;\n            }\n            \n            if (surfStyle === 'cruising') {\n                recommendedVolume *= 1.1;\n            } else if (surfStyle === 'performance') {\n                recommendedVolume *= 0.95;\n            }\n            \n            var boardType = '';\n            var boardDescription = '';\n            var boardEmoji = '';\n            \n            if (skillLevel === 'beginner') {\n                boardType = 'Mousse ou Longboard';\n                boardEmoji = '\ud83c\udfc4';\n                boardDescription = '<p style=\"margin-bottom: 10px;\"><strong>Parfait pour apprendre !<\/strong><\/p>' +\n                    '<p style=\"color: #718096; line-height: 1.8;\">Une planche en mousse ou un longboard (8\\'0\" - 9\\'6\" \/ 244-290 cm) offre une stabilit\u00e9 maximale et une rame facile. ' +\n                    'Le volume \u00e9lev\u00e9 vous aide \u00e0 prendre plus de vagues et \u00e0 gagner en confiance. Les planches en mousse sont tol\u00e9rantes et s\u00fbres pour les d\u00e9butants.<\/p>';\n            } else if (skillLevel === 'intermediate') {\n                if (surfStyle === 'cruising') {\n                    boardType = 'Funboard ou Mid-Length';\n                    boardEmoji = '\ud83c\udf0a';\n                    boardDescription = '<p style=\"margin-bottom: 10px;\"><strong>Polyvalent et fun !<\/strong><\/p>' +\n                        '<p style=\"color: #718096; line-height: 1.8;\">Un funboard (7\\'0\" - 8\\'0\" \/ 213-244 cm) ou mid-length offre un bon \u00e9quilibre entre stabilit\u00e9 et maniabilit\u00e9. ' +\n                        'Facile \u00e0 ramer, tol\u00e9rant, et amusant dans la plupart des conditions.<\/p>';\n                } else {\n                    boardType = 'Fish ou Hybride';\n                    boardEmoji = '\ud83d\udc1f';\n                    boardDescription = '<p style=\"margin-bottom: 10px;\"><strong>Progressez dans vos skills !<\/strong><\/p>' +\n                        '<p style=\"color: #718096; line-height: 1.8;\">Un fish (5\\'6\" - 6\\'4\" \/ 168-193 cm) ou shortboard hybride est id\u00e9al pour d\u00e9velopper vos virages et votre vitesse. ' +\n                        'Ces planches fonctionnent bien dans les petites et moyennes vagues et sont plus maniables que les longboards.<\/p>';\n                }\n            } else if (skillLevel === 'advanced') {\n                if (surfStyle === 'performance') {\n                    boardType = 'Shortboard Performance';\n                    boardEmoji = '\u26a1';\n                    boardDescription = '<p style=\"margin-bottom: 10px;\"><strong>Haute performance !<\/strong><\/p>' +\n                        '<p style=\"color: #718096; line-height: 1.8;\">Un shortboard performance (5\\'8\" - 6\\'4\" \/ 173-193 cm) permet des man\u0153uvres agressives, des virages serr\u00e9s et du surf vertical. ' +\n                        'R\u00e9actif et rapide, con\u00e7u pour un surf puissant et critique.<\/p>';\n                } else if (surfStyle === 'cruising') {\n                    boardType = 'Longboard Performance';\n                    boardEmoji = '\ud83c\udfaf';\n                    boardDescription = '<p style=\"margin-bottom: 10px;\"><strong>Style classique !<\/strong><\/p>' +\n                        '<p style=\"color: #718096; line-height: 1.8;\">Un longboard performance (8\\'6\" - 9\\'6\" \/ 259-290 cm) combine le feeling traditionnel du longboard avec la maniabilit\u00e9 moderne. ' +\n                        'Parfait pour le nose riding et un style fluide et coul\u00e9.<\/p>';\n                } else {\n                    boardType = 'Step-Up ou Polyvalent';\n                    boardEmoji = '\ud83c\udfaa';\n                    boardDescription = '<p style=\"margin-bottom: 10px;\"><strong>Toutes conditions !<\/strong><\/p>' +\n                        '<p style=\"color: #718096; line-height: 1.8;\">Un shortboard polyvalent (6\\'0\" - 6\\'8\" \/ 183-203 cm) g\u00e8re bien diverses conditions. ' +\n                        'Suffisamment versatile pour les petits jours comme les grosses houles.<\/p>';\n                }\n            } else {\n                if (waveType === 'large') {\n                    boardType = 'Gun ou Semi-Gun';\n                    boardEmoji = '\ud83d\ude80';\n                    boardDescription = '<p style=\"margin-bottom: 10px;\"><strong>Arme de grosses vagues !<\/strong><\/p>' +\n                        '<p style=\"color: #718096; line-height: 1.8;\">Un gun (7\\'0\" - 10\\'0\"+ \/ 213-305+ cm) est con\u00e7u pour les vagues grandes et puissantes. ' +\n                        'Offre stabilit\u00e9, contr\u00f4le et vitesse dans les situations critiques.<\/p>';\n                } else {\n                    boardType = 'Shortboard Haute Performance';\n                    boardEmoji = '\ud83d\udca5';\n                    boardDescription = '<p style=\"margin-bottom: 10px;\"><strong>\u00c9quipement niveau pro !<\/strong><\/p>' +\n                        '<p style=\"color: #718096; line-height: 1.8;\">Un HPSH (5\\'6\" - 6\\'2\" \/ 168-188 cm) pour une performance maximale et des man\u0153uvres radicales. ' +\n                        'Con\u00e7u pour du surf puissant et progressif avec virages serr\u00e9s et a\u00e9rials.<\/p>';\n                }\n            }\n            \n            var lengthCm = heightCm + (skillLevel === 'beginner' ? 60 : skillLevel === 'intermediate' ? 30 : 0);\n            var widthCm = 48 + (skillLevel === 'beginner' ? 5 : skillLevel === 'intermediate' ? 2 : -2);\n            var thicknessCm = 6 + (skillLevel === 'beginner' ? 1 : 0);\n            \n            var lengthFt = Math.floor(lengthCm \/ 30.48);\n            var lengthIn = Math.round((lengthCm \/ 2.54) % 12);\n            var widthIn = (widthCm \/ 2.54).toFixed(2);\n            var thicknessIn = (thicknessCm \/ 2.54).toFixed(2);\n            \n            $('#recommended-volume').text(recommendedVolume.toFixed(1));\n            $('#board-type-content').html(\n                '<div style=\"font-size: 48px; text-align: center; margin-bottom: 15px;\">' + boardEmoji + '<\/div>' +\n                '<h4 style=\"color: #E63946; font-size: 20px; margin-bottom: 10px; text-align: center;\">' + boardType + '<\/h4>' +\n                boardDescription\n            );\n            \n            $('#dimensions-guide').html(\n                '<strong>Longueur :<\/strong> ~' + lengthFt + '\\'' + lengthIn + '\" (' + Math.round(lengthCm) + ' cm)<br>' +\n                '<strong>Largeur :<\/strong> ~' + widthIn + '\" (' + widthCm.toFixed(1) + ' cm)<br>' +\n                '<strong>\u00c9paisseur :<\/strong> ~' + thicknessIn + '\" (' + thicknessCm.toFixed(1) + ' cm)'\n            );\n            \n            $('#finder-results').fadeIn(400);\n        });\n\n        updateSliderBackground($('#weight-kg'), 70, 40, 120);\n        updateSliderBackground($('#height-cm'), 175, 150, 210);\n        updateSliderBackground($('#weight-lbs'), 150, 90, 260);\n        updateSliderBackground($('#height-total-in'), 69, 60, 84);\n    });\n    <\/script>\n    \n","protected":false},"excerpt":{"rendered":"<p>Calculez le Volume de Votre Planche en Quelques Secondes Comprendre le volume de votre planche de surf est essentiel pour choisir la bonne planche et am\u00e9liorer vos performances dans l&rsquo;eau. Que vous cherchiez une nouvelle planche ou compariez votre quiver actuel, conna\u00eetre le volume exact vous aide \u00e0 prendre des d\u00e9cisions \u00e9clair\u00e9es concernant la flottabilit\u00e9, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1128,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38],"tags":[],"class_list":["post-873","post","type-post","status-publish","format-standard","has-post-thumbnail","category-surf-culture"],"_links":{"self":[{"href":"https:\/\/www.lois-guillermond.com\/fr\/wp-json\/wp\/v2\/posts\/873","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lois-guillermond.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lois-guillermond.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lois-guillermond.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lois-guillermond.com\/fr\/wp-json\/wp\/v2\/comments?post=873"}],"version-history":[{"count":12,"href":"https:\/\/www.lois-guillermond.com\/fr\/wp-json\/wp\/v2\/posts\/873\/revisions"}],"predecessor-version":[{"id":1130,"href":"https:\/\/www.lois-guillermond.com\/fr\/wp-json\/wp\/v2\/posts\/873\/revisions\/1130"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lois-guillermond.com\/fr\/wp-json\/wp\/v2\/media\/1128"}],"wp:attachment":[{"href":"https:\/\/www.lois-guillermond.com\/fr\/wp-json\/wp\/v2\/media?parent=873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lois-guillermond.com\/fr\/wp-json\/wp\/v2\/categories?post=873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lois-guillermond.com\/fr\/wp-json\/wp\/v2\/tags?post=873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}