@charset "UTF-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, 
hgroup, menu, nav, section, menu,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  vertical-align:baseline;
  background:transparent;
}  
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-align: center;
	margin: 0;
	padding: 0;

}
.mobile {
	display: none;
}
a:link {
	color: #000;
	text-decoration: none;
}
a:visited {
	color: #000;
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color: #000;
}
a:active {
	color: #000;
	text-decoration: underline;
}
sup {
	position: relative;
	font-size: 0.7em;
	text-decoration: none;
	bottom: 7px;
}
h1 {
	color: #999;
	font-size: 11px;
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.3em;
}
h1 a:visited {
	color: #666;
	text-decoration: none;
}
h1 a:link {
	color: #666;
	text-decoration: none;
}
h1 a:hover {
	color: #666;
	text-decoration: none;
}
h2 {
	font-family: "Times New Roman", Times, serif;
	font-size: 22px;
	color: #FFF;
	font-weight: normal;
}
h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: normal;
}
h3 a:visited {
	color: #000;
	text-decoration: none;
}
h3 a:link {
	color: #000;
	text-decoration: none;
}
h4 {
	font-size: 17px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}
h4 a:link {
	color: #000;
	text-decoration: none;
}
h4 a:visited {
	color: #000;
	text-decoration: none;
}
h4 a#amateur:hover {
	text-decoration: none;
}
h4 a:active {
	color: #FFF;
	text-decoration: none;
}
h4 a#debutant:hover {
	text-decoration: none;
}
h4 a#etudiant:hover {
	text-decoration: none;
}
p {
	line-height: 1.1em;
}
.retrait {
	margin-left: 15px;
	letter-spacing: 0.1em;
}
.exp {
	font-size: 10px;
	visibility: visible;
	z-index: 1;
	letter-spacing: 1px;
	position: absolute;
	top: -2px;
	overflow: visible;
}
a#img1:link {
	background-image: url(../images/debutant_full.png);
	background-repeat: no-repeat;
	height: 30px;
	width: 137px;
	display: block;
}
a#img1:hover {
	background-image: url(../images/debutant_full.png);
	background-position: left -31px;
	display: block;
	height: 30px;
	width: 137px;
}
.red-logo {
	color: #970f00;
	font-family: Arial, Helvetica, sans-serif;
}
#container {
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-image: url(../images/fond_piano.jpg);
	background-repeat: no-repeat;
	width: 980px;
	text-align: left;
}
#header {
	margin-right: 17px;
	margin-left: 17px;
	position: relative;
	z-index: 999;
	width: 946px;
}
#header-top {
	background-color: #FFF;
	margin-top: 0px;
	margin-bottom: 8px;
}
#header-top a img {
	width: 534px;
	padding: 5px;	
}
.loginerror {
	display: none;
	color: #FFF;
	background-color: #F81917;
	margin-bottom: 5px;
	padding: 3px;
}
#offrespe {
	color: #FFF;
	display: block;
	position: absolute;
	left: 642px;
	top: 8px;
	height: 35px;
	width: 275px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 7px;
	padding-left: 10px;
	text-align: center;
	visibility: visible;
	z-index: 1;
	background-color: #D10612;
}
.offrespe-titre {
	font-size: 17px;
	font-weight: bold;
	color: #FFF;
	line-height: 1.1em;
}
#offrespe h1 .offrespe-titre a:hover {
	color: #FFF;
	text-decoration: underline;
}
#offrespe h1 .offrespe-titre a:link {
	color: #FFF;
}
#offrespe h1 .offrespe-titre a:visited {
	color: #FFF;
}
.offrespe-remise {
	font-size: 17px;
	font-weight: bold;
	display: block;
	float: left;
	color: #FFF;
	margin-top: 0px;
}
.offrespe-detail {
	font-size: 16px;
	font-weight: bold;
	margin-top: 0px;
	color: #FF0;
}
.offrespe-code {
	clear: both;
	display: block;
	color: #FFF;
	text-align: center;
	margin-top: 2px;
	font-size: 12px;
}
#offrespe-zone {
	color: #FFF;
	display: block;
	position: absolute;
	left: 642px;
	top: 5px;
	height: 50px;
	width: 275px;
	visibility: visible;
	z-index: 2;
	bottom: 5px;
}

.newboutonabo {
	background-color: #F22200;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    border: none;
    padding: 1px 5px 1px 5px;
    cursor: pointer;
    text-transform: uppercase;
	display: block;
	height: 18px;
	width: 81px;
	position: absolute;
	top: 72px;
	left: 752px;
	z-index: 5;
	visibility: visible;
}
.newboutonabo:hover {
	background-color: #e2e2e2;
    color: #F22200;
    
}

.newboutoncompte1 {
	background-color: #6a190c;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    border: none;
    padding: 1px 5px 1px 5px;
    cursor: pointer;
    text-transform: uppercase;
	display: block;
	height: 18px;
	width: 97px;
	position: absolute;
	top: 72px;
	left: 840px;
	z-index: 4;
	visibility: visible;
}
.newboutoncompte1:hover {
	background-color: #e2e2e2;
    color: #6a190c;
    
}

.newboutoncompte2{
	background-color: #6a190c;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    border: none;
    padding: 1px 5px 1px 5px;
    cursor: pointer;
    text-transform: uppercase;
	display: block;
	height: 18px;
	width: 97px;
	position: absolute;
	top: 72px;
	left: 731px;
	z-index: 8;
	visibility: visible;
}
.newboutoncompte2:hover {
	background-color: #e2e2e2;
    color: #6a190c;
    
}

.newboutonmonespace2 {
	background-color: #F22200;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    border: none;
    padding: 1px 5px 1px 5px;
    cursor: pointer;
    text-transform: uppercase;
	display: block;
	height: 18px;
	width: 93px;
	position: absolute;
	top: 72px;
	left: 734px;
	z-index: 10;
	overflow: hidden;
	visibility: visible;
}
.newboutonmonespace2:hover {
	background-color: #e2e2e2;
    color: #F22200;
}

.newboutondeconnexion {
	background-color: #F22200;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    border: none;
    padding: 1px 5px 1px 5px;
    cursor: pointer;
    text-transform: uppercase;
	display: block;
	height: 18px;
	width: 103px;
	position: absolute;
	top: 72px;
	left: 834px;
	z-index: 3;
	overflow: hidden;
	visibility: visible;
}
.newboutondeconnexion:hover {
	background-color: #e2e2e2;
    color: #F22200;
}


a.boutoncompte1 {
	background-image: url(../images/moncompte.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	display: block;
	height: 16px;
	width: 93px;
	position: absolute;
	top: 74px;
	left: 844px;
	z-index: 4;
	overflow: hidden;
	visibility: visible;
}
a.boutoncompte1:hover {
	background-position: 0px -16px;
}



a.boutoncompte2 {
	background-image: url(../images/moncompte.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	display: block;
	height: 16px;
	width: 93px;
	position: absolute;
	top: 74px;
	left: 741px;
	z-index: 8;
	overflow: hidden;
	visibility: visible;
}
a.boutoncompte2:hover {
	background-position: 0px -16px;
}

a.boutonmonespace2 {
	background-image: url(../images/monespace.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	display: block;
	height: 16px;
	width: 89px;
	position: absolute;
	top: 74px;
	left: 742px;
	z-index: 10;
	overflow: hidden;
	visibility: visible;
}
a.boutonmonespace2:hover {
	background-position: 0px -16px;
}

a.boutondeconnexion {
	background-image: url(../images/deconnexion.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	display: block;
	height: 16px;
	width: 99px;
	position: absolute;
	top: 74px;
	left: 838px;
	z-index: 3;
	overflow: hidden;
	visibility: visible;
}
a.boutondeconnexion:hover {
	background-position: 0px -16px;
}
a.boutonabo {
	background-image: url(../images/sabonner.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	display: block;
	height: 16px;
	width: 81px;
	position: absolute;
	top: 74px;
	left: 756px;
	z-index: 5;
	overflow: hidden;
	visibility: visible;
}
a.boutonabo:hover {
	background-position: 0px -16px;
}

a.boutoncours {
	background-image: url(../images/coursalacarte.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	display: block;
	height: 16px;
	width: 126px;
	position: absolute;
	top: 74px;
	left: 712px;
	z-index: 6;
	overflow: hidden;
	visibility: visible;
}
a.boutoncours:hover {
	background-position: 0px -16px;
}
#header-middle {
	bottom: 5px;
	position: relative;
}

#header-bottom {
	background-color: #FFF;
	height: 21px;
}
#header-bottom, x:-moz-any-link, x:default {height : 21px;}

#mainmenu {
	font-size: 1.1em;
	font-weight: bold;
	letter-spacing: 0.1em;
}
#boutonsm {
	display: none;
}
.clearfloat {
	clear: both;
}
#content {
	margin-top: 19px;
	margin-right: 17px;
	margin-left: 17px;
background: none;
}
#center {
	margin-right: 17px;
	width: 656px;
	float: left;
	background: none;
}
#megaban {
	height: 100px;
	width: 656px;
	margin-bottom: 0px;
}
#banner {
	width: 100%;
}
.bxslider li img {
	width: 100%;
}
#clic-offre {
    background-color: #F22200;
    color: #FFF;
    font-size: 10px;
    display: inline-block;
    font-weight: bold;
    border: none;
    margin:4px 0 0 10px;
    padding: 2px 5px 1px 5px;
    cursor: pointer;
    text-transform: uppercase;
    vertical-align: top;
}

#clic-offre:hover {
    background-color: #FFF;
    color: #F22200;
    font-weight: bolder;
}
#clic-coursdeb {
    background-color: #F22200;
    color: #FFF;
    font-size: 10px;
    display: inline-block;
    font-weight: bold;
    border: none;
    margin:2px 0 0 10px;
    padding: 2px 5px 1px 5px;
    cursor: pointer;
    text-transform: uppercase;
    vertical-align: top;
}

#clic-coursdeb:hover {
    background-color: #FFF;
    color: #F22200;
    font-weight: bolder;
}
#clic-new {
    background-color: #F22200;
    color: #FFF;
    font-size: 10px;
    display: inline-block;
    font-weight: bold;
    border: none;
    margin:2px 0 0 10px;
    padding: 2px 5px 1px 5px;
    cursor: pointer;
    text-transform: uppercase;
    vertical-align: top;
}

#clic-new:hover {
    background-color: #FFF;
    color: #F22200;
    font-weight: bolder;
}
#clic-presse {
    background-color: #F22200;
    color: #FFF;
    font-size: 10px;
    display: inline-block;
    font-weight: bold;
    border: none;
    margin:2px 0 0 10px;
    padding: 2px 5px 1px 5px;
    cursor: pointer;
    text-transform: uppercase;
    vertical-align: top;
}

#clic-presse:hover {
    background-color: #FFF;
    color: #F22200;
    font-weight: bolder;
}
.caption {
	background: #333;
	background: rgba(67,67,67, 0.99);
	padding: 10px;
	font-size: 15px;
	color: #E7E7E7;
	
}
.caption-title{
	color: #fff;
	font-size: 20px;
	font-weight: normal;
	line-height: 20px;
	display: block;
}
.caption a img {
	display: inline;
	margin-bottom: -1px;
	width: auto;
	height: auto;
}
.caption a .spe {
	width: 79px;
	display: inline;
	margin-bottom: -1px;
}
#profs {
	width: 656px;
	margin-top: 25px;
}
.caption a img {
}
#profs-top {
	background-color: #FFF;
	padding-top: 10px;
	padding-left: 15px;
	padding-bottom: 10px;
	padding-right: 10px;
	z-index: 0;
}
#profs-bottom {
	width: 656px;
	background-image: url(../images/cadre_gris.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	float: left;
	padding-bottom: 12px;
	margin-bottom: 25px;
}
#profs-bottom p {
	line-height: 1.1em;
}
#profs-bottom-left {
	float: left;
	width: 313px;
	padding-left: 15px;
	position: relative;
}
#profs-bottom h3 a:hover {
	text-decoration: none;
}
a.boutoncoursprof {
	background-image: url(../images/biographie.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	display: block;
	height: 13px;
	width: 69px;
	right: 876px;
	position: absolute;
	top: 75px;
	visibility: visible;
	left: 107px;
	z-index: 1;
	overflow: hidden;
}
a.boutoncoursprof:hover {
	background-position: 0px -13px;
}
#profs-bottom-right {
	float: right;
	width: 313px;
	padding-left: 13px;
	position: relative;
}
.prof-cadre {
	float: left;
	width: 310px;
	margin-top: 12px;
	position: relative;
}
.prof-cadre p {
	font-size: 13px;
}
.trait-epais {
	font-weight: bold;
	color: #C0231F;
	margin-right: -2px;
}
.prof-img {
	float: left;
	height: 95px;
	width: 95px;
	margin-right: 10px;
}
#clear {
	display:block;
	clear:both;
}
#clearight {
	display: block;
	clear: right;
}
#cours {
	width: 656px;
}
#cours-top {
	background-color: #FFF;
	padding-top: 10px;
	padding-left: 15px;
	padding-bottom: 10px;
	padding-right: 15px;
	z-index: 0;
}
#cours-bottom {
	width: 626px;
	padding-top: 12px;
	padding-right: 15px;
	padding-left: 15px;
	position: relative;
	background-image: url(../images/cadre_gris.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	margin-bottom: 35px;
	padding-bottom: 30px;
}
#cours-bottom p {
	line-height: 1.1em;
	margin-bottom: 5px;
}
a.boutondebutant {
	background-image: url(../images/debutant.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	display: block;
	height: 16px;
	width: 72px;
	right: 876px;
	position: absolute;
	top: 290px;
	visibility: visible;
	left: 15px;
	z-index: 1;
	overflow: hidden;
}
a.boutondebutant:hover {
	background-position: 0px -16px;
}
a.boutonamateur {
	background-image: url(../images/intermediaire.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	display: block;
	height: 16px;
	width: 102px;
	right: 876px;
	position: absolute;
	top: 290px;
	visibility: visible;
	left: 105px;
	z-index: 1;
	overflow: hidden;
}
a.boutonamateur:hover {
	background-position: 0px -16px;
}
a.boutonetudiant {
	background-image: url(../images/avance.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	display: block;
	height: 16px;
	width: 56px;
	right: 876px;
	position: absolute;
	top: 290px;
	visibility: visible;
	left: 225px;
	z-index: 1;
	overflow: hidden;
}
a.boutonetudiant:hover {
	background-position: 0px -16px;
}
#ensavoirplusbleu {
	position:absolute;
	left:15px;
	top:245px;
	width:71px;
	height:16px;
	z-index:1;
	visibility: visible;
	overflow: visible;
}
#ensavoirplusvert {
	position:absolute;
	left:105px;
	top:245px;
	width:115px;
	height:16px;
	z-index:1;
	visibility: visible;
}
#ensavoirplusorange {
	position:absolute;
	left:240px;
	top:245px;
	width:67px;
	height:16px;
	z-index:1;
	visibility: visible;
}
.double-trait1 {
	color: #3A57A0;
	letter-spacing: 1px;
}
.double-trait2 {
	color: #73BE1E;
	letter-spacing: 1px;
}
.double-trait3 {
	color: #FF7800;
	letter-spacing: 0.1em;
}
#partenaires {
	border: 1px solid #C6CACB;
	position: relative;
	background-color: #FFF;
	margin-bottom: 25px;
	float: left;
	width: 312px;
	margin-right: 25px;
}
#partenaires-top {
	padding-top: 9px;
	padding-left: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #C6CACB;
	padding-bottom: 6px;
}
#partenaires-bottom {
	padding-top: 10px;
	background-color: #FFF;
	padding-bottom: 10px;
}
#partenaires-bottom ul {
	list-style-type: none;
	margin-left: 10px;
	margin-right: 10px;
}
#partenaires-bottom a:hover {
	text-decoration: underline;
}
#reseaux {
	float: left;
	margin-bottom: 35px;
	border: 1px solid #C6CACB;
	width: 656px;
	overflow: hidden;
}
#reseaux-top {
	padding-top: 9px;
	padding-left: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #C6CACB;
	padding-bottom: 12px;
	position: relative;
	height: 20px;
}
.floatleft {
	float: left;
}
#reseaux-bottom {
	background-color: #FFF;
	padding: 10px;
}
.facebook {
	background-image: url(../images/facebook.png);
	background-repeat: no-repeat;
	height: 25px;
	width: 25px;
	display: block;
	background-position: bottom;
	float: left;
}
.facebook:hover {
	background-position: 0px 0px;
}
.twitter {
	background-image: url(../images/twitter.png);
	background-repeat: no-repeat;
	height: 25px;
	width: 25px;
	display: block;
	background-position: bottom;
	float: left;
	margin-left: 5px;
}
.twitter:hover {
	background-position: 0px 0px;
}
.youtube {
	background-image: url(../images/youtube.png);
	background-repeat: no-repeat;
	height: 25px;
	width: 69px;
	display: block;
	background-position: bottom;
	float: left;
	margin-left: 5px;
}
.youtube:hover {
	background-position: 0px 0px;
}
#right {
	width: 272px;
	float: right;
}
#news {
	background-color: #FFF;
	margin-bottom: 25px;
	border: 1px solid #C6CACB;
	overflow: hidden;
	margin-top: 0px;
}
#news-top {
	padding-top: 5px;
	padding-left: 8px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #C6CACB;
	padding-bottom: 2px;
}
#news-bottom {
	background-color: #FFF;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 10px;
}
#news-bottom a:hover {
	text-decoration: underline;
}
.news-titre  {
	font-weight: bold;
	font-size: 13px;
		}
.news-texte {
	font-size: 13px;
}

.ticker {
	width: 252px;
	height: 120px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}

#ticker_02 {
	height: 155px;
}

.ticker li {
	height: 90px;
	
}
#nouveau {
	border: 1px solid #C6CACB;
	margin-bottom: 15px;
}
#etaussi {
	margin-top: 0px;
	margin-bottom: 25px;
}
#etaussi-top {
	background-color: #f0f0f0;
}
#etaussi-bottom {
	background-color: #e6e6e6;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #C6CACB;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
	padding-top: 20px;
	 display: flex;
  justify-content: center;
}

#etaussi-bottom-infos {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#etaussi-bottom-infos .trustpilot-widget {
  width: 60%;          /* pour matcher ton data-style-width */
  max-width: 420px;    /* optionnel : look plus premium */
  min-width: 260px;    /* optionnel : évite trop étroit */
  margin-left: auto;
  margin-right: auto;
}

.surtitresright {
	margin-top: 15px;
	margin-bottom: 15px;
	margin-left: 10px;
}
#abonne {
	border: 1px solid #C6CACB;
	margin-bottom: 25px;
}
#abonne #abonne-bottom a:hover {
	text-decoration: underline;
}
#nouveau-top {
	background-color: #FFF;
	padding-top: 9px;
	padding-left: 10px;
	overflow: hidden;
	padding-bottom: 0px;
}
#abonne-top {
	background-color: #FFF;
	padding-top: 9px;
	padding-left: 10px;
	overflow: hidden;
	padding-bottom: 6px;
}
#nouveau-bottom {
	background-color: #F5F5F5;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}
#abonne-bottom img {
	float: left;
	margin-right: 10px;
}
#abonne-bottom {
	background-color: #F5F5F5;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	line-height: 14px;
	font-size: 13px;
}
.titresright {
	color: #BA0000;
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
}
#nouveau-bottom ul {
	list-style-type: none;
	margin-bottom: 10px;
}
#plus {
	border: 1px solid #C6CACB;
	margin-bottom: 25px;
}
#plus-top {
	background-color: #FFF;
	padding-top: 7px;
	padding-left: 10px;
	overflow: hidden;
	padding-bottom: 2px;
}
#plus-bottom {
	background-color: #F5F5F5;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}
#plus-bottom ul {
	list-style-type: none;
	margin-bottom: 10px;
}
#plus-bottom a:hover {
	text-decoration: underline;
}

#presse {
	border: 1px solid #C6CACB;
	margin-bottom: 25px;
}
#presse-top {
	background-color: #FFF;
	padding-top: 9px;
	padding-left: 10px;
	overflow: hidden;
	padding-bottom: 6px;
}
#presse-bottom {
	background-color: #F5F5F5;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
}
.news-texte a:hover {
	text-decoration: underline;
}
#offreabo {
/*	border: 2px solid #d10612; */
	margin-bottom: 25px;
	position: relative;
}

#offreabo-top {
	background-color: #FFF;
	padding-top: 0px;
	padding-left: 0px;
	
	padding-bottom: 0px;
	text-align:center;
	position: relative;
}
.textv {
	 writing-mode: lr-tb;
	position: relative;
	/* font-weight: bold; */
	font-size:13px;
	top:125px;
	left:145px;
	-webkit-transform: rotate(90deg);	
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);	
}
.texth {
	font-size: 14px;
    margin: 0 2px;
    color: #fcff00;
    background-color:#000;

}
#offreabo-top img{
	margin: 0 auto 0 auto;
	display:block;

	}
#offreabo-bottom {
	background-color: #D10612;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	color: #FFF;
}
#offreabo-bottom a {
	color: #FFF;
}
#offreabo-bottom a:hover {
	color: #FFF;
	text-decoration: underline;
}
.offreabo-a1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}
.cadrevideo {
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: auto;
	margin-right: auto;
}
.derniersjours {
	display: block;
	position: absolute;
	top: -20px;
	right: -27px;
}
#compte {	
	font-weight: bold;
	color: #000000;
	font-size: 15px;
	}
#comptem {	
	font-weight: bold;
	color: #000000;
	font-size: 15px;
	background-color: #e1e1e6;
    padding: 0 0px 0 5px;
	}	
#compte2 {	
	display: block;
	font-weight: bold;
	/* color: #615e5e; */
	color: #d11a10;
	/*color: #aa926f;*/
	font-size: 15px;
	}
a.player {
	width:251px;
	height:171px;
	color:#fff;
	text-decoration:none;
	cursor:pointer;
	-moz-box-shadow:0 0 40px rgba(100, 118, 173, 0.5);
	display: block;
}
#pleinecran {
	display: block;
	float: right;
	margin-right: 22px;
	font-size: 10px;
}
#ban1 {
	position: relative;
	border: 1px solid #C6CACB;
	margin-bottom: 25px;
	background-color: #F5F5F5;
	text-align: center;
	font-size: 10px;
	letter-spacing: 0.1em;
	color: #000;
	font-weight: bold;
}
#ban2 {
	position: relative;
	border: 1px solid #C6CACB;
	margin-bottom: 25px;
	background-color: #F5F5F5;
	text-align: center;
	font-size: 10px;
	letter-spacing: 0.1em;
	color: #000;
	font-weight: bold;
}
#ban3 {
	position: relative;
	border: 1px solid #C6CACB;
	margin-bottom: 25px;
	background-color: #F5F5F5;
	text-align: center;
	font-size: 10px;
	letter-spacing: 0.1em;
	color: #000;
	font-weight: bold;
}
.pub-top {
	text-align: center;
	font-size: 10px;
	letter-spacing: 0.1em;
	color: #000;
	font-weight: bold;
}
.pub-top2 {
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.1em;
	color: #B81526;
	font-weight: bold;
}
.pub-bottom {
	text-align: center;
	padding-bottom: 10px;
}
#mag {
	border: 1px solid #C6CACB;
	position: relative;
	margin-bottom: 25px;
}
#mag-top {
	background-color: #FFF;
	padding-top: 9px;
	padding-left: 10px;
	overflow: hidden;
	padding-bottom: 6px;
}
#mag-bottom {
	background-color: #F5F5F5;
	padding-top: 10px;
	padding-bottom: 10px;
}
#mag-bottom ul {
	list-style-type: none;
	margin-left: 10px;
	margin-right: 10px;
}
.nom {
	text-transform: capitalize;
}
.mag-surtitre {
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
	color: #D10000;
	margin-top: 10px;
}
.mag-titre {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 14px;
	margin-bottom: 3px;
	line-height: 1em;
	margin-top: 0px;
}
.mag-titre a:hover {
	text-decoration: underline;
}
#cadrevideo {
	margin-top: 15px;
	margin-bottom: 5px;
	height: 201px;
	margin-right: auto;
	margin-left: auto;
	width: 252px;
}
#bdp {
	background-color: #FFF;
	color: #666;
	border: 1px solid #C6CACB;
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 15px;
	padding: 10px;
}
#bdp ul {
	list-style-type: none;
}
#bdp ul    a{
	color: #666;
	font-family: Arial, Helvetica, sans-serif;
}
#bdp ul a:hover {
	color: #666;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: underline;
}
#bdp ul a:visited {
	color: #666;
	font-family: Arial, Helvetica, sans-serif;
}
.col1 {
	float: left;
	text-align: justify;
	width: 45%;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #C6CACB;
	padding-right: 35px;
}
.col1 p {
	color: #999;
	font-size: 11px;
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.3em;
}
.col1 p a:visited {
	color: #666;
	text-decoration: none;
}
.col1 p a:link {
	color: #666;
	text-decoration: none;
}
.col1 p a:hover {
	color: #666;
	text-decoration: none;
}
.col2  {
	float: left;
	margin-left: 35px;
	margin-right: 10px;
}
.col3 {
	float: left;
	margin-left: 35px;
	margin-right: 10px;
}
.titre1    {
	font-weight: bold;
	margin-bottom: 3px;
}
.titre2 {
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 3px;
}
.titre3 {
	font-weight: bold;
	margin-bottom: 3px;
}
.titre4   {
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 3px;
}
#footer {
	text-align: center;
}
#footer a:hover {
	text-decoration: underline;
}
.slicknav_menu {
	display:none;
}




@media(max-width: 980px){
.desktop {
	display: none;
}
.mobile {
	display: block;
}
body {
	font-size: 14px;
	-webkit-text-size-adjust: 100%;
}

#container {
	width: auto;
	padding: 10px;
	margin: 10px 0 0 0;
	background-image: none;
}
#header {
	width: 100%;
	margin-left: 0px;
	margin-right: 0px;
	text-align:center;
}
#header-top {
	margin-bottom:0;
	margin-top:-10px;
}
#header-top a img {
	width: 100%;
	padding:0px;
}
#mainmenu {
	margin:10px 0 10px 0;
}	
#offrespe-zone {
	display: none;
}
#offrespe {
	display: none;
}
.newboutoncompte1 {	
	display: none;	
}
.newboutoncompte2 {
	display: none;
}
.newboutonmonespace2 {
	display: none;
}
.newboutondeconnexion {
	display: none;
}
.newboutonabo {
	display: none;
}

a.boutoncompte1 {	
	display: none;	
}
a.boutoncompte2 {
	display: none;
}
a.boutonmonespace2 {
	display: none;
}
a.boutondeconnexion {
	display: none;
}
a.boutonabo {
	display: none;
}
a.boutoncours {
	display: none;
}

#content {
	width: 100%;
	margin: 10px 0 0 0;
}
#center {
	width: auto;
	float: none;
	margin: 0;
}
#boutonsm {
	display:block;
}
.newboutoncompte1m {
	background-color: #6a190c;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    border: none;
    padding: 1px 5px 1px 5px;
    cursor: pointer;
    text-transform: uppercase;
	display: block;
	height: 16px;
	width: 101px;
	position: relative;
	bottom: -31px;
	margin-right:10px;
	float:right;
	z-index: 4;
	overflow: hidden;
	visibility: visible;
}
.newboutoncompte1m:hover {
	background-color: #e2e2e2;
    color: #6a190c;
}
.newboutoncompte2m {
	background-color: #6a190c;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    border: none;
    padding: 1px 5px 1px 5px;
    cursor: pointer;
    text-transform: uppercase;
	display: block;
	height: 16px;
	width: 101px;
	position: relative;
	bottom: -31px;
	margin-right:10px;
	float:right;
	z-index: 4;
	overflow: hidden;
	visibility: visible;
}
.newboutoncompte2m:hover {
	background-color: #e2e2e2;
    color: #6a190c;
}
.newboutonabom {
	background-color: #F22200;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    border: none;
    padding: 1px 5px 1px 5px;
    cursor: pointer;
    text-transform: uppercase;
	display: block;
	height: 16px;
	width: 81px;
	position: relative;
	bottom: -31px;
	float:right;
	margin-right:5px;
	z-index: 5;
	overflow: hidden;
	visibility: visible;
}
.newboutonabom:hover {
	background-color: #e2e2e2;
    color: #F22200;
}
.newboutondeconnexionm {
	background-color: #F22200;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    border: none;
    padding: 1px 5px 1px 5px;
    cursor: pointer;
    text-transform: uppercase;
	display: block;
	height: 16px;
	width: 99px;
	position: relative;
	float:right;
	bottom: -31px;
	margin-right:10px;
	z-index: 3;
	overflow: hidden;
	visibility: visible;
}
.newboutondeconnexionm:hover {
	background-color: #e2e2e2;
    color: #F22200;
}


a.boutoncompte1m {
	background-image: url(../images/moncompte.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	display: block;
	height: 16px;
	width: 93px;
	position: relative;
	bottom: -31px;
	margin-right:10px;
	float:right;
	z-index: 4;
	overflow: hidden;
	visibility: visible;
}
a.boutoncompte1m:hover {
	background-position: 0px -16px;
}
a.boutonabom {
	background-image: url(../images/sabonner.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	display: block;
	height: 16px;
	width: 81px;
	position: relative;
	bottom: -31px;
	float:right;
	margin-right:5px;
	z-index: 5;
	overflow: hidden;
	visibility: visible;
}
a.boutonabom:hover {
	background-position: 0px -16px;
}
a.boutondeconnexionm {
	background-image: url(../images/deconnexion.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	display: block;
	height: 16px;
	width: 99px;
	position: relative;
	float:right;
	bottom: -31px;
	margin-right:10px;
	z-index: 3;
	overflow: hidden;
	visibility: visible;
}
a.boutondeconnexionm:hover {
	background-position: 0px -16px;
}
#megaban {
	width: 100%;
}
#banner {
	width: auto;
	margin-bottom:0px;
}

.caption {
	height: auto;	
}

.caption a img {
	display: inline;
	margin-left: 0px;
	margin-top:5px;

}
#offreabo {
	width: auto;
	margin-top: 25px;
	text-align: center;
	
}
#offreabo-top a img {
	width: 100%;
}
.derniersjours {
	right: 0px;
	top: 0px;
}
#profs {
	width: auto;
	margin-top:15px;
}
#profs-top {
	padding: 10px;
	background-color: #CCC;
}
h3  {
	font-size: 17px;
	line-height: 1em;
}
.prof-cadre h3 {
	font-size: 16px;
	margin-top: 5px;
}
#profs-bottom {
	width: 100%;
	float: none;
	padding: 0;
	margin-bottom: 0px;
	background-color: #F5F5F5;
	background-image: none;
}
#profs-bottom-left {
	float: none;
	width: 100%;
	padding: 0;
}
.prof-cadre p {
	background-image: none;
	padding-right: 5px;
}
.prof-cadre {
	width: 100%;
	margin-top: 0px;
	margin-bottom: 12px;
}
#profs-bottom-right {
	float: none;
	width: 100%;
	padding: 0px;
}

#cours {
	width: auto;
	margin-top: 25px;
}
#cours-top {
	padding: 10px;
	background-color: #CCC;
}
#cours-bottom {
	width: auto;
	padding: 10px;
	margin-top: 0px;
	float: none;
	background-color: #F5F5F5;
	margin-bottom: 0px;
	height: auto;
	background-image: none;
}
#cours-bottom p {
	margin-bottom: 0px;
}
#cours-bottom h4 {
	margin-top: 0px;
}
a.boutondebutant {	
	display: none;	
}
a.boutonamateur {	
	display: none;	
}
a.boutonetudiant {	
	display: none;	
}
#part-fb {
	display: none;
}
#right {
	float: none;
	width: 100%;
	clear: both;
}
#news {
	width: 100%;
	margin-top: 25px;
}
#news-top {
	width: auto;
}
#abonne {
}
#abonne-bottom {
	height: 85px;
	font-size: 14px;
}
#news-bottom {
	width: auto;
	padding: 10px;
}
#plus {
	display: none;
}
#ban1 {
	text-align:center;
}
#ban2 {
	text-align:center;
}
#ban3 {
	text-align:center;
}
#mag {
	margin-bottom:25;
}
#reseau {
	margin-bottom:0;
}
#bdp {
	padding: 10px;
}
.col1  {
	float: none;
	width: 100%;
	display: none;
}
.col2  {
	float: none;
	width: 100%;
	margin: 0 0 30px 0;
	display: block;
}
.col3  {
	float: none;
	width: 100%;
	margin: 30px 0 0 0;
	display: block;
}
#footer {
	width: 100%;
}
/* Menu mobile : hamburger seul */
@media (max-width: 980px) {
    .flexy-menu li.showhide span.title {
        display: none !important;
    }

    .flexy-menu li.showhide span.icon {
        float: left;
        margin-left: 0;
    }
}
@media(max-width: 480px){

}
}

/* ==========================================================
   HOMEPAGE RENTRÉE 2026
   Ajout volontairement isolé pour préserver les pages historiques
   ========================================================== */

.rentree-home {
    width: 946px;
    margin: 19px 17px 0 17px;
    text-align: left;
    background: #fff;
}

.rentree-home * {
    box-sizing: border-box;
}

.rentree-home h1,
.rentree-home h2,
.rentree-home h3,
.rentree-home p {
    margin: 0;
}

.rentree-hero {
    min-height: 470px;
    padding: 58px 54px 46px 54px;
    background:
        linear-gradient(110deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.96) 53%, rgba(244,244,244,0.92) 100%);
    border-top: 6px solid #d10612;
    position: relative;
}

.rentree-hero-copy {
    max-width: 660px;
}

.rentree-radio-kicker {
    font-size: 14px;
    font-weight: 700;
    color: #6a6a6a;
    margin-bottom: 13px;
}

.rentree-label {
    display: inline-block;
    padding: 6px 10px 5px 10px;
    background: #d10612;
    color: #fff;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .08em;
}

.rentree-main-title {
    margin-top: 18px !important;
    color: #171717;
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 38px;
    line-height: 1.14;
    font-weight: 400;
    max-width: 760px;
}

.rentree-lead {
    margin-top: 17px !important;
    max-width: 650px;
    color: #555;
    font-size: 18px;
    line-height: 1.45;
}

.rentree-price-line {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 27px;
}

.rentree-old-price {
    color: #777;
    font-size: 20px;
    text-decoration: line-through;
}

.rentree-price {
    color: #d10612;
    font-size: 45px;
    line-height: 1;
    font-weight: 700;
}

.rentree-price-period {
    color: #222;
    font-size: 18px;
    font-weight: 700;
}

.rentree-price-detail {
    margin-top: 8px !important;
    color: #444;
    font-size: 15px;
}

.rentree-cta {
    display: inline-block;
    margin-top: 22px;
    padding: 14px 21px 13px 21px;
    border-radius: 2px;
    font-size: 15px;
    line-height: 1.1;
    font-weight: 700;
    text-transform: uppercase;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.rentree-cta:hover {
    transform: translateY(-1px);
}

.rentree-cta-primary,
.rentree-cta-primary:link,
.rentree-cta-primary:visited {
    background: #d10612;
    color: #fff;
}

.rentree-cta-primary:hover {
    background: #a9000a;
    color: #fff;
}

.rentree-deadline {
    margin-top: 9px !important;
    color: #777;
    font-size: 12px;
}

.rentree-hero-proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 42px;
    max-width: 760px;
    border: 1px solid #dedede;
    background: #dedede;
}

.rentree-proof-card {
    padding: 15px 17px;
    background: #fff;
}

.rentree-proof-card strong {
    display: block;
    color: #222;
    font-size: 20px;
    margin-bottom: 2px;
}

.rentree-proof-card span {
    color: #666;
    font-size: 12px;
    line-height: 1.3;
}

.rentree-section {
    padding: 58px 54px;
    border-top: 1px solid #e1e1e1;
}

.rentree-section-heading {
    max-width: 720px;
    margin-bottom: 30px;
}

.rentree-eyebrow {
    display: block;
    color: #d10612;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    margin-bottom: 8px;
}

.rentree-section h2,
.rentree-final-offer h2 {
    color: #222;
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 29px;
    line-height: 1.22;
    font-weight: 400;
}

.rentree-section-heading p,
.rentree-wide-copy {
    margin-top: 12px !important;
    color: #555;
    font-size: 16px;
    line-height: 1.55;
}

.rentree-wide-copy {
    max-width: 820px;
}

.rentree-text-link {
    display: inline-block;
    margin-top: 18px;
    color: #d10612 !important;
    font-size: 14px;
    font-weight: 700;
}

.rentree-text-link:hover {
    text-decoration: underline;
}

.rentree-professors {
    background: #f5f5f5;
}

.rentree-prof-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.rentree-prof-card {
    display: flex;
    min-height: 118px;
    align-items: center;
    gap: 16px;
    padding: 11px;
    background: #fff;
    border: 1px solid #e2e2e2;
}

.rentree-prof-card:hover {
    border-color: #c7c7c7;
}

.rentree-prof-card img {
    width: 92px;
    height: 92px;
    object-fit: cover;
    flex: 0 0 92px;
}

.rentree-prof-card strong {
    display: block;
    color: #222;
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 5px;
}

.rentree-prof-card strong:before {
    content: "I ";
    color: #d10612;
}

.rentree-prof-card span {
    display: block;
    color: #555;
    font-size: 12px;
    line-height: 1.35;
}

.rentree-level-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.rentree-level-card {
    padding: 26px 23px 24px 23px;
    border: 1px solid #dedede;
    background: #fff;
}

.rentree-level-tag {
    display: inline-block;
    margin-bottom: 16px;
    padding: 4px 7px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    background: #777;
}

.rentree-level-beginner .rentree-level-tag { background: #6ebd2b; }
.rentree-level-intermediate .rentree-level-tag { background: #325bd2; }
.rentree-level-advanced .rentree-level-tag { background: #f27a14; }

.rentree-level-card h3 {
    color: #222;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
}

.rentree-level-card p {
    margin-top: 11px !important;
    min-height: 117px;
    color: #555;
    font-size: 14px;
    line-height: 1.45;
}

.rentree-level-card a {
    color: #d10612 !important;
    font-size: 13px;
    font-weight: 700;
}

.rentree-included {
    background: #f5f5f5;
}

.rentree-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.rentree-benefit {
    min-height: 116px;
    padding: 20px;
    background: #fff;
    border: 1px solid #e2e2e2;
}

.rentree-benefit strong {
    display: block;
    color: #222;
    font-size: 15px;
    margin-bottom: 6px;
}

.rentree-benefit span {
    color: #555;
    font-size: 13px;
    line-height: 1.45;
}

.rentree-reviews {
    text-align: center;
}

.rentree-reviews .rentree-section-heading {
    margin-left: auto;
    margin-right: auto;
}

.rentree-trustpilot {
    max-width: 620px;
    margin: 0 auto;
    min-height: 90px;
}

.rentree-final-offer {
    padding: 55px 54px 48px 54px;
    text-align: center;
    background: #d10612;
    color: #fff;
}

.rentree-final-offer .rentree-label {
    background: #fff;
    color: #d10612;
}

.rentree-final-offer h2 {
    margin-top: 17px !important;
    color: #fff;
    font-size: 31px;
}

.rentree-final-price {
    margin-top: 18px;
}

.rentree-final-price .rentree-old-price {
    color: rgba(255,255,255,.72);
}

.rentree-final-price strong {
    margin-left: 10px;
    color: #fff;
    font-size: 42px;
}

.rentree-final-offer > p {
    max-width: 650px;
    margin: 12px auto 0 auto !important;
    font-size: 15px;
    line-height: 1.45;
}

.rentree-cta-light,
.rentree-cta-light:link,
.rentree-cta-light:visited {
    background: #fff;
    color: #d10612;
}

.rentree-cta-light:hover {
    background: #f0f0f0;
    color: #a9000a;
}

.rentree-final-note {
    font-size: 12px !important;
    opacity: .85;
}

.rentree-monthly {
    max-width: 650px;
    margin: 32px auto 0 auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.35);
}

.rentree-monthly span,
.rentree-monthly strong {
    display: block;
}

.rentree-monthly strong {
    margin-top: 4px;
    font-size: 15px;
}

.rentree-monthly a {
    display: inline-block;
    margin-top: 8px;
    color: #fff !important;
    text-decoration: underline;
}

@media (max-width: 980px) {
    .rentree-home {
        width: 100%;
        margin: 10px 0 0 0;
    }

    .rentree-hero,
    .rentree-section,
    .rentree-final-offer {
        padding-left: 25px;
        padding-right: 25px;
    }

    .rentree-hero {
        min-height: 0;
        padding-top: 34px;
        padding-bottom: 32px;
    }

    .rentree-radio-kicker {
        font-size: 13px;
    }

    .rentree-main-title {
        font-size: 31px;
    }

    .rentree-lead {
        font-size: 16px;
    }

    .rentree-price {
        font-size: 39px;
    }

    .rentree-hero-proof,
    .rentree-level-grid,
    .rentree-benefits {
        grid-template-columns: 1fr;
    }

    .rentree-proof-card {
        padding: 12px 14px;
    }

    .rentree-prof-grid {
        grid-template-columns: 1fr;
    }

    .rentree-section {
        padding-top: 42px;
        padding-bottom: 42px;
    }

    .rentree-section h2,
    .rentree-final-offer h2 {
        font-size: 25px;
    }

    .rentree-level-card p {
        min-height: 0;
    }

    .rentree-benefit {
        min-height: 0;
    }
}

@media (max-width: 560px) {
    .rentree-hero,
    .rentree-section,
    .rentree-final-offer {
        padding-left: 18px;
        padding-right: 18px;
    }

    .rentree-main-title {
        font-size: 27px;
    }

    .rentree-price-line {
        flex-wrap: wrap;
        gap: 8px 10px;
    }

    .rentree-old-price {
        font-size: 18px;
    }

    .rentree-price {
        font-size: 38px;
    }

    .rentree-price-period {
        font-size: 16px;
    }

    .rentree-cta {
        width: 100%;
        text-align: center;
        padding-left: 12px;
        padding-right: 12px;
    }

    .rentree-prof-card {
        align-items: flex-start;
    }

    .rentree-prof-card img {
        width: 78px;
        height: 78px;
        flex-basis: 78px;
    }

    .rentree-final-price strong {
        font-size: 38px;
    }
}


/* ==========================================================
   AJUSTEMENTS HERO — version affinée
   Piano uniquement dans le premier bloc, très discret.
   ========================================================== */

.rentree-home {
    background: #fff;
}

/* Le fond historique du container ne doit plus transparaître
   sous toute la longueur de la nouvelle homepage. */
#container {
    background-image: none;
    background-color: #fff;
}

/* Hero : piano subtil, surtout visible à droite, texte toujours très lisible */
.rentree-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.98) 0%,
            rgba(255,255,255,0.97) 44%,
            rgba(255,255,255,0.91) 66%,
            rgba(255,255,255,0.86) 100%
        ),
        url('/images/fond_piano.jpg') right center / cover no-repeat;
}

/* Légère matière visuelle sans gêner le texte */
.rentree-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.02) 0%,
        rgba(255,255,255,0.00) 70%,
        rgba(255,255,255,0.08) 100%
    );
}

.rentree-hero-copy,
.rentree-hero-proof {
    position: relative;
    z-index: 1;
}

/* Hero un peu plus compact et plus direct */
.rentree-hero {
    min-height: 440px;
    padding-top: 46px;
    padding-bottom: 38px;
}

.rentree-main-title {
    max-width: 680px;
    font-size: 37px;
}

.rentree-lead {
    max-width: 610px;
    margin-top: 14px !important;
}

.rentree-price-line {
    margin-top: 24px;
}

.rentree-price-detail {
    margin-top: 7px !important;
    font-size: 14px;
    color: #4f4f4f;
}

.rentree-hero-proof {
    margin-top: 34px;
}

/* Les sections sous le hero deviennent opaques et propres */
.rentree-section,
.rentree-professors,
.rentree-included,
.rentree-reviews,
.rentree-final-offer {
    position: relative;
    z-index: 1;
}

/* Plus de respiration après le hero */
.rentree-intro {
    background: #fff;
}

/* Mobile : conserver le piano très discret sans diminuer la lisibilité */
@media (max-width: 980px) {
    .rentree-hero {
        background:
            linear-gradient(
                90deg,
                rgba(255,255,255,0.98) 0%,
                rgba(255,255,255,0.96) 62%,
                rgba(255,255,255,0.90) 100%
            ),
            url('/images/fond_piano.jpg') right center / cover no-repeat;
    }
}

@media (max-width: 560px) {
    .rentree-hero {
        background:
            linear-gradient(
                90deg,
                rgba(255,255,255,0.985) 0%,
                rgba(255,255,255,0.97) 72%,
                rgba(255,255,255,0.93) 100%
            ),
            url('/images/fond_piano.jpg') 72% center / cover no-repeat;
    }

    .rentree-main-title {
        font-size: 27px;
    }
}


/* ==========================================================
   HOMEPAGE RENTRÉE 2026 — V3 FINALE
   Finitions validées : hero piano renforcé, intro supprimée,
   4 bénéfices, niveaux renommés, header resserré.
   ========================================================== */

/* Le hero devient plus visuel à droite : touches noires et blanches plus lisibles,
   tout en conservant une zone très claire derrière le texte. */
.rentree-hero {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.985) 0%,
            rgba(255,255,255,0.975) 38%,
            rgba(255,255,255,0.89) 58%,
            rgba(255,255,255,0.72) 78%,
            rgba(255,255,255,0.58) 100%
        ),
        url('/images/fond_piano.jpg') 72% center / cover no-repeat;
    padding-top: 42px;
    padding-bottom: 28px;
}

.rentree-hero::after {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.00) 0%,
            rgba(255,255,255,0.00) 60%,
            rgba(255,255,255,0.05) 100%
        );
}

.rentree-hero-proof {
    margin-top: 30px;
}

/* La section professeurs suit désormais directement le hero. */
.rentree-professors {
    border-top: 1px solid #e1e1e1;
}

/* Professeurs légèrement plus présents sans alourdir la grille. */
.rentree-prof-card img {
    width: 98px;
    height: 98px;
    flex-basis: 98px;
}

.rentree-prof-card strong {
    font-size: 16px;
}

.rentree-prof-card span {
    font-size: 12.5px;
    line-height: 1.4;
}

/* 4 bénéfices sur une ligne en desktop. */
.rentree-benefits {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.rentree-benefit {
    min-height: 132px;
    padding: 18px;
}

.rentree-benefit strong {
    font-size: 14px;
    line-height: 1.25;
}

.rentree-benefit span {
    font-size: 12.5px;
    line-height: 1.45;
}

/* Réduction de quelques espaces verticaux pour une page plus dynamique. */
.rentree-section {
    padding-top: 48px;
    padding-bottom: 48px;
}

.rentree-section-heading {
    margin-bottom: 24px;
}

.rentree-levels {
    padding-top: 46px;
    padding-bottom: 46px;
}

.rentree-included {
    padding-top: 44px;
    padding-bottom: 44px;
}

.rentree-reviews {
    padding-top: 42px;
    padding-bottom: 42px;
}

/* Header historique : resserrement discret pour éviter le retour à la ligne. */
#mainmenu {
    font-size: 1.02em;
    letter-spacing: 0.075em;
}

.flexy-menu > li > a {
    padding-left: 11px !important;
    padding-right: 11px !important;
}

/* Mobile et tablette */
@media (max-width: 980px) {
    .rentree-hero {
        background:
            linear-gradient(
                90deg,
                rgba(255,255,255,0.985) 0%,
                rgba(255,255,255,0.96) 58%,
                rgba(255,255,255,0.80) 100%
            ),
            url('/images/fond_piano.jpg') 72% center / cover no-repeat;
    }

    .rentree-benefits {
        grid-template-columns: 1fr 1fr;
    }

    .rentree-benefit {
        min-height: 120px;
    }
}

@media (max-width: 560px) {
    .rentree-hero {
        background:
            linear-gradient(
                90deg,
                rgba(255,255,255,0.99) 0%,
                rgba(255,255,255,0.975) 66%,
                rgba(255,255,255,0.86) 100%
            ),
            url('/images/fond_piano.jpg') 72% center / cover no-repeat;
    }

    .rentree-benefits {
        grid-template-columns: 1fr;
    }

    .rentree-prof-card img {
        width: 82px;
        height: 82px;
        flex-basis: 82px;
    }
}


/* ==========================================================
   HOMEPAGE RENTRÉE 2026 — V4 FINITIONS
   - prix barré rapproché de 199 €
   - bloc Trustpilot compacté
   - CTA final rouge réduit d'environ 20 %
   ========================================================== */

/* Prix du hero : rapprocher 232 € de 199 € */
.rentree-price-line {
    gap: 7px;
}

.rentree-old-price {
    margin-right: 0;
}

/* Trustpilot : section plus compacte et plus dense */
.rentree-reviews-compact {
    padding-top: 28px;
    padding-bottom: 26px;
}

.rentree-reviews-compact .rentree-section-heading {
    margin-bottom: 12px;
}

.rentree-reviews-compact .rentree-section-heading p {
    margin-top: 6px !important;
}

.rentree-reviews-compact .rentree-trustpilot {
    max-width: 500px;
    min-height: 72px;
}

.rentree-reviews-compact .trustpilot-widget {
    margin-top: 0;
}

/* Bloc final : plus ramassé, même impact */
.rentree-final-offer {
    padding-top: 38px;
    padding-bottom: 34px;
}

.rentree-final-offer h2 {
    margin-top: 12px !important;
}

.rentree-final-price {
    margin-top: 12px;
}

.rentree-final-offer > p {
    margin-top: 9px !important;
}

.rentree-final-offer .rentree-cta {
    margin-top: 16px;
}

.rentree-final-note {
    margin-top: 7px !important;
}

.rentree-monthly {
    margin-top: 22px;
    padding-top: 18px;
}

@media (max-width: 560px) {
    .rentree-reviews-compact {
        padding-top: 24px;
        padding-bottom: 22px;
    }

    .rentree-final-offer {
        padding-top: 30px;
        padding-bottom: 28px;
    }
}


/* ==========================================================
   HOMEPAGE RENTRÉE 2026 — V5 MOBILE
   Optimisation mobile :
   - professeurs en grille 2 colonnes, descriptions masquées
   - niveaux plus compacts
   - bénéfices en grille 2x2
   - Trustpilot réduit
   ========================================================== */

@media (max-width: 560px) {

    /* PROFESSEURS : 2 colonnes compactes */
    .rentree-prof-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .rentree-prof-card {
        min-height: 0;
        padding: 10px;
        gap: 8px;
        display: block;
        text-align: center;
    }

    .rentree-prof-card img {
        width: 92px;
        height: 92px;
        margin: 0 auto 8px auto;
        display: block;
        float: none;
    }

    .rentree-prof-card strong {
        font-size: 14px;
        line-height: 1.2;
        margin-bottom: 0;
    }

    .rentree-prof-card strong:before {
        content: "";
    }

    .rentree-prof-card span {
        display: none;
    }

    /* NIVEAUX : cartes moins hautes */
    .rentree-level-grid {
        gap: 12px;
    }

    .rentree-level-card {
        padding: 20px 18px 18px 18px;
    }

    .rentree-level-tag {
        margin-bottom: 12px;
    }

    .rentree-level-card h3 {
        font-size: 17px;
    }

    .rentree-level-card p {
        margin-top: 8px !important;
        font-size: 13.5px;
        line-height: 1.4;
    }

    .rentree-level-card a {
        display: inline-block;
        margin-top: 6px;
    }

    /* BÉNÉFICES : grille 2 x 2 */
    .rentree-benefits {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .rentree-benefit {
        min-height: 0;
        padding: 16px 14px;
    }

    .rentree-benefit strong {
        font-size: 13px;
        line-height: 1.2;
    }

    .rentree-benefit span {
        font-size: 12px;
        line-height: 1.35;
    }

    /* TRUSTPILOT : nettement plus compact */
    .rentree-reviews-compact {
        padding-top: 22px;
        padding-bottom: 20px;
    }

    .rentree-reviews-compact .rentree-section-heading {
        margin-bottom: 8px;
    }

    .rentree-reviews-compact .rentree-section-heading h2 {
        font-size: 22px;
    }

    .rentree-reviews-compact .rentree-section-heading p {
        font-size: 13px;
        margin-top: 4px !important;
    }

    .rentree-reviews-compact .rentree-trustpilot {
        max-width: 300px;
        min-height: 54px;
        margin: 0 auto;
        transform: scale(0.78);
        transform-origin: top center;
        margin-bottom: -14px;
    }

    /* Réduction générale des espacements mobiles */
    .rentree-section {
        padding-top: 34px;
        padding-bottom: 34px;
    }

    .rentree-professors {
        padding-top: 32px;
        padding-bottom: 34px;
    }

    .rentree-levels {
        padding-top: 32px;
        padding-bottom: 34px;
    }

    .rentree-included {
        padding-top: 32px;
        padding-bottom: 32px;
    }
}


/* ==========================================================
   HOMEPAGE RENTRÉE 2026 — V6 MOBILE FINITIONS
   ========================================================== */

@media (max-width: 560px) {

    /* Noms des professeurs : légèrement plus discrets */
    .rentree-prof-card strong {
        font-size: 13px;
        line-height: 1.18;
    }

    /* Niveaux : encore un peu plus compacts */
    .rentree-level-grid {
        gap: 10px;
    }

    .rentree-level-card {
        padding: 17px 16px 15px;
    }

    .rentree-level-tag {
        margin-bottom: 10px;
    }

    .rentree-level-card h3 {
        margin-bottom: 0;
    }

    .rentree-level-card p {
        font-size: 13px;
        line-height: 1.35;
        margin-top: 7px !important;
        margin-bottom: 0;
    }

    .rentree-level-card a {
        margin-top: 5px;
    }

    /* Trustpilot : réduire encore le widget sans toucher au titre */
    .rentree-reviews-compact .rentree-trustpilot {
        max-width: 270px;
        transform: scale(0.62);
        transform-origin: top center;
        margin-bottom: -28px;
    }

    .rentree-reviews-compact {
        padding-bottom: 16px;
    }
}


/* ==========================================================
   HOMEPAGE RENTRÉE 2026 — MENU MOBILE OPTIMISÉ
   ========================================================== */

@media (max-width: 980px) {

    #header-bottom {
        height: auto;
        min-height: 54px;
        background: #2f2f2f;
        margin-top: 10px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        position: relative;
    }

    #mainmenu {
        width: 100%;
        margin: 0;
        font-size: 1em;
        letter-spacing: 0;
    }

    #boutonsm {
        display: flex;
        align-items: center;
        gap: 8px;
        position: absolute;
        right: 10px;
        top: 13px;
        transform: none;
        z-index: 20;
    }

    .newboutonabom,
    .newboutoncompte1m,
    .newboutoncompte2m,
    .newboutondeconnexionm {
        position: static;
        float: none;
        bottom: auto;
        margin: 0;
        width: auto;
        height: 28px;
        padding: 0 10px;
        font-size: 11px;
        line-height: 28px;
        border: 0;
        box-sizing: border-box;
        white-space: nowrap;
    }

    .newboutonabom {
        background-color: #d10612;
        color: #fff;
    }

    .newboutoncompte1m,
    .newboutoncompte2m {
        background-color: #5d130c;
        color: #fff;
    }

    .newboutondeconnexionm {
        background-color: #d10612;
        color: #fff;
    }

    #header-bottom .flexy-menu {
        padding-right: 230px;
        box-sizing: border-box;
    }

    .flexy-menu li.showhide {
        min-height: 54px;
        line-height: 54px;
        background: transparent !important;
        color: #fff !important;
        padding: 0 !important;
    }

    .flexy-menu li.showhide span.title {
        color: #fff !important;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: .04em;
        line-height: 54px;
    }

    .flexy-menu li.showhide span.icon {
        margin-top: 16px;
    }

    .flexy-menu li.showhide span.icon em {
        height: 2px;
        background: #cfcfcf;
        margin-bottom: 4px;
    }
}

@media (max-width: 560px) {

    #header-bottom {
        min-height: 52px;
        padding-left: 9px;
        padding-right: 9px;
    }

    #boutonsm {
        right: 9px;
        top: 13px;
        gap: 6px;
    }

    .newboutonabom,
    .newboutoncompte1m,
    .newboutoncompte2m,
    .newboutondeconnexionm {
        height: 26px;
        line-height: 26px;
        padding: 0 8px;
        font-size: 10.5px;
    }

    #header-bottom .flexy-menu {
        padding-right: 205px;
    }

    .flexy-menu li.showhide {
        min-height: 52px;
        line-height: 52px;
    }

    .flexy-menu li.showhide span.title {
        font-size: 14px;
        line-height: 52px;
    }

    .flexy-menu li.showhide span.icon {
        margin-top: 15px;
    }
}

@media (max-width: 390px) {

    #header-bottom .flexy-menu {
        padding-right: 185px;
    }

    .newboutonabom,
    .newboutoncompte1m,
    .newboutoncompte2m,
    .newboutondeconnexionm {
        padding: 0 6px;
        font-size: 10px;
    }

    #boutonsm {
        gap: 4px;
    }
}


/* ==========================================================
   HOMEPAGE RENTRÉE 2026 — MENU MOBILE OUVERT V8
   ========================================================== */

@media (max-width: 980px) {

    /* Hamburger seul */
    .flexy-menu li.showhide span.title {
        display: none !important;
    }

    .flexy-menu li.showhide span.icon {
        float: left;
        margin-left: 0;
    }

    /* Les boutons restent toujours dans la barre supérieure */
    #boutonsm {
        top: 13px !important;
        transform: none !important;
    }

    /* Plus de réserve de largeur sur le menu déroulé */
    #header-bottom .flexy-menu {
        padding-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* On réserve seulement l'espace des boutons sur la ligne du hamburger */
    #header-bottom .flexy-menu > li.showhide {
        box-sizing: border-box;
        padding-right: 230px !important;
    }

    /* Navigation principale sur toute la largeur */
    #header-bottom .flexy-menu > li:not(.showhide) {
        float: none !important;
        width: 100% !important;
        clear: both !important;
        box-sizing: border-box;
    }

    #header-bottom .flexy-menu > li:not(.showhide) > a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        padding: 13px 22px !important;
    }

    /* Sous-menus en pleine largeur */
    #header-bottom .flexy-menu li ul,
    #header-bottom .flexy-menu li ul ul {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
        box-shadow: none !important;
    }

    #header-bottom .flexy-menu li ul li {
        float: none !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    #header-bottom .flexy-menu li ul li > a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        padding: 11px 22px 11px 42px !important;
    }

    #header-bottom .flexy-menu li ul li ul li > a {
        padding-left: 60px !important;
    }
}

@media (max-width: 560px) {

    #header-bottom .flexy-menu > li.showhide {
        padding-right: 205px !important;
    }

    #header-bottom .flexy-menu > li:not(.showhide) > a {
        padding: 13px 14px !important;
    }

    #header-bottom .flexy-menu li ul li > a {
        padding: 10px 14px 10px 32px !important;
    }

    #header-bottom .flexy-menu li ul li ul li > a {
        padding-left: 48px !important;
    }

    #boutonsm {
        top: 13px !important;
    }
}

@media (max-width: 390px) {

    #header-bottom .flexy-menu > li.showhide {
        padding-right: 185px !important;
    }
}

/* ==========================================================
   HEADER DESKTOP — aligné sur la page abonnements
   - davantage d'espace entre la baseline du logo et le menu
   - ligne rouge légèrement abaissée sous le menu
   ========================================================== */
@media (min-width: 981px) {

    /* Détache légèrement le menu de la baseline du logo */
    #header-top {
        margin-bottom: 13px;
    }

    /* Annule le décalage historique vers le haut du menu */
    #header-middle {
        bottom: 0;
    }

    /* Abaisse la séparation rouge sous le menu */
    .rentree-home {
        margin-top: 31px;
    }
}


/* ==========================================================
   HEADER — BOUTONS UTILISATEUR (RÈGLES COMMUNES HOME / OFFRES)
   États :
   - visiteur : S'ABONNER + MON COMPTE
   - connecté sans abonnement : MON COMPTE + DÉCONNEXION
   - abonné actif : MON ESPACE + DÉCONNEXION
   ========================================================== */

/* Desktop */
.newboutonabo,
.newboutoncompte1,
.newboutoncompte2,
.newboutonmonespace2,
.newboutondeconnexion {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border: 0;
    padding: 1px 5px;
    cursor: pointer;
    text-transform: uppercase;
    display: block;
    height: 18px;
    position: absolute;
    top: 72px;
    box-sizing: border-box;
    visibility: visible;
}

.newboutonabo {
    background-color: #f22200;
    width: 81px;
    left: 752px;
    z-index: 5;
}

.newboutoncompte1 {
    background-color: #6a190c;
    width: 97px;
    left: 840px;
    z-index: 4;
}

.newboutoncompte2 {
    background-color: #6a190c;
    width: 97px;
    left: 731px;
    z-index: 8;
}

.newboutonmonespace2 {
    background-color: #f22200;
    width: 93px;
    left: 734px;
    z-index: 10;
}

.newboutondeconnexion {
    background-color: #f22200;
    width: 103px;
    left: 834px;
    z-index: 9;
}

.newboutonabo:hover,
.newboutonmonespace2:hover,
.newboutondeconnexion:hover {
    background-color: #e2e2e2;
    color: #f22200;
}

.newboutoncompte1:hover,
.newboutoncompte2:hover {
    background-color: #e2e2e2;
    color: #6a190c;
}

/* Mobile */
@media (max-width: 980px) {

    .newboutonabo,
    .newboutoncompte1,
    .newboutoncompte2,
    .newboutonmonespace2,
    .newboutondeconnexion {
        display: none !important;
    }

    #boutonsm {
        display: flex !important;
        align-items: center;
        gap: 8px;
        position: absolute;
        right: 10px;
        top: 13px !important;
        z-index: 20;
        transform: none !important;
    }

    .newboutonabom,
    .newboutoncompte1m,
    .newboutoncompte2m,
    .newboutonmonespace2m,
    .newboutondeconnexionm {
        position: static !important;
        float: none !important;
        bottom: auto !important;
        margin: 0 !important;
        width: auto !important;
        min-width: 0;
        height: 28px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
        line-height: 28px !important;
        font-weight: 700;
        border: 0 !important;
        box-sizing: border-box;
        white-space: nowrap;
        text-transform: uppercase;
        color: #fff;
        cursor: pointer;
        overflow: visible;
        visibility: visible;
    }

    .newboutonabom,
    .newboutonmonespace2m,
    .newboutondeconnexionm {
        background-color: #d10612;
    }

    .newboutoncompte1m,
    .newboutoncompte2m {
        background-color: #5d130c;
    }

    .newboutonabom:hover,
    .newboutonmonespace2m:hover,
    .newboutondeconnexionm:hover {
        background-color: #e2e2e2;
        color: #d10612;
    }

    .newboutoncompte1m:hover,
    .newboutoncompte2m:hover {
        background-color: #e2e2e2;
        color: #5d130c;
    }
}

@media (max-width: 560px) {
    #boutonsm {
        right: 9px;
        top: 13px !important;
        gap: 6px;
    }

    .newboutonabom,
    .newboutoncompte1m,
    .newboutoncompte2m,
    .newboutonmonespace2m,
    .newboutondeconnexionm {
        height: 26px !important;
        line-height: 26px !important;
        padding: 0 8px !important;
        font-size: 10.5px !important;
    }
}

@media (max-width: 390px) {
    #boutonsm {
        gap: 4px;
    }

    .newboutonabom,
    .newboutoncompte1m,
    .newboutoncompte2m,
    .newboutonmonespace2m,
    .newboutondeconnexionm {
        padding: 0 6px !important;
        font-size: 10px !important;
    }
}



/* ==========================================================
   HOMEPAGE RENTRÉE 2026 — V7 MOBILE ESPACEMENTS
   - preuve hero légèrement compactée
   - rapprochement niveaux / abonnement
   - bloc Trustpilot fixe conservé
   ========================================================== */

@media (max-width: 560px) {
    /* Bloc 15 ans / 4,9 / 300 : un peu moins haut */
    .rentree-hero-proof {
        margin-top: 26px;
    }

    .rentree-proof-card {
        padding: 9px 14px;
    }

    .rentree-proof-card strong {
        margin-bottom: 1px;
    }

    /* Réduit légèrement l'espace après les trois cartes de niveaux */
    .rentree-levels {
        padding-bottom: 26px;
    }

    /* Le bloc suivant remonte légèrement */
    .rentree-included {
        padding-top: 28px;
    }

    /* Trustpilot reste volontairement fixe sur la homepage. */
}


/* ==========================================================
   PAGES COURS (DÉBUTANT / INTERMÉDIAIRE / AVANCÉ / SOLFÈGE)
   HARMONISATION RENTRÉE 2026
   Ces pages passent sur home.css et adoptent le système
   rentree-* : une seule colonne, plus de sidebar. Les classes
   ci-dessous sont additives et propres à ces 4 pages.
   ========================================================== */

/* Hero plus léger que celui de la home : pas de prix, pas de
   bloc de preuve en 3 cartes, juste une ligne de confiance
   compacte (même texte que sur les pages offres). */
.rentree-course-hero {
    /* Le hero de la home est calibré (min-height: 470px) pour un
       contenu plus riche (prix, grille de preuve en 3 cartes). Le
       hero plus léger de ces pages (badge + titre + accroche + ligne
       de confiance + CTA) n'a pas besoin de cette hauteur minimale :
       sans ce correctif, un grand vide apparaissait sous le bouton. */
    min-height: 0;
}

.rentree-course-hero .rentree-hero-copy {
    max-width: 700px;
}

.rentree-hero-trust {
    margin-top: 18px !important;
    color: #666;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* Étiquette de niveau dans le hero, même code couleur que les
   cartes "pour tous les niveaux" de la home. Sur la home, la
   couleur vient d'un sélecteur descendant (.rentree-level-beginner
   .rentree-level-tag, la classe de couleur étant posée sur la
   carte parente .rentree-level-card). Ici le badge est seul dans
   le hero, donc on pose la couleur directement dessus avec des
   classes dédiées plutôt que de dépendre d'un parent. */
.rentree-course-hero .rentree-level-tag {
    margin-bottom: 14px;
}

.rentree-level-tag-beginner { background: #6ebd2b; }
.rentree-level-tag-intermediate { background: #325bd2; }
.rentree-level-tag-advanced { background: #f27a14; }

/* Grille vidéo : 2 extraits côte à côte + 1 extrait pleine
   largeur en dessous, en cartes blanches avec bordure fine
   (même esprit que .rentree-prof-card / .rentree-level-card). */
.rentree-video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.rentree-video-card,
.rentree-video-wide {
    padding: 14px;
    background: #fff;
    border: 1px solid #e2e2e2;
}

.rentree-video-caption {
    margin-top: 10px !important;
    color: #555;
    font-size: 13px;
    line-height: 1.4;
}

.rentree-video-caption strong {
    color: #222;
}

/* Conteneur de l'extrait vidéo : ratio 16:9 responsive à toutes
   les tailles d'écran (plutôt que seulement en mobile, comme
   c'était le cas sur l'ancien gabarit cours.css). Ces règles
   couvrent à la fois le cas où jquery.YouTubeEmbed.js injecte
   l'iframe directement dans .nsyte/.nsyte2, et le cas où il la
   place dans un .videowrapper/.videowrapper2 intermédiaire —
   technique reprise telle quelle de l'ancien media query mobile
   de cours.css, qui est éprouvée en production. */
.nsyte,
.nsyte2 {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    background: #ececec;
}

.nsyte iframe,
.nsyte2 iframe,
.nsyte embed,
.nsyte2 embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.videowrapper,
.videowrapper2 {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    margin: 0;
}

.videowrapper iframe,
.videowrapper2 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Bénéfices : variante à 5 cartes (3 + 2) utilisée sur les 4
   pages cours, au lieu des 4 de la home. */
.rentree-benefits-5 {
    grid-template-columns: repeat(3, 1fr);
}

/* Programme / liste de contenu : liste numérotée en 2 colonnes
   (numéro discret en rouge), texte inchangé. Remplace l'ancienne
   version à puces texte en une colonne, suite à un retour de
   Mathieu sur une liste à 30 lignes jugée trop longue/monotone à
   lire en une colonne (choix validé parmi 2 options proposées). */
.rentree-program-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
}

.rentree-program-item {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.rentree-program-num {
    flex: 0 0 20px;
    color: #d10612;
    font-size: 13px;
    font-weight: 700;
}

.rentree-program-text {
    color: #333;
    font-size: 14px;
    line-height: 1.4;
}

.rentree-program-text em {
    color: #777;
    font-style: italic;
}

@media (max-width: 760px) {
    .rentree-program-list {
        grid-template-columns: 1fr;
    }
}

/* Encart autopromo (ex-colonne de droite #abo) : devient un
   bandeau compact dans le flux, visible desktop et mobile,
   remplace les deux rendus dupliqués (mobile + desktop) de
   l'ancien gabarit par un seul bloc responsive. */
.rentree-promo-card {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: #fff;
    border: 1px solid #e2e2e2;
}

.rentree-promo-img {
    display: block;
    max-width: 220px;
    width: 100%;
    height: auto;
}

.rentree-promo-copy {
    flex: 1 1 240px;
}

.rentree-promo-plus {
    margin: 0 0 4px 0 !important;
    font-weight: 700;
    color: #d11a10;
}

.rentree-promo-texth {
    margin: 0 0 4px 0 !important;
    color: #c80011;
}

.rentree-promo-countdown {
    display: block;
    margin-top: 4px;
    font-weight: 700;
    color: #000;
}

.rentree-promo-lastdays {
    position: absolute;
    top: -14px;
    right: -14px;
}

@media (max-width: 980px) {
    .rentree-video-grid {
        grid-template-columns: 1fr;
    }

    .rentree-benefits-5 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .rentree-benefits-5 {
        grid-template-columns: 1fr;
    }

    .rentree-promo-card {
        padding: 16px;
        gap: 14px;
    }

    .rentree-promo-img {
        max-width: 160px;
        margin: 0 auto;
    }

    .rentree-promo-copy {
        flex-basis: 100%;
        text-align: center;
    }
}

/* ==========================================================
   PAGE FICHE PROFESSEUR (cours-de-piano.php) — HARMONISATION RENTRÉE 2026
   Ajout isolé : hero bio professeur (photo + texte en une colonne),
   section "ses cours" avec tri/pagination repris à l'identique dans un
   wrapper à largeur contrainte (le calibrage en pixels des sprites de tri
   suppose la largeur d'origine, 656px), section "les plus consultés"
   restylée en liste de cartes.
   ========================================================== */

.rentree-prof-hero .rentree-hero-copy {
    max-width: 900px;
}

.rentree-prof-bio {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-top: 22px;
}

.rentree-prof-bio-photo {
    flex: 0 0 200px;
}

.rentree-prof-bio-photo img {
    width: 100%;
    display: block;
}

.rentree-prof-bio-text {
    flex: 1 1 auto;
    color: #444;
    font-size: 15px;
    line-height: 1.55;
}

.rentree-prof-bio-text p {
    margin-bottom: 12px;
}

@media (max-width: 760px) {
    .rentree-prof-bio {
        flex-direction: column;
    }

    .rentree-prof-bio-photo {
        flex: 0 0 auto;
        align-self: flex-start;
        width: 100%;
        max-width: 200px;
    }
}

.rentree-course-list-section .rentree-section-heading {
    margin-bottom: 20px;
}

.rentree-course-list-results {
    margin-top: 10px !important;
    color: #555;
    font-size: 14px;
}

.rentree-course-list-wrap {
    max-width: 680px;
    background: #fff !important;
    border: 1px solid #e2e2e2;
}

/* ---- Widget tri / pagination d'origine (prof.css), repris à l'identique :
   markup PHP et classes non modifiés, logique de tri/pagination non
   modifiée. Ces règles sont les règles d'origine, simplement rescopées
   sous .rentree-course-list-wrap. ---- */

.rentree-course-list-wrap #sescours-bottom {
    background-color: #FFF;
    padding-bottom: 10px;
    position: relative;
}

.rentree-course-list-wrap .sescours-bottom-titres {
    padding-top: 3px;
    padding-right: 10px;
    padding-left: 10px;
    overflow: hidden;
    background-color: #F6F6F6;
    border-bottom: 1px solid #E3E0E0;
}

/* En-tête de tri en texte (remplace les anciennes icônes sprite
   compositeur.png / oeuvre.png / difficulte.png, qui contenaient le
   texte directement dans l'image — demande de Mathieu après avoir vu
   le rendu réel). Logique de tri inchangée : mêmes liens, mêmes
   paramètres, même colonne active déterminée par $_GET['sort']. */
.rentree-course-list-wrap .rentree-sort-bar {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 22px;
    padding-left: 13px;
    border-left: 3px solid #d10612;
    margin-bottom: 15px;
}

.rentree-sort-label {
    color: #999;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rentree-sort-item {
    color: #888;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

a.rentree-sort-item:hover {
    color: #CF0B1C;
}

.rentree-sort-current {
    color: #171717;
}

@media (max-width: 560px) {
    .rentree-course-list-wrap .rentree-sort-bar {
        gap: 14px;
    }
}

.rentree-course-list-wrap .tableau {
    padding-right: 5px;
    padding-left: 5px;
    position: relative;
}

.rentree-course-list-wrap .tableau a:hover,
.rentree-course-list-wrap .tableau a:active {
    color: #CF0B1C;
    text-decoration: none;
}

.rentree-course-list-wrap .prenomcompo {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: normal;
}

.rentree-course-list-wrap .border-td {
    padding-top: 5px;
    border-bottom: 1px solid #D7D4D3;
}

.rentree-course-list-wrap .nomcompo {
    font-family: "Times New Roman", Times, serif;
    font-size: 22px;
    font-weight: bold;
}

.rentree-course-list-wrap .trait-esp-gauche {
    margin-right: 5px;
}

.rentree-course-list-wrap .oeuvre {
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    font-weight: normal;
    padding-bottom: 7px;
}

.rentree-course-list-wrap .diffdeb {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
}

.rentree-course-list-wrap #nav {
    margin-left: 5px;
    margin-top: 5px;
    text-align: center;
}

.rentree-course-list-wrap #nav a:hover {
    text-decoration: underline;
}

.rentree-course-list-wrap .current {
    font-size: 14px;
    font-weight: bold;
}

.rentree-top-courses {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.rentree-top-course-item {
    padding: 16px;
    background: #fff;
    border: 1px solid #e2e2e2;
}

.rentree-top-course-item strong {
    display: block;
    color: #d10612;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.rentree-top-course-item span {
    color: #333;
    font-family: "Times New Roman", Times, serif;
    font-size: 15px;
}

@media (max-width: 980px) {
    .rentree-course-list-wrap {
        max-width: 100%;
    }

    .rentree-top-courses {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .rentree-prof-bio-photo {
        width: 100%;
        max-width: 160px;
    }

    .rentree-top-courses {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   PAGE LISTE DE TOUS LES COURS (tous-les-cours-de-piano-en-ligne.php)
   — HARMONISATION RENTRÉE 2026
   Ajout isolé : passage en une colonne (abandon sidebar #right),
   menu de tri en texte (4 colonnes : compositeur/oeuvre/professeur/
   difficulté — même logique, même markup PHP, remplace les sprites
   titrecompositeur/titreoeuvre/titreprof/titredifficulte), nouveau
   bloc de recherche repositionné juste au-dessus de la liste (même
   formulaire, mêmes champs, même bascule simple/avancée en JS inline
   conservée à l'identique), ban1/ban2 retirés avec la sidebar (même
   décision que sur les 4 pages cours), encart autopromo consolidé en
   un seul bandeau (même patron que cours-de-piano-debutant.php).
   ========================================================== */

.rentree-search-bar {
    background: #fff;
    border: 1px solid #e2e2e2;
    padding: 20px;
}

.rentree-search-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.rentree-search-fields select,
.rentree-search-advanced select {
    flex: 1 1 170px;
    padding: 9px 10px;
    border: 1px solid #ccc;
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #333;
}

.rentree-search-submit {
    flex: 0 0 auto;
    background: #d10612;
    color: #fff;
    border: none;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    cursor: pointer;
}

.rentree-search-submit:hover {
    background: #a80000;
}

.rentree-search-advanced {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eee;
}

.rentree-search-advanced label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #444;
}

.rentree-search-toggle {
    margin-top: 10px;
}

.rentree-search-toggle a {
    color: #888;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-decoration: underline;
}

.rentree-search-toggle a:hover {
    color: #CF0B1C;
}

@media (max-width: 560px) {
    .rentree-search-bar {
        padding: 16px;
    }

    .rentree-search-fields select,
    .rentree-search-advanced select,
    .rentree-search-submit {
        flex: 1 1 100%;
    }
}

/* Widget tri / tableau / pagination d'origine (liste.css), repris à
   l'identique dans sa logique, simplement rescopé sous
   .rentree-course-list-wrap et avec le même en-tête de tri en texte
   que sur cours-de-piano.php (4 colonnes ici au lieu de 3 : la liste
   globale ajoute "Professeur"). */

/* home.css contient une règle générique #cours-bottom (hors de notre
   section) avec un fond image cadre_gris.png, destinée à un autre
   contexte historique mais qui s'applique aussi à cette page puisque
   l'id est le même. Neutralisée ici : c'est elle, en plus du fond
   transparent du reset global, qui faisait apparaître du gris (demande
   explicite de Mathieu). */
.rentree-course-list-wrap #cours-bottom {
    background-color: #FFF !important;
    background-image: none !important;
    padding-bottom: 10px;
    position: relative;
}

.rentree-course-list-wrap #cours-bottom-titres {
    padding-top: 3px;
    padding-right: 10px;
    padding-left: 10px;
    overflow: hidden;
    background-color: #F6F6F6;
    border-bottom: 1px solid #E3E0E0;
}

/* Le menu déroulant "Trier par" (classe .mobile, affiché nativement en
   dessous de 980px par home.css) faisait doublon avec l'en-tête de tri
   en texte juste en dessous : celui-ci, bien que portant la classe
   "desktop", reste en réalité affiché à toutes les largeurs sur cette
   page, car notre propre règle .rentree-sort-bar (display:flex) est
   plus spécifique que la règle générale ".desktop { display:none }" et
   l'emporte sur elle. Plutôt que de changer ce comportement global,
   Mathieu a préféré purement supprimer le menu déroulant, redondant,
   et garder uniquement l'en-tête en texte sur toutes les tailles
   d'écran. */
.rentree-course-list-wrap #cours-bottom-titres.mobile {
    display: none;
}

.rentree-course-list-wrap .prenomprof {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #666;
}

.rentree-course-list-wrap .nomprof {
    font-family: "Times New Roman", Times, serif;
    font-size: 17px;
    font-weight: bold;
    color: #222;
}

/* Répartition des colonnes recalée pour exploiter toute la largeur
   désormais disponible (carte passée en pleine largeur) : la colonne 1
   (compositeur / titre du morceau) est la plus large car c'est elle qui
   doit permettre au titre de tenir sur une seule ligne le plus souvent
   possible ; la colonne difficulté (3), au texte toujours court, est
   réduite en conséquence. */
.rentree-course-list-wrap #td1 {
    width: 48%;
}

.rentree-course-list-wrap #td2 {
    width: 32%;
}

.rentree-course-list-wrap #td3 {
    width: 20%;
}

.rentree-course-list-wrap-wide {
    max-width: none;
}

/* Fond blanc explicite sur chaque ligne et sur la pagination : sans ça,
   l'image de fond décorative posée sur #container (fond_piano.jpg,
   commune à tout le site) apparaissait par endroits en dessous du haut
   de la liste — la carte blanche (.rentree-course-list-wrap/#cours-bottom)
   ne suffisait pas à la masquer partout sur cette page plus longue que
   les autres (bloc gris remonté par Mathieu en conditions réelles).
   !important nécessaire : une règle de remise à zéro globale du site
   (background: transparent !important sur tous les div, entre autres
   balises) annule sinon ces fonds blancs. */
.rentree-course-list-wrap #tableau {
    padding-right: 5px;
    padding-left: 5px;
    position: relative;
    background: #fff !important;
}

.rentree-course-list-wrap #nav {
    background: #fff !important;
}

.rentree-course-list-wrap #tableau table {
    width: 100%;
}

.rentree-course-list-wrap #tableau a:hover,
.rentree-course-list-wrap #tableau a:active {
    color: #CF0B1C;
    text-decoration: none;
}

/* Le modèle d'origine instancie un lecteur jPlayer caché par ligne
   (id="jquery_jplayer" vide, sans classe jp-jplayer) en plus du vrai
   lecteur en bas de page (#lecteur-bottom, qui lui porte la classe
   jp-jplayer). Les ids étant dupliqués sur toutes les lignes, le script
   jPlayer ($("#jquery_jplayer")) s'attache au premier du DOM — une ligne
   du tableau, pas le lecteur du bas — et pourrait y insérer un lecteur
   <audio> natif non habillé. Masqué ici par précaution (défaut distinct
   du bloc gris remonté par Mathieu, voir plus bas — ce n'était pas la
   cause de celui-ci, mais ce point reste un vrai petit défaut d'origine
   à neutraliser). L'élément reste dans le DOM et fonctionne (lecture
   déclenchée par les liens .track, inchangés), seul son rendu visuel
   par défaut est supprimé. */
.rentree-course-list-wrap .trdetails #jquery_jplayer {
    display: none;
}

.rentree-course-list-wrap .trdetails #jp_container {
    margin-top: 4px;
}

/* "Écouter le morceau" et "+/- de détails" : anciennement des images
   (ecouterlemorceau.png, plusdedetails.png/moinsdedetails.png) avec le
   texte intégré au sprite, remplacées par du texte réel (même demande
   que pour le menu de tri). Logique de lecture (classe .track, inchangée
   pour jPlayer) et de bascule +/- (mêmes ids/onclick) conservées à
   l'identique ; seul le rendu visuel change. Le survol est géré par la
   règle générale .rentree-course-list-wrap #tableau a:hover ci-dessus. */
.rentree-course-list-wrap .rentree-track-link {
    display: inline-block;
    color: #d10612;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.rentree-course-list-wrap .rentree-detail-toggle {
    display: inline-block;
    color: #555;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.rentree-course-list-wrap .plusdedetails {
    padding: 10px 5px 12px;
    border-top: 1px dashed #D7D4D3;
    font-size: 13px;
    color: #555;
}

.rentree-course-list-wrap .plusdedetails p {
    margin: 0 0 6px 0;
}

/* Mobile : plusieurs itérations successives sur le modèle hérité du
   tableau 3 colonnes du desktop (compositeur/professeur/difficulté sur
   une ligne, titre/audio/détails sur l'autre) ont posé des problèmes
   récurrents propres au mobile (alignement, débordement, effet
   d'escalier). Mathieu a demandé une réorganisation complète plutôt
   qu'un nouveau correctif ponctuel — voir le bloc ci-dessous. */
@media (max-width: 480px) {
    /* Nouvel ordre d'affichage voulu par Mathieu : 1) compositeur
       (prénom + nom) et professeur (prénom + nom) sur une même ligne ;
       2) titre du morceau sur sa propre ligne ; 3) niveau juste en
       dessous, sur sa propre ligne ; 4) "Écouter le morceau" (bouton
       encadré, texte noir) et "+ de détails" sur une même ligne.
       Problème : le niveau (1ère <tr> du tableau d'origine) doit
       maintenant suivre le titre (2ème <tr>, ".trdetails") — deux
       éléments de deux <tr> différents ne peuvent pas être réordonnés
       entre eux par un simple flex sur chaque <tr> pris séparément.
       Solution : display:contents sur les deux <tr> fait disparaître
       leur boîte de rendu (mais pas leur contenu), si bien que tous les
       <td> des deux lignes deviennent les enfants directs du <table>
       (passé en conteneur flex) et peuvent être réordonnés librement les
       uns par rapport aux autres via la propriété "order", indépendamment
       de leur <tr> d'origine. */
    .rentree-course-list-wrap #tableau table {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 10px;
        row-gap: 3px;
    }

    .rentree-course-list-wrap #tableau table > tbody,
    .rentree-course-list-wrap #tableau tr {
        display: contents;
    }

    /* Par défaut, un enfant de conteneur flex a une largeur minimale
       calée sur son contenu non coupé ("min-width:auto"), ce qui peut
       pousser un nom ou un titre très long à déborder du cadre plutôt
       que de passer à la ligne. min-width:0 + overflow-wrap:break-word
       en filet de sécurité (remonté par Mathieu sur une précédente
       capture). */
    .rentree-course-list-wrap #td1,
    .rentree-course-list-wrap #td2,
    .rentree-course-list-wrap #td3,
    .rentree-course-list-wrap .trdetails .oeuvre {
        min-width: 0;
        overflow-wrap: break-word;
    }

    .rentree-course-list-wrap #td1 {
        order: 1;
        width: auto;
    }

    .rentree-course-list-wrap #td2 {
        order: 2;
        width: auto;
    }

    /* Toujours d'actualité (demande antérieure, non revenue par Mathieu
       depuis) : même taille pour le nom du compositeur que celui du
       professeur en mobile (22px desktop → 17px). */
    .rentree-course-list-wrap .nomcompo {
        font-size: 17px;
    }

    /* Nom du professeur sans gras en mobile (demande de Mathieu) ; le
       nom du compositeur, lui, reste en gras (non concerné). */
    .rentree-course-list-wrap .nomprof {
        font-weight: normal;
    }

    .rentree-course-list-wrap .trdetails .oeuvre {
        order: 3;
        width: 100%;
    }

    .rentree-course-list-wrap #td3 {
        order: 4;
        width: 100%;
        text-align: left;
    }

    .rentree-course-list-wrap .rentree-audio-cell {
        order: 5;
        width: auto;
    }

    .rentree-course-list-wrap .rentree-details-cell {
        order: 6;
        width: auto;
        text-align: left;
    }

    /* Espace réduit entre les deux lignes de l'en-tête "Tri par" une
       fois replié sur 2 lignes (gap:14px, posé à 560px, restait trop
       grand verticalement selon Mathieu). Scopé à cette page via
       .rentree-course-list-wrap-wide pour ne pas toucher le même
       composant sur la fiche professeur. */
    .rentree-course-list-wrap-wide .rentree-sort-bar {
        row-gap: 4px;
        column-gap: 14px;
    }

    /* "Écouter le morceau" passe en bouton encadré avec un texte noir au
       lieu du lien rouge — demande de Mathieu, en mobile uniquement (le
       rouge reste inchangé en desktop, jugé "parfait" par ailleurs). */
    .rentree-course-list-wrap .rentree-track-link {
        color: #222;
        border: 1px solid #999;
        border-radius: 3px;
        padding: 4px 10px;
        font-size: 12px;
    }

    .rentree-course-list-wrap .rentree-detail-toggle {
        font-size: 11px;
    }

    /* Niveau de difficulté sans gras (demande de Mathieu) ; la ligne de
       base mal alignée avec compositeur/professeur sur une précédente
       version venait en réalité d'un <span class="nomprof"></span> vide,
       résidu de copier-coller, présent en tête de la colonne difficulté
       dans le PHP d'origine — retiré (voir Historique). */
    .rentree-course-list-wrap .diffdeb {
        font-weight: normal;
    }

    /* Espacement entre chaque ligne de cours, trop serré en mobile
       (la ligne "Écouter le morceau" touchait presque la ligne de
       cours suivante). */
    .rentree-course-list-wrap #tableau {
        margin-bottom: 18px;
    }

    /* Texte du panneau "+ de détails" déplié plus gros que prévu sur
       l'appareil de Mathieu malgré le font-size:13px déjà posé sur
       .plusdedetails (voir plus haut) : comportement classique de
       Mobile Safari, qui peut agrandir automatiquement un bloc de texte
       qu'il juge "paragraphe" dans une colonne étroite. Désactivé
       explicitly ici plutôt que de se fier au seul réglage global du
       body. */
    .rentree-course-list-wrap .plusdedetails,
    .rentree-course-list-wrap .plusdedetails p,
    .rentree-course-list-wrap .plusdedetails strong {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .rentree-course-list-wrap .plusdedetails p,
    .rentree-course-list-wrap .plusdedetails strong {
        font-size: 13px;
    }
}

.rentree-course-player #lecteur-bottom {
    max-width: 680px;
}

.rentree-beginner-card {
    padding: 26px 30px;
    background: #FAF6F0;
    border-left: 3px solid #d10612;
}

.rentree-beginner-card .rentree-eyebrow {
    display: block;
    margin-bottom: 8px;
}

.rentree-beginner-card p {
    color: #333;
    font-size: 17px;
    line-height: 1.5;
}

@media (max-width: 560px) {
    .rentree-beginner-card {
        padding: 20px;
    }

    .rentree-beginner-card p {
        font-size: 15px;
    }
}