/*
 * Base.css
 * CSS du site Monsieur Patio
 * Styles de liens, typographies, formulaires, etc.
 */

/* =============================================================================
   Normaliser les styles
   ========================================================================== */
*,
*:before,
*:after{
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	background-repeat: no-repeat;
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.5; }

::-moz-selection { background: #000; color: #fff; text-shadow: none; }
::selection { background: #000; color: #fff; text-shadow: none; }

a { color:#000; }
a:visited { color:#000; }
a:hover { color:#565859; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; background-color:transparent; }

abbr[title] { border-bottom: 1px dotted; text-decoration:none; }
a > abbr[title] { border-bottom: none; }
b, strong { font-weight:700; }
b.semi, strong.semi { font-weight:600; }
i, em { font-style: italic; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #aaa; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: 700; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; line-height:1.5; }
big { font-size: 125%; }

sub, sup { font-size: 85%; line-height: 0; position: relative; vertical-align: baseline; text-transform:none; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 0 0 10px 0; padding: 0 0 0 25px; list-style-position:outside; }
ul ul, ol ol, ul ol, ol ul { margin-top:0; }
li { margin:4px 0; }
nav ul, nav li { margin:0; padding:0; list-style-image:none; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

figure { margin: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; max-width:100%; height:auto; width:auto; }
svg:not(:root) { overflow: hidden; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

#gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

#gallery a {
	border: 1px solid #000;
	background-color: #fff;
	padding: 3px;
}

#gallery a div {
	background-size: cover;
	height: 200px;
	width: 300px;
}

/* ===== Primary Styles ========================================================
	http://www.monsieurpatio.ca
   ========================================================================== */

html {
	font: 15px/20px 'Open Sans', sans-serif;
	color: #000;
}

/*
 * Typographie
 */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: #000;
	line-height: 1.285714em;
}
h4, h5, h6 { font-weight: 400; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; color:inherit; }
h1 sup, h2 sup, h3 sup, h4 sup, h5 sup, h6 sup { text-transform:none; }

h1 { font-size: 2em; /* 30/15 */ line-height: 1.333333em; margin: 15px 0 20px 0; }
h2 { font-size: 1.666666666666667em; /* 25/15 */ margin: 30px 0 30px 0; text-transform:uppercase; }
h3 { font-size: 1.333333333333333em; /* 20/15 */ margin: 20px 0 10px 0; color:#cb232e; }
h4 { font-size: 1.133333333333333em; /* 17/15 */ margin: 15px 0 10px 0; }
h5 { font-size: 1em; line-height: 1.307692em; margin: 15px 0 5px 0; text-transform:uppercase; font-weight:400; }
h6 { font-size: 1em; line-height: 1.307692em; margin: 10px 0 5px 0; }



p { margin: 0 0 1em 0; }
p img { margin: 0; }

.remove-top { margin-top: 0 !important; }
.add-top { margin-top: 1em !important; }		  /* Même valeur que la marge du <p> */
.half-top { margin-top: 0.5em !important; }
.add-d-top { margin-top: 2em !important; }		  /* Double marge */
.add-t-top { margin-top: 3em !important; }		  /* Triple marge */
.remove-bottom { margin-bottom: 0 !important; }
.half-bottom { margin-bottom: 0.5em !important; }
.add-bottom { margin-bottom: 1em !important; }   /* Même valeur que la marge du <p> */
.add-d-bottom { margin-bottom: 2em !important; } /* Double marge */
.add-t-bottom { margin-bottom: 3em !important; } /* Triple marge */

blockquote { font-size: 1.076923em; /*14px*/ line-height: 1.7em; color: #565859; font-style: italic; }
blockquote { margin: 0 0 20px; }
blockquote cite { display: block; font-size: 0.85714285em; /*12px/14px*/ color: #555; }
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a, blockquote cite a:link, blockquote cite a:visited { color: #555; }

hr { border: solid #aaa; border-width: 1px 0 0; clear: both; margin: 20px 0; height: 0; }


/*
 * Listes
 */



/*
 * Liens spéciaux
 */
a.lien1,
a.lien1:visited {
	transition: all .2s;
	background:#cb232e;
	color: #fff;
	border:2px solid #cb232e;
	padding: 0 5px;
	display: inline-block;
	cursor: pointer;
	text-align:center;
	font-weight:700;
	line-height: 40px;
	text-decoration:none;
	width:100%;
	max-width:200px;
	text-transform:uppercase;
	border-radius:3px;
}
a.lien1:hover,
a.lien1:focus {
	color:#fff;
	background:#333;
	border-color:#333;
}

a.lien2,
a.lien2:visited {
	transition: all .2s;
	background:transparent;
	color: #fff;
	border:2px solid #cb232e;
	padding: 0 5px;
	display: inline-block;
	cursor: pointer;
	text-align:center;
	font-weight:700;
	font-size:1.2em; /* 18/15 */
	line-height: 40px;
	text-decoration:none;
	width:100%;
	max-width:150px;
	text-transform:uppercase;
	border-radius:3px;
}
a.lien2:hover,
a.lien2:focus {
	color:#fff;
	background:#333;
	/*border-color:#333;*/
}


/*
 * Formulaires
 */
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 0 15px 0;
    padding: 0.5em;
}

form { margin-bottom: 1.5em; }

input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"],
input[type="search"],
textarea{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}


input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"],
input[type="search"],
textarea,
select {
	display: block;
	border:2px solid #fff;
	border-radius:0;
	padding: 7px;
	outline: none;
	margin: 0 0 15px 0;
	width:100%;
	/*max-width:250px;*/
	color:#000;
	background: #fff;
	box-shadow:none;
}
input.long {
	max-width:600px;
}

form input[disabled],
form textarea[disabled],
form select[disabled] { background:#d3d3d3!important; }

label.disabled { font-style:italic; cursor:default; }


input[type="text"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus { border: 2px solid #666; }


input[type="checkbox"]:valid,
input[type="radio"]:valid,
input[type="text"]:valid,
input[type="password"]:valid,
input[type="tel"]:valid,
input[type="email"]:valid,
input[type="search"]:valid,
textarea:valid {  }

input[type="checkbox"]:invalid,
input[type="radio"]:invalid,
input[type="text"]:invalid,
input[type="password"]:invalid,
input[type="tel"]:invalid,
input[type="email"]:invalid,
input[type="search"]:invalid,
textarea:invalid,
input[type="checkbox"].invalide,
input[type="radio"].invalide,
input[type="text"].invalide,
input[type="password"].invalide,
input[type="tel"].invalide,
input[type="email"].invalide,
input[type="search"].invalide,
textarea.invalide,
select.invalide
{
	/*border-color:red;
	color:red;
	box-shadow: none;*/
}

select {
	text-transform:uppercase;
	display:inline-block;
	width:auto;
	margin-right:10px;
	padding:6px 12px;
}

textarea { min-height: 120px; }
input[type="checkbox"] { display: inline; }
legend, .faux-label, label { font-weight: 400; font-size: 1em; }
.faux-label, label { line-height:1.8; }

label.invalide { color:red; }
legend { font-weight: 700; }
legend span { font-weight: normal; }


/*
 * Boutons radio/checkbox
 */
input[type="radio"],
input[type="checkbox"] {
	display:none;
}
.ie8 input[type="radio"],
.ie8 input[type="checkbox"] {
	display:inline;
}
input[type=radio] + label,
input[type="checkbox"] + label {
	
}
input[type=radio] + label:before,
input[type="checkbox"] + label:before {
	content: '';
	height:21px;
	width:21px;
	display: inline-block;
	line-height: 21px;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid #9c9ea0;
	background:#eaebec;
	margin-right: 10px;
	margin-top:-2px; /* Pour 'centrer' */
	transition:background-color 0.2s ease;
}
input[type=radio] + label:before {
	border-radius:50%;
}
input[type=radio]:checked + label:before,
input[type="checkbox"]:checked + label:before {
	background: #4e4e50;
	border-color:#4e4e50;
}
input[type=radio][disabled] + label,
input[type="checkbox"][disabled] + label,
input[type=radio][disabled] + label:before,
input[type="checkbox"][disabled] + label:before {
	font-style:italic;
	cursor: default;
}


/*
 * Boutons
 */
a.button,
a.button:visited,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	transition: all .2s;
	background:#cb232e;
	color: #fff;
	border:2px solid #cb232e;
	padding: 10px;
	display: inline-block;
	cursor: pointer;
	text-align:center;
	font-weight:700;
	line-height: normal;
	text-decoration:none;
	/*width:100%;*/
	/*max-width:150px;*/
	text-transform:uppercase;
	border-radius:3px;
}

a.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
a.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
	color:#fff;
	background:#333;
	border:2px solid #333;
}



/* =============================================================================
   Misc Classes
   ========================================================================== */
/* Textes/paragraphes */
.vsmall { font-size: 75%; line-height:1.5; }
.small { font-size: 85%; line-height:1.5; } /* Comme plus haut */
.big { font-size: 125%; } /* Comme plus haut */

.alignerTxtG { text-align:left; }
.alignerTxtD { text-align:right; }
.alignerTxtC { text-align:center; }

.block { display:block; } /* <span> changement de ligne */

.cssTable {
	display:table;
	table-layout:fixed;
	width:100%;
}
.cssTable > * {
	display:table-cell;
	vertical-align:top;
}


/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */
/* For image replacement */
.ir { background-color:transparent; border:0; overflow:hidden; *text-indent: -9999px; }
.ir:before { content:""; display:block; width:0; height:150%; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:after { clear:both; }
.clearfix { *zoom:1; }
.clearfix { zoom: 1; }