@charset "UTF-8";
/* =========================================================
   VARIABLES
   ========================================================= */
:root{--color-text:#111;--color-bg:#fff;

    /* Couleurs principales */
    --color-green:#4fbf8a;   /* vert eau (moins pomme, plus pro) */
    --color-yellow:#f2c94c;

    /* Couleurs secondaires */
    --color-border:#ccc;--color-light:#f7f7f7;
	--color-blue:#1f6feb;
    /* Couleurs hover */
    --color-green-dark:#3aa876;}
/* =========================================================
   RESET & BASE
   ========================================================= */
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:var(--color-bg);}
body, html{margin:0;padding:0;overflow-x:hidden;}
body{color:var(--color-text);font-family:'Oswald', Arial, sans-serif;width:100%;}
article, aside, footer, header, nav, section, h1, h2, h3, p, ul, ol{display:block;margin:0;padding:0;}
ul { list-style:none; }
a, a:hover, a:active, a:visited, a:focus{outline:0;text-decoration:none;color:inherit;}img { max-width:100%; height:auto; }
strong { font-weight:700; color:var(--color-text); }
table{max-width:100%;box-sizing:border-box;}
.clear { clear:both; display:block; }
.icon-service{width:100%;height:auto;border-radius:.6em;margin-bottom:.6em;}
.ico-service{width:48px;height:48px;color:var(--color-green);}
/* =========================================================
   HEADER
   ========================================================= */
header p{text-align:right;margin:.4em 1em 0 0;letter-spacing:.1em;font-size:14px;font-weight:bold;color:var(--color-text);}
#navigation{padding:1em 3em 0 3em;}
#accueil{display:block;font-size:18px;text-align:center;text-transform:uppercase;font-weight:bold;color:var(--color-green);transition:.3s;margin-bottom:1em;}
#navigation nav ul li{display:inline-block;padding:1em 1.4em;}
#navigation nav ul li a{text-transform:uppercase;font-weight:bold;padding:1em;transition:.3s;}
#navigation nav ul li a:hover,
#accueil:hover{color:var(--color-yellow);transform:scale(1.1);}
/* =========================================================
   NAV MOBILE / JS COMPATIBLE
   ========================================================= */
#close,
#up,
#open{display:none;}
#close{height:1em;width:1em;position:fixed;right:.2em;top:.4em;font-size:2em;line-height:1em;color:var(--color-green);background-color:var(--color-bg);border:.1em solid var(--color-green);text-align:center;border-radius:.1em;cursor:pointer;z-index:20;padding:.25em .24em;}
#up{height:1em;width:1em;position:fixed;right:.2em;top:2.4em;color:var(--color-bg);background-color:var(--color-green);font-size:2em;line-height:.8em;border:.1em solid var(--color-yellow);text-align:center;border-radius:.1em;cursor:pointer;z-index:4;padding:.24em;}
#open{background-color:var(--color-bg);font-size:2em;color:var(--color-green);height:1em;width:1em;position:fixed;right:.2em;top:.4em;text-align:center;border:.1em solid var(--color-green);cursor:pointer;border-radius:.1em;transform:rotate(90deg);z-index:15; padding:0em .25em .5em .25em;}
#open:hover,
#close:hover{background:var(--color-green);color:var(--color-bg);}
/* menu mobile */
header .menu ul{display:none;margin:0;position:absolute;right:0;padding-top:3em;}
header nav.menu.touched ul{display:block;background:var(--color-bg);height:100%;width:100%;position:fixed;top:-1em;z-index:11;margin-top:1em;text-align:center;}
#navigation nav.menu.touched #close{display:block;z-index:33;}
#navigation nav.menu ul li{display:block;}
#navigation nav.menu ul li a{display:inline-block;padding:.6em;}
#navigation nav.menu ul #acc{display:block;}
nav.menu #open{display:block;}
/* =========================================================
   ARTICLE — PAGE ENCOMBRANTS
   ========================================================= */
article#enlevement-encombrants-strasbourg-alsace{padding:2em;box-sizing:border-box;overflow:hidden;}
article#enlevement-encombrants-strasbourg-alsace h1{text-transform:uppercase;font-size:32px;padding:.6em;color:var(--color-bg);background:var(--color-green);border-radius:1em;text-align:center;margin-bottom:1em;}
article#enlevement-encombrants-strasbourg-alsace p{margin:1em;text-align:justify;}
/* Sections */
article#enlevement-encombrants-strasbourg-alsace section{width:33.33%;float:left;padding:1em;box-sizing:border-box;}
#enlevement-encombrants-strasbourg-alsace section h2,
#tarif-enlevement-encombrants h2{box-sizing:border-box;overflow:hidden;text-transform:uppercase;text-align:center;padding:.8em .4em 1.6em .4em;color:var(--color-green);
border:solid .4em var(--color-yellow);background:var(--color-bg);}
#tarif-enlevement-encombrants h2{padding:.4em;margin-bottom:1em;}
ul.size li h3{color:var(--color-green);margin-bottom:.4em;}
ul.size li+li h3{margin-top:1.6em;}
article section > ul{padding:1em 2em 0em 2em;border:solid var(--color-border) 1px;border-top:0;border-bottom:0;}
article section ul li{padding:.4em;display:table;}
article section ul li p{margin-top:1.6em;}
article section ul li ul li:before{content:"➔";font-weight:bold;padding-right:.8em;color:var(--color-green);}
article section > ul + p{border:solid var(--color-border) 1px;border-top:0;text-align:center;font-weight:bold;padding:0 2em 2em 2em;}
article section ul + p a{display:inline-block;border:solid 2px var(--color-green);padding:.4em 1.6em;text-transform:uppercase;font-size:20px;}
article section ul + p a:hover{background:var(--color-green);color:var(--color-bg);}
ul.size ol li{}
ul.size ol li::before{display:inline-block;content:"";height:1em;width:1em;background:var(--color-yellow);border-radius:1em;margin-right:.6em;vertical-align:center;}
#enlevement-encombrants-strasbourg-alsace ul.size + p{margin:0;text-align:center;}
/* =========================================================
   TARIFS
   ========================================================= */
section#tarif-enlevement-encombrants{/*width:66.66%;*/padding:2em;}
#tarif-enlevement-encombrants h3 {
    font-size: 1.35em;
    font-weight: 700;
    margin:0 0 .6em;
    padding-bottom: 0.3em;
    border-bottom: 2px solid var(--color-border);
    color:var(--color-text);
}
#tarif-enlevement-encombrants h3::before{content:"";height:1em;width:1em;}
#tarif-enlevement-encombrants p+h3{margin-top:2em;}
#tarif-enlevement-encombrants table{width:100%;margin:1em 0 2em 0;}
#tarif-enlevement-encombrants table thead td{color:var(--color-green);font-weight:bold;text-transform:uppercase;}
#tarif-enlevement-encombrants table td{padding:1em;border:solid 2px var(--color-green);text-align:center;}
#tarif-enlevement-encombrants table tfoot td{background:var(--color-green);color:var(--color-bg);font-weight:bold;}
#tarif-enlevement-encombrants .img-top{width:100%;height:auto;margin-bottom:1em;border-radius:.6em;}
#tarif-enlevement-encombrants table + p{text-align:center;}
/* =========================================================
   FORMULAIRE
   ========================================================= */
#contact-enlevement-encombrants-alsace{background:var(--color-light);}
#contact-enlevement-encombrants-alsace fieldset{background:var(--color-bg);padding:0;border:0;margin:0;}
#contact-enlevement-encombrants-alsace fieldset legend{background:var(--color-green);color:var(--color-bg);width:100%;padding:1em 1.5em;font-size:32px;font-weight:bold;text-transform:uppercase;box-sizing:border-box;}
#contact-enlevement-encombrants-alsace form{padding:1em 2em;}
dl.top{width:50%;float:left;display:table;}
dl.top dt, dl.top dd{display:table-cell;vertical-align:bottom;}
dl.top dd{width:100%;}
form dl dt label{text-transform:uppercase;cursor:pointer;padding-right:.3em;}
form dd input, textarea{width:100%;border:solid 2px var(--color-green);padding:.2em .4em;box-sizing:border-box;}
.submit dt p{text-align:justify;}
.submit dd{margin:1em;}
.submit #envoyer{font-size:18px;text-transform:uppercase;font-weight:bold;}
.submit #envoyer:hover{background:var(--color-green);color:var(--color-bg);}
/* =========================================================
   COORDONNÉES
   ========================================================= */
#coordonnees-encombrants{background:url('/enlevement-encombrants-alsace.jpg') no-repeat center bottom / cover;position:relative;/*padding:2em;*/
border-left:solid 2em var(--color-blue);box-sizing:border-box;}
#coordonnees-encombrants h2{text-transform:uppercase;font-size:32px;padding:1em 1.5em;background:var(--color-yellow);color:var(--color-bg);text-align:center;}
#coordonnees-encombrants h3{margin:1.6em 2em 0 2em;padding-left:1em;border-left:1.4em solid var(--color-blue); /* vert doux */}
#coordonnees-encombrants dl{margin:0;padding:0 3em 3em 3em;background:var(--color-bg);}
dt.loc, dt.tel, dt.mel{font-weight:bold;margin-top:2em;text-transform:uppercase;}
#coordonnees-encombrants p{padding:0 2em 3em 2em;}
a#mentions{font-weight:bold;position:absolute;bottom:0;right:1em;padding:.4em .4em .4em 1em;}
a#mentions:hover{color:var(--color-yellow);}
/* =========================================================
   FOOTER STRUCTURE
   ========================================================= */
body > footer{display:table;width:100%;}
body > footer section{display:table-cell;width:50%;vertical-align:top;overflow:hidden;}
/* =========================================================
   RESPONSIVE
   ========================================================= */
@media screen and (max-width:1060px){
    article#enlevement-encombrants-strasbourg-alsace section { width:50%; }
    body > footer section { width:100%; display:block; }}
@media screen and (max-width:640px){
    article#enlevement-encombrants-strasbourg-alsace section { width:100%;padding:.6em; }
    ul.jsok + #open { display:block; }
    #navigation nav.touched #close { display:block; z-index:11; }
    header p{padding-right:4em;}
    header ul.jsok { display:none; margin:0; position:absolute; right:0; padding-top:3em; }
    header nav.touched ul{display:block;background:var(--color-bg);height:100%;width:100%;position:fixed;top:-1em;z-index:11;margin-top:1em;text-align:center;}
    #navigation nav.touched ul #acc,
    #navigation nav.touched ul li { display:block; }
    #contact-enlevement-encombrants-alsace form, section#tarif-enlevement-encombrants, article#enlevement-encombrants-strasbourg-alsace{ padding:0 1em; }
    #tarif-enlevement-encombrants h2{margin-top:1em;}
    article section > ul{padding:.6em 1em 0 1em;}
}
@media screen and (max-width:460px){
    article#enlevement-encombrants-strasbourg-alsace section {padding:.4em;}
    #contact-enlevement-encombrants-alsace form, section#tarif-enlevement-encombrants, article#enlevement-encombrants-strasbourg-alsace{ padding:0 .4em; }
	#tarif-enlevement-encombrants table td{padding:.4em;}
    article section > ul{padding:.4em .4em 0 .4em;}
    dl.top { width:100%; }
    
}
/* =========================================================
   FIN — SUPPRESSIONS IMPORTANTES
   ========================================================= */
/*
SUPPRIMÉ CAR OBSOLÈTE :
- #demonte-cuve-strasbourg-alsace-france (ancien site cuve fioul)
- #tarif-enlevement-cuve-domestique (ancien ID)
- #contact-demonter-cuve-alsace (ancien ID)
- #demontage-cuve (image cuve fioul)
- Couleurs rose (#ea518a) et bleu-gris (#324563)
- Images :/demontage-cuve-fioul-alsace-grand-est.jpg
- Styles liés au dégazage / découpe / cuve fioul
*/
