@charset "utf-8";
/* CSS Document */
:root {
  --vert: #d3f900;
  --vert-pale: #edfb90;
--gris: #e6e6e6;
	--blanc: #ffffff;
}



html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
* {
	margin: 0;
	padding: 0;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
}
@font-face {
	font-family: 'proxima-nova';
	src: url("font/proximanova-regular.woff2") format("woff2"), url("font/proximanova-regular.woff") format("woff");
	font-style: normal;
	font-weight: 200;
}
@font-face {
	font-family: 'proxima-nova-medium';
	src: url("font/proximanova-medium.woff2") format("woff2"), url("font/proximanova-medium.woff") format("woff");
	font-style: normal;
	font-weight: 400;
}
@font-face {
	font-family: 'proxima-nova-semibold';
	src: url("font/proximanova-semibold.woff2") format("woff2"), url("font/proximanova-semibold.woff") format("woff");
	font-style: normal;
	font-weight: 600;
}
@font-face {
	font-family: 'proxima-nova-bold';
	src: url("font/proximanova-bold.woff2") format("woff2"), url("font/proximanova-bold.woff") format("woff");
	font-style: normal;
	font-weight: 800;
}
/*
=========================================================================
   ACCESSIBILITÉ
=========================================================================
*/
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
/*
=========================================================================
    DÉFINITION DES BASES
    - TYPOGRAPHIE
    - LARGEUR maximale de la page
    - MARGES pour centrer dans l'├®cran
=========================================================================
*/
body {
	font-size: 14px;
	font-family: 'proxima-nova', sans-serif !important;
	font-style: normal;
	margin: 0 auto;
	background: url("../images/texture_balle.jpg") repeat
}

@media (min-width: 767px) {
body {
	font-size: 15px;
}
}

@media (min-width: 1100px) {
body {
	font-size: 15px;
}
}
section  {
	margin:auto ;
	max-width: 800px;
	padding:40px
}
.bckg-gris {background-color:var(--gris);}

.bckg-gris p {color:black; text-align: left}
.bckg-gris h2, .bckg-gris h3 {color:black; text-align: left}

.bckg-blanc {background-color:var(--blanc);text-align: left}

.bckg-blanc p {color:black; text-align: left}

/*



=========================================================================
    TITRES ET TEXTES
=========================================================================
*/
h1 {
	color: white;
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 600;
  font-style: normal;
	font-size: 2.6em;
	margin-bottom:35px;
}

h2 {
	font-size:170%;
	font-family: "Barlow Condensed", sans-serif;
	text-transform: uppercase;
	font-weight: 600;
  font-style: normal;
	margin: 10px 0 21px 0;}

h3 span {
	font-size:2em;
	font-family: "Barlow Condensed", sans-serif;
	text-transform: uppercase;
	font-weight: 600;
  font-style: normal;
	margin-right: 10px;}


.vert {color:var(--vert);}

p {
	color:white;
	font-size: 18px;
	line-height: 1.35em;
	margin-bottom: 18px;
}
a {
	color:var(--vert);
}
a:hover {
	color:var(--vert-pale);text-decoration: none
}
/* Liens avec picto */
.lien[class*="picto-"] {
	padding-left: 20px;
	position: relative;
}
a.lien[class*="picto-"]:before, span.lien[class*="picto-"]:before {
	display: block;
	content: " ";
	background-position: top left;
	background-repeat: no-repeat;
	width: 22px;
	height: 22px;
	top: 1px;
	left: -4.5px;
	position: absolute;
}

ul, ol {
	font-size: 18px;
	/*margin-top: 0.8em;*/
	margin-bottom: 1.6em;
	margin-left: 2em;
	text-align: left;
}
ul li, ol li {
	line-height: 1.3em;
}
li {
	margin-top: 0.4em;
}
ul ul, ol ul, ul ol, ol ol {
	margin-top: 0;
	margin-bottom: 0;
}
.centre {
	text-align:center
}
/*
=========================================================================
    FOOTER
=========================================================================
*/
footer {
	/*background-color: black;*/
	padding:60px 0 
}
/* Médias sociaux */
footer nav {
	text-align: center;
	margin: auto
}
footer #btn-medias-sociaux ul {
	margin-left: 0;
	text-align: center
	
}
footer #btn-medias-sociaux li {
	margin: 10px 5px;
	width: 35px;
	height: 35px;
	display: inline-block;
}
footer #btn-medias-sociaux a[class*="picto-"]:before {
	display: block;
	content: " ";
	background-position: center;
	background-repeat: no-repeat;
	width: 35px;
	height: 35px;
	position: absolute;
	text-align: center;
}
footer #btn-medias-sociaux .picto-facebook:before {
	background-image: url("../images/icon-Facebook.svg")
}
footer #btn-medias-sociaux .picto-facebook:hover:before {
	background-image: url("../images/icon-Facebook.svg")
}
footer #btn-medias-sociaux .picto-youtube:before {
	background-image: url("../images/icon-Youtube.svg")
}
footer #btn-medias-sociaux .picto-youtube:hover:before {
	background-image: url("../images/icon-Youtube.svg")
}
footer #btn-medias-sociaux .picto-twitter:before {
	background-image: url("../images/icon-X.svg")
}
footer #btn-medias-sociaux .picto-twitter:hover:before {
	background-image: url("../images/icon-X.svg")
}
/* Tags #snaptoipas */
#tag {
	color: #d3f900;
	text-align: center;
	font-size: 150%;
	font-family: "proxima-nova-bold"
}
/* Logos VDQ et SPVQ */
#logos {
	text-align: center;
}
#logos img {
	margin: 30px;
}
#logos img#vdq {
	height: 80px;
}
#logos img#spvq {
	height: 120px;
}
/**Picto**/
.picto-coeur:before {
	background-image: url("../images/logo-Troue-par-balle.svg")
}


/*
=========================================================================
    MENU PRINCIPAL
=========================================================================
*/
/* Add a black background color to the top navigation */
header {

	/*background-color:black;*/
	text-align: center;
	position: relative;
	z-index: 10
}

@media screen and (min-width: 600px) {
header {
	height: 66px;
	z-index: 2;
	
}
}
header .contenu {
	max-width: 1160px;
	margin: auto;
}
header h1 {
	position: absolute;
	margin-top: 20px;margin-left:20px;
	width: 208px;
	height: 40px;
	background-image: url(../images/snap-toi-pas-logo.svg);
	background-repeat: no-repeat
}

.menu-principal {
	overflow: hidden;
}

@media screen and (min-width: 600px) {
.menu-principal {
	float: right;margin-right:20px

}
}
.menu-principal a {
	float: left;
	display: block;
	color: #ffffff;
	text-align: center;
	padding: 18px 16px;
	text-decoration: none;
	text-transform: uppercase;
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 600;
  font-style: normal;
	font-size: 130%;
}

@media screen and (max-width: 600px) {
.menu-principal div a {
	padding: 3px 16px;
}
}

@media screen and (min-width: 600px) {
.menu-principal div a:before {
	content: "|";
	margin: 0px 10px;
}
.menu-principal div a {
	padding: 18px 0px;
}
.menu-principal div a:first-child:before {
	content: "";
	margin: 0px;
}
}
/* Change the color of links on hover */
.menu-principal a:hover {
	color: #d3f900
}
/* Add an active class to highlight the current page */
.menu-principal a.actif {
	color: #d3f900
}

/* Hide the link that should open and close the topnav on small screens */
.menu-principal .icon {
	display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.menu-principal div {
	margin-top: 60px
}
.menu-principal a {
	display: none;
}
.menu-principal a.icon {
	float: right;
	display: block;
}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.menu-principal.responsive {
	position: relative;
}
.menu-principal.responsive a.icon {
	position: absolute;
	right: 0;
	top: 0;
}
.menu-principal.responsive a {
	float: none;
	display: block;
	text-align: left;
}
}
/*
=========================================================================
    ACCUEIL
=========================================================================
*/


#accueil{}
/*
=========================================================================
Bandeau défilant (image) (#carrousel)
 -
=========================================================================
*/

#banner-principal {
    background-color: #d3f900;
	width: 100%;
	display: flex;
	align-items: center;
	height: 140px;
}

#banner-principal section {
    padding: 0
}
.image-logo {
	display: block;
	width: 498px;
	margin: 0 auto;
}
.image-logo-mobile {
	display: none;
}
@media screen and (max-width: 600px) {
.image-logo-mobile {
	display: block;
	width: 350px;
	margin: 0 auto;
}
.image-logo {
	display: none;
}
#banner-principal {
	height: auto;
}
}

/*
=========================================================================
Bandeau défilant (image) (#carrousel)
 -
=========================================================================



@media (min-width: 10px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #carrousel-fond {
        opacity: 0
    }
}
#carrousel .image-noune {
    background-color: #f1667c;
}
#carrousel .image-craque {
    background-color: #7accc8;
}
#carrousel .image-graine {
    background-color: #f3873d;
}
#carrousel a {
    text-decoration: none;
    color: inherit;    width: 100%;

}

#carrousel .image > img {
    filter: drop-shadow(0px 0px 10px #555555);
    -webkit-filter: drop-shadow(0px 0px 10px #555555);
    -moz-filter: drop-shadow(0px 0px 10px #555555);
    margin-top: 100px;
    margin-bottom: 40px;
}
#carrousel .image > img + img {
    margin-top: 0px;
    width: 50%;
}
@media screen and (min-width: 450px) {
    #carrousel .image > img {
        width: 50%;
        margin: 100px 0px
    }
    #carrousel .image > img + img {
        width: 30%;
        margin: 100px 0px 100px 50px;
    }
}
@media screen and (min-width: 1160px) {
    #carrousel .image > img {
        width: 45%;
        margin: 100px 0px 50px 0px;
    }
    #carrousel .image > img + img {
        width: 25%;
        margin: 100px 0px 60px 100px;
    }
}
#carrousel .btn {
    margin-top: 20px;
}
@media (min-width: 767px) and (max-width: 911px) {
    #carrousel .btn {
        font-size: 14px;
        padding-left: 20px;
        padding-right: 20px;
    }
}
/* Carrousel : Navigation 
#carrousel #nav, #carrousel #prev, #carrousel #next {
    position: absolute;
    margin: 0;
}
#carrousel #nav {
    width: 100%;
    bottom: 0;
    color: white;
    z-index: 150;        margin: auto;

}
#carrousel #prev, #carrousel #next {
    display: none;
}

@media (min-width: 960px) {
    #carrousel #nav {
        bottom: 1em;
    }
}
@media (min-width: 1220px) {
    #carrousel #nav {
        left: 0;
    }
}
@media (min-width: 1340px) {
    #carrousel #prev, #carrousel #next {
        display: block;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    #carrousel #prev {
        left: -4.8em
    }
    #carrousel #next {
        right: -4.8em
    }
}
@media (min-width: 1425px) {
    #carrousel #prev {
        left: -6em
    }
    #carrousel #next {
        right: -6em
    }
}
@media (min-width: 1200px) {
    #carrousel #prev {
        left: 8em
    }
    #carrousel #next {
        right: 8em
    }
}
/* ancien 
#carrousel #nav > span {
    font-size: 3em;
    cursor: pointer;
    position: relative;
    top: 0;
    right: 0;
    margin: 1px;
    padding: 3px 1px;
}
#carrousel #nav > span.cycle-pager-active {
    color: #108848;
}

#carrousel #nav button {
    font-size: 2.5em;
    cursor: pointer;
    position: relative;
    display: inline-block;
    background: transparent;
    border: none;
    color: white;
    width: 25px;
    z-index: 3;
}
#carrousel #nav button span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
#carrousel #nav .cycle-pager-active {
    color: #2b2b2b;
}
#carrousel a.cycle-slide-active:focus {
    outline: 2px dashed rgba(255, 255, 255, 0.5);
}
/* BOUTONS 
.btn {
    background-color: #108848;
    border: 0;
    border-radius: 3px;
    color: white;
    cursor: pointer;
    display: inline-block;
    font: 600 1em 'proxima-nova-bold', sans-serif;
    padding: 8px 30px 10px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    -webkit-appearance: none;
}
.btn:hover, .btn:focus {
    background-color: #007236;
    color: white;
}
.btn:active {
    background-color: #007236;
    color: rgba(255, 255, 255, 0.5);
}
.btn[class*="picto-"]:before {
    position: absolute;
    width: 25px;
    height: 100%;
    max-height: 25px;
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    left: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: opacity 0.2s;
}
.picto-fleche-droite:before {
    background-image: url("../images/picto-fleche-droite-blanc.svg")
}
.picto-fleche-gauche:before {
    background-image: url("../images/picto-fleche-gauche-blanc.svg")
}***/
/* Texte */
#accueil #texte {
    max-width: 800px;
    margin: auto
}
/* Navigation centrale */
#accueil ul.temoignages {
    
    margin-top: 40px;
    max-width: 1160px;
    margin: auto;
    list-style: none;
	
}


#accueil ul.temoignages li {
    line-height: 2em;

}

#accueil ul.temoignages {
        display: inline-block;
		gap:20px;
    }

@media (min-width: 767px) {
    #accueil ul.temoignages {
        display: inline-flex;
		line-height: 2em;
	margin-right: 20px;
	padding: 40px;
    }
}
#accueil ul.temoignages a {
    
    color: #d3f900;
    text-decoration: none;
    font-family: 'proxima-nova-semibold';
    font-size: 120%;
    /*padding-top: 220px;*/
    position: relative;
}
#accueil ul.temoignages a:before {
    content: " ";
    width: 260px;
    height: 260px;
    display: block;
    margin: auto;
}
#accueil ul.temoignages a.temoignage1:before {
    background-image: url(../images/nav-personne-temporaire-1.png);
    background-repeat: no-repeat;
}
#accueil ul.temoignages a.parent:before {
    background-image: url(../images/nav-parent.png);
    background-repeat: no-repeat
}
#accueil ul.temoignages a.ecole:before {
    background-image: url(../images/nav-ecole.png);
    background-repeat: no-repeat
}
#accueil ul.temoignages a.jeune:hover:before {
    background-image: url(../images/nav-jeune-rl.png);
}
#accueil ul.temoignages a.parent:hover:before {
    background-image: url(../images/nav-parent-rl.png);
}
#accueil ul.temoignages a.ecole:hover:before {
    background-image: url(../images/nav-ecole-rl.png);
}

#accueil ul.temoignages a span {
    font-family: 'proxima-nova-bold';
    font-size: 220%
}

@media screen and (min-width: 600px) {
#nav-principal {
    padding:30px 0 60px
}

	

}
#nav-principal ul {display: inline-block; margin-left: 0; }
#nav-principal ul li {background-color: #d3f900; margin-left:25px; padding:20px; display: inline-block; min-width: 150px; text-align: center}
#nav-principal ul li:first-child {margin-left:0;}

#nav-principal ul li a{text-transform: uppercase;
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 600;
  font-style: normal;
	font-size: 150%; text-decoration: none; color: black}
#nav-principal li{
  /* fond animé */
  background:
    linear-gradient(90deg, #d3f900, #edfb90)
    left / 0% 100% no-repeat;

  transition:
    background-size .35s ease,
    color .35s ease,
    transform .15s ease;
}
#nav-principal li:hover,
#nav-principal li:focus-visible{
  background-size:100% 100%;
  color:#fff; /* inverse la couleur du texte */
}
#nav-principal li:active{
  transform:translateY(1px);
}

/* AUTRES PAGES */
main{text-align:center}
/* PHOTO */
main #photo div{margin:auto;background-size:cover;height:500px;}


/* Jeune */
main#jeune #photo div{background:url(../images/photo_jeune.jpg)  no-repeat; background-size:cover; background-position: center center} 
	main#parent #photo div{background:url(../images/photo_parents.jpg)  no-repeat; background-size:cover; background-position:top center}
	main#ecole #photo div{background:url(../images/photo_ecole.jpg)  no-repeat;background-size:cover;}
/* main#jeune #photo {background-color: red}
	 */

#texte {text-align:left;max-width:800px;margin:auto;	font-size: 1.05em; text-align: center;
	letter-spacing: 0.1px; }

#texte h1{text-align:center; padding: 35px; font-size: 2.2em }

.question{padding:10px 0px}
#texte div:first-child{border-top:0px none;}

.texte-campagne {background-color:#d3f900; width: 90%; padding:20px; color: black;
    margin: auto; text-align: center;}

.texte-campagne p {color: black; text-align: left}
.texte-campagne h2 {font-family: "Barlow Condensed", sans-serif;
	font-weight: 600;
  font-style: normal; text-transform: uppercase; font-size: 200%; margin-top:0}
.texte-campagne a {font-family: "Barlow Condensed", sans-serif;
	font-weight: 600;
  font-style: normal; color: black; text-align: center; font-size: 130%}

@media screen and (min-width: 600px) {
	
	.texte-campagne {width: 560px; padding:30px;}
	
}
#ressources{background-color:#bbe5e3;padding:40px;margin-top:60px;}

/*
=========================================================================
	Tiroirs
=========================================================================
*/

.toggle-container {
	display: none;
}
h2.trigger{
	margin: 0;
	min-height: 49px;
	padding: 0;
	margin-bottom: 6px;
	visibility: hidden;
	background-color: var(--vert)
	
}
.trigger > button {
	background-color: transparent;
	border: none;

	cursor: pointer;
	display: block;
	font-family: "proxima-nova-bold", sans-serif;
	font-size: 18px;
	margin-bottom: 6px;
	padding: 15px 45px 15px 15px;
	position:relative;
	text-align: left;
	width: 100%;
}
@media (min-width: 766px) {
	.trigger > button {
		padding: 15px 40px 16px 30px;
	}
}

/* Tiroir fermé (+) */
.trigger > button:after{
	position: absolute;
	background-color:#000000;
	width: 30px;
	height: 100%;
	max-height: 30px;
	content: "";
	background-repeat: no-repeat;
	background-position: center;
	right: 10px;
	top: 10px;
	background-image: url('../images/picto-plus.svg');
	background-size:40%;
	border-radius:40px
}
@media (min-width: 1280px) {
	.trigger > button:after {
		transition: background-image 0.350s;
	}
}

/* Tiroir ouvert (-) */
.trigger.active > button:after {
	background-image: url('../images/picto-moins.svg');
}
/*
  Contenu des tiroirs
*/
.toggle_container,
.toggle-container{
	margin: 0 8px 8px;
	overflow: hidden;
}

.toggle_container p {
	color:black;
	text-align: left;
}
@media (min-width: 766px) {
	.toggle_container,
	.toggle-container{
		margin: 0 15px 15px 30px;
	}
}

.toggle-container > *:first-child:not(.col):not(.encadre),
.toggle_container > *:first-child:not(.col):not(.encadre) {
	padding-top: 8px;
}
@media (min-width: 766px) {
	.toggle-container > *:first-child:not(.col):not(.encadre),
	.toggle_container > *:first-child:not(.col):not(.encadre) {
		padding-top: 15px;
		text-align: left;
	}
}
/* Listes à puce dans les tiroirs*/
.toggle_container>ul:first-child, .toggle-container>ul:first-child {
	margin-top: 0;
}


/* Encadrés */
.encadre {
	background-color: #000000;
	display: block;
	margin-top: 10px;
	margin-bottom: 15px;
	padding: 1em;
	color: inherit;
	text-decoration: inherit;
	clear:both
}

.encadre p, .encadre h2 {
	color:white
}

@media (min-width: 766px) {
	.encadre{
		padding: 25px 2em 25px 2em;
	}
}

/*colonnes*/
@media only screen and (min-width: 767px) {
	div.colonnes-2,
	div.colonnes-3,
	div.colonnes-4,
	div.colonnes-5 {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap : wrap;
		flex-wrap : wrap;
		margin: 0px -10px;
	}
	div.col {
		-webkit-flex: 1;
		flex: 1;
		margin: 5px 0px 15px;
		padding: 0px 10px;
	}
	div.colonnes-2 div.col {
		flex: 0 50%;
	}
	div.colonnes-3 div.col {
		flex: 0 33.3333333333333333%;
	}
	div.colonnes-4 div.col {
		flex: 0 25%;
	}
	div.colonnes-5 div.col {
		flex: 0 20%;
	}
	div.col-80 {
		flex-basis: 80% !important;
	}
	div.col-75 {
		flex-basis: 75% !important;
	}
	div.col-66 {
		flex-basis: 66.6666666666666% !important;
	}
	div.col-60 {
		flex-basis: 60% !important;
	}
	div.col-50 {
		flex-basis: 50% !important;
	}
	div.col-40 {
		flex-basis: 40% !important;
	}
	div.col-33 {
		flex-basis: 33.3333333333333% !important;
	}
	div.col-25 {
		flex-basis: 25% !important;
	}
	div.col-20{
		flex-basis: 20% !important;
	}
	/* Force le contenu après à changer de ligne */
	div.colonnes-2::after,
	div.colonnes-3::after,
	div.colonnes-4::after,
	div.colonnes-5::after {
		clear: both;
	}
}
@media all and (min-width: 767px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	div.colonnes-2 div.col {
		max-width: 50%;
	}
	div.colonnes-3 div.col {
		max-width: 33.33333333%
	}
	div.colonnes-4 div.col {
		max-width: 25%;
	}
	div.colonnes-5 div.col {
		max-width: 20%;
	}
}


/* ========= Base (garde tes règles existantes) ========= */
#accueil ul.temoignages a{
  position: relative;
  display: inline-grid;           /* centre le label sous la photo */
  justify-items: center;
  text-align: center;
  width: 260px;                   /* même taille que :before */
  color: #d3f900;
  text-decoration: none;
  font-family: 'proxima-nova-semibold';
  font-size: 120%;
  /*padding-top: 220px;             /* comme tes styles actuels */
  transition: color .25s ease;    /* lissage couleur */
}

#accueil ul.temoignages a::before{
  content:"";
  width: 260px;
  height: 260px;
  display: block;
  margin: auto;
  border-radius: 50%;
  background-image: var(--photo); /* <- image par item (voir HTML) */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: transform .35s ease; /* utile pour l’option zoom */
}


/* Accessibilité : animations réduites */
@media (prefers-reduced-motion: reduce){
  #accueil ul.temoignages a,
  #accueil ul.temoignages a::before,
  #accueil ul.temoignages a::after { transition: none !important; }
}

/* =======================================================
   OPTION 1 — Effet “LIQUID GLASS” (ajoute .fx-glass au <a>)
   ======================================================= */
#accueil ul.temoignages a.fx-glass{
  /* isole le flou pour éviter les fuites visuelles */
  isolation: isolate;
}

/* couche verre + reflet (au-dessus de la photo) */
#accueil ul.temoignages a.fx-glass::after{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 234px;
  height: 234px;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;

  /* “verre” : dégradé doux + bord lumineux */
  background:
    /* 1. Reflet oblique qui pourra glisser */
    linear-gradient(115deg, transparent 35%, rgba(255,255,255,.70) 50%, transparent 65%) 0 0 / 220% 220% no-repeat,
    /* 2. vernis */
    linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.12)),
    /* 3. base translucide */
    rgba(255,255,255,.14);

  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 8px 22px rgba(2, 6, 23, .12);

  /* le cœur de l'effet 
  -webkit-backdrop-filter: saturate(140%) blur(4px);
  backdrop-filter:         saturate(140%) blur(4px);*/

  opacity: 0;
  transition: opacity .35s ease;
}

#accueil ul.temoignages a.fx-glass:hover::after,
#accueil ul.temoignages a.fx-glass:focus-visible::after{
  opacity: 1;
  animation: sheen-slide 800ms ease forwards;
}

/* Animation du reflet qui balaie la pastille */
@keyframes sheen-slide{
  from { background-position: -120% -120%, 0 0, 0 0; }
  to   { background-position: 120% 120%, 0 0, 0 0; }
}

/* petit feedback pression */
#accueil ul.temoignages a.fx-glass:active{ transform: translateY(1px); }

/* Fallback quand backdrop-filter n’est pas supporté */
@supports not (backdrop-filter: blur(2px)){
  #accueil ul.temoignages a.fx-glass::after{
    /* on garde l’aspect verre mais sans flou réel */
    background:
      linear-gradient(115deg, transparent 35%, rgba(255,255,255,.70) 50%, transparent 65%) 0 0 / 220% 220% no-repeat,
      linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.18));
  }
}

/* =======================================================
   OPTION 2 — ZOOM SOBRE (ajoute .fx-zoom au <a>)
   ======================================================= */
#accueil ul.temoignages a.fx-zoom::before{
  will-change: transform;
}
#accueil ul.temoignages a.fx-zoom:hover::before,
#accueil ul.temoignages a.fx-zoom:focus-visible::before{
  transform: scale(1.06);
}

/* ombre douce au survol pour souligner la mise en avant */
#accueil ul.temoignages a.fx-zoom:hover,
#accueil ul.temoignages a.fx-zoom:focus-visible{
  filter: drop-shadow(0 10px 18px rgba(2,6,23,.12));
}




/*
    ENCADRÉ AVEC IMAGE
    <div class="encadre encadre-image"

    aligne-gauche (par défaut) ou aligne-droite

*/

.encadre-image {
	overflow: hidden;
	position: relative;
}

@media (min-width: 766px) {
	.encadre-image {
		overflow: hidden;
		position: relative;
		padding-left: 2em;
	}
}
.encadre-image figure {
	margin-top: 0;
	max-width: 200px;
}

@media (min-width: 766px) {
	.encadre-image figure {
		display: -webkit-flex;
		display: flex;
		align-items: center;
		margin-top: 3px;
		position: absolute;
		height: calc(100% - 2.1em);
		overflow: hidden;
	}
    .encadre.encadre-image figure {
        height: calc(100% - 3.55em);
    }
    
}

.encadre-image figure img{
	max-width: 200px;
}
.encadre-image.encadre-haut figure {
	-webkit-align-items: flex-start;
	align-items: flex-start;
	margin-top: 2px;
	height: calc(100% - 2.9em);
}

@media (min-width: 766px) {
	.encadre-image>*:not(figure) {
		padding-left: 220px;
	}
}
.encadre-image.encadre-image-complete figure {
	position: relative;
	margin-top: -1px;
	margin-right: 1.2em;
}
@media (min-width: 766px) {
	.encadre-image.encadre-image-complete figure {
		float: left;
		margin-bottom: 0;
	}
}
.encadre-image.encadre-image-complete img {
	max-width: 250px;
}
@media (max-width: 765px) {
	.encadre-image-cache-mobile figure {
		display: none	
	}
}

@media (min-width: 766px) {
	.encadre-image.aligne-droite {
		padding-left: 2em;
		padding-right: 1.5em;
		float: none;
		margin-left: 0;
	}
	.encadre-image.aligne-droite figure {
		right: 1.5em;
	}
	.encadre-image.aligne-droite>*:not(figure) {
		padding-left: 0;
		padding-right: 220px;
	}
	.encadre-image.encadre-image-complete.aligne-droite figure {
		float: right;
		margin-right: 0;
		margin-left: 1.5em;
		right: inherit;
	}
}
.encadre.encadre-image figure + h2, .encadre.encadre-image figure + h3, .encadre.encadre-image figure + h4 {
	margin-top: 0;
}


/**Bulle cliquable**/

.bubble-btn{
position:fixed;
right:24px; /* ajuster position horizontale */
bottom:24px; /* ajuster position verticale */
width:72px;
height:72px;
border-radius:999px;
background:linear-gradient(135deg,#000000 0%,#363636 100%);
display:inline-grid;
place-items:center;
box-shadow:0 8px 20px rgba(211,249,0,0.22);
cursor:pointer;
z-index:1000;
border:0;
padding:0;
transition:transform .18s ease, box-shadow .18s ease;
	border:solid #d3f900 5px;
}
.bubble-btn:active{transform:scale(.96)}
.bubble-btn:focus{outline:3px solid rgba(255,255,255,.18);outline-offset:4px}


/* icone (svg ou png) */
.bubble-btn img{width:50px;height:50px;display:block}


/* petite animation optionnelle */
.bubble-pulse::after{
content:'';
position:absolute;inset:0;
border-radius:999px;
box-shadow:0 0 0 6px rgba(211,249,0,0.22);
animation:pulse 2.6s infinite;
z-index:-1;
}
@keyframes pulse{0%{transform:scale(.98);opacity:1}70%{transform:scale(1.3);opacity:0}100%{opacity:0}}


/* MODAL (popin) */
.modal-overlay{
position:fixed;inset:0;display:none;align-items:center;justify-content:center;
background:rgba(0,0,0,0.45);z-index:1200;padding:20px;
}
.modal-overlay.is-open{display:flex}


.modal{
width:min(900px,100%);
max-height:90vh;
background:black;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.3);
position:relative;overflow:auto;
padding:22px;
	color:white
}

.modal h2 {color:#d3f900}
/* header with close button */
.modal-header{display:flex;align-items:center;justify-content:flex-end;margin-bottom:12px}
.modal-title{font-size:18px;font-weight:600}
.modal-close{
background:transparent;border:0;font-size:20px;line-height:1;padding:6px;cursor:pointer;border-radius:6px; color:white
}
.modal-close:focus{outline:3px solid rgba(255,255,255,0.08)}


/* modal body can contain any HTML */
.modal-body{font-size:15px;color:#222;line-height:1.5}


/* responsive small-screen adjustments */
@media (max-width:420px){
.bubble-btn{right:14px;bottom:14px;width:60px;height:60px}
.bubble-btn img{width:36px;height:36px}
.modal{padding:14px;border-radius:10px}
}