/*
Theme Name: HABITATION VITAL
Theme URI: https://habitationvital.ca/
Author: Andy Harvey
Author URI: 
Description: Thème pour le HABITATION VITAL
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: HV
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

HV is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Reset
2.0 Typography
3.0 Elements
4.0 Forms
5.0 Navigation
	5.1 Links
	5.2 Menus
6.0 Accessibility
7.0 Alignments
8.0 Clearings
9.0 Widgets
10.0 Content
	10.1 Posts and pages
	10.2 Asides
	10.3 Comments
11.0 Infinite scroll
12.0 Media
	12.1 Captions
	12.2 Galleries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 Reset
--------------------------------------------------------------*/
:root {
	interpolate-size: allow-keywords;
}


/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Prevent font size inflation */
html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

/* Remove default margin */
/** {
	margin: 0;
}*/

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, h5, h6, p,
figure, blockquote, dl, dd,
ol, ul, figure, picture {
	margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
	list-style: none;
	padding-inline-start: 0;
}

/* Set core body defaults */
body {
	min-height: 100vh;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
	line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4,
h5, h6 {
	text-wrap: balance;
}

p, li, figure {
	text-wrap: pretty;
}

/* Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
	text-decoration-skip-ink: auto;
	color: currentColor;
}

/* Remove the gray background on active links in IE 10. */
a {
	background-color: transparent;
}

/* Make images easier to work with */
img, picture, svg,
video, canvas {
	display: block;
	max-width: 100%;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
	font-family: inherit;
	font-size: inherit;
}

/* Remove the inheritance of text transform in Firefox. */
select {
	text-transform: none;
}

/* Correct the inability to style buttons in iOS and Safari. */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
	min-height: 10em;
}


/* Anything that has been anchored to should have extra scroll margin */
/*[id],*/
:target {
	/* Update --scroll-margin with JS if needed */
	scroll-margin-block-start: var(--_scroll-margin, 2rem);
}



/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box; /* 1 */
	padding: 0; /* 2 */
}

/**
* 1. Correct the odd appearance in Chrome, Edge, and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}


/* Correct the cursor style of increment and decrement buttons in Safari. */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

/* Correct the text style of placeholders in Chrome, Edge, and Safari. */
::-webkit-input-placeholder {
	color: inherit;
	opacity: 0.54;
}

/* Remove the inner padding in Chrome, Edge, and Safari on macOS. */
::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
* 1. Correct the inability to style upload buttons in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/* Remove the inner border and padding of focus outlines in Firefox. */
::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/* Restore the focus outline styles unset by the previous rule in Firefox. */
:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/* Remove the additional :invalid styles in Firefox. */
:-moz-ui-invalid {
	box-shadow: none;
}



/* ==========================================================================
   Grid CSS pour faciliter le breakout/full-width
   à l'intérieur même du flow de contenu normal (max-width)

   Basé sur les valeurs/variables de flexboxgrid.css (gutter, etc.)
   ========================================================================== */
   .content-grid {
	/* Référence/se base sur des var() de flexboxgrid.css (root) */
	--padding-inline: var(--outer-margin, 1rem);
	--content-max-width: var(--max-content-width, 75rem);
	--breakout-max-width: var(--content-max-width) + 15rem;

	--breakout-size: calc(
		(var(--breakout-max-width) - var(--content-max-width)) / 2
	);

	display: grid;
	grid-template-columns:
		[full-width-start] minmax(var(--padding-inline), 1fr)
		[breakout-start] minmax(0, var(--breakout-size))
		[content-start]
		min(100% - (var(--padding-inline) * 2), var(--content-max-width))
		[content-end]
		minmax(0, var(--breakout-size)) [breakout-end]
		minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid > :not(.breakout, .breakout-left, .breakout-right, .full-width),
.full-width > :not(.breakout, .breakout-left, .breakout-right, .full-width) {
	grid-column: content;
}

.content-grid > .breakout {
	grid-column: breakout;
}
.content-grid > .breakout-left {
	grid-column: breakout-start / content-end;
}
.content-grid > .breakout-right {
	grid-column: content-start / breakout-end;
}

.content-grid > .full-width {
	grid-column: full-width;

	/* Subgrid */
	display: grid;
	grid-template-columns: inherit;
}




/*
 https://wordpress.stackexchange.com/questions/119547/oembed-youtube-video-aspect-ratio#138553
*/
.videoWrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
	margin-bottom:1em;
}
.videoWrapper:before {
    content: "";
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    display: block;
    overflow: hidden;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/*--------------------------------------------------------------
2.0 Typography
--------------------------------------------------------------*/
/* ==========================================================================
   Styles de base
   ========================================================================== */
   :root {
	/* Font family */
	--font-family-base: "Hanken Grotesk", serif;
	--font-family-header: "Noto Serif", serif;

	/* Border radius */
	--radius-xs: 3px;
	--radius-sm: 12px;
	--radius-md: 20px;
	--radius-pill: 3em;
	--radius-circle: 50%; /* Le width/height doivent avoir les mêmes dimensions */

	/* Paddings */
	--padding-section: 3rem; /* 48px */

	/* Couleurs */
	--clr-white: #fff;
	--clr-black: #000;

	--clr-orange: #C9521A;
	--clr-cream: #FDF7EB;
	--clr-yellow: #FDECD2;
	--clr-blue-dark: #416D8A;
	--clr-blue-light: #E8EFF7;
}


html {
	font-size: 100%;
}
/* Ajuste le scroll-margin pour les ancres
 * À cause du menu principal sticky qui cache le target */
/*html {
	--sticky-spacing: 95px;
}
:target {
	scroll-margin-block-start: var(--sticky-spacing);
}*/

body {
	margin: 0;
	font-family: var(--font-family-base);
	font-weight: 400;
	font-size: 1.125rem; /* 18 / 16 */
	line-height: 1.333333333333333; /* 24 / 18 */
}


::-moz-selection {
	background: var(--clr-blue-dark);
	color: #fff;
	text-shadow: none;
}
::selection {
	background: var(--clr-blue-dark);
	color: #fff;
	text-shadow: none;
}

/* a {
	color: inherit;
} */
a.lienBleu {
	color: var(--clr-blue-dark);
	font-weight: 600;
	text-decoration: underline;
}
/*a:hover,
a:focus-visible {

}*/

/*
 * Citations multilangues
 * https://www.stefanjudis.com/today-i-learned/how-to-use-language-dependent-quotes-in-css/
 */
blockquote {
	margin: 2rem 0 0 0;
	padding: 0 0 0 20px;
	border-left: 7px solid var(--clr-orange);
}

/* Nom pour la citation */
blockquote cite {
	display: block;
	font-size: 0.8888888888888889rem;
	line-height: 1.5;
	color: var(--clr-blue-dark);
	font-style: normal;
}
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a,
blockquote cite a:visited { color: #555; }

q::before,
blockquote:not(.p)::before {
	content: open-quote " ";
}
q::after,
blockquote:not(.p)::after {
	content: " " close-quote;
}

blockquote.p > *:first-child::before {
	content: open-quote " ";
}
blockquote.p > *:not(cite):last-of-type::after {
	content: " " close-quote;
}

hr {
	display: block;
	border: solid var(--clr-blue-dark);
	border-width: 2px 0 0;
	clear: both;
	margin: 1.5rem 0;
	height: 0;
}

b, strong {
	font-weight:700;
}
b.semi, strong.semi {
	font-weight:600;
}


* > *:first-child {
	margin-top: 0;
}

h1,h2,h3,h4,h5,h6 {
	margin: 1em 0 0 0;
}

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



/* Titres */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family-header);
	font-weight: 700;
}

h2 {
	color: var(--clr-orange);
}

h3 {
	color: var(--clr-blue-dark);
}

/* Listes */
ol, ul {
	margin: 1rem 0 0 0;
	padding-left: 0.85em; /* em voulu pour être relatif à la taille du texte */
}
li {
	margin: 0.5em 0 0 0;
}
li::marker {
	color: var(--clr-orange);
	font-weight: 700;
}
.lstDense > li {
	margin: 0 0 1rem 0;
}



figure{
	margin:2rem 0;
	text-align: center;
}

figure.centre {
	width: 75%;
	margin-left: auto;
	margin-right: auto;
}

figcaption {
	text-align: left;
	font-size: 0.7777777777777778rem; /* 14/18 */
	margin-top: 0.5rem;
	color: var(--clr-blue-dark);
}
figcaption > :first-child { margin-top: 0; }
figcaption > :last-child { margin-bottom: 0; }

mark,
ins {
	background: var(--clr-yellow);
	text-decoration: none;
}


iframe {
	/* display: block; */
	width: 100%;
	height: auto;
	max-width: 1000px;
	aspect-ratio: 16 / 9;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}


.page-title {
	font-size: 2.5rem; /* 40/16 */
	line-height: 1.208333333333333; /* 58/48 */
	font-weight: 500;
	text-wrap: balance;
	color: var(--clr-blue-dark);
	text-align: center;
	margin-top: 0;
}

.section-title {
	font-family: var(--font-family-header);
	font-size: 2.5rem; /* 40/16 */
	line-height: 1.208333333333333; /* 58/48 */
	font-weight: 500;
	text-wrap: balance;
	color: var(--clr-orange);
	margin-bottom: 2rem;
}

/* 448px */
@media screen and (min-width: 28em) {
	.page-title,
	.section-title {
		font-size: 3rem; /* 48/16 */
	}
}

.section-padding {
	padding-block: var(--padding-section); /* 48px */
}
.section-padding-top {
	padding-block-start: var(--padding-section);
}
.section-padding-bottom {
	padding-block-end: var(--padding-section);
}

.bg-primary {
	background: var(--clr-blue-dark);
}
.bg-secondary {
	background: var(--clr-cream);
}
.bg-accent {
	background: var(--clr-blue-light);
}
.bg-texture {
	background: url(img/bg-texture.svg) var(--clr-blue-light) repeat-y top center;
}
/* 1920px - aussi large que la texture */
@media only screen and (min-width: 120em) {
	.bg-texture {
		background-size: cover;
	}
}



/*--------------------------------------------------------------
3.0 Elements
--------------------------------------------------------------*/

/* Styles pour les accordéons sans JS */
details {
	margin:1rem 0 0 0;
}
/* Retrait du triangle */
details summary::marker {
	content: none;
}
details summary::-webkit-details-marker {
	display: none; /* Pour IOS */
}

/* Toggler */
details > summary {
	position:relative;
	display: block;
	cursor: pointer;
	list-style: none; /* Retrait du triangle */
	border-radius: 0;

	padding: 10px 40px 10px 0;
	border-top:1px solid var(--clr-blue-dark);
	border-bottom:1px solid var(--clr-blue-dark);
	text-transform:none;
	min-height: 36px;

	color:var(--clr-blue-dark);
	font-weight: 700;
	font-size: 1.5625rem; /* 25/16 */
	line-height: 1;
	transition: background-color 150ms ease;
}
details > summary:focus-visible {
	outline: thin dotted;
}

details summary > * {
	/* Inheriter les styles du summary,
	   peu importe l'élément dedans
	   (h2, h3, p, etc.)... s'il y en a un
	*/
	color:inherit;
	font-size:inherit;
	line-height:inherit;
	font-weight: inherit;
	background:none;
	display: block;
	text-decoration: none;
}
details > summary:hover,
details > summary:focus-visible {
	background-color: #F7F9FC;
}


/* Icones du toggler */
details > summary::after {
	content: "";
	background-image:url(img/accordeon-sprite.svg);
	background-position:0 0;
	display:block;
	width:36px;
	height:36px;
	position:absolute;
	right:0;
	top:50%;
	transform: translateY(-50%);
}
/* details > summary:hover::after,
details > summary:focus::after {
	background-position:0 -22px;
} */
details[open] > summary::after {
	background-position:0 -36px;
}
/*details[open] > summary:hover::after,
details[open] > summary:focus::after {
	background-position:-22px -22px;
}*/


/* Contenu */
/*details summary + *,
details summary + * + * {
	margin-top: var(--_flow-spacer, 1em);
}*/
/*details > *:first-child { margin-top:0; }
details > *:last-child  { margin-bottom:0; }*/

/* Styles pour le "En savoir plus" */
details.savoirPlus > summary {
	padding: 0;
	border: 0;
	color: var(--clr-black);
	font-size: 1.125rem; /* 18/16 */
	line-height: 1.333333333333333; /* 24/18 */
}
details.savoirPlus > summary:hover,
details.savoirPlus > summary:focus-visible {
	background-color: transparent;
	text-decoration: underline;
}

/* Icones du toggler */
details.savoirPlus > summary::after {
	position: relative;
	display: inline-block;
	background-image:url(img/accordeon-sprite-plus-moins.svg);

	transform: none;
	vertical-align: middle;
	margin-left: 1rem;
}


/*--------------------------------------------------------------
4.0 Forms
--------------------------------------------------------------*/
:root {
	accent-color: var(--clr-blue-dark); /* Forms elements */
}
label {
	cursor: pointer;
}
fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 0 15px 0;
	padding: 0.5em;
}

fieldset.subtil {
	border: 0;
	margin: 0 0 10px 0;
	padding: 0;
}

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:1px solid #9c9ea0;
	border-radius:0;
	padding: 7px;
	outline: none;
	margin: 0 0 1em 0;
	max-width:100%;
	color:#000;
	background: #eaebec;
	box-shadow:none;
}

form input[disabled],
form textarea[disabled],
form select[disabled] { background:#d3d3d3!important; color:#999; }
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: 1px solid #4e4e50; }

select,
textarea,
input,
button {
	font-family: inherit;
	font-size: inherit;
	max-width: 100%;
}

textarea {
	resize: vertical;
}

select {
	display:inline-block;
	width:auto;
	padding: 3px 7px;
}

.btn {
	/*
		https://blog.webdevsimplified.com/2021-06/hsl-color-format/
	*/
	--background-hue: 200;
	--lightness-offset: 0%;

	background-color: hsl(
		var(--background-hue),
		100%,
		calc(50% + var(--lightness-offset))
	);
	display: inline-block;
	/* width: fit-content; */
	padding: 10px 25px;
	font-weight: 700;
	line-height: normal;
	/* text-transform: uppercase; */
	text-decoration: none;
	border-radius: 0;
	border: 0;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

.btn:hover {
	--lightness-offset: -10%;
}

.btn:focus {
	--lightness-offset: -20%;
}

.btn-danger {
	--background-hue: 0;
}




/*
 * Boutons radio/checkbox - ::before pour le cadre/dessin et ::after pour l'icone/crochet, si actif
 */
input[type="radio"],
input[type="checkbox"] {
	/* Cacher l'input original, mais accessible */
	opacity: 0;
	position: absolute;
}
input[type=radio] + label,
input[type="checkbox"] + label {
	display: inline-flex; /* Pour aider à aligner le radio/checkbox */
	align-items: baseline;
	padding-left: 1.30em; /* espace/marge */
	position: relative;
}
input[type=radio]:focus-visible + label,
input[type="checkbox"]:focus-visible + label {
	outline:thin dotted;
}

/* Pseudos superposés - absolute */
input[type=radio] + label::before,
input[type="checkbox"] + label::before,
input[type=radio]:checked + label::after,
input[type="checkbox"]:checked + label::after {
	content: '';
	cursor: pointer;
	/* display: block;
	flex-shrink: 0;
	flex-grow: 0; */
	height:1em;
	width:1em;
	line-height: 1;
	text-align:center;
	position:absolute;
	top: 0;
	left: 0;
}
input[type=radio] + label::before,
input[type="checkbox"] + label::before {
	border: 1px solid #9c9ea0;
	background:#eaebec;
	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="checkbox"]:checked + label::after {
	content:'✓';
	font-size: 0.75em;
	color:#fff;
	top: 0.125em;
	left: 0.125em;
}
input[type=radio]:checked + label::after {
	content:'•';
	font-size: 1.5em;
	color:#fff;
	top: -0.25em;
	left: -0.16em;
}

/* Disabled */
input[type=radio][disabled] + label,
input[type="checkbox"][disabled] + label {
	cursor: default;
	font-style:italic;
}
input[type=radio][disabled] + label::before,
input[type="checkbox"][disabled] + label::before {
	cursor: default;
	font-style:normal;
	background: #d3d3d3 !important;
	border-color:#9c9ea0!important;
}
input[type=radio][disabled] + label::after,
input[type="checkbox"][disabled] + label::after {
	cursor: default;
	font-style:normal;
	color: #999 !important;
}





.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.call-to-action {
	padding: 1rem;
	background: #afafaf;
}


.flow > * + * {
	/* "em" pour être relatif au titre, paragraphe, etc. */
	/* utilisation d'une var() afin de pouvoir adapter l'espace à certains endroits */
	margin-top: var(--_flow-spacer, 1em);
}
/* Modifie le margin-top relatif à la taille de l'élément (em) */
.flow-remove { --_flow-spacer: 0em; }
.flow-half { --_flow-spacer: 0.5em; }
.flow-d { --_flow-spacer: 2em; }
.flow-t { --_flow-spacer: 3em; }
.flow-q { --_flow-spacer: 4em; }




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



nav ul,
nav ol,
nav li {
	list-style: none;
	margin: 0;
	padding: 0;
}


nav a {
	color: inherit;
	text-decoration: none;
}

nav a:hover,
nav a:focus-visible {
	text-decoration: underline;
}




/*--------------------------------------------------------------
5.0 Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
5.1 Links
--------------------------------------------------------------*/
/*a,
a:link,
a:visited {
	color: #000;
}
a:active,
a:hover,
a:focus {
	color: #000;
}
a:focus-visible {
	outline:1px dotted #000;
}*/


/*--------------------------------------------------------------
5.2 Menus
--------------------------------------------------------------*/
/*@media only screen and (min-width: 600px) {
	.admin-bar .main-navigation {
		top: var(--wp-admin--admin-bar--height);
	}
}*/




/* Menu principal - styles par défaut/global */

.menuPrincipal a:hover,
.menuPrincipal a:focus-visible {
	color: var(--clr-blue-dark);
}

.menuPrincipal .itemJoindre a {
	display: inline-block;
	background-color: var(--clr-orange);
	border-radius: var(--radius-md);
	padding: 5px 20px;
	color: var(--clr-white);
	text-decoration: none;
	transition: background-color 0.25s ease;
}
.menuPrincipal .itemJoindre a:hover,
.menuPrincipal .itemJoindre a:focus-visible {
	color: var(--clr-white);
	background-color: var(--clr-blue-dark);
}



/* .menuPrincipal {
	--_padding-menu: 15px;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	list-style: none;

	margin: 0;
	padding: 0;
	list-style: none;
}
.menuPrincipal > .menu-item {
	margin: 0;
}
.menuPrincipal > .menu-item-has-children {
	position: relative;
}
.menuPrincipal a {
	display: block;
	text-decoration: none;
}

.menuPrincipal .sub-menu {
	list-style: none;
} */



/* Styles menu normal/dropdown (spécifiquement desktop) 768px */
@media only screen and (min-width: 48em) {
	.menuPrincipal {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 0 max(3vw, 0.5rem);

		padding-block: 0.25rem;
		min-height: 94px;
	}
	.primary-header nav a {
		display: inline-block;
		padding: 0.5rem;
		font-weight: 600;
		transition: color 0.25s ease;
	}
	.menuPrincipal .itemLogo {
		width: 100%;
	}
	.menuPrincipal .itemLogo a {
		padding-inline: 0;
	}
	.menuPrincipal .itemJoindre {
		margin-left: auto;
		white-space: nowrap;
	}

	/*.menuPrincipal > li > a {
		padding: 0 var(--_padding-menu);
	}

	.menuPrincipal > li > a[aria-expanded="true"],
	.menuPrincipal > li > a:focus,
	.menuPrincipal > li > a:hover,
	.menuPrincipal > li.current-page-ancestor > a,
	.menuPrincipal > li.current-menu-ancestor > a,
	.menuPrincipal > li.current-menu-item > a {
	}


	.menuPrincipal .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		margin: var(--_padding-menu) 0 0 0;
		padding: 0 var(--_padding-menu);
		background: #fff;
		min-width: 200px;
		visibility:hidden;
		opacity:0;
	}*/

	/* Ouverture du sous-menu */
	/*.menuPrincipal .sub-menu.sub-menu-open {
		visibility: visible;
		opacity: 1;
	}

	.menuPrincipal .sub-menu > .menu-item {
		margin: 0;
	}
	.menuPrincipal .sub-menu > .menu-item + .menu-item {
		border-top: 1px solid #707070;
	}
	.menuPrincipal .sub-menu > .menu-item a {
		display:block;
		padding: calc(var(--_padding-menu) / 2) 0;
	}
	.menuPrincipal .sub-menu > .menu-item a:focus,
	.menuPrincipal .sub-menu > .menu-item a:hover,
	.menuPrincipal .sub-menu > .menu-item.current-menu-item a {
		background-color: #D1EDA9;
	}*/
}


@media only screen and (min-width: 62em) {
	.menuPrincipal .itemLogo {
		width: auto;
	}
}



/* Menu mobile */
.logoMobile,
.menu-toggle {
	display: none;
}

@media only screen and (max-width: 47.9375em) {
	.logoMobile,
	.menu-toggle {
		display: block;
	}

	/* Logo et menu toggler */
	#site-navigation {
		display: flex;
		min-height: 94px;
	    align-items: center;
	}

	/* mobile menu toggle button */
	.menu-toggle {
		--_couleur_menu_mobile: #000;
		position: relative;
		display: block;
		width: 50px;
		height: 50px;
		margin: 0 0 0 auto; /* alignement à droite */
		cursor:pointer;

		font-size:100%;
		line-height: inherit;
		font-family:inherit;
		font-weight:inherit;
		padding: 15px;
		border:0;
		border-radius:0;

		background:none;
		color:inherit;
		text-align:inherit;

		-webkit-appearance: none;
		-moz-appearance: none;
	}
	.menu-toggle:focus-visible {
		color:inherit;
		background:inherit;
		outline: thin dotted;
	}

	/* Les étages du hamburger */
	.menu-toggle span {
		margin: 0 0 0 auto;
		position: relative;
		top: 0;
		transition-duration: 0s;
		transition-delay: .2s;
		transition: background-color 0.3s;
	}
	.menu-toggle span:before,
	.menu-toggle span:after{
		position: absolute;
		content: '';
	}
	.menu-toggle span,
	.menu-toggle span:before,
	.menu-toggle span:after{
		width: 20px;
		height: 3px;
		background-color: var(--_couleur_menu_mobile);
		display: block;
		opacity: 1;
	}
	.menu-toggle span:before{
		margin-top: -7px;
		transition-property: margin, transform;
		transition-duration: .2s;
		transition-delay: .2s, 0;
	}
	.menu-toggle span:after{
		margin-top: 7px;
		transition-property: margin, transform;
		transition-duration: .2s;
		transition-delay: .2s, 0;
	}


	/* Transformer le toggler en X */
	.menu-toggle[aria-expanded="true"] span {
		background-color: rgba(0,0,0,0);
		transition: 0.3s background-color;
	}
	.menu-toggle[aria-expanded="true"] span:before {
		margin-top: 0;
		transform: rotate(45deg);
		transition-delay: 0, .2s;
	}
	.menu-toggle[aria-expanded="true"] span:after {
		margin-top: 0;
		transform: rotate(-45deg);
		transition-delay: 0, .2s;
	}



	.menuPrincipal .itemLogo {
		display: none; /* On affiche le logo mobile en remplacement (hors menu) */
	}
	.menuPrincipal {
		border-top: 1px solid var(--clr-blue-dark);
		display: flex;
		flex-direction: column;
		padding: var(--outer-margin, 1rem);
		gap: 1rem;

		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease-in-out, visibility 0.2s;

		position: absolute;
		top: 94px;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		z-index: 500;
		overflow: auto;
		overscroll-behavior: contain;
	}
	.admin-bar .menuPrincipal {
		top: calc(var(--wp-admin--admin-bar--height) + 94px);
	}
	.menuPrincipal[aria-expanded="true"] {
		opacity: 0.95;
		visibility: visible;
	}
	.menuPrincipal > .menu-item {
		/*margin: 0 0 0.3rem 0;*/
		/* text-align: center; */
	}
	/*.menuPrincipal .sub-menu {
		margin: 0.3rem 0;
	}
	.menuPrincipal .sub-menu > .menu-item {
		margin: 0 0 0.3rem 0;
	}*/

	/*.menuPrincipal a:focus,
	.menuPrincipal a:hover {
		text-decoration: underline;
	}*/
}





/*--------------------------------------------------------------
6.0 Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

/*--------------------------------------------------------------
7.0 Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*--------------------------------------------------------------
8.0 Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}

/*--------------------------------------------------------------
9.0 Widgets
--------------------------------------------------------------*/
/*.widget {
	margin: 0 0 1.5em;
}*/

/* Make sure select elements fit in widgets. */
.widget select {
	max-width: 100%;
}

/* Search widget. */
.widget_search .search-submit {
	display: none;
}

/*--------------------------------------------------------------
10.0 Content
--------------------------------------------------------------*/

/* ==========================================================================
   Styles custom pour ce site
   ========================================================================== */
body {

}

.wrapper {
	min-width: 320px;
}
.wrapper:focus {
	outline:0; /* Ancre #top */
}

.enteteSite {

}







/* Entete d'accueil */
.pageHero {
	background-color: var(--clr-cream);
}
.splitHero {
	display: grid;
	grid-template-columns: 1fr;
}
.splitHero .coteTitre {
	background-color: var(--clr-blue-dark);
	align-content: center;
	padding: var(--gutter-width);
	/* padding-left: calc(2 * var(--gutter-width)); */
}
.splitHero .page-title {
	color: var(--clr-blue-light);
	text-align: left;
}
.splitHero .coteImg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
@media screen and (min-width: 48em) {
	.splitHero {
		grid-template-columns: 1fr 1fr;
	}
	.splitHero .coteTitre {
		padding-left: calc(3 * var(--gutter-width));
	}
	.splitHero .page-title {
		max-width: 8em;
	}
}
@media screen and (max-width: 63.9375em) { /* 1023px */
	.splitHero .page-title {
		font-size: 2.5rem;
	}
}




/* Entete de page */
.pageEntete {
	display: grid;
	position: relative;
	/* margin-bottom: var(--padding-section); */
}
.pageEntete.fondCreme {
	background-color: var(--clr-cream);
}
.pageEntete > * {
	/* Tout superposé */
	grid-row: 1 / 1;
}
.pageEntete.full-width .bgImg {
	grid-column: full-width;
}
.pageEntete .bgImg {
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right top; /* center top */
}
.pageEntete .imageArticle {
	margin-inline: auto;
}
.pageEntete:has(.contenu) {
	min-height: 275px;
}
.pageEntete .contenu {
	align-self: center;
	padding-block: 1rem;
	color: var(--clr-blue-dark);
}
.pageEntete .text-shadow {
	text-shadow: 0 4px 7px #000;
}
.pageEntete .fondCouleur {
	--_fond: var(--clr-blue-light);

	background-color: var(--_fond);
	box-shadow: 0.3em 0 0 var(--_fond), -0.3em 0 0 var(--_fond);
	box-decoration-break: clone;
}
.pageEntete a.lienAction {
	outline: none;
	text-decoration: none;
	text-transform: uppercase;
	line-height: 1;

	padding: 0.5rem 1rem;
	display: inline-block;
	color: var(--clr-white);
	background-color: var(--clr-blue-dark);
}
.pageEntete a.lienAction:hover,
.pageEntete a.lienAction:focus-visible {
	background-color: var(--clr-black);
}



/* À propos (accueil) */
.sApropos {
	--_scroll-margin:0;
	padding-block: var(--padding-section);
}
.sApropos .section-title {
	/* color: var(--clr-orange); */
	text-align: center;
}

.lesLieux {
	--_colWidth: 19.375rem; /* 310/16 */
	--_gridGap: 2rem;

	display: grid;
	grid-template-columns: var(--_colWidth);
	justify-content:center;
	gap: var(--_gridGap);

	list-style: none;
	padding: 0;
	margin-block: 2rem;
}
/* 448px */
@media screen and (min-width: 28em) {
	.lesLieux {
		--_colWidth: 22.5rem; /* 360/16 */
	}
}
.lesLieux > li {
	padding: 0;
	margin: 0;
}
.lesLieux .photo {
	position: relative;
}
.lesLieux .nb {
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
	font-size: 1.5rem; /* 24/16 */
	line-height: 1;
	font-weight: 700;
	color: var(--clr-white);
	background-color: var(--clr-blue-dark);
	padding: 6px 12px;
}
.lesLieux .stack {
	display: grid;
	position: relative;
}
.lesLieux .stack > * {
	/* Tout superposé */
	grid-row: 1 / 1;
}
.lesLieux .hover {
	position: relative;
	/* display: none; */
	z-index: 50;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	color: var(--clr-white);
	/* padding: 12px; */
	align-content: center;
	text-align: center;
}
.lesLieux .hover img {
	margin: 0 auto 0.75rem auto;
}
/*.lesLieux a:hover::after,
.lesLieux a:focus-visible::after {*/
.lesLieux .hover::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* color: var(--clr-white);
	padding: 12px; */
	background-color: var(--clr-blue-dark);
	border-radius: var(--radius-sm);
	opacity: 0.75;
}
.lesLieux .stack .hover {
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
}
.lesLieux .stack:hover .hover,
.lesLieux .stack:focus-visible .hover {
	opacity: 1;
}
.lesLieux .stack > img {
	border-radius: var(--radius-sm);
}
.lesLieux .adresse {
	display: block;
	margin: 0.75rem 0 0 0;
}

@media only screen and (min-width: 62em) {
	.lesLieux {
		--_gridGap: 4rem;
		grid-template-columns: repeat(2, var(--_colWidth));
	}
}




/* Avantages (accueil) */
.sAvantages {
	--_scroll-margin:0;
	padding-block: var(--padding-section);
	background: var(--clr-blue-dark);
}
.sAvantages .section-title {
	color: var(--clr-blue-light);
	text-align: center;
}
.lesAvantages {
	--_gridGap: 1.5rem;

	display: grid;
	/* grid-template-columns: repeat(3, 1fr); */
	grid-template-columns: 1fr;
	gap: var(--_gridGap);

	list-style: none;
	padding: 0;
	/* margin-block: 2rem; */
}
.lesAvantages > li {
	padding: 10px 15px;
	margin: 0;
	background-color: var(--clr-white);
	border-radius: var(--radius-sm);
}
/*.lesAvantages .portes {
	grid-column: span 2;
}
.lesAvantages .cameras {
}
.lesAvantages .buanderie {
}
.lesAvantages .billard {
}
.lesAvantages .atelier {
}*/
.lesAvantages .loisirs {
	padding: 25px;
	background-color: var(--clr-cream);
	/* grid-column: span 3; */
}
.lesAvantages .loisirs h3 {
	color: var(--clr-blue-dark);
}
.lesAvantages h3 {
	font-family: var(--font-family-base);
	color: var(--clr-orange);
	font-weight: 700;
	font-size: 1.625rem; /* 26/16 */
	line-height: 1;
}
.lesAvantages p {
	margin-top: 2rem;
	line-height: 1.333333333333333; /* 24/18 */
}
.lesAvantages h3:not(:has(img)) {
	text-align: center;
}
.lesAvantages h3:has(img) {
	display: flex;
  	align-items: end;
	/* width: 100%; */
}
.lesAvantages h3 img {
	margin-left: auto;
	max-width: 7rem;
}

/* 448px */
@media screen and (min-width: 28em) {
	.lesAvantages > li {
		padding: 15px 25px;
	}
	.lesAvantages h3 {
		font-size: 1.875rem; /* 30/16 */
	}
}

@media only screen and (min-width: 48em) {
	.lesAvantages {
		grid-template-columns: repeat(2, 1fr);
	}
	.lesAvantages .portes {
		grid-column: span 2;
	}
	.lesAvantages .loisirs {
		grid-column: span 2;
	}
}

@media only screen and (min-width: 75em) {
	.lesAvantages {
		grid-template-columns: repeat(3, 1fr);
	}
	/*.lesAvantages .portes {
		grid-column: span 2;
	}*/
	.lesAvantages .loisirs {
		grid-column: span 3;
	}
}




/* Les mots clés */
ul.motsCles {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	list-style: none;
	padding: var(--padding-section) 0 0 0;
	margin: 0;
	width: 100%;

	/*font-size: 2.625rem; /* 42/16 */
	font-size: clamp(1.563rem, calc(1.174rem + 1.657vw), 2.5rem); /* min: 25px, max: 40px */
	line-height: 1.333333333333333; /* 56/42 */
	font-weight: 300;
}
ul.motsCles > li {
	margin: 0;
	color: var(--clr-blue-dark);
}
ul.motsCles .bullet {
	display: none;
}
/*ul.motsCles > li:not(:last-child)::after {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	content: "•";
	color: #FAC880;
	padding: 0 16px;
	border-radius: var(--radius-circle);
	width: 16px;
	height: 16px;
}*/

@media only screen and (min-width: 25em){
	ul.motsCles {
		flex-direction: row;
	}
	ul.motsCles .bullet {
		display: block;
		padding: 0 1rem;
	}
	ul.motsCles .bullet > span {
		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		color: #FAC880;
	}
}


/* S'il y a des articles */
.pageHero .gridArticle {
	padding: var(--padding-section) 0 0 0;
}


/*.page-header,
.entry-header {
	margin: 2rem 0;
}*/
/*.page-header > h1,
h1.entry-title,
h2.commeH1 {
	font-family: var(--fontFamilyAlt);
	font-size: 2.833333333333333rem;
	line-height: 1.415094339622642;
	font-weight: 600;
	letter-spacing: 0.51px;
	margin: 2rem 0;
}*/


/* Hero header des articles */
/* https://moderncss.dev/3-popular-website-heroes-created-with-css-grid-layout/ */
.heroHeader {
	--_hero-height: 600px;
	--_wrap-text: 300px;
	--_overlap-chapeau:60px; /* Valeur répétée dans le style du chapeau */

	position: relative;
	display: grid;
	grid-template-areas: "hero";
	align-items: center;
	min-height: var(--_hero-height);
}
.heroHeader:not(.avecChapeau) {
	padding-bottom: calc(var(--_space-reserved) + var(--_overlap-chapeau));
	margin-bottom: var(--_overlap-chapeau);
}
.heroHeader > * {
	/* stacké */
	grid-area: hero;
}
.heroHeader .heroContent {
	--_space-reserved: 20px;
	z-index: 2;
	padding: var(--_space-reserved) 0;
}
.avecChapeau .heroContent {
	padding-bottom: calc(var(--_space-reserved) + var(--_overlap-chapeau));
}
.heroHeader .heroContent::before {
	content: "";
	position: absolute;
	width: calc(50vw + var(--_wrap-text));
	left: -50vw;
	top: 0;
	bottom: 0;
	background: #fff;
	z-index: -1;
}
.heroContent .textWrap {
	max-width: var(--_wrap-text);
	padding-right: var(--outer-margin);
}
.heroContent h1 {
	font-family: var(--fontFamilyAlt);
	font-size: 2.833333333333333rem; /* 51/18 */
	line-height: 1.415094339622642; /* 75/53 */
	font-weight: 600;
	letter-spacing: 0.51px;
	margin: 0;
}
.heroContent .fondNoir {
	background-color: #000;
	color: #fff;
	padding: 0px 15px;
	line-height: 1;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.heroHeader img {
	justify-self: end;
	object-fit: cover;
	/* object-position: 5vw -5vmin; */
	height: var(--_hero-height);
	width: 70%;
	margin-right: calc(var(--outer-margin) * -1);
}

.heroHeader .extrait {
	margin: 1rem 0;
}

.heroHeader .posted-on {
	position: relative;
	/*font-size:0.6666666666666667rem; /* 12/18 */
	font-size: 0.8888888888888889rem; /* 16/18 */
	line-height:2;
	letter-spacing: 0.6px;
	color: #000;
	padding-top: 0.5rem;
	margin: 1rem 0 0 0;
}
.heroHeader .posted-on::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 1px;
	width: 38px;
	background: #707070;
}


/* Styles liens de navigation et lire l'article/archives */
.heroHeader .lireArticle,
.voirPlusArticles {
	position: relative;
	font-size: 0.8888888888888889rem; /* 16/18 */
	line-height:1;
	font-weight: 700;
	padding-top: 1rem;
	margin: 1rem 0 0 0;
}
.heroHeader .lireArticle::before,
.voirPlusArticles::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 2px;
	width: 75px;
	background: #000;
}
.heroHeader .lireArticle a,
.voirPlusArticles a {
	position: relative;
	display: inline-block;
	text-decoration: none;
	transition: color 0.2s ease;
	padding-right: 10px; /* à cause du translate de la flèche */
}
.heroHeader .lireArticle a::after,
.voirPlusArticles a::after {
	display: inline-block;
	vertical-align: middle;
	content: url("img/ico-fleche.svg");
	/*width: 24px;
	height: 18px;*/
	transform: translateX(10px);
	transition: transform 0.2s ease;
}
.heroHeader .lireArticle a:focus,
.heroHeader .lireArticle a:hover,
.voirPlusArticles a:focus,
.voirPlusArticles a:hover {
	color:#707070;
}
.heroHeader .lireArticle a:focus::after,
.heroHeader .lireArticle a:hover::after,
.voirPlusArticles a:focus::after,
.voirPlusArticles a:hover::after {
	transform: translateX(20px);
}


/* Modifs spécifiques Voir plus d'articles */
.voirPlusArticles {
	margin-bottom: 2rem;
	text-align: right;
}
.voirPlusArticles::before {
	left: auto;
	right: 0;
}


/* Styles spécifiques pour la pagination (similaire) */
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
	margin: 1rem 0 2rem 0;
}
.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	box-sizing: border-box;
	display: flex;
	flex: 0 1 auto;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: var(--gutter-width, 1rem);

	position: relative;
	font-size: 0.8888888888888889rem; /* 16/18 */
	line-height:1;
	font-weight: 700;
	padding-top: 1rem;
	margin: 1rem 0 0 0;
}
.comment-navigation .nav-links a,
.posts-navigation .nav-links a,
.post-navigation .nav-links a {
	/* position: relative; */
	display: inline-block;
	text-decoration: none;
	transition: color 0.2s ease;
}
.comment-navigation .nav-links a:focus,
.posts-navigation .nav-links a:focus,
.post-navigation .nav-links a:focus,
.comment-navigation .nav-links a:hover,
.posts-navigation .nav-links a:hover,
.post-navigation .nav-links a:hover {
	color:#707070;
}

/* Previous/Next - barre au dessus */
.comment-navigation .nav-previous a::after,
.posts-navigation .nav-previous a::after,
.post-navigation .nav-previous a::after,
.comment-navigation .nav-next a::before,
.posts-navigation .nav-next a::before,
.post-navigation .nav-next a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 2px;
	width: 75px;
	background: #000;
}

/* Previous/Next - flèche */
.comment-navigation .nav-previous a::before,
.posts-navigation .nav-previous a::before,
.post-navigation .nav-previous a::before,
.comment-navigation .nav-next a::after,
.posts-navigation .nav-next a::after,
.post-navigation .nav-next a::after  {
	display: inline-block;
	vertical-align: middle;
	content: url("img/ico-fleche.svg");
	transition: transform 0.2s ease;
}

/* Previous */
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	padding-left: 10px; /* à cause du translate de la flèche */
}
.comment-navigation .nav-previous a::before,
.posts-navigation .nav-previous a::before,
.post-navigation .nav-previous a::before {
	transform: translate(-10px, -3px) rotate(180deg);
}
.comment-navigation .nav-previous a:focus::before,
.posts-navigation .nav-previous a:focus::before,
.post-navigation .nav-previous a:focus::before,
.comment-navigation .nav-previous a:hover::before,
.posts-navigation .nav-previous a:hover::before,
.post-navigation .nav-previous a:hover::before {
	transform: translate(-20px, -3px) rotate(180deg);
}


/* Next */
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: right;
	margin-left: auto;
	padding-right: 10px; /* à cause du translate de la flèche */
}
.comment-navigation .nav-next a::before,
.posts-navigation .nav-next a::before,
.post-navigation .nav-next a::before {
	/* barre à droite */
	left: auto;
	right: 0;
}
.comment-navigation .nav-next a::after,
.posts-navigation .nav-next a::after,
.post-navigation .nav-next a::after  {
	transform: translateX(10px);
}
.comment-navigation .nav-next a:focus::after,
.posts-navigation .nav-next a:focus::after,
.post-navigation .nav-next a:focus::after,
.comment-navigation .nav-next a:hover::after,
.posts-navigation .nav-next a:hover::after,
.post-navigation .nav-next a:hover::after {
	transform: translateX(20px);
}

/* On cache les flèches (non alignées) si trop petit */
@media only screen and (max-width: 499px){
	/* Previous/Next - flèche */
	.comment-navigation .nav-previous a::before,
	.posts-navigation .nav-previous a::before,
	.post-navigation .nav-previous a::before,
	.comment-navigation .nav-next a::after,
	.posts-navigation .nav-next a::after,
	.post-navigation .nav-next a::after  {
		display:none;
	}
	.comment-navigation .nav-previous,
	.posts-navigation .nav-previous,
	.post-navigation .nav-previous {
		padding-left: 0;
	}
	.comment-navigation .nav-next,
	.posts-navigation .nav-next,
	.post-navigation .nav-next {
		padding-right: 0;
	}
}






/* .unArticle {
	border-bottom:1px solid #aaa;
	padding-bottom:20px;
	margin-bottom:20px;
}
.unArticle:focus {
	outline:0;
}
.unArticle:last-child {
	border-bottom:0;
	padding-bottom:0;
	margin-bottom:0;
} */

/* .unArticle .categorie{
	margin:5px 0 10px 0;
}
.unArticle .categorie a{
	text-decoration:none;
	font-weight:700;
	color:#000;
}
.unArticle .categorie a:active,
.unArticle .categorie a:focus,
.unArticle .categorie a:hover{
	text-decoration:underline;
}


.unArticle .categorie time{
	white-space:nowrap;
}

.unArticle .imageEntete,
.unArticle .wp-post-image{
	margin-bottom:15px;
	width:100%;
}
.unArticle header > h1{
	margin-top:0;
}
h2.mois_archives {
	color:#71bf44;
	font-size:1.428571428571429rem;
	font-weight:600;
	margin:10px 0 0 0;
}

.unArticle .content{
	overflow:hidden;
}

.unArticle > *:first-child,
.unArticle .content > *:first-child{
	margin-top:0;
}
.unArticle > *:last-child,
.unArticle .content > *:last-child{
	margin-bottom:0;

} */



/************************************/
/* Affichage en "Grid" des articles */
/************************************/
.gridArticle {
	--_minColWidth: 20rem;
	--_gridGap: var(--gutter-width); /* 2rem */
	--grid-img-height: 10rem;

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--_minColWidth), 1fr));
	gap: var(--_gridGap);

	list-style: none;
	padding: 0;
	margin: 0;
	/* margin: 0 0 var(--_gridGap) 0; */
}

.gridArticle > li {
	padding: 0;
	margin: 0;
}
.gridArticle + .gridArticle {
	margin-top: var(--_gridGap);
}
.gridArticle img {
	object-fit: cover;
	height: var(--grid-img-height);
	width: 100%;
	margin: 0 0 0.5rem 0;
	border-radius: var(--radius-sm);
}

/* Sélecteur plus général, pour l'affichage aussi à l'intérieur d'un article */
.gridArticle .titreArticle {
	margin: 0;
	/*font-size: 1.5rem; /* 24/16 */
	font-size: clamp(1.125rem, calc(0.97rem + 0.663vw), 1.5rem); /* min: 18px, max: 24px */
	line-height: 1.25; /* 30/24 */
	font-weight: 600;
	color: var(--clr-blue-dark);
}
.gridArticle a {
	text-decoration:underline;
}
.gridArticle .titreArticle a:hover {
	text-decoration:none;
}
.gridArticle .posted-on {
	font-size:1rem; /* 16/16 */
	line-height:1.5;
	font-weight: 700;
	color: #000;
	margin: 1rem 0 0.5rem 0;
}






/* Devenir locataire (footer sur l'accueil) */
.sDevenirLocataire {
	padding: 1.5rem;
	border-radius: var(--radius-sm);
	background-color: var(--clr-white);
	margin-bottom: var(--padding-section);
}
@media only screen and (min-width: 38em){
	.sDevenirLocataire {
		padding: var(--padding-section);
	}
}


/* Pied de page */
.site-footer .coordonnees {
	background-color: var(--clr-white);
	border-radius: var(--radius-sm);
	padding: 1.5rem; /* 24/16 */
}
.site-footer .coordonnees {
	font-size: 1rem; /* 16 / 16 */
}
.site-footer .coordonnees h2 {
	font-family: var(--font-family-base);
	font-size: 1.125rem; /* 18 / 16 */
	margin-bottom: 0.5rem;
	color: var(--clr-black);
}
.site-footer .coordonnees a {
	color: var(--clr-blue-dark);
	font-weight: 600;
}
.site-footer .copyrights-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: 0.5rem;
	min-height: 64px;
	font-size: 1rem; /* 16 / 16 */
	font-weight: 600;
	color: var(--clr-white);
}
/*.site-footer .copyrights-content a {
	color: var(--clr-white);
}*/

/* Ajustements mobile footer */
@media only screen and (max-width: 61.9375em) { /* 991px */
	.site-footer .logo {
		margin: 0 auto 2rem auto;
	}
	.sDevenirLocataire .coteImg {
		margin-top: 2rem;
	}
}
@media only screen and (max-width: 47.9375em) { /* 767px */
	.site-footer .coordonnees .row > * + * {
		margin-top: 1rem;
	}
}


/*--------------------------------------------------------------
10.1 Posts and pages
--------------------------------------------------------------*/
.sticky {
	display: block;
}

/*.hentry {
	margin: 0 0 1.5em;
}*/

.byline,
.updated:not(.published) {
	display: none;
}

.single .byline,
.group-blog .byline {
	display: inline;
}

/*.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}
*/
.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/*--------------------------------------------------------------
10.2 Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
	display: none;
}

/*--------------------------------------------------------------
10.3 Comments
--------------------------------------------------------------*/
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/*--------------------------------------------------------------
11.0 Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
	display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
12.0 Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

/*--------------------------------------------------------------
12.1 Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 0 auto;
}

.wp-caption-text {
	text-align: center;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

/*--------------------------------------------------------------
12.2 Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-caption {
	display: block;
}


/* Grille CSS simple avec flexbox
================================================== */
/* pour les archives */
.smol-css-grid {
	--min: 15ch;
	--gap: 1rem;

	display: grid;
	grid-gap: var(--gap);
	/* min() with 100% prevents overflow
	in extra narrow spaces */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
  }





/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}
.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}
.hidden {
    display: none !important;
    visibility: hidden;
}

/*******************************/
/* Classes utilitaires/helpers */
/*******************************/


/* Textes/paragraphes */
.vsmall { font-size: 60%; }
.small, small { font-size: 75%; }
.big, big { font-size: 125%; }

.fit-content { width: fit-content; }

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

.caps, .ucase { text-transform:uppercase!important; }
.block { display:block; } /* <span> changement de ligne */


/* Images */
.alignerImgG { margin-bottom:1rem; float:left; margin-right:1.3rem; }
.alignerImgD { margin-bottom:1rem; float:right; margin-left:1.3rem; }


/* Marges haut/bas : valeurs absolues et avec full spécificité */
.remove-top { margin-top: 0 !important; }
.add-top { margin-top: 1rem !important; }			/* Même valeur que la marge du <p> */
.half-top { margin-top: 0.5rem !important; }
.add-d-top { margin-top: 2rem !important; }			/* Double marge */
.add-t-top { margin-top: 3rem !important; }			/* Triple marge */
.remove-bottom { margin-bottom: 0 !important; }
.half-bottom { margin-bottom: 0.5rem !important; }
.add-bottom { margin-bottom: 1rem !important; }		/* Même valeur que la marge du <p> */
.add-d-bottom { margin-bottom: 2rem !important; }	/* Double marge */
.add-t-bottom { margin-bottom: 3rem !important; }	/* Triple marge */

.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}


/* ==========================================================================
   Media Queries
   ========================================================================== */

/* http://css-tricks.com/snippets/html/responsive-meta-tag/ */
@-ms-viewport{
	width: device-width;
}

/* Tablette portrait (1023px et moins) */
@media only screen and (max-width: 1023px){
	/* .contenuPrincipal {
		width:70%;
	}
	.contenuSidebar {
		width:30%;
	} */
}


/* Mobile portrait/paysage (320px à 767px) */
@media only screen and (max-width: 767px){
	/* .contenuPrincipal {
		width:100%;
	}
	.contenuSidebar {
		display:block;
	} */
}

/* Mobile portrait (320px) */
@media only screen and (max-width: 479px){

}

/* Grand écran (1050px et +) */
@media only screen and (min-width: 1050px){


}

/* Grand écran (1680px et +) */
/*@media only screen and (min-width: 1700px){
	html {
		font-size: 18px;
	}
}*/




@media (prefers-reduced-motion: no-preference) {
	/* Animations ici */
	html {
		scroll-behavior: smooth;
	}
}



/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

	/**********************/
	/* Contenu de la page */
	/**********************/

	html {
		margin-top:0 !important;
	}

	/* On cache certains éléments */
	#wpadminbar {
		display:none!important;
	}

	/*.contenuPrincipal{
		padding-right:0;
		width:100%;
	}*/
}