/* -------------------------------------------

	Name:		Centre dentaire Lamarre
	Date:		2025/07/13
	Author:		http://psdhtml.me

---------------------------------------------  */
*, *:before, *:after {
	margin: 0; padding: 0; box-sizing: border-box; outline: 0 solid var(--theme); transform-origin: center center;
	justify-content: var(--justify);
}

html { overflow-y: scroll; min-height: 100%; margin: 0; font-size: 100.01%; -webkit-tap-highlight-color: transparent; -moz-osx-font-smoothing: grayscale; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
body { overflow-x: hidden; width: 100%; min-height: 100%; background: var(--storm); font-size: var(--fz_main); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }


/*! Variables --------- */
:root {
    --white:     #ffffff; 
    --black:     #000000; 

    --bg:        #f2ede9; 
    --orange:    #f39f07; 
    --theme:     #53b9a4; 
    --storm:     #173a3f; 
	
	--rpp:     clamp(16px, 2.8571428571vw, 40px);
	--rpn:     calc(0px - var(--rpp));
	
	--fw_main: 400;
	--fw_bold: 700;
	--fw_head: var(--fw_main);	
	
	--ff_main: Open_sauce_one, Arial, Helvetica, sans-serif;
	--ff_head: inherit;	
	
	--lh_main: 1.4444444444;
	--lh_head: 1.0625;	
	
	--fz_main: 18px;
	--fz_h1: clamp(46px, 4.5714285714vw, 64px);
	--fz_h2: clamp(36px, 3.6666666666vw, 44px);
	--fz_h3: clamp(24px, 2.0714285714vw, 29px);
		
	--mr_main: calc(var(--lh_main) * var(--fz_main));
	--mr_head: var(--mr_main);
	--mr_sect: 40px;
	
	--ta_start: left;
	--ta_end:   right;
	--justify:  flex-start;
	
	--cols: var(--rpp);
	--b2r: 15px;
	--glw: 1360px;
	--logo: clamp(56px, 6.4285714286vw, 90px);
	--footer_p: clamp(88px, 15.7142857143vw, 220px);
}


/*! Defaults --------- */
body, textarea, input, select, option, button { color: var(--black); font-family: var(--ff_main); font-weight: var(--fw_main); line-height: var(--lh_main); }
ul, ol, dl, p, figure, table, pre, h1, h2, h3, h4, h5, h6, legend { margin-bottom: var(--mr_main); }

h1, h2, h3, h4, h5, h6, legend { margin-bottom: var(--mr_head); font-size: var(--fz_h3); font-family: var(--ff_head); font-weight: var(--fw_head); line-height: var(--lh_head); }
h1 { font-size: var(--fz_h1); }
h2 { font-size: var(--fz_h2); }
h3 { font-size: var(--fz_h3); }

a { background: none; color: var(--theme); text-decoration: none; cursor: pointer; }
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, legend a, #footer a, .list-contact a, #top a { color: inherit; }

ul, ol, dd, blockquote { padding-inline-start: calc(var(--fz_main) * 2.05); }


/*! Mixins --------- */
/* fill */	.list-featured li:before { content: ""; display: block; overflow: hidden; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; text-align: left; text-indent: -3000em; direction: ltr; }
/* wide */	#top:before, .module-featured:before, .module-wide:before, #top:before, #footer:before { content: ""; display: block; position: absolute; left: 50%; right: auto; top: 0; bottom: 0; z-index: -1; width: 100vw; margin: 0 0 0 -50vw; }
/* icon */ 	#logo:before, .list-contact li:before, #footer:after { display: block; position: absolute; left: 0; right: 0; top: 50%; margin: -10px 0 0; font-weight: 400; font-family: i; font-style: normal; line-height: 20px; text-align: center; text-indent: 0; letter-spacing: normal; }
/* i:bg */	.module-featured img, .module-featured video, .module-featured iframe { display: block; width: 100% !important; height: 100% !important; object-fit: cover; }
/* a11y	*/	#top a:after, #footer ul a:before, .list-contact a:before { content: ""; display: block; position: absolute; left: 50%; top: 50%; right: auto; bottom: auto; z-index: 8; width: 100%; min-width: 44px; height: 100%; min-height: 44px; margin: 0; padding: 0; box-shadow: none; border-radius: 0; border-width: 0; transform: translate(-50%, -50%); }


/*! Layout --------- */
#root { position: relative; width: 100%; padding: 0 var(--rpp); background: var(--bg); }
	#top { position: relative; z-index: 9; width: 100%; max-width: var(--glw); margin: 0 auto; padding: clamp(32px, 3.2142857143vw, 45px) 0 clamp(32px, 3.2142857143vw, 35px); color: var(--white); font-size: var(--fz_h3); }
		#top:before { background: var(--storm); }
		#logo { position: relative; z-index: 2; width: calc(var(--logo) * 4.8); height: var(--logo); margin: 0; }
			#logo:before { content: "\e903"; top: 0; margin: 0; font-size: var(--logo); line-height: var(--logo); }
			#logo a { display: block; overflow: hidden; width: 100%; height: 100%; text-indent: -3000em; text-align: left; direction: ltr; }
		#skip { position: fixed; top: 0; left: 0; right: 0; z-index: 10001; }
			#skip ul { list-style: none; margin: 0; padding: 0; }
			#skip a { position: absolute; left: -3000em; top: var(--rpp); white-space: nowrap; outline: none; }
				#skip a:focus, #skip a:active { left: var(--rpp); }
		#top > ul { list-style: none; margin: 0; padding: 0; line-height: 1.3103448276; text-align: right; }
			#top > ul a { display: block; position: relative; }
	#content, #footer { position: relative; z-index: 3; width: 100%; max-width: var(--glw); margin-left: auto; margin-right: auto; }
		#content { }
			#content > *:last-child { margin-bottom: var(--mr_sect); }
			#content > .cols:last-child { margin-bottom: calc(var(--mr_sect) - var(--mr_main)); }
		#footer { z-index: 2; padding: var(--footer_p) 0 .1px; color: var(--white); font-size: 12px; line-height: 1.5; --b2r: 0px; }
			#footer:before { background: var(--storm); }
			#footer:after { content: "\e903"; right: auto; top: 0; margin: 0; font-size: var(--logo); line-height: var(--footer_p); }
			#footer ul { overflow: hidden; position: relative; list-style: none; margin: 0; padding: 11px 0; border-top: 1px solid var(--white); }
				#footer ul a { display: block; position: relative; }


/*! Columns --------- */
.cols { display: block; position: relative; margin-left: calc(0px - var(--cols)); }
	.cols > * { display: block; position: relative; clear: none; border: 0 solid rgba(0,0,0,0); border-left-width: var(--cols); }
	.cols.align-middle > figure { align-self: flex-start; }
	
[class*="width-"] { width: 100%; max-width: var(--width); --width: none; }
	.width-20 { --width: 20%; }
	.width-25 { --width: 25%; }
	.width-33 { --width: 33.33333333333%; }
	.width-50 { --width: 50%; }
	.width-100 { --width: 100%; }


/*! Modules --------- */
.module-featured { position: relative; z-index: 2; margin: var(--mr_sect) 0 calc(var(--mr_sect) * 1.9); padding: var(--rpp) 0; color: var(--white); --pd: clamp(28px, 3.4285714286vw, 48px); }
	.module-featured:before { background: var(--storm); }
	.module-featured article { position: relative; z-index: 2; }
		.module-featured article > div { position: absolute; left: 0; right: 0; top: 0; bottom: 0; max-width: calc(1082px + var(--pd) * 2); padding: var(--pd) var(--pd) max(0.1px, calc(var(--pd) - var(--mr_main))); }
	.module-featured figure { margin: 0; }
	.module-featured > .list-contact { margin: 0; padding: calc(var(--rpp) * 2) 0 var(--rpp); font-size: var(--fz_h3); line-height: 1.3103448276; text-align: center; }
	#content > .module-featured:first-child { padding-top: 0; }

.module-wide { position: relative; z-index: 2; margin: var(--mr_sect) 0; padding: var(--pd) 0 max(0.1px, calc(var(--pd) - var(--mr_main))); --bg: var(--theme); --pd: var(--rpp); }
	.module-wide:before { background: var(--bg); }


/*! Content --------- */
.fw-bold { font-weight: var(--fw_bold); }
.fs-italic { font-style: italic; }

.text-start { text-align: var(--ta_start); --justify: flex-start; }
.text-center { text-align: center; --justify: center; }
.text-end { text-align: var(--ta_end); --justify: flex-end; }
.text-justify { text-align: justify; --justify: space-between; }
.text-uppercase { text-transform: uppercase; }

.size-16 { font-size: 16px; }

.overlay-theme { color: var(--theme); }


/*! Links --------- */
.link-btn { margin-right: calc(0px - var(--btn_dist)); margin-bottom: calc(var(--mr_main) - var(--btn_dist)); }
	.link-btn > * { margin: 0 var(--btn_dist) var(--btn_dist) 0; }


/*! Media --------- */
img, iframe, object, embed { display: block; overflow: hidden; max-width: 100% !important; border-radius: var(--b2r); border: 0; }
img { height: auto !important; }
picture { width: 100%; }

figure { overflow: hidden; position: relative; border-radius: var(--b2r); }
	figure:has(iframe):before { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 9; border-radius: var(--b2r); background: var(--orange); mix-blend-mode: darken; pointer-events: none; }
	figure:has(iframe) img, figure:has(iframe) iframe { display: block; width: 100% !important; height: auto !important; }
	figure img ~ iframe { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 8; height: 100% !important; }
	

/*! Lists --------- */
.list-contact { list-style: none; margin-top: calc(var(--mr_sect) * 1.1); }
	.list-contact li { position: relative; z-index: 2; margin-bottom: 18px; }
	.list-contact li:before { content: "\e901"; left: calc(0px - var(--fz_main) * 2.05); right: auto; top: 0; width: 19px; margin: 0; color: var(--theme); font-size: 22px; line-height: calc(var(--fz_main) * var(--lh_main)); text-align: center; }
		.list-contact li:has(a[href*="tel:"]):before { content: "\e900"; font-size: 24px; }
		.list-contact li:has(.email):before { content: "\e902"; font-size: 16px; }
	.list-contact a { display: block; position: relative; }
	
.list-featured { list-style: none; margin: calc(var(--mr_sect) - var(--mr_main)) 0 calc(var(--mr_sect) * 1.45) calc(0px - var(--dist)); padding: 0; font-size: 16px; --w: 33.3333333%; --dist: var(--rpp); --bbw: 2px; --cols: clamp(16px, 2.1428571429vw, 30px); }
	.list-featured li { position: relative; z-index: 2; width: var(--w); padding: 22px 0 6px; border-left: var(--dist) solid rgba(0,0,0,0); }
		.list-featured li:before { left: calc(0px - var(--dist)); bottom: -2px; border: 0 solid var(--orange); border-top-width: 2px; border-bottom-width: var(--bbw); }
		.list-featured li:nth-child(3n-2):before { left: 0; }
		.list-featured li:nth-last-child(-n+3):nth-child(3n-2), .list-featured li:nth-last-child(-n+3):nth-last-child(1), .list-featured li:nth-last-child(-n+3):nth-last-child(2):nth-child(3n-1) { --bbw: 0px; }
	.list-featured h1, .list-featured h2, .list-featured h3, .list-featured h4, .list-featured h5, .list-featured h6 { margin-bottom: 14px; font-size: var(--fz_h3); }
	

/*! Helpers --------- */
*, *:before, *:after { transition-property: all; transition-duration: 0.4s; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-delay: 0s; }
	*, *:before, *:after { transition-property: visibility, background-color, border-color, color, opacity; }

summary::-webkit-details-marker { display: none; }
.hidden, [hidden]:not(select), .module-featured > .list-contact li:before { display: none; }
article, aside, details, dialog, div, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

.module-wide:first-child, .list-featured:first-child, .list-contact:first-child, .module-featured:first-child { margin-top: 0; }
#root .margin-0, .list-contact li:last-child, .module-featured article > figure, .module-featured > .list-contact li { margin-bottom: 0; }


/*! Miscellaneous --------- */
audio, canvas, iframe, img, svg, video { border-width: 0; vertical-align: middle; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]), video[autoplay]:not([muted]) { display: none; }	
svg:not(:root) { overflow: hidden; }

::selection { background: var(--theme); color: var(--white); text-shadow: none; }
::-moz-selection { background: var(--theme); color: var(--white); text-shadow: none; }


/*! Outlines --------- */
a:focus-visible, button:focus-visible, input[type="checkbox"]:focus, input[type="radio"]:focus { outline-width: 2px; }


/*! Hovers --------- */
@media (hover: hover) {
/* td:u */ 	a:hover { text-decoration: underline; }
}


/*! Flexbox --------- */
/* flex */ 	#top, .module-featured article > div, .list-featured, .cols, #footer ul { display: flex; flex-wrap: wrap; }

/* f:wn */	#top, .module-featured article > div, .cols { flex-wrap: nowrap; }

/* f:dc */	.module-featured article > div { flex-direction: column; }

/* f:js */	.list-featured .cols { justify-content: flex-start; }
/* f:je */	.module-featured article > div { justify-content: flex-end; }
/* j:jb */	#top, .cols, #footer ul { justify-content: space-between; }
	
/* f:ac */	.list-featured .cols, #top, .align-middle { align-items: center; }

/* f:s0 */	.list-featured figure { flex-shrink: 0; }


/*! Icons --------- */
@font-face { font-family: 'i'; src: url('icons/icomoon.woff2') format('woff2'), url('icons/icomoon.woff') format('woff'); font-display: swap; }
[class*="icon-"] { font-family: 'i' !important; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; letter-spacing: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
	.icon-envelope:before { content: "\e902"; }
	.icon-logo:before { content: "\e903"; }
	.icon-phone:before { content: "\e900"; }
	.icon-pin:before { content: "\e901"; }
	
	
/*! Fonts --------- */
@font-face { font-family: 'Open_sauce_one'; src: url('fonts/opensauceone-regular.woff2') format('woff2'), url('fonts/opensauceone-regular.woff') format('woff'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Open_sauce_one'; src: url('fonts/opensauceone-italic.woff2') format('woff2'), url('fonts/opensauceone-italic.woff') format('woff'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Open_sauce_one'; src: url('fonts/opensauceone-bold.woff2') format('woff2'), url('fonts/opensauceone-bold.woff') format('woff'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Open_sauce_one'; src: url('fonts/opensauceone-bolditalic.woff2') format('woff2'), url('fonts/opensauceone-bolditalic.woff') format('woff'); font-weight: 700; font-style: italic; }


/* Responsive --------- */
@media only screen and (min-width: 1001px) {
#root .desktop-hide, #root .tablet-only { display: none; }
}
@media only screen and (min-width: 761px) and (max-width: 1000px) {
#root .tablet-hide { display: none; }
}
@media only screen and (max-width: 1000px) {
.list-featured { --w: 50%; }

#root .desktop-only { display: none; }
}
@media only screen and (min-width: 841px) {
/*#footer {}*/
	#footer li:nth-child(2):nth-last-child(2) { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); }
}
@media only screen and (min-width: 761px) {
#root .mobile-only { display: none; }
}
@media only screen and (max-width: 760px) {
#footer { font-size: 10px; }
	#footer ul { padding: 0; border-width: 0; }
		#footer li { padding: 15px 0; }
		#footer li:has(img) { display: block; width: 100%; padding: 18px 0; border-top: 1px solid var(--white); text-align: center; }
		#footer img { display: block; margin: 0 auto; }

ul, ol, dd, blockquote { padding-inline-start: calc(var(--fz_main) * 1.75); }

.cols:not(.cols-mobile) { flex-direction: column; }
	#root .cols:not(.cols-mobile) > * { width: 100%; max-width: none; }
	.cols > figure { order: 3; }
figure:has(iframe) { min-height: 62.0512820513vw; }
	figure:has(iframe) img { height: 100% !important; }
.list-contact { margin-top: 0; }
.list-featured { margin-bottom: 0; --w: 100%; }
	.list-featured li { padding: 16px 0 .1px; }
	.list-featured li:before { left: 0; }
	.list-featured .cols > figure { order: inherit; }
	.list-featured img { max-width: 78px !important; }
.module-featured { margin-bottom: var(--mr_sect); }
	.module-featured article > div { justify-content: flex-start; }
.module-wide { --pd: var(--mr_sect); }
	
#root .mobile-hide, #root .tablet-only, #top > ul { display: none; }
}
