Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <main class="container">
        <form action="controller.lang" method="post" id="formDevis">
            <div class="container-row"></div>
            <button id="add-row" class="info" type="button">Ajouter</button>
            <div class="grid has-gutter input submit">
                <button type="submit" class="primary col-6">devis</button>
                <button type="reset" class="danger col-6">annuler</button>
            </div>
    </form>
    </main>
    <template id="tpl-add-row">
        <div class="grid has-gutter">
            <div class="col-4 input select">
                <select name="cat_%%len%%" id="cat_%%len%%" aria-label="sélectionnez une catégorie d'article">
                    <option value="">sélectionnez une catégorie d'article</option>
                                        <option value="tshirt" data-id="tshirt">T-shirt</option>                                        <option value="sweat" data-id="sweetshirt">Sweat</option>                                    </select>
            </div>
            <div class="col-4 input select">
                <select name="tshirt_%%len%%" id="tshirt_%%len%%" aria-label="sélectionnez votre t-shirt" hidden>
                    <option value="">sélectionnez votre t-shirt</option>
                                        <option value="3.71" data-id="CGTU03T">B&C - CGTU03T</option>                                        <option value="3.72" data-id="CGTW04T">B&C - CGTW04T</option>                                        <option value="7.71" data-id="CGTU07T">B&C - ML - CGTU07T</option>                                        <option value="5.94" data-id="CGTW08T">B&C - Femme CGTW08T</option>                                        <option value="5.34" data-id="K356">Kariban - K356</option>                                    </select>
                <select name="sweetshirt_%%len%%" id="sweetshirt_%%len%%" aria-label="sélectionnez votre sweet-shirt" hidden>
                    <option value="">sélectionnez votre sweet-shirt</option>
                                        <option value="19.91" data-id="CGWU620">B&C - CGWU620</option>                                        <option value="17.36" data-id="K476">Kariban - Capuche - K476</option>                                        <option value="11.56" data-id="K474">Kariban - Col - K474</option>                                        <option value="15.41" data-id="K478">Kariban - Col zip - K478</option>                                    </select>
            </div>
            <div class="col-4 input number">
                <input type="number" name="qte_%%len%%" id="qte_%%len%%" hidden>
            </div>
        </div>
    </template>
              
            
!

CSS

              
                @font-face{font-family:materialicons;src:url("fonts/materialicons-regular.eot");src:url("fonts/materialicons-regular.eot?#iefix") format("embedded-opentype"),url("fonts/materialicons-regular.woff") format("woff"),url("fonts/materialicons-regular.ttf") format("truetype"),url("fonts/materialicons-regular.svg") format("svg");font-weight:normal;font-style:normal}@font-face{font-family:light;src:url("fonts/raleway-light-webfont.eot");src:url("fonts/raleway-light-webfont.eot?#iefix") format("embedded-opentype"),url("fonts/raleway-light-webfont.woff") format("woff"),url("fonts/raleway-light-webfont.ttf") format("truetype"),url("fonts/raleway-light-webfont.svg") format("svg");font-weight:normal;font-style:normal}@font-face{font-family:lightitalic;src:url("fonts/raleway-lightitalic-webfont.eot");src:url("fonts/raleway-lightitalic-webfont.eot?#iefix") format("embedded-opentype"),url("fonts/raleway-lightitalic-webfont.woff") format("woff"),url("fonts/raleway-lightitalic-webfont.ttf") format("truetype"),url("fonts/raleway-lightitalic-webfont.svg") format("svg");font-weight:normal;font-style:normal}@font-face{font-family:regular;src:url("fonts/raleway-regular-webfont.eot");src:url("fonts/raleway-regular-webfont.eot?#iefix") format("embedded-opentype"),url("fonts/raleway-regular-webfont.woff") format("woff"),url("fonts/raleway-regular-webfont.ttf") format("truetype"),url("fonts/raleway-regular-webfont.svg") format("svg");font-weight:normal;font-style:normal}@font-face{font-family:italic;src:url("fonts/raleway-regularitalic-webfont.eot");src:url("fonts/raleway-regularitalic-webfont.eot?#iefix") format("embedded-opentype"),url("fonts/raleway-regularitalic-webfont.woff") format("woff"),url("fonts/raleway-regularitalic-webfont.ttf") format("truetype"),url("fonts/raleway-regularitalic-webfont.svg") format("svg");font-weight:normal;font-style:normal}@font-face{font-family:bold;src:url("fonts/raleway-bold-webfont.eot");src:url("fonts/raleway-bold-webfont.eot?#iefix") format("embedded-opentype"),url("fonts/raleway-bold-webfont.woff") format("woff"),url("fonts/raleway-bold-webfont.ttf") format("truetype"),url("fonts/raleway-bold-webfont.svg") format("svg");font-weight:normal;font-style:normal}@font-face{font-family:bolditalic;src:url("fonts/raleway-bolditalic-webfont.eot");src:url("fonts/raleway-bolditalic-webfont.eot?#iefix") format("embedded-opentype"),url("fonts/raleway-bolditalic-webfont.woff") format("woff"),url("fonts/raleway-bolditalic-webfont.ttf") format("truetype"),url("fonts/raleway-bolditalic-webfont.svg") format("svg");font-weight:normal;font-style:normal}*,*::before,*::after{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}@-ms-viewport{width:device-width}article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left}[tabindex="-1"]:focus{outline:none !important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[title],abbr[data-original-title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul,dl{margin-top:0;margin-bottom:1rem}ol ol,ul ul,ol ul,ul ol{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}dfn{font-style:italic}b,strong{font-weight:bold}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}a{color:#007bff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}pre,code,kbd,samp{font-family:monospace,monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}a,area,button,[role=button],input:not([type=range]),label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#868e96;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}input,button,select,optgroup,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{padding:0;border-style:none}input[type=radio],input[type=checkbox]{box-sizing:border-box;padding:0}input[type=date],input[type=time],input[type=datetime-local],input[type=month]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item}template{display:none}[hidden]{display:none !important}a{color:#3498db;text-decoration:underline;transition:color 400ms}a:active,a:focus{outline:.1rem dotted #2980b9}@media(min-width: 960px){a:hover{color:#2980b9;text-decoration:none}}a img{border:none}a.btn,a.button{text-decoration:none;outline-width:0 !important}blockquote{margin:0 0 2.5rem;position:relative;padding-left:4.8rem;min-height:2em}blockquote:before{content:"“";position:absolute;left:0;top:0;font-size:13rem;height:.4em;line-height:.9;color:#bdc3c7}body{font-family:"regular",Helvetica,Arial,sans-serif;font-weight:400;line-height:1.6;hyphens:auto;font-size:1.5rem}@media(max-width: 960px){body{font-size:1.4rem}}strong,.bold{font-weight:600}code{padding:.2rem .5rem;margin:0 .2rem;font-size:90%;white-space:nowrap;background:#f1f1f1;border:.1rem solid #e1e1e1;border-radius:.4rem}.primary{background-color:#3498db;transition:background-color 400ms}@media(min-width: 960px){.primary:hover{background-color:#2980b9}}.secondary{background-color:#95a5a6;transition:background-color 400ms}@media(min-width: 960px){.secondary:hover{background-color:#7f8c8d}}.success{background-color:#2ecc71;transition:background-color 400ms}@media(min-width: 960px){.success:hover{background-color:#27ae60}}.info{background-color:#1abc9c;transition:background-color 400ms}@media(min-width: 960px){.info:hover{background-color:#16a085}}.warning{background-color:#e67e22;transition:background-color 400ms}@media(min-width: 960px){.warning:hover{background-color:#d35400}}.danger{background-color:#e74c3c;transition:background-color 400ms}@media(min-width: 960px){.danger:hover{background-color:#c0392b}}dl{margin-bottom:2.5rem}fieldset{border:.1rem solid #e1e1e1;border-radius:.4rem;padding:2.5rem;margin-bottom:2.5rem}form{margin-bottom:2.5rem}@media(min-width: 480px){[class*=" grid-"],[class^=grid-]{display:grid;grid-auto-flow:dense}[class*=" grid-"].has-gutter,[class^=grid-].has-gutter{grid-gap:1rem}[class*=" grid-"].has-gutter-l,[class^=grid-].has-gutter-l{grid-gap:2rem}[class*=" grid-"].has-gutter-xl,[class^=grid-].has-gutter-xl{grid-gap:4rem}}@media(min-width: 480px){.autogrid,.grid{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.autogrid.has-gutter,.grid.has-gutter{grid-column-gap:1rem}.autogrid.has-gutter-l,.grid.has-gutter-l{grid-column-gap:2rem}.autogrid.has-gutter-xl,.grid.has-gutter-xl{grid-column-gap:4rem}}[class*=grid-2]{grid-template-columns:repeat(2, 1fr)}[class*=grid-3]{grid-template-columns:repeat(3, 1fr)}[class*=grid-4]{grid-template-columns:repeat(4, 1fr)}[class*=grid-5]{grid-template-columns:repeat(5, 1fr)}[class*=grid-6]{grid-template-columns:repeat(6, 1fr)}[class*=grid-7]{grid-template-columns:repeat(7, 1fr)}[class*=grid-8]{grid-template-columns:repeat(8, 1fr)}[class*=grid-9]{grid-template-columns:repeat(9, 1fr)}[class*=grid-10]{grid-template-columns:repeat(10, 1fr)}[class*=grid-11]{grid-template-columns:repeat(11, 1fr)}[class*=grid-12]{grid-template-columns:repeat(12, 1fr)}[class*=col-1]{grid-column:auto/span 1}[class*=row-1]{grid-row:auto/span 1}[class*=col-2]{grid-column:auto/span 2}[class*=row-2]{grid-row:auto/span 2}[class*=col-3]{grid-column:auto/span 3}[class*=row-3]{grid-row:auto/span 3}[class*=col-4]{grid-column:auto/span 4}[class*=row-4]{grid-row:auto/span 4}[class*=col-5]{grid-column:auto/span 5}[class*=row-5]{grid-row:auto/span 5}[class*=col-6]{grid-column:auto/span 6}[class*=row-6]{grid-row:auto/span 6}[class*=col-7]{grid-column:auto/span 7}[class*=row-7]{grid-row:auto/span 7}[class*=col-8]{grid-column:auto/span 8}[class*=row-8]{grid-row:auto/span 8}[class*=col-9]{grid-column:auto/span 9}[class*=row-9]{grid-row:auto/span 9}[class*=col-10]{grid-column:auto/span 10}[class*=row-10]{grid-row:auto/span 10}[class*=col-11]{grid-column:auto/span 11}[class*=row-11]{grid-row:auto/span 11}[class*=col-12]{grid-column:auto/span 12}[class*=row-12]{grid-row:auto/span 12}@media(min-width: 480px)and (max-width: 767px){[class*=grid-][class*=-small-1]{grid-template-columns:repeat(1, 1fr)}[class*=col-][class*=-small-1]{grid-column:auto/span 1}[class*=grid-][class*=-small-2]{grid-template-columns:repeat(2, 1fr)}[class*=col-][class*=-small-2]{grid-column:auto/span 2}[class*=grid-][class*=-small-3]{grid-template-columns:repeat(3, 1fr)}[class*=col-][class*=-small-3]{grid-column:auto/span 3}[class*=grid-][class*=-small-4]{grid-template-columns:repeat(4, 1fr)}[class*=col-][class*=-small-4]{grid-column:auto/span 4}[class*=-small-all]{grid-column:1/-1}}.item-first{order:-1}.item-last{order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1}hr{margin-top:3rem;margin-bottom:3.5rem;border-width:0;border-top:.1rem solid #e1e1e1}html{font-size:62.5%;color:#222;background-color:#fff}input{-moz-appearance:none;-webkit-appearance:none;-o-appearance:none;-ms-appearance:none}input[type=text],input[type=search],input[type=email],input[type=number],input[type=password]{cursor:pointer;padding:.8rem 1.5rem;border:.1rem solid #e1e1e1;border-radius:.4rem;transition:all 400ms}input[type=text]::placeholder,input[type=search]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder{font-style:italic;color:#a1a1a1}input[type=text]:focus,input[type=text]:active,input[type=search]:focus,input[type=search]:active,input[type=email]:focus,input[type=email]:active,input[type=number]:focus,input[type=number]:active,input[type=password]:focus,input[type=password]:active{border-color:#3498db !important;cursor:text}input[type=text]:hover,input[type=search]:hover,input[type=email]:hover,input[type=number]:hover,input[type=password]:hover{border-color:#3498db !important}input[type=text]:disabled,input[type=search]:disabled,input[type=email]:disabled,input[type=number]:disabled,input[type=password]:disabled{background-color:#fcfcfc;cursor:not-allowed}input[type=text].error,input[type=search].error,input[type=email].error,input[type=number].error,input[type=password].error{border-color:#e74c3c}input[type=text].success,input[type=search].success,input[type=email].success,input[type=number].success,input[type=password].success{border-color:#2ecc71;background-color:#fff}input[type=radio]{width:2rem;height:2rem;border:1px solid #bbb;border-radius:100%;background-color:#fff}input[type=radio]:checked{background-image:url('data:image/svg+xml,%3C%3Fxml version%3D"1.0" standalone%3D"no"%3F%3E%3Csvg version%3D"1.1" width%3D"100" height%3D"100"%0AviewBox%3D"0 0 80 80" xmlns%3D"http%3A//www.w3.org/2000/svg"%3E%3Ccircle cx%3D"40" cy%3D"40" r%3D"24" style%3D"fill%23bbbbbb"/%3E%3C/svg%3E');background-repeat:no-repeat;background-position:center center;background-size:85%}input[type=radio]:focus,input[type=radio]:active,input[type=radio]:hover{outline-width:0 !important;border-color:#3498db !important}input[type=radio]:focus:checked,input[type=radio]:active:checked,input[type=radio]:hover:checked{background-image:url('data:image/svg+xml,%3C%3Fxml version%3D"1.0" standalone%3D"no"%3F%3E%3Csvg version%3D"1.1" width%3D"100" height%3D"100"%0AviewBox%3D"0 0 80 80" xmlns%3D"http%3A//www.w3.org/2000/svg"%3E%3Ccircle cx%3D"40" cy%3D"40" r%3D"24" style%3D"fill%3A%3498db"/%3E%3C/svg%3E')}input[type=radio].error{border-color:#e74c3c}input[type=radio].success{border-color:#2ecc71;background-color:#fff}input[type=checkbox]{width:2rem;height:2rem;border:1px solid #bbb;border-radius:.4rem;background-color:#fff}input[type=checkbox]:checked{background-image:url('data:image/svg+xml,%3C%3Fxml version%3D"1.0" encoding%3D"utf-8"%3F%3E%0A%3Csvg version%3D"1.1" xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" xmlns%3Axlink%3D"http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink" x%3D"0" y%3D"0" viewBox%3D"0 0 8 8" enable-background%3D"new 0 0 8 8" xml%3Aspace%3D"preserve"%3E %3Cpath fill%3D"%23222" d%3D"M6.4%2C1L5.7%2C1.7L2.9%2C4.5L2.1%2C3.7L1.4%2C3L0%2C4.4l0.7%2C0.7l1.5%2C1.5l0.7%2C0.7l0.7-0.7l3.5-3.5l0.7-0.7L6.4%2C1L6.4%2C1z" %2F%3E%0A%3C%2Fsvg%3E');background-repeat:no-repeat;background-position:center center;background-size:85%}input[type=checkbox]:focus,input[type=checkbox]:active,input[type=checkbox]:hover{outline-width:0 !important;border-color:#3498db !important}input[type=checkbox]:focus:checked,input[type=checkbox]:active:checked,input[type=checkbox]:hover:checked{background-image:url('data:image/svg+xml,%3C%3Fxml version%3D"1.0" encoding%3D"utf-8"%3F%3E%0A%3Csvg version%3D"1.1" xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" xmlns%3Axlink%3D"http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink" x%3D"0" y%3D"0" viewBox%3D"0 0 8 8" enable-background%3D"new 0 0 8 8" xml%3Aspace%3D"preserve"%3E %3Cpath fill%3D"%233498db" d%3D"M6.4%2C1L5.7%2C1.7L2.9%2C4.5L2.1%2C3.7L1.4%2C3L0%2C4.4l0.7%2C0.7l1.5%2C1.5l0.7%2C0.7l0.7-0.7l3.5-3.5l0.7-0.7L6.4%2C1L6.4%2C1z" %2F%3E%0A%3C%2Fsvg%3E')}input[type=checkbox].error{border-color:#e74c3c}input[type=checkbox].success{border-color:#2ecc71;background-color:#fff}em,.italic{font-style:italic}label{display:inline-block;cursor:pointer}legend{display:inline-block;width:auto;padding:1.5rem}ol,ul{margin:0 0 2.5rem;padding-left:2rem}ol li,ul li{margin-top:0;margin-bottom:1rem}ul ul,ul ol,ol ol,ol ul{padding-left:0;margin:1.5rem 0 1.5rem 3rem}mark{padding:.2rem .5rem;margin:0 .2rem;font-size:90%;white-space:nowrap;background:#f1f1f1;border:.1rem solid #e1e1e1;border-radius:.4rem}main,.main,#main,.container{max-width:80rem;margin:0 auto}@media(max-width: 960px){main,.main,#main,.container{width:80%}}p{margin-top:0;margin-bottom:2.5rem}select{cursor:pointer;padding:.8rem 2rem .8rem 1.5rem;border:.1rem solid #e1e1e1;border-radius:.4rem;transition:all 400ms;-moz-appearance:none;-webkit-appearance:none;-o-appearance:none;-ms-appearance:none;background-color:#fff;outline-width:0 !important;color:rgba(0,0,0,0);text-shadow:0 0 0 #000;background-image:url('data:image/svg+xml,%3C%3Fxml version%3D"1.0" standalone%3D"no"%3F%3E%3Csvg xmlns%3D"http%3A//www.w3.org/2000/svg" xmlns%3Axlink%3D"http%3A//www.w3.org/1999/xlink" style%3D"isolation%3Aisolate" viewBox%3D"0 0 20 20" width%3D"20" height%3D"20"%3E%3Cpath d%3D" M 9.96 11.966 L 3.523 5.589 C 2.464 4.627 0.495 6.842 1.505 7.771 L 1.505 7.771 L 8.494 14.763 C 9.138 15.35 10.655 15.369 11.29 14.763 L 11.29 14.763 L 18.49 7.771 C 19.557 6.752 17.364 4.68 16.262 5.725 L 16.262 5.725 L 9.96 11.966 Z " fill%3D"inherit"/%3E%3C/svg%3E');background-position:right .6rem center;background-repeat:no-repeat;background-size:1.2rem;cursor:pointer}select:focus,select:hover{outline-width:0 !important;border-color:#3498db !important;cursor:default}select:focus:hover,select:hover:hover{cursor:pointer}select:disabled{background-color:#fcfcfc;cursor:not-allowed !important}select.error{border-color:#e74c3c}select.success{border-color:#2ecc71;background-color:#fff}select.success:hover{background-color:#fff}strike,.strike{text-decoration:line-through}table{width:100%;margin-bottom:2.5rem}table th,table td{padding:1.2rem 1.5rem;text-align:left;border-bottom:.1rem solid #e1e1e1}table th:first-child,table td:first-child{padding-left:0}table th:last-child,table td:last-child{padding-right:0}textarea{-moz-appearance:none;-webkit-appearance:none;-o-appearance:none;-ms-appearance:none;padding:.8rem 1.5rem;background-color:#fff;border:.1rem solid #e1e1e1;border-radius:.4rem;transition:border-color 400ms;width:100%;resize:vertical;cursor:pointer;scrollbar-color:transparent transparent;scrollbar-width:thin}textarea::placeholder{font-style:italic;color:#a1a1a1}textarea:focus,textarea:active{border-color:#3498db !important;cursor:text;scrollbar-color:transparent #222}textarea:hover{scrollbar-color:transparent #222;border-color:#3498db !important}textarea:disabled{cursor:not-allowed;background-color:#fcfcfc}textarea.error{border-color:#e74c3c}textarea.success{border-color:#2ecc71;background-color:#fff}textarea.success:hover{background-color:#fff}h1,.h1{font-family:"light",Helvetica,Arial,sans-serif;font-weight:400;font-size:5rem;margin-top:0;margin-bottom:2rem}@media(max-width: 960px){h1,.h1{font-size:4rem}}@media(max-width: 600px){h1,.h1{line-height:1.2}}h2,.h2{font-family:"light",Helvetica,Arial,sans-serif;font-weight:400;font-size:4.2rem;margin-top:0;margin-bottom:2rem}@media(max-width: 960px){h2,.h2{font-size:3.6rem}}@media(max-width: 600px){h2,.h2{line-height:1.25}}h3,.h3{font-family:"light",Helvetica,Arial,sans-serif;font-weight:400;font-size:3.6rem;margin-top:0;margin-bottom:2rem}@media(max-width: 960px){h3,.h3{font-size:3rem}}@media(max-width: 600px){h3,.h3{line-height:1.3}}h4,.h4{font-family:"light",Helvetica,Arial,sans-serif;font-weight:400;font-size:3rem;margin-top:0;margin-bottom:2rem}@media(max-width: 960px){h4,.h4{font-size:2.4rem}}@media(max-width: 600px){h4,.h4{line-height:1.35}}h5,.h5{font-family:"light",Helvetica,Arial,sans-serif;font-weight:400;font-size:2.4rem;margin-top:0;margin-bottom:2rem}@media(max-width: 960px){h5,.h5{font-size:1.8rem}}@media(max-width: 600px){h5,.h5{line-height:1.5}}h6,.h6{font-family:"light",Helvetica,Arial,sans-serif;font-weight:400;font-size:1.5rem;margin-top:0;margin-bottom:2rem}@media(max-width: 960px){h6,.h6{font-size:1.5rem}}@media(max-width: 600px){h6,.h6{line-height:1.6}}pre code{display:block;padding:1rem 1.5rem;white-space:pre}button,input[type=button],input[type=reset],input[type=submit],.button,.btn{transition:all 400ms;display:inline-block;padding:1rem 1.5rem;text-align:center;font-size:1.1rem;font-weight:bold;letter-spacing:.1rem;text-transform:uppercase;text-decoration:none;white-space:nowrap;hyphens:none;color:#626262 !important;background-color:#e1e1e1;border-radius:.4rem;text-shadow:.1rem .1rem 0 .1rem #c8c8c8;border:.1rem solid #c8c8c8;cursor:pointer}button.active,button:focus,button:active,input[type=button].active,input[type=button]:focus,input[type=button]:active,input[type=reset].active,input[type=reset]:focus,input[type=reset]:active,input[type=submit].active,input[type=submit]:focus,input[type=submit]:active,.button.active,.button:focus,.button:active,.btn.active,.btn:focus,.btn:active{outline-width:0 !important;box-shadow:0 0 0 .2rem rgba(225, 225, 225, 0.5)}@media(min-width: 960px){button:hover,input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover,.button:hover,.btn:hover{color:#393939;background-color:#c8c8c8;text-shadow:.1rem .1rem 0 .1rem #bbb;border:.1rem solid #c8c8c8}}button.primary,input[type=button].primary,input[type=reset].primary,input[type=submit].primary,.button.primary,.btn.primary{transition:all 400ms;color:#fff !important;background-color:#3498db;border:.1rem solid #3498db;text-shadow:.1rem .1rem 0 .1rem #217dbb;border:.1rem solid #217dbb}button.primary.active,button.primary:focus,button.primary:active,input[type=button].primary.active,input[type=button].primary:focus,input[type=button].primary:active,input[type=reset].primary.active,input[type=reset].primary:focus,input[type=reset].primary:active,input[type=submit].primary.active,input[type=submit].primary:focus,input[type=submit].primary:active,.button.primary.active,.button.primary:focus,.button.primary:active,.btn.primary.active,.btn.primary:focus,.btn.primary:active{outline-width:0 !important;box-shadow:0 0 0 .2rem rgba(52,152,219,.5)}@media(min-width: 960px){button.primary:hover,input[type=button].primary:hover,input[type=reset].primary:hover,input[type=submit].primary:hover,.button.primary:hover,.btn.primary:hover{background-color:#2980b9;border:.1rem solid #2980b9;text-shadow:.1rem .1rem 0 .1rem #1b557a;border:.1rem solid #20638f}button.primary.active,button.primary:focus,button.primary:active,input[type=button].primary.active,input[type=button].primary:focus,input[type=button].primary:active,input[type=reset].primary.active,input[type=reset].primary:focus,input[type=reset].primary:active,input[type=submit].primary.active,input[type=submit].primary:focus,input[type=submit].primary:active,.button.primary.active,.button.primary:focus,.button.primary:active,.btn.primary.active,.btn.primary:focus,.btn.primary:active{outline-width:0 !important;box-shadow:0 0 0 .2rem rgba(41,128,185,.5)}}button.secondary,input[type=button].secondary,input[type=reset].secondary,input[type=submit].secondary,.button.secondary,.btn.secondary{transition:all 400ms;color:#fff !important;background-color:#95a5a6;border:.1rem solid #95a5a6;text-shadow:.1rem .1rem 0 .1rem #798d8f;border:.1rem solid #798d8f}button.secondary.active,button.secondary:focus,button.secondary:active,input[type=button].secondary.active,input[type=button].secondary:focus,input[type=button].secondary:active,input[type=reset].secondary.active,input[type=reset].secondary:focus,input[type=reset].secondary:active,input[type=submit].secondary.active,input[type=submit].secondary:focus,input[type=submit].secondary:active,.button.secondary.active,.button.secondary:focus,.button.secondary:active,.btn.secondary.active,.btn.secondary:focus,.btn.secondary:active{outline-width:0 !important;box-shadow:0 0 0 .2rem rgba(149,165,166,.5)}@media(min-width: 960px){button.secondary:hover,input[type=button].secondary:hover,input[type=reset].secondary:hover,input[type=submit].secondary:hover,.button.secondary:hover,.btn.secondary:hover{background-color:#7f8c8d;border:.1rem solid #7f8c8d;text-shadow:.1rem .1rem 0 .1rem #5a6465;border:.1rem solid #667273}button.secondary.active,button.secondary:focus,button.secondary:active,input[type=button].secondary.active,input[type=button].secondary:focus,input[type=button].secondary:active,input[type=reset].secondary.active,input[type=reset].secondary:focus,input[type=reset].secondary:active,input[type=submit].secondary.active,input[type=submit].secondary:focus,input[type=submit].secondary:active,.button.secondary.active,.button.secondary:focus,.button.secondary:active,.btn.secondary.active,.btn.secondary:focus,.btn.secondary:active{outline-width:0 !important;box-shadow:0 0 0 .2rem rgba(127,140,141,.5)}}button.success,input[type=button].success,input[type=reset].success,input[type=submit].success,.button.success,.btn.success{transition:all 400ms;color:#fff !important;background-color:#2ecc71;border:.1rem solid #2ecc71;text-shadow:.1rem .1rem 0 .1rem #25a25a;border:.1rem solid #25a25a}button.success.active,button.success:focus,button.success:active,input[type=button].success.active,input[type=button].success:focus,input[type=button].success:active,input[type=reset].success.active,input[type=reset].success:focus,input[type=reset].success:active,input[type=submit].success.active,input[type=submit].success:focus,input[type=submit].success:active,.button.success.active,.button.success:focus,.button.success:active,.btn.success.active,.btn.success:focus,.btn.success:active{outline-width:0 !important;box-shadow:0 0 0 .2rem rgba(46,204,113,.5)}@media(min-width: 960px){button.success:hover,input[type=button].success:hover,input[type=reset].success:hover,input[type=submit].success:hover,.button.success:hover,.btn.success:hover{background-color:#27ae60;border:.1rem solid #27ae60;text-shadow:.1rem .1rem 0 .1rem #19703e;border:.1rem solid #1e8449}button.success.active,button.success:focus,button.success:active,input[type=button].success.active,input[type=button].success:focus,input[type=button].success:active,input[type=reset].success.active,input[type=reset].success:focus,input[type=reset].success:active,input[type=submit].success.active,input[type=submit].success:focus,input[type=submit].success:active,.button.success.active,.button.success:focus,.button.success:active,.btn.success.active,.btn.success:focus,.btn.success:active{outline-width:0 !important;box-shadow:0 0 0 .2rem rgba(39,174,96,.5)}}button.info,input[type=button].info,input[type=reset].info,input[type=submit].info,.button.info,.btn.info{transition:all 400ms;color:#fff !important;background-color:#1abc9c;border:.1rem solid #1abc9c;text-shadow:.1rem .1rem 0 .1rem #148f77;border:.1rem solid #148f77}button.info.active,button.info:focus,button.info:active,input[type=button].info.active,input[type=button].info:focus,input[type=button].info:active,input[type=reset].info.active,input[type=reset].info:focus,input[type=reset].info:active,input[type=submit].info.active,input[type=submit].info:focus,input[type=submit].info:active,.button.info.active,.button.info:focus,.button.info:active,.btn.info.active,.btn.info:focus,.btn.info:active{outline-width:0 !important;box-shadow:0 0 0 .2rem rgba(26,188,156,.5)}@media(min-width: 960px){button.info:hover,input[type=button].info:hover,input[type=reset].info:hover,input[type=submit].info:hover,.button.info:hover,.btn.info:hover{background-color:#16a085;border:.1rem solid #16a085;text-shadow:.1rem .1rem 0 .1rem #0d5d4d;border:.1rem solid #107360}button.info.active,button.info:focus,button.info:active,input[type=button].info.active,input[type=button].info:focus,input[type=button].info:active,input[type=reset].info.active,input[type=reset].info:focus,input[type=reset].info:active,input[type=submit].info.active,input[type=submit].info:focus,input[type=submit].info:active,.button.info.active,.button.info:focus,.button.info:active,.btn.info.active,.btn.info:focus,.btn.info:active{outline-width:0 !important;box-shadow:0 0 0 .2rem rgba(22,160,133,.5)}}button.warning,input[type=button].warning,input[type=reset].warning,input[type=submit].warning,.button.warning,.btn.warning{transition:all 400ms;color:#fff !important;background-color:#e67e22;border:.1rem solid #e67e22;text-shadow:.1rem .1rem 0 .1rem #bf6516;border:.1rem solid #bf6516}button.warning.active,button.warning:focus,button.warning:active,input[type=button].warning.active,input[type=button].warning:focus,input[type=button].warning:active,input[type=reset].warning.active,input[type=reset].warning:focus,input[type=reset].warning:active,input[type=submit].warning.active,input[type=submit].warning:focus,input[type=submit].warning:active,.button.warning.active,.button.warning:focus,.button.warning:active,.btn.warning.active,.btn.warning:focus,.btn.warning:active{outline-width:0 !important;box-shadow:0 0 0 .2rem rgba(230,126,34,.5)}@media(min-width: 960px){button.warning:hover,input[type=button].warning:hover,input[type=reset].warning:hover,input[type=submit].warning:hover,.button.warning:hover,.btn.warning:hover{background-color:#d35400;border:.1rem solid #d35400;text-shadow:.1rem .1rem 0 .1rem #873600;border:.1rem solid #a04000}button.warning.active,button.warning:focus,button.warning:active,input[type=button].warning.active,input[type=button].warning:focus,input[type=button].warning:active,input[type=reset].warning.active,input[type=reset].warning:focus,input[type=reset].warning:active,input[type=submit].warning.active,input[type=submit].warning:focus,input[type=submit].warning:active,.button.warning.active,.button.warning:focus,.button.warning:active,.btn.warning.active,.btn.warning:focus,.btn.warning:active{outline-width:0 !important;box-shadow:0 0 0 .2rem rgba(211,84,0,.5)}}button.danger,input[type=button].danger,input[type=reset].danger,input[type=submit].danger,.button.danger,.btn.danger{transition:all 400ms;color:#fff !important;background-color:#e74c3c;border:.1rem solid #e74c3c;text-shadow:.1rem .1rem 0 .1rem #d62c1a;border:.1rem solid #d62c1a}button.danger.active,button.danger:focus,button.danger:active,input[type=button].danger.active,input[type=button].danger:focus,input[type=button].danger:active,input[type=reset].danger.active,input[type=reset].danger:focus,input[type=reset].danger:active,input[type=submit].danger.active,input[type=submit].danger:focus,input[type=submit].danger:active,.button.danger.active,.button.danger:focus,.button.danger:active,.btn.danger.active,.btn.danger:focus,.btn.danger:active{outline-width:0 !important;box-shadow:0 0 0 .2rem rgba(231,76,60,.5)}@media(min-width: 960px){button.danger:hover,input[type=button].danger:hover,input[type=reset].danger:hover,input[type=submit].danger:hover,.button.danger:hover,.btn.danger:hover{background-color:#c0392b;border:.1rem solid #c0392b;text-shadow:.1rem .1rem 0 .1rem #81261d;border:.1rem solid #962d22}button.danger.active,button.danger:focus,button.danger:active,input[type=button].danger.active,input[type=button].danger:focus,input[type=button].danger:active,input[type=reset].danger.active,input[type=reset].danger:focus,input[type=reset].danger:active,input[type=submit].danger.active,input[type=submit].danger:focus,input[type=submit].danger:active,.button.danger.active,.button.danger:focus,.button.danger:active,.btn.danger.active,.btn.danger:focus,.btn.danger:active{outline-width:0 !important;box-shadow:0 0 0 .2rem rgba(192,57,43,.5)}}.input{margin-bottom:1.5rem}.input.text label,.input.email label,.input.tel label,.input.number label,.input.date label,.input.password label,.input.search label,.input.select label,.input.textarea label{display:block;font-weight:bold;margin-bottom:.5rem;text-transform:capitalize}.input.text input,.input.text select,.input.text textarea,.input.email input,.input.email select,.input.email textarea,.input.tel input,.input.tel select,.input.tel textarea,.input.number input,.input.number select,.input.number textarea,.input.date input,.input.date select,.input.date textarea,.input.password input,.input.password select,.input.password textarea,.input.search input,.input.search select,.input.search textarea,.input.select input,.input.select select,.input.select textarea,.input.textarea input,.input.textarea select,.input.textarea textarea{width:100%}/*# sourceMappingURL=min.css.map */
select{
            margin: 0;
        }
        .row{
            border-bottom: 1px solid #ccc;
            padding: 25px 0;
        }
        #add-row{
            margin: 25px 0;
            width: 100%;
        }

        .container{
            margin-top: 25px;
        }
          
              
            
!

JS

              
                $(function(){
    var tpl_raw = $('#tpl-add-row').html(),
        $addRow = $('#add-row'),
        $formDevis = $('#formDevis'),
        $container = $('.container-row'),
        clearStorage = function(){
            for(var k in sessionStorage){
                sessionStorage.removeItem(k);
            }
            sessionStorage.clear();
        },
        reset = function(){
            clearStorage();
            $container.empty();
            $addRow.click();
        };

    $addRow.on("click", function(){
        $container.append(tpl_raw.replace(/%%len%%/g, $container.find('.grid.has-gutter').length + 1));
    });

    reset();

    $formDevis.on('change', 'select[id^=cat_]', function(){
        var cat = $(this).find('option:selected').data('id');

        $(this).parent().next().find('select').attr('hidden', 'hidden').filter('[id^='+cat+'_]').removeAttr('hidden').parent().next().find('input').removeAttr('hidden');
    });
    $formDevis.on({
      'submit': function(e){
          //vérifier erreur d'abords !!!
          if(0 === $(this).find('.error').length){
              clearStorage();
              $('select[id^=tshirt_], select[id^=sweetshirt_], input[id^=qte_]').each(function(i){
                  if('' !== $(this).val()){
                      sessionStorage.setItem($(this).attr('id'), $(this).val());
                      if($(this)[0].nodeName.toLowerCase() === 'select'){
                          sessionStorage.setItem($(this).attr('id') + '_article_id', $(this).find('option:selected').data('id'));
                      }
                  }
              });
          }
          e.preventDefault();
      },
      'reset': function(){
        if(confirm("Voulez vous vraiment tout supprimer ?")){
            reset();
        }
      }
    });
});
              
            
!
999px

Console