@charset "UTF-8";
/* CSS Document */


@font-face {
    font-family: 'Avenir Regular';
    src: url('../font/avenirltstd-book-webfont.woff2') format('woff2'),
         url('../font/avenirltstd-book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: 'Avenir Bold';
    src: url('../font/avenirltstd-heavy-webfont.woff2') format('woff2'),
         url('../font/avenirltstd-heavy-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: 'Avenir Italic';
    src: url('../font/avenirltstd-bookoblique-webfont.woff2') format('woff2'),
         url('../font/avenirltstd-bookoblique-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
	font-display: swap;

}


@font-face {
    font-family: 'Geller Sans Narrow Test';
    src: url('../GellerSansNarrowTest-Heavy.woff2') format('woff2'),
        url('../GellerSansNarrowTest-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}






body {
	font-family: Avenir Regular, "Helvetica Neue", Helvetica, "sans-serif";
	color: #333335;
	 word-break:normal;
 -webkit-hyphens: normal;
 -moz-hyphens: normal;
 -ms-hyphens: normal;
 -o-hyphens: normal;
 hyphens: normal;
background-color: #fff;
}

img { max-width: 100%; object-fit: cover; }

a { color: #cb222a; text-decoration: none; }

a:hover { text-decoration: underline; }

p { font-size: 15px; line-height: 26px; }

#fiche p { font-size: 16px; line-height: 30px; }

b { font-family: Avenir Bold, "Helvetica Neue", Helvetica, "sans-serif"; }

h1 {
	font-size: 15px;
	text-transform: uppercase;
	font-family: Avenir Bold, "Helvetica Neue", Helvetica, "sans-serif";
}


h2 {
	font-size: 50px;
	margin: 20px auto;
	font-family: Avenir Bold, "Helvetica Neue", Helvetica, "sans-serif";
}

h3 {
	font-size: 15px;
	text-transform: uppercase;
	font-family: Avenir Bold, "Helvetica Neue", Helvetica, "sans-serif";
}

.article h3 { letter-spacing: 1px; }

h4 {
	font-size: 30px;
	margin-bottom: 20px;
	margin-top: 20px;
	font-family: Avenir Bold, "Helvetica Neue", Helvetica, "sans-serif";
}


ul { font-size: 15px; line-height: 26px; }

li { line-height: 26px; }

sup { font-size: 17px; }


nav 
{
	background: transparent;
	font-family: Avenir Bold, "Helvetica Neue", Helvetica, "sans-serif";
	/* border-bottom: 1px solid #f1f1f1; */
}
 

nav .menu-desktop 
{
	height: 100px;
	margin: 0 auto;
    display: flex;
	max-width: 1400px;

}

nav .menu-desktop a 
{
	color: #333335;
	margin-right: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
	line-height: 120px;
    text-decoration: none;
}

#button-order {
margin-right: 0;
}
 
nav a:hover 
{ color: #D6373E;  }


.logo-frans { margin-right: 20px; }

.order {
	border: 1.5px solid #D6373E;
	padding: 12px 20px 10px 20px;
	border-radius: 20px;
	color: #FFF;
	text-transform: uppercase;
	background-color: #D6373E;
	font-family: Avenir Bold, "Helvetica Neue", Helvetica, "sans-serif";
	font-size: 14px;
	
}

.order:hover
{
	opacity: 0.5;
	text-decoration: none !important;
}




.order-white {
	border: 1px solid #FFF;
	padding: 12px 20px 10px 20px;
	border-radius: 20px;
	color: #FFF;
	text-transform: uppercase;
	background-color: transparent;
	font-family: Avenir Regular, "Helvetica Neue", Helvetica, "sans-serif";
	font-size: 14px;
}

.order-white:hover
{
	cursor: pointer;
	opacity: 0.5;
}


.order-black {
	border: 1px solid #333335;
	padding: 12px 20px 10px 20px;
	border-radius: 20px;
	color: #333335;
	background-color: transparent;
	font-family: Avenir Regular, "Helvetica Neue", Helvetica, "sans-serif";
	font-size: 16px;
}

.order-black:hover
{
	border: 1px solid #333335;
	color: antiquewhite;
	background-color: #333335;
}



.goto {
	border: 1px solid #D6373E;

	border-radius: 20px;
	color: #D6373E;
	background-color: #D6373E;
	font-family: Avenir Bold, "Helvetica Neue", Helvetica, "sans-serif";
	font-size: 14px;
}



/* Début Menu Mobile 2.0 */

.nav-mobile { display: none; }
.header-mobile-only { display: none; }

header a { font-family: Avenir Regular, "Helvetica Neue", Helvetica, "sans-serif"; color: #333335; text-decoration: none; line-height: 35px; font-size: 20px; }
header a:hover { text-decoration: none; }

.nav-mobile .logo-frans { padding: 15px 20px 0 15px; clear: both; }
.menu-mobile { float: right; padding: 15px 20px 0 20px; }


#burger {
  width:30px;
  height:2px;
  background: #333335;
  display:inline-block;
  position:relative;
}

#burger::before,
#burger::after {
  content:'';
  width:30px;
  height:2px;
  background: #333335;
  display:inline-block;
  position:absolute;
  transform-origin: center;
  transition: all 0.3s ease;
}

#burger::before {
  top:-7px;
}
#burger::after {
  top:7px;
}
#burger.open {
  background:transparent;
}
#burger.open::before {
  transform: rotate(45deg);
  top: 0;
}
#burger.open::after {
  transform: rotate(-45deg);
  top: 0;
}

header {
  position:relative;
  width:100%;
	
}
header ul {
  position:absolute;
  width:100%;
  left:0;
  top:100%;
  padding:20px 0 30px 20px;
  margin-top: 85px;
  transform:scaleY(0);
  transform-origin:center top;
  transition:all 0.3s ease;
  list-style-type: none;
  border-top: 1px solid #dadada;
  box-sizing: border-box;
}

header ul.open {
  transform:scaleY(1);
	background-color: #fff;
box-shadow: 0px 4px 5px 0px rgba(51,51,53,0.5);
-webkit-box-shadow: 0px 4px 5px 0px rgba(51,51,53,0.5);
-moz-box-shadow: 0px 4px 5px 0px rgba(51,51,53,0.5);
}

header ul li {
  padding: 10px 0;
  text-align: left;
}

/* Fin Menu Mobile 2.0 */


/* Tableau */

.sapin table {
    border-collapse: collapse; /* Les bordures du tableau seront collées */
	margin: 50px auto 30px auto;
}

.sapin td, th { border: 1px solid #006240; padding: 5px; }


.sapin th { background-color: #58A55C; color: #FCFFF5; padding: 15px; }

/* Fin de Tableau */


/* Blocks responsive */

.card {
	max-width: 1400px;
	text-align: center;
	margin: 10px 0 0 0;
	clear: both;
	content: "";
  display: table;

}

#centre {margin: auto 20px; }

.card3 { 
	width: 31%;
	float: left;
	padding: 8% 3% 5% 3%;
	box-sizing: border-box;
	border: 0.6px solid #333335;
	border-radius: 40px;
	height: 400px;
}


#centre .order { margin-top: 26px; }


.blocks {
	max-width: 1400px;
	display: flex; /* equal height of the children */
	text-align: center;
	margin: 25px auto 0 auto;
	clear: both;
}

.blocks p { font-size: 22px; line-height: 34px; }

.block-text {
	width: 50%;
	float: left;
	padding: 10% 5%;
	box-sizing: border-box;
}

.block-img {
	width: 50%;
	float: left;
	object-fit: contain;
	display: flex; /* equal height of the children */
}

.block-large {
	max-width: 1400px;;
	text-align: center;
padding: 30px;
	box-sizing: border-box;
	margin: 30px auto 0 auto;
	clear: both;
}

.block-large p { font-size: 20px; line-height: 32px; }

.block-large h2 { font-size: 30px; }

.block-header-mobile { display: none; }







/* Carousel Home */

.slider {
	max-width: 1400px;
	text-align: center;
	margin: 30px auto;
	background-color: #d9e6e1;
	color: #243832;
	
  height: 550px;
	
	
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}


.slider__nav {
  width: 16px;
  height: 16px;
  margin: 2rem 16px;
  border-radius: 50%;
  z-index: 10;
  outline: 8px solid #FFF;
  outline-offset: -8px;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.slider__nav:hover { outline: 8px solid #243832; }

.slider__nav:checked { outline: 8px solid #243832; }

.slider__nav:checked:nth-of-type(1) ~ .slider__inner {
  left: 0%;
}
.slider__nav:checked:nth-of-type(2) ~ .slider__inner {
  left: -100%;
}
.slider__nav:checked:nth-of-type(3) ~ .slider__inner {
  left: -200%;
}
.slider__nav:checked:nth-of-type(4) ~ .slider__inner {
  left: -300%;
}
.slider__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
	
  height: 550px;
	
	
  -webkit-transition: left 0.4s;
  transition: left 0.4s;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
}


.slider__inner p { font-family: Avenir Italic, "Helvetica Neue", Helvetica, "sans-serif"; font-size: 25px; line-height: 35px; }


.slider__contents {
	
  padding: 30px 300px 80px 300px;
  box-sizing: border-box;
  width: 20%;
  transition: 2s;
	
  height: 550px;
	
	
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-flex-flow: column nowrap;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@-webkit-keyframes check {
  50% {
    outline-color: #333;
    box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
  }
  100% {
    outline-color: #333;
    box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  }
}

@keyframes check {
  50% {
    outline-color: #333;
    box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
  }
  100% {
    outline-color: #333;
    box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  }
}


/* Fin Carousel */


/* The Breakfast club ------------------------------------------------------------------ */


/* Container des colonnes */
.container {
  display: flex;
  justify-content: center;
  gap: 20px; /* espace entre les colonnes */
  flex-wrap: wrap; /* permet le passage à la ligne sur mobile */
  max-width: 1200px;
	margin: 0 auto;
  width: 90%;
}

/* Colonnes */
.column {
	background-color: #d9e6e1;
	border-radius: 30px;
  	padding: 20px;
  	flex: 1 1 300px; /* min 300px, s’adapte au reste */
	text-align: center;
}

/* Responsive : sur petits écrans, les colonnes passent en pile */
@media (max-width: 900px) {
  	.container {
    /* flex-direction: column; */
    align-items: center;
		padding: 0;
  }

  .column {
    width: 100%;
    max-width: 500px;
  }
}

/* Fin The Breakfast club */



/* FAQ ------------------------------------------------------------------------------ */

.faq{
    width:100%;
    max-width:800px;
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
	margin: 50px auto;
  }

  .faq p.subtitle{
    color:var(--muted);
    margin-bottom:24px;
  }

  details{
    border-radius:var(--radius);
    background:#fff;
    margin-bottom:10px;
    border:1px solid #e5e7eb;
    box-shadow:0 1px 2px rgba(0,0,0,0.03);
    transition:box-shadow .2s ease, transform .15s ease;
  }

  details:hover{
    box-shadow:0 2px 6px rgba(0,0,0,0.06);
    transform:translateY(-1px);
  }

  summary{
    list-style:none;
    cursor:pointer;
    padding:16px 20px;
    font-weight:700;
	font-size: 1.1250em;
    color:var(--text);
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  /* Supprime la flèche par défaut */
  summary::-webkit-details-marker {
    display:none;
  }

  /* flèche personnalisée */
  summary::after{
    content:"";
    width:10px;
    height:10px;
    border-right:2px solid var(--accent);
    border-bottom:2px solid var(--accent);
    transform:rotate(45deg);
    transition:transform .2s ease;
  }

  /* flèche orientée vers le bas quand ouvert */
  details[open] summary::after{
    transform:rotate(225deg);
  }

  details[open] summary{
    border-bottom:1px solid #e5e7eb;
  }

  details p{
    padding:16px 20px 20px 20px;
    color:var(--muted);
    line-height:1.5;
    margin:0;
  }

  @media (max-width:600px){
    .faq{ }
    summary{ font-size:1rem; }
  }

/* FIN FAQ ------------------------------------------------------------------------------ */




/* Page Hello (linketree) */

.menu-btn {
 width: 100%;
  background-color: #c6212a;
  color: white;
  border: none;
  border-radius: 50px; /* coins très arrondis */
  padding: 10px 30px 20px 30px;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  line-height: 10px;
}

.menu-btn strong {
  font-size: 18px;
  font-weight: 700;
  display: block;
}

.menu-btn span {
  font-size: 14px;
  font-weight: 400;
}

.menu-btn-blk {
	border: 1px solid #333335;
	color: #333335;
	
	width: 100%;
  background-color: #fdf3d5;
  border-radius: 50px; /* coins très arrondis */
  padding: 15px 30px 20px 30px;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  line-height: 10px;
		
}


.menu-btn:hover {
  background-color: #A22F2A; /* légère variation au survol */
  transition: background-color 0.3s ease;
}




/* Article (Notre histoire, FAQ, etc.) */

.header-article { max-width: 720px; margin: 20px auto 30px auto; }
.article { max-width: 720px; margin: 20px auto 30px auto; clear: both; background-color: #fff; }

.steps { 
	width: 50%;
}

/* Catégories de produits */

.menu { clear: both; max-width: 1200px; margin: 100px auto 0 auto; }

.menu .content { margin-bottom: 100px; }

.menu .content-img { 
	width: 20%;
	float: left;
	margin-right: 30px; 
}

.menu img { border-radius: 20%; }

.menu .content-text {
	float: left;
	width: 65%;
	margin-bottom: 60px;
}

.price {
	background-color: #D6373E;
	border-radius: 25px;
	color: #FFF;
	text-align: center;
	width: 50px;
	padding: 8px 8px 5px 8px;
	float: left;
	margin-right: 12px;
	font-size: 15px;
}

.price:hover
{
	cursor: pointer;
	opacity: 0.5;
}

.price-member {
	color: #D6373E;
	line-height: 40px;
	font-size: 13px;
}


.tftable { width:100%; border-width: 1px; border-color: #FFF; border-collapse: collapse; }
.tftable th { border-width: 1px; padding: 8px 8px 8px 0; border-style: solid; border-color: #FFF; text-align:left; }
.tftable td { border-width: 1px; padding: 8px 8px 8px 0; border-style: solid; border-color: #FFF; }
.right { text-align: right; }


.contener-location { height: 320px; }
.colonne-img { float: left; width: 300px; margin-right: 30px; margin-bottom: 20px; display: block; }


/* Footer */

footer {
	max-width: 1000px;
	clear: both;
	margin: 60px auto 0 auto;
	padding-top: 10px;
	color: #333335;
	border-top: 1px solid #f1f1f1;
	background-color: #fff;
}

footer a { color: #333335; text-decoration: none; line-height: 30px; font-size: 14px; }

footer a:hover { color: #cb222a; text-decoration: none; }

footer h3 {
	text-align: left;
}

footer ul { 
	list-style-type: none;
	line-height: 30px;
	margin-left:0;
	padding-left:0;
	text-align: left;
}

.cardsfooter {
  max-width: 1200px;
  margin: 0 auto 10px auto;
  display: grid;
  grid-gap: 1rem;
}

.card {
  height: auto;
  text-align: center;
}

footer .card {
	padding: 5px 0px;
}


.fin { 	clear: both; height: 70px; }
.fin p { line-height: 70px; font-size: 13px; }



/* Tous les devices plus petits que 1440px
==================================================   */

@media all and (max-width: 1399px) {
	
	nav .menu-desktop { padding: 0 50px; }
	
	.blocks { padding: 0 30px; }
	.menu { padding: 0 30px; }
		
	.slider__contents { padding: 30px 100px 80px 100px; }
	
}
	
	

/* Tous les devices plus petits que 990px (tablette)
==================================================   */

@media all and (max-width: 950px) {
			
	 nav { border: none; }		
	.nav-desktop { display: none; }
	.nav-mobile { display: contents; }
	.header-mobile-only { display: contents; }
    .menu-mobile { float: right; margin-top: 12px; height: 60px; }
	.logo-frans { float: left; width: 100px; }
	
	.blocks { display: inline-block; margin: 0 auto 20px auto; padding: 0; }
	.block-text { width: 100%; padding: 40px 20px 50px 20px; box-sizing: border-box; }
	.block-text-small { width: 100%; padding: 40px 20px 50px 20px; box-sizing: border-box; }
	.block-img { width: 100%; }
	.block-large { margin: 0 auto 10px auto; padding: 20px; }
	
	.block-xlarge { width: 100%; padding: 1px 20px; }	
	
	.colonne-img { width: 100%; }

	 h2 { font-family: Avenir Bold, "Helvetica Neue", Helvetica, "sans-serif"; font-size: 35px; letter-spacing: -1px; }

	.menu { padding: 20px; }
	.menu .content-img { width: 50%; }
	.menu .content-text { width: 100%; margin-bottom: 50px; }
	
	div.image-fiche { display: none; }
	
	.header-article { clear: both; }

	

	
	.slider__inner p { font-family: Avenir Italic, "Helvetica Neue", Helvetica, "sans-serif"; font-size: 22px; line-height: 34px; }

	.block-large h2 { font-family: Avenir Bold, "Helvetica Neue", Helvetica, "sans-serif";, "Helvetica Neue", Helvetica, "sans-serif"; }
	
	
	.cardsfooter { grid-template-columns: repeat(2, 2fr); padding : 0 20px; }
	.fin { padding : 0 20px; }
	.article { padding : 0 20px; }
	.header-article { margin: 0 auto; }

	
	.menu-mobile { float: right; margin-top: 12px; }
	
	.main { max-width: 90%; }
	div.texte-fiche { width: 100%; }
	div.image-fiche { width: 100%; }
	
	.menu { margin: 10px auto 0 auto; }
	
	.steps { text-align: left; width: 100%; margin: 30px auto 50px auto; }
	
	
	.card3 { width: 100%; margin: 0 auto 30px auto; padding: 10% 3%; height: auto; box-sizing: border-box; }
		
	
	
	#centre {margin: 0 auto 30px auto;}
	
	#centre .order { margin-top: 0; }
	
.contener-location { height: 100%; }
.colonne-img { width: 100%; }
	
}

/* Tous les devices plus petits que 600px (tablette)
==================================================   */

@media (min-width: 600px) {
		
 	.cards4 { grid-template-columns: repeat(4, 1fr); }
	.cardsfooter { grid-template-columns: repeat(4, 1fr); }


	
	
}
	


/* Tous les devices plus petits que 800px (mobile)
==================================================   */

@media only screen and (max-width: 800px) {
	
	
	.block-large {
	padding: 10px 0 20px 0;
	  box-sizing: border-box;
}

	
	.texte-article { width: 100%; display: block; }
	.image-article { max-width: 100%; display: block; }

	
	h3 { margin-bottom: 0; }
	div.texte-article { width: 100%; display: block; }
	div.image-article { width: 100%; display: block; }
	.texte-article p { margin-bottom: 30px; display: block; }

	
	.introduction {
		letter-spacing: 0;
}
	
	footer {
	margin: 20px auto 0 auto;}
	
	
	.slider { height: 700px; }
.slider__inner { top: 30px; }
.slider__contents { padding: 30px 20px; box-sizing: border-box; }
	

}