@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root{

	--noir:#000;
	--grisc:#CCC;
	--gris:#777;
	--blanc:#FFF;
	--radius:30px;
}

/* 
Palette “Coucher de soleil & nature”
*/
:root{
	--color1:#b75c34;           /* Terre cuivrée - accent principal */
	--color2:#f8b84e;           /* Doré soleil - secondaire / boutons */
	--color3:#e97f5c;           /* Orange doux - touche chaleur / contrastes */
}


/* 
Palette “Étoiles & bivouac nocturne”
Bleu nuit profond: #130c4d 
Vert doux nature sérénité : #8dc0a9 
Doré sable rappel des tentes et lumière chaude: #d3a869 

*/
:root{
	--color1:#130c4d;           
	--color11:rgb(30 42 71 / 50%);
	--color12:rgb(30 42 71 / 30%);
	--color13:rgb(30 42 71 / 10%);
	--color2:#8dc0a9;
	--color21:rgb(141 192 169 / 50%);
	--color3:#d3a869;
	--color31:rgb(211 168 105 / 50%);

}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} /*-end normalize-*/

html{
	scroll-behavior:smooth;
}
body{
	font-size:16px;
	line-height:1.5em;
	background:var(--blanc);
	color:#222;
}

/* fonts */
.montserrat-titre, h1, h2, h3 {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}
.montserrat-sstitre, h1 span {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: italic;
  font-style: normal;
}
.montserrat, body {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

h1,h2,h3,h4{line-height:1em;}
h2,h3,h4{color:var(--color1);}

h1 {font-size:2.6rem;margin-top:150px;}
h1 span {
    font-size: 1.4rem;
    line-height: 1em;
    margin-top: 2em;
    display: inline-block;
}

h2 {font-size:1.4em;position:relative;padding-bottom:0.3em;}
h3 {font-size:1.2em;}
h3.gris {font-size:1.4em; text-align:center; font-weight:bold;color:var(--grisc);}
h4 {font-size:1em;}

h1,h2,h3{text-align:center;}

hr {display:none;}

.content h2 {
    font-size: 1.6em;
    letter-spacing: 0.5px;
    color: var(--color1);
    text-align: center;
    margin-top: 1.8em;
    margin-bottom: 0.8em;
    position: relative;
}
.content h2::after {
    content: "";
    width: 80px;
    height: 3px;
    background: var(--color2);
    display: block;
    margin: 0.5em auto;
    border-radius: 3px;
}



.bg1{background:var(--color1);}
.bg2{background:var(--color2);}
/*
h1{background:#f5f5f4;color:#222;}
*/
.bg-light{background: var(--color3);}
.radius{border-radius:var(--radius);}
strong{font-weight:bold;}
section:not(.bgcolor) .content strong {color:var(--color1);}
/*
#intro p strong, #experience p strong, #formules p strong, 
#options p strong, #valeurs p strong, #contact p strong, #seo p strong {
    color: var(--color3);
    font-weight: bold;
}*/
.italic{font-style:italic;}
/* 
a,a:link, a:visited{text-decoration:none;color:#e00a1d;color:var(--color1);}
*/
a{text-decoration:none;color:#e00a1d;color:var(--color2); }
a{ 
	
}

.content a:not(.btn, .card, .card-link){
	text-decoration:underline;
	 text-underline-offset: 2px;
	color: var(--color3);
    font-weight: bold;
}
.content a:not(.btn, .card, .card-link):hover {
    color: var(--color2);
}


ul{}
ol{}
ul li, ol li{margin : 0.6em;}
ol li::marker{font-weight:bold;}
ul.listeok li{
	background: url(../img/ok.svg) no-repeat 5px 3px;
	background-size: 20px;
    list-style-type: none;
    margin: 1.2em 0.6em;
    padding-left: 30px;
}

li{line-height:1.6em;}
p{ font-size:1em; line-height:1.6em;}
blockquote{color:#666;border-left:3px solid #FBFBFB;padding-left:1em;}
.center{text-align:center;}
.center-all{display:flex;justify-content:center;align-items:center;}
.center-v-all{display:flex;align-items:center;}
.left{text-align:left;}
.right{text-align:right;}
.justify{text-align:justify;}

.black{color:var(--noir);}
.white{color:var(--blanc);}
.red{color:red;}
.container{max-width:1200px;margin:0 auto; padding:1em;}

.container.bordure{margin:1em auto; padding:2em; border:1px solid #999;}

/* ----- */
.hide{display:none;}
.content {position:relative;}
.padd{padding:0.5em 0.5em 1em 0.5em;}
.padd-no-top{padding:0 0.5em 1em 0.5em;}
.padd-no-bottom{padding:0.6em 0.5em 0 0.5em;}
.marg-top{margin-top:4em;}

/* --- boutons --- */
.btn{
	padding:0.6em 1em; 
	color:var(--blanc); 
	background-color:var(--noir);
	display:inline-block;
	margin:0.3em;
	border-radius:var(--radius);
	font-size:1.15em;
}
.btn-on-primary{
	background-color:var(--color1);
	color:var(--blanc);	
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: bold;
    padding: 0.8em 1.5em;
    transition: all 0.3s ease-in-out;
}

.btn-on-primary:hover,
.btn-on-primary:active,
.btn-on-primary:focus{
	background-color:var(--blanc);
	color:var(--color1);
    box-shadow: 0 0 10px var(--color21);
}


.btn-primary{background-color:var(--color1);color:var(--color2);}
.btn-primary:hover,
.btn-primary:active{background-color:var(--color2);color:var(--color1);}

.btn-secondary{background-color:var(--color2);color:var(--color1);}
.btn-secondary:hover,
.btn-secondary:active{background-color:var(--color1);color:var(--color2);}

.color1 {color:var(--color1);}
.color2 {color:var(--color2);}


.img{max-width:100%;height:auto;vertical-align:middle;}
.img-resp{width:100%;}

.titre {background:rgba(0,0,0,0.3);}
.titre-ss-img {background:rgba(0,0,0,0);}
.maxheight{max-height:480px;overflow:hidden;}
.pointer {cursor:pointer;}
.shadow {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

/*table*/
table{
	border-collapse:collapse; border-spacing: 0px;margin:auto;
	overflow-x:auto;
}
caption {caption-side: bottom; font-size:0.8em; color:#999;}
tr{}
th{background:#EEE;}
th,td{padding:0.5em;border:1px solid #CCC;margin:0;}
th{font-weight:bold;}


.center{text-align:center;}
header#header{

    position: absolute;
    position: relative;
    width: 100%;
    z-index: 10;
}

#typed{min-height:200px;}
#contenu{padding-bottom:80px;}



/* logo et nav */

.top{
	position:relative;
	position:absolute;
	width:100%;
	z-index:10;z-index:1;padding:0;text-align:center;
}

/*
.top{display:flex; flex-direction:center;flex-wrap:wrap; justify-content: center; align-content:center;}
.top >*{flex-grow:1;margin:0em;}
*/

/*--logo--*/
.logo-container{
	margin:1em;
	position:relative;
}
img.img.logo {max-width:200px;}

a.logo-link{color:var(--color1);}
div.logo-text-container{font-weight:bold;}
div.logo-text-container .logo-text{font-size:1.2em;}
div.logo-text-container .logo-text-slogan{font-size:0.9em;}

.tel-container{
	position:relative;
	margin:0;
	font-size:1.2em;
}
.btn svg{vertical-align:bottom;}
.tel-container a{color:var(--blanc);background:var(--color1);}
#header .reseaux {background:var(--color2);}
#header .reseaux svg *{}
footer svg *{}


.noir{background:var(--noir);}

nav ul{list-style:none; margin:0; padding-left:0;}	
nav ul a,
nav ul a:link,
nav ul a:visited{color:rgba(255,255,255,0.9);}
.menu-symbole {
	position:absolute; top:1.2em; right:1.2em; z-index:10;
	margin-left:0.7em;	
}
.menu-open {opacity:1; }
/*.menu-close{ position:absolute; top:1.5em; right:1.5em; z-index:10;}*/
.menu-symbole svg {width:40px;height:40px; }
.menu-symbole svg *{
	fill:var(--color1);
	fill:#FFF;
}
#sidebar{height:0%;}
#sidebar.visible{height:100%;}
#sidebar {text-align:center;}
#sidebar svg {max-width:40px;}
#sidebar svg *{ fill:var(--color2);}
#sidebar .menu-symbole svg *{ fill:#FFF;fill:var(--color2);}
#sidebar svg:hover *,#sidebar svg:active ,#sidebar svg:focus *{fill:#FFF;}

@media screen and (max-width: 79999px) {
	#sidebar{
		z-index:100;position:fixed; 
		background:var(--color1);
		overflow-x: hidden; 
		transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay */
	}
	#sidebar{ top:0; left:auto; right:0; width: 50%; }
	#sidebar{ top:0; left:0; height: 0; width: 100%; }
	#sidebar .in {position:relative;max-width:1000px;margin:30px auto;}

	#sidebar ul{ padding:0;text-align:center;margin-top:5%;}
	#sidebar li a{line-height:2em; font-size:1.5em; color:var(--blanc); text-decoration:none;}

}
#sidebar li a:hover, #sidebar li a:active{color:var(--color2);}

@media screen and (min-width: 8000px) {
	.menu-symbole{display:none;}
	#sidebar,
	#sidebar ul,
	#sidebar ul li {display:inline-block;}
	#sidebar ul li a {display:inline-block;margin-left:0.4em;padding:0.4em;border:0px solid #EEE;}

}

@keyframes slidein {
  from {
    top: -100%;
  }
  to {
    top: 0%;
  }
}

/*progress-bar scroll */
.progress-container {
  width: 100%;
  height: 6px;
  background: rgba(0,0,0,0.1);
  position:absolute;
  bottom:0;
  position:fixed;
  top:0;
}
.progress-bar {
  height: 6px;
  background: var(--color1);
  width: 0%;
}



/* background image entete */
.background-image-container{
    position: relative;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0;
	color:var(--blanc);
	min-height:450px;
	/*
	clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 50% 110%, 0% 90%);
	*/

}
#page-accueil .background-image-container{	min-height:550px; }
.over-img {
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	left:0;
	background-image:linear-gradient(180deg,rgb(0 0 0 / 60%),rgb(0 0 0 / 50%),rgb(0 0 0 / 20%));
}
.over-img .in{
	padding: 70px 30px 50px 30px;
	padding: 20px 40px;
	margin:1em;
}
.center{text-align:center;}

/* contenu */


.small{font-size:0.9em;}

.contact svg *{stroke:var(--color1) !important;}
.contact .svg-fill svg *{fill:var(--color1) !important;}

/*--footer--*/
footer{
	min-height: 200px;
    padding: 1em;
    padding-top: 2em;
    background: #164755;
	background:var(--color1);
	color:var(--blanc);
    color: #FFF;
}
footer h4.font-dot {font-size:2rem;font-weight:bold;}
footer a,footer a:link,footer a:visited{color:var(--blanc);}
footer a:hover,footer a:active{color:var(--color2);}

footer a.btn-secondary{background-color:var(--color2);color:var(--color1);}
footer a.btn-secondary:hover,
footer a.btn-secondary:active{background-color:var(--blanc); color:var(--color2);}


#logo-footer {font-weight:bold;}
#logo-footer .logo-text{font-size:1.2em;}
#logo-footer .logo-text-slogan{font-size:0.9em;}
#logo-footer {}
footer svg *{fill:var(--blanc);}
footer svg:hover *,footer svg:active ,footer svg:focus *{fill:var(--color2);}



/* ----- Formations ----- */
.formation-alternance{}
.item-formation{}
.item-formation a.card{
	background:var(--color1);color:#FFF;
	background: var(--color1);
    color: #FFF ;
    border: 0px solid blue;
    display: block;
	padding:0.7em;
	margin:0.7em;
	border-top-left-radius:var(--radius);
}
.item-formation a.card h3{
    color: #FFF ;
}
.item-formation a.card:hover,
.item-formation a.card:active,
.item-formation a.card:focus{
	background: var(--color2);
}

/* ----- Menu pages ----- */
.menu-pages {}
.menu-pages .item-page{display:block; border:0px solid var(--color2);position:relative;}
.menu-pages .item-page a{}
.menu-pages .conteneur-txt,.menu-pages .conteneur-img{width:100%; height:250px; }
.menu-pages .conteneur-txt{
	position:absolute;
	top:0;bottom:0;left:0;right:0;
	display:flex; 
	justify-content: center;
    align-items: center;
	background: rgb(0, 0, 0, 0.6);
    color: #FFF;
    font-size: 1.2em;
    text-align: center;
}
.menu-pages .conteneur-img img{	object-fit:contain;
	object-fit:cover;
	object-position: center center;
	width:100%;
	height:100%;
}
.menu-pages .item-page a:hover .conteneur-txt, 
.menu-pages .item-page a:focus .conteneur-txt, 
.menu-pages .item-page a:active .conteneur-txt{
	background: rgb(0, 0, 0, 0.4);
}

.logos-partenaires{flex-wrap:wrap;}
.logos-partenaires img{margin:0.5em;max-width:33%;}


/* ----- Contact form  ----- */

form, .contact-form-msg{background:var(--color1);color:var(--blanc);}
form {
	max-width:800px;
	margin:auto;
	background:var(--color1);
	color:var(--blanc);
}
form label,
form input, 
form textarea,
form .checks,
form .radios{
	display:block; 
	min-height:1.5em;
	margin:auto;
	width:80%;
}
form label, 
form .checks .label,
form .radios .label {
	margin-top:1.5em;
	color:var(--blanc);
	text-align:center;
}
form input, form textarea {
	padding:0.8rem;
	margin-bottom:0.5rem;
	background:rgba(255,255,255,0.8);
}
form input[type=submit]{
	width:auto;
	margin-top:1em;
	padding:1rem;
	color:var(--blanc);
	border-radius:0.3em;
	background:var(--color2);
}
form input[type=submit]:hover, form input[type=submit]:active{
	color:var(--blanc);
}
form .checks div label,
form .radios div label{
	width:auto;	
	display:inline-block; 
	margin-top:0.5em;
	vertical-align:text-bottom;
}
form .checks div input,
form .radios div input{
	display:inline-block;
	width:30px;
}
form .form-action{
	text-align:center;
}
form .email{
	display:none;
}
form .error{
	color:red;
	background:rgba(255,255,255,0.5);
}



/* ----- flex & media q ----- */
.flex-container{display:flex;flex-wrap:wrap; justify-content: center; align-content:center;flex-direction: row;}
@media screen and (max-width: 779px) {
	.no-mob{display:none !important;}
	.flex-container-25 > div{max-width:46%;margin:2%;}
	.flex-container-33 > div{max-width:48%;margin:1%;}
}
@media screen and (max-width: 600px) {
	.flex-container-33 > div{max-width:98%;width:96%;margin:1em 2%;}
}
@media screen and (min-width: 780px) {
	.mob{display:none;}
	a.btn{padding:0.8em 1.3em;}
	/*
	.logo{max-width:200px;}
	h1 {font-size:3em;}
	*/
	
	.flex-container > div{flex-grow:1;margin:1%;padding:0;max-width:23%}
	.flex-container > div{flex-grow:1;margin:1%;padding:0;max-width:30%}
	.flex-container-33 > div{flex-grow:1;margin:1%;padding:0;max-width:30%}
	.flex-container-50 > div{max-width:48%;}
	.flex-container-25 > div{max-width:21%;margin:2%;}
	.padd{padding:1em 1em 2em 1em;}
	.padd-no-top{padding:0 1em 2em 1em;}
	.padd-no-bottom{padding:1em 1em 0 1em;}
}

/* avis */
section#avis{}
.avis-liste{
	background:var(--color2);
	border-bottom-right-radius:8px;
	box-shadow: 5px 5px 0px 0px rgba(141, 147, 195, 1);
	box-shadow: 4px 4px 0px 0px rgba(227, 120, 146, 1);
}
.avis{
	/*
	border-top:1px solid var(--color1);
	border-left:1px solid var(--color1);
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
	*/
	border-radius:1em;
	margin:0.5em auto;
	padding:1em;
}
.avis .auteur{color:var(--color3);}
.avis .msg{font-style:italic;}
.avis svg {float:right;margin:0 0 15px 15px;}
.avis svg *{fill:var(--color3);}

/* ----- Accueil - cards ----- */

.card-modele {
	display:grid;
	color:var(--gris);
	/*
	border:1px solid #EEE;
	box-shadow: -2px -2px 4px 0 rgba(0, 0, 0, 0.1);
	max-width: 90%;
	*/
	margin: auto;margin-top:1em;
	text-align: left;
}
.content-equipe{
	display:grid;
}
.content-equipe .entite{
	background:#FCFCFC;
	background:var(--color1);
	color:var(--blanc);
	padding:1em;
	border-top-left-radius:30px;
}
.modele-image {
	opacity:1;
	width:100%;
	height: auto;
	margin:auto;
	overflow:hidden;
	max-width:300px;
}
.modele-image img{
	padding:0;margin:0;
}
.modele-titre{margin-top:0.2em;}
.modele-resume{font-size:0.9em;}
.modele-tarif{font-size:0.9em;}
.modele-liens{display:flex; font-size:0.9em;margin-top:1em;}
.modele-liens a { display:flex; margin-right: 1em;}
.modele-liens a svg{margin-right:0.3em; opacity:0.5;}



.cards-liens {
	display:flex;
	flex-wrap:wrap; justify-content: center; align-content:center;flex-direction: row;
}

.cards-liens .card {width:300px;padding:1em;}
.cards-liens .card a {color:var(--gris);}
.cards-liens .card h3,
.cards-liens .card p {
	text-align:center;
	
	margin:0.2em auto;
}
.cards-liens .card .image {
    border-radius: 50%;
    width: 100%;
    background-size: cover;
    width: 100%;
    width: 200px;
    height: 200px;
    margin: auto;
}
a.card-ref {
	display:block;
	color:var(--gris);
	border:1px solid #EEE;
  /*
	box-shadow: -2px -2px 4px 0 rgba(0, 0, 0, 0.1);
  */

	max-width: 90%;
	margin: auto;margin-top:1.5em;
	text-align: left;
}
.ref-image {
	opacity:1;
	width:100%;
	height: auto;
	margin:auto;
	overflow:hidden;
}
.ref-image img{
	padding:0;margin:0;
}
.ref-resume{font-size:0.85em;}



.card:hover {background:#fbfbfb;}
.card:hover .ref-image{
	opacity:0.9;
}
	

/*------- faq --------*/
.faq-item{}
.faq-q{font-weight:bold;}
.faq-r{margin-top:0.5em;text-align:justify;}
/* -----------------------------------
   FAQ - Mise en forme
----------------------------------- */

.faq-item {
	margin: 2em 0;
	padding-bottom: 1.5em;
	border-bottom: 0px solid rgba(0,0,0,0.1);
}

.faq-item:last-child {
	border-bottom: none;
}

.faq-item h3 {
	font-size: 1.2em;
	color: var(--color1);
	margin-bottom: 0.6em;
	display: flex;
	align-items: center;
	gap: 0.5em;
	text-align:left;
}
/*
.faq-item h3::before {
	content: "❓"; 
	display: inline-block;
	font-size: 1.2em;
}
*/

.faq-item p {
	color: #333;
	line-height: 1.6em;
	margin: 0.2em 0;
}

/* Effet doux au survol (optionnel) */
.faq-item:hover h3 {
	color: var(--color2);
	transition: color 0.3s ease;
}

/* Responsive */
@media screen and (max-width: 768px) {
	.faq-item h3 {
		font-size: 1.1em;
	}
}


/*------- modeles --------*/
.infos-tarifs{background:#FCFCFC;padding:1.5em;}

/*------- entrepr --------*/
.partenaires a{
	text-decoration:normal;
	color:var(--color1);
}


/*------- services --------*/
.liste-services{
	/*
	display:flex;
	*/
	display:grid;
	grid-template-columns:40px auto;
}

.listetitre {
	border:0px solid #000;
	background:var(--color1);
 	text-align:center;
	transform: rotate(-180deg);
    writing-mode: vertical-lr;
   
}
.listetitre div{
	padding:5px;
}

/*------- fil inst --------*/

.fd-gris{background:#FCFCFC;padding-top:1.5em;padding-bottom:1.5em;}
.fd-gris{
	border-radius: 50px;
    margin-top: 30px ;
}
div.embed-img-inst{
	position:relative;
	display: inline-flex;
	width: 250px;
	height: 250px;
	overflow: hidden;
	justify-content: center;
	/* background: #eee; 
	*/
	margin: 0.5em;
	padding: 0.5em;
	border: 1px solid #EEE;
	border: 1px solid var(--color3);
	border: 1px solid var(--color2);
	max-width:250px !important;
}
div.embed-img-inst.lien{background:var(--color2);align-items:center;text-align:center;color:var(--color1);}
div.embed-img-inst.lien a{color:var(--color1);}
div.embed-img-inst.lien a.full{color:var(--color1);}

div.embed-img-inst.lien svg *{fill:var(--color1);}
div.embed-img-inst.lien svg:hover *{fill:var(--color3);}

div.embed-img-inst img{
	object-fit:contain;
	object-fit:cover;
	object-position: center center;
	width:100%;
	height:100%;
}
a.lien-insta{
	position:absolute;
	bottom:16px;
	right:16px;
}
a.lien-insta svg *{
	fill:#999;
	fill:var(--color2);
}
a.lien-insta:hover svg *{
	fill:#666;
	fill:var(--color1);
}



/* -----------------------------------
   Accueil BIVOUAC TOILE & Z’ÉTOILES
   ----------------------------------- */

section.default {
	margin: 2em auto 3em auto;
    padding: 2em 1.5em;
	margin: 1.8em auto;   /* au lieu de 3em */
    padding: 1.8em 1.5em; /* au lieu de 2em */
    max-width: 1100px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 2%);
    backdrop-filter: blur(3px);
    transition: all 0.3s ease-in-out;
}
section.default:hover,
section.default:focus,
section.default:active{
    box-shadow: 0 6px 18px rgb(0 0 0 / 5%);
}

section {
   transition: all 0.3s ease-in-out;
}
section:hover,
section:focus,
section:active{
	transform: translateY(-4px);
}







/* --- fond progressif pour chaque section --- */
#seo {
    background: var(--blanc);
    border: 1px solid var(--color13);
}

/* --- espacement et lisibilité du texte --- */
section p {
    margin: 0.8em auto;
    color: #333;
}
section p.center {
    margin-top: 1.5em;
}


/* --- responsive --- */
/*
@media screen and (max-width: 768px) {
    #intro, #experience, #formules, #options, #valeurs, #contact, #seo {
        margin: 1.5em 0.8em;
        padding: 1.5em 1em;
    }
    h2 {
        font-size: 1.3em;
    }
}
*/


.container .content {
	max-width:900px;
	margin-left : auto;
	margin-right : auto;
}



/* -----------------------------------
   SECTION 2 COLONNES (Texte + Image)
----------------------------------- */
.container-full{
	max-width:100%;
}

.bgcolor1{
	background: var(--blanc);
	background: var(--color1);

}
.bgcolor1, 
.bgcolor1 h2, 
.bgcolor1 p{
	color: var(--color1);
	color: var(--blanc);
}

.bgcolor1 .btn{
	background-color:var(--color2);
	color:var(--blanc);	
	color:var(--color1);	
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: bold;
    padding: 0.8em 1.5em;
    transition: all 0.3s ease-in-out;
	border-radius:0;

}

.bgcolor1 .btn:hover,
.bgcolor1.btn:active,
.bgcolor1.btn:focus{
	background-color:var(--blanc);
	color:var(--color1);
    box-shadow: 0 0 10px var(--color11);
}

.bgcolor2{
	background: var(--blanc);
	background: var(--color2);

}
.bgcolor2, 
.bgcolor2 h2, 
.bgcolor2 p{
	color: var(--color1);
	color: var(--blanc);
}

.bgcolor2 .btn{
	background-color:var(--color1);
	color:var(--blanc);	
	color:var(--color2);	
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: bold;
    padding: 0.8em 1.5em;
    transition: all 0.3s ease-in-out;
	border-radius:0;

}

.bgcolor2 .btn:hover,
.bgcolor2.btn:active,
.bgcolor2.btn:focus{
	background-color:var(--blanc);
	color:var(--color2);
    box-shadow: 0 0 10px var(--color21);
}



/* -----------------------------------
   SECTION 2 COLONNES (version <img>)
----------------------------------- */

.section-2col {
	display: flex;
	flex-direction: column; 
	width: 100%;
	margin: 3em auto;
	overflow: hidden;
	box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
	padding:0;
	min-height: 500px;
}

/* Bloc texte */
.section-2col .bloc-texte {
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.section-2col .bloc-texte .in{
	padding: 2em 1.5em;	
}
.section-2col .bloc-texte h2 {
	font-size: 2rem;
}
.section-2col .bloc-texte p {
	line-height: 1.6em;
	margin-bottom: 1.5em;
}



/* Bloc image */
.section-2col .bloc-image {
	width: 100%;
	display: flex;
	align-items: stretch;
	justify-content: center;
}
.section-2col .bloc-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* --- Version Desktop --- */
@media screen and (min-width: 900px) {
	.section-2col {
		flex-direction: row;
		align-items: stretch;
		min-height: 500px;
	}
	.section-2col .bloc-texte {
		text-align: left;
		max-width: 50%;
		width: 50%;
	}
	.section-2col .bloc-texte .in{
		padding: 3em 3em;		
	}
	.section-2col .bloc-image {
		max-width: 50%;
		width: 50%;
	}
}

/* -----------------------------------
   SYSTÈME GLOBAL : CARTES & GRILLES
----------------------------------- */

/* ---- Grille générique ---- */

.grid {
    display: grid;
    gap: 2em;
    margin-top: 2em;
}
@media screen and (min-width: 600px) {
	.grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 2 colonnes sur desktop, 1 sur mobile */
@media screen and (min-width: 900px) {
    .grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
	.grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Alias pour compatibilité avec l'existant
   (tu pourras ensuite ne garder que .grid/.grid--2 si tu veux) */
.formules-grid,
.gourmandes-cards,
.options-grid,
.cards-liens {
    display: grid;
    gap: 2em;
    margin-top: 2em;
}


/* ---- Carte générique ---- */

.card,
.formule-card,
.gcard,
.card-modele,
a.card-ref,
.cards-liens .card {
    background: #fff;
    border-radius: 16px;
    padding: 1.5em;
    box-shadow: 0 4px 10px rgb(0 0 0 / 5%);
    text-align: left;
}
/* css temp une seul formule page accueil */
.formules-acc {
}
.formules-acc .card{
	max-width : 600px;
	margin:auto;
}

/* Variantes utiles (tu les utilises ou pas selon les besoins) */
.card--flat {
    box-shadow: none;
    border: 1px solid rgba(0,0,0,0.06);
}

.card--dark {
    background: var(--color1);
    color: var(--blanc);
}

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

.card--compact {
    padding: 1.1em 1.2em;
}

/* Images dans les cartes (formules / options / références) */
.card img,
.formule-img,
.ref-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 1em;
}

/* ---- Titres de cartes ---- */

.card-title,
.formule-titre,
.cards-liens .card h3,
.card-modele .modele-titre,
.gcard h3 {
    margin-top: 0;
    margin-bottom: 0.4em;
    font-size: 1.2em;
    color: var(--color1);
    display: flex;
    align-items: center;
    gap: 0.4em;
	text-align:left;
}

/* Petite étoile devant les titres */
.card-star {
    width: 1em;
    height: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.card-star::before {
    content: "★";
    font-size: 0.9em;
    color: var(--color2);
}

/* Texte des cartes */
.card-text,
.formule-desc,
.gcard p,
.cards-liens .card p {
    color: #333;
    line-height: 1.5em;
    margin-top: 0.4em;
    margin-bottom: 1.2em;
}

/* Centrer tous les CTA contenus dans une .card */
.card .btn {
    display: block;
    margin: 1.2em auto 0 auto;
    width: fit-content;
    text-align: center;
    margin-top: 0.5em;
}


 .bloc-texte.wide .in {
    max-width: 580px; /* avant → ~420px estimés */
  }
  
  
  .bgcolor-light {
  background: #fafafa;
}
.card-link {
    color: var(--color2);
    text-underline-offset: 3px;
	text-decoration:none;
}
.card-link:hover {
    opacity: 0.7;
    color: var(--color1);
}

/* -----------------------------------
   SECTION AVIS CLIENTS – ACCUEIL
----------------------------------- */

section#avis {}

/* grille avis */
.avis-grid {
    display: grid;
    gap: 2em;
    margin-top: 2em;
}

/* 2 colonnes tablette */
@media screen and (min-width: 600px) {
    .avis-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 3 colonnes desktop */
@media screen and (min-width: 900px) {
    .avis-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* carte avis */
.card--avis {
    background: var(--blanc);
    border-radius: 20px;
    padding: 1.8em 1.6em;
    box-shadow: 0 6px 18px rgb(0 0 0 / 6%);
	box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* effet léger au survol */
.card--avis:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 28px rgb(0 0 0 / 10%);
}

/* étoiles */
.card--avis .stars {
    color: var(--color2);
    font-size: 1.1em;
    letter-spacing: 2px;
    margin-bottom: 0.6em;
}

/* texte avis */
.card--avis .avis-text {
    font-style: italic;
    color: #333;
    line-height: 1.6em;
    margin-bottom: 1.2em;
}

/* auteur */
.card--avis .avis-author {
    font-weight: 600;
    font-size: 0.95em;
    color: var(--color1);
}

/* petite citation décorative */
.card--avis::before {
    content: "“";
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 3.5em;
    color: var(--color12);
    line-height: 1;
    pointer-events: none;
}

/* -----------------------------------
   VIDEOS RESPONSIVE (YouTube / iframe)
----------------------------------- */

.video-container {
	position: relative;
	width: 100%;
	max-width: 800px;        /* largeur confortable desktop */
	margin: 1.5em auto 1em;
	aspect-ratio: 16 / 9;    /* moderne et propre */
	background: #000;
	/*border-radius: 16px;*/
	overflow: hidden;
	box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}