@charset "utf-8";

html{
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body{
	display: grid;
	grid-template-rows: min-content min-content 1fr min-content;
	grid-template-columns: 100%;
	width: 100%;
	min-width: 320px;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	color: black;
	font-family: "Source Sans 3", sans-serif;
	font-size: 16px;
}

@media (min-width:1920px){
	body{
		/*min-height: unset;
		transform: perspective(100vw) translateZ(calc((100vw - 1920px) / 2.5));
		transform-origin: top center;
		overflow: hidden auto;*/
	}
}

@media (max-width:767px){
	body{
		grid-template-rows: min-content 1fr min-content;
	}
}

/***************************************************************************************************************************************/
/* BASE */
/***************************************************************************************************************************************/

h1,h2,h3,h4,h5,h6{
	font-family: "Sofia Sans Semi Condensed", sans-serif;
}
h1{
	margin-bottom: 0.5em;
	font-size: 2.5em;
}
h2{
	margin-top: 0.7em;
	margin-bottom: 0.3em;
	font-size: 2em;
}
h3{
	font-size: 1.5em;
}
p{
	margin-top: 0.7em;
	margin-bottom: 0.7em;
}
p.small{
	font-size: small;
}

a{
	color: unset;
	text-decoration: none;
}

/***************************************************************************************************************************************/
/* header */
/***************************************************************************************************************************************/

body>header{
	display: grid;
	grid-template-areas: "logo vide1" "logo magasins" "logo vide2";
	grid-template-rows: 3fr min-content 1fr;
	justify-items: center;
	align-items: center;
	gap: 20px;
	padding: 20px calc(50% - (1000px / 2));
}

body>header>div{
	grid-area: logo;
	justify-self: end;
}
body>header>div img{
	width: 100%;
	max-width: 550px;
}

body>header>ul{
	list-style: none;
	grid-area: magasins;
	justify-self: start;
	display: grid;
	gap: 2px;
	margin: 0 0 0 25px;
	padding: 0;
	color: silver;
	text-transform: uppercase;
}
body>header>ul>li>a{
	position: relative;
	display: block;
	padding: 5px 10px 4px 10px;
	font-size: 22px;
}
body>header>ul>li>a::before{
	position: absolute;
	top: calc(50% - 8px);
	left: -13px;
	width: 0;
	height: 0;
	border-left: 10px solid black;
	border-right: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	overflow: hidden;
}
body>header>ul:not(:hover)>li.current>a[href *= 'dinard'],
body>header>ul>li>a[href *= 'dinard']:hover{
	background-color: #2460fc;
	color: white;
}
body>header>ul:not(:hover)>li.current>a[href *= 'dinan'],
body>header>ul>li>a[href *= 'dinan']:hover{
	background-color: #84d606;
	color: black;
}
body>header>ul:not(:hover)>li.current>a::before,
body>header>ul>li>a:hover::before{
	content: '▶︎';
}

@media screen and (max-width:1040px){
	body>header{
		box-sizing: border-box;
		padding: 20px;
	}
}
@media screen and (max-width:767px){
	body>header{
		padding: 20px 30px 15px 75px;
		border-bottom: 15px solid black;
	}
	body>header>ul>li>a{
		font-size: 18px;
	}
}
@media screen and (max-width:580px){
	body>header{
		grid-template-areas: "logo" "magasins";
		grid-template-columns: 1fr;
		grid-template-rows: min-content min-content;
		gap: 0;
	}
	body>header>ul{
		justify-self: end;
		grid-auto-flow: column;
		grid-template-columns: min-content min-content;
		gap: 5px;
		margin: 0;
	}
	body>header>ul>li:first-of-type{
		order: 2;
	}
	body>header>ul>li:last-of-type{
		order: 1;
	}
	body>header>ul>li>a{
		padding: 3px 7px 2px 7px;
		font-size: 16px;
	}
	body>header>ul>li>a::before{
		top: -11px;
		left: calc(50% - 6px);
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-top: 8px solid black;
		border-bottom: 0;
	}
}

/***************************************************************************************************************************************/
/* footer */
/***************************************************************************************************************************************/

body>footer{
	display: grid;
	grid-template-areas: "adresse magasins menu reseaux" "marques marques marques marques" "copy copy copy copy";
	grid-template-columns: 1fr 1fr 1fr min-content;
	gap: 25px 15px;
	padding: 20px calc(50% - (1350px / 2)) 50px calc(50% - (1350px / 2));
	background-color: black;
	color: white;
	font-family: "Sofia Sans Semi Condensed", sans-serif;
	font-size: 20px;
}

/* Adresse */
body>footer>p:nth-of-type(1){
	grid-area: adresse;
	margin: 0;
	font-size: 22px;
	font-weight: 200;
	line-height: 1.1em;
}
body>footer>p:nth-of-type(1)>strong{
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4em;
}

/* Copyright */
body>footer>p:nth-of-type(2){
	grid-area: copy;
	margin: 0;
	font-family: "Source Sans 3", sans-serif;
	font-size: 16px;
	text-align: center;
}
body>footer>p:nth-of-type(2):before{
	content: '"breizcycles" ' "est une marque déposée à l'INPI";
	display: block;
	margin: 10px 0 15px 0;
	font-weight: 700;
}

/* Menu */
body>footer>ul:nth-of-type(1){
	grid-area: menu;
	list-style: none;
	margin: 0;
	padding: 0;
	font-weight: 300;
	line-height: 1.6em;
}

/* Magasins */
body>footer>ul:nth-of-type(3){
	grid-area: magasins;
	margin: 0;
	padding: 0 0 0 20px;
	font-weight: 300;
	line-height: 1.6em;
}
body>footer>ul:nth-of-type(3):before{
	content: 'Nos adresses :';
	position: relative;
	left: -20px;
	font-weight: 400;
}

/* reseaux sociaux */
body>footer>ul:nth-of-type(2){
	grid-area: reseaux;
	list-style: none;
	align-self: start;
	justify-self: start;
	display: grid;
	grid-auto-flow: column;
	gap: 10px;
	margin: 0;
	padding: 0;
}
body>footer>ul:nth-of-type(2)>li{
	width: 40px;
	height: 40px;
	margin: 0;
	border-radius: 7px;
	background-size: contain;
}
body>footer>ul:nth-of-type(2)>li.fb{
	order: 1;
	background-image: url('/images/bouticorama/icones/social-icon-120/facebook.png');
	transition-duration: 0.5s;
}
body>footer>ul:nth-of-type(2)>li.instagram{
	order: 2;
	background-image: url('/images/bouticorama/icones/social-icon-120/instagram.png');
}
body>footer>ul:nth-of-type(2)>li>a{
	display: block;
	width: 100%;
	height: 100%;
}
body>footer>ul:nth-of-type(2)>li>a>span{
	display: none;
}

/* marques */
body>footer>ul:nth-of-type(4){
	grid-area: marques;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	justify-self: center;
	max-width: 1000px;
	margin: 0;
	padding: 0;
}
body>footer>ul:nth-of-type(4)>li{
	display: grid;
	justify-content: center;
	align-items: center;
	width: 135px;
}
body>footer>ul:nth-of-type(4)>li>img{
	max-width: 100%;
}

@media screen and (max-width:1390px){
	body>footer{
		box-sizing: border-box;
		padding: 20px;
	}
}
@media screen and (max-width:980px){
	body>footer{
		grid-template-areas: "adresse magasins reseaux" "adresse menu resaux" "marques marques marques" "copy copy copy";
		grid-template-columns: 1fr 1fr min-content;
	}
}
@media screen and (max-width:768px){
	body>footer{
		grid-template-areas: "adresse magasins" "adresse menu" "reseaux menu" "marques marques" "copy copy";
		grid-template-columns: 1fr 1fr;
	}
}
@media screen and (max-width:580px){
	body>footer{
		grid-template-areas: "adresse reseaux" "magasins magasins" "menu menu" "marques marques" "copy copy";
		grid-template-columns: 1fr min-content;
	}
}
@media screen and (max-width:440px){
	body>footer{
		grid-template-areas: "adresse" "reseaux" "magasins" "menu" "marques" "copy";
		grid-template-columns: 1fr;
	}
}

/***************************************************************************************************************************************/
/* nav */
/***************************************************************************************************************************************/

nav{
	background-color: black;
	font-family: 'Sofia Sans Semi Condensed', sans-serif;
	text-align: center;
	z-index: 1;
}
nav>ul{
	list-style: none;
	display: flex;
	justify-content: space-around;
	max-width: 1024px;
	height: 50px;
	margin: 0 auto;
	padding: 0;
}
nav>ul>li{
	position: relative;
	height: 50px;
	cursor: pointer;
}
nav>ul>li>a{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	min-height: 0vw;
	box-sizing: border-box;
	padding: 0 10px;
	color: white;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	font-size: min(1.8vw,18px);
	font-weight: 400;
}
nav>ul:has(a[aria-label $= 'Dinard'])>li:hover>a:not([href *= 'dinan.breizcycles.bzh']),
nav>ul>li:hover>a[href *= 'dinard.breizcycles.bzh']{
	color: #92b0ff;
}
nav>ul:has(a[aria-label $= 'Dinan'])>li:hover>a:not([href *= 'dinard.breizcycles.bzh']),
nav>ul>li:hover>a[href *= 'dinan.breizcycles.bzh']{
	color: #84d606;
}
nav>ul>li>a>span{
	display: block;
}
/* Bouton afficher menu */
nav>ul>li:nth-of-type(1){
	display: none;
}
@media screen and (min-width:768px){
	/* Menu accueil */
	nav>ul>li:nth-of-type(2):has(a[href = '/']){
		flex: unset;
	}
	nav>ul>li:nth-of-type(2):has(a[href = '/'])>a{
		width: 50px;
		padding: 0;
		background-image: url('/images/bouticorama/icones/glyph-ffffff-48/glyph_020.png');
		background-repeat: no-repeat;
		background-size: 25px;
		background-position: center center;
	}
	nav>ul:has(a[aria-label $= 'Dinard'])>li:nth-of-type(2):has(a[href = '/']):hover>a{
		filter: url('#colorize92B0FF');
	}
	nav>ul:has(a[aria-label $= 'Dinan'])>li:nth-of-type(2):has(a[href = '/']):hover>a{
		filter: url('#colorize84D606');
	}
	nav>ul>li:nth-of-type(2):has(a[href = '/'])>a>span{
		display: none;
	}
	/* Menu contact et panier sous forme d'icone + indication panier */
	nav>ul>li:nth-last-of-type(1):has(a[href ^= '/contact']){
		flex: unset;
	}
	nav>ul>li:nth-last-of-type(1):has(a[href ^= '/contact'])>a{
		width: 50px;
		padding: 0;
		background-image: url('/images/bouticorama/icones/glyph-ffffff-48/glyph_010.png');
		background-repeat: no-repeat;
		background-size: 25px;
		background-position: center center;
	}
	nav>ul:has(a[aria-label $= 'Dinard'])>li:nth-last-of-type(1):has(a[href ^= '/contact']):hover>a{
		filter: url('#colorize92B0FF');
	}
	nav>ul:has(a[aria-label $= 'Dinan'])>li:nth-last-of-type(1):has(a[href ^= '/contact']):hover>a{
		filter: url('#colorize84D606');
	}
	nav>ul>li:nth-last-of-type(1):has(a[href ^= '/contact'])>a>span{
		display: none;
	}
}
/* Bouton masquer menu */
nav>ul+button{
	display: none;	
}
/* Menu 2nd niveau */
nav>ul>li>ul{
	list-style: none;
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 50px;
	left: -20%;
	max-height: 0;
	margin: 0;
	padding: 0;
	background-color: white;
	box-shadow: 0px 0px 8px #414042;
	border-radius: 0 0 5px 5px;
	clip: rect(0,1000px,1000px,-15px);
	clip-path: inset(0 -15px -15px -15px);
	z-index: 109;
	overflow: hidden;
	/*transition: max-height .35s ease-out;*/
}
nav>ul>li:hover>ul,
nav>ul>li.open>ul{
	max-height: calc(100vh - 50px);
	overflow: auto;
	z-index: 110;
}
nav>ul>li>ul>li{
	padding: 0;
}
nav>ul>li>ul>li:last-of-type{
	margin-bottom: 10px;
}
nav>ul>li>ul:not(:hover)>li.current{
	background-color: #f0f0f0;
}
nav>ul>li>ul>li:hover{
	background-color: #f0f0f0;
}
nav>ul>li>ul>li>a{
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 10px 20px;
	color: #414042;
	text-align: left;
	/*text-transform: uppercase;*/
	text-decoration: none;
	font-size: 18px;
	font-weight: 400;
	white-space: nowrap;
}
/* Menu niveau supplémentaire */
nav>ul>li>ul>li>ul{
	display: none;
}

@media screen and (max-width:767px){
	nav{
		position: absolute;
		top: 70px;
		left: 10px;
		width: 300px;
		height: auto;
		background-color: white;
		border-radius: 5px;
		box-shadow: 0px 0px 8px #414042;
		z-index: 109;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	nav>ul{
		display: block;
		height: auto;
		max-height: 0;
		margin: 0;
		/*border-top-left-radius: 5px;
		border-top-right-radius: 5px;*/
		border-radius: 5px;
		background-color: white;
		overflow: hidden;
		/*transition: max-height 0.4s ease-out .3s, margin-top 0.4s ease-out .3s;*/
	}
	nav>ul:hover,
	nav.open>ul{
		max-height: calc(100vh - 150px);
		/*margin-top: 60px;*/
		overflow: auto;
	}
	nav>ul>li:not(:nth-of-type(1)){
		display: block;
		width: 100%;
		height: unset;
	}
	nav>ul:hover>li:not(:nth-of-type(1)):hover{
		background-color: #f0f0f0;
	}
	nav>ul>li>a{
		display: block;
		padding: 10px;
		color: black;
		text-align: left;
		font-size: 17px;
	}
	/* Bouton afficher menu*/
	nav>ul>li:nth-of-type(1){
		position: absolute;
		top: -55px;
		left: 0;
		display: block;
		width: 60px;
		height: 60px;
		z-index: 111;
	}
	nav>ul>li:nth-of-type(1)>button{
		display: block;
		width: 60px;
		height: 60px;
		border: unset;
		background-color: unset;
		background-image: url('/images/bouticorama/icones/glyph-000000-48/glyph_158.png');
		background-size: 30px;
		background-position: center 18px;
		background-repeat: no-repeat;
	}
	nav>ul>li:nth-of-type(1)>button>span{
		display: none;
	}
	/* Bouton masquer menu */
	nav>ul+button{
		display: none;
		width: 60px;
		height: 60px;
		border: unset;
		background-color: unset;
		background-image: url('/images/bouticorama/icones/glyph-000000-48/glyph_192.png');
		background-size: 30px;
		background-position: center center;
		background-repeat: no-repeat;
		z-index: 112;
	}
	nav>ul:hover+button{
		/*display: block;*/
	}
	nav>ul+button>span{
		display: none;
	}
	/* Menu 2nd niveau */
	nav>ul>li>ul{
		position: unset;
		display: block;
		max-height: unset;
		padding: 0;
		box-shadow: unset;
	}
	/*nav>ul>li:hover>ul{
		display: block;
	}*/
	nav>ul>li>ul>li:last-of-type {
		margin-bottom: 0;
	}
	nav>ul>li>ul>li>a{
		padding-left: 30px;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	nav>ul:has(a[aria-label $= 'Dinard'])>li>ul>li:hover>a:not([href *= 'dinan.breizcycles.bzh']),
	nav>ul>li>ul>li:hover>a[href *= 'dinard.breizcycles.bzh']{
		color: #92b0ff;
	}
	nav>ul:has(a[aria-label $= 'Dinan'])>li>ul>li:hover>a:not([href *= 'dinard.breizcycles.bzh']),
	nav>ul>li>ul>li:hover>a[href *= 'dinan.breizcycles.bzh']{
		color: #84d606;
	}
}

/***************************************************************************************************************************************/
/* main */
/***************************************************************************************************************************************/

body>main{
	box-sizing: border-box;
	width: 100%;
	max-width: 1004px;
	margin: 0 auto 50px auto;
	padding: 15px 10px;
}
@media screen and (max-width:767px){
	body>main{
		/*margin-top: 60px;*/
	}
}

/***************************************************************************************************************************************/
/* fil d'ariane */
/***************************************************************************************************************************************/

ol#filAriane{
	display: flex;
	flex-wrap: wrap;
	margin-top: 5px;
	margin-bottom: 35px;
	padding: 0;
	font-family: "Sofia Sans Semi Condensed", sans-serif;
	letter-spacing: unset;
	list-style: none;
}
ol#filAriane>li{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
ol#filAriane>li:not(:first-of-type)::before{
	content: '>';
	margin: 0 5px 0 10px;
	color: #414042;
}
ol#filAriane>li>a{
	color: #414042;
	font-size: 17px;
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
}
ol#filAriane>li>a:hover{
	text-decoration: underline;
}
ol#filAriane + article>:first-child{
	margin-top: 0;
}

/***************************************************************************************************************************************/
/* Formulaire */
/***************************************************************************************************************************************/

form.formulaire>fieldset{
	margin-bottom: 25px;
	padding: 0;
	border: unset;
}
form.formulaire>fieldset>legend{
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 3px 10px;
	background-color: black;
	color: white;
	font-family: "Sofia Sans Semi Condensed", sans-serif;
	font-size: 18px;
	text-transform: uppercase;
}
form.formulaire>fieldset>ul{
	margin: 0;
	padding: 0;
}
form.formulaire>fieldset>ul>li{
	display: flex;
	margin: 10px 2px;
}
form.formulaire>fieldset>ul>li>*{
	flex: 1;
	font-size: 16px;
}
form.formulaire>fieldset>ul>li>label{
	flex: unset;
	width: 200px;
	margin-right: 10px;
	padding-top: 3px;
	text-align: right;
}
form.formulaire>fieldset>ul>li>textarea{
	height: 150px;
	padding: 2px 3px;
	font-family: unset;
}
form.formulaire>fieldset>#recaptcha_widget{
	height: 78px;
	margin: 10px 2px 10px 212px;
}
form.formulaire>div:last-child{
	text-align: center;
}
@media screen and (max-width:540px){
	form.formulaire>fieldset>ul>li{
		flex-direction: column;
	}
	form.formulaire>fieldset>ul>li>label{
		text-align: left;
	}
	form.formulaire>fieldset>#recaptcha_widget{
		margin: 10px -2px;
	}
	form.formulaire>fieldset>#recaptcha_widget>div>div>div>div{
		margin: 0 auto;
	}
}

/* Validation de formulaire */
form.formulaire>fieldset>ul>li>input[readonly]{
	color: darkgray;
}
form.formulaire>fieldset>ul>li>input,
form.formulaire>fieldset>ul>li>textarea{
	padding: 2px 35px 2px 6px;
	border: 1px solid lightgray;
	border-radius: 3px;
	outline: unset;
	box-shadow: unset;
	-webkit-appearance: none;
}
form.formulaire>fieldset>ul>li>input:focus,
form.formulaire>fieldset>ul>li>input:hover,
form.formulaire>fieldset>ul>li>textarea:focus,
form.formulaire>fieldset>ul>li>textarea:hover{
	box-shadow: 0 0 4px gray;
	outline: unset;
}
form.formulaire.visualcheck>fieldset>ul>li>input:invalid,
form.formulaire.visualcheck>fieldset>ul>li>textarea:invalid,
form.formulaire>fieldset>ul>li>input.visualcheck:invalid,
form.formulaire>fieldset>ul>li>textarea.visualcheck:invalid{
	background: linear-gradient(to right, salmon 1px, salmon 3px, rgba(255,255,255,0) 5px, rgba(255,255,255,0));
}
form.formulaire.visualcheck>fieldset>ul>li>input:valid,
form.formulaire.visualcheck>fieldset>ul>li>textarea:valid,
form.formulaire>fieldset>ul>li>input.visualcheck:valid,
form.formulaire>fieldset>ul>li>textarea.visualcheck:valid
form.formulaire>fieldset>ul>li>input:focus:valid,
form.formulaire>fieldset>ul>li>textarea:focus:valid{
	background: linear-gradient(to right, palegreen 1px, palegreen 3px, rgba(255,255,255,0) 5px, rgba(255,255,255,0));
}
form.formulaire textarea{
	resize: vertical;
}

/***************************************************************************************************************************************/
/***************************************************************************************************************************************/
/***************************************************************************************************************************************/

body>main>article p{
	line-height: 1.5em;
}
body>main>article img.imgLeft{
	float: left;
	width: 50%;
	margin: 0 10px 10px 0;
}
body>main>article img.imgRight{
	float: right;
	width: 50%;
	margin: 0 0 10px 10px;
}
body>main>article img:not(.imgLeft):not(.imgRight){
	width: 100%;
	min-width: 100%;
	height: auto;
}
body>main>article div.blocImg{
	clear: both;
	display: grid;
	align-items: center;
	margin: 10px 0;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
body>main>article div.blocImg>*{
	flex: 1;
	display: block;
}
body>main>article div.blocImg img{
	display: block;
}


body:not([data-idmodule='1'])>main>article div.blocImg img{
	flex: 0 1;
}
body>main>article hr.clearBoth{
	border: unset;
	clear: both;
}

div.widgetIFrame div.iframe iframe{
	width: 100%;
}

/* Module page de présentation */

body[data-typemodule='Presentation']>main>article ul{
	list-style: none;
	padding-left: 20px;
}
body[data-typemodule='Presentation']>main>article ul>li::before{
	content: "\0027A4  ";
	display: inline-block;
	width: 20px;
	margin-left: -20px;
	font-size: 16px;
}
body[data-typemodule='Presentation']>main>article div.tableau,
body[data-typemodule='Blog']>main>article div.tableau{
	overflow: auto;
}
body[data-typemodule='Presentation']>main>article div.tableau>table,
body[data-typemodule='Blog']>main>article div.tableau>table{
	width: 100%;
}
body[data-typemodule='Presentation']>main>article div.tableau>table>thead>tr>td,
body[data-typemodule='Blog']>main>article div.tableau>table>thead>tr>td{
	width: 20%;
	padding:10px;
	background-color: black;
	color: white;
	font-family: "Sofia Sans Semi Condensed", sans-serif;
	font-size: 18px;
	text-transform: uppercase;
}
body[data-typemodule='Presentation']>main>article div.tableau>table>tbody>tr>td,
body[data-typemodule='Blog']>main>article div.tableau>table>tbody>tr>td{
	padding:10px;
}
body[data-typemodule='Presentation']>main>article div.tableau>table>tbody>tr:nth-child(2n + 2)>td,
body[data-typemodule='Blog']>main>article div.tableau>table>tbody>tr:nth-child(2n + 2)>td{
	background-color: #f0f0f0;
}




/***************************************************************************************************************************************/
/***************************************************************************************************************************************/
/***************************************************************************************************************************************/

svg{
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
}

/* octobre 2023 */


/* Bandeau d'annonces */

@keyframes afficher{
	from {width: 0;}
	to   {width: 100%;}
}
@keyframes masquer{
	from {width: 100%;}
	to   {width: 0;}
}

#annonces{
	margin: 0 0 5px 0;
	padding: 0;
	text-align: center;
	background-color: #fac52d;
}

#annonces>ul{
	display: flex;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

#annonces>ul>li{
	display: flex;
	justify-content: end;
	width: 0;
	overflow: hidden;
	animation-duration: .5s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
}
#annonces>ul>li.selected{
	width: 100%;
}
#annonces>ul>li:not(.start){
	animation-name: masquer;
}
#annonces>ul>li:not(.start).selected{
	animation-name: afficher;
}

#annonces>ul>li>span,
#annonces>ul>li>a{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: max(310px, calc(100vw - 10px));
	padding: 5px;
	text-decoration: none;
}

@media screen and (max-width:767px){
	#annonces>ul>li>span,
	#annonces>ul>li>a{
		padding: 6px;
		/* box-shadow: inset 0px 0px 8px #41404280; */
		padding-top: 66px;
	}
}



div.navigation {
	display: flex;
	gap: 10px;
	justify-content: center;
}

div.navigation a {
	background-color: black;
	color: white;
	border: none;
	padding: 0.3rem 0.6rem;
	cursor: pointer;
}

ul.listeBlog>li>div {
	display: grid;
	grid-template-columns: 95px 1fr;
}
ul.listeBlog>li>div>span{
	width: 90px;
	white-space: nowrap;
}
ul.listeBlog>li>div>a{
	white-space: nowrap;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;	
}