{"id":2587,"date":"2026-06-15T06:04:36","date_gmt":"2026-06-15T06:04:36","guid":{"rendered":"https:\/\/aiper.com\/blogs\/?page_id=2587"},"modified":"2026-10-28T03:48:37","modified_gmt":"2026-10-28T03:48:37","slug":"calculateur-mur-de-soutenement","status":"publish","type":"page","link":"https:\/\/aiper.com\/blogs\/fr\/calculateur-mur-de-soutenement\/","title":{"rendered":"Calculateur De Mur De Sout\u00e8nement"},"content":{"rendered":"\n<!-- Calculateur de Mur de Sout\u00e8nement - Composant Autonome (Fran\u00e7ais) -->\n<div class=\"rwc-calculator\" id=\"rwcCalculator\">\n    <!-- S\u00e9lecteur de r\u00e9gion -->\n    <div class=\"rwc-region-toggle\">\n        <span class=\"rwc-region-label\">Unit\u00e9s :<\/span>\n        <button type=\"button\" class=\"rwc-toggle-btn rwc-active\" id=\"rwcToggleUS\" aria-pressed=\"true\">US Imp\u00e9rial<\/button>\n        <button type=\"button\" class=\"rwc-toggle-btn\" id=\"rwcToggleMetric\" aria-pressed=\"false\">M\u00e9trique (AU\/EU)<\/button>\n    <\/div>\n\n    <!-- Formulaire principal -->\n    <div class=\"rwc-form-card\">\n        <!-- Dimensions du mur -->\n        <fieldset class=\"rwc-fieldset\">\n            <legend class=\"rwc-legend\">Dimensions du mur<\/legend>\n            <div class=\"rwc-input-row\">\n                <div class=\"rwc-input-group\">\n                    <label for=\"rwcWallLength\" class=\"rwc-label\" id=\"rwcLabelLength\">Longueur du mur (pi)<\/label>\n                    <div class=\"rwc-input-wrapper\">\n                        <input type=\"number\" id=\"rwcWallLength\" class=\"rwc-input\" placeholder=\"ex. 20\" min=\"0.1\" step=\"any\" inputmode=\"decimal\">\n                        <span class=\"rwc-unit-badge\" id=\"rwcUnitLength\">pi<\/span>\n                    <\/div>\n                <\/div>\n                <div class=\"rwc-input-group\">\n                    <label for=\"rwcWallHeight\" class=\"rwc-label\" id=\"rwcLabelHeight\">Hauteur du mur (pi)<\/label>\n                    <div class=\"rwc-input-wrapper\">\n                        <input type=\"number\" id=\"rwcWallHeight\" class=\"rwc-input\" placeholder=\"ex. 3\" min=\"0.1\" step=\"any\" inputmode=\"decimal\">\n                        <span class=\"rwc-unit-badge\" id=\"rwcUnitHeight\">pi<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/fieldset>\n\n        <!-- Sp\u00e9cifications des blocs -->\n        <fieldset class=\"rwc-fieldset\">\n            <legend class=\"rwc-legend\">Sp\u00e9cifications des blocs<\/legend>\n            <div class=\"rwc-input-group rwc-full-width\">\n                <label for=\"rwcBlockPreset\" class=\"rwc-label\">Taille du bloc<\/label>\n                <select id=\"rwcBlockPreset\" class=\"rwc-select\">\n                    <option value=\"16,6,10\">16 x 6 x 10 po (Standard)<\/option>\n                    <option value=\"12,4,8\">12 x 4 x 8 po<\/option>\n                    <option value=\"8,4,12\">8 x 4 x 12 po<\/option>\n                    <option value=\"custom\">Taille personnalis\u00e9e<\/option>\n                <\/select>\n            <\/div>\n            <div class=\"rwc-custom-block-inputs\" id=\"rwcCustomBlockInputs\" style=\"display:none;\">\n                <div class=\"rwc-input-row rwc-input-row-three\">\n                    <div class=\"rwc-input-group\">\n                        <label for=\"rwcBlockLength\" class=\"rwc-label\" id=\"rwcLabelBlockLength\">Longueur du bloc (po)<\/label>\n                        <div class=\"rwc-input-wrapper\">\n                            <input type=\"number\" id=\"rwcBlockLength\" class=\"rwc-input rwc-input-sm\" placeholder=\"16\" min=\"0.1\" step=\"any\" inputmode=\"decimal\">\n                            <span class=\"rwc-unit-badge rwc-unit-badge-sm\" id=\"rwcUnitBlockLength\">po<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"rwc-input-group\">\n                        <label for=\"rwcBlockHeight\" class=\"rwc-label\" id=\"rwcLabelBlockHeight\">Hauteur du bloc (po)<\/label>\n                        <div class=\"rwc-input-wrapper\">\n                            <input type=\"number\" id=\"rwcBlockHeight\" class=\"rwc-input rwc-input-sm\" placeholder=\"6\" min=\"0.1\" step=\"any\" inputmode=\"decimal\">\n                            <span class=\"rwc-unit-badge rwc-unit-badge-sm\" id=\"rwcUnitBlockHeight\">po<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"rwc-input-group\">\n                        <label for=\"rwcBlockDepth\" class=\"rwc-label\" id=\"rwcLabelBlockDepth\">Profondeur du bloc (po)<\/label>\n                        <div class=\"rwc-input-wrapper\">\n                            <input type=\"number\" id=\"rwcBlockDepth\" class=\"rwc-input rwc-input-sm\" placeholder=\"10\" min=\"0.1\" step=\"any\" inputmode=\"decimal\">\n                            <span class=\"rwc-unit-badge rwc-unit-badge-sm\" id=\"rwcUnitBlockDepth\">po<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/fieldset>\n\n        <!-- Marge de perte -->\n        <fieldset class=\"rwc-fieldset\">\n            <legend class=\"rwc-legend\">Marge de perte \/ coupe<\/legend>\n            <div class=\"rwc-input-group rwc-full-width\">\n                <label for=\"rwcWasteAllowance\" class=\"rwc-label\">Pourcentage de perte<\/label>\n                <select id=\"rwcWasteAllowance\" class=\"rwc-select\">\n                    <option value=\"5\">5%<\/option>\n                    <option value=\"10\" selected>10% (Recommand\u00e9)<\/option>\n                    <option value=\"15\">15%<\/option>\n                <\/select>\n            <\/div>\n        <\/fieldset>\n\n        <!-- Composants avanc\u00e9s -->\n        <fieldset class=\"rwc-fieldset\">\n            <legend class=\"rwc-legend\">Composants avanc\u00e9s<\/legend>\n            <div class=\"rwc-checkbox-group\">\n                <label class=\"rwc-checkbox-label\" for=\"rwcIncludeBase\">\n                    <input type=\"checkbox\" id=\"rwcIncludeBase\" class=\"rwc-checkbox\">\n                    <span class=\"rwc-checkbox-custom\"><\/span>\n                    <span class=\"rwc-checkbox-text\" id=\"rwcLabelBaseCheck\">Inclure la fondation en gravier (6 po de prof. \/ 12 po de large)<\/span>\n                <\/label>\n            <\/div>\n            <div class=\"rwc-checkbox-group\">\n                <label class=\"rwc-checkbox-label\" for=\"rwcIncludeBackfill\">\n                    <input type=\"checkbox\" id=\"rwcIncludeBackfill\" class=\"rwc-checkbox\">\n                    <span class=\"rwc-checkbox-custom\"><\/span>\n                    <span class=\"rwc-checkbox-text\" id=\"rwcLabelBackfillCheck\">Inclure le remblai drainant en pierre (12 po de large derri\u00e8re le mur)<\/span>\n                <\/label>\n            <\/div>\n        <\/fieldset>\n\n        <!-- Boutons d'action -->\n        <div class=\"rwc-button-row\">\n            <button type=\"button\" id=\"rwcCalculateBtn\" class=\"rwc-btn rwc-btn-primary\">Calculer<\/button>\n            <button type=\"button\" id=\"rwcResetBtn\" class=\"rwc-btn rwc-btn-secondary\">R\u00e9initialiser<\/button>\n        <\/div>\n    <\/div>\n\n    <!-- R\u00e9sultats -->\n    <div class=\"rwc-results-container\" id=\"rwcResultsContainer\" style=\"display:none;\" aria-live=\"polite\">\n        <div class=\"rwc-results-inner\">\n            <h3 class=\"rwc-results-heading\">R\u00e9sultats du calcul<\/h3>\n            <div class=\"rwc-results-grid\">\n                <div class=\"rwc-result-card rwc-result-card-rows\">\n                    <span class=\"rwc-result-value\" id=\"rwcResultRows\">&#8212;<\/span>\n                    <span class=\"rwc-result-label\">Rang\u00e9es totales de blocs<\/span>\n                <\/div>\n                <div class=\"rwc-result-card rwc-result-card-per-row\">\n                    <span class=\"rwc-result-value\" id=\"rwcResultBlocksPerRow\">&#8212;<\/span>\n                    <span class=\"rwc-result-label\">Blocs par rang\u00e9e<\/span>\n                <\/div>\n                <div class=\"rwc-result-card rwc-result-card-total rwc-result-card-highlight\">\n                    <span class=\"rwc-result-value rwc-result-value-large\" id=\"rwcResultTotalBlocks\">&#8212;<\/span>\n                    <span class=\"rwc-result-label\">Total estim\u00e9 de blocs<\/span>\n                    <span class=\"rwc-result-subtitle\">(marge de perte incluse)<\/span>\n                <\/div>\n                <div class=\"rwc-result-card rwc-result-card-gravel\" id=\"rwcResultGravelCard\" style=\"display:none;\">\n                    <span class=\"rwc-result-value\" id=\"rwcResultGravel\">&#8212;<\/span>\n                    <span class=\"rwc-result-label\">Gravier de fondation requis<\/span>\n                <\/div>\n                <div class=\"rwc-result-card rwc-result-card-backfill\" id=\"rwcResultBackfillCard\" style=\"display:none;\">\n                    <span class=\"rwc-result-value\" id=\"rwcResultBackfill\">&#8212;<\/span>\n                    <span class=\"rwc-result-label\">Pierre de remblai requise<\/span>\n                <\/div>\n            <\/div>\n            <div class=\"rwc-safety-warning\" id=\"rwcSafetyWarning\" style=\"display:none;\">\n                <span class=\"rwc-safety-warning-text\">Remarque : Les murs de plus de 4 pieds (1,2 m) n\u00e9cessitent g\u00e9n\u00e9ralement une expertise en ing\u00e9nierie professionnelle et peuvent exiger un renforcement par g\u00e9ogrille ou des permis de construire locaux.<\/span>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n    :root {\n        --rwc-teal: #1ecad3;\n        --rwc-teal-dark: #17a8b0;\n        --rwc-teal-light: #e8fafa;\n        --rwc-purple: #9486f7;\n        --rwc-purple-dark: #7b6de0;\n        --rwc-purple-light: #f3f1fd;\n        --rwc-bg: #f9fafb;\n        --rwc-white: #ffffff;\n        --rwc-text: #1a1a2e;\n        --rwc-text-secondary: #5a5a7a;\n        --rwc-text-muted: #7c7c9a;\n        --rwc-border: #e2e4ea;\n        --rwc-border-focus: #1ecad3;\n        --rwc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);\n        --rwc-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);\n        --rwc-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);\n        --rwc-radius-sm: 8px;\n        --rwc-radius: 12px;\n        --rwc-radius-lg: 16px;\n        --rwc-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .rwc-calculator {\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n        max-width: 720px;\n        margin: 0 auto;\n        color: var(--rwc-text);\n        line-height: 1.5;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n    }\n\n    .rwc-region-toggle {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        margin-bottom: 20px;\n        flex-wrap: wrap;\n    }\n    .rwc-region-label {\n        font-weight: 600;\n        font-size: 0.9rem;\n        color: var(--rwc-text-secondary);\n        text-transform: uppercase;\n        letter-spacing: 0.04em;\n    }\n    .rwc-toggle-btn {\n        padding: 10px 20px;\n        border: 2px solid var(--rwc-border);\n        border-radius: 30px;\n        background: var(--rwc-white);\n        cursor: pointer;\n        font-size: 0.9rem;\n        font-weight: 600;\n        color: var(--rwc-text-secondary);\n        transition: all var(--rwc-transition);\n        white-space: nowrap;\n        user-select: none;\n        -webkit-tap-highlight-color: transparent;\n        outline: none;\n    }\n    .rwc-toggle-btn:hover {\n        border-color: var(--rwc-teal);\n        color: var(--rwc-teal-dark);\n        background: var(--rwc-teal-light);\n    }\n    .rwc-toggle-btn.rwc-active {\n        background: var(--rwc-teal);\n        color: #fff;\n        border-color: var(--rwc-teal);\n        box-shadow: 0 2px 8px rgba(30, 202, 211, 0.3);\n    }\n    .rwc-toggle-btn:focus-visible {\n        box-shadow: 0 0 0 3px rgba(30, 202, 211, 0.35);\n        border-color: var(--rwc-teal);\n    }\n\n    .rwc-form-card {\n        background: var(--rwc-white);\n        border-radius: var(--rwc-radius-lg);\n        padding: 28px 28px 20px;\n        box-shadow: var(--rwc-shadow-md);\n        border: 1px solid var(--rwc-border);\n    }\n\n    .rwc-fieldset {\n        border: none;\n        padding: 0;\n        margin: 0 0 22px 0;\n    }\n    .rwc-legend {\n        font-size: 0.85rem;\n        font-weight: 700;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        color: var(--rwc-purple);\n        margin-bottom: 14px;\n        padding: 0;\n        display: block;\n        border-bottom: 2px solid var(--rwc-purple-light);\n        padding-bottom: 8px;\n    }\n\n    .rwc-input-row {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 16px;\n    }\n    .rwc-input-row-three {\n        grid-template-columns: 1fr 1fr 1fr;\n    }\n    .rwc-input-group {\n        display: flex;\n        flex-direction: column;\n        gap: 5px;\n    }\n    .rwc-full-width {\n        grid-column: 1 \/ -1;\n    }\n    .rwc-label {\n        font-size: 0.875rem;\n        font-weight: 600;\n        color: var(--rwc-text);\n        letter-spacing: 0.01em;\n    }\n    .rwc-input-wrapper {\n        position: relative;\n        display: flex;\n        align-items: center;\n    }\n    .rwc-input {\n        width: 100%;\n        padding: 12px 14px;\n        font-size: 1rem;\n        border: 2px solid var(--rwc-border);\n        border-radius: var(--rwc-radius-sm);\n        background: var(--rwc-bg);\n        color: var(--rwc-text);\n        transition: all var(--rwc-transition);\n        box-sizing: border-box;\n        font-family: inherit;\n        -webkit-appearance: none;\n        -moz-appearance: textfield;\n        appearance: textfield;\n        min-height: 48px;\n    }\n    .rwc-input::-webkit-inner-spin-button,\n    .rwc-input::-webkit-outer-spin-button {\n        opacity: 1;\n        height: 30px;\n    }\n    .rwc-input:hover {\n        border-color: #c5c8d2;\n    }\n    .rwc-input:focus {\n        outline: none;\n        border-color: var(--rwc-border-focus);\n        box-shadow: 0 0 0 4px rgba(30, 202, 211, 0.1);\n        background: var(--rwc-white);\n    }\n    .rwc-input-sm {\n        min-height: 44px;\n        padding: 10px 10px;\n        font-size: 0.9rem;\n    }\n    .rwc-unit-badge {\n        position: absolute;\n        right: 12px;\n        font-size: 0.8rem;\n        font-weight: 700;\n        color: var(--rwc-text-muted);\n        pointer-events: none;\n        background: transparent;\n        text-transform: lowercase;\n    }\n    .rwc-unit-badge-sm {\n        right: 8px;\n        font-size: 0.72rem;\n    }\n    .rwc-input-wrapper .rwc-input {\n        padding-right: 42px;\n    }\n\n    .rwc-select {\n        width: 100%;\n        padding: 12px 14px;\n        font-size: 1rem;\n        border: 2px solid var(--rwc-border);\n        border-radius: var(--rwc-radius-sm);\n        background: var(--rwc-bg);\n        color: var(--rwc-text);\n        cursor: pointer;\n        transition: all var(--rwc-transition);\n        box-sizing: border-box;\n        font-family: inherit;\n        min-height: 48px;\n        -webkit-appearance: none;\n        -moz-appearance: none;\n        appearance: none;\n        background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235a5a7a' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'\/%3E%3C\/svg%3E\");\n        background-repeat: no-repeat;\n        background-position: right 14px center;\n        padding-right: 40px;\n    }\n    .rwc-select:hover {\n        border-color: #c5c8d2;\n    }\n    .rwc-select:focus {\n        outline: none;\n        border-color: var(--rwc-border-focus);\n        box-shadow: 0 0 0 4px rgba(30, 202, 211, 0.1);\n        background: var(--rwc-white);\n    }\n\n    .rwc-custom-block-inputs {\n        margin-top: 14px;\n        padding-top: 14px;\n        border-top: 1px dashed var(--rwc-border);\n        animation: rwcFadeIn 0.3s ease;\n    }\n    @keyframes rwcFadeIn {\n        from { opacity: 0; transform: translateY(-6px); }\n        to { opacity: 1; transform: translateY(0); }\n    }\n\n    .rwc-checkbox-group {\n        margin-bottom: 10px;\n    }\n    .rwc-checkbox-group:last-child {\n        margin-bottom: 0;\n    }\n    .rwc-checkbox-label {\n        display: flex;\n        align-items: flex-start;\n        gap: 10px;\n        cursor: pointer;\n        font-size: 0.9rem;\n        color: var(--rwc-text);\n        user-select: none;\n        -webkit-tap-highlight-color: transparent;\n    }\n    .rwc-checkbox {\n        position: absolute;\n        opacity: 0;\n        width: 0;\n        height: 0;\n    }\n    .rwc-checkbox-custom {\n        flex-shrink: 0;\n        width: 22px;\n        height: 22px;\n        border: 2px solid var(--rwc-border);\n        border-radius: 5px;\n        background: var(--rwc-white);\n        transition: all var(--rwc-transition);\n        position: relative;\n        margin-top: 1px;\n    }\n    .rwc-checkbox:focus-visible+.rwc-checkbox-custom {\n        box-shadow: 0 0 0 3px rgba(30, 202, 211, 0.3);\n        border-color: var(--rwc-teal);\n    }\n    .rwc-checkbox:checked+.rwc-checkbox-custom {\n        background: var(--rwc-teal);\n        border-color: var(--rwc-teal);\n    }\n    .rwc-checkbox:checked+.rwc-checkbox-custom::after {\n        content: '';\n        position: absolute;\n        left: 6px;\n        top: 2px;\n        width: 6px;\n        height: 11px;\n        border: solid #fff;\n        border-width: 0 2px 2px 0;\n        transform: rotate(45deg);\n    }\n    .rwc-checkbox-text {\n        line-height: 1.4;\n        padding-top: 1px;\n    }\n\n    .rwc-button-row {\n        display: flex;\n        gap: 12px;\n        flex-wrap: nowrap;\n        margin-top: 6px;\n        width: 100%;\n    }\n    .rwc-btn {\n        flex: 1 1 0%;\n        min-width: 0;\n        padding: 14px 20px;\n        font-size: 1rem;\n        font-weight: 700;\n        border-radius: 30px;\n        cursor: pointer;\n        transition: all var(--rwc-transition);\n        border: 2px solid transparent;\n        font-family: inherit;\n        letter-spacing: 0.02em;\n        min-height: 50px;\n        -webkit-tap-highlight-color: transparent;\n        outline: none;\n        white-space: nowrap;\n        text-align: center;\n        box-sizing: border-box;\n    }\n    .rwc-btn-primary {\n        background: linear-gradient(135deg, #1ecad3 0%, #9486f7 100%);\n        color: #fff;\n        border-color: transparent;\n        box-shadow: 0 4px 14px rgba(148, 134, 247, 0.35);\n    }\n    .rwc-btn-primary:hover {\n        background: linear-gradient(135deg, #17a8b0 0%, #7b6de0 100%);\n        box-shadow: 0 6px 20px rgba(148, 134, 247, 0.45);\n        transform: translateY(-1px);\n    }\n    .rwc-btn-primary:active {\n        transform: translateY(1px);\n        box-shadow: 0 2px 8px rgba(148, 134, 247, 0.3);\n    }\n    .rwc-btn-primary:focus-visible {\n        box-shadow: 0 0 0 4px rgba(30, 202, 211, 0.4), 0 4px 14px rgba(148, 134, 247, 0.35);\n    }\n    .rwc-btn-secondary {\n        background: var(--rwc-white);\n        color: var(--rwc-text-secondary);\n        border-color: var(--rwc-border);\n    }\n    .rwc-btn-secondary:hover {\n        border-color: var(--rwc-purple);\n        color: var(--rwc-purple-dark);\n        background: var(--rwc-purple-light);\n    }\n    .rwc-btn-secondary:active {\n        background: #e8e5f8;\n    }\n    .rwc-btn-secondary:focus-visible {\n        box-shadow: 0 0 0 4px rgba(148, 134, 247, 0.25);\n        border-color: var(--rwc-purple);\n    }\n\n    .rwc-results-container {\n        margin-top: 24px;\n        animation: rwcSlideUp 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);\n    }\n    @keyframes rwcSlideUp {\n        from { opacity: 0; transform: translateY(20px); }\n        to { opacity: 1; transform: translateY(0); }\n    }\n    .rwc-results-inner {\n        background: var(--rwc-white);\n        border-radius: var(--rwc-radius-lg);\n        padding: 28px;\n        box-shadow: var(--rwc-shadow-lg);\n        border: 1px solid var(--rwc-border);\n        border-top: 4px solid var(--rwc-purple);\n    }\n    .rwc-results-heading {\n        margin: 0 0 20px;\n        font-size: 1.15rem;\n        font-weight: 700;\n        color: var(--rwc-text);\n        letter-spacing: 0.01em;\n    }\n    .rwc-results-grid {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 14px;\n        margin-bottom: 16px;\n    }\n    .rwc-result-card {\n        background: var(--rwc-bg);\n        border-radius: var(--rwc-radius);\n        padding: 18px 16px;\n        text-align: center;\n        border: 1px solid var(--rwc-border);\n        transition: all var(--rwc-transition);\n    }\n    .rwc-result-card-highlight {\n        grid-column: 1 \/ -1;\n        background: linear-gradient(135deg, #f0fdfd 0%, #f8f7fe 100%);\n        border: 2px solid var(--rwc-teal);\n        box-shadow: 0 2px 12px rgba(30, 202, 211, 0.12);\n        padding: 22px 18px;\n    }\n    .rwc-result-value {\n        display: block;\n        font-size: 1.6rem;\n        font-weight: 700;\n        color: var(--rwc-text);\n        line-height: 1.2;\n    }\n    .rwc-result-value-large {\n        font-size: 2.2rem;\n        color: var(--rwc-teal-dark);\n        letter-spacing: -0.02em;\n    }\n    .rwc-result-label {\n        display: block;\n        font-size: 0.8rem;\n        font-weight: 600;\n        color: var(--rwc-text-secondary);\n        text-transform: uppercase;\n        letter-spacing: 0.04em;\n        margin-top: 4px;\n    }\n    .rwc-result-subtitle {\n        display: block;\n        font-size: 0.75rem;\n        color: var(--rwc-text-muted);\n        margin-top: 3px;\n    }\n    .rwc-result-card-rows,\n    .rwc-result-card-per-row {\n        border-left: 3px solid #1ecad3;\n    }\n    .rwc-result-card-gravel,\n    .rwc-result-card-backfill {\n        border-left: 3px solid #9486f7;\n    }\n\n    .rwc-safety-warning {\n        background: #fff8f0;\n        border: 2px solid #f0a040;\n        border-left: 6px solid #e89430;\n        border-radius: var(--rwc-radius);\n        padding: 16px 18px;\n        margin-top: 16px;\n        animation: rwcFadeIn 0.4s ease;\n    }\n    .rwc-safety-warning-text {\n        font-size: 0.9rem;\n        font-weight: 600;\n        color: #7a4e1a;\n        line-height: 1.5;\n        display: block;\n    }\n\n    @media (max-width: 600px) {\n        .rwc-form-card { padding: 18px 14px 14px; }\n        .rwc-input-row { grid-template-columns: 1fr; gap: 12px; }\n        .rwc-input-row-three { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }\n        .rwc-results-grid { grid-template-columns: 1fr; gap: 10px; }\n        .rwc-result-card-highlight { grid-column: 1; }\n        .rwc-btn { padding: 12px 14px; font-size: 0.9rem; min-height: 44px; }\n        .rwc-btn-primary, .rwc-btn-secondary { flex: 1 1 0%; min-width: 0; }\n        .rwc-results-inner { padding: 18px 14px; }\n        .rwc-toggle-btn { padding: 8px 14px; font-size: 0.8rem; }\n        .rwc-region-toggle { gap: 6px; }\n        .rwc-input { font-size: 0.95rem; padding: 10px 12px; min-height: 44px; }\n        .rwc-select { font-size: 0.95rem; padding: 10px 12px; min-height: 44px; }\n        .rwc-result-value { font-size: 1.3rem; }\n        .rwc-result-value-large { font-size: 1.7rem; }\n        .rwc-legend { font-size: 0.78rem; }\n    }\n    @media (max-width: 380px) {\n        .rwc-input-row-three { grid-template-columns: 1fr; gap: 8px; }\n        .rwc-button-row { gap: 8px; }\n        .rwc-btn { padding: 10px 8px; font-size: 0.8rem; min-height: 40px; border-radius: 24px; }\n        .rwc-toggle-btn { padding: 7px 10px; font-size: 0.75rem; }\n        .rwc-region-label { font-size: 0.75rem; }\n    }\n<\/style>\n\n<script>\n    (function() {\n        function aiperInlineError(host, msg) {\n            var el = host.querySelector('.aiper-inline-error');\n            if (!el) {\n                el = document.createElement('div');\n                el.className = 'aiper-inline-error';\n                el.setAttribute('role', 'alert');\n                el.style.cssText = 'margin:0 0 16px;padding:12px 16px;background:#fef2f2;border-left:4px solid #b91c1c;border-radius:0 8px 8px 0;color:#7f1d1d;font-size:15px;line-height:1.5;white-space:pre-line';\n                host.insertBefore(el, host.firstChild);\n                host.addEventListener('input', function () { el.hidden = true; });\n                host.addEventListener('change', function () { el.hidden = true; });\n            }\n            el.textContent = String(msg).replace(\/\\n{2,}\/g, '\\n');\n            el.hidden = false;\n            try { el.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); } catch (e) {}\n        }\n\n        const calculator = document.getElementById('rwcCalculator');\n        const toggleUS = document.getElementById('rwcToggleUS');\n        const toggleMetric = document.getElementById('rwcToggleMetric');\n        const wallLengthInput = document.getElementById('rwcWallLength');\n        const wallHeightInput = document.getElementById('rwcWallHeight');\n        const blockPresetSelect = document.getElementById('rwcBlockPreset');\n        const customBlockInputs = document.getElementById('rwcCustomBlockInputs');\n        const blockLengthInput = document.getElementById('rwcBlockLength');\n        const blockHeightInput = document.getElementById('rwcBlockHeight');\n        const blockDepthInput = document.getElementById('rwcBlockDepth');\n        const wasteSelect = document.getElementById('rwcWasteAllowance');\n        const includeBaseCheck = document.getElementById('rwcIncludeBase');\n        const includeBackfillCheck = document.getElementById('rwcIncludeBackfill');\n        const calculateBtn = document.getElementById('rwcCalculateBtn');\n        const resetBtn = document.getElementById('rwcResetBtn');\n        const resultsContainer = document.getElementById('rwcResultsContainer');\n        const safetyWarning = document.getElementById('rwcSafetyWarning');\n        const resultGravelCard = document.getElementById('rwcResultGravelCard');\n        const resultBackfillCard = document.getElementById('rwcResultBackfillCard');\n\n        const labelLength = document.getElementById('rwcLabelLength');\n        const labelHeight = document.getElementById('rwcLabelHeight');\n        const unitLength = document.getElementById('rwcUnitLength');\n        const unitHeight = document.getElementById('rwcUnitHeight');\n        const labelBlockLength = document.getElementById('rwcLabelBlockLength');\n        const labelBlockHeight = document.getElementById('rwcLabelBlockHeight');\n        const labelBlockDepth = document.getElementById('rwcLabelBlockDepth');\n        const unitBlockLength = document.getElementById('rwcUnitBlockLength');\n        const unitBlockHeight = document.getElementById('rwcUnitBlockHeight');\n        const unitBlockDepth = document.getElementById('rwcUnitBlockDepth');\n        const labelBaseCheck = document.getElementById('rwcLabelBaseCheck');\n        const labelBackfillCheck = document.getElementById('rwcLabelBackfillCheck');\n\n        const resultRows = document.getElementById('rwcResultRows');\n        const resultBlocksPerRow = document.getElementById('rwcResultBlocksPerRow');\n        const resultTotalBlocks = document.getElementById('rwcResultTotalBlocks');\n        const resultGravel = document.getElementById('rwcResultGravel');\n        const resultBackfill = document.getElementById('rwcResultBackfill');\n\n        let currentRegion = 'us';\n\n        const usPresets = [\n            { value: '16,6,10', label: '16 x 6 x 10 po (Standard)' },\n            { value: '12,4,8', label: '12 x 4 x 8 po' },\n            { value: '8,4,12', label: '8 x 4 x 12 po' },\n            { value: 'custom', label: 'Taille personnalis\u00e9e' },\n        ];\n        const metricPresets = [\n            { value: '40,15,25', label: '40 x 15 x 25 cm (Standard)' },\n            { value: '30,10,20', label: '30 x 10 x 20 cm' },\n            { value: '20,10,30', label: '20 x 10 x 30 cm' },\n            { value: 'custom', label: 'Taille personnalis\u00e9e' },\n        ];\n\n        function getPresets() { return currentRegion === 'us' ? usPresets : metricPresets; }\n\n        function updatePresetDropdown() {\n            const presets = getPresets();\n            const currentVal = blockPresetSelect.value;\n            blockPresetSelect.innerHTML = '';\n            presets.forEach(function(p) {\n                const opt = document.createElement('option');\n                opt.value = p.value;\n                opt.textContent = p.label;\n                blockPresetSelect.appendChild(opt);\n            });\n            const allValues = presets.map(function(p) { return p.value; });\n            blockPresetSelect.value = allValues.indexOf(currentVal) !== -1 ? currentVal : presets[0].value;\n            handlePresetChange();\n        }\n\n        function updateAllLabels() {\n            if (currentRegion === 'us') {\n                labelLength.textContent = 'Longueur du mur (pi)';\n                labelHeight.textContent = 'Hauteur du mur (pi)';\n                unitLength.textContent = 'pi';\n                unitHeight.textContent = 'pi';\n                labelBlockLength.textContent = 'Longueur du bloc (po)';\n                labelBlockHeight.textContent = 'Hauteur du bloc (po)';\n                labelBlockDepth.textContent = 'Profondeur du bloc (po)';\n                unitBlockLength.textContent = 'po';\n                unitBlockHeight.textContent = 'po';\n                unitBlockDepth.textContent = 'po';\n                labelBaseCheck.textContent = 'Inclure la fondation en gravier (6 po de prof. \/ 12 po de large)';\n                labelBackfillCheck.textContent = 'Inclure le remblai drainant en pierre (12 po de large derri\u00e8re le mur)';\n                wallLengthInput.placeholder = 'ex. 20';\n                wallHeightInput.placeholder = 'ex. 3';\n                blockLengthInput.placeholder = '16';\n                blockHeightInput.placeholder = '6';\n                blockDepthInput.placeholder = '10';\n            } else {\n                labelLength.textContent = 'Longueur du mur (m)';\n                labelHeight.textContent = 'Hauteur du mur (m)';\n                unitLength.textContent = 'm';\n                unitHeight.textContent = 'm';\n                labelBlockLength.textContent = 'Longueur du bloc (cm)';\n                labelBlockHeight.textContent = 'Hauteur du bloc (cm)';\n                labelBlockDepth.textContent = 'Profondeur du bloc (cm)';\n                unitBlockLength.textContent = 'cm';\n                unitBlockHeight.textContent = 'cm';\n                unitBlockDepth.textContent = 'cm';\n                labelBaseCheck.textContent = 'Inclure la fondation en gravier (15 cm de prof. \/ 30 cm de large)';\n                labelBackfillCheck.textContent = 'Inclure le remblai drainant en pierre (30 cm de large derri\u00e8re le mur)';\n                wallLengthInput.placeholder = 'ex. 6';\n                wallHeightInput.placeholder = 'ex. 0,9';\n                blockLengthInput.placeholder = '40';\n                blockHeightInput.placeholder = '15';\n                blockDepthInput.placeholder = '25';\n            }\n        }\n\n        function handlePresetChange() {\n            if (blockPresetSelect.value === 'custom') {\n                customBlockInputs.style.display = 'block';\n                blockLengthInput.setAttribute('required', 'required');\n                blockHeightInput.setAttribute('required', 'required');\n                blockDepthInput.setAttribute('required', 'required');\n            } else {\n                customBlockInputs.style.display = 'none';\n                blockLengthInput.removeAttribute('required');\n                blockHeightInput.removeAttribute('required');\n                blockDepthInput.removeAttribute('required');\n            }\n        }\n\n        function setRegion(region) {\n            if (currentRegion === region) return;\n            currentRegion = region;\n            if (region === 'us') {\n                toggleUS.classList.add('rwc-active');\n                toggleUS.setAttribute('aria-pressed', 'true');\n                toggleMetric.classList.remove('rwc-active');\n                toggleMetric.setAttribute('aria-pressed', 'false');\n            } else {\n                toggleMetric.classList.add('rwc-active');\n                toggleMetric.setAttribute('aria-pressed', 'true');\n                toggleUS.classList.remove('rwc-active');\n                toggleUS.setAttribute('aria-pressed', 'false');\n            }\n            updateAllLabels();\n            updatePresetDropdown();\n            hideResults();\n        }\n\n        function hideResults() {\n            resultsContainer.style.display = 'none';\n            safetyWarning.style.display = 'none';\n            resultGravelCard.style.display = 'none';\n            resultBackfillCard.style.display = 'none';\n        }\n\n        function getBlockDimensions() {\n            if (blockPresetSelect.value === 'custom') {\n                return {\n                    length: parseFloat(blockLengthInput.value) || 0,\n                    height: parseFloat(blockHeightInput.value) || 0,\n                    depth: parseFloat(blockDepthInput.value) || 0,\n                };\n            } else {\n                var parts = blockPresetSelect.value.split(',');\n                return {\n                    length: parseFloat(parts[0]) || 0,\n                    height: parseFloat(parts[1]) || 0,\n                    depth: parseFloat(parts[2]) || 0,\n                };\n            }\n        }\n\n        function validateInputs() {\n            var errors = [];\n            var wallLength = parseFloat(wallLengthInput.value);\n            var wallHeight = parseFloat(wallHeightInput.value);\n            if (isNaN(wallLength) || wallLength <= 0) errors.push('Veuillez entrer une longueur de mur valide.');\n            if (isNaN(wallHeight) || wallHeight <= 0) errors.push('Veuillez entrer une hauteur de mur valide.');\n            var blocks = getBlockDimensions();\n            if (blocks.length <= 0 || blocks.height <= 0) errors.push('Veuillez s\u00e9lectionner une taille de bloc valide ou entrer des dimensions personnalis\u00e9es.');\n            if (blockPresetSelect.value === 'custom') {\n                if (isNaN(blocks.length) || blocks.length <= 0) errors.push('Veuillez entrer une longueur de bloc personnalis\u00e9e valide.');\n                if (isNaN(blocks.height) || blocks.height <= 0) errors.push('Veuillez entrer une hauteur de bloc personnalis\u00e9e valide.');\n                if (isNaN(blocks.depth) || blocks.depth <= 0) errors.push('Veuillez entrer une profondeur de bloc personnalis\u00e9e valide.');\n            }\n            return { valid: errors.length === 0, errors: errors, wallLength: wallLength, wallHeight: wallHeight, blocks: blocks };\n        }\n\n        function calculate() {\n            var validation = validateInputs();\n            if (!validation.valid) {\n                aiperInlineError(calculator, 'Veuillez corriger les \u00e9l\u00e9ments suivants :\\n\\n' + validation.errors.join('\\n'));\n                return;\n            }\n            var wallLength = validation.wallLength;\n            var wallHeight = validation.wallHeight;\n            var blocks = validation.blocks;\n            var wastePercent = parseFloat(wasteSelect.value) || 10;\n            var wasteMultiplier = 1 + (wastePercent \/ 100);\n            var includeBase = includeBaseCheck.checked;\n            var includeBackfill = includeBackfillCheck.checked;\n            var wallLengthInUnits, wallHeightInUnits;\n            if (currentRegion === 'us') {\n                wallLengthInUnits = wallLength * 12;\n                wallHeightInUnits = wallHeight * 12;\n            } else {\n                wallLengthInUnits = wallLength * 100;\n                wallHeightInUnits = wallHeight * 100;\n            }\n            var totalRows = Math.ceil(wallHeightInUnits \/ blocks.height);\n            var blocksPerRow = wallLengthInUnits \/ blocks.length;\n            var totalBlocks = Math.ceil(totalRows * blocksPerRow * wasteMultiplier);\n            resultRows.textContent = totalRows;\n            resultBlocksPerRow.textContent = parseFloat(blocksPerRow.toFixed(2));\n            resultTotalBlocks.textContent = totalBlocks;\n            if (includeBase) {\n                var gravelVolume;\n                if (currentRegion === 'us') {\n                    gravelVolume = (0.5 * 1 * wallLength) \/ 27;\n                    resultGravel.textContent = gravelVolume.toFixed(2) + ' verge\u00b3';\n                } else {\n                    gravelVolume = 0.15 * 0.3 * wallLength;\n                    resultGravel.textContent = gravelVolume.toFixed(2) + ' m\u00b3';\n                }\n                resultGravelCard.style.display = 'block';\n            } else {\n                resultGravelCard.style.display = 'none';\n            }\n            if (includeBackfill) {\n                var backfillVolume;\n                if (currentRegion === 'us') {\n                    backfillVolume = (1 * wallHeight * wallLength) \/ 27;\n                    resultBackfill.textContent = backfillVolume.toFixed(2) + ' verge\u00b3';\n                } else {\n                    backfillVolume = 0.3 * wallHeight * wallLength;\n                    resultBackfill.textContent = backfillVolume.toFixed(2) + ' m\u00b3';\n                }\n                resultBackfillCard.style.display = 'block';\n            } else {\n                resultBackfillCard.style.display = 'none';\n            }\n            var exceedsThreshold = (currentRegion === 'us' && wallHeight > 4) || (currentRegion === 'metric' && wallHeight > 1.2);\n            safetyWarning.style.display = exceedsThreshold ? 'block' : 'none';\n            resultsContainer.style.display = 'block';\n            resultsContainer.style.animation = 'none';\n            resultsContainer.offsetHeight;\n            resultsContainer.style.animation = 'rwcSlideUp 0.4s cubic-bezier(0.22, 0.61, 0.36, 1)';\n            setTimeout(function() { resultsContainer.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }, 100);\n        }\n\n        function reset() {\n            wallLengthInput.value = '';\n            wallHeightInput.value = '';\n            blockLengthInput.value = '';\n            blockHeightInput.value = '';\n            blockDepthInput.value = '';\n            wasteSelect.value = '10';\n            includeBaseCheck.checked = false;\n            includeBackfillCheck.checked = false;\n            blockPresetSelect.value = getPresets()[0].value;\n            handlePresetChange();\n            hideResults();\n            calculator.scrollIntoView({ behavior: 'smooth', block: 'start' });\n        }\n\n        toggleUS.addEventListener('click', function() { setRegion('us'); });\n        toggleMetric.addEventListener('click', function() { setRegion('metric'); });\n        blockPresetSelect.addEventListener('change', function() { handlePresetChange(); hideResults(); });\n        calculateBtn.addEventListener('click', calculate);\n        resetBtn.addEventListener('click', reset);\n\n        [wallLengthInput, wallHeightInput, blockLengthInput, blockHeightInput, blockDepthInput, wasteSelect, includeBaseCheck, includeBackfillCheck].forEach(function(el) {\n            el.addEventListener('input', hideResults);\n            el.addEventListener('change', function() {\n                if (el === wasteSelect || el === includeBaseCheck || el === includeBackfillCheck) hideResults();\n            });\n        });\n\n        [wallLengthInput, wallHeightInput, blockLengthInput, blockHeightInput, blockDepthInput].forEach(function(el) {\n            el.addEventListener('keydown', function(e) {\n                if (e.key === 'Enter') { e.preventDefault(); calculate(); }\n            });\n        });\n\n        updateAllLabels();\n        handlePresetChange();\n        hideResults();\n    })();\n<\/script>\n\n\n<!-- aiper-tool-links -->\n<div class=\"aiper-tool-links\">\n  <div class=\"aiper-tl-section\">\n    <div class=\"aiper-tl-heading\">Plus d&#8217;outils<\/div>\n    <div class=\"aiper-tl-tags\">\n      <a href=\"https:\/\/aiper.com\/blogs\/fr\/calculateur-cloture\/\" class=\"aiper-tl-tag\">Calculateur de mat\u00e9riaux de cl\u00f4ture<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/fr\/calculateur-de-pave\/\" class=\"aiper-tl-tag\">Calculateur de Pav\u00e9 Pr\u00e9cis<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/fr\/calculateur-terrasse\/\" class=\"aiper-tl-tag\">Calculateur de Terrasse<\/a>\n    <\/div>\n  <\/div>\n  <div class=\"aiper-tl-section\">\n    <div class=\"aiper-tl-heading\">Articles connexes<\/div>\n    <div class=\"aiper-tl-tags\">\n      <a href=\"https:\/\/aiper.com\/blogs\/fr\/reduire-alcalinite-piscine\/\" class=\"aiper-tl-tag\">Comment r\u00e9duire l&#8217;alcalinit\u00e9 d&#8217;une piscine<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/fr\/comment-eloigner-bernaches-pelouse\/\" class=\"aiper-tl-tag\">Comment \u00e9loigner les bernaches de la pelouse<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/fr\/comment-eliminer-champignons-pelouse\/\" class=\"aiper-tl-tag\">Comment se d\u00e9barrasser des champignons dans la pelouse<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/fr\/defeutrer-pelouse-reconnaitre-traiter-feutre\/\" class=\"aiper-tl-tag\">D\u00e9feutrer sa pelouse : reconna\u00eetre et traiter le feutre<\/a>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n.aiper-tool-links{margin:2.5rem 0 1.5rem;padding:1.5rem 1.75rem;background:linear-gradient(135deg,rgba(148,134,247,.04),rgba(30,202,211,.04));border-radius:12px;border:1px solid rgba(148,134,247,.10)}\n.aiper-tl-section{margin-bottom:1.25rem}\n.aiper-tl-section:last-child{margin-bottom:0}\n.aiper-tl-heading{font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#8899aa;margin:0 0 .65rem}\n.aiper-tl-tags{display:flex;flex-wrap:wrap;gap:.5rem}\n.aiper-tl-tag{display:inline-block;padding:.4rem .95rem;font-size:.82rem;font-weight:500;line-height:1.35;color:#9486f7;background:rgba(148,134,247,.055);border:1px solid rgba(30,202,211,.25);border-radius:22px;text-decoration:none;transition:all .18s}\n.aiper-tl-tag:hover{background:#1ecad3;color:#fff;border-color:#1ecad3;box-shadow:0 2px 10px rgba(30,202,211,.22)}\n<\/style>","protected":false},"excerpt":{"rendered":"<p>Unit\u00e9s : US Imp\u00e9rial M\u00e9trique (AU\/EU) Dimensions du mur Longueur du mur (pi) pi Hauteur du mur (pi) pi Sp\u00e9cifications des blocs Taille du bloc 16 x 6 x 10 po (Standard)12 x 4 x 8 po8 x 4 x 12 poTaille personnalis\u00e9e Longueur du bloc (po) po Hauteur du bloc (po) po Profondeur du [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"aiper_reading_time":2,"aiper_last_reviewed":"","aiper_reviewer":0,"aiper_related_ids":[],"aiper_layout":"","footnotes":""},"class_list":["post-2587","page","type-page","status-publish","hentry"],"lang":"fr","translations":{"fr":2587,"es":2589,"en":2582,"de":2585},"_links":{"self":[{"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/pages\/2587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/comments?post=2587"}],"version-history":[{"count":3,"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/pages\/2587\/revisions"}],"predecessor-version":[{"id":12215,"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/pages\/2587\/revisions\/12215"}],"wp:attachment":[{"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/media?parent=2587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}