@font-face {
	font-family: spinweradbold;
	src: url('/font/spinwerad.woff2') format('woff2'), url('/font/spinwerad.woff') format('woff');
	font-weight: 400;
	font-style: normal
}
*,*::after,*::before{border:0 none;box-sizing:border-box;margin:0;outline:medium none;padding:0}
html {
	scroll-behavior: smooth;
}
hr {height:1px;background-color:#aaa;margin:1em auto;}
ul, ol {/* padding: 0 1.8em 0 1.8em;margin: 0.3em 0; */}
blockquote {padding: 1em}
h1, h2, h3, h4, h5, h6 {/* margin: 0.5em 0 */}
h1, h2, h3 {
	font-weight: normal;
}
.h1{font-size:2em;margin:0.67em 0}
.h2{font-size:1.5em;margin:0.83em 0}
.h3{font-size:1.17em;margin:1em 0}
.h4{font-size:1em;margin:1.33em 0}
p {
	margin:0.25em auto;
}
a {text-decoration:none}
canvas, img, svg, video {max-width:100%;height:auto}
.img {background:transparent no-repeat center/cover}
:root {
	--c1: #144168;
	--c2: #76a787;
	--c22: #6c9d7d;
	--c2dark: hsl(141, 22%, 48%);
	--c3: #a3e5f7;
	--c32: #598AB5;
	--c4: #ddbfac;
	--c5: white;
	font-size: 16px;
}
.rem {
	/* font-size: min(max(14px, calc(0.417vw + 12px)), 18px); */
	font-size: clamp(14px, calc(0.417vw + 12px), 18px);
}

.h100 {height:100%}
.w100 {width:100%}

.flex {display:flex}
.column {flex-flow:column}
.wrap{flex-wrap:wrap}
.nowrap{flex-wrap:nowrap}


.fl{float:left}
.fr{float:right}
.fn{float:none}
.tac{text-align:center}
.tal{text-align:left}
.tar{text-align:right}
.taj {
	text-align: justify;
	hyphens: auto;
}
.ltr{direction:ltr}
.rtl{direction:rtl}
.rel{position:relative}
.fixed{position:fixed}
.abso{position:absolute}


.dn{display:none}
.db{display:block}
.di{display:inline}
.dib{display:inline-block}
.dif{display:inline-flex}

.hand{cursor: pointer}
.normal {font-weight: normal}
.bold {font-weight: bold}
.italic {font-style: italic}
.underline {text-decoration:underline}
.strike {text-decoration: line-through}

.aic{align-items:center}
.jic{justify-items: center}

.vat{vertical-align:top; align-self:self-start}
.vam{vertical-align:middle; align-self:center}
.vab{vertical-align:bottom; align-self:flex-end}

.no-bullet {list-style: none}
.rounded {border-radius: 50%}
.flipped {transform: scale(-1, 1)}
/* .w200px{width:200px}.w250px{width:250px}.w300px{width:300px}.w350px{width:350px}.w400px{width:400px} */
.wnone{display:none}.wauto{flex:1 1 0px}
/* .w17{width:16.66%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w33{width:33.33%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w67{width:66.66%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w83{width:83.33%}.w100{width:100%}.ord-2{order:-2}.ord-1{order:-1}.ord0{order:0}.ord1{order:1}.ord2{order:2} */
.wmax{margin:auto;max-width:1408px}

@media screen and (min-width: 1024px){
.dh100 {height:100%}
.dw100 {width:100%}
/* .wmax{margin:auto;max-width:1280px} */
.dnone{display:none}.dwauto{flex:1 1 0px}.dw17{width:16.66%}.dw20{width:20%}.dw25{width:25%}.dw30{width:30%}.dw33{width:33.33%}.dw40{width:40%}.dw50{width:50%}.dw60{width:60%}.dw67{width:66.66%}.dw70{width:70%}.dw75{width:75%}.dw80{width:80%}.sw83{width:83.33%}.dw100{width:100%}.dord-2{order:-2}.dord-1{order:-1}.dord0{order:0}.dord1{order:1}.dord2{order:2}
}

/* tablet 1600/800=2        › 1600/1000=1.6   › 1600/1024=1.5625 */
@media screen and (min-width: 769px) and (max-width: 1023px){
.th100 {height:100%}
.tw100 {width:100%}
/* .wmax{margin:auto;max-width:810px} */
.tnone{display:none}.twauto{flex:1 1 0px}.tw17{width:16.66%}.tw20{width:20%}.tw25{width:25%}.tw30{width:30%}.tw33{width:33.33%}.tw40{width:40%}.tw50{width:50%}.tw60{width:60%}.tw67{width:66.66%}.tw70{width:70%}.tw75{width:75%}.tw80{width:80%}.tw83{width:83.33%}.tw100{width:100%}.tord-2{order:-2}.tord-1{order:-1}.tord0{order:0}.tord1{order:1}.tord2{order:2}
}

/* smartphone 1600/450=3.56 › 1600/600=2.666 › 1600/768=2.0833 */
@media screen and (max-width: 768px){
.sh100 {height:100%}
.sw100 {width:100%}
/* .wmax{margin:auto;max-width:810px} */
.snone{display:none}.swauto{flex:1 1 0px}.sw17{width:16.66%}.sw20{width:20%}.sw25{width:25%}.sw30{width:30%}.sw33{width:33.33%}.sw40{width:40%}.sw50{width:50%}.sw60{width:60%}.sw67{width:66.66%}.sw70{width:70%}.sw75{width:75%}.sw80{width:80%}.sw83{width:83.33%}.sw100{width:100%}.sord-2{order:-2}.sord-1{order:-1}.sord0{order:0}.sord1{order:1}.sord2{order:2}
}

/* pour les petits écrans on peut donner 14px › 1400/400=3.5  */
@media screen and (max-width: 400px){
											/* :root{font-size:14px} */
}

body {
	font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
	background-color: var(--c22);
}
.font1 {
	font-family: spinweradbold;
}
.encart {
	margin: 0 auto;
	font-size: 1em;
}
.encart .un {
	letter-spacing: 0.22em
}
.encart .deux {
	letter-spacing: 0.185em
}
.encart .trois {
	letter-spacing: 0.08em
}
.encart.vente .h2 {
	margin: 0;
	letter-spacing: 0.185em;
}
.encart.vente p strong {
	display: block;
	letter-spacing: 0.1em;
	font-size: 1.5em;
	font-weight: normal;
}
.encart.vente p strong:first-child {letter-spacing: 0.1em}
.encart.vente p strong:last-child {letter-spacing: 0.075em}

.encart.peda .h2 {
	margin: 0;
	letter-spacing: 0.05em;
	padding-left: 0.08em;
}
.encart.peda p strong {
	display: block;
	letter-spacing: -0.05em;
	font-size: 1.5em;
	font-weight: normal;
}

.encart.formation .h2 {
	margin: 0;
	letter-spacing: 0.445em;
	padding-left: 0.22em;
}
.encart.formation p strong {
	display: block;
	font-size: 1.5em;
	font-weight: normal;
}
.encart.formation p strong:first-child {letter-spacing: 0.12em}
.encart.formation p strong:last-child {letter-spacing: 0.2em}


.tarifs {
	width: 100%;
	max-width: 20em;
}
.tarifs tr > td:first-child {
	color: var(--c3);
	/* font-weight: bold; */
}
.tarifs tr > td:last-child {
	text-align: right
}
.basdepage {
	text-align: right;
	padding: 5px 20px;
	position: relative;
}
.col-count-2 {
	column-count: 2;
	column-gap: 2em;
}
.col-fill-auto {
	column-fill: auto;
}
.col-span-all {
	column-span: all;
}
.socios a {
	display: inline-block;
	margin: 0.2em;
	width: 2em;
}
.socios a svg {
	display: block;
	width: 100%;
}
.chez {
	margin: 1em auto;
}
ul {
	padding: 0.5em 0 0.5em 1em;
}
ul li {
	position: relative;
	list-style: none;
	margin: 0.2em 0;
	padding-left: 0.3em;
}
ul.favicon li::before {
	content: " ";
	position: absolute;
	inset: 0;
	display: inline-block;
	width: 1em;
	height: 1em;
	margin: 0.25em 0 0 -1.3em;
	background: transparent url(/img/favicon-16x16.png) no-repeat center/cover;
	filter: drop-shadow(0 0 0.05em #fff);
}

/* pour replier - cX, bgX, padX et margX */
@media screen and (min-width: 10px) {
	.c1 {
		color: var(--c1)
	}
	.bg1 {
		background-color: var(--c1)
	}
	.c2 {
		color: var(--c2)
	}
	.bg2 {
		background-color: var(--c2)
	}
	.c3 {
		color: var(--c3)
	}
	.c32 {
		color: var(--c32)
	}
	.bg3 {
		background-color: var(--c3)
	}
	.c4 {
		color: var(--c4)
	}
	.bg4 {
		background-color: var(--c4)
	}
	.c5 {
		color: var(--c5)
	}
	.bg5 {
		background-color: var(--c5)
	}
	/* on détermine un pad général pour les blocs de texte */
	.pad {
		padding: 1em 2em 2em 2em
	}
	.pad0 {
		padding: 0
	}
	.pad05 {
		padding: 0.5em
	}
	.pad1 {
		padding: 1em
	}
	.pad15 {
		padding: 1.5em
	}
	.pad2 {
		padding: 2em
	}
	.pt0 {
		padding-top: 0em
	}
	.pr0 {
		padding-right: 0em
	}
	.pb0 {
		padding-bottom: 0em
	}
	.pl0 {
		padding-left: 0em
	}
	.pt05 {
		padding-top: 0.5em
	}
	.pr05 {
		padding-right: 0.5em
	}
	.pb05 {
		padding-bottom: 0.5em
	}
	.pl05 {
		padding-left: 0.5em
	}
	.pt1 {
		padding-top: 1em
	}
	.pr1 {
		padding-right: 1em
	}
	.pb1 {
		padding-bottom: 1em
	}
	.pl1 {
		padding-left: 1em
	}
	.pt15 {
		padding-top: 1.5em
	}
	.pr15 {
		padding-right: 1.5em
	}
	.pb15 {
		padding-bottom: 1.5em
	}
	.pl15 {
		padding-left: 1.5em
	}
	.pt2 {
		padding-top: 2em
	}
	.pr2 {
		padding-right: 2em
	}
	.pb2 {
		padding-bottom: 2em
	}
	.pl2 {
		padding-left: 2em
	}
	/* à tester › on détermine un pad général pour les blocs de texte - l'avantage des padding c'est qu'ils ne fusionnent pas */
	/* .margin {margin: 1em 2em 2em 2em} */
	.mauto {
		margin: auto
	}
	/* .margin {margin: 1em 2em 2em 2em} */
	.mt0 {
		margin-top: 0em
	}
	.mr0 {
		margin-right: 0em
	}
	.mb0 {
		margin-bottom: 0em
	}
	.ml0 {
		margin-left: 0em
	}
	.mt05 {
		margin-top: 0.5em
	}
	.mr05 {
		margin-right: 0.5em
	}
	.mb05 {
		margin-bottom: 0.5em
	}
	.ml05 {
		margin-left: 0.5em
	}
	.mt1 {
		margin-top: 1em
	}
	.mr1 {
		margin-right: 1em
	}
	.mb1 {
		margin-bottom: 1em
	}
	.ml1 {
		margin-left: 1em
	}
	.mt15 {
		margin-top: 1.5em
	}
	.mr15 {
		margin-right: 1.5em
	}
	.mb15 {
		margin-bottom: 1.5em
	}
	.ml15 {
		margin-left: 1.5em
	}
	.mt2 {
		margin-top: 2em
	}
	.mr2 {
		margin-right: 2em
	}
	.mb2 {
		margin-bottom: 2em
	}
	.ml2 {
		margin-left: 2em
	}
	.mt25 {
		margin-top: 2.5em
	}
	.mr25 {
		margin-right: 2.5em
	}
	.mb25 {
		margin-bottom: 2.5em
	}
	.ml25 {
		margin-left: 2.5em
	}
	.mt3 {
		margin-top: 3em
	}
	.mr3 {
		margin-right: 3em
	}
	.mb3 {
		margin-bottom: 3em
	}
	.ml3 {
		margin-left: 3em
	}
	/* une série de font-size */
	.fs06 {
		font-size: 0.6em
	}
	.fs08 {
		font-size: 0.8em
	}
	.fs12 {
		font-size: 1.2em
	}
	.fs14 {
		font-size: 1.4em
	}
	.fs16 {
		font-size: 1.6em
	}
	.fs18 {
		font-size: 1.8em
	}
	.fs2 {
		font-size: 2em
	}
	.fs3 {
		font-size: 3em
	}
	/* background-position inline var .img.bgp {background-position: var(--bgp)}  */
}

/* NOUVEAU GRID + MENU BURGER */
@media screen {
	.bloc-blanc {
		background-color: var(--c5);
	}
	.bloc-blanc h1,
	.bloc-blanc h2,
	.bloc-blanc h3 {
		color: var(--c1);
	}
	.bloc-marine {
		background-color: var(--c1);
		color: var(--c5);
	}
	.bloc-marine h1,
	.bloc-marine h2,
	.bloc-marine h3 {
		color: var(--c3);
	}
	.bloc-marine a {
		color: var(--c3);
	}
	.bloc-vert {
		background-color: var(--c2);
		color: var(--c5);
	}
	.bloc-vert h1,
	.bloc-vert h2,
	.bloc-vert h3 {
		color: var(--c1);
	}
	#wrapMenuMain {
		background-color: var(--c2);
	}
	.burger {
		color: var(--c5);
		background-color: var(--c2dark);
		border-radius: 2em;
		padding: 0.5em;
		cursor: pointer;
	}
	.burger>svg {
		display: block;
	}
	.burger:hover {
		background-color: #fff0;
	}
	.burgerTop {
		color: var(--c5);
		background-color: var(--c2);
		border-radius: 2em;
		padding: 0.5em;
		cursor: pointer;
	}
	.burgerTop>svg {
		display: block;
	}
	.burgerTop:hover {
		color: var(--c1);
		background-color: var(--c3);
	}
	#navMenuMain {
		overflow: hidden;
	}
	#navMenuMain ul {
		padding: 1em 0em;
		margin: 0;
		display: flex;
		align-items: center;
		height: 100%;
	}
	#navMenuMain ul>li {
		padding: 0;
		text-align: center;
		flex: 1 1 100%;
		margin: 0;
	}
	#navMenuMain a {
		color: var(--c5);
		display: block;
		padding: 0.3em 0.4em 0.45em 0.4em;
		box-shadow: 0px 2px 4px 0px #1d2e3e;
		margin: 0 -0.1em;
		background-color: var(--c2);
		font-family: arial;
	}
	#navMenuMain a:hover {
		color: var(--c1);
	}
}

/* nouveau -› desktop deskgrid */
@media screen and (min-width: 1024px){
	.deskgrid {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		--dgcol: 1/7;
		--dgrow: auto;
	}
	.deskgrid > header, .deskgrid > section, .deskgrid > .ondeskgrid {
		height: 100%;
		width: 100%;
		grid-column: var(--dgcol);
		grid-row: var(--dgrow);
	}
	#navMenuMain {
		position: absolute;
		top: 0;
		height: 100%;
	}
	.burgerTop {
		display: none;
	}
	.burger {
		display: none;
	}
}
/* !!--› tablet + smartphone */
@media screen and (max-width: 1023px) {
	#wrapMenuMain {
		position: fixed;
		inset: 0;
		z-index: 2;
	}
	.burgerTop {
		display: block;
	}
	.burger {
		display: block;
	}
	#homeLogo {
		margin-right: 60px;
		margin-left: 60px;
	}
	#burgerOpen {
		position: absolute;
		inset: 1em 1em auto auto;
	}
	#burgerClose {
		position: static;
		margin: 1em 1em 0 auto;
	}
	#navMenuMain ul {
		height: 100%;
		font-size: 1.1em;
		gap: 1em;
	}
	.dbMenu {
		display: block;
	}
	.dnMenu {
		display: none;
	}
}

/* -› tablet */
@media screen and (min-width: 769px) and (max-width: 1023px){}
/* -› smartphone */
@media screen and (max-width: 768px){}


/* FIN NOUVEAU GRID + MENU BURGER */

.hen-card {
	display: flex;
	flex-flow: wrap column;
	box-shadow: 8px 8px 16px 0px rgba(0,0,0,0.5);
	border-radius: 4px;
	background-color: var(--c5);
	color: var(--c1);
	overflow: hidden;
}
.hen-card .hn {
	padding: 0.5em 0.8em;
	margin: 0;
	color: var(--c5);
	background-color: var(--c1);
}

.hen-card .content {
	/* order: 2; */
	flex: 1 1 0px;
	padding: 0.8em 0.8em;
}
.hen-card .thumb {
	order: 0;
	display: flex;
	margin-bottom: auto;
	margin-top: 0;
	gap: 0.3em;
	background-color: var(--c4);
}
.hen-card .thumb-link {
}
.img-db {
	background: transparent no-repeat center/cover;
	background-position: center top;
	display: block;
	min-height: 216px;
}
.races-de-poules figcaption {
	display: none;
}

/* Avril 2026 - catalogue produits */
#catalogue {background-position: 40% 50%;}
.ws-nowrap {white-space: nowrap;}
/* Avril 2026 - catalogue produits */
.encart.catalogue .h2 {
	margin: 0;
	letter-spacing: 0.445em;
	padding-left: 0.22em;
}
.encart.catalogue p strong {
	display: block;
	font-size: 1.5em;
	font-weight: normal;
}
.encart.catalogue p strong:first-child {letter-spacing: 0.12em}
.encart.catalogue p strong:last-child {letter-spacing: 0.1em}

/* Avril 2026 - catalogue produits */
.diapo {
	padding: 0.2em 0;
}

.diapo .thumbs {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(6, 1fr);
	gap: 0.2em;
}
.diapo .thumbs > .imglink {
	display: flex;
	height: 100%;
	width: 100%;
	grid-column: var(--dgcol);
}
.diapo .thumbs > .imglink canvas {
	width: 100%;
	height: 100%;
	/* max-height: 150px; */
	display: block;
}

/* Avril 2026 - catalogue produits */
ul.produits .qte {
	display: block;
}
ul.produits  li {
	padding-bottom: 0.8em;
}
ul.produits .periode::before {
	content: "› ";
}
ul.produits .periode {
	color: var(--c3);
}

/* !!--› tablet + smartphone -  EN DESSOUS DE 1024  */
@media screen and (max-width: 1023px){
	#panier {height: 11em}
	#fermePeda {height: 11em;background-position: center 30%;}
	#autonomie {height: 11em;background-position: center 30%;}
	#catalogue {background-position: 50% 50%;}
}

@media screen and (min-width: 1408px){
	.races-de-poules {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 1.5em;
	}
}
/* 1024 à 1080  */
@media screen and (min-width: 1024px) and (max-width: 1407px){
	.races-de-poules {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5em;
	}
}
/* 512 à 1024  */
@media screen and (min-width: 512px) and (max-width: 1023px){
	.races-de-poules {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5em;
	}
}
/* inférieur à 512  */
@media screen and (max-width: 511px){
	.races-de-poules {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 1.5em;
	}
}

.bgp-30-top {
	background-position: 20% top;
}
.bgp-center-30 {
	background-position: center 30%;
}

.dtable{
	display: table;
	width: 100%;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}
.manon-home {
	background-image: url(/img/manon-300.jpg);
	border-radius: 50%;
	rotate: -30deg;
}
.manon-float {
	float: left;
	shape-outside: margin-box;
	max-width: 250px;
	margin: 2em 3em 1em 0;
	width: calc(100vw * 0.3);
	min-width: 150px;
}
.couleurs-home {
	background-image: url(/img/combinaison-couleurs-oeufs-de-poules-300.jpg);
	border-radius: 50%;
}
.couleurs-float {
	float: right;
	shape-outside: margin-box;
	width: calc(100vw * 0.3);
	max-width: 250px;
	min-width: 150px;
	margin: 0em 2em 1em 2em;
}


/* slider-modal.css */
@media screen and (pointer: fine) {.sbmTmpScroll::-webkit-scrollbar {display: none !important}.sbmTmpScroll {-ms-overflow-style: none !important;scrollbar-width: none !important}}
.myCloseButton,
.myPrevNext {
	opacity: .7;
	position: absolute
}
.slider {
	overflow: auto;
	background-color: var(--c1);
	display: flex
}
.slider .thumbs {
	display: flex;
	gap: .5em;
	flex-flow: row nowrap;
	margin: auto
}
.slider a {
	display: block;
	flex: 0 0 200px
}
.slider canvas {
	display: block;
	width: 100%
}
.myOverlay {
	touch-action: none;
	color: #eee;
	background-color: #222
}
.myCloseButton, .myPrevNext, .sboxLeftRight {
	cursor: pointer;
	z-index: 2;
	color: #fff
}
.myTrack .thumb.light::after,
.sboxLeftRight {
	background-color: var(--c32)
}
.myCloseButton {
	width: 4.5em;
	inset: 0.5em 0.5em auto auto;
	border-radius: 50%;
	padding: .5em
}
.myCloseButton:focus,
.myCloseButton:hover {
	opacity: 1;
	background-color: #919090d1
}
.myPrevNext {
	width: 6em;
	bottom: 0
}
.myPrevNext>svg {
	position: absolute;
	width: 4.5em;
	bottom: 1em;
	left: inherit;
	right: inherit;
	margin: .5em
}
.myPrevButton {
	top: 0;
	left: 0;
	padding: 0 1em
}
.myNextButton {
	top: 6em;
	right: 0;
	padding: 0 1em 6em
}
.myNextButton:hover, .myPrevButton:hover, .sboxLeftButton:hover, .sboxRightButton:hover {
	opacity: 1
}
.slider-parent {
	padding: 1.5em;
	position: relative
}
.sboxLeftRight {
	position: absolute;
	bottom: 2em;
	opacity: .8;
	width: 3em;
	border-radius: 50%
}
.sboxLeftButton {
	left: .5em
}
.sboxRightButton {
	right: .5em
}
.myTrack .thumb.x {
	bottom: -10px
}
.lb-modalCoreMid.arroundSlides {
	overflow: hidden
}
.mySlide, .nextSlide, .prevSlide {
	position: absolute;
	overflow: hidden;
	display: flex;
	top: 0;
	width: 100%;
	height: 100%;
	padding: .5em
}
.prevSlide {
	left: -100%
}
.mySlide {
	left: 0
}
.nextSlide {
	left: 100%
}
.myMedia {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	margin: auto
}