/*
Theme Name: Divi Enfant par bubulgum.comm'
Site Name: EMC - Ecole de Musique de Cossonay
Description: Theme enfant du theme Divi, pour le site www.musicoss.org - CSS pour tout le site (préloadé via JS)
Author: bubulgum.comm'
Author URI: https://bubulgum.com/
Template: Divi
Version: 1.0
Date: 03.07.19
Dernière mise à jour: 30.05.23
*/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/***** -------------------------------- CSS du site de l'ECOLE DE MUSIQUE DE COSSONAY ------------------------ *****/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/* ----------------------- CONTENU ----------------------- */
/***** 0) réglages généraux *****/
/*** 1) personnalisation du background-color du site ***/
/*** 2) personnalisation des textes (font, color, etc), liens, exposants, listes, etc ***/
/*** 3) personnalisation des boutons + flèches galeries ***/
/*** 4) réglages des boites DIVI: Modules, Colonnes, Lignes, Sections standard ***/
/***** 5) réglages du HEADER *****/
/*** 5.0) réglages généraux ***/
/*** 5.1) réglages du MENU DESKTOP ***/
/*** 5.2) réglages du logo (bureau + tablette + smartphone) ***/
/*** 5.3) réglages du MENU MOBILE ***/
/*** 5.4) réglages de la zone recherche ***/
/*** 5.5) réglages de la page de résultats de recherche ***/
/***** 6) réglages du FOOTER *****/
/***** 7) réglages de la page HOME *****/
/*** 7.1) réglages du slider d'intro ***/
/*** 7.2) réglages du module "recheche par âge" + page de résultats de la recherche ***/
/*** 7.3) réglages du bloc Bienvenue + texte intro ***/
/*** 7.4) réglages du bloc Actualités ***/
/*** 7.5) réglages du bloc Agenda ***/
/*** 7.6) réglages du Footer de la Home ***/
/*** 7.7) réglages Home PROVISOIRE (avec 4 events passés) - A EFFACER APRES COVID-19 ***/
/*** 7.8) Fête de la musique 2020 - ONLINE (vidéos envoyées par profs et élèves) ***/
/*** 7.9) Présentation des instruments (vidéos) - réglages de la page dédiée ***/
/***** 8) réglages de la page COURS (1er niveau) *****/
/***** 9) réglages des pages Cours > Initiation / Instruments / Ateliers / Solfège (2e niveau) *****/
/*** 9.0) réglages généraux ***/
/*** 9.1) affichage module Custom Post sur 4 colonnes - BUREAU (sur tablette + smartphone, j'ai laissé le fonctionnement natif = 2 colonnes / 1 colonne) ***/
/*** 9.2) réglages images Blog (carrées) des pages Cours > Initiation/Instruments/Ateliers/Solfège ***/
/*** 9.3) réglages pour que la largeur de la portée (contour photos cours Initiation) soit plus ou moins équivalente à la largeur des portées sur les bords du site... on remplace chaque feature_image (qu'on met en opacité 0, voir ci-dessous) par une background-image contenant la version desktop de la photo du cours Initiation ***/
/***** 10) réglages des pages de chaque COURS (3e niveau) *****/
/*** 10.1) réglages largeur des colonnes "titre+description cours" et "image cours" ***/
/*** 10.2) réglages des modules bascules en dessous du texte d'intro de chaque cours ***/
/*** 10.3) réglages affichage liste des profs correspondant à un cours donné ***/
/*** 10.4) réglages des blocs HORAIRES + TARIFS + INSCRIPTIONS ***/
/*** 10.5) réglages des tableaux des pages Cours ***/
/***** 11) réglages de la page PROFESSEURS (1er niveau) *****/
/*** 11.0) réglages généraux ***/
/*** 11.1) réglages images Blog (carrées) page Professeurs (remarque: ces réglages s'appliquent à l'affichage mobile / pour l'affiche desktop, voir ci-dessous) ***/
/*** 11.2) réglages pour que la largeur de la portée (contour photos profs) soit plus ou moins équivalente à la largeur des portées sur les bords du site... on remplace l'image à la une (la même que l'image utilisée dans les pages de chaque prof) par une background-image avec un autre ratio photo-cadre... c'est pas parfait, mais c'est pas mal! ***/
/***** 12) réglages des pages de chaque PROFS (2e niveau) *****/
/*** 12.1) réglages de la colonne de droite (photo + expertise + liens) : sur bureau, reste "collée en haut" quand on scroll ***/
/*** 12.2) réglages des blocs COURS + LIENS + COORDONNÉES ***/
/*** 12.3) pour annuler tous les réglages des fonds dégradés/height/etc des posts type-cours - voir chapitre 16.2 ***/
/***** 13) réglages page AGENDA + pages Events --> tribe-events.css *****/
/*** 13.0) réglages du popup pour annoncer "Présentation des instruments 202X" sur la Home ***/
/*** 13.1) réglages de la page "Présentation des instruments 202X" - page générale ***/
/*** 13.2) réglages des events "Présentation des instruments 202X" - page 1 event ***/
/*** 13.3) réglages des récap des réservations ***/
/***** 14) réglages de la page ARCHIVES *****/
/*** 14.1) réglages généraux de la page ***/
/*** 14.2) réglages généraux des modules Bascule ***/
/*** 14.3) réglages de la page Archives - PHOTOS ***/
/*** 14.4) réglages de la page Archives - VIDEOS ***/
/*** 14.5) réglages de la page Archives - PRESSE ***/
/*** 14.6) réglages de la page Archives - EVENEMENTS ***/
/***** 15) réglages des pages PRATIQUE *****/
/*** 15.1) réglages de la page HORAIRES ***/
/*** 15.1.2) réglages des tableaux sur TABLETTE ***/
/*** 15.1.3) réglages des tableaux sur SMARTPHONE ***/
/*** 15.2) réglages de la page TARIFS ***/
/*** 15.3) réglages de la page INSCRIPTION ***/
/*** 15.4) réglages de la page PLAN D'ÉTUDES ***/
/*** 15.5) réglages de la page EMPLOI ***/
/*** 15.6) réglages de la page PARTENAIRES ***/
/*** 15.7) réglages de la page PRÉSENTATION DE L'ÉCOLE ***/
/*** 15.8) réglages de la page AIDES FINANCIÈRES ***/
/*** 15.9) réglages de la page CONTACT ***/
/*** 15.10) réglages du formulaire de Contact ***/
/*** 15.11) réglages du formulaire Inscripton ***/
/***** 16) réglages d'éléments spéciaux (utilisés sur plusieurs pages) *****/
/*** 16.1) réglages des posts Custom Post Type que j'ai créés (pour les pages de chaque Prof et de chaque Cours) ***/
/*** 16.2) réglages des fonds dégradés dans les pages Cours>Initiation/Instruments/Atelier/Solfège (2e niveau) et dans chaque page de Cours (3e niveau) ***/
/*** 16.3) réglages des sigles de couleur dans les pages Cours>Initiation/Instruments/Atelier/Solfège (2e niveau) et dans chaque page de Cours (3e niveau) ***/
/*** 16.4) réglages de la section contenant le lien vers le post suivant/précédent (shortcode) ***/
/*** 16.5) gestion du CSS pour les textes rognés ***/
/*** 16.6) gestion du bloc Contactez-nous! ***/
/*** 16.7) pour les pages "résultats de recherche" et "Cours 3e niveau" : réglages pour que la largeur de la portée (contour photos profs) soit plus ou moins équivalente à la largeur des portées sur les bords du site... (pour l'affichage bureau et tablette) ***/
/***** 17) réglages des pages Mentions légales + Conditions générales + Confidentialité *****/
/***** 18) réglages de la page Professeurs - Accès privé *****/
/* ----------------------- CONTENU ----------------------- */
@font-face {
font-family: 'hk_groteskregular';
src: url('../Divi-child/webfont/hkgrotesk-regular-webfont.woff2') format('woff2'),
url('../Divi-child/webfont/hkgrotesk-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'hk_groteskmedium';
src: url('../Divi-child/webfont/hkgrotesk-medium-webfont.woff2') format('woff2'),
url('../Divi-child/webfont/hkgrotesk-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'hk_groteskbold';
src: url('../Divi-child/webfont/hkgrotesk-bold-webfont.woff2') format('woff2'),
url('../Divi-child/webfont/hkgrotesk-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'hk_groteskitalic';
src: url('../Divi-child/webfont/hkgrotesk-italic-webfont.woff2') format('woff2'),
url('../Divi-child/webfont/hkgrotesk-italic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/*** CSS reset ***/
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/***** ---------------------------------------- 0) réglages généraux ---------------------------------------- *****/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ------------------------------------------------------------ ***/
/*** 1) personnalisation du background-color du site ***/
/*** ------------------------------------------------------------ ***/
.et_pb_section {
background-color: transparent !important; /* pour annuler la valeur par défaut de Divi (qui est #fff) */
}
body {
background-color: #fdfdfd !important; /* gris très clair */
font-family: hk_groteskregular, Arial, sans-serif !important;
overflow-x: hidden !important; /* pour cacher la barre de défilement horizontale */
}
/*** ------------------------------------------------------------ ***/
/*** 2) personnalisation des textes (font, color, etc), liens, exposants, listes, etc ***/
/*** ------------------------------------------------------------ ***/
html {
font-family: hk_groteskregular, Arial, sans-serif !important;
font-size: 100%; /* équivaut à 1rem = 16px */
}
h1, h5 {
font-family: Baskerville, "Times New Roman", serif !important;
color: #282828 !important; /* anthracite+foncé */
letter-spacing: 0.04em !important; /* correspond à un interlettrage de 40 sur InDesign */
text-transform: uppercase !important;
padding-bottom: 10px !important;
}
h2.sous-titre-Baskerville, h2.sous-titre-Baskerville a {
font-family: Baskerville, "Times New Roman", serif !important;
color: #3c3c3b !important; /* anthracite normal */
font-size: 2.4rem !important;
font-weight: 500 !important;
line-height: 1em !important;
letter-spacing: 0.04em !important; /* correspond à un interlettrage de 40 sur InDesign */
text-transform: uppercase !important;
padding-bottom: 10px !important;
}
@media only screen and (max-width: 980px) { /* tablette */
h2.sous-titre-Baskerville, h2.sous-titre-Baskerville a {font-size: 2rem !important;}
}
@media only screen and (max-width: 767px) { /* smartphone */
h2.sous-titre-Baskerville, h2.sous-titre-Baskerville a {font-size: 1.5rem !important;}
}
h5 { /* titres toogle page Archives */
display: table-cell;
position: relative;
height: 0;
vertical-align: baseline;
bottom: 0.075em; /* la distance entre la baseline et l'exposant */
}
h1 {font-weight: 500 !important;}
h5 {font-weight: 400 !important;}
h2, h3, h4, h6 {
color: #3c3c3b !important; /* anthracite */
letter-spacing: 0.1em !important; /* correspond à un interlettrage de 100 sur InDesign */
text-transform: uppercase !important;
padding-bottom: 10px !important;
}
h2, h3, h4 {font-family: hk_groteskbold, Arial, sans-serif !important;font-weight: 400 !important;}
h6 {font-family: hk_groteskregular, Arial, sans-serif !important;font-weight: 500 !important;}
h1 {font-size: 2.9rem !important;line-height: 1em !important;} /* titres page */
h2 {font-size: 1.125rem !important;line-height: 1em !important;} /* titres posts ou events */
h3 {font-size: 1.125rem !important;line-height: 1em !important;} /* titres dans étiquettes */
h4 {font-size: 1rem !important;line-height: 1em !important;} /* titres widget (recherche) */
h5 {font-size: 1.225rem !important;line-height: 1.25rem !important;} /* titres toogle page Archives + titres events page Agenda */
h6 {font-size: 1.125rem !important;line-height: 1.25rem !important;} /* dates toogle page Archives + dates events page Agenda */
p {
color: #3c3c3b !important; /* anthracite */
font-size: 1.25rem !important;
font-weight: 500 !important;
line-height: 1.25em !important;
padding-bottom: 1.25em !important;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto; /** césure = oui! */
}
/** réglages tailles textes pour tablette **/
@media only screen and (max-width: 980px) { /* tablette */
h1 {font-size: 2rem !important;} /* titres page */
h2 {font-size: 1.25rem !important;} /* titres posts ou events */
h3 {font-size: 1.125rem !important;} /* titres dans étiquettes */
h4 {font-size: 1rem !important;} /* titres widget (recherche) */
h5 {font-size: 1rem !important;line-height: 1rem !important;} /* titres toogle page Archives + titres events page Agenda */
h6 {font-size: 1rem !important;line-height: 1rem !important;} /* dates toogle page Archives + dates events page Agenda */
p {font-size: 1rem !important; /* line-height: 1.125em !important; */}
h1, h2, h3, h4, h5, h6 {padding-bottom: 10px !important;}
}
/** réglages tailles textes pour smartphone **/
@media only screen and (max-width: 767px) { /* smartphone */
h1 {font-size: 1.5rem !important;} /* titres page */
h2 {font-size: 1.25rem !important;} /* titres posts ou events */
h3 {font-size: 1.125rem !important;} /* titres dans étiquettes */
h4 {font-size: 0.875rem !important;} /* titres widget (recherche) */
h5 {font-size: 0.875rem !important;line-height: 1rem !important;} /* titres toogle page Archives */
h6 {font-size: 0.875rem !important;line-height: 1rem !important;} /* dates toogle page Archives */
p {font-size: 1rem !important; /* line-height: 1.125em !important; */}
h1, h2, h3, h4, h5, h6 {padding-bottom: 10px !important;}
}
.chemin-d-acces p {
font-size: 0.75rem !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none; /** césure = non! */
}
.chemin-d-acces a {
font-size: 0.75rem !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
color: #3c3c3b !important; /* anthracite */
font-weight: 500 !important;
text-decoration: none;
}
.et_pb_row:last-child.chemin-d-acces {
padding-bottom: 0.25rem !important;
}
/* vides = supprimer (il y en avait surtout avant et après les extraits dans la page Search) */
p:empty{
display: none !important;
}
a.hk_groteskmedium,
p.hk_groteskmedium,
h6.hk_groteskmedium,
span.hk_groteskmedium,
strong {
font-family: hk_groteskmedium, Arial, sans-serif !important;
font-weight: 600 !important;
color: inherit !important;
}
span.hk_groteskitalic,
em {
font-family: hk_groteskitalic, Arial, sans-serif !important;
font-weight: 500 !important;
font-style: normal !important;
}
/* à insérer dans html: */
span.espace-fine-insecable {
letter-spacing: -0.1em !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.et_pb_text {
max-width: 100% !important;
}
}
/** réglages des liens **/
a {
color: #3c3c3b !important; /* anthracite */
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
a.lien-souligne-medium {
font-family: hk_groteskmedium, Arial, sans-serif !important;
font-weight: 600 !important;
color: #3c3c3b !important;
text-decoration: underline !important;
}
a:hover {
color: #3c3c3b !important; /* anthracite */
opacity: 0.5 !important;
}
/** réglages des exposants **/
sup, sub {
position: relative;
height: 0;
vertical-align: baseline;
}
sup { /** exposant - genre 1er, 2e, 3e, etc */
bottom: 0.5em; /** la distance entre la baseline et l'exposant */
font-size: 65%; /** la taille du texte = 65% du texte parent */
}
/** réglages des listes à puces (ul) / numéros (ol) **/
.entry-content ul, .entry-summary ul, .comment-content ul, /* listes à puces */
.entry-content ol, .entry-summary ol, .comment-content ol { /* listes à numéros */
font-family: inherit !important;
color: #3c3c3b !important; /* anthracite */
font-size: 1.25rem !important;
font-weight: inherit !important;
line-height: 1.25em !important;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto; /** césure = oui! */
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.entry-content ul, .entry-summary ul, .comment-content ul, /* listes à puces */
.entry-content ol, .entry-summary ol, .comment-content ol { /* listes à numéros */
font-size: 1rem !important;
}
}
.entry-content ul, .entry-summary ul, .comment-content ul {list-style-position: outside;}
.entry-content ol, .entry-summary ol, .comment-content ol {list-style-position: inside;}
.entry-content li, /* li = réglages lignes des listes (à puces + à numéros) */
.entry-summary li,
.comment-content li {
padding-bottom: 0.5em !important;
}
ul.liste-membres-fondation li p,
ul.liste-assoc-amis-emc li p {
padding-bottom: 0 !important;
}
/*** ------------------------------------------------------------ ***/
/*** 3) personnalisation des boutons + flèches galeries ***/
/*** ------------------------------------------------------------ ***/
/** réglage de la couleur de fond du "Bouton retour en haut de page" **/
.et_pb_scroll_top.et-pb-icon {
background: rgba(0,0,0,0.65); /* noir à 65% d'opacité */
}
/** réglages des boutons **/
.et_pb_button {
color: #3c3c3b !important; /* anthracite */
}
.et_pb_button_module_wrapper > a {
min-width: 200px !important;
}
/** réglage de la couleur des flèches (module Galerie) pour passer d'une image à l'autre **/
.et-pb-arrow-prev::before,
.et-pb-arrow-next::before {
color: #fdfdfd !important; /* gris très clair */
}
/*** ------------------------------------------------------------ ***/
/*** 4) réglages des boites DIVI: Modules, Colonnes, Lignes, Sections standard ***/
/*** ------------------------------------------------------------ ***/
/** réglage général: on passe le site à 90% de largeur (au lieu de 80% = valeur par défaut de DIVI) // .container gère header+footer // .et_pb_row gère le contenu des pages **/
.container {
width: 90% !important;
}
.et_pb_row {
width: 90% !important;
}
/*** pour les pages qui manquent de marge avant le footer: rajouter cette section (élément global) juste avant le Contactez-nous + Footer **/
#section-avant-footer .et_pb_module {
margin-bottom: 2rem !important;
}
/** réglage des modules: on met une valeur fixe (1rem), pour que ce soit partout pareil, car la valeur par défaut de DIVI = des %, du coup ça fait des trucs pas cohérents entre le modules **/
.et_pb_module {
margin-bottom: 1rem !important;
}
.et_pb_module.contactez-nous,
.et_pb_module.contactez-nous-home {
margin-bottom: 0 !important; /* mais on supprime cette margin-bottom pour les modules "Contactez-nous" */
}
/** réglage des colonnes: les valeurs par défaut de DIVI sont trop grandes **/
@media only screen and (max-width: 980px) { /* tablette */
.et_pb_row .et_pb_column {
margin-bottom: 1rem !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.et_pb_row .et_pb_column {
margin-bottom: 0.5rem !important;
}
}
/** réglage des lignes (row) **/
/* réglages du padding-top de la row de la première section de la page (pour décoller ça du header de 1rem/3.5rem) */
@media only screen and (min-width: 981px) { /* bureau */
.et_pb_section:first-child > .et_pb_row:first-child {
padding-top: 1rem !important;
}
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.et_pb_section:first-child > .et_pb_row:first-child {
padding-top: 4.5rem !important;
}
}
/** réglages des lignes et de leur background-image (portées) **/
.et_pb_row {
background-image: url(/wp-content/uploads/2019/12/background-img_et_pb_row_bureau_HD.png) !important;
background-position: top !important;
background-repeat: repeat-y !important;
background-size: 100% !important;
padding: 0px 60px !important;
}
.et_pb_row:last-child {
padding-bottom: 4.5rem !important;
}
#contactez-nous.et_pb_row {
background-image: none !important;
padding: 0px 50px !important;
}
@media only screen and (max-width: 980px) { /* tablette */
.et_pb_row.chemin-d-acces { /* la première .et_pb_row de la page */
background-image: url(/wp-content/uploads/2019/12/background-img_et_pb_row_tablette_first-child_gauche_HD.png), url(/wp-content/uploads/2019/12/background-img_et_pb_row_tablette_first-child_droite_HD.png) !important; /* 2 background-images séparés, pour pouvoir gérer les réglages séparément */
background-origin: border-box !important; /* border-box = le point de départ de la background-images est callé sur le haut de la row */
background-position: top 0px left 0px, top 4.5rem right 0px !important; /* position portée gauche = top 0px (par rapport à la row, qui est son "référent" niveau positionnement) // position portée droite = top 4.5rem = équivalent padding-top de .et_pb_section:first-child > .et_pb_row */
background-repeat: repeat-y, no-repeat !important; /* répétition sur l'axe y de la portée gauche // pas de répétition pour la portée droite */
background-size: 100% !important;
padding: 0px 50px !important;
}
.et_pb_row:not(.chemin-d-acces) { /* toutes les .et_pb_row qui ne sont PAS la première de la page */
background-image: url(/wp-content/uploads/2019/12/background-img_et_pb_row_tablette_HD.png) !important;
background-origin: border-box !important;
background-position: top 0px left 0px !important;
background-repeat: repeat-y !important;
background-size: 100% !important;
padding: 0px 50px !important;
}
.et_pb_row:last-child {
padding-bottom: 2.25rem !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.et_pb_row.chemin-d-acces {
background-image: url(/wp-content/uploads/2019/12/background-img_et_pb_row_smartphone_first-child_gauche_HD.png), url(/wp-content/uploads/2019/12/background-img_et_pb_row_smartphone_first-child_droite_HD.png) !important;
background-origin: border-box !important;
background-position: top 0px left 0px, top 4.5rem left 0px !important;
background-repeat: repeat-y, no-repeat !important;
background-size: 100% !important;
padding: 0px 9.45% !important;
}
.et_pb_row:not(.chemin-d-acces) { /* toutes les .et_pb_row qui ne sont PAS la première de la page */
background-image: url(/wp-content/uploads/2019/12/background-img_et_pb_row_smartphone_HD.png) !important;
background-origin: border-box !important;
background-position: top 0px left 0px !important;
background-repeat: repeat-y !important;
background-size: 100% !important;
padding: 0px 9.45% !important;
}
body.search-results article.type-cours .et_pb_row,
body.page-id-1051 .et_pb_row,
body.page-id-1046 .et_pb_row,
body.page-id-1054 .et_pb_row,
body.page-id-234423 .et_pb_row,
body.single-cours .et_pb_row {
padding-left: 10.5% !important;
padding-right: 10.5% !important;
}
.et_pb_row:last-child {
padding-bottom: 2.25rem !important;
}
}
/** réglages des "Sections standard": c'est très important de mettre le padding à 0, pour que les background-img (portées) s'affichent sans interruption **/
.et_pb_section {
padding: 0px !important;
}
/** réglages des sections spéciales (oranges) + les colonnes qu'elle contient + la première ligne (row) --> padding à 0px !! **/
.et_pb_section.et_section_specialty,
.et-db #et-boc .et-l .et_pb_column_single,
.et_pb_row_inner:first-child {
padding: 0px !important;
}
/** réglages des pages / posts --> margin/padding à 0px !! **/
.single .et_pb_post {
margin-bottom: 0px !important;
}
#left-area {
padding-bottom: 0px !important;
}
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/***** --------------------------------------- 5) réglages du HEADER --------------------------------------- *****/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
li.menu-item-906 {
display: none !important; /* ligne à supprimer quand Guy-François aura rempli la page Archive + il faudra supprimer la page Médias du menu */
}
/*** ------------------------------------------------------------ ***/
/*** 5.0) réglages généraux ***/
/*** ------------------------------------------------------------ ***/
/** ça gérait la ligne gris claire en dessous du header - enlevée par rapport au thème original (voir ligne 1241 fichier style.dev_divi_parent.css) **/
#main-header {
box-shadow: 0 0px 0 rgba(0, 0, 0, 0);
background-color: #fdfdfd !important; /* gris très clair = même couleur que le fond du site */
}
/** background-color du header quand on scroll (et qu'il devient plus petit) **/
.et-fixed-header#main-header, .et-fixed-header#main-header .nav li ul, .et-fixed-header .et-search-form {
background-color: #fdfdfd !important; /* gris très clair = même couleur que le fond du site */
}
/*** ------------------------------------------------------------ ***/
/*** 5.1) réglages du MENU DESKTOP ***/
/*** ------------------------------------------------------------ ***/
/*** 5.1.1)réglages du menu nav (ul) ***/
/** réglages généraux **/
#et-top-navigation, #top-menu-nav, ul#top-menu.nav {
height: auto !important;
width: 100% !important;
}
#et-top-navigation {
background-color: #000000 !important; /* noir */
}
/** padding-left/right à 60px, pour que les titres de menus soient alignés avec le contenu du site (càd les et_pb_row) **/
@media only screen and (min-width: 981px) { /* bureau */
.et_header_style_centered #main-header div#et-top-navigation {
padding: 0 60px !important;
}
}
/*** 5.1.2)réglages des menus de premier niveau (ul li) ***/
/** réglages du menu nav (ul) : display:flex + align-items:stretch + justify-content:space-between = pour répartir les marges entre les menus de premier niveau (ul li) **/
ul#top-menu {
display: flex !important;
align-items: stretch !important;
justify-content: space-between !important;
width: 100% !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
padding-right: 6% !important; /* pour laisser de la place pour le picto/fonction recherche */
}
/** réglages du menu nav (ul li) : display:block + flex: 0 1 auto = la suite des réglages répartition des marges entre les (ul li) **/
li#top-menu {
display: block !important;
flex: 0 1 auto !important;
list-style-type: none !important;
padding-right: 0px !important;
}
#top-menu li {
padding-right: 0 !important;
}
#top-menu > li > a {
padding-bottom: 0px !important;
}
/*** 5.1.3)réglages des blocs des sous-menus déroulants (ul li ul) et des lignes (ul li ul li) ***/
/** réglages généraux (ul li ul) **/
.nav li ul {
visibility: hidden;
z-index: 9999;
width: auto !important; /* largeur du bloc (ul li ul) */
border-top: none;
opacity: 0;
background-color: #000000 !important; /* noir */
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
position: absolute;
padding: 5px 0 0 0;
margin: 0px -15px !important; /* margin-left/right à -15px sur ul, pour compenser le padding-left/right à 15px sur le li, afin que les liens de sous-menu soient alignés avec le lien de leur menu parent */
}
.nav li ul.cacher-sousmenu {
display: none;
}
.nav li ul li {
background-color: #3c3c3b !important; /* gris+foncé */
width: 100% !important;
}
/** réglages des lignes à l'intérieur du bloc (ul li ul li) **/
#top-menu li li {
margin: 0;
padding: 0px 15px !important; /* padding-left/right à 15px sur le li, pas que ce soit collé au cadre */
white-space: nowrap !important;
}
/*** 5.1.4)réglages spéciaux pour le sous-menu de COURS (ul li ul + ul li ul li) ***/
/** largeur du bloc sous-mene de COURS (ul li ul) **/
.nav li:nth-child(2) ul {
width: 180px !important; /* largeur fixe */
}
/** largeur des liens du sous-mene de COURS (ul li ul li) **/
#top-menu li:nth-child(2) li a {
width: 150px !important; /* largeur du ul - les padding-left/right (180-15-15=130px) */
}
/** couleur de fond des lignes du sous-menu COURS (ul li ul li) **/
.nav li:nth-child(2) li:first-child {
background-color: #eeaecf !important; /* rose */
}
.nav li:nth-child(2) li:nth-child(2) {
background-color: #fbef77 !important; /* jaune */
}
.nav li:nth-child(2) li:nth-child(3) {
background-color: #a4cd84 !important; /* vert */
}
.nav li:nth-child(2) li:nth-child(4) {
background-color: #69c5da !important; /* bleu */
}
.nav li:nth-child(2) li:nth-child(5) {
background: linear-gradient(to right, rgba(253,251,251,1) 0%, rgba(235,237,238,1) 100%) !important; /* gris perle dégradé 018 Cloudy Knoxville */
}
.nav li:nth-child(2) li:nth-child(6) {
background-color: #3c3c3b !important; /* gris+foncé */
}
/** couleur des liens du sous-menu COURS (ul li ul li a) **/
#top-menu > li:nth-child(2) > ul:nth-child(2) > li:nth-child(1) > a:nth-child(1),
#top-menu > li:nth-child(2) > ul:nth-child(2) > li:nth-child(2) > a:nth-child(1),
#top-menu > li:nth-child(2) > ul:nth-child(2) > li:nth-child(3) > a:nth-child(1),
#top-menu > li:nth-child(2) > ul:nth-child(2) > li:nth-child(4) > a:nth-child(1),
#top-menu > li:nth-child(2) > ul:nth-child(2) > li:nth-child(5) > a:nth-child(1){
color: #3c3c3b !important; /* anthracite */
}
/*** 5.1.5)réglages des textes des menus premier niveau (ul li) et sous-menus (ul li ul li) ***/
#top-menu a { /* menu premier niveau (li) + sous-menu (li li) */
color: #ffffff !important; /* blanc */
font-family: hk_groteskmedium, Arial, sans-serif !important;
text-transform: uppercase;
font-weight: 500 !important;
letter-spacing: 0.1em !important; /* correspond à un interlettrage de 100 sur InDesign */
}
/** font-size du menu premier niveau (ul li) et des sous-menus (ul li ul li) **/
@media only screen and (min-width: 981px) { /* bureau */
#top-menu li a { /* menu premier niveau (ul li) */
font-size: 1.125rem !important;
line-height: 1em !important;
padding-bottom: 0.1em !important;
}
#top-menu li li a { /*sous-menu (ul li ul li) */
font-size: 1.125rem !important;
line-height: 1.15em !important;
width: auto !important;
padding: 5px 0px !important;
}
}
@media only screen and (min-width: 981px) and (max-width: 1080px) { /* bureau entre 981 et 1080 */
#top-menu li a { /* menu premier niveau (ul li) */
font-size: 0.9rem !important;
line-height: 1em !important;
padding-bottom: 0em !important;
}
#top-menu li li a { /*sous-menu (ul li ul li) */
font-size: 0.9rem !important;
line-height: 1.15em !important;
width: auto !important;
padding: 5px 0px !important;
}
}
#top-menu-nav > ul > li > a:hover { /* menu premier niveau (ul li) */
opacity: 0.85 !important;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
text-decoration: none !important;
}
.nav ul li a:hover { /*sous-menu (ul li ul li) */
opacity: 0.7 !important;
background-color: transparent !important;
text-decoration: none !important;
}
/*** 5.1.6)réglages du picto maison ***/
@media only screen and (min-width: 981px) { /* bureau */
img.picto-maison {
height: 16px !important;
width: 19.2px !important;
position: relative;
bottom: -0.05em;
}
}
@media only screen and (min-width: 981px) and (max-width: 1080px) { /* bureau entre 981 et 1080 */
img.picto-maison {
height: 14px !important;
width: 14.417px !important;
}
}
/*** ------------------------------------------------------------ ***/
/*** 5.2) réglages du logo (bureau + tablette + smartphone) ***/
/*** ------------------------------------------------------------ ***/
/** cacher le "logo" (logo fantome) **/
img#logo {
visibility: hidden !important;
}
/** appliquer un background dans le logo_container... c'est ça qui fait office de logo! **/
.et_header_style_centered #main-header .logo_container {
background-image: url(/wp-content/uploads/2020/03/background-img_header_bureau_web.svg) !important;
background-origin: content-box !important;
background-position: bottom !important;
background-size: 100% !important;
background-repeat: no-repeat !important;
max-height: 132px !important;
height: auto !important;
width: 100%;
max-width: 1080px;
margin: 0 auto !important;
padding: 0 !important;
}
@media only screen and (max-width: 980px) { /* tablette */
.et_header_style_centered #main-header .logo_container {
background-image: url(/wp-content/uploads/2020/03/background-img_header_tablette_web.svg) !important;
background-origin: content-box !important;
background-position: bottom !important;
background-size: 100% !important;
background-repeat: no-repeat !important;
max-height: 141px !important;
height: auto !important;
width: 100% !important;
max-width: 980px;
margin: 0 auto;
padding: 0;
}
header#main-header {
padding: 0 !important;
}
.et_header_style_centered #et_mobile_nav_menu {
margin-top: 0px !important;
}
.et_header_style_centered #logo {
max-height: 141px !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.et_header_style_centered #main-header .logo_container {
background-image: url(/wp-content/uploads/2020/03/background-img_header_smartphone_web.svg) !important;
background-origin: content-box !important;
background-position: bottom !important;
background-size: 100% !important;
background-repeat: no-repeat !important;
max-height: 85px !important;
height: auto !important;
width: 100% !important;
max-width: 767px;
margin: 0 auto;
padding: 0;
}
header#main-header {
padding: 0 !important;
}
.et_header_style_centered #et_mobile_nav_menu {
margin-top: 0px !important;
}
.et_header_style_centered #logo {
max-height: 85px !important;
}
}
/** pour rendre toute la div .logo_container cliquable = étendre le lien (vers la home) pour qu'il couvre toute la surface de la div **/
@media only screen and (min-width: 981px) { /* bureau */
.logo_container > a {
display:block;
width:100%;
max-height:100px !important;
}
}
@media only screen and (max-width: 980px) { /* tablette */
.logo_container > a {
display:block;
width:100%;
max-height:100px !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.logo_container > a {
display:block;
width:100%;
height:100%;
}
}
/*** ------------------------------------------------------------ ***/
/*** 5.3) réglages du MENU MOBILE ***/
/*** ------------------------------------------------------------ ***/
/*** 5.3.1)réglages du menu nav (ul) ***/
/** changer les réglages par défaut de DIVI du bloc ul du menu (mettre en pleine largeur + supprimer la border-top et l'ombre) **/
.et_mobile_menu {
padding: 0px;
border-top: none;
opacity: 1;
background: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/** supprimer les padding-left de tous les niveaux contenus dans le menu nav, afin que tous les menus et sous-menus soient centrés **/
#main-header .et_mobile_menu li ul, .et_pb_fullwidth_menu .et_mobile_menu li ul, .et_mobile_menu li li {
padding-left: 0px;
}
/** réduire la hauteur par défaut de DIVI des lignes (ul li + ul li ul li) du menu **/
#main-header {
line-height: 12px;
}
/*** 5.3.1.2)réglages spéciaux du menu nav (ul) : remplacer l'icône burger par le texte MENU, etc etc ***/
/** supprimer le texte par défaut "sélectionner une page" (apparait quand le "style d'en-tête" est réglé sur "centré") + masquer plus ou moins son conteneur **/
.et_header_style_centered .mobile_nav .select_page {
display: none;
}
.et_header_style_centered #main-header .mobile_nav {
display: block;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
background-color: transparent;
}
/** remplacer l'icon "burger" par le texte "MENU" (changé font-family + content) + réglages texte et background **/
.mobile_nav.closed > .mobile_menu_bar.mobile_menu_bar_toggle::before {
position: relative;
top: 0;
left: 0;
font-family: hk_groteskmedium, Arial, sans-serif !important;
content: "MENU";
color: #ffffff !important; /* blanc */
font-size: 20px;
line-height: 18px;
letter-spacing: 0.1em !important;
background-color: #000000 !important; /* noir */
padding: 10px 0px;
margin-top: -2px !important; /* pour supprimer le mini espace qu'il y avait entre le logo_container et le menu */
cursor: pointer;
}
/* changement de style quand le menu est ouvert (fond blanc, texte noir et +petit) */
.mobile_nav.opened > .mobile_menu_bar.mobile_menu_bar_toggle::before {
position: relative;
top: 0;
left: 0;
font-family: hk_groteskmedium, Arial, sans-serif !important;
content: "MENU";
color: #000000 !important; /* noir */
font-size: 14px;
line-height: 12px;
letter-spacing: 0.1em !important;
background-color: transparent !important; /* transparent */
padding: 10px 0px;
cursor: pointer;
}
/** pour que le texte "MENU" soit centré dans son conteneur **/
.et_header_style_centered #main-header .mobile_nav {
text-align: center !important;
}
/* j'ai pas tout compris comment ça marche, mais en gros, le code suivant fait en sorte que le bloc "MENU" (qui remplace le burger) soit en largeur 100%, et la position relative, c'est pour que ce bloc soit aligné avec le bloc suivant (ul) */
.mobile_menu_bar_toggle {
display: block;
width: 100%;
position: relative;
top:0;
right:0;
bottom:0;
left:0;
}
span.mobile_menu_bar.mobile_menu_bar_toggle::before {
display: block;
width: 100%;
}
/** décallage du menu (ul) de 34px, pour qu'il se calle pile en dessous (sans espace) du bloc "MENU" **/
.et_header_style_centered .et_mobile_menu {
top: 34px;
}
/*** 5.3.2)réglages des menus de premier niveau (ul li) ***/
/** mettre une position relative aux menus parents qui ont des sous-menus (ul li) **/
#mobile_menu .menu-item-has-children {
position: relative;
}
/** positionnement + padding des icons qui permettent de dérouler les sous-menus (ul li) **/
#main-header .et_mobile_menu .menu-item-has-children > a:after {
position: absolute;
right: 0;
top: 0;
padding: 10px 20px;
cursor: pointer;
z-index: 3;
}
/** choix de l'icon pour dérouler les sous-menus ("\33" = triangle vers le bas) **/
#main-header .et_mobile_menu .menu-item-has-children > a:after {
content: "\33";
display: block;
color: #fdfdfd !important; /* gris très clair */
font-size: 16px;
font-family: ETmodules;
}
/** choix de l'icon pour replier les sous-menus ("\32" = triangle vers le haut) **/
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after {
content: "\32";
}
/** couleur de fond + border top des menus premier niveau (ul li) **/
.et_mobile_menu li {
background: black !important; /* noir */
border-top: 0.1px solid #3c3c3b !important; /* anthracite */
}
/*** 5.3.3)réglages des blocs des sous-menus déroulants (ul li ul) et des lignes (ul li ul li) ***/
/** par défaut: cacher les sous-menus sur mobile (ul li ul) **/
#main-header .et_mobile_menu ul.sub-menu {
display: none !important;
visibility: hidden !important;
transition: all 1.5s ease-in-out;
}
/** onclick: montrer les sous-menus sur mobile (ul li ul) **/
#main-header .et_mobile_menu .visible > ul.sub-menu {
display: block !important;
visibility: visible !important;
}
/** couleur de fond + border top des sous-menus (ul li ul li) **/
#mobile_menu > li:nth-child(3) > ul > li,
#mobile_menu > li:nth-child(4) > ul > li,
#mobile_menu > li:nth-child(5) > ul > li,
#mobile_menu > li:nth-child(6) > ul > li,
#mobile_menu > li:nth-child(7) > ul > li,
#mobile_menu > li:nth-child(8) > ul > li {
background: #3c3c3b !important; /* anthracite */
border-top: 0.1px solid #000000 !important; /* anthracite */
}
/*** 5.3.4)réglages spéciaux pour le sous-menu de COURS (ul li ul + ul li ul li) ***/
/** couleur de fond des lignes du sous-menu COURS (ul li ul li) **/
.et_mobile_menu li:nth-child(2) li:first-child {
background: #eeaecf !important; /* rose */
}
.et_mobile_menu li:nth-child(2) li:nth-child(2) {
background: #fbef77 !important; /* jaune */
}
.et_mobile_menu li:nth-child(2) li:nth-child(3) {
background: #a4cd84 !important; /* vert */
}
.et_mobile_menu li:nth-child(2) li:nth-child(4) {
background: #69c5da !important; /* bleu */
}
.et_mobile_menu li:nth-child(2) li:nth-child(5) {
background: linear-gradient(to right, rgba(253,251,251,1) 0%, rgba(235,237,238,1) 100%) !important; /* gris perle dégradé 018 Cloudy Knoxville */
}
.et_mobile_menu li:nth-child(2) li:nth-child(6) {
background: #3c3c3b !important; /* gris+foncé */
}
/** + enlever le border top définit pour les autres sous-menus **/
.et_mobile_menu li:nth-child(2) li {
border-top: none !important; /* annuler le border-top pour les sous-menus cours */
}
/** couleur des liens du sous-menu COURS (ul li ul li a) **/
#mobile_menu > li:nth-child(2) > ul > li > a {
color: #3c3c3b !important; /* anthracite */
}
#mobile_menu > li:nth-child(2) > ul > li#menu-item-239084 > a {
color: #ffffff !important; /* blanc = sous-menu "PROFESSEURS" */
}
/*** 5.3.5)réglages des textes des menus premier niveau (ul li) et sous-menus (ul li ul li) ***/
/** réglages des textes des menus et sous-menus (liens) **/
#mobile_menu a {
color: #ffffff !important; /* blanc */
font-family: hk_groteskmedium, Arial, sans-serif !important;
font-weight: 500 !important;
text-transform: uppercase;
letter-spacing: 0.1em;
text-align: center;
}
/*** 5.3.6)réglages du picto maison (display:none sur menu mobile) ***/
#main-header .et_mobile_menu li.et_first_mobile_item { /* picto maison */
display: none;
}
/*** ------------------------------------------------------------ ***/
/*** 5.4) réglages de la zone recherche ***/
/*** ------------------------------------------------------------ ***/
/** réglages du picto recherche **/
.et_header_style_centered #et_search_icon::before {
top: -23px;
left: 0px;
color: #ffffff !important; /* blanc */
font-weight: bold;
font-size: 1rem !important;
line-height: 1em !important;
}
@media only screen and (min-width: 981px) and (max-width: 1080px) { /* bureau entre 981 et 1080 */
.et_header_style_centered #et_search_icon::before {
top: -19px;
left: 4px;
color: #ffffff !important; /* blanc */
font-weight: bold;
font-size: 0.8rem !important;
line-height: 1em !important;
}
}
/** réglages de la zone contenant le picto recherche **/
.et_header_style_centered #et_top_search {
display: block !important;
float: right;
position: relative;
width: 18px;
margin: 0 0 0 22px;
}
/** zone contenant le picto recherche + zone de saisie: display none sur mobile (j'ai mis une section avec un widget à la place) **/
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.et_header_style_centered #et_top_search,
.et_search_outer {
display: none !important;
}
}
/** réglage de la zone de recherche quand on clic sur le picto **/
/** remarque: il est en absolute par rapport à son parent, qui est #et-top-navigation (normalement il est dans la div suivante, mais je l'ai déplacé dans le fichier header.php de mon thème enfant, justement pour pouvoir régler la position absolute par rapport à la barre de navigation, et pas par rapport à la fenêtre du navigateur, qui donnait des résultats vraiment pourris!) **/
.et_search_outer {
overflow: hidden;
position: absolute;
top: 30px; /* juste en dessous de la barre de navigation, qui fait 29.8px de hauteur */
width: 30%;
background-color: transparent !important;
right: 56px;
}
/** réglage du container qui est dans .et_search_outer **/
.container.et_search_form_container {
width: 100% !important;
height: 45px !important;
}
/** réglage du formulaire qui est dans .et_search_form_container **/
form.et-search-form {
background-color: rgba(255,255,255,0.75) !important;
border-bottom: 1px solid #3c3c3b !important; /* anthracite */
}
/* réglage de la croix pour fermer la zone de recherche */
.et_header_style_centered .et-search-form input, .et_header_style_centered span.et_close_search_field {
top: 0 !important;
}
/* annuler toutes les animations relatives au clic sur picto recherche ou picto croix */
.et_pb_menu_hidden #et_search_icon::before,
.et_pb_menu_hidden #top-menu,
.et_pb_menu_hidden .mobile_menu_bar,
.et_pb_menu_visible #et_search_icon::before,
.et_pb_menu_visible #top-menu,
.et_pb_menu_visible .mobile_menu_bar,
.et_pb_menu_hidden .et-cart-info,
.et_pb_menu_visible .et-cart-info,
.container.et_search_form_container.et_pb_search_visible,
.et_pb_search_form_hidden,
.et_pb_menu_hidden #et_search_icon:before,
.et_pb_menu_visible #et_search_icon:before {
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
animation: none !important;
}
/* annuler l'opacity=0 (valeur par défaut) du menu quand on clic sur le picto recherche */
.et_pb_menu_hidden #et_search_icon::before, .et_pb_menu_hidden #top-menu, .et_pb_menu_hidden .mobile_menu_bar {
opacity: 1 !important;
}
/* réglage du widget recherche (affiché en bas de page sur tablette et smartphone) - masquer la zone du bouton où c'était écrit "Rechercher" */
.widget_search input#searchsubmit {
display: none !important;
}
.et_pb_column .et_pb_widget {
margin-bottom: 1.125rem;
}
/*** ------------------------------------------------------------ ***/
/*** 5.5) réglages de la page de résultats de recherche ***/
/*** ------------------------------------------------------------ ***/
/*** annuler les margin et padding (mises par défaut par Divi), pour éviter les "trous" dans les images des portées ***/
body.search .et_pb_post {
margin-bottom: 0px !important;
}
body.search .et_pb_post .entry-content {
padding-top: 0px !important;
}
/*** mise en page de chaque résultat de recherche (articles) ***/
/** le bloc qui contient l'image = 21.6% de la largeur de la colonne, float left, les marges, etc **/
/* remarque: ce sont les mêmes réglages que pour les pages de Cours 3e niveau, bloc "Professeurs" */
body.search .et_pb_post .entry-featured-image-url {
display: block;
float: left;
position: relative;
width: 21.6% !important;
margin-bottom: 30px;
margin-right: 3.25%; /* 3.25% de la largeur du module (et_pb_code) */
}
@media only screen and (max-width: 980px) { /* tablette */
body.search .et_pb_post .entry-featured-image-url {
width: 24.6% !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
body.search .et_pb_post .entry-featured-image-url {
float: none;
width: 100% !important; /* pour avoir plus ou moins la même largeur de portée entre l'image du prof et le background de la page */
margin-bottom: 1.5rem;
margin-right: 0;
}
body.search .et_pb_post.tribe_events.tag-concerts .entry-featured-image-url {
float: none;
width: 100% !important;
margin-bottom: 1.5rem;
}
}
/* annuler l'opacité 50% sur les images dans la page de résultats de la recherche classique */
body.search .et_pb_post a.entry-featured-image-url:hover {
opacity: 1 !important;
}
/** le bloc qui contient le h2 = 70.5% de la largeur de la colonne, float left, les marges, etc **/
body.search .et_pb_post h2.entry-title {
display: block;
float: left;
width: 70.5% !important;
}
/** on enlève la balise , pour que les noms des profs s'affichent sur une ligne **/
body.search .et_pb_post h2.entry-title br {
display: none !important;
}
/** le bloc qui contient l'extrait de texte = 70.5% de la largeur de la colonne, float left, les marges, etc **/
body.search .et_pb_post p {
display: block;
float: left;
width: 70.5% !important;
}
@media only screen and (max-width: 767px) { /* smartphone */
body.search .et_pb_post h2.entry-title,
body.search .et_pb_post p {
float: none;
width: 100% !important;
}
}
body.search .et_pb_post h2.entry-title a:hover {
font-weight: inherit !important;
}
/*** masquer les post-meta (nom auteur, date publication, catégories) ***/
body.search .et_pb_post .post-meta {
margin-bottom: 0px;
display: none;
}
/*** on supprime les background-image et la valeur du height pour la page "résultats de recherche" ***/
/* pour annuler réglages faits dans 16.2) réglages des fonds dégradés dans les pages Cours 2e et 3e niveau */
body.search-results #page-container #et-main-area #main-content article,
body.search-results #page-container #et-main-area #main-content article.et_pb_post {
background-image: none !important;
height: initial !important;
}
/*** normalement le padding-bottom des row:last-child est à 4rem, mais on réduit à 2rem pour cette page "recherche" ***/
body.search #page-container #et-main-area #main-content .et_pb_row:last-child {
padding-bottom: 2rem !important;
}
/** on respécifie le padding-bottom à 0 pour la row "contactez-nous" **/
body.search #page-container #et-main-area #main-content #contactez-nous.et_pb_row {
padding-bottom: 0 !important;
}
/*** et vu que dans cette page "recherche", chaque article (résultat) a la structure article > section > row > etc, alors la row qui contient le contenu est toujours une row:first-child... du coup on annule la padding-top à 4.5rem qu'on avait mise sur chaque .et_pb_row:first-child (voir chapitre 4: réglages des boites DIVI: Modules, Colonnes, Lignes, Sections standard) ***/
@media only screen and (max-width: 980px) { /* tablette et smartphone */
body.search #page-container #et-main-area #main-content .et_pb_section:first-child > .et_pb_row:first-child {
padding-top: 0px !important;
}
body.search #page-container #et-main-area #main-content .et_pb_section:first-child > .et_pb_row.chemin-d-acces {
padding-top: 4.5rem !important; /* et on la remet juste pour la row d'en-tête (chemin d'accès) */
}
}
/*** pour "annuler" les valeurs de min-height / max-height / height pour toutes les sections qui ne sont pas le footer (réglages voir chapitre footer) ***/
body.search .et_pb_section:not(#footer-menu2-EMC) {
min-height: 25px !important;
max-height: 100% !important;
height: auto !important;
}
/*** puis on met une valeur de hauteur fixe (à la place de min-height / max-height) pour le footer ***/
@media only screen and (min-width: 768px) { /* bureau et tablette */
body.search .et_pb_section:last-child > #footer-menu2-EMC.et_pb_row,
body.search-no-results #footer-menu2-EMC.et_pb_row {
height: 155px !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
body.search .et_pb_section:last-child > #footer-menu2-EMC.et_pb_row,
body.search-no-results #footer-menu2-EMC.et_pb_row {
height: 275px !important;
}
}
@media only screen and (max-width: 660px) { /* smartphone < 660px */
body.search .et_pb_section:last-child > #footer-menu2-EMC.et_pb_row,
body.search-no-results #footer-menu2-EMC.et_pb_row {
height: 260px !important;
}
}
@media only screen and (max-width: 550px) { /* smartphone < 550px */
body.search .et_pb_section:last-child > #footer-menu2-EMC.et_pb_row,
body.search-no-results #footer-menu2-EMC.et_pb_row {
height: 240px !important;
}
}
@media only screen and (max-width: 440px) { /* smartphone < 440px */
body.search .et_pb_section:last-child > #footer-menu2-EMC.et_pb_row,
body.search-no-results #footer-menu2-EMC.et_pb_row {
height: 215px !important;
}
}
/*** dans la page de résultats de la "recherche par âge" + page de résultat de recherche classique, on masque la section contenant le widget de recherche pour l'affichage bureau ***/
@media only screen and (min-width: 981px) { /* bureau */
body.search #section-widget-recherche.et_pb_section,
body.archive.search.search-results.post-type-archive.post-type-archive-cours #section-widget-recherche.et_pb_section {
display: none !important;
}
}
/*** dans la page de résultats de la "recherche par âge", on masque la section qui affiche le nombre de résultats (car le chiffre est faux) ***/
body.archive.search.search-results.post-type-archive.post-type-archive-cours .et_pb_section.nombre-de-resultats,
body.archive.search.search-no-results.post-type-archive.post-type-archive-cours .et_pb_section.nombre-de-resultats {
display: none;
}
/** mais on rajoute la phrase "Aucun cours ne correspond à votre choix" (phrase insérée dans search.php) **/
/** margin-left 14px pour laisser la place pour le ! (before) + padding-bottom 4.5rem pour que l'image du chat soit à peu près au même endroit que dans la page de résultat de recherche classique **/
p.no-result-cours {
margin-left: 14px;
padding-bottom: 4.5rem !important;
}
/** ajouter un ! avant la phrase **/
p.no-result-cours::before {
font-family: Baskerville, "Times New Roman", serif !important;
font-weight: 600;
color: #3c3c3b;
font-size: 1.4rem !important;
content: "!";
position: absolute;
top: 0;
left: 0;
}
/** et on masque cette phrase dans la page de résultat de recherche classique **/
body.search:not(.archive) p.no-result-cours {display: none;}
img.no-result-cours {
width: 600px !important;
height: auto !important;
margin-bottom: 3rem !important;
}
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/***** --------------------------------------- 6) réglages du FOOTER --------------------------------------- *****/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
#main-footer {
display: none !important;
}
/** réglages du background-image du footer **/
.et_pb_section:last-child > #footer-menu2-EMC.et_pb_row,
body.page-template-home #footer-menu2-EMC.et_pb_row,
body.search-no-results #footer-menu2-EMC.et_pb_row {
background-image: url(/wp-content/uploads/2020/03/background-img_footer_bureau_web.svg) !important;
background-origin: content-box !important;
background-position: top !important;
background-size: 100% !important;
background-repeat: no-repeat !important;
height: 155px !important;
width: 100%;
max-width: 1080px;
padding: 0px !important;
}
@media only screen and (max-width: 980px) { /* tablette */
.et_pb_section:last-child > #footer-menu2-EMC.et_pb_row,
body.page-template-home #footer-menu2-EMC.et_pb_row,
body.search-no-results #footer-menu2-EMC.et_pb_row {
background-image: url(/wp-content/uploads/2020/03/background-img_footer_tablette_web.svg) !important;
background-origin: content-box !important;
background-position: bottom !important;
background-size: 100% !important;
background-repeat: no-repeat !important;
max-height: 250px !important;
width: 90%;
max-width: 980px;
padding: 0px !important;
}
.et_pb_section:last-child {
max-height: 250px !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.et_pb_section:last-child > #footer-menu2-EMC.et_pb_row,
body.page-template-home #footer-menu2-EMC.et_pb_row,
body.search-no-results #footer-menu2-EMC.et_pb_row {
background-image: url(/wp-content/uploads/2020/03/background-img_footer_smartphone_web.svg) !important;
background-origin: content-box !important;
background-position: bottom !important;
background-size: 100% !important;
background-repeat: no-repeat !important;
max-height: 576px !important;
width: 90%;
max-width: 767px;
padding: 0px !important;
}
.et_pb_section:last-child {
max-height: 576px !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone < 660px */
.et_pb_section:last-child > #footer-menu2-EMC.et_pb_row,
.et_pb_section:last-child,
body.search-no-results #footer-menu2-EMC.et_pb_row {
min-height: 275px !important;
}
}
@media only screen and (max-width: 660px) { /* smartphone < 660px */
.et_pb_section:last-child > #footer-menu2-EMC.et_pb_row,
.et_pb_section:last-child,
body.search-no-results #footer-menu2-EMC.et_pb_row {
min-height: 260px !important;
}
}
@media only screen and (max-width: 550px) { /* smartphone < 550px */
.et_pb_section:last-child > #footer-menu2-EMC.et_pb_row,
.et_pb_section:last-child,
body.search-no-results #footer-menu2-EMC.et_pb_row {
min-height: 240px !important;
}
}
@media only screen and (max-width: 440px) { /* smartphone < 440px */
.et_pb_section:last-child > #footer-menu2-EMC.et_pb_row,
.et_pb_section:last-child,
body.search-no-results #footer-menu2-EMC.et_pb_row {
min-height: 215px !important;
}
}
#footer-menu2-EMC.et_pb_row {
position: relative !important;
display: table !important;
}
@media only screen and (min-width: 981px) { /* bureau */
/* positionnement des liens du footer */
.lien-mentions-legales,
.lien-conditions-generales,
.lien-confidentialite,
.lien-acces-professeurs {
height: 35px !important;
width: auto !important;
display: table-cell !important;
vertical-align: middle !important;
}
.lien-mentions-legales {
position: absolute !important;
top: 35px !important;
left: 60px !important;
}
.lien-conditions-generales {
position: absolute !important;
top: 35px !important;
left: 22.5% !important;
}
.lien-confidentialite {
position: absolute !important;
top: 26px !important;
right: 22.5% !important;
}
.lien-acces-professeurs {
position: absolute !important;
top: 35px !important;
right: 60px !important;
}
}
@media only screen and (min-width: 981px) and (max-width: 1080px) { /* bureau entre 981 et 1080 */
/* positionnement des liens du footer */
.lien-conditions-generales {
position: absolute !important;
top: 35px !important;
left: 24% !important;
}
.lien-confidentialite {
position: absolute !important;
top: 26px !important;
right: 24% !important;
}
}
@media only screen and (max-width: 980px) { /* tablette */
/* positionnement des liens du footer */
.lien-mentions-legales,
.lien-conditions-generales,
.lien-confidentialite,
.lien-acces-professeurs {
height: 25px !important;
width: auto !important;
display: table-cell !important;
vertical-align: middle !important;
}
.lien-mentions-legales {
position: absolute !important;
top: 35px !important;
left: 50px !important;
}
.lien-conditions-generales {
position: absolute !important;
top: 70px !important;
left: 50px !important;
}
.lien-confidentialite {
position: absolute !important;
top: 35px !important;
right: 50px !important;
}
.lien-confidentialite br {
display: none !important; /* annuler le
du lien Politique de confidentialité */
}
.lien-acces-professeurs {
position: absolute !important;
top: 70px !important;
right: 50px !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
/* positionnement des liens du footer */
.lien-mentions-legales,
.lien-conditions-generales,
.lien-confidentialite,
.lien-acces-professeurs {
height: 20px !important;
width: 100% !important;
display: table-cell !important;
vertical-align: middle !important;
}
.lien-mentions-legales {
position: absolute !important;
top: 25px !important;
left: 0 !important;
}
.lien-conditions-generales {
position: absolute !important;
top: 55px !important;
left: 0 !important;
}
.lien-confidentialite {
position: absolute !important;
top: 85px !important;
right: 0 !important;
}
.lien-confidentialite br {
display: none !important; /* annuler le
du lien Politique de confidentialité */
}
.lien-acces-professeurs {
position: absolute !important;
top: 115px !important;
right: 0 !important;
}
}
/** annuler la margin-right à 5.55% (valeur par défaut de DIVI) **/
.et_pb_column.lien-mentions-legales,
.et_pb_column.lien-conditions-generales,
.et_pb_column.lien-confidentialite,
.et_pb_column.lien-acces-professeurs {
margin-right: 0 !important;
}
/** réglages des liens **/
#footer-menu2-EMC p.link-footer {
font-family: hk_groteskmedium, Arial, sans-serif !important;
text-transform: uppercase !important;
color: #3c3c3b !important; /* anthracite */
font-size: 0.7rem !important;
line-height: 0.5em;
font-weight: 500 !important;
letter-spacing: 0.1em !important; /* correspond à un interlettrage de 100 sur InDesign */
text-align: center !important;
margin-top: 0rem;
margin-bottom: 0rem;
}
a.link-footer {
color: #3c3c3b !important; /* anthracite */
text-decoration: none !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.et_pb_widget { /* largeur du bloc widget à 100%, ainsi la ligne hr prend bien la valeur width: 100% */
width: 100% !important;
}
a.link-footer { /* on le re-spécifie, sinon ça a tendance à mettre les liens en rouge */
text-decoration: none !important;
color: #3c3c3b !important; /* anthracite */
}
}
/** supprimer la barre tout en bas (pas défaut dans DIVI, pour y mettre les crédit et les réseaux sociaux) **/
#footer-bottom {
display: none !important;
}
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/***** ------------------------------------ 7) réglages de la page HOME ------------------------------------ *****/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ------------------------------------------------------------ ***/
/*** 7.1) réglages du slider d'intro ***/
/*** ------------------------------------------------------------ ***/
/*** mettre les padding à 0 sur la section et la row du slider, afin qu'il soit en pleine largeur + collé au header ***/
@media only screen and (min-width: 768px) { /* bureau et tablette */
#diapo-home.et_pb_section { /* pour que le slider colle au header */
padding: 0px !important;
}
#diapo-home.et_pb_section .et_pb_row:first-child { /* pour que le slider colle au header */
padding: 0px !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
#diapo-home.et_pb_section .et_pb_row:last-child {
padding-bottom: 0 !important;
}
}
/*** réglages du texte (phrase d'accroche) ***/
p.texte-slider-home {
font-family: Baskerville, "Times New Roman", serif !important;
font-size: 1.5625rem;
color: #282828 !important; /* anthracite+foncé */
letter-spacing: 0.04em !important; /* correspond à un interlettrage de 40 sur InDesign */
text-transform: uppercase !important;
text-align: left;
padding: 10px !important;
background-color: rgba(255,255,255,0.8) !important;
}
/** supprimer l'animation du texte **/
.et-pb-active-slide .et_pb_slide_description {
-webkit-animation-name: none;
-moz-animation-name: none;
-ms-animation-name: none;
-o-animation-name: none;
animation-name: none;
-webkit-animation-duration: 0s;
-moz-animation-duration: 0s;
-ms-animation-duration: 0s;
-o-animation-duration: 0s;
animation-duration: 0s;
-webkit-animation-timing-function: none;
-moz-animation-timing-function: none;
-ms-animation-timing-function: none;
-o-animation-timing-function: none;
animation-timing-function: none;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-fill-mode: none;
-moz-animation-fill-mode: none;
-ms-animation-fill-mode: none;
-o-animation-fill-mode: none;
animation-fill-mode: none;
}
/*** réglages des boites contenant la phrase d'accroche ***/
/** aligner le contenant du texte sur le bas du slider **/
.et_pb_slides .et_pb_slider_container_inner {
display: table-cell;
width: 100%;
vertical-align: bottom;
}
/** supprimer les margin et padding du contenant du texte **/
.et_pb_slide_description, .et_pb_slider_fullwidth_off .et_pb_slide_description {
width: auto;
margin: 0;
padding: 0;
}
/** préciser la hauteur du slider, sinon ça réduit à la taille du contenant du texte (vu qu'on supprime les margin et padding) **/
.et_pb_slide {
padding: 0;
min-height: 284px !important;
width: 100% !important;
}
/*** réglages des petits points de défilement en bas des images ***/
/** positionnement **/
.et-pb-controllers {
position: absolute;
z-index: 10;
bottom: 5px !important;
right: 22px !important;
left: inherit !important;
width: auto !important;
text-align: center;
}
@media only screen and (max-width: 980px) { /* tablette */
.et-pb-controllers {
bottom: 3px !important;
right: 12px !important;
}
}
/** taille et couleurs des petits points **/
.et-pb-controllers a {
display: inline-block;
width: 14px;
height: 14px;
margin-right: 10px;
padding: 0;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
opacity: 1;
background-color: #ffffff; /* blanc */
text-indent: -9999px;
}
.et-pb-controllers .et-pb-active-control {
background-color: #282828 !important; /* anthracite+foncé */
}
/*** ------------------------------------------------------------ ***/
/*** 7.2) réglages du module "recheche par âge" (+ page de résultats de la recherche --> déplacé dans style_searchresult.css) ***/
/*** ------------------------------------------------------------ ***/
/*** masquer "Search for:" (ajouté lors de la dernière mise à jour d'Ivory Search) ***/
span.is-screen-reader-text {
display: none;
}
/*** code original provenant du fichier /wp-content/plugins/add-search-to-menu-premium/public/css/ivory-search.css?ver=4.4.6
* (fichier désactivé pour le coup... vu que le seul code utile qu'il contenait est maintenant ci-dessous ^^) ***/
.is-form-style input.is-search-input {
padding: 8px 12px;
font-size: 19px;
line-height: 1;
border-radius: 0;
border: solid 1px #ccc;
font-family: arial;
}
.is-form-style button.is-search-submit {
background: none;
padding: 0;
margin: 0;
}
/*** masquer le bouton "submit" (sert à rien, les gens vont confirmer leur recherche avec la touche Enter) ***/
button.is-search-submit {
display: none !important;
}
/*** on met un background-image sur le formulaire, avec une taille définie (188x50 px) et une position relative ***/
form.is-search-form.is-form-id-232058 {
background-image: url("/wp-content/uploads/2020/01/recherche_par_age.png");
background-origin: content-box !important;
background-position: top !important;
background-size: 100% !important;
background-repeat: no-repeat !important;
height: 50px !important;
width: auto;
max-width: 188px;
padding: 0px !important;
position: relative !important;
}
/*** réglages du champ label = même taille (H50 L188) que son contenant (form) + position relative par rapport à form, bottom et left = 0 ***/
form.is-search-form.is-form-id-232058 label {
display: inline-block;
position: relative !important;
bottom: 0px !important;
left: 0px !important;
height: 50px !important;
width: 188px !important;
background-color: transparent !important;
padding: 0;
}
/*** réglages du champ input: positionnement par rapport à label / réglages du texte qui peut être saisi dedans ***/
form.is-search-form.is-form-id-232058 label input.is-search-input {
position: relative !important;
bottom: -21.5px !important;
left: 95px !important;
height: 21px !important;
width: 24px !important;
background-color: transparent !important;
padding: 0;
font-size: 1.125rem !important;
line-height: 1em !important;
border-radius: 0;
border: none !important;
font-family: hk_groteskmedium, Arial, sans-serif !important;
text-align: center !important;
color: #282828 !important; /* anthracite+foncé */
vertical-align: baseline !important;
}
@media only screen and (min-width: 981px) { /* bureau */
/*** positionnement du module de recherche par âge ***/
#section-recherche-par-age.et_pb_section .et_pb_code_inner form {
position: absolute !important;
top: 1.5rem !important;
right: -218px !important; /* 188px largeur form + 30px margin-right de la row = 218px */
height: 50px !important;
width: 188px !important;
}
/*** hauteur de la section, de la row et de la colonne qui contiennent le module de recherche par âge à 0px, pour aligner ce module avec le titre de la page
* + padding à 0 (sinon on a 2 portées latérales qui se chevauchent!) ***/
.et-db #et-boc .et-l #section-recherche-par-age.et_pb_section,
.et-db #et-boc .et-l #section-recherche-par-age.et_pb_section .et_pb_row,
.et-db #et-boc .et-l #section-recherche-par-age.et_pb_section .et_pb_row .et_pb_column {
height: 0px !important;
padding-bottom: 0px !important;
}
}
@media only screen and (max-width: 980px) { /* tablette */
#section-recherche-par-age-mobile.et_pb_section .et_pb_code_inner form {
position: absolute !important;
top: 0 !important;
left: -50px !important;
height: 50px !important;
width: 188px !important;
}
.et-db #et-boc .et-l #section-recherche-par-age-mobile.et_pb_section .et_pb_row {
padding-bottom: 5rem !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
#section-recherche-par-age-mobile.et_pb_section .et_pb_code_inner form {
position: absolute !important;
top: 0 !important;
left: -13.35% !important;
height: 50px !important;
width: 188px !important;
}
}
/*** masquer les liens de modif de quand on est connectés à wp-admin (inutiles et ils gènent pour les tests) ***/
form .is-link-container a.is-customize-link, form .is-link-container a.is-edit-link {
display: none;
}
/*** ------------------------------------------------------------ ***/
/*** 7.3) réglages du bloc Bienvenue + texte intro ***/
/*** ------------------------------------------------------------ ***/
/** ajouter une margin-top avant le titre BIENVENUE **/
#section-bienvenue h1 {
margin-top: 1.5rem !important;
}
@media only screen and (max-width: 767px) { /* smartphone */
#section-bienvenue h1 {
margin-top: 0 !important;
}
}
#section-bienvenue.et_pb_section .et_pb_row {
padding-bottom: 0 !important;
}
/** réglages des background-image + padding-top à 4.5rem **/
@media only screen and (max-width: 767px) { /* smartphone */
#section-bienvenue.et_pb_section .et_pb_row {
background-image: url(/wp-content/uploads/2019/12/background-img_et_pb_row_smartphone_first-child_gauche_HD.png), url(/wp-content/uploads/2019/12/background-img_et_pb_row_smartphone_first-child_droite_HD.png) !important;
background-origin: border-box !important;
background-position: top 0px left 0px, top 4.5rem left 0px !important;
background-repeat: repeat-y, space !important;
background-size: 100% !important;
padding: 4.5rem 9.45% 0px 9.45% !important;
}
}
/** réglages du lien "LIRE LA SUITE" **/
p.lire-la-suite {
text-align: right !important;
padding-bottom: 0px !important;
margin-top: 2rem !important;
}
@media only screen and (max-width: 767px) { /* smartphone */
p.lire-la-suite {
margin-top: 0.5rem !important;
margin-bottom: 3rem !important;
}
}
a.lien-lire-la-suite {
color: #3c3c3b !important; /* anthracite */
font-size: 1rem !important;
font-weight: 500 !important;
line-height: 1.25em !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
text-decoration: none !important;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none; /** césure = non! */
}
/** réglages des étiquettes "Découvrir etc" **/
.etiquettes-home.et_pb_module {
display: inline-block !important;
vertical-align: middle !important;
width: 100% !important;
}
.etiquettes-home h3 {
font-family: hk_groteskmedium, Arial, sans-serif !important;
padding-bottom: 0 !important;
position: relative !important;
height: 0;
vertical-align: baseline;
bottom: -0.35em !important; /** la distance entre la baseline et l'exposant */
}
/* réglages des colonnes contenant les étiquettes "Découvrir etc" */
.row-etiquettes-home .et_pb_column {
width: 22% !important;
margin-right: 4% !important;
}
.row-etiquettes-home .et_pb_column:nth-of-type(4n) {
margin-right: 0 !important;
}
@media only screen and (max-width: 980px) { /* tablette */
.row-etiquettes-home .et_pb_column {
width: 40% !important;
margin-left: 5% !important;
margin-right: 5% !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.row-etiquettes-home .et_pb_column {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/*** ------------------------------------------------------------ ***/
/*** 7.4) réglages du bloc Actualités ***/
/*** ------------------------------------------------------------ ***/
/* réduire l'espace avant et après le bloc Actualités
.et_pb_row.row-lien-ecole {
padding-bottom: 40px !important;
}
*/
/*** affichage module Custom Post sur 4 colonnes - BUREAU (sur tablette + smartphone, j'ai laissé le fonctionnement natif = 2 colonnes / 1 colonne)
* source: https://www.twobluetoucans.co.uk/divi/four-column-divi-blog-grids/ ***/
.actualites-4-colonnes .et_pb_column_1_2,
.actualites-4-colonnes .et_pb_column_1_3,
.actualites-4-colonnes .et_pb_column_1_4 {
width: 100%;
}
.actualites-4-colonnes .et_pb_post {
display: inline-block !important;
vertical-align: top !important;
width: 22% !important;
margin-right: 4% !important; /* 22%x4=88% --> 100%-88%=12% --> 12%:3=4% = margin-right --> et évidement on la met à 0 sur le 4e post de chaque ligne */
/* margin-bottom: 40px !important; réduire l'espace avant et après le bloc Actualités */
margin-bottom: 4.5rem !important; /* remettre l'espace "normal" après le bloc Actualités */
padding: 0px !important;
border: none !important;
background-color: transparent;
word-wrap: break-word;
}
.et_pb_blog_grid .column {
float: left;
max-width: 100%;
width: 100%;
}
/* Sélectionne chaque élément de type .et_pb_post dont la position parmi l'ensemble des éléments de type .et_pb_post descendants directement du même élément parent, est un multiple de 4. */
.actualites-4-colonnes .et_pb_post:nth-of-type(4n) {
margin-right: 0 !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.actualites-mobile.et_pb_row .et_pb_post {
width: 100% !important;
margin-right: 0 !important;
margin-bottom: 16%;
padding: 0px !important;
}
}
/** ne pas afficher le titre dans ce module spéciale custom-post-4-colonnes (ordi) **/
.actualites-4-colonnes #liste-des-actualites-grille h2,
.actualites-mobile #liste-des-actualites-grille h2 {
display: none !important;
}
.actualites-4-colonnes #liste-des-actualites-grille p.post-meta,
.actualites-mobile #liste-des-actualites-grille p.post-meta {
font-family: hk_groteskregular, Arial, sans-serif !important;
font-size: 0.8125rem !important;
line-height: 1.25em;
text-transform: uppercase !important;
margin-bottom: 0px !important;
padding-bottom: 0px !important;
}
.actualites-4-colonnes #liste-des-actualites-grille p,
.actualites-mobile #liste-des-actualites-grille p {
font-family: hk_groteskmedium, Arial, sans-serif !important;
font-size: 1rem !important;
line-height: 1.25em;
margin-top: 0.5rem !important;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none; /** césure = non! */
}
/*** ------------------------------------------------------------ ***/
/*** 7.5) réglages du bloc Agenda ***/
/*** ------------------------------------------------------------ ***/
/*** réglages des colonnes contenant le titre AGENDA + le lien vers la page Agenda (tout sur 1 ligne) ***/
@media only screen and (min-width: 981px) { /* bureau */
.et_pb_column.home-evenements-titre {
width: 85% !important;
}
.et_pb_column.home-evenements-lien {
width: 9.5% !important;
}
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.et_pb_column.home-evenements-titre {
width: 80% !important;
}
.et_pb_column.home-evenements-lien {
width: 20% !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.et_pb_column.home-evenements-lien h1 {
font-size: 1.25rem !important;
}
}
/*** supprimer le padding-bottom de la section qui contient le titre AGENDA ***/
.home-evenements-titre-lien.et_pb_row:last-child {
padding-bottom: 0 !important;
}
/*** margin-top en dessus de la section contenant les 4 events, pour l'espacer un peu du titre AGENDA ***/
#liste-des-events-grille {
margin-top: 1.25rem !important;
}
@media only screen and (max-width: 980px) { /* tablette */
#liste-des-events-grille {
margin-top: 0.25rem !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
#liste-des-events-grille {
margin-top: 0.65rem !important;
}
}
/*** supprimer le padding-bottom de la section contenant les 4 events ***/
#blocs-events-home.et_pb_section .et_pb_row {
padding-bottom: 0 !important;
}
/*** réglages de 1 bloc de 1 event ***/
#blocs-events-home.et_pb_section .bloc-un-event {
display: inline-block !important;
vertical-align: top !important;
width: 22% !important;
margin-right: 4% !important; /* 22%x4=88% --> 100%-88%=12% --> 12%:3=4% = margin-right --> et évidement on la met à 0 sur le 4e post de chaque ligne */
margin-bottom: 60px !important;
padding: 0px !important;
border: none !important;
background-color:transparent;
word-wrap: break-word;
}
#blocs-events-home.et_pb_section .bloc-un-event:nth-of-type(4n) {
margin-right: 0 !important;
}
@media only screen and (max-width: 980px) { /* tablette */
#blocs-events-home.et_pb_section .bloc-un-event {
width: 47.25% !important;
margin-right: 5.5% !important;
margin-bottom: 7.5% !important;
}
#blocs-events-home.et_pb_section .bloc-un-event:nth-of-type(2n),
#blocs-events-home.et_pb_section .bloc-un-event:nth-of-type(4n) {
margin-right: 0 !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
#blocs-events-home.et_pb_section .bloc-un-event {
width: 100% !important;
margin-right: 0 !important;
margin-bottom: 2.5rem !important;
}
}
/*** réglages images Events (ratio page A4) ***/
/** réglages du "contenant" de l'image, pour lui imposer de rester toujours avec un ratio de page A4 */
.grille-4-events-ratio-A4 .et_pb_image_container {
background-color: transparent;
width: 100%;
padding-top: 141.43%; /* ratio page A4 */
position: relative; /* If you want image inside of it ---> */
margin-bottom: 41.43%; /* pour compenser les 141.43% de padding-top... on remet une margin-bottom à 41.43% pour refaire comme si c'était à 100% (sinon le titre de l'event est caché sous l'image) */
}
/* ---> If you want image inside of the container */
.grille-4-events-ratio-A4 .et_pb_image_container a {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/** réglages du "contenu" du container (donc, l'image quoi ^^), pour lui dire de remplir tout l'espace */
.grille-4-events-ratio-A4 .et_pb_image_container img {
min-height: 100% !important; /*height of parent container*/
max-height: 100% !important; /*height of parent container*/
width: auto !important; /*width of parent container*/
object-fit: cover !important;
box-shadow: 0.5px 1px 5px rgba(0,0,0,.1) !important;
}
/** marges autour de ces images (voir ligne 7276 fichier style.dev_divi_parent.css) */
.grille-4-events-ratio-A4 .et_pb_image_container {
margin: -10px 0px 1rem 0px;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.grille-4-events-ratio-A4 .et_pb_image_container {
margin: -10px 0px 0.75rem 0px;
}
}
/** réglages des textes sous les events (h3 et post-meta) */
h3.blocs-events-home-titre {
padding-bottom: 0px !important;
}
#blocs-events-home.et_pb_section .label-categorie { /* masquer le texte généré par The Event Calendar "Catégorie d'Évènement:" */
display: none;
}
ul.tribe-event-categories li a {
font-family: hk_groteskmedium, Arial, sans-serif !important;
font-size: 0.8125rem !important;
text-transform: uppercase;
text-decoration: none;
}
ul.tribe-event-categories li {
margin-top: 0.25rem !important;
margin-bottom: 0px !important;
}
/* annuler l'opacité 50% sur l'image de l'event + le nom de l'organisateur (dont le lien est de toutes façons désactivé) */
#liste-des-events-grille ul.tribe-event-categories li a:hover,
#liste-des-events-grille a.entry-featured-image-url:hover {
opacity: 1 !important;
}
/*** ------------------------------------------------------------ ***/
/*** 7.6) réglages du Footer de la Home ***/
/*** ------------------------------------------------------------ ***/
/*** on met une valeur de hauteur fixe (à la place de min-height / max-height) pour le footer ***/
@media only screen and (min-width: 768px) { /* bureau et tablette */
body.page-template-home #footer-menu2-EMC.et_pb_row {
height: 155px !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
body.page-template-home #footer-menu2-EMC.et_pb_row {
height: 275px !important;
}
}
@media only screen and (max-width: 660px) { /* smartphone < 660px */
body.page-template-home #footer-menu2-EMC.et_pb_row {
height: 260px !important;
}
}
@media only screen and (max-width: 550px) { /* smartphone < 550px */
body.page-template-home #footer-menu2-EMC.et_pb_row {
height: 240px !important;
}
}
@media only screen and (max-width: 440px) { /* smartphone < 440px */
body.page-template-home #footer-menu2-EMC.et_pb_row {
height: 215px !important;
}
}
/*** ------------------------------------------------------------ ***/
/*** 7.7) réglages Home PROVISOIRE (avec 4 events passés) - A EFFACER APRES COVID-19 ***/
/*** ------------------------------------------------------------ ***/
/* demande de GF du 08.04.22: pour l'instant on masque cette section... on verra si on en fait qqch plus tard */
#section-agenda {display: none !important;}
#blocs-events-home.et_pb_section,
.et_pb_section.prochains-events {
display: none !important;
}
.et_pb_row.events-passes-provisoire #liste-des-events-grille {
margin-top: 0.5rem !important;
}
.et_pb_row.events-passes-provisoire .et_pb_column {
display: inline-block !important;
vertical-align: top !important;
width: 22% !important;
margin-right: 4% !important; /* 22%x4=88% --> 100%-88%=12% --> 12%:3=4% = margin-right --> et évidement on la met à 0 sur le 4e post de chaque ligne */
margin-bottom: 60px !important;
padding: 0px !important;
border: none !important;
background-color:transparent;
word-wrap: break-word;
}
.et_pb_row.events-passes-provisoire .et_pb_column:nth-of-type(4n) {
margin-right: 0 !important;
}
@media only screen and (max-width: 980px) { /* tablette */
.et_pb_row.events-passes-provisoire .et_pb_column {
width: 45% !important;
margin-left: 2.5% !important;
margin-right: 2.5% !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.et_pb_row.events-passes-provisoire .et_pb_column {
display: block !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
.et_pb_row.events-passes-provisoire .et_pb_column img {
box-shadow: 0.5px 1px 5px rgba(0,0,0,.1) !important;
}
/*** ------------------------------------------------------------ ***/
/*** 7.8) Fête de la musique 2020 - ONLINE (vidéos envoyées par profs et élèves) ***/
/*** ------------------------------------------------------------ ***/
/*** réglages de la section sur la Home ***/
#fete-de-la-musique-event.et_pb_section .et_pb_row {
width: 100% !important;
background: none !important;
padding: 0 !important;
}
body.postid-235758 .tribe-events-abbr.tribe-events-start-time {
display: none !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.tribe_events.tag-fete-de-la-musique-2020 li.ligne-agenda-contenu {
display: table-cell !important;
width: 100% !important;
vertical-align: top !important;
}
}
/*** ------------------------------------------------------------ ***/
/*** 7.8.1) Fête de la musique 2020 - ONLINE - réglages du compte à rebours ***/
/*** ------------------------------------------------------------ ***/
/* source: https://divi.space/tips-tricks/free-and-paid-options-for-the-divi-3-0-countdown-module/ */
/*** réglages spécifiques à la Home ***/
.et_pb_row.row_countdown_timer {
padding-bottom: 32px !important;
}
/***
* .et_pb_row.row-lien-vers-videos {
padding-bottom: 52px !important;
margin-top: -32px !important;
}
***/
body.page-template-home .et_pb_countdown_timer .et_pb_countdown_timer_container {
padding-top: 0.5rem !important;
text-align: left !important;
}
/*** réglages généraux (Home et Event) ***/
.et_pb_countdown_timer .et_pb_countdown_timer_container {
padding-top: 2rem !important;
text-align: left !important;
}
.et_pb_countdown_timer .section.values:first-child {
margin-left: 0 !important;
}
.et_pb_countdown_timer .new-value, .et_pb_countdown_timer .value {
background: #393939 !important; /* Fix for where gradients arent supported */
-webkit-background: linear-gradient(#393939, #181818) !important;
-moz-background: linear-gradient(#393939, #181818) !important;
background: linear-gradient(#393939, #181818) !important;
color: #fff !important;
padding: 10px 15px !important;
border-radius: 8px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
-moz-box-shadow: inset 0 0 10px #000000 !important;
-webkit-box-shadow: inset 0 0 10px #000000 !important;
box-shadow: inset 0 0 10px #000000 !important;
}
.et_pb_countdown_timer .section p {
text-align: center !important;
display: block;
}
.et_pb_countdown_timer .sep {
display: none !important;
}
.et_pb_countdown_timer .section.values {
width: auto !important;
margin: 0 1rem !important;
}
.et_pb_countdown_timer p.label {
color: #3c3c3b !important; /* anthracite */
margin-top: 0.5rem !important;
font-size: 1.25rem !important;
}
.et_pb_countdown_timer .new-value:first-letter, .et_pb_countdown_timer .value:first-letter {
border-right: 1px solid #4c4c4c !important;
margin-right: 0.125em !important;
padding-right: 0.125em !important;
}
.et_pb_countdown_timer .section p.new-value,
.et_pb_countdown_timer .section p.value {
font-size: 4rem !important;
line-height: 4.25rem !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.et_pb_countdown_timer .section p.new-value,
.et_pb_countdown_timer .section p.value {
font-size: 3rem !important;
line-height: 3rem !important;
}
.et_pb_countdown_timer p.label {
margin-top: 0.25rem !important;
font-size: 1rem !important;
}
.et_pb_countdown_timer .et_pb_countdown_timer_container {
padding-top: 1rem !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.et_pb_countdown_timer .section p.new-value,
.et_pb_countdown_timer .section p.value {
font-size: 2rem !important;
line-height: 2.25rem !important;
}
.et_pb_countdown_timer .new-value, .et_pb_countdown_timer .value {
padding: 4px 6px !important;
border-radius: 4px !important;
}
.et_pb_countdown_timer .section.values {
width: auto !important;
margin: 0 0.25rem !important;
}
}
/*** ------------------------------------------------------------ ***/
/*** 7.8.2) Fête de la musique 2020 - ONLINE - réglages de la page des vidéos ***/
/*** ------------------------------------------------------------ ***/
.fluid-width-video-wrapper {
padding-top: 57% !important;
}
/*** padding bloc de la vidéo active ***/
#emdvideos {
padding: 20px 0px !important;
}
/*** padding bloc vidéo active - légende ***/
div.emd-container .video-summary {
padding: 20px 0px !important;
}
/*** réglages blocs vidéos (vidéo active + vidéos footer) ***/
div.emd-container .panel {
margin-bottom: 20px !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
/*** réglages vidéo active ***/
div.emd-container .carousel-inner .item.active iframe {
border: none !important;
border-radius: 0 !important;
background-color: transparent !important;
padding: 0 !important;
}
/*** réglages vidéos footer (vignettes) ***/
div.emd-container .thumbnail {
display: block;
background-color: transparent !important;
border: none !important;
border-radius: 0px !important;
transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
}
/*** réglages des légendes (titres vidéos) ***/
div.emd-container,
div.emd-container a {
font-family: HelveticaNeueRoman, Arial, sans-serif !important;
color: #3c3c3b !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
line-height: 1.4em !important;
background-color: transparent !important;
}
/* réglages spéciaux légende vidéo active */
div.emd-container a {
font-size: 1.25rem !important;
text-decoration: none !important;
}
@media only screen and (max-width: 767px) { /* smartphone */
div.emd-container a {
font-size: 1.1rem !important;
}
}
div.emd-container a:hover {
opacity: 1 !important;
}
/* réglages spéciaux légendes vidéos footer */
div.emd-container .panel-footer {
text-align: left;
overflow: hidden;
padding: 10px 0px !important;
background-color: transparent !important;
border: none !important;
border-bottom-right-radius: 0px !important;
border-bottom-left-radius: 0px !important;
}
/* supprimer le padding-bottom sur le titre de la vidéo active */
#emd-videos p {
padding-bottom: 0 !important;
}
/* mettre une hauteur minimum sur la div contenant les infos de la vidéo active (137px = titre + 3 lignes extrait) */
@media only screen and (min-width: 768px) { /* bureau et tablette */
#emd-videos .video-summary {
min-height: 137px !important;
}
}
/* masquer les flèches nav vidéo précédente/suivante (de toutes façons elles ne fonctionnent pas ^^) */
div.emd-container .carousel-control.left,
div.emd-container .carousel-control.right {
display: none !important;
}
/*** sur natel: on met les éléments sur 1 ligne (au lieu de 2 colonnes) --> vidéo à gauche, légende à droite ***/
@media only screen and (max-width: 767px) { /* smartphone */
div.emd-container .col-xs-6 {
width: 100% !important;
}
.panel.panel-info.item-video {
height: auto !important;
}
div.emd-container .panel-body {
padding: 0;
margin: 0;
width: 45% !important;
}
div.emd-container .panel-footer {
text-align: left;
overflow: hidden;
padding: 6px;
width: auto !important;
display: block !important;
position: absolute;
top: -5px;
left: 50%;
padding: 0 1% 0 0 !important;
line-height: 1.3em !important;
}
}
/*** réglages de la pagination ORDI (générée et gérée par le plugin) ***/
div.emd-container .emd-pagination > .active > span {
background-color: #008ec2 !important; /* = bleu "Formidable" */
border-color: #008ec2 !important;
}
div.emd-container .emd-pagination > li > a, div.emd-container .emd-pagination > li > span {
font-size: 1.25rem !important; /* = même taille pour tous (actif et non actif) */
line-height: 1.4em !important;
}
/*** créa et réglages de la pagination MOBILE (créée en html - module code) ***/
ul.pagination-mobile-ul {
padding-left: 0 !important;
}
li.pagination-mobile-li {
display: inline-block !important;
padding: 0px 0.5rem !important;
border-left: 1px solid #3c3c3b !important; /* anthracite */
background-color: transparent !important;
margin-bottom: 1rem !important;
}
li.pagination-mobile-li:last-child {
border-right: 1px solid #3c3c3b !important; /* anthracite */
}
a.pagination-mobile {
font-size: 0.875rem !important;
line-height: 1.4em !important;
color: #3c3c3b !important; /* anthracite */
text-decoration: none !important;
}
/*** ------------------------------------------------------------ ***/
/*** 7.9) Présentation des instruments (vidéos) - réglages de la page dédiée ***/
/*** ------------------------------------------------------------ ***/
/* réglages insérés dans un module Code (CSS), directement dans la page dédiée */
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/***** ----------------------------- 8) réglages de la page COURS (1er niveau) ----------------------------- *****/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** fonds dégradés sur les colonnes ***/
.page-id-1043 .et_pb_section:nth-child(2) .et_pb_row .et_pb_column {
background-image: linear-gradient(90deg,#eeaecf 5%,rgba(238,174,207,0) 100%) !important; /* rose */
}
.page-id-1043 .et_pb_section:nth-child(4) .et_pb_row .et_pb_column {
background-image: linear-gradient(90deg,#fbef77 5%,rgba(251,239,119,0) 100%) !important; /* jaune */
}
.page-id-1043 .et_pb_section:nth-child(6) .et_pb_row .et_pb_column {
background-image: linear-gradient(90deg,#a4cd84 5%,rgba(164,205,132,0) 100%) !important; /* vert */
}
.page-id-1043 .et_pb_section:nth-child(8) .et_pb_row .et_pb_column {
background-image: linear-gradient(90deg,#69c5da 5%,rgba(105,197,218,0) 100%) !important; /* bleu */
}
/** row: padding left et right: on met la moitié de la valeur (60px) ici (donc 30px), pour que ça aille jusqu'aux portées **/
.page-id-1043 .et_pb_section:nth-child(2) .et_pb_row:last-child,
.page-id-1043 .et_pb_section:nth-child(4) .et_pb_row:last-child,
.page-id-1043 .et_pb_section:nth-child(6) .et_pb_row:last-child,
.page-id-1043 .et_pb_section:nth-child(8) .et_pb_row:last-child {
padding: 0 30px !important;
}
/** et l'autre moitié de la valeur là (donc 30px aussi)
* et une margin-bottom à 2rem, pour espacer les sections les unes des autres **/
.page-id-1043 .et_pb_section:nth-child(2) .et_pb_row .et_pb_column,
.page-id-1043 .et_pb_section:nth-child(4) .et_pb_row .et_pb_column,
.page-id-1043 .et_pb_section:nth-child(6) .et_pb_row .et_pb_column,
.page-id-1043 .et_pb_section:nth-child(8) .et_pb_row .et_pb_column {
padding: 60px 30px 60px 30px !important;
margin-bottom: 2rem !important;
}
.page-id-1043 .et_pb_section:nth-child(4) .et_pb_row .et_pb_column {padding-bottom: 37.5px !important;}
@media only screen and (max-width: 980px) { /* tablette */
.page-id-1043 .et_pb_section:nth-child(2) .et_pb_row:last-child,
.page-id-1043 .et_pb_section:nth-child(4) .et_pb_row:last-child,
.page-id-1043 .et_pb_section:nth-child(6) .et_pb_row:last-child,
.page-id-1043 .et_pb_section:nth-child(8) .et_pb_row:last-child {
padding: 0 22.5px !important;
}
.page-id-1043 .et_pb_section:nth-child(2) .et_pb_row .et_pb_column,
.page-id-1043 .et_pb_section:nth-child(4) .et_pb_row .et_pb_column,
.page-id-1043 .et_pb_section:nth-child(6) .et_pb_row .et_pb_column,
.page-id-1043 .et_pb_section:nth-child(8) .et_pb_row .et_pb_column {
padding: 22.5px 22.5px 22.5px 22.5px !important;
margin-bottom: 1rem !important;
}
.page-id-1043 .et_pb_section:nth-child(2) .et_pb_module,
.page-id-1043 .et_pb_section:nth-child(4) .et_pb_module,
.page-id-1043 .et_pb_section:nth-child(6) .et_pb_module,
.page-id-1043 .et_pb_section:nth-child(8) .et_pb_module {
margin-bottom: 0rem !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.page-id-1043 .et_pb_section:nth-child(2) .et_pb_row:last-child,
.page-id-1043 .et_pb_section:nth-child(4) .et_pb_row:last-child,
.page-id-1043 .et_pb_section:nth-child(6) .et_pb_row:last-child,
.page-id-1043 .et_pb_section:nth-child(8) .et_pb_row:last-child {
padding: 0 4.725% !important;
}
.page-id-1043 .et_pb_section:nth-child(2) .et_pb_row .et_pb_column,
.page-id-1043 .et_pb_section:nth-child(4) .et_pb_row .et_pb_column,
.page-id-1043 .et_pb_section:nth-child(6) .et_pb_row .et_pb_column,
.page-id-1043 .et_pb_section:nth-child(8) .et_pb_row .et_pb_column {
padding: 4.725% 1.725% 4.725% 1.725% !important;
margin-bottom: 1rem !important;
}
}
.page-id-1043 .et_pb_section.et_clickable .et_pb_module {
margin-bottom: 0 !important;
}
h1.page-cours-titre {
font-size: 4.5rem !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
text-align: center !important;
padding-top: 14px !important;
padding-bottom: 10px !important;
}
p.page-cours {
font-family: hk_groteskmedium, Arial, sans-serif !important;
font-size: 1.125rem !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
text-align: center !important;
padding-bottom: 0 !important;
}
@media only screen and (max-width: 980px) { /* tablette */
h1.page-cours-titre {font-size: 3rem !important;}
p.page-cours {font-size: 1rem !important;}
}
@media only screen and (max-width: 767px) { /* smartphone */
h1.page-cours-titre {font-size: 2rem !important;}
p.page-cours {font-size: 0.925rem !important;}
}
/*** pour que le sigle de couleur soit en dessous du texte ***/
#section-sigle-couleur-page-cours.et_pb_section {
z-index: -999 !important;
}
/*** réglages des sigles de couleur dans la page Cours (1er niveau) ***/
/*** sigle rose - page Cours > Initiation ***/
#section-sigle-couleur-page-cours.et_pb_section .et_pb_image.sigle-rose {
max-width: 18.5% !important;
transform: scaleX(1.03) scaleY(1.03) translateX(325%) translateY(-121%) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
text-align: left !important;
margin-left: 0 !important;
opacity: 0.9 !important;
}
/*** sigle jaune - page Cours > Instruments ***/
#section-sigle-couleur-page-cours.et_pb_section .et_pb_image.sigle-jaune {
max-width: 16.5% !important;
transform: scaleX(0.973) scaleY(0.973) translateX(438%) translateY(-118%) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
text-align: left !important;
margin-left: 0 !important;
opacity: 0.9 !important;
}
/*** sigle vert - page Cours > Ateliers ***/
#section-sigle-couleur-page-cours.et_pb_section .et_pb_image.sigle-vert {
max-width: 28.25% !important;
transform: scaleX(1.0628) scaleY(1.0628) translateX(184.5%) translateY(-102%) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
text-align: left !important;
margin-left: 0 !important;
opacity: 0.9 !important;
}
/*** sigle bleu - page Cours > Solfège ***/
#section-sigle-couleur-page-cours.et_pb_section .et_pb_image.sigle-bleu {
max-width: 21.5% !important;
transform: scaleX(1.1428) scaleY(1.1428) translateX(238%) translateY(-110%) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
text-align: left !important;
margin-left: 0 !important;
opacity: 0.9 !important;
}
/*** hauteur de la section, de la row et de la colonne qui contiennent le sigle de couleur à 0px, pour pas que ça crée un espace inutile entre le chemin d'accès et le titre de la page
* + padding à 0 (sinon on a 2 portées latérales qui se chevauchent!) ***/
#section-sigle-couleur-page-cours.et_pb_section,
#section-sigle-couleur-page-cours.et_pb_section .et_pb_row,
#section-sigle-couleur-page-cours.et_pb_section .et_pb_row .et_pb_column {
height: 0px !important;
padding-bottom: 0px !important;
}
@media only screen and (max-width: 980px) { /* tablette */
#section-sigle-couleur-page-cours.et_pb_section .et_pb_image.sigle-rose {
transform: scaleX(1.03) scaleY(1.03) translateX(334%) translateY(-120%) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
}
#section-sigle-couleur-page-cours.et_pb_section .et_pb_image.sigle-jaune {
transform: scaleX(0.973) scaleY(0.973) translateX(452%) translateY(-114%) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
}
#section-sigle-couleur-page-cours.et_pb_section .et_pb_image.sigle-vert {
transform: scaleX(1.2) scaleY(1.2) translateX(168%) translateY(-86%) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
}
#section-sigle-couleur-page-cours.et_pb_section .et_pb_image.sigle-bleu {
transform: scaleX(1.15) scaleY(1.15) translateX(241%) translateY(-106%) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
#section-sigle-couleur-page-cours.et_pb_section .et_pb_image.sigle-rose {
max-width: 28% !important;
transform: scaleX(1.207) scaleY(1.207) translateX(206%) translateY(-115%) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
}
#section-sigle-couleur-page-cours.et_pb_section .et_pb_image.sigle-jaune {
max-width: 24% !important;
transform: scaleX(1.0825) scaleY(1.0825) translateX(321%) translateY(-116%) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
}
#section-sigle-couleur-page-cours.et_pb_section .et_pb_image.sigle-vert {
max-width: 35% !important;
transform: scaleX(1.488) scaleY(1.488) translateX(122%) translateY(-87%) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
}
#section-sigle-couleur-page-cours.et_pb_section .et_pb_image.sigle-bleu {
max-width: 26% !important;
transform: scaleX(1.6) scaleY(1.6) translateX(163%) translateY(-97%) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
}
}
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/***** ------- 9) réglages des pages Cours > Initiation / Instruments / Ateliers / Solfège (2e niveau) ------- *****/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ------------------------------------------------------------ ***/
/*** 9.0) réglages généraux ***/
/*** ------------------------------------------------------------ ***/
/** réglages de chaque post (constituant la grille de blog): padding à 0 autour de chaque post + background-color transparent! **/
#liste-des-cours-grille .et_pb_post {
padding: 0 !important;
background-color: transparent !important;
}
/** réglages de l'image de chaque post: bordure + fond transparent (page Instruments seulement) **/
.page-id-1046 .et_pb_blog_grid .et_pb_image_container img {
border: 1px solid #3c3c3b !important; /* anthracite */
/* background-color: #ffffff !important; blanc */
}
/** margin-top à 2.75rem avant le module Custom Blog, sinon c'est trop collé au titre **/
.page-id-1051 #liste-des-cours-grille.et_pb_module,
.page-id-1046 #liste-des-cours-grille.et_pb_module,
.page-id-1054 #liste-des-cours-grille.et_pb_module {
margin-top: 1.25rem !important;
}
@media only screen and (max-width: 980px) { /* tablette */
.page-id-1051 #liste-des-cours-grille.et_pb_module,
.page-id-1046 #liste-des-cours-grille.et_pb_module,
.page-id-1054 #liste-des-cours-grille.et_pb_module {
margin-top: 0 !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.page-id-1051 #liste-des-cours-grille.et_pb_module,
.page-id-1046 #liste-des-cours-grille.et_pb_module,
.page-id-1054 #liste-des-cours-grille.et_pb_module {
margin-top: 1.25rem !important;
}
}
/** sur smartphone, on augmente un peu la margin-bottom, pour espacer un peu les posts les uns des autres **/
@media only screen and (max-width: 767px) { /* smartphone */
.page-id-1051 .et_pb_blog_grid .et_pb_post,
.page-id-1046 .et_pb_blog_grid .et_pb_post,
.page-id-1054 .et_pb_blog_grid .et_pb_post {
margin-bottom: 3rem !important;
}
}
/*** dans la page Cours > Initiation : "dès X ans" = plus discret ***/
#liste-des-cours-grille h2 span.desXans {
text-transform: initial !important;
line-height: 1.5em !important;
}
/*** dans la page Cours > Instruments : aligner le H2 à gauche ***/
#liste-des-cours-grille h2 {
text-align: center !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
#liste-des-cours-grille h2 {
text-align: center !important; /* centrer le H2 sur mobile */
}
#liste-des-cours-grille h2 br {
display: none !important;
}
body.page-id-1046 #liste-des-cours-grille #post-241951 h2 br {display: initial !important;}
}
@media only screen and (min-width: 1150px) { /* bureau > 1150px */
#liste-des-cours-grille h2 br {
display: none !important;
}
body.page-id-1046 #liste-des-cours-grille #post-241951 h2 br {display: initial !important;}
}
/*** réglages spéciaux pour la page Ateliers ***/
/** réglages de l'image de chaque post: PAS de bordure + fond transparent (page Ateliers) **/
body.page-id-1054 .et_pb_blog_grid .et_pb_image_container img {
border: none !important;
background-color: transparent !important;
}
/** on masque les h2 **/
body.page-id-1054 #liste-des-cours-grille h2 {
display: none !important;
}
/*** page Cours > Initiation + Solfège : on garde les titres sur 2 lignes + centrés ***/
body.page-id-1051 #liste-des-cours-grille h2 br,
body.page-id-234423 #liste-des-cours-grille h2 br {
display: inherit !important;
}
body.page-id-1051 #liste-des-cours-grille h2,
body.page-id-234423 #liste-des-cours-grille h2 {
text-align: center !important;
}
@media only screen and (min-width: 768px) and (max-width: 980px) { /* tablette entre 768 et 980 */
body.page-id-1051 #liste-des-cours-grille h2 {
height: 50px !important;
}
}
/* annuler l'opacité 50% sur l'image du cours */
#liste-des-cours-grille .et_pb_blog_grid .et_pb_image_container a:hover {
opacity: 1 !important;
}
/** réglages des modules bascules en dessous du texte d'intro **/
#bascule-cours-2 .et_pb_toggle_close,
#bascule-cours-2 .et_pb_toggle_open {
background-color: transparent !important;
}
#bascule-cours-2 .et_pb_toggle {
margin-bottom: 1.25rem !important;
padding: 0px !important;
border: none !important;
}
#bascule-cours-2 h3.et_pb_toggle_title {
padding-bottom: 0 !important;
}
/* #bascule-cours-2 .et_pb_toggle_content {
padding-top: 1.25rem !important; je sais pas pourquoi, c'est ça qui faisait le lag à l'ouverture/fermeture du module
} */
/*** ------------------------------------------------------------ ***/
/*** 9.1) affichage module Custom Post sur 4 colonnes - BUREAU (sur tablette + smartphone, j'ai laissé le fonctionnement natif = 2 colonnes / 1 colonne)
* source: https://www.twobluetoucans.co.uk/divi/four-column-divi-blog-grids/ ***/
/*** ------------------------------------------------------------ ***/
.custom-post-4-colonnes .et_pb_column_1_2,
.custom-post-4-colonnes .et_pb_column_1_3,
.custom-post-4-colonnes .et_pb_column_1_4 {
width: 100%;
}
.custom-post-4-colonnes .et_pb_post {
display: inline-block !important;
vertical-align: top !important;
width: 22% !important;
margin-right: 4% !important; /* 22%x4=88% --> 100%-88%=12% --> 12%:3=4% = margin-right --> et évidement on la met à 0 sur le 4e post de chaque ligne */
margin-bottom: 60px !important;
padding-bottom: 0px;
}
.et_pb_blog_grid .column {
float: left;
max-width: 100%;
width: 100%;
}
/* Sélectionne chaque élément de type .et_pb_post dont la position parmi l'ensemble des éléments de type .et_pb_post descendants directement du même élément parent, est un multiple de 4. */
.custom-post-4-colonnes .et_pb_post:nth-of-type(4n) {
margin-right: 0 !important;
}
/** ne pas afficher le post-content dans ce module spéciale custom-post-4-colonnes (ordi) **/
.custom-post-4-colonnes .post-content {
display: none !important;
}
/** ne pas afficher le post-content dans le module Custom post "normal" (tablette et smartphone) **/
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.custom-post-mobile .post-content {
display:none !important;
}
}
/*** ------------------------------------------------------------ ***/
/*** 9.2) réglages images Blog (carrées) des pages Cours > Initiation/Instruments/Ateliers/Solfège // mais avec pas mal de réglages spéciaux pour ATELIERS (page-id-1054)
* sources:
* https://www.w3schools.com/howto/howto_css_aspect_ratio.asp
* https://stackoverflow.com/questions/3751565/css-100-width-or-height-while-keeping-aspect-ratio
* https://developer.mozilla.org/fr/docs/Web/CSS/object-fit
/*** ------------------------------------------------------------ ***/
/** réglages du "contenant" de l'image, pour lui imposer de rester toujours carré */
#liste-des-cours-grille .et_pb_image_container {
background-color: transparent !important;
width: 100%;
padding-top: 100% !important; /* 1:1 Aspect Ratio */
position: relative; /* If you want image inside of it ---> */
}
/** réglages spéciaux pour les vignettes de la page Solfège (pas carrées) */
body.page-id-234423 #liste-des-cours-grille .et_pb_image_container {
background-color: transparent !important;
width: 100%;
padding-top: 60% !important; /* 10:6 Aspect Ratio */
position: relative; /* If you want image inside of it ---> */
}
/** ---> If you want image inside of the container **/
#liste-des-cours-grille .et_pb_blog_grid .et_pb_image_container a {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/** réglages du "contenu" du container (donc, l'image quoi ^^), pour lui dire de remplir tout l'espace */
body:not(.page-id-1054) #liste-des-cours-grille .et_pb_blog_grid .et_pb_image_container img {
min-height: 100% !important; /*height of parent container*/
max-height: 100% !important; /*height of parent container*/
width: auto; /*width of parent container*/
object-fit: cover !important;
}
/** réglages spéciaux pour la page ATELIERS: notre référence (pour définir la taille) est ici la largeur (et non la hauteur) **/
body.page-id-1054 #liste-des-cours-grille .et_pb_blog_grid .et_pb_image_container img {
min-width: 100% !important; /*width of parent container*/
max-width: 100% !important; /*width of parent container*/
height: auto; /*height of parent container*/
object-fit: cover !important;
position: relative !important;
top: 50% !important; /* cette ligne + la suivante * = pour centrer verticalement l'image dans son conteneur */
transform: translateY(-50%) !important;
} /* source: https://stackoverflow.com/questions/40530101/why-is-translatey-50-needed-to-center-an-element-which-is-at-top-50 ... GENIUS!!!! ^_^ */
/** page ATELIERS: on enlève la margin-bottom de 60px, pour resserrer les lignes **/
body.page-id-1054 .custom-post-4-colonnes .et_pb_post {
margin-bottom: 0 !important;
}
/** page ATELIERS: et on rajoute une margin-bottom de 60px sur le bloc global, pour l'espacer du footer **/
body.page-id-1054 #liste-des-cours-grille.vignettes-ateliers {
margin-bottom: 60px !important;
}
/** page ATELIERS: pour l'affichage tablette et smartphone, on "supprime" ces réglages d'images "carrées" **/
@media only screen and (max-width: 980px) { /* smartphone */
body.page-id-1054 #liste-des-cours-grille .et_pb_image_container {
padding-top: 0 !important; /* on supprime l'Aspect Ratio à 1:1 */
position: relative; /* If you want image inside of it ---> */
}
body.page-id-1054 #liste-des-cours-grille .et_pb_blog_grid .et_pb_image_container a {
position: relative !important;
}
body.page-id-1054 #liste-des-cours-grille .et_pb_blog_grid .et_pb_image_container img {
min-width: 100% !important; /*width of parent container*/
max-width: 100% !important; /*width of parent container*/
height: auto; /*height of parent container*/
object-fit: cover !important;
position: relative !important;
top: 0 !important; /* cette ligne + la suivante * = pour annuler les valeurs mises pour centrer verticalement l'image dans son conteneur */
transform: none !important;
}
}
/** page ATELIERS: pour l'affichage tablette, on met 4rem d'espace entre chaque image **/
@media only screen and (min-width: 768px) and (max-width: 980px) { /* tablette entre 768 et 980 */
body.page-id-1054 .et_pb_column .et_pb_blog_grid .column.size-1of2 .et_pb_post {
margin-bottom: 4rem !important;
}
}
/** annuler la margin-bottom de l'image (originalement à 30px ***) (voir ligne 7145 fichier style.dev_divi_parent.css), sinon ça fait pas carré */
#liste-des-cours-grille .et_pb_post .entry-featured-image-url {
margin-bottom: 0px !important;
}
/** marges autour de ces images (voir ligne 7276 fichier style.dev_divi_parent.css) */
#liste-des-cours-grille .et_pb_image_container {
margin: -10px 0px 1rem 0px;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
#liste-des-cours-grille .et_pb_image_container {
margin: -10px 0px 0.75rem 0px;
}
}
/*** ------------------------------------------------------------ ***/
/*** 9.3) réglages pour que la largeur de la portée (contour photos cours Initiation) soit plus ou moins équivalente à la largeur des portées sur les bords du site... on remplace chaque feature_image (qu'on met en opacité 0, voir ci-dessous) par une background-image contenant la version desktop de la photo du cours Initiation ***/
/*** ------------------------------------------------------------ ***/
@media only screen and (min-width: 981px) { /* bureau */
.page-id-1051 #post-242095.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2023/05/Graines_de_chansons_desktop.png") !important; /* Graines de chansons */
}
.page-id-1051 #post-230459.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/04/Jardin_des_chansons_desktop.png") !important; /* Jardin des chansons */
}
.page-id-1051 #post-230456.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/04/Rythmique_Jaques_Dalcroze_desktop.png") !important; /* Rythmique Jaques-Dalcroze */
}
.page-id-1051 #post-230458.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/04/Initiation_musicale_Willems_desktop.png") !important; /* Initiation musicale Willems */
}
.page-id-1051 #post-230460.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/04/Preparation_a_l_instrument_desktop.png") !important; /* Préparation à l'instrument */
}
.page-id-1051 #post-242149.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/01/violon_650px.png") !important; /* Violon Suzuki - initiation */
}
.page-id-1051 #post-241224.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2022/11/Rythmique_seniors_desktop.png") !important; /* Rythmique senior 65+ */
}
.page-id-1051 #post-242095.et_pb_post .et_pb_image_container, /* Graines de chansons */
.page-id-1051 #post-230459.et_pb_post .et_pb_image_container, /* Jardin des chansons */
.page-id-1051 #post-230456.et_pb_post .et_pb_image_container, /* Rythmique Jaques-Dalcroze */
.page-id-1051 #post-230458.et_pb_post .et_pb_image_container, /* Initiation musicale Willems */
.page-id-1051 #post-230460.et_pb_post .et_pb_image_container, /* Préparation à l'instrument */
.page-id-1051 #post-242149.et_pb_post .et_pb_image_container, /* Violon Suzuki - initiation */
.page-id-1051 #post-241224.et_pb_post .et_pb_image_container { /* Rythmique senior 65+ */
background-origin: content-box !important;
background-position: bottom !important;
background-repeat: no-repeat !important;
background-size: 100% !important;
}
/* pas besoin de spécifier l'ID du post, on "efface" toutes les feature_image d'un coup */
.page-id-1051 .et_pb_post img {
opacity: 0 !important;
}
}
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/***** ------------------------- 10) réglages des pages de chaque COURS (3e niveau) ------------------------ *****/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ------------------------------------------------------------ **
/*** 10.1) réglages largeur des colonnes "titre+description cours" et "image cours" ***/
/*** ------------------------------------------------------------ ***/
@media only screen and (min-width: 981px) { /* bureau */
#cours-col1-description.et_pb_column {
width: 55.5% !important;
margin-right: 3% !important;
}
#cours-col2-image.et_pb_column {
width: 41.5% !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 980px) { /* tablette entre 768 et 980 */
#cours-col1-description.et_pb_column {
width: 65% !important;
}
#cours-col2-image.et_pb_column {
width: 35% !important;
padding-top: 58px !important;
padding-left: 2.5% !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
#cours-col2-image.et_pb_column {
padding-top: 0px !important;
padding-left: 0px !important;
margin-bottom: 1.5rem !important;
}
}
/*** réglages spéciaux pour les pages Initiation ***/
@media only screen and (min-width: 981px) { /* bureau */
#cours-col1-description.initiation.et_pb_column {
width: 47.25% !important;
margin-right: 5.5% !important;
}
#cours-col2-image.initiation.et_pb_column {
width: 47.25% !important;
margin-right: 0px !important;
}
}
@media only screen and (max-width: 980px) { /* tablette */
#cours-col2-image.initiation.et_pb_column {
padding-top: 16px !important;
padding-left: 4.5% !important;
}
}
/** réglages pour que la largeur de la portée (contour photos cours Initiation) soit plus ou moins équivalente à la largeur des portées sur les bords du site... on remplace chaque feature_image (qu'on met en opacité 0, voir ci-dessous) par une background-image contenant la version desktop de la photo du cours Initiation **/
@media only screen and (min-width: 768px) and (max-width: 980px) { /* tablette entre 768 et 980 */
body.postid-242095 #cours-col2-image .et_pb_image_wrap {
background-image: url("/wp-content/uploads/2023/05/Graines_de_chansons_desktop.png") !important;} /* Graines de chansons */
body.postid-230459 #cours-col2-image .et_pb_image_wrap {
background-image: url("/wp-content/uploads/2020/04/Jardin_des_chansons_desktop.png") !important;} /* Jardin des chansons */
body.postid-230456 #cours-col2-image .et_pb_image_wrap {
background-image: url("/wp-content/uploads/2020/04/Rythmique_Jaques_Dalcroze_desktop.png") !important;} /* Rythmique Jaques-Dalcroze */
body.postid-230458 #cours-col2-image .et_pb_image_wrap {
background-image: url("/wp-content/uploads/2020/04/Initiation_musicale_Willems_desktop.png") !important;} /* Initiation musicale Willems */
body.postid-230460 #cours-col2-image .et_pb_image_wrap {
background-image: url("/wp-content/uploads/2020/04/Preparation_a_l_instrument_desktop.png") !important;} /* Préparation à l'instrument */
body.postid-242149 #cours-col2-image .et_pb_image_wrap {
background-image: url("/wp-content/uploads/2020/01/violon_650px.png") !important;} /* Violon Suzuki - initiation */
body.postid-241224 #cours-col2-image .et_pb_image_wrap {
background-image: url("/wp-content/uploads/2022/11/Rythmique_seniors_desktop.png") !important;} /* Rythmique senior 65+ */
body.postid-242095 #cours-col2-image .et_pb_image_wrap, /* Graines de chansons */
body.postid-230459 #cours-col2-image .et_pb_image_wrap, /* Jardin des chansons */
body.postid-230456 #cours-col2-image .et_pb_image_wrap, /* Rythmique Jaques-Dalcroze */
body.postid-230458 #cours-col2-image .et_pb_image_wrap, /* Initiation musicale Willems */
body.postid-230460 #cours-col2-image .et_pb_image_wrap, /* Préparation à l'instrument */
body.postid-242149 #cours-col2-image .et_pb_image_wrap, /* Violon Suzuki - initiation */
body.postid-241224 #cours-col2-image .et_pb_image_wrap { /* Rythmique senior 65+ */
background-origin: content-box !important;
background-position: bottom !important;
background-repeat: no-repeat !important;
background-size: 100% !important;
width: 85% !important;
}
/* pas besoin de spécifier l'ID du post, on "efface" toutes les feature_image d'un coup */
article.tag-initiation #cours-col2-image img {
opacity: 0 !important;
}
}
/* affichage BUREAU: on remplace l'image (module image) par une background-image: ainsi on peut utiliser les fonctions d'habillage de texte
* source: https://www.youtube.com/watch?v=-FTp_73hoeo */
@media only screen and (min-width: 981px) { /* bureau */
#col_dalcroze_willems_bureau.et_pb_column #module_background_image.et_pb_module.grainesdechansons {
background-image: url(/wp-content/uploads/2023/05/Graines_de_chansons_cours.png) !important;
}
#col_dalcroze_willems_bureau.et_pb_column #module_background_image.et_pb_module.dalcroze {
background-image: url(/wp-content/uploads/2020/03/Rythmique_Jaques_Dalcroze_cours.png) !important;
}
#col_dalcroze_willems_bureau.et_pb_column #module_background_image.et_pb_module.willems {
background-image: url(/wp-content/uploads/2020/03/Initiation_musicale_Willems_cours.png) !important;
}
#col_dalcroze_willems_bureau.et_pb_column #module_background_image.et_pb_module {
background-position: top !important;
width: 453.6px !important;
height: 453.6px !important;
border-radius: 50% !important;
background-size: cover !important;
float: right !important;
shape-outside: circle() !important;
margin-left: 0px !important;
}
#col_dalcroze_willems_bureau.et_pb_column #titre_page.et_pb_module,
#col_dalcroze_willems_bureau.et_pb_column .intro_page.et_pb_module {
width: 47.25% !important;
margin-right: 5.5% !important;
}
}
@media only screen and (min-width: 1041px) and (max-width: 1100px) { /* bureau entre 1041 et 1100 */
#col_dalcroze_willems_bureau.et_pb_column #module_background_image.et_pb_module {
width: 403.6px !important;
height: 403.6px !important;
}
}
@media only screen and (min-width: 981px) and (max-width: 1040px) { /* bureau entre 981 et 1040 */
#col_dalcroze_willems_bureau.et_pb_column #module_background_image.et_pb_module {
width: 353.6px !important;
height: 353.6px !important;
}
}
/*** réglages spéciaux pour les pages Ateliers ***/
.nom-atelier-dessin img {
max-width: 540px !important;
height: auto;
}
.row_atelier_texte_accroche p {
max-width: 540px !important;
text-align: center !important;
font-family: hk_groteskbold, Arial, sans-serif !important;
margin: 2rem auto 0 auto !important;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none; /** césure = non! */
}
@media only screen and (max-width: 980px) { /* tablette */
.nom-atelier-dessin img {
max-width: 375px !important;
}
.row_atelier_texte_accroche p {
margin: 0.5rem auto 0 auto !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.nom-atelier-dessin img,
.row_atelier_texte_accroche p {
max-width: 100% !important;
}
}
/*** on met le margin-bottom à zéro sur la colonne et le module qui contient l'image, pour compenser le "cadre" que Kim a mis autour ***/
.et_pb_row.row_atelier_titre_dessin .et_pb_column,
.et_pb_module.nom-atelier-dessin {
margin-bottom: 0 !important;
}
/*** réglages de la petite galerie d'images en bas des pages Ateliers ***/
#galerie-5colonnes.et_pb_row .et_pb_gallery_item {
width: 18% !important;
margin-right: 2.5% !important;
}
#galerie-5colonnes.et_pb_row .et_pb_gallery_item.last_in_row {
margin-right: 0 !important;
}
@media only screen and (max-width: 980px) { /* tablette */
#galerie-5colonnes.et_pb_row .et_pb_gallery_item {
width: 31.666% !important;
margin-bottom: 2.5% !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
#galerie-5colonnes.et_pb_row .et_pb_gallery_item {
width: 100% !important;
margin-right: 0 !important;
margin-bottom: 0.75rem !important;
}
}
/*** réglages spéciaux pour les pages Solfège ***/
@media only screen and (min-width: 981px) { /* bureau */
#module-titre-solfege-debutant.et_pb_module {
width: 103% !important;
}
body.postid-229811 #cours-col2-image.et_pb_column .et_pb_module.et_pb_image {margin-top: 2.5rem !important;}
body.postid-234429 #cours-col2-image.et_pb_column .et_pb_module.et_pb_image {margin-top: 1.5rem !important;}
body.postid-234430 #cours-col2-image.et_pb_column .et_pb_module.et_pb_image {margin-top: 2.5rem !important;}
/* Solfège RAC + Adulte: margin-bottom négative sur le module contenant l'image du cours, pour réduire l'espace entre le texte d'intro et les modules bascule */
body.postid-234431 #cours-col2-image.et_pb_column .et_pb_module.et_pb_image {margin-top: 1.75rem !important; margin-bottom: -3.5rem !important;}
body.postid-235119 #cours-col2-image.et_pb_column .et_pb_module.et_pb_image {margin-top: 3rem !important; margin-bottom: -3rem !important;}
}
/*** réglages spéciaux pour les pages Senior ***/
@media only screen and (min-width: 981px) { /* bureau */
#cours-col1-description.senior.et_pb_column {
width: 47.25% !important;
margin-right: 5.5% !important;
}
#cours-col2-image.senior.et_pb_column {
width: 47.25% !important;
margin-right: 0px !important;
}
}
@media only screen and (max-width: 980px) { /* tablette */
#cours-col2-image.senior.et_pb_column {
padding-top: 16px !important;
padding-left: 4.5% !important;
}
}
/** réglages pour que la largeur de la portée (contour photos cours Senior) soit plus ou moins équivalente à la largeur des portées sur les bords du site... on remplace chaque feature_image (qu'on met en opacité 0, voir ci-dessous) par une background-image contenant la version desktop de la photo du cours Senior **/
@media only screen and (min-width: 768px) and (max-width: 980px) { /* tablette entre 768 et 980 */
body.postid-241224 #cours-col2-image .et_pb_image_wrap {
background-image: url("/wp-content/uploads/2022/11/Rythmique_seniors_desktop.png") !important;} /* Rythmique senior 65+ */
body.postid-241224 #cours-col2-image .et_pb_image_wrap { /* Rythmique senior 65+ */
background-origin: content-box !important;
background-position: bottom !important;
background-repeat: no-repeat !important;
background-size: 100% !important;
width: 85% !important;
}
/* pas besoin de spécifier l'ID du post, on "efface" toutes les feature_image d'un coup */
article.tag-senior #cours-col2-image img {
opacity: 0 !important;
}
}
/*** ------------------------------------------------------------ ***/
/*** 10.2) réglages des modules bascules en dessous du texte d'intro de chaque cours ***/
/*** ------------------------------------------------------------ ***/
#cours-titre-texte-photo .et_pb_toggle_close,
#cours-titre-texte-photo .et_pb_toggle_open {
background-color: transparent !important;
}
#cours-titre-texte-photo .et_pb_toggle {
margin-bottom: 1.25rem !important;
padding: 0px !important;
border: none !important;
}
#cours-titre-texte-photo h3.et_pb_toggle_title {
padding-bottom: 0 !important;
}
/* #cours-titre-texte-photo .et_pb_toggle_content {
padding-top: 1.25rem !important; je sais pas pourquoi, c'est ça qui faisait le lag à l'ouverture/fermeture du module
} */
#cours-titre-texte-photo .et_pb_toggle_title::before,
#bascule-cours-2 .et_pb_toggle_title::before {
display: none;
}
#cours-titre-texte-photo .et_pb_toggle_title:after,
#bascule-cours-2 .et_pb_toggle_title::after {
font-family: ETmodules !important;
position: relative;
top: 30%;
left: 0.25em;
margin-top: -.5em;
color: #3c3c3b;
font-size: 1em !important;
content: "\33";
}
#cours-titre-texte-photo .et_pb_toggle_open .et_pb_toggle_title::after,
#bascule-cours-2 .et_pb_toggle_open .et_pb_toggle_title::after {
content: "\32"; /* triangle vers le haut */
}
@media only screen and (max-width: 767px) { /* smartphone */
.et_pb_toggle .et_pb_toggle_title {
padding-right: 0 !important; /* enlever le padding-right à 50px (valeur par défaut de DIVI) */
}
}
/*** réglages du dernier paragraphe "Découvrir" + les vidéos ***/
/** réglages pour les pages Instruments **/
/* #cours-titre-texte-photo .et_pb_module.et_pb_toggle.medias .et_pb_toggle_content {
padding-top: 2rem !important; je sais pas pourquoi, c'est ça qui faisait le lag à l'ouverture/fermeture du module
} */
#cours-titre-texte-photo .et_pb_module.et_pb_toggle.medias .et_pb_toggle_content .et_post_video {
width: 100% !important;
display: block !important;
margin-bottom: 2rem !important;
margin-right: 0 !important;
}
/** réglages pour les pages Ateliers **/
/* #cours-titre-texte-photo.ateliers .et_pb_module.et_pb_toggle.medias .et_pb_toggle_content {
padding-top: 1.25rem !important; je sais pas pourquoi, c'est ça qui faisait le lag à l'ouverture/fermeture du module
} */
#cours-titre-texte-photo.ateliers .et_pb_module.et_pb_toggle.medias .et_pb_toggle_content .et_post_video {
width: 100% !important;
display: block !important;
margin-bottom: 2rem !important;
margin-right: 0 !important;
}
#cours-titre-texte-photo.ateliers .et_pb_module.et_pb_toggle.medias .et_pb_toggle_content p{
padding-bottom: 0.5rem !important;
}
@media only screen and (min-width: 981px) { /* bureau */
#cours-titre-texte-photo.ateliers .et_pb_module.et_pb_toggle.medias {
width: 60% !important;
}
}
/*** réglages de listes à puces ***/
#cours-titre-texte-photo .et_pb_module.et_pb_toggle ul {
color: #3c3c3b !important;
font-size: 1.25rem !important;
font-weight: 500 !important;
line-height: 1.25em !important;
padding-bottom: 1.25em !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
#cours-titre-texte-photo .et_pb_module.et_pb_toggle ul {
font-size: 1rem !important;
}
}
/*** réglages des éléments de la row "vimeo" (Atelier Claviers) ***/
.row_atelier_texte_bascules.legendes_videos h5 {
font-size: 1.125rem !important;
padding-right: 20px !important;
}
.et-db #et-boc .row_atelier_texte_bascules.legendes_videos .et_pb_toggle_content {
padding-top: 0 !important;
}
.row_atelier_texte_bascules.legendes_videos p {
font-size: 0.95rem !important;
padding-bottom: 1em !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.row_atelier_texte_bascules.legendes_videos h5 {
font-size: 1rem !important;
}
.row_atelier_texte_bascules.legendes_videos p {
font-size: 0.875rem !important;
}
}
/*** ------------------------------------------------------------ ***/
/*** 10.3) réglages affichage liste des profs correspondant à un cours donné ***/
/*** ------------------------------------------------------------ ***/
/** le bloc qui contient l'image = 21.6% de la largeur de la colonne, float left, les marges, etc **/
.et-db #et-boc #custom-post-profs .et_pb_post .entry-featured-image-url {
display: block;
float: left;
width: 21.6% !important;
position: relative;
margin-bottom: 30px;
margin-right: 3.25%; /* 3.25% de la largeur du module (Custom post) */
}
@media only screen and (max-width: 980px) { /* tablette */
.et-db #et-boc #custom-post-profs .et_pb_post .entry-featured-image-url {
width: 24.6% !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.et-db #et-boc #custom-post-profs .et_pb_post .entry-featured-image-url {
float: none;
width: 100% !important; /* pour avoir plus ou moins la même largeur de portée entre l'image du prof et le background de la page */
margin-bottom: 15px;
margin-right: 0;
}
}
/** le bloc qui contient le h2 (nom du prof) = 70.5% de la largeur de la colonne, float left, les marges, etc **/
.et-db #et-boc #custom-post-profs .et_pb_post h2.entry-title {
display: block;
float: left;
width: 70.5% !important;
font-size: 1.5rem !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.et-db #et-boc #custom-post-profs .et_pb_post h2.entry-title {
font-size: 1.25rem !important;
}
}
/** on enlève la balise , pour que les noms des profs s'affichent sur une ligne (uniquement dans les pages Cours 3e niveau) **/
.et-db #et-boc #custom-post-profs .et_pb_post h2.entry-title br {
display: none !important;
}
/** le bloc qui contient l'extrait de texte (bio du prof) = 70.5% de la largeur de la colonne, float left, les marges, etc **/
.et-db #et-boc #custom-post-profs .et_pb_post .post-content {
display: block;
float: left;
width: 70.5% !important;
}
@media only screen and (max-width: 767px) { /* smartphone */
.et-db #et-boc #custom-post-profs .et_pb_post h2.entry-title,
.et-db #et-boc #custom-post-profs .et_pb_post .post-content {
float: none;
width: 100% !important;
}
}
/** sur tablette et smartphone: on ajoute une margin-bottom sous le post-content du dernier et_pb_post (sinon c'est trop collé à la section suivante) **/
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.et-db #et-boc #custom-post-profs .et_pb_post:last-child .post-content {
margin-bottom: 3rem !important;
}
}
/* annuler l'opacité 50% sur l'image du prof */
.et-db #et-boc #custom-post-profs .et_pb_post a.entry-featured-image-url:hover {
opacity: 1 !important;
}
/* réglage du bloc "pas-de-resultat" (pour quand aucun prof n'est assigné au cours) */
.pas-de-resultat {
height: 200px !important;
margin-bottom: 60px !important;
}
.pas-de-resultat img {
height: 200px;
width: auto;
display: inline-block;
margin-right: 30px;
}
/* annuler l'opacité 50% sur l'image en hover */
a.et_pb_lightbox_image:hover {
opacity: 1 !important;
}
.pas-de-resultat p {
display: inline-block;
vertical-align: top !important;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none; /** césure = non! */
}
@media only screen and (max-width: 767px) { /* smartphone */
.pas-de-resultat {
margin-bottom: 120px !important;
}
}
/*** ------------------------------------------------------------ ***/
/*** 10.4) réglages des blocs HORAIRES + TARIFS + INSCRIPTIONS ***/
/*** ------------------------------------------------------------ ***/
/** réglages des largeurs de colonnes des sections horaires et tarifs **/
.et_pb_gutters3.et-db #et-boc .et-l #section-horaires-tarifs.et_pb_section .et_pb_column_2_3 {
width: 70%;
}
.et_pb_gutters3.et-db #et-boc .et-l #section-horaires-tarifs.et_pb_section .et_pb_column {
margin-right: 3%;
}
.et-db #et-boc .et-l #section-horaires-tarifs.et_pb_section .et_pb_row .et_pb_column:last-child {
margin-right: 0 !important;
}
.et_pb_gutters3.et-db #et-boc .et-l #section-horaires-tarifs.et_pb_section .et_pb_column_1_3 {
width: 27%;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.et_pb_gutters3.et-db #et-boc .et-l #section-horaires-tarifs.et_pb_section .et_pb_column_2_3,
.et_pb_gutters3.et-db #et-boc .et-l #section-horaires-tarifs.et_pb_section .et_pb_column_1_3 {
width: 100%;
}
.et_pb_gutters3.et-db #et-boc .et-l #section-horaires-tarifs.et_pb_section .et_pb_column,
.et-db #et-boc .et-l #section-horaires-tarifs.et_pb_section .et_pb_row .et_pb_column:last-child {
margin-right: 0 !important;
}
}
/** réglages généraux des div "étiquettes noires" **/
.titre-etiquette-professeurs .et_pb_text_inner,
.titre-etiquette-horaires .et_pb_text_inner,
.titre-etiquette-tarifs .et_pb_text_inner {
display: inline-block !important; /* inline-block + width en "auto" = pour que la largeur s'adapte au contenu */
width: auto !important;
height: auto !important;
background-color: #000000 !important; /* noir */
padding: 5px 10px 5px 60px !important;
position: absolute !important; /* on peut utiliser position absolute + top=0, car la div étiquette est le premier élément de la ligne (row), donc ça se positionne tout en haut de cette div */
top: 0;
left: -60px !important;
}
.titre-etiquette-professeurs h3,
.titre-etiquette-horaires h3,
.titre-etiquette-tarifs h3 {
color: #ffffff !important; /* blanc */
padding-bottom: 0 !important;
}
/** réglages de la div "étiquette professeurs" + la div suivante (le contenu) / ces 2 éléments sont dans la même ligne (row) **/
.titre-etiquette-professeurs {
position: relative !important;
}
.liste-sous-etiquette-professeurs:first-child {
text-align: left;
position: relative !important;
top: 48px;
}
.et-db #et-boc .et-l .liste-sous-etiquette-professeurs .et_pb_post {
margin-bottom: 1rem !important; /* marge sous le "nom de l'article" (par défaut c'était 60px) */
}
/** réglages des div "étiquette horaires / tarifs" + la div suivante (les tableaux) / ces 2 éléments sont dans la même ligne (row) **/
.et_pb_module.titre-etiquette-horaires,
.et_pb_module.titre-etiquette-tarifs {
position: relative !important;
}
.et_pb_module.tableau-sous-etiquette-horaires,
.et_pb_module.tableau-sous-etiquette-tarifs,
.et_pb_module.tableau-sous-etiquette-tarifs-initiation {
position: relative !important;
top: 48px;
margin-bottom: 3.25rem !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.et_pb_module.tableau-sous-etiquette-horaires,
.et_pb_module.tableau-sous-etiquette-tarifs {
top: 36px;
}
}
/** réglages des div liens "tous les horaires / tarifs" **/
/** .lien-page-horaires.un-tableau = Horaires pages Cours Initiation
* .lien-page-tarifs.un-tableau = Tarifs pages Cours Initiation
* .lien-page-horaires = Horaires pages Cours Instruments + Ateliers + Solfège
* .lien-page-tarifs = Tarifs pages Cours Ateliers
* .lien-page-tarifs.avec-remarque = Tarifs pages Cours Instruments + Solfège
* .lien-page-horaires.avec-remarque = Horaires pages Cours Instruments **/
.lien-page-horaires .et_pb_code_inner,
.lien-page-tarifs .et_pb_code_inner {
display: inline-block !important; /* inline-block + width en "auto" = pour que la largeur s'adapte au contenu */
width: auto !important;
height: auto !important;
padding: 0px 60px 0px 0px !important;
position: absolute !important; /* on peut utiliser position absolute + top=0, car la div étiquette est le premier élément de la ligne (row), donc ça se positionne tout en haut de cette div */
right: -60px !important;
}
.lien-page-horaires .et_pb_code_inner,
.lien-page-tarifs .et_pb_code_inner {
bottom: 21px !important;
}
.lien-page-horaires.un-tableau .et_pb_code_inner,
.lien-page-tarifs.un-tableau .et_pb_code_inner {
bottom: 4px !important;
}
article.tag-initiation .lien-page-horaires.un-tableau .et_pb_code_inner,
article.tag-initiation .lien-page-tarifs.un-tableau .et_pb_code_inner {
bottom: 12px !important;
}
.lien-page-horaires.un-tableau.span .et_pb_code_inner {
bottom: 11px !important;
}
article.tag-solfege .lien-page-horaires.un-tableau .et_pb_code_inner { /* tableau horaires page Solfège */
bottom: 4px !important;
}
.lien-page-tarifs.avec-remarque .et_pb_code_inner,
.lien-page-horaires.avec-remarque .et_pb_code_inner {
bottom: 6px !important;
}
.et_pb_post.category-cours-solfege .lien-page-tarifs.avec-remarque .et_pb_code_inner,
.et_pb_post.category-cours-les-ateliers .lien-page-tarifs .et_pb_code_inner {
bottom: 16px !important;
}
.post-230741.et_pb_post.category-cours-les-ateliers .lien-page-tarifs .et_pb_code_inner {
bottom: 3px !important;
}
.lien-page-horaires p,
.lien-page-tarifs p {
font-family: hk_groteskbold, Arial, sans-serif !important;
font-size: 1.125rem !important;
letter-spacing: 0.1em !important; /* correspond à un interlettrage de 100 sur InDesign */
font-weight: 400 !important;
text-align: right !important;
padding-bottom: 0px !important;
}
a.lien-tous-les-horaires,
a.lien-tous-les-tarifs {
color: #3c3c3b !important; /* anthracite */
text-decoration: none !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.lien-page-horaires .et_pb_code_inner,
.lien-page-tarifs .et_pb_code_inner {
padding: 10px 0px 0px 0px !important;
position: inherit !important; /* on met la position inherit pour annuler la position absolute, valable uniquement sur ordi */
right: 0 !important; /* pour annuler la valeur -60px, valable uniquement sur ordi */
margin-bottom: 1.5rem !important;
float: right;
}
/* margin-top pour compenser le bottom de l'affichage ordi */
article.tag-initiation .lien-page-tarifs .et_pb_code_inner {margin-top: -21px !important;}
article.tag-initiation .lien-page-horaires .et_pb_code_inner {margin-top: -33px !important;}
article.tag-instruments .lien-page-tarifs .et_pb_code_inner {margin-top: -21px !important;}
article.tag-instruments .lien-page-horaires .et_pb_code_inner {margin-top: -21px !important;}
article.tag-ateliers .lien-page-tarifs .et_pb_code_inner {margin-top: -30px !important;}
article.tag-ateliers .lien-page-horaires .et_pb_code_inner {margin-top: -30px !important;}
article.tag-solfege .lien-page-tarifs .et_pb_code_inner {margin-top: -19px !important;}
article.tag-solfege .lien-page-horaires .et_pb_code_inner {margin-top: -33px !important;}
.lien-page-horaires p,
.lien-page-tarifs p {
font-size: 1rem !important;
margin-top: 0.75rem !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.lien-page-horaires p,
.lien-page-tarifs p {
font-size: 0.875rem !important;
letter-spacing: 0 !important; /* annuler l'interlettrage de 100 sur smartphone */
}
}
/** réglages des div "étiquettes inscription" **/
.inscription-initiation .et_pb_code_inner,
.inscription-instrument .et_pb_code_inner,
.inscription-atelier .et_pb_code_inner,
.inscription-solfege .et_pb_code_inner,
.inscription-senior .et_pb_code_inner,
.inscription-formulaire-en-ligne .et_pb_code_inner {
display: inline-block !important; /* inline-block + width en "auto" = pour que la largeur s'adapte au contenu */
width: auto !important;
height: auto !important;
padding: 5px 10px 5px 60px !important;
position: absolute !important; /* on peut utiliser position absolute + top=0, car la div étiquette est le premier élément de la ligne (row), donc ça se positionne tout en haut de cette div */
top: 0;
left: -60px !important;
}
.inscription-initiation .et_pb_code_inner {background-color: #eeaecf !important; /* rose */}
.inscription-instrument .et_pb_code_inner {background-color: #fbef77 !important; /* jaune */}
.inscription-atelier .et_pb_code_inner {background-color: #a4cd84 !important; /* vert */}
.inscription-solfege .et_pb_code_inner {background-color: #69c5da !important; /* bleu */}
.inscription-senior .et_pb_code_inner {background: linear-gradient(to left, rgba(253,251,251,1) 0%, rgba(235,237,238,1) 100%) !important; /* gris perle dégradé 018 Cloudy Knoxville */}
.inscription-formulaire-en-ligne .et_pb_code_inner {background-color: #008ec2 !important; /* bleu Formidable */}
.inscription-initiation h3,
.inscription-instrument h3,
.inscription-atelier h3,
.inscription-solfege h3,
.inscription-senior h3,
.inscription-formulaire-en-ligne h3 {
color: #000000 !important; /* noir */
padding-bottom: 0 !important;
}
a.bouton-inscription-instrument { /* class du lien "INSCRIPTION" pour les 4 types de cours + page Inscription */
text-align: left !important;
color: #000000 !important; /* noir */
text-decoration: none !important;
}
/* en fait, sur ce fond bleu Formidable, le texte donne mieux en blanc */
.inscription-formulaire-en-ligne h3,
.inscription-formulaire-en-ligne h3 a.bouton-inscription-instrument {
color: #ffffff !important; /* blanc */
}
/** mettre un padding-bottom à 3rem (au lieu de 2rem par défaut) sous les "étiquettes inscription", afin de créer un peu d'espace avant le footer **/
.et_pb_module.et_pb_code.inscription-initiation,
.et_pb_module.et_pb_code.inscription-instrument,
.et_pb_module.et_pb_code.inscription-atelier,
.et_pb_module.et_pb_code.inscription-solfege,
.et_pb_module.et_pb_code.inscription-senior,
.et_pb_module.et_pb_code.inscription-formulaire-en-ligne {
padding-bottom: 3rem !important;
}
/** réglages généraux des div "étiquettes noires" + "étiquettes inscription" pour tablette et natel **/
@media only screen and (max-width: 980px) { /* tablette */
.titre-etiquette-professeurs .et_pb_text_inner,
.titre-etiquette-horaires .et_pb_text_inner,
.titre-etiquette-tarifs .et_pb_text_inner,
.inscription-initiation .et_pb_code_inner,
.inscription-instrument .et_pb_code_inner,
.inscription-atelier .et_pb_code_inner,
.inscription-solfege .et_pb_code_inner,
.inscription-senior .et_pb_code_inner,
.inscription-formulaire-en-ligne .et_pb_code_inner {
padding: 5px 10px 5px 50px !important;
position: absolute !important; /* on peut utiliser position absolute + top=0, car la div étiquette est le premier élément de la ligne (row), donc ça se positionne tout en haut de cette div */
top: 0;
left: -50px !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.titre-etiquette-professeurs .et_pb_text_inner,
.titre-etiquette-horaires .et_pb_text_inner,
.titre-etiquette-tarifs .et_pb_text_inner,
.inscription-initiation .et_pb_code_inner,
.inscription-instrument .et_pb_code_inner,
.inscription-atelier .et_pb_code_inner,
.inscription-solfege .et_pb_code_inner,
.inscription-senior .et_pb_code_inner,
.inscription-formulaire-en-ligne .et_pb_code_inner {
padding: 5px 10px 5px 13.4% !important;
position: absolute !important; /* on peut utiliser position absolute + top=0, car la div étiquette est le premier élément de la ligne (row), donc ça se positionne tout en haut de cette div */
top: 0;
left: -13.4% !important;
}
}
/*** ------------------------------------------------------------ ***/
/*** 10.5) réglages des tableaux des pages Cours ***/
/*** ------------------------------------------------------------ ***/
/** retirer la bordure du tableau **/
.entry-content table {
border: none !important;
}
/** pour activer / désactiver le bouton "Modifier" (front-end) **/
.dataTables_wrapper.no-footer caption {
display: initial !important; /* désactiver = display: none; */
}
.dataTables_wrapper.no-footer caption a {
background-color: #e74319 !important;
color: white !important;
padding: 2px 5px;
}
/*** réglages des TEXTES ***/
.tablepress.tableau-cours tr th,
.tablepress.tableau-cours tr td {
background-color: transparent;
border: none !important;
font-family: hk_groteskregular, Arial, sans-serif !important;
color: #3c3c3b !important; /* anthracite */
font-size: 1.125rem !important;
letter-spacing: 0.1em !important; /* correspond à un interlettrage de 100 sur InDesign */
font-weight: 500 !important;
line-height: 1.25em !important;
text-transform: uppercase;
}
/** réglages des textes dans la ligne d'en-tête (th) les tableaux horaires et tarifs **/
.tablepress.tableau-cours tr th {
font-family: hk_groteskbold, Arial, sans-serif !important;
font-size: 1.125rem !important;
letter-spacing: 0.1em !important; /* correspond à un interlettrage de 100 sur InDesign */
font-weight: 400 !important;
}
@media only screen and (max-width: 980px) { /* tablette */
.tablepress.tableau-cours tr th,
.tablepress.tableau-cours tr td {
font-size: 1rem !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.tablepress.tableau-cours tr th,
.tablepress.tableau-cours tr td,
.tablepress.tableau-cours tr td span {
font-size: 0.7rem !important;
letter-spacing: 0 !important; /* annuler l'interlettrage de 100 sur smartphone */
}
.tablepress.tableau-cours tr th {
font-family: hk_groteskmedium, Arial, sans-serif !important;
font-weight: 600 !important;
}
}
/*** réglages des PADDING dans les cellules des tableaux horaires et tarifs ***/
/** padding dans les cellules titre (th) **/
#content-area table tr th, #main-content table.cart tr th, table.cart tr th {
padding: 0px 1em 1em 0px;
}
#content-area table tr th:last-child, #main-content table.cart tr th:last-child, table.cart tr th:last-child {
padding: 0px 0px 1em 0px; /* padding-right = 0 */
}
/** padding dans les cellules normales (td) **/
#content-area table td {
padding: 0px 1em 0px 0px;
max-width: 100%;
}
#content-area table td:last-child {
padding: 0px 0px 0px 0px; /* padding-right = 0 */
max-width: 100%;
}
/*** réglages des padding des "tr" (row) qui ne tiennent pas sur 1 ligne ***/
/** on ajoute un padding-top/bottom, pour une meilleure lecture **/
#content-area article.tag-initiation table td, /* Initiation: tableaux horaires et tarifs */
#content-area article.tag-ateliers table.tableau-horaires td, /* Ateliers: tableaux horaires seulement */
#content-area article.tag-senior table td, /* Senior: tableaux horaires et tarifs */
#content-area article.tag-instruments table.tableau-horaires td { /* Instruments: tableaux horaires seulement */
padding-top: 0.3em !important;
padding-bottom: 0.45em !important;
}
/** et on passe le padding-bottom du "th" à 0.7em (au lieu de 1em), pour compenser le padding-top des lignes d'en dessous (0.3em) **/
#content-area article.tag-initiation table tr th,
#content-area article.tag-senior table td,
#content-area article.tag-instruments table.tableau-horaires tr th {
padding: 0px 1em 0.7em 0px;
}
#content-area article.tag-initiation table tr th:last-child {
padding: 0px 0px 0.7em 0px;
}
#content-area article.tag-senior table tr td:last-child {
padding-right: 0px;
}
/** idem pour les tableaux horaires des pages Solfège-débutant + Solfège-moyen, mais seulement sur SMARTPHONE **/
@media only screen and (max-width: 767px) { /* smartphone */
#content-area article.tag-solfege table.tableau-horaires.tableau-large td {
padding-bottom: 0.45em !important;
padding-top: 0.3em !important;
}
#content-area article.tag-solfege table.tableau-horaires.tableau-large tr th {
padding: 0px 1em 0.7em 0px;
}
}
/*** réglages des largeurs de COLONNES des tableaux HORAIRES des pages Cours ***/
/** tableaux HORAIRES des pages INITIATION (5 colonnes) **/
.tableau-horaires.initiation th.column-1 {width: 27% !important;} /* cours */
.tableau-horaires.initiation th.column-2 {width: 18% !important;} /* âge */
.tableau-horaires.initiation th.column-3 {width: 12% !important;} /* jour */
.tableau-horaires.initiation th.column-4 {width: 23% !important;} /* heure */
.tableau-horaires.initiation th.column-5 {width: 20% !important;} /* lieu */
@media only screen and (max-width: 767px) { /* smartphone */
#tablepress-30-1.tableau-horaires.initiation.smartphone td.column-1 p {width: 140px !important;} /* Graines de chansons */
#tablepress-31-1.tableau-horaires.initiation.smartphone td.column-1 p {width: 140px !important;} /* Jardin des chansons */
#tablepress-32-1.tableau-horaires.initiation.smartphone td.column-1 p {width: 85px !important;} /* Rythmique */
#tablepress-33-1.tableau-horaires.initiation.smartphone td.column-1 p {width: 170px !important;} /* Préparation à l'instrument */
.tableau-horaires.initiation.smartphone td.column-2 p {width: 60px !important;} /* âge */
.tableau-horaires.initiation.smartphone td.column-3 p {width: 35px !important;} /* jour */
.tableau-horaires.initiation.smartphone td.column-4 p {width: 90px !important;} /* heure */
.tableau-horaires.initiation.smartphone td.column-5 p {width: 240px !important;} /* lieu */
/* remarque: il faut passer par le p car le th "n'existe pas" */
}
.tableau-horaires.initiation tr td.column-5 {text-transform: initial !important;line-height: 1.125em !important;}
.tableau-horaires.initiation td span.lieu_petit {font-size: 0.75rem !important;}
/** tableau HORAIRES de la page Jardin des chansons (2 colonnes) **/
table.tableau-horaires.initiation-jardin {width: 80% !important;}
.tableau-horaires.initiation-jardin th.column-1 {width: 40% !important;}
.tableau-horaires.initiation-jardin th.column-2 {width: 60% !important;}
/** tableaux HORAIRES des pages INSTRUMENTS (2 colonnes) **/
.tableau-horaires.instruments th.column-1 {width: 47% !important;}
.tableau-horaires.instruments th.column-2 {width: 53% !important;}
@media only screen and (max-width: 767px) { /* smartphone */
.tableau-horaires.instruments th.column-1 {width: 40% !important;}
.tableau-horaires.instruments th.column-2 {width: 60% !important;}
}
/** tableaux HORAIRES des pages ATELIERS (3 colonnes) **/
article.tag-ateliers table.tableau-horaires.tableau-cours {width: 75% !important;}
article.tag-ateliers .tableau-horaires th.column-1 {width: 24% !important;}
article.tag-ateliers .tableau-horaires th.column-2 {width: 30% !important;}
article.tag-ateliers .tableau-horaires th.column-3 {width: 46% !important;}
@media only screen and (max-width: 767px) { /* smartphone */
article.tag-ateliers table.tableau-horaires.tableau-cours {width: 100% !important;}
article.tag-ateliers .tableau-horaires th.column-1 {width: 20% !important;}
article.tag-ateliers .tableau-horaires th.column-2 {width: 40% !important;}
article.tag-ateliers .tableau-horaires th.column-3 {width: 40% !important;}
}
.tableau-horaires.ateliers tr td {line-height: 1.125em !important;}
.tableau-horaires.ateliers tr td.column-3 {text-transform: initial !important;}
.tableau-horaires.ateliers td span.lieu_petit {text-transform: initial !important;font-size: 0.75rem !important;}
/** tableaux HORAIRES des pages SOLFÈGE (3 colonnes) **/
article.tag-solfege table.tableau-horaires.tableau-cours {width: 75% !important;}
article.tag-solfege .tableau-horaires th.column-1 {width: 20% !important;}
article.tag-solfege .tableau-horaires th.column-2 {width: 34% !important;}
article.tag-solfege .tableau-horaires th.column-3 {width: 46% !important;}
@media only screen and (max-width: 767px) { /* smartphone */
article.tag-solfege table.tableau-horaires.tableau-cours {width: 100% !important;}
article.tag-solfege .tableau-horaires th.column-1 {width: 20% !important;}
article.tag-solfege .tableau-horaires th.column-2 {width: 37% !important;}
article.tag-solfege .tableau-horaires th.column-3 {width: 43% !important;}
}
/** tableaux HORAIRES des pages SOLFÈGE-DÉBUTANT et SOLFÈGE-MOYEN (3 colonnes) **/
article.tag-solfege table.tableau-horaires.tableau-cours.tableau-large {width: 100% !important;}
article.tag-solfege .tableau-horaires.tableau-large th.column-1 {width: 18% !important;}
article.tag-solfege .tableau-horaires.tableau-large th.column-2 {width: 28% !important;}
article.tag-solfege .tableau-horaires.tableau-large th.column-3 {width: 54% !important;}
@media only screen and (max-width: 767px) { /* smartphone */
article.tag-solfege .tableau-horaires.tableau-large th.column-1 {width: 20% !important;}
article.tag-solfege .tableau-horaires.tableau-large th.column-2 {width: 37% !important;}
article.tag-solfege .tableau-horaires.tableau-large th.column-3 {width: 43% !important;}
}
/** largeur globale du tableau HORAIRES de la page SOLFÈGE-adulte **/
article.tag-solfege table.tablepress-id-94.tableau-horaires.tableau-cours {width: 52.5% !important;}
article.tag-solfege .tablepress-id-94.tableau-horaires th.column-1 {width: 27% !important;}
article.tag-solfege .tablepress-id-94.tableau-horaires th.column-2 {width: 48% !important;}
article.tag-solfege .tablepress-id-94.tableau-horaires th.column-3 {width: 27% !important;}
@media only screen and (max-width: 767px) { /* smartphone */
article.tag-solfege table.tablepress-id-94.tableau-horaires.tableau-cours {width: 100% !important;}
article.tag-solfege .tablepress-id-94.tableau-horaires th.column-1 {width: 20% !important;}
article.tag-solfege .tablepress-id-94.tableau-horaires th.column-2 {width: 37% !important;}
article.tag-solfege .tablepress-id-94.tableau-horaires th.column-3 {width: 43% !important;}
}
/** tableaux HORAIRES des pages SENIOR (3 colonnes) **/
article.tag-senior table.tableau-horaires.tableau-cours {width: 100% !important;}
article.tag-senior .tableau-horaires th.column-1 {width: 18% !important;}
article.tag-senior .tableau-horaires th.column-2 {width: 28% !important;}
article.tag-senior .tableau-horaires th.column-3 {width: 54% !important;}
@media only screen and (max-width: 767px) { /* smartphone */
article.tag-senior table.tableau-horaires.tableau-cours {width: 100% !important;}
article.tag-senior .tableau-horaires th.column-1 {width: 18% !important;}
article.tag-senior .tableau-horaires th.column-2 {width: 28% !important;}
article.tag-senior .tableau-horaires th.column-3 {width: 54% !important;}
}
/*** réglages des largeurs de COLONNES des tableaux TARIFS des pages Cours ***/
/** tableaux TARIFS des pages INITIATION (sauf Jardin) et INSTRUMENTS (4 colonnes) **/
.tableau-tarifs th.column-1 {width: 35% !important;}
.tableau-tarifs th.column-2 {width: 25% !important;}
.tableau-tarifs th.column-3 {width: 30% !important;}
.tableau-tarifs th.column-4 {width: 10% !important; padding-right: 0 !important; text-align: right !important}
.tableau-tarifs td.column-4 {padding-right: 0 !important; text-align: right !important}
/** tableau TARIFS de la page Jardin des chansons (4 colonnes) **/
table#tablepress-1.tableau-tarifs th.column-1 {width: 40% !important;} /* 40% pour l'aligner sur le tableau horaires */
table#tablepress-1.tableau-tarifs th.column-2 {width: 20% !important;}
table#tablepress-1.tableau-tarifs th.column-3 {width: 30% !important;}
table#tablepress-1.tableau-tarifs th.column-4 {width: 10% !important; text-align: right !important}
table#tablepress-1.tableau-tarifs td.column-4 {text-align: right !important}
/** largeur globale du tableau TARIFS des 4 pages INITIATION **/
article.tag-initiation table.tableau-tarifs {width: 80% !important;}
@media only screen and (max-width: 767px) { /* smartphone */
article.tag-initiation table.tableau-tarifs {width: 100% !important;}
}
/** tableaux TARIFS des pages ATELIERS et SOLFÈGE (2 colonnes) **/
.tableau-tarifs.tableau-2-colonnes th.column-1 {width: 90% !important;}
.tableau-tarifs.tableau-2-colonnes th.column-2 {width: 10% !important; text-align: right !important}
.tableau-tarifs.tableau-2-colonnes td.column-2 {text-align: right !important}
/** largeur globale du tableau TARIFS des pages ATELIERS et SOLFÈGE **/
body:not(.page-id-1007) table.tableau-tarifs.tableau-2-colonnes {width: 75% !important;}
@media only screen and (max-width: 767px) { /* smartphone */
body:not(.page-id-1007) table.tableau-tarifs.tableau-2-colonnes {width: 100% !important;}
}
/** largeur globale du tableau TARIFS de la page SOLFÈGE-adulte **/
body:not(.page-id-1007) table.tablepress-id-11.tableau-tarifs.tableau-2-colonnes {width: 52.5% !important;}
@media only screen and (max-width: 767px) { /* smartphone */
body:not(.page-id-1007) table.tablepress-id-11.tableau-tarifs.tableau-2-colonnes {width: 75% !important;}
}
/* ligne séparatrice entre "ENFANTS/ADULTES" pour les tableaux TARIFS des pages ATELIERS et SOLFÈGE : width à 75% = idem largeur tableau */
article.tag-ateliers .et_pb_divider.separateur-avant-tableaux {width: 75% !important;}
@media only screen and (max-width: 767px) { /* smartphone */
article.tag-ateliers .et_pb_divider.separateur-avant-tableaux {width: 100% !important;}
}
/*** réglages des SÉPARATEURS (entre "Enfants / Adultes" et le tableau correspondant) ***/
.et_pb_divider.separateur-avant-tableaux::before {
border-top-color: #3c3c3b !important; /* anthracite */
}
.et_pb_divider.separateur-avant-tableaux {
height: 14px !important;
width: 100% !important;
}
.et_pb_module.separateur-avant-tableaux {
margin-bottom: 6px !important;
}
/*** réglages des "REMARQUES" (en dessous de certains tableaux) ***/
.et_pb_module.remarque-tarifs-cours-instru {
margin-bottom: 0 !important;
}
.et_pb_module.remarque-tarifs-cours-instru p {
font-size: 0.95rem !important;
padding-bottom: 7px !important; /* pour s'alligner avec les div liens "tous les horaires / tarifs", à qui on a mis un bottom:7px */
}
@media only screen and (max-width: 767px) { /* smartphone */
.et_pb_module.remarque-tarifs-cours-instru p {
font-size: 0.75rem !important;
}
}
/** réglages des couleurs de SURBRILLANCE au survol des lignes (tr) **/
.type-cours.et_pb_post.type-cours.category-cours-initiation .tablepress .row-hover tr:hover td {
background-color: rgba(238,174,207,0.35) !important; /* rose */
}
.type-cours.et_pb_post.type-cours.category-cours-instruments .tablepress .row-hover tr:hover td {
background-color: rgba(251,239,119,0.35) !important; /* jaune */
}
.type-cours.et_pb_post.type-cours.category-cours-les-ateliers .tablepress .row-hover tr:hover td {
background-color: rgba(164,205,132,0.35) !important; /* vert */
}
.type-cours.et_pb_post.type-cours.category-cours-solfege .tablepress .row-hover tr:hover td {
background-color: rgba(105,197,218,0.35) !important; /* bleu */
}
.type-cours.et_pb_post.type-cours.category-cours-senior .tablepress .row-hover tr:hover td {
background-color: rgba(235,237,238,0.35) !important; /* gris perle 018 Cloudy Knoxville */
}
/*** tableaux HORAIRES des pages ATELIERS et SOLFÈGE: annuler les br sur bureau et tablette ***/
@media only screen and (min-width: 768px) { /* bureau et tablette */
#content-area article.tag-solfege table.tableau-horaires.tableau-large td br {display: none !important;}
}
/*** ------------------------------------------------------------ ***/
/*** 10.5.1) tableaux des pages Cours - réglages spéciaux Cours Initiation - version SMARTPHONE ***/
/*** ------------------------------------------------------------ ***/
/*** tableaux HORAIRES des pages INITIATION (sauf Jardin) (5 colonnes)
* (tableaux "spécial mobile" avec scroll horizontal activé) ***/
@media only screen and (max-width: 767px) { /* smartphone */
/** masquer la ligne "titre" th (en fait elle est vide) **/
.tablepress.tableau-horaires.initiation.smartphone tr th {display: none !important;}
/** réglages des textes **/
.tablepress.tableau-horaires.initiation.smartphone p,
.tablepress.tableau-horaires.initiation.smartphone p.titre-tableau-initiation-smartphone {
background-color: transparent;
border: none !important;
font-family: hk_groteskregular, Arial, sans-serif !important;
font-weight: 500 !important;
color: #3c3c3b !important; /* anthracite */
font-size: 0.7rem !important;
letter-spacing: 0em !important; /* annuler l'interlettrage */
line-height: 1.25em !important;
text-transform: uppercase !important;
text-align: left !important;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
padding: 0 !important;
}
/** réglages des "titres" **/
.tablepress.tableau-horaires.initiation.smartphone p.titre-tableau-initiation-smartphone {
font-family: hk_groteskmedium, Arial, sans-serif !important;
font-weight: 600 !important;
padding: 0 0 0.25em 0 !important;
}
/** ligne titres: hover = pas en rose! **/
.tablepress.tableau-horaires.initiation.smartphone .row-hover tr:first-child:hover td {
background-color: transparent !important;
}
/** réglages du petit triangle indiquant qu'on peut scroller **/
#triangle-scroll.et_pb_module.et_pb_text { /* hauteur et margin-bottom du module à zéro */
height: 0 !important;
margin-bottom: 0 !important;
}
#triangle-scroll.et_pb_module.et_pb_text h1 {
font-size: 1.25rem !important;
line-height: 1.5rem !important;
position: relative;
height: 0;
vertical-align: baseline;
bottom: -0.5em; /** la distance entre la baseline et le triangle */
}
}
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/***** -------------------------- 11) réglages de la page PROFESSEURS (1er niveau) ------------------------- *****/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ------------------------------------------------------------ ***/
/*** 11.0) réglages généraux ***/
/*** ------------------------------------------------------------ ***/
/** margin-top à 2.75rem avant le module Custom Blog, sinon c'est trop collé au texte d'intro **/
.page-id-862 #liste-des-profs-grille.et_pb_module {
margin-top: 2.75rem !important;
}
/** padding à 0 autour de chaque post + pas de bordure **/
.page-id-862 .et_pb_blog_grid .et_pb_post {
padding: 0 !important;
border: none !important;
word-wrap: break-word;
}
/** sur smartphone, on augmente un peu la margin-bottom, pour espacer un peu les posts les uns des autres **/
@media only screen and (max-width: 767px) { /* smartphone */
.page-id-862 .et_pb_blog_grid .et_pb_post {
margin-bottom: 3rem !important;
}
}
/** supprimer l'extrait (pour ne garder que la photo/image à la une + le titre du CPT) **/
#liste-des-profs-grille .post-content {
display: none !important;
}
/*** centrer le H2 ***/
#liste-des-profs-grille h2 {
text-align: center !important;
}
/* annuler l'opacité 50% sur l'image du professeur */
#liste-des-profs-grille .et_pb_blog_grid .et_pb_image_container a:hover {
opacity: 1 !important;
}
/*** ------------------------------------------------------------ ***/
/*** 11.1) réglages images Blog (carrées) page Professeurs (remarque: ces réglages s'appliquent à l'affichage mobile / pour l'affiche desktop, voir ci-dessous)
* sources:
* https://www.w3schools.com/howto/howto_css_aspect_ratio.asp
* https://stackoverflow.com/questions/3751565/css-100-width-or-height-while-keeping-aspect-ratio
* https://developer.mozilla.org/fr/docs/Web/CSS/object-fit **/
/*** ------------------------------------------------------------ ***/
/** réglages du "contenant" de l'image, pour lui imposer de rester toujours carré */
#liste-des-profs-grille .et_pb_image_container {
background-color: transparent !important;
width: 100%;
padding-top: 100% !important; /* 1:1 Aspect Ratio */
position: relative; /* If you want image inside of it ---> */
}
/** ---> If you want image inside of the container **/
#liste-des-profs-grille .et_pb_blog_grid .et_pb_image_container a {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/** réglages du "contenu" du container (donc, l'image quoi ^^), pour lui dire de remplir tout l'espace */
#liste-des-profs-grille .et_pb_blog_grid .et_pb_image_container img {
min-height: 100% !important; /*height of parent container*/
max-height: 100% !important; /*height of parent container*/
width: auto; /*width of parent container*/
object-fit: cover !important;
}
/** annuler la margin-bottom de l'image (originalement à 30px ***) (voir ligne 7145 fichier style.dev_divi_parent.css), sinon ça fait pas carré */
#liste-des-profs-grille .et_pb_post .entry-featured-image-url {
margin-bottom: 0px !important;
}
/** marges autour de ces images (voir ligne 7276 fichier style.dev_divi_parent.css) */
#liste-des-profs-grille .et_pb_image_container {
margin: -10px 0px 1rem 0px;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
#liste-des-profs-grille .et_pb_image_container {
margin: -10px 0px 0.75rem 0px;
}
}
/*** ------------------------------------------------------------ ***/
/*** 11.2) réglages pour que la largeur de la portée (contour photos profs) soit plus ou moins équivalente à la largeur des portées sur les bords du site...
* pour l'affichage bureau :
* on remplace l'image à la une (la même que l'image utilisée dans les pages de chaque prof) par une background-image avec un autre ratio photo-cadre... c'est pas parfait, mais c'est pas mal! ***/
/*** ------------------------------------------------------------ ***/
@media only screen and (min-width: 981px) { /* bureau */
.page-id-862 .et_pb_blog_grid .et_pb_post,
.page-id-862 .et_pb_blog_grid .et_pb_post h2 {
display: grid !important;
-webkit-display: grid !important;
justify-items: center !important; /*Evite que les éléments prennent tout l'espace dans leur colonne*/
-webkit-justify-items: center !important; /*Evite que les éléments prennent tout l'espace dans leur colonne*/
justify-content: center !important; /*Permet de centrer dans l'axe horizontal*/
-webkit-justify-content: center !important; /*Permet de centrer dans l'axe horizontal*/
}
.page-id-862 .et_pb_gutters3 .et_pb_column_4_4 .et_pb_blog_grid .column.size-1of3,
.page-id-862 .et_pb_gutters3.et_pb_row .et_pb_column_4_4 .et_pb_blog_grid .column.size-1of3 {
width: 33.333% !important; /* largeur = 1/3 de 100% (pour 3 colonnes), avec des margin gauche et droite à 0! */
margin: 0 !important;
}
.page-id-862 .et_pb_blog_grid .et_pb_post {
width: 68% !important; /* chaque post fait 68% de la largeur de la colonne (avec des margin gauche et droite à 16%) */
margin-left: 16% !important;
margin-right: 16% !important;
}
.page-id-862 .et_pb_blog_grid .et_pb_post h2 {
width: 310px !important; /* largeur calculée en fonction du nom du prof le plus long */
margin: 0 auto !important;
}
#liste-des-profs-grille .et_pb_image_container {
background-color: transparent !important;
width: 68%; /* la même valeur que la largeur de .et_pb_post */
padding-top: 68% !important; /* 1:1 Aspect Ratio */
position: relative; /* If you want image inside of it ---> */
}
}
/* on remplace chaque feature_image (qu'on met en opacité 0, voir ci-dessous) par une background-image contenant la version desktop de la photo du prof */
@media only screen and (min-width: 981px) { /* bureau */
.page-id-862 #post-230806.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/alexandre_sassolas_desktop.png") !important; /* Alexandre Sassolas */
}
.page-id-862 #post-230807.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/andrea_baggi_desktop.png") !important; /* Andrea Baggi */
}
.page-id-862 #post-230808.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/anne_sylvie_schmid_desktop.png") !important; /* Anne-Sylvie Schmid */
}
.page-id-862 #post-230809.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/anne_therese_bieri_desktop.png") !important; /* Anne-Thérèse Bieri */
}
.page-id-862 #post-230810.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/blaise_ubaldini_desktop.png") !important; /* Blaise Ubaldini */
}
.page-id-862 #post-230811.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/davide_montagne_desktop.png") !important; /* Davide Montagne */
}
.page-id-862 #post-230812.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/elodie_wulliens_desktop.png") !important; /* Elodie Wulliens */
}
.page-id-862 #post-230813.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/emilie_fournier_desktop.png") !important; /* Emilie Fournier */
}
.page-id-862 #post-230814.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/eran_levi_desktop.png") !important; /* Eran Levi */
}
.page-id-862 #post-230815.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/florine_juvet_desktop.png") !important; /* Florine Juvet */
}
.page-id-862 #post-230816.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/francois_margot_desktop.png") !important; /* François Margot */
}
.page-id-862 #post-230817.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/gustavo_murillo_desktop.png") !important; /* Gustavo Murillo */
}
.page-id-862 #post-229968.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/guy_francois_leuenberger_desktop.png") !important; /* Guy-François Leuenberger */
}
.page-id-862 #post-230818.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/jacques_saugy_desktop.png") !important; /* Jacques Saugy */
}
.page-id-862 #post-230819.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/jacques_andre_rime_desktop.png") !important; /* Jacques-André Rime */
}
.page-id-862 #post-230820.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/jean_philippe_iracane_desktop.png") !important; /* Jean-Philippe Iracane */
}
.page-id-862 #post-230821.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/jeremie_stricker_desktop.png") !important; /* Jérémie Stricker */
}
.page-id-862 #post-230410.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/joelle_aurelie_masson_desktop.png") !important; /* Joëlle-Aurélie Masson-Mayor */
}
.page-id-862 #post-230822.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/johan_smith_desktop.png") !important; /* Johan Smith */
}
.page-id-862 #post-230823.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/lucas_buclin_desktop.png") !important; /* Lucas Buclin */
}
.page-id-862 #post-230824.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/madeleine_boyer_murray_desktop.png") !important; /* Madeleine Murray-Robertson */
}
.page-id-862 #post-230825.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/magali_ibram_desktop.png") !important; /* Magali Ibram */
}
.page-id-862 #post-230826.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/marc_jufer_desktop.png") !important; /* Marc Jufer */
}
.page-id-862 #post-230411.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/marie_helene_essade_desktop.png") !important; /* Marie-Hélène Essade Mariaux */
}
.page-id-862 #post-230827.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/marie_luce_raposo_desktop.png") !important; /* Marie-Luce Raposo-Challet */
}
.page-id-862 #post-230828.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/marylene_muller_desktop.png") !important; /* Marylène Müller */
}
.page-id-862 #post-230829.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/nathalie_erbeau_desktop.png") !important; /* Nathalie Erbeau */
}
.page-id-862 #post-230830.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/nicole_chanson_desktop.png") !important; /* Nicole Chanson */
}
.page-id-862 #post-230831.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/pascal_cassoli_desktop.png") !important; /* Pascal Cassoli */
}
.page-id-862 #post-230832.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/rachel_clerc_desktop.png") !important; /* Rachel Clerc */
}
.page-id-862 #post-230833.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/tania_mazzucchelli_desktop.png") !important; /* Tania Mazzucchelli */
}
.page-id-862 #post-230834.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/vinciane_noir_desktop.png") !important; /* Vinciane Noir */
}
.page-id-862 #post-230835.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/03/zoran_kazakov_desktop.png") !important; /* Zoran Kazakov */
}
.page-id-862 #post-234763.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/04/noemie_de_rham_desktop.png") !important; /* Noémie de Rham */
}
.page-id-862 #post-234771.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/04/tristan_moreau_desktop.png") !important; /* Tristan Moreau */
}
.page-id-862 #post-234773.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2020/04/jean_yves_zwahlen_desktop.png") !important; /* Jean-Yves Zwahlen */
}
.page-id-862 #post-236624.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2021/02/corentin_brandet_desktop.png") !important; /* Corentin Brandet */
}
.page-id-862 #post-237533.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2021/03/carine_delpierre_desktop.png") !important; /* Carine Delpierre */
}
.page-id-862 #post-237540.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2021/03/guilhem_mainier_desktop.png") !important; /* Guilhem Maynier */
}
.page-id-862 #post-240944.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2019/12/anna_benzakoun_desktop.png") !important; /* Anna Benzakoun */
}
.page-id-862 #post-240961.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2019/12/merlijn_breij_desktop.png") !important; /* Merlijn Breij */
}
.page-id-862 #post-240965.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2019/12/samuel_favez_desktop.png") !important; /* Samuel Favez */
}
.page-id-862 #post-242084.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2023/05/benjamin_monney_desktop.png") !important; /* Benjamin Monney */
}
.page-id-862 #post-240967.et_pb_post .et_pb_image_container {
background-image: url("/wp-content/uploads/2019/12/emilie_mory_desktop.png") !important; /* Emilie Mory */
}
.page-id-862 #post-230806.et_pb_post .et_pb_image_container, /* Alexandre Sassolas */
.page-id-862 #post-230807.et_pb_post .et_pb_image_container, /* Andrea Baggi */
.page-id-862 #post-230808.et_pb_post .et_pb_image_container, /* Anne-Sylvie Schmid */
.page-id-862 #post-230809.et_pb_post .et_pb_image_container, /* Anne-Thérèse Bieri */
.page-id-862 #post-230810.et_pb_post .et_pb_image_container, /* Blaise Ubaldini */
.page-id-862 #post-230811.et_pb_post .et_pb_image_container, /* Davide Montagne */
.page-id-862 #post-230812.et_pb_post .et_pb_image_container, /* Elodie Wulliens */
.page-id-862 #post-230813.et_pb_post .et_pb_image_container, /* Emilie Fournier */
.page-id-862 #post-230814.et_pb_post .et_pb_image_container, /* Eran Levi */
.page-id-862 #post-230815.et_pb_post .et_pb_image_container, /* Florine Juvet */
.page-id-862 #post-230816.et_pb_post .et_pb_image_container, /* François Margot */
.page-id-862 #post-230817.et_pb_post .et_pb_image_container, /* Gustavo Murillo */
.page-id-862 #post-229968.et_pb_post .et_pb_image_container, /* Guy-François Leuenberger */
.page-id-862 #post-230818.et_pb_post .et_pb_image_container, /* Jacques Saugy */
.page-id-862 #post-230819.et_pb_post .et_pb_image_container, /* Jacques-André Rime */
.page-id-862 #post-230820.et_pb_post .et_pb_image_container, /* Jean-Philippe Iracane */
.page-id-862 #post-230821.et_pb_post .et_pb_image_container, /* Jérémie Stricker */
.page-id-862 #post-230410.et_pb_post .et_pb_image_container, /* Joëlle-Aurélie Masson-Mayor */
.page-id-862 #post-230822.et_pb_post .et_pb_image_container, /* Johan Smith */
.page-id-862 #post-230823.et_pb_post .et_pb_image_container, /* Lucas Buclin */
.page-id-862 #post-230824.et_pb_post .et_pb_image_container, /* Madeleine Murray-Robertson */
.page-id-862 #post-230825.et_pb_post .et_pb_image_container, /* Magali Ibram */
.page-id-862 #post-230826.et_pb_post .et_pb_image_container, /* Marc Jufer */
.page-id-862 #post-230411.et_pb_post .et_pb_image_container, /* Marie-Hélène Essade Mariaux */
.page-id-862 #post-230827.et_pb_post .et_pb_image_container, /* Marie-Luce Raposo-Challet */
.page-id-862 #post-230828.et_pb_post .et_pb_image_container, /* Marylène Müller */
.page-id-862 #post-230829.et_pb_post .et_pb_image_container, /* Nathalie Erbeau */
.page-id-862 #post-230830.et_pb_post .et_pb_image_container, /* Nicole Chanson */
.page-id-862 #post-230831.et_pb_post .et_pb_image_container, /* Pascal Cassoli */
.page-id-862 #post-230832.et_pb_post .et_pb_image_container, /* Rachel Clerc */
.page-id-862 #post-230833.et_pb_post .et_pb_image_container, /* Tania Mazzucchelli */
.page-id-862 #post-230834.et_pb_post .et_pb_image_container, /* Vinciane Noir */
.page-id-862 #post-230835.et_pb_post .et_pb_image_container, /* Zoran Kazakov */
.page-id-862 #post-234763.et_pb_post .et_pb_image_container, /* Noémie de Rham */
.page-id-862 #post-234771.et_pb_post .et_pb_image_container, /* Tristan Moreau */
.page-id-862 #post-234773.et_pb_post .et_pb_image_container, /* Jean-Yves Zwahlen */
.page-id-862 #post-237533.et_pb_post .et_pb_image_container, /* Carine Delpierre */
.page-id-862 #post-237540.et_pb_post .et_pb_image_container, /* Guilhem Maynier */
.page-id-862 #post-236624.et_pb_post .et_pb_image_container, /* Corentin Brandet */
.page-id-862 #post-240944.et_pb_post .et_pb_image_container, /* Anna Benzakoun */
.page-id-862 #post-240961.et_pb_post .et_pb_image_container, /* Merlijn Breij */
.page-id-862 #post-240965.et_pb_post .et_pb_image_container, /* Samuel Favez */
.page-id-862 #post-242084.et_pb_post .et_pb_image_container, /* Benjamin Monney */
.page-id-862 #post-240967.et_pb_post .et_pb_image_container { /* Emilie Mory */
background-origin: content-box !important;
background-position: bottom !important;
background-repeat: no-repeat !important;
background-size: 100% !important;
}
/* pas besoin de spécifier l'ID du post (.page-id-862 #post-229968.et_pb_post img), on "efface" toutes les feature_image d'un coup */
.page-id-862 .et_pb_post img {
opacity: 0 !important;
}
}
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/***** ------------------------- 12) réglages des pages de chaque PROFS (2e niveau) ------------------------ *****/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** réglages de la colonne de gauche (bio) sur tablette et smartphone (texte réduit 8 lignes) : ajout d'une margin-bottom de 3rem sous le bouton Lire plus, sinon c'est trop collé au bloc suivant ***/
body.professeur-template-default.single.single-professeur #bouton-lire-plus-LG,
body.professeur-template-default.single.single-professeur #bouton-lire-moins-LG {
margin-bottom: 3rem !important;
}
#texte-reduit-LG.et_pb_text.bio-prof a {
font-family: hk_groteskmedium, Arial, sans-serif !important;
font-weight: 500 !important;
color: #3c3c3b !important; /* anthracite */
}
#texte-reduit-LG.et_pb_text.bio-prof a:hover {
color: #3c3c3b !important; /* anthracite */
opacity: 0.5 !important;
}
/*** ------------------------------------------------------------ ***/
/*** 12.1) réglages de la colonne de droite (photo + cours + liens + coordonnées) : sur bureau, reste "collée en haut" quand on scroll ***/
/*** ------------------------------------------------------------ ***/
@media only screen and (min-width: 981px) { /* bureau */
#col-droite-prof {
position: -webkit-sticky !important; /* Safari */
position: sticky !important;
top: 20px !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 980px) { /* tablette entre 768 et 980 */
#col-droite-prof.et_pb_column_2 .et_pb_row_inner:nth-child(1) {
width: 55% !important;
float: left !important;
margin-right: 3% !important;
}
#col-droite-prof.et_pb_column_2 .et_pb_row_inner:nth-child(2),
#col-droite-prof.et_pb_column_2 .et_pb_row_inner:nth-child(3) {
width: 42% !important;
float: right !important;
}
#col-droite-prof.et_pb_column_2 .et_pb_row_inner:nth-child(4) {
width: 100% !important;
float: right !important;
}
.et_pb_column .et_pb_row_inner:nth-child(1) .et_pb_column,
.et_pb_column .et_pb_row_inner:nth-child(1) .et_pb_column .et_pb_module {
margin-bottom: 0px !important;
}
.et_pb_column .et_pb_row_inner:nth-child(2) {
padding-top: 0px !important;
}
}
/*** ------------------------------------------------------------ ***/
/*** 12.2) réglages des blocs COURS + LIENS + COORDONNÉES ***/
/*** ------------------------------------------------------------ ***/
/*** réglages généraux des div "étiquettes" ***/
.titre-etiquette-cours .et_pb_text_inner,
.titre-etiquette-liens .et_pb_text_inner,
.titre-etiquette-coordonnees .et_pb_text_inner{
display: inline-block !important; /* inline-block + width en "auto" = pour que la largeur s'adapte au contenu */
width: auto !important;
height: auto !important;
background-color: #000000 !important; /* noir */
padding: 5px 60px 5px 10px !important;
position: absolute !important; /* on peut utiliser position absolute + top=0, car la div étiquette est le premier élément de la ligne (row), donc ça se positionne tout en haut de cette div */
top: 0;
right: -60px !important;
}
.titre-etiquette-cours h3,
.titre-etiquette-liens h3,
.titre-etiquette-coordonnees h3 {
color: #ffffff !important; /* blanc */
padding-bottom: 0 !important;
}
/** réglages de la div "étiquette cours" + la div suivante (le contenu) / ces 2 éléments sont dans la même ligne (row) **/
.titre-etiquette-cours {
position: relative !important;
}
.liste-sous-etiquette-cours:first-child {
text-align: right;
position: relative !important;
top: 36px;
}
.liste-sous-etiquette-cours h2 {
text-align: right;
font-size: 1.125rem !important; /* c'est du h2 (entry-title du post), mais on lui met la même taille que le h3 */
}
.liste-sous-etiquette-cours h2 br {
display: none !important; /* annuler les
de Cord'découverte et Harp'Ensemble */
}
.et-db #et-boc .et-l .liste-sous-etiquette-cours .et_pb_post {
margin-bottom: 0 !important; /* marge sous le "nom de l'article" (par défaut c'était 60px) */
}
/** supprimer l'extrait (pour ne garder que le titre) **/
.liste-sous-etiquette-cours .post-content {
display: none !important;
}
/*** réglages de la div "étiquette liens" + la div suivante (le contenu) / ces 2 éléments sont dans la même ligne (row) ***/
.titre-etiquette-liens {
position: relative !important;
}
.liste-sous-etiquette-liens {
text-align: right;
position: relative !important;
top: 36px;
}
.liste-sous-etiquette-liens h3 {
text-align: right;
}
/*** réglages de la div "étiquette coordonnées" + la div suivante (le contenu) / ces 2 éléments sont dans la même ligne (row) ***/
.titre-etiquette-coordonnees {
position: relative !important;
}
.liste-sous-etiquette-coordonnees {
text-align: right;
position: relative !important;
top: 36px;
}
.liste-sous-etiquette-coordonnees h3 {
text-align: right;
}
.liste-sous-etiquette-coordonnees h3 a {
text-transform: lowercase !important;
}
@media only screen and (max-width: 980px) { /* tablette */
.titre-etiquette-cours .et_pb_text_inner,
.titre-etiquette-liens .et_pb_text_inner,
.titre-etiquette-coordonnees .et_pb_text_inner {
padding: 5px 50px 5px 10px !important;
position: absolute !important; /* on peut utiliser position absolute + top=0, car la div étiquette est le premier élément de la ligne (row), donc ça se positionne tout en haut de cette div */
top: 0;
right: -50px !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.titre-etiquette-cours .et_pb_text_inner,
.titre-etiquette-liens .et_pb_text_inner,
.titre-etiquette-coordonnees .et_pb_text_inner {
padding: 5px 13.4% 5px 10px !important;
position: absolute !important; /* on peut utiliser position absolute + top=0, car la div étiquette est le premier élément de la ligne (row), donc ça se positionne tout en haut de cette div */
top: 0;
right: -13.4% !important;
}
}
/*** ------------------------------------------------------------ ***/
/*** 12.3) pour annuler tous les réglages des fonds dégradés/height/etc des posts type-cours - voir "16.2) réglages des fonds dégradés sur les pages Cours" ***/
/*** ------------------------------------------------------------ ***/
.liste-sous-etiquette-cours:first-child .type-cours.et_pb_post.type-cours.category-cours-initiation,
.liste-sous-etiquette-cours:first-child .type-cours.et_pb_post.type-cours.category-cours-instruments,
.liste-sous-etiquette-cours:first-child .type-cours.et_pb_post.type-cours.category-cours-les-ateliers,
.liste-sous-etiquette-cours:first-child .type-cours.et_pb_post.type-cours.category-cours-solfege,
.liste-sous-etiquette-cours:first-child .type-cours.et_pb_post.type-cours.category-cours-senior {
background-image: none !important; /* pour annuler le dégradé bleu */
width: inherit !important;
max-width: none !important;
height: auto !important;
margin: auto !important;
}
/***** 13) réglages page AGENDA + pages Events --> tribe-events.css *****/
span.event-annulé {
color: #e4003a !important;
}
/* le plugin a dû ajouter un padding (40px 20px 20px) lors de la dernière mise à jour (févr21)... donc on l'enlève */
#tribe-events, #tribe-events-pg-template, .tribe-events-pg-template {
padding: 0 !important;
}
/*** ------------------------------------------------------------ ***/
/*** 13.0) réglages du popup pour annoncer "Présentation des instruments 202X" sur la Home ***/
/*** ------------------------------------------------------------ ***/
/* supprimer la background-image (portées) de la row */
/* overwrite le padding-top à 1rem des first section / first row */
#popup_PO_2021.et_pb_row {
background-image: none !important;
padding-top: 4rem !important;
}
/* réglage de la croix pour fermer le popup */
.overlay-container .overlay-close {
width: auto;
height: auto;
display: block;
position: absolute;
right: 10px;
top: 10px;
overflow: hidden;
border: none;
outline: none;
z-index: 99991;
font-size: 100px !important;
line-height: 60px !important;
min-height: 15px;
min-width: 15px;
color: #fdfdfd !important; /* gris très clair */
background-color: transparent;
font-family: inherit;
font-weight: 300 !important;
}
/* augmenter le padding sous le titre */
#popup_PO_2021 h2.sous-titre-Baskerville {
padding-bottom: 1.25rem !important;
}
/* réglages du bouton dans le popup */
#popup_PO_2021 .et_pb_button_module_wrapper > a {
color: #fdfdfd !important; /* fond site */
font-family: hk_groteskregular, Arial, sans-serif !important;
font-size: 1.25rem !important;
line-height: 1.25em !important;
font-weight: 500;
border: 0;
cursor: pointer;
display: inline-block;
height: auto;
padding: 0;
text-decoration: none;
border-radius: 4px;
text-align: center;
transition: background-color .2s ease;
background-color: #008ec2 !important;
padding: 11px 20px !important;
width: auto !important;
min-width: initial !important;
}
#popup_PO_2021 .et_pb_button_module_wrapper > a:hover {
border: none !important;
opacity: 0.75 !important;
}
#popup_PO_2021 .et_pb_button_module_wrapper > a:after {
display: none !important;
}
/* réglages hover image dans le popup */
#popup_PO_2021 img:hover {
opacity: 0.75 !important;
}
/* réglages MOBILE */
@media only screen and (max-width: 980px) { /* tablette et smarphone */
#overlay-237248 .et_pb_section {
margin-top: 20vh !important; /* descendre le popup */
}
#popup_PO_2021.et_pb_row {
max-width: 630px !important; /* largeur max du popup */
padding: 1.25rem !important; /* réduire les marges internes */
}
#popup_PO_2021.et_pb_row .et_pb_column {
margin-bottom: 0 !important; /* réduire l'espace sous le bouton */
}
#popup_PO_2021 .et_pb_button_module_wrapper > a {
font-size: 1rem !important; /* font-size bouton */
}
}
/* forcer l'affichage sur 2 colonnes sur tablette */
@media only screen and (min-width: 768px) and (max-width: 980px) { /* tablette uniquement */
#popup_PO_2021 .et_pb_column_2_5 {
width: 36.7% !important;
margin-right: 5.5% !important;
}
#popup_PO_2021 .et_pb_column_3_5 {
width: 57.8% !important;
margin-right: 0 !important;
}
#popup_PO_2021.et_pb_row.et_pb_equal_columns {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
direction:ltr
}
}
@media only screen and (max-width: 767px) { /* smarphone */
#popup_PO_2021 img {
max-width: 250px !important;
margin-bottom: 1rem !important;
}
}
/* centrer verticalement le contenu des 2 colonnes */
.centrer-verticalement {
display: flex;
flex-direction: column;
justify-content: center;
/* Et les déclinaisons avec préfixes pour obtenir un résultat homogène sur les divers navigateurs */
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
}
/*** ------------------------------------------------------------ ***/
/*** 13.1) réglages de la page "Présentation des instruments 202X" - page générale ***/
/*** ------------------------------------------------------------ ***/
/** réglages de l'image (flyer) dans le texte **/
@media only screen and (min-width: 981px) { /* bureau */
#po-titre-texte-intro img.alignleft {
width: 25% !important;
height: auto !important;
}
}
@media only screen and (max-width: 980px) { /* tablette */
#po-titre-texte-intro img.alignleft {
width: 40% !important;
height: auto !important;
}
}
@media only screen and (max-width: 767px) { /* smarphone */
#po-titre-texte-intro img.pres_instru_2022 {
display: none !important;
}
}
/** réglages lightbox **/
.page-id-236449 img.mfp-img {
max-height: 95vh !important;
}
@media only screen and (min-width: 768px) and (max-width: 980px) { /* tablette uniquement */
.page-id-236449 img.mfp-img {
height: 160vh !important;
max-height: none !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.page-id-236449 img.mfp-img {
height: 180vh !important;
max-height: none !important;
}
}
/* pour "effacer" la ligne entre le recto et le verso */
.page-id-236449 .mfp-figure::after {
-webkit-box-shadow: none;
box-shadow: none;
background: transparent;
}
/* compresser très légèrement (0.04-->0.03) le titre de la page, pour qu'il rentre sur 1 ligne */
@media only screen and (min-width: 768px) { /* tablette */
#po-titre-texte-intro h1 {
letter-spacing: 0 !important;
}
}
@media only screen and (min-width: 981px) { /* bureau */
#po-titre-texte-intro h1 {
letter-spacing: 0.03em !important;
}
}
/* réglages de chaque ligne contenant 1 event */
#po-emc_liste-cours.dates_heures .tribe-mini-calendar-event {
border-bottom: none !important;
margin: 0 !important;
padding: 0 !important;
}
#po-emc_liste-cours.dates_heures .tribe-mini-calendar-event .list-info {
margin: 6px 0 !important;
width: 100% !important;
}
/* réglages titre de l'event */
#po-emc_liste-cours .tribe-mini-calendar-event .list-info h2 {
font-family: hk_groteskregular, Arial, sans-serif !important;
text-transform: initial !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* masquer le lien "Voir plus" en dessous de chaque liste */
#po-emc_liste-cours p.tribe-events-widget-link {
display: none !important;
}
/* masquer le bloc avec date (mois + jour) */
#po-emc_liste-cours .tribe-mini-calendar-event .list-date {
display: none !important;
}
/* masquer les dates et heures
* (on laisse que le titre de l'event)
* template: /events-calendar-pro/src/views/pro/widgets/modules/single-event.php */
#po-emc_liste-cours .tribe-events-duration {
display: none !important;
}
/* réglages "Il n'y a pas évènements à venir en ce moment." (event Sold out) */
#po-emc_liste-cours .et_pb_toggle_content p {
font-size: 1rem !important;
margin-top: 1em !important;
padding-bottom: 0 !important;
}
/*** réglage du formulaire de réservation ***/
@media only screen and (min-width: 768px) { /* bureau et tablette */
#frm_form_13_container .frm_form_field.choix-instrument select,
#frm_form_13_container .frm_form_field.choix-date select,
#frm_form_13_container .frm_form_field.choix-prof select,
#frm_form_13_container .frm_form_field.choix-horaire select {
width: 49% !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
#po-emc_liste-cours .tribe-mini-calendar-event .list-info h2 {font-size: 1rem !important;}
}
/* réglage des boutons Envoyer + Suivant */
#frm_form_13_container .frm_button_submit.frm_final_submit,
#frm_form_13_container .frm_button_submit {
float: right !important;
}
#frm_form_13_container .frm_button_submit.frm_final_submit {
background-color: #008ec2 !important;
border: 1.25px solid #008ec2 !important;
color: #ffffff !important;
}
/*** ------------------------------------------------------------ ***/
/*** 13.2) réglages des events "Présentation des instruments 202X" - page 1 event ***/
/*** ------------------------------------------------------------ ***/
/*** réglages TITRE event ***/
/** masquer la date : à droite du titre de l'event **/
/* Combinateur général siblings E ~ F
* Cible un élément F précédé par un élément E. À la différence du combinateur adjacent qui cible uniquement le premier frère, celui-ci cible tous les frères (siblings). */
.tribe_events.tag-presentation-instruments~div#et-boc li.ligne-agenda-date {
display: none !important;
}
/** titre event: largeur 100% (overwrite width 77% définit pour les events "normaux", dans tribe-events.css) **/
.tribe_events.tag-presentation-instruments~div#et-boc li.ligne-agenda-titre {
width: 100% !important;
}
/*** réglages DESCRIPTION ***/
dd.descr-PO {
font-size: 1.25rem !important;
font-weight: 500 !important;
line-height: 1.25em !important;
color: #3c3c3b !important;
padding-bottom: 0.5em !important;
margin-left: 0 !important;
}
dd.descr-PO.horaire {
margin-bottom: 1em !important;
}
dd.descr-PO h6,
dd.descr-PO p {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
}
/*** réglages LIEN PAGE INSTRUMENT ***/
.lien-page-instrument {
margin-bottom: 1em !important;
}
.lien-page-instrument a.lien-lire-la-suite {
letter-spacing: 0.025em !important;
text-transform: initial !important;
}
.lien-page-instrument a.lien-lire-la-suite.percussion:hover {
opacity: 1 !important;
}
/*** réglages RESERVATION ***/
/** étiquette bleu Formidable "réservez votre place" (fichier single-event.php ligne 200) : à n'afficher que sur les events avec le tag presentation-instruments (et masquer sur touts les autres) **/
#affichage_class_event:not(.tag-presentation-instruments)~div#et-boc #tribe-bouton-reservation {display: none;}
/** étiquette bleu Formidable "réservez votre place" : reprend les réglages de l'étiquette Formulaire d'inscription en ligne (voir lignes 3875ss), avec juste ces mini modifs : **/
#tribe-bouton-reservation.inscription-formulaire-en-ligne .et_pb_code_inner {
position: relative !important;
margin-top: 5rem !important;
padding: 15px 50px 15px 60px !important;
}
/*** réglages META ***/
/** masquer les lignes Date + Horaires dans les méta **/
.tribe-events-meta-group.tribe-events-meta-group-details {
display: none !important;
}
/*** réglages FOOTER event ***/
/*** masquer les lien vers event précédent-suivant ***/
.tag-presentation-instruments #tribe-events-footer nav.tribe-events-nav-pagination {
display: none !important;
}
/*** ------------------------------------------------------------ ***/
/*** 13.3) réglages des récap des réservations ***/
/*** ------------------------------------------------------------ ***/
body.page-id-241822 h1 {
margin-top: 3rem !important;
}
/*** rendre un tableau scrollable (seulement sur ordi!)
* source: https://nosmoking.developpez.com/demos/css/table-scrollable.php ***/
@media only screen and (min-width: 981px) { /* bureau */
.table-scrollable tbody td:first-child,
.table-scrollable tbody td:nth-child(2),
.table-scrollable tbody td:nth-child(3),
.table-scrollable tbody td:nth-child(4),
.table-scrollable tbody td:nth-child(5) {
z-index: 1;
position: sticky;
left: 0;
}
.table-scrollable thead tr:first-child th {
z-index: 2;
position: sticky;
top: 0;
}
.table-scrollable thead tr:first-child th:first-child,
.table-scrollable thead tr:first-child th:nth-child(2),
.table-scrollable thead tr:first-child th:nth-child(3),
.table-scrollable thead tr:first-child th:nth-child(4),
.table-scrollable thead tr:first-child th:nth-child(5) {
z-index: 3;
position: sticky;
top: 0;
left: 0;
}
.table-scrollable tbody td:nth-child(1),
.table-scrollable thead tr:first-child th:nth-child(1) {
min-width: 38.5px !important;
max-width: 38.5px !important;
}
.table-scrollable tbody td:nth-child(2),
.table-scrollable thead tr:first-child th:nth-child(2) {
min-width: 108.5px !important;
max-width: 108.5px !important;
left: 38.5px !important; /* = largeur col1 = 38.5 */
}
.table-scrollable tbody td:nth-child(3),
.table-scrollable thead tr:first-child th:nth-child(3) {
min-width: 151.3px !important;
max-width: 151.3px !important;
left: 147px !important; /* = largeur col1+2 = 38.5+108.5 */
}
.table-scrollable tbody td:nth-child(4),
.table-scrollable thead tr:first-child th:nth-child(4) {
min-width: 71.3px !important;
max-width: 71.3px !important;
left: 298.3px !important; /* = largeur col1+2+3 = 38.5+108.5+151.3 */
}
.table-scrollable tbody td:nth-child(5),
.table-scrollable thead tr:first-child th:nth-child(5) {
min-width: 93.6px !important;
max-width: 93.6px !important;
left: 369.6px !important; /* = largeur col1+2+3+4 = 38.5+108.5+151.3+71.3 */
}
}
.table-conteneur {
width: 100%;
height: auto;
margin: auto;
border: 1px solid #888;
overflow: auto;
}
.table-scrollable {
border: 0;
border-collapse: separate;
border-spacing: 0;
background-color: #fdfdfd !important; /* gris très clair */
}
.table-scrollable th, .table-scrollable td {
padding: 0.5em !important;
border-right: 1px solid #888;
word-break: normal;
}
.table-scrollable th + th, .table-scrollable td +td {
border-left: 1px solid #fdfdfd !important; /* gris très clair */
}
.table-scrollable thead th {
border-top: 1px solid #008ec2;
white-space: nowrap;
background-color: #008ec2 !important; /* bleu formidable */
color: #fdfdfd !important; /* gris très clair */
}
.table-scrollable tbody td:nth-child(1),
.table-scrollable thead tr:first-child th:nth-child(1) {
background-color: #008ec2 !important; /* bleu formidable */
color: #fdfdfd !important; /* gris très clair */
}
.table-scrollable tbody {
border: 1px solid #888;
border-width: 1px 0;
background-color: #fdfdfd !important; /* gris très clair */
}
.table-scrollable tbody td {
background: #fdfdfd !important; /* gris très clair */
}
.table-scrollable tbody td {
border-top: 1px solid #CCC;
white-space: nowrap;
}
.table-scrollable tbody tr:hover td {
background-color: rgba(0,142,194,0.25) !important; /* bleu formidable opacité 25% */
}
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/***** ---------------------------------- 14) réglages de la page ARCHIVES ---------------------------------- *****/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ------------------------------------------------------------ ***/
/*** 14.1) réglages généraux de la page ***/
/*** ------------------------------------------------------------ ***/
.page-id-894 .et_pb_row:last-child:not(.chemin-d-acces) {
padding-bottom: 1.5rem !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.page-id-894 .et_pb_row:last-child:not(.chemin-d-acces) {
padding-bottom: 0rem !important;
}
}
#archives-videos .et_pb_row:last-child.chemin-d-acces,
#archives-presse .et_pb_row:last-child.chemin-d-acces,
#archives-agenda .et_pb_row:last-child.chemin-d-acces {
padding-top: 6rem !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
#archives-videos .et_pb_row:last-child.chemin-d-acces {
padding-top: 4rem !important;
}
#archives-presse .et_pb_row:last-child.chemin-d-acces {
padding-top: 3rem !important; /* celui du chemin d'accès "PRESSE" est plus petit, pour compenser le fait qu'il y ait trop de marge sous la dernière vidéo */
}
}
.page-id-894 h5 {
display: table-cell;
height: 0;
vertical-align: baseline;
bottom: -0.025em !important; /* on change cette valeur (par rapport à la valeur originale du h5), sinon ça se décale */
}
/*** ------------------------------------------------------------ ***/
/*** 14.2) réglages généraux des modules Bascule ***/
/*** ------------------------------------------------------------ ***/
.et_pb_toggle {
padding: 0px !important;
margin-bottom: 2.25% !important;
border: none !important;
}
/** réglages de la couleur du texte "descriptif" dans les modules **/
.et_pb_toggle_content p {
color: #3c3c3b !important; /* anthracite */
}
/** ajout d'une margin-bottom sous les h1 (années) des archives Photos, pour mettre un peu d'espace avant les contenus **/
#archives-photos-section h1 {
margin-bottom: 1.25rem !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
#archives-photos-section h1 {
margin-bottom: 0rem !important;
}
}
/*** ------------------------------------------------------------ ***/
/*** 14.3) réglages de la page Archives - PHOTOS ***/
/*** ------------------------------------------------------------ ***/
/** réglages des largeurs des colonnes : 16.5% pour la colonne gauche (date) et 81% pour la colonne droite (titre + galerie photos) **/
.et_pb_column.bascule-archives-photos-date {
width: 18.5% !important;
margin-right: 0px !important;
}
.et_pb_column.bascule-archives-photos-titre {
width: 81.5% !important;
}
@media only screen and (max-width: 767px) { /* smartphone */
.et_pb_column.bascule-archives-photos-date,
.et_pb_column.bascule-archives-photos-titre {
width: 100% !important;
margin-right: 0px !important;
}
}
/** réglages généraux du module Bascule **/
.et_pb_column.bascule-archives-photos-titre .et_pb_toggle_close,
.et_pb_column.bascule-archives-photos-titre .et_pb_toggle_open {
padding: 20px;
background-color: transparent !important;
}
/** réglages du picto ouvrir/fermer le module Bascule **/
.et_pb_column.bascule-archives-photos-titre .et_pb_toggle .et_pb_toggle_title, .et_pb_toggle h5.et_pb_toggle_title {
padding: 0 24px 0 0;
}
.et_pb_column.bascule-archives-photos-titre .et_pb_toggle_title::before {
position: absolute;
top: 30%;
right: 0;
margin-top: -.5em;
color: #3c3c3b; /* anthracite */
font-size: 1em !important;
content: "\33"; /* triangle vers le bas */
}
.et_pb_column.bascule-archives-photos-titre .et_pb_toggle_open .et_pb_toggle_title::before {
content: "\32"; /* triangle vers le haut */
}
/** réglages des galeries d'images dans le module Bascule **/
.et_pb_column.bascule-archives-photos-titre .et_pb_toggle_content .et_gallery_item {
width: 32% !important;
margin-right: 2% !important;
margin-bottom: 2% !important;
}
.et_pb_column.bascule-archives-photos-titre .et_pb_toggle_content .et_gallery_item:nth-child(3n) {
margin-right: 0px !important;
}
.et_pb_column.bascule-archives-photos-titre .et_pb_toggle_content .et_post_gallery li.et_gallery_item.et_pb_gallery_image {
padding-bottom: 0px !important;
}
@media only screen and (max-width: 767px) { /* smartphone */
.et_pb_column.bascule-archives-photos-titre .et_pb_toggle_content .et_gallery_item {
width: 100% !important;
margin-right: 0px !important;
margin-bottom: 5% !important;
}
}
/** réglages des overlay des images (background-color + couleur picto "<-->") **/
.et_pb_column.bascule-archives-photos-titre .et_pb_toggle_content .et_gallery_item .et_overlay, /* background-color au passage de la souris */
.et_pb_gallery .et_overlay {
background-color: rgba(0,0,0,0.5) !important;
border-color: rgba(0,0,0,0) !important;
}
.et_pb_column.bascule-archives-photos-titre .et_pb_toggle_content .et_gallery_item .et_overlay::before, /* couleur picto "<-->" au passage de la souris */
.et_pb_gallery .et_overlay::before {
color: #fdfdfd !important;
content: "0" !important;
position: absolute;
top: 55%;
left: 50%;
margin: -16px 0 0 -16px;
font-size: 32px;
-webkit-transition: all .4s;
transition: all .4s;
}
/* annuler l'opacité 50% sur les images de la galerie */
#galerie-page-medias a:hover,
#archives-photos-section a:hover,
#galerie-5colonnes a:hover {
opacity: 1 !important;
}
/* masquer la div contenant le nom de l'image (quand on clic sur une image pour l'agrandir) (inutile et très moche!) */
.mfp-title {
display: none;
}
@media only screen and (max-width: 767px) { /* smartphone */
#galerie-page-medias .et_pb_gallery_item {
margin-bottom: 1.25rem;
}
}
.et_pb_gallery_grid .et_pb_gallery_image {
border: 1px solid white !important;
}
/** réglages des séparateurs (entre chaque ligne d'archives) **/
#archives-photos-section .et_pb_divider::before {
border-top-color: #3c3c3b !important; /* anthracite */
}
#archives-photos-section .et_pb_divider {
height: 14px !important;
}
#archives-photos-section .et_pb_module {
margin-bottom: 6px !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.et_pb_row .et_pb_column.bascule-archives-photos-date,
.et_pb_row .et_pb_column.bascule-archives-photos-titre {
margin-bottom: 0 !important;
}
}
/*** ------------------------------------------------------------ ***/
/*** 14.4) réglages de la page Archives - VIDEOS ***/
/*** ------------------------------------------------------------ ***/
/** pour le picto "play" des vidéos intégrées: annuler le font-weight 700 qui vient normalement pour les a_hover **/
a.et_pb_video_play:hover {
font-weight: 400 !important;
}
#archives-videos-section .et_pb_row.archives-videos .et_pb_column:first-child {
width: 47.5% !important;
margin-right: 5% !important;
margin-top: 30px !important;
}
#archives-videos-section .et_pb_row.archives-videos .et_pb_column:last-child {
width: 47.5% !important;
margin-right: 0px !important;
margin-top: 30px !important;
}
#archives-videos-section .et_pb_row.archives-videos:nth-child(2) .et_pb_column {
margin-top: 5px !important;
}
@media only screen and (max-width: 980px) { /* tablette */
#archives-videos-section .et_pb_row.archives-videos .et_pb_column:first-child,
#archives-videos-section .et_pb_row.archives-videos .et_pb_column:last-child {
margin-top: 0px !important;
}
#archives-videos-section.et_pb_section .et_pb_row.archives-videos:last-of-type .et_pb_module:last-of-type {
margin-bottom: 2.5rem !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
#archives-videos-section .et_pb_row.archives-videos .et_pb_column:first-child,
#archives-videos-section .et_pb_row.archives-videos .et_pb_column:last-child {
width: 100% !important;
margin-right: 0px !important;
}
}
/*** ------------------------------------------------------------ ***/
/*** 14.5) réglages de la page Archives - PRESSE ***/
/*** ------------------------------------------------------------ ***/
/** pour activer / désactiver le bouton "Modifier" (front-end) **/
.tablepress.tableau-archives-presse caption {
display: initial !important; /* désactiver = display: none; */
}
.tablepress.tableau-archives-presse caption a {
background-color: #e74319 !important;
color: white !important;
padding: 2px 5px;
}
/** réglages généraux du module Bascule **/
#bascule-presse.et_pb_toggle_close,
#bascule-presse.et_pb_toggle_open {
padding: 20px;
background-color: transparent !important;
}
/** réglages du picto ouvrir/fermer le module Bascule **/
#bascule-presse.et_pb_toggle .et_pb_toggle_title, .et_pb_toggle h1.et_pb_toggle_title {
padding: 0 24px 0 0;
}
#bascule-presse .et_pb_toggle_title::before {
position: absolute;
top: 30%;
right: 0;
margin-top: -.5em;
color: #3c3c3b; /* anthracite */
font-size: 1em !important;
content: "\33"; /* triangle vers le bas */
}
#bascule-presse .et_pb_toggle_open .et_pb_toggle_title::before {
content: "\32"; /* triangle vers le haut */
}
/** réglages des largeurs de colonnes du tableau horaires **/
.tableau-archives-presse td.column-1 {width: 8% !important;}
.tableau-archives-presse td.column-2 {width: 87% !important;}
@media only screen and (max-width: 767px) { /* smartphone */
.tableau-archives-presse td.column-1 {width: 15% !important;}
.tableau-archives-presse td.column-2 {width: 70% !important;}
}
.tableau-archives-presse h5,
.tableau-archives-presse h6 {
padding-bottom: 0px !important;
}
.tableau-archives-presse tr td.column-1,
.tableau-archives-presse tr td.column-2 {
padding: 16px 0px !important;
border-bottom: 1px solid #3c3c3b !important; /* anthracite */
}
#bascule-presse h1.et_pb_toggle_title {
padding-bottom: 30px !important;
border-bottom: 1px solid #3c3c3b !important; /* anthracite */
}
#bascule-presse .et_pb_toggle_content {
padding-top: 0px !important;
}
/*** ------------------------------------------------------------ ***/
/*** 14.6) réglages de la page Archives - EVENEMENTS ***/
/*** ------------------------------------------------------------ ***/
/*** réglages des listes d'events passés (template="default" style="style-3") ***/
/*** réglages généraux ***/
/** réglage de la liste des évènements du mois **/
#ect-events-list-content, .ect-list-wrapper {
display: inline-block;
width: 100%;
max-width: 100%;
margin: 2.5px auto !important;
padding: 0;
background-color: transparent !important;
}
/** réglage de la ligne de 1 évènement **/
.ect-list-post.style-3 {
min-height: none;
border-radius: 0px !important;
overflow: hidden;
}
.ect-list-post {
display: table !important;
width: 100%;
max-width: 1080px !important;
height: auto !important;
box-sizing: border-box;
word-wrap: break-word;
margin: 0px auto !important;
padding: 14px 0px 6px 0px !important;
background-color: transparent !important;
border-top: 1px solid #3c3c3b !important; /* anthracite */
}
.ect-list-post:last-child {
border-bottom: 1px solid #3c3c3b !important; /* anthracite */
}
@media only screen and (max-width: 767px) { /* smartphone */
.ect-list-post {
display: block !important;
}
}
/*** réglages du bloc date ***/
/** réglage de la cellule contenant la date **/
.style-3 .ect-list-date {
display: table-cell !important;
width: 30% !important;
text-align: left !important;
vertical-align: middle;
padding: 0px !important;
}
@media only screen and (max-width: 980px) { /* tablette */
.style-3 .ect-list-date {
display: table-cell !important;
width: 35% !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.style-3 .ect-list-date {
display: block !important;
width: 100% !important;
}
}
#ect-events-list-content .ect-featured-event.style-3 .ect-list-date,
#ect-events-list-content .style-3 .ect-list-date {
background-color: transparent !important;
box-shadow: none !important;
}
#ect-events-list-content .ect-featured-event .ect-list-date .ect-date-area,
.style-3 .ect-list-date .ect-date-area {
display: table-cell !important;
text-align: center;
vertical-align: middle;
padding-top: 0px !important;
background-color: transparent !important;
color: #3c3c3b !important; /* anthracite */
}
/** remplacer les valeurs par défaut par les valeurs de h6 **/
.style-3 .ect-list-date .ect-date-area.default-schedule span.ev-day,
.style-3 .ect-list-date .ect-date-area.default-schedule span.ev-mo,
.style-3 .ect-list-date .ect-date-area.default-schedule span.ev-yr {
font-family: hk_groteskregular, Arial, sans-serif !important;
color: #3c3c3b !important; /* anthracite */
font-weight: normal !important;
font-size: 1.125rem !important;
line-height: 1.25rem !important;
letter-spacing: 0.1em !important; /* correspond à un interlettrage de 100 sur InDesign */
text-transform: uppercase !important;
padding-bottom: 10px !important;
position: relative;
vertical-align: baseline;
}
.style-3 .ect-list-date .ect-date-area.default-schedule span.ev-day,
.style-3 .ect-list-date .ect-date-area.default-schedule span.ev-mo {
bottom: 0.375em; /** la distance entre la baseline et l'exposant */
}
.style-3 .ect-list-date .ect-date-area.default-schedule span.ev-yr {
top: -6.25px; /** la distance entre la baseline et l'exposant */
}
/** réglages tailles textes pour tablette **/
@media only screen and (max-width: 980px) { /* tablette */
.style-3 .ect-list-date .ect-date-area.default-schedule span.ev-day,
.style-3 .ect-list-date .ect-date-area.default-schedule span.ev-mo,
.style-3 .ect-list-date .ect-date-area.default-schedule span.ev-yr {
font-size: 1rem !important;
line-height: 1rem !important;
}
.style-3 .ect-list-date .ect-date-area.default-schedule span.ev-day,
.style-3 .ect-list-date .ect-date-area.default-schedule span.ev-mo {
bottom: 0;
top: 0.2em; /** la distance entre la baseline et l'exposant */
}
.style-3 .ect-list-date .ect-date-area.default-schedule span.ev-yr {
top: 3.125px; /** la distance entre la baseline et l'exposant */
}
.ect-list-date .ect-date-area .ev-day {
margin-left: 0 !important;
}
}
/** réglages tailles textes pour smartphone **/
@media only screen and (max-width: 767px) { /* smartphone */
.style-3 .ect-list-date .ect-date-area.default-schedule span.ev-day,
.style-3 .ect-list-date .ect-date-area.default-schedule span.ev-mo,
.style-3 .ect-list-date .ect-date-area.default-schedule span.ev-yr {
font-size: 0.875rem !important;
line-height: 1rem !important;
}
.style-3 .ect-list-date .ect-date-area.default-schedule span.ev-day,
.style-3 .ect-list-date .ect-date-area.default-schedule span.ev-mo {
bottom: 0;
top: 0.2em; /** la distance entre la baseline et l'exposant */
}
.style-3 .ect-list-date .ect-date-area.default-schedule span.ev-yr {
top: 2.45px; /** la distance entre la baseline et l'exposant */
}
}
/** pour afficher la date en ligne (et pas en colonne comme c'est par défaut!) **/
.style-3 .ect-list-date .ect-date-area.default-schedule span {
display: inline !important;
}
/*** réglages du bloc titre ***/
/** réglage de la cellule contenant le titre **/
.ect-clslist-event-info {
display: table-cell !important;
width: 70% !important;
text-align: left !important;
vertical-align: middle;
padding: 0px !important;
background-color: transparent !important;
box-shadow: none !important;
}
@media only screen and (max-width: 980px) { /* tablette */
.ect-clslist-event-info {
display: table-cell !important;
width: 65% !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.ect-clslist-event-info {
display: block !important;
width: 100% !important;
}
}
/** remplacer les valeurs par défaut par les valeurs de h5 **/
#ect-events-list-content h2.ect-list-title a.ect-event-url {
font-family: Baskerville, "Times New Roman", serif !important;
color: #282828 !important; /* anthracite+foncé */
font-size: 1.225rem !important;
line-height: 1.25rem !important;
font-weight: normal !important;
letter-spacing: 0.04em !important; /* correspond à un interlettrage de 40 sur InDesign */
text-transform: uppercase !important;
padding-bottom: 10px !important;
}
.ect-list-post h2.ect-list-title {
margin: 0 !important;
display: table-cell;
position: relative;
height: 0;
vertical-align: baseline;
bottom: -0.15em;
}
h2.ect-list-title b { /* les bouts de titres en gras (balise ajoutée manuellement) --> font-weight à 600 */
font-weight: 600 !important;
}
/** réglages tailles textes pour tablette **/
@media only screen and (max-width: 980px) { /* tablette */
#ect-events-list-content h2.ect-list-title a.ect-event-url {
font-size: 1rem !important;
line-height: 1rem !important;
}
}
/** réglages tailles textes pour smartphone **/
@media only screen and (max-width: 767px) { /* smartphone */
#ect-events-list-content h2.ect-list-title a.ect-event-url {
font-size: 0.875rem !important;
line-height: 1rem !important;
}
}
/*** masquer les éléments inutiles ***/
/** masquer la ligne avec les heures **/
.ev-smalltime, #ect-events-list-content .ect-featured-event.style-3 .ev-smalltime {
display: none !important;
}
/** masquer la ligne avec le prix **/
#ect-events-list-content .style-3 .ect-rate-area {
display: none !important;
}
/** masquer la div qui contenait "find out more" **/
#ect-events-list-content .style-3-readmore {
display: none !important;
}
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/***** ---------------------------------- 15) réglages des pages PRATIQUE ---------------------------------- *****/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
h3.sous-titres-pages-pratique {
padding-bottom: 1.25rem !important;
}
/*** ------------------------------------------------------------ ***/
/*** 15.1) réglages de la page HORAIRES ***/
/*** ------------------------------------------------------------ ***/
/*** pour désactiver le bouton "Modifier" (front-end) ***/
.tablepress.tableau-cours caption {
display: none;
}
/*** retirer la bordure du tableau ***/
.entry-content table {
border: none !important;
}
/*** réglages des textes dans les tableaux de la page Horaires ***/
/** réglages des textes dans la ligne d'en-tête (th) des tableaux **/
.tablepress.tableau-cours.page-horaires tr th {
background-color: transparent;
border: none !important;
font-family: hk_groteskregular, Arial, sans-serif !important;
color: #3c3c3b !important; /* anthracite */
font-size: 1.25rem !important;
letter-spacing: 0.1em !important; /* correspond à un interlettrage de 100 sur InDesign */
font-weight: 500 !important;
line-height: 1.25em !important;
padding-bottom: 3rem !important;
text-transform: uppercase !important;
text-align: center !important;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/** réglages des textes stylés dans les tableaux **/
p.majuscule-gras-tableau-page-horaires,
span.majuscule-normal-tableau-page-horaires,
span.majuscule-gras-petit-tableau-page-horaires {
background-color: transparent;
border: none !important;
color: #3c3c3b !important; /* anthracite */
letter-spacing: 0.1em !important; /* correspond à un interlettrage de 100 sur InDesign */
font-weight: 500 !important;
line-height: 1.25em !important;
text-transform: uppercase !important;
text-align: center !important;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
p.majuscule-gras-tableau-page-horaires {
font-family: hk_groteskbold, Arial, sans-serif !important;
font-size: 0.875rem !important;
background-image: linear-gradient(180deg,#eeaecf 0%,rgba(238,174,207,0) 100%) !important; /* dégradé rose */
padding: 0.5rem !important;
}
.ateliers p.majuscule-gras-tableau-page-horaires {
background-image: linear-gradient(180deg,#a4cd84 0%,rgba(164,205,132,0) 100%) !important; /* dégradé vert */
}
.solfege p.majuscule-gras-tableau-page-horaires {
background-image: linear-gradient(180deg,#69c5da 0%,rgba(105,197,218,0) 100%) !important; /* dégradé bleu */
}
.instruments p.majuscule-gras-tableau-page-horaires {
background-image: linear-gradient(180deg,#fbef77 0%,rgba(251,239,119,0) 100%) !important; /* dégradé jaune */
line-height: 2.25em !important;
}
span.majuscule-normal-tableau-page-horaires {
font-family: hk_groteskregular, Arial, sans-serif !important;
font-size: 0.75rem !important;
}
span.majuscule-gras-petit-tableau-page-horaires {
font-family: hk_groteskbold, Arial, sans-serif !important;
font-size: 0.625rem !important;
letter-spacing: 0 !important; /* annuler l'interlettrage de 100, sinon ça rentre pas sur 1 ligne */
}
@media only screen and (max-width: 980px) { /* tablette */
.tablepress.tableau-cours.page-horaires tr th {
font-size: 1rem !important;
letter-spacing: 0.05em !important; /* réduire l'interlettrage */
padding-bottom: 1.5rem !important;
}
p.majuscule-gras-tableau-page-horaires {
font-size: 0.75rem !important;
letter-spacing: 0 !important;
}
span.majuscule-normal-tableau-page-horaires {
font-size: 0.675rem !important;
letter-spacing: 0 !important;
}
span.majuscule-gras-petit-tableau-page-horaires {
font-size: 0.55rem !important;
letter-spacing: 0 !important;
}
p.majuscule-gras-tableau-page-horaires,
span.majuscule-gras-petit-tableau-page-horaires {
font-family: hk_groteskmedium, Arial, sans-serif !important;
font-weight: 600 !important;
}
}
/*** réglages des padding dans les cellules des tableaux ***/
body.page-id-1003 .entry-content thead th, body.page-id-1003 .entry-content tr th, /** padding dans les cellules titre (th) **/
body.page-id-1003 .entry-content tbody td, body.page-id-1003 .entry-content tr td, /** padding dans les cellules (td) **/
body.page-id-1003 .entry-content tr td, body.page-id-1003.et-pb-preview #main-content .container tr td {
padding: 0px !important;
}
/*** réglages des largeurs de colonnes des tableaux ***/
.tablepress.tableau-cours.page-horaires .column-1,
.tablepress.tableau-cours.page-horaires .column-2,
.tablepress.tableau-cours.page-horaires .column-3,
.tablepress.tableau-cours.page-horaires .column-4,
.tablepress.tableau-cours.page-horaires .column-5 {
width: 20% !important;
border-right: 1px solid #3c3c3b !important; /* anthracite */
}
.tablepress.tableau-cours.page-horaires .column-1 {
border-left: 1px solid #3c3c3b !important; /* anthracite */
}
/*** largeurs spéciales pour le tableau Ateliers (6 colonnes) ***/
.tablepress.tableau-cours.page-horaires.ateliers .column-1,
.tablepress.tableau-cours.page-horaires.ateliers .column-2,
.tablepress.tableau-cours.page-horaires.ateliers .column-3,
.tablepress.tableau-cours.page-horaires.ateliers .column-4,
.tablepress.tableau-cours.page-horaires.ateliers .column-5,
.tablepress.tableau-cours.page-horaires.ateliers .column-6 {
width: 16.666% !important;
border-right: 1px solid #3c3c3b !important; /* anthracite */
}
/*** ------------------------- ***/
/*** 15.1.2) réglages des tableaux sur TABLETTE ***/
/*** ------------------------- ***/
@media only screen and (min-width: 768px) and (max-width: 980px) { /* tablette uniquement */
/*** on réduit un peu la taille des textes "jours" + les padding (pour les 3 tableaux sur tablette), sinon le tableau Ateliers est vraiment dégeu ***/
.tablepress.tableau-cours.page-horaires tr th {
font-size: 0.9rem !important;
}
p.majuscule-gras-tableau-page-horaires {
padding: 0.25rem !important;
}
}
/*** ------------------------- ***/
/*** 15.1.3) réglages des tableaux sur SMARTPHONE ***/
/*** ------------------------- ***/
@media only screen and (max-width: 767px) { /* smartphone */
/*** on masque la ligne "titre" (th)... j'ai inséré une ligne titre (vide!), car sinon on ne peut pas activer la fonction de scroll horizontal ***/
.tablepress.tableau-cours.page-horaires tr th {
display: none !important;
}
/*** réglages des textes dans les tableaux de la page Horaires ***/
p.jour-tableau-page-horaires, /** jour de la semaine **/
p.majuscule-gras-tableau-page-horaires, /** nom du cours **/
span.majuscule-normal-tableau-page-horaires, /** horaire du cours **/
span.majuscule-gras-petit-tableau-page-horaires { /** remarques **/
background-color: transparent;
border: none !important;
color: #3c3c3b !important; /* anthracite */
letter-spacing: 0em !important; /* annuler l'interlettrage */
font-weight: 500 !important;
line-height: 1.25em !important;
text-transform: uppercase !important;
text-align: center !important;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
p.jour-tableau-page-horaires {
font-family: hk_groteskregular, Arial, sans-serif !important;
font-size: 0.875rem !important;
letter-spacing: 0.05em !important; /* réduire l'interlettrage */
padding: 0.5rem 0.5rem 1.5rem 0.5rem !important;
}
p.majuscule-gras-tableau-page-horaires {
font-family: hk_groteskmedium, Arial, sans-serif !important;
font-weight: 600 !important;
font-size: 0.75rem !important;
background-image: linear-gradient(180deg,#eeaecf 0%,rgba(238,174,207,0) 100%) !important; /* dégradé rose */
padding: 0.5rem !important;
}
.solfege p.majuscule-gras-tableau-page-horaires {
background-image: linear-gradient(180deg,#69c5da 0%,rgba(105,197,218,0) 100%) !important; /* dégradé bleu */
}
.tablepress.tableau-cours.page-horaires.smartphone span.majuscule-normal-tableau-page-horaires {
font-family: hk_groteskregular, Arial, sans-serif !important;
font-size: 0.675rem !important;
}
.tablepress.tableau-cours.page-horaires.smartphone span.majuscule-gras-petit-tableau-page-horaires {
font-family: hk_groteskmedium, Arial, sans-serif !important;
font-size: 0.5rem !important;
font-weight: 600 !important;
letter-spacing: 0 !important; /* annuler l'interlettrage de 100, sinon ça rentre pas sur 1 ligne */
}
/*** réglages des padding dans les cellules des tableaux ***/
/* idem que les réglages pour ordi et tablette */
/*** réglages des largeurs de colonnes des tableaux ***/
.tablepress.tableau-cours.page-horaires.smartphone .column-1,
.tablepress.tableau-cours.page-horaires.smartphone .column-2,
.tablepress.tableau-cours.page-horaires.smartphone .column-3,
.tablepress.tableau-cours.page-horaires.smartphone .column-4,
.tablepress.tableau-cours.page-horaires.smartphone .column-5 {
min-width: 130px !important;
max-width: 130px !important;
border-right: 1px solid #3c3c3b !important; /* anthracite */
}
.tablepress.tableau-cours.page-horaires.smartphone .column-1 {
border-left: 1px solid #3c3c3b !important; /* anthracite */
}
}
/*** ------------------------------------------------------------ ***/
/*** 15.2) réglages de la page TARIFS ***/
/*** ------------------------------------------------------------ ***/
/** pour activer / désactiver le bouton "Modifier" (front-end) **/
.tablepress.tableau-cours caption {
display: initial !important; /* désactiver = display: none; */
}
.tablepress.tableau-cours caption a {
background-color: #e74319 !important;
color: white !important;
padding: 2px 5px;
}
/*** retirer la bordure du tableau ***/
.entry-content table {
border: none !important;
}
/*** réglages des textes dans les tableaux de la page Tarifs ***/
.tablepress.tableau-cours.page-tarifs tr th,
.tablepress.tableau-cours.page-tarifs tr td {
background-color: transparent;
border: none !important;
font-family: hk_groteskregular, Arial, sans-serif !important;
color: #3c3c3b !important; /* anthracite */
font-size: 0.875rem !important;
letter-spacing: 0.1em !important; /* correspond à un interlettrage de 100 sur InDesign */
font-weight: 500 !important;
line-height: 1.25em !important;
padding-bottom: 1.25em;
text-transform: uppercase;
}
/** réglages des textes dans la ligne d'en-tête (th) des tableaux **/
.tablepress.tableau-cours.page-tarifs tr th {
border-bottom: 1px solid #3c3c3b !important; /* anthracite */
padding-bottom: 6px !important;
}
.tablepress.tableau-cours.page-tarifs th.column-1 {
padding-left: 1rem !important;
}
/** réglages du "titre" (Initiation/Instruments/Atelier/Solfège) **/
p.titre-tableau-page-tarifs {
font-family: Baskerville, "Times New Roman", serif !important;
color: #3c3c3b !important; /* anthracite */
font-size: 1.375rem;
line-height: 1em;
text-align: center;
letter-spacing: 0.04em !important; /* correspond à un interlettrage de 40 sur InDesign */
text-transform: uppercase !important;
padding-top: 1rem;
padding-bottom: 0 !important;
background-color: transparent !important;
}
/** réglages des textes stylés dans les tableaux **/
p.majuscule-gras-tableau-page-tarifs,
p.minuscule-normal-tableau-page-tarifs,
p.minuscule-gras-tableau-page-tarifs,
p.majuscule-gras-tableau-page-tarifs-initiation {
font-family: hk_groteskregular, Arial, sans-serif !important;
color: #3c3c3b !important; /* anthracite */
font-size: 0.875rem !important;
letter-spacing: 0.1em !important; /* correspond à un interlettrage de 100 sur InDesign */
font-weight: 500 !important;
line-height: 1.25em !important;
padding-bottom: 0 !important;
padding-left: 1rem !important;
text-transform: none !important;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
background-color: transparent !important;
}
p.majuscule-gras-tableau-page-tarifs {
font-family: hk_groteskbold, Arial, sans-serif !important;
text-transform: uppercase !important;
}
p.majuscule-gras-tableau-page-tarifs-initiation {
font-family: hk_groteskbold, Arial, sans-serif !important;
text-transform: uppercase !important;
text-align: center !important;
margin-top: 3rem !important;
margin-bottom: 3.5rem !important;
}
p.minuscule-gras-tableau-page-tarifs {
font-family: hk_groteskbold, Arial, sans-serif !important;
}
p.minuscule-gras-tableau-page-tarifs span {
font-family: hk_groteskregular, Arial, sans-serif !important;
}
@media only screen and (max-width: 767px) { /* smartphone */
.tablepress.tableau-cours.page-tarifs tr th,
.tablepress.tableau-cours.page-tarifs tr td,
p.majuscule-gras-tableau-page-tarifs,
p.minuscule-normal-tableau-page-tarifs,
p.minuscule-gras-tableau-page-tarifs,
p.majuscule-gras-tableau-page-tarifs-initiation {
font-size: 0.7rem !important;
letter-spacing: 0 !important; /* annuler l'interlettrage de 100 sur smartphone */
}
p.majuscule-gras-tableau-page-tarifs,
p.majuscule-gras-tableau-page-tarifs-initiation,
p.minuscule-gras-tableau-page-tarifs {
font-family: hk_groteskmedium, Arial, sans-serif !important;
font-weight: 600 !important;
}
.tablepress.tableau-cours.page-tarifs th.column-1,
p.majuscule-gras-tableau-page-tarifs,
p.minuscule-normal-tableau-page-tarifs,
p.minuscule-gras-tableau-page-tarifs,
p.majuscule-gras-tableau-page-tarifs-initiation {
padding-left: 0.25rem !important;
}
}
/*** réglages de la ligne à l'intérieur des tableaux tarifs instruments ***/
hr.ligne-tableau-page-tarifs {
color: #3c3c3b !important; /* anthracite */
width: 94% !important;
margin: 0.25em auto 0.75rem auto !important;
padding: 0 !important;
}
@media only screen and (max-width: 767px) { /* smartphone */
hr.ligne-tableau-page-tarifs {margin: 0 auto !important;}
}
/*** réglages des padding dans les cellules des tableaux ***/
/** padding dans les cellules (td) et les cellules titre (th) **/
.entry-content tr td, body.et-pb-preview #main-content .container tr td,
.entry-content thead th, .entry-content tr th {
padding: 0px 23px 0px 0px;
}
@media only screen and (max-width: 980px) { /* tablette */
.entry-content thead th, .entry-content tr th,
.entry-content tbody td, .entry-content tr td {
padding: 0px 21px 0px 0px;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.entry-content thead th, .entry-content tr th,
.entry-content tbody td, .entry-content tr td {
padding: 0px 10px 0px 0px;
}
}
.tablepress.tableau-cours.page-tarifs tbody {
display: contents !important;
width: 100% !important;
}
/*** réglages des largeurs de colonnes des tableaux de la page Tarifs ***/
.tablepress.tableau-cours.page-tarifs th.column-1 {display: table-cell; width: 46.5% !important;}
.tablepress.tableau-cours.page-tarifs th.column-2 {display: table-cell; width: 13.5% !important;}
.tablepress.tableau-cours.page-tarifs th.column-3 {display: table-cell; width: 30% !important;}
.tablepress.tableau-cours.page-tarifs th.column-4 {display: table-cell; width: 10% !important; padding-right: 1rem !important; text-align: right !important}
.tablepress.tableau-cours.page-tarifs td.column-4 {padding-right: 1rem !important; text-align: right !important}
/** réglages des largeurs de colonnes des tableaux qui n'ont que 2 colonnes (Ateliers + Solfège) **/
.tablepress.tableau-cours.page-tarifs.tableau-2-colonnes th.column-1 {display: table-cell; width: 90% !important;}
.tablepress.tableau-cours.page-tarifs.tableau-2-colonnes th.column-2 {display: table-cell; width: 10% !important; padding-right: 1rem !important; text-align: right !important}
.tablepress.tableau-cours.page-tarifs.tableau-2-colonnes td.column-2 {padding-right: 1rem !important; text-align: right !important}
@media only screen and (max-width: 980px) { /* tablette */
.tablepress.tableau-cours.page-tarifs.tableau-2-colonnes th.column-1,
.tablepress.tableau-cours.page-tarifs.tableau-2-colonnes td.column-1 {display: table-cell;width: 80% !important;}
.tablepress.tableau-cours.page-tarifs.tableau-2-colonnes th.column-2,
.tablepress.tableau-cours.page-tarifs.tableau-2-colonnes td.column-2 {display: table-cell;width: 9.5% !important;}
}
@media only screen and (max-width: 767px) { /* smartphone */
.tablepress.tableau-cours.page-tarifs {
display: block !important;
width: 100% !important;
}
.tablepress.tableau-cours.page-tarifs th.column-1,
.tablepress.tableau-cours.page-tarifs td.column-1 {display: table-cell; width: 39% !important;}
.tablepress.tableau-cours.page-tarifs th.column-2,
.tablepress.tableau-cours.page-tarifs td.column-2 {display: table-cell; width: 7% !important;}
.tablepress.tableau-cours.page-tarifs th.column-3,
.tablepress.tableau-cours.page-tarifs td.column-3 {display: table-cell; width: 35% !important;}
.tablepress.tableau-cours.page-tarifs th.column-4,
.tablepress.tableau-cours.page-tarifs td.column-4 {display: table-cell; width: 7% !important; padding-right: 10px !important;}
.tablepress.tableau-cours.page-tarifs.tableau-2-colonnes th.column-1,
.tablepress.tableau-cours.page-tarifs.tableau-2-colonnes td.column-1 {display: table-cell;width: 80% !important;}
.tablepress.tableau-cours.page-tarifs.tableau-2-colonnes th.column-2,
.tablepress.tableau-cours.page-tarifs.tableau-2-colonnes td.column-2 {display: table-cell;width: 7% !important; padding-right: 10px !important;}
}
@media only screen and (max-width: 375px) { /* smartphone < 375px */
body.page-id-1007 #tablepress-20-1 .column-1 {max-width: 90px !important;}
body.page-id-1007 #tablepress-20-1 .column-1 p.majuscule-gras-tableau-page-tarifs {max-width: 80px !important;}
body.page-id-1007 #tablepress-20-1 td.column-1 p.majuscule-gras-tableau-page-tarifs {hyphens: auto !important;white-space: normal !important;}
}
/*** réglages des dégradés dans l'intégralité (thead+tbody) des tableaux de la page Tarifs ***/
table#tablepress-20-1 {
background-image: linear-gradient(180deg,#eeaecf 0%,rgba(238,174,207,0) 100%) !important; /* dégradé rose */
}
table#tablepress-20-2 {
background-image: linear-gradient(0deg,rgba(253,251,251,1) 0%,rgba(235,237,238,1) 100%) !important; /* gris perle dégradé 018 Cloudy Knoxville */
}
table#tablepress-21-1,
table#tablepress-21-2 {
background-image: linear-gradient(180deg,#fbef77 0%,rgba(251,239,119,0) 100%) !important; /* dégradé jaune */
}
table#tablepress-22-1,
table#tablepress-22-2 {
background-image: linear-gradient(180deg,#a4cd84 0%,rgba(164,205,132,0) 100%) !important; /* dégradé vert */
}
table#tablepress-23-1,
table#tablepress-23-2 {
background-image: linear-gradient(180deg,#69c5da 0%,rgba(105,197,218,0) 100%) !important; /* dégradé bleu */
}
/*** puis on met un background-color "par dessus le dégradé" pour la ligne de titre (thead) : couleur = gris très clair = couleur de fond du site ***/
table thead tr.row-1 {
background-color: #fdfdfd !important; /* gris très clair = couleur de fond du site */
}
/** ajouter un padding-bottom pour "prolonger" l'étendue du dégradé **/
.tablepress.tableau-cours.page-tarifs tbody tr:last-child td {
padding-bottom: 2.5rem !important;
}
/*** ------------------------------------------------------------ ***/
/*** 15.3) réglages de la page INSCRIPTION ***/
/*** ------------------------------------------------------------ ***/
/*** ------------------------------------------------------------ ***/
/*** 15.4) réglages de la page PLAN D'ÉTUDES ***/
/*** ------------------------------------------------------------ ***/
#plan-etude-fem h1,
#plan-etude-fem h2 {
text-align: center;
}
#plan-etude-fem h2 span {
font-family: hk_groteskregular, Arial, sans-serif !important;
}
body.page-id-1005 #plan-etude-fem h2:not(.sous-titre-Baskerville),
body.page-id-1005 #plan-etude-fem h2:not(.sous-titre-Baskerville) span {
line-height: 1.5rem !important;
padding-bottom: 2rem !important;
}
@media only screen and (min-width: 981px) { /* bureau */
body.page-id-1005 #texte-reduit-LG.et_pb_module{
max-height:none !important; /* ici on supprime la valeur de la max-height définie dans #texte-reduit-LG, pour que le texte d'intro ne soit pas rogné sur ordi */
margin-bottom: 0 !important;
}
}
/*** ------------------------------------------------------------ ***/
/*** 15.5) réglages de la page EMPLOI ***/
/*** ------------------------------------------------------------ ***/
/*** ------------------------------------------------------------ ***/
/*** 15.6) réglages de la page PARTENAIRES ***/
/*** ------------------------------------------------------------ ***/
/** réglages de la liste contenant les logos : display:flex + align-items:stretch + justify-content:space-between = pour répartir les marges entre les objets dans la liste (ul) **/
.logo-partenaires.et_pb_module ul {
display: flex !important;
-webkit-display: flex !important;
align-items: stretch !important;
justify-content: space-between !important;
width: 100% !important;
padding-top: 0 !important;
padding-bottom: 2rem !important;
}
/** réglages des objets de la liste (li) : display:block + flex: 0 1 auto = la suite des réglages répartition des marges entre les objets **/
.logo-partenaires.et_pb_module ul li {
display: block !important;
flex: 0 1 auto !important;
list-style-type: none !important;
}
.logo-partenaires.et_pb_module ul li span.partenaires {
display: block !important;
text-align: center !important;
font-family: inherit !important;
color: #3c3c3b !important; /* anthracite */
font-size: 1.25rem !important;
font-weight: 500 !important;
line-height: 1.25em !important;
padding-bottom: 0.5em !important;
}
span.partenaires-img img.logo-partenaires-image {
display: block !important;
height: 90px !important;
width: auto !important;
margin: 0 auto !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
span.partenaires-img img.logo-partenaires-image {
height: 60px !important;
}
.logo-partenaires.et_pb_module ul li span.partenaires {
font-size: 1rem !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.logo-partenaires.et_pb_module ul,
.logo-partenaires.et_pb_module ul li {
display: inherit !important;
margin-bottom: 1rem;
}
span.partenaires-img img.logo-partenaires-image {
max-width: 100% !important;
height: auto !important;
}
}
/* annuler l'opacité 50% sur les logos */
.logo-partenaires ul li a:hover {
opacity: 0.75 !important;
cursor: pointer !important;
}
/*** ------------------------------------------------------------ ***/
/*** 15.6) réglages de la page PARTENAIRES - V2 ***/
/*** ------------------------------------------------------------ ***/
body.page-id-235066 #logo-partenaires img {
max-height: 120px !important;
width: auto !important;
margin: 0 auto !important;
}
body.page-id-235066 #logo-partenaires p {
text-align: center !important;
}
/* logo Association des Amis de l'EMC: on le met un peu +petit */
body.page-id-235066 #logo-partenaires .logo-amis-emc.et_pb_module img {
max-height: 80px !important;
width: auto !important;
margin: 0 auto !important;
}
@media only screen and (min-width: 768px) { /* bureau et tablette */
body.page-id-235066 .et_pb_gutters3 .et_pb_column_1_3,
body.page-id-235066 .et_pb_gutters3.et_pb_row .et_pb_column_1_3 {
width: 29.6667% !important;
}
body.page-id-235066 .et_pb_gutters3 .et_pb_column,
body.page-id-235066 .et_pb_gutters3.et_pb_row .et_pb_column {
margin-right: 5.5%;
}
body.page-id-235066 .et_pb_row .et_pb_column.et-last-child,
body.page-id-235066 .et_pb_row .et_pb_column:last-child,
body.page-id-235066 .et_pb_row_inner .et_pb_column.et-last-child,
body.page-id-235066 .et_pb_row_inner .et_pb_column:last-child {
margin-right: 0 !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
#logo-partenaires.et_pb_section p {
padding-bottom: 0.5em !important;
}
#logo-partenaires.et_pb_section .et_pb_row .et_pb_column {
margin-bottom: 3rem !important;
}
}
/*** ------------------------------------------------------------ ***/
/*** 15.7) réglages de la page PRÉSENTATION DE L'ÉCOLE ***/
/*** ------------------------------------------------------------ ***/
.telecharger-depliant-emc p {
text-align: center !important;
margin-top: 4rem !important;
margin-bottom: 2rem !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.telecharger-depliant-emc p {
margin-top: 2rem !important;
margin-bottom: 1rem !important;
}
}
@media only screen and (min-width: 768px) { /* bureau et tablette */
.telecharger-depliant-emc p br {
display: none !important;
}
}
/*** opacité à zéro sur tous les éléments qui règlent les infos-bulles générées par le plugin Draw Attention (on mouseover sur les zones clicables) ***/
#hotspot-235161 .hotspots-placeholder,
#hotspot-235161 .leaflet-tooltip,
#hotspot-235161 .leaflet-rrose-content-wrapper,
#hotspot-235161 .leaflet-rrose-tip,
#hotspot-235161 .leaflet-tooltip-top:before,
#hotspot-235161 .leaflet-tooltip-bottom:before,
#hotspot-235161 .leaflet-tooltip-left:before,
#hotspot-235161 .leaflet-tooltip-right:before {
opacity: 0 !important;
}
/*** ------------------------------------------------------------ ***/
/*** 15.8) réglages de la page AIDES FINANCIÈRES ***/
/*** ------------------------------------------------------------ ***/
/*** ------------------------------------------------------------ ***/
/*** 15.9) réglages de la page CONTACT ***/
/*** ------------------------------------------------------------ ***/
/*** réglages des blocs infos ***/
#blocs-infos-page-contact h1 {
text-align: center !important;
padding-bottom: 2.75rem !important;
padding-top: 80px !important;
}
#blocs-infos-page-contact p.blocs-infos-contact {
text-align: center !important;
text-transform: uppercase !important;
padding-bottom: 1.35rem !important;
}
/*** réglages des background des blocs infos (sigles couleur) ***/
#blocs-infos-page-contact.et_pb_row .et_pb_column .et_pb_module {
background-position: top left !important;
background-size: 100% !important;
height: 334.4px !important;
}
#bloc-contact-reception {background-image: url(/wp-content/uploads/2020/02/signe_bleu_Contact.png) !important;}
#bloc-contact-adresse {background-image: url(/wp-content/uploads/2020/02/signe_jaune_Contact.png) !important;}
#bloc-contact-direction {background-image: url(/wp-content/uploads/2020/02/signe_vert_Contact.png) !important;}
#bloc-contact-email {background-image: url(/wp-content/uploads/2020/02/signe_rose_Contact.png) !important;}
@media only screen and (max-width: 980px) { /* tablette */
#blocs-infos-page-contact.et_pb_row .et_pb_column {
width: 50% !important; /* on reste en 2 colonnes sur tablette */
}
#blocs-infos-page-contact.et_pb_row .et_pb_column .et_pb_module {
height: 220px !important;
}
#blocs-infos-page-contact h1 {
padding-top: 50px !important; /* on réduit l'espace en dessus du h1 pour que le sigle en background se positionne bien */
}
}
@media only screen and (max-width: 767px) { /* smartphone */
#blocs-infos-page-contact.et_pb_row.ligne1 {
padding-bottom: 0 !important; /* pour qu'il y ait le même écart entre chaque bloc (pas de distinction entre section 1 et 2) */
}
#blocs-infos-page-contact.et_pb_row .et_pb_column {
width: 100% !important; /* on passe en 1 colonne sur smartphone */
}
#blocs-infos-page-contact.et_pb_row .et_pb_column .et_pb_module {
height: auto !important;
min-height: 220px !important;
padding-bottom: 20px !important;
}
#blocs-infos-page-contact h1 {
padding-top: 45px !important; /* on réduit l'espace en dessus du h1 pour que le sigle en background se positionne bien */
}
}
/*** ------------------------------------------------------------ ***/
/*** 15.10) réglages du formulaire de contact ***/
/*** ------------------------------------------------------------ ***/
/*** réglages généraux des largeurs des champs (overwrite valeurs formidable.css) ***/
.frm_style_style-formidable.with_frm_style .frm_form_field.frm_left_container {
grid-template-columns: 175px auto !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.frm_style_style-formidable.with_frm_style .frm_form_field.frm_left_container {
grid-template-columns: 150px auto !important;
}
}
.frm_form_field.frm_left_container .frm_primary_label {
grid-column: span 2 / 2 !important;
grid-row: span 2 /span 2;
}
.frm12, .frm_full, .frm_full .wp-editor-wrap {
grid-column: span 12 / span 12 !important;
}
.frm_full input:not([type="checkbox"]):not([type="radio"]):not([type="button"]), .frm_full select, .frm_full textarea {
grid-column: span 10 / 12 !important;
}
/*** réglages des libellés du formulaire de contact Formidable (Nom, Email, Sujet, Message) + texte bouton "Envoyer" ***/
.frm_style_style-formidable.with_frm_style .frm_primary_label,
.frm_style_style-formidable.with_frm_style .frm_submit button {
font-family: hk_groteskregular, Arial, sans-serif !important;
color: #3c3c3b !important; /* anthracite */
font-size: 1.25rem !important; /* réglages idem p */
line-height: 1.25rem !important;
font-weight: normal !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
height: 2.75rem !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.frm_style_style-formidable.with_frm_style .frm_primary_label,
.frm_style_style-formidable.with_frm_style.with_frm_style .frm_left_container .frm_primary_label {
height: auto !important;
margin-bottom: 0.5rem !important;
}
}
/*** réglages du bloc "captcha" du formulaire de contact Formidable ***/
@media only screen and (min-width: 981px) { /* bureau */
.bloc-recaptcha {
margin-left: 21.75% !important;
padding-left: 10px !important;
}
}
@media only screen and (max-width: 980px) { /* tablette */
.bloc-recaptcha #field_kml3h div {
width: auto !important;
float: right !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.bloc-recaptcha #field_kml3h div {
width: 100% !important;
float: none !important;
}
}
/** réglages spéciaux texte bouton "Envoyer" **/
.frm_style_style-formidable.with_frm_style .frm_submit button {
font-family: hk_groteskmedium, Arial, sans-serif !important;
font-weight: 600 !important;
}
/** réglages des blocs contenant les libellés, pour que les libellés soient alignés avec le texte que l'utilisateur écrira dans les champs de saisie **/
.with_frm_style .frm_left_container .frm_primary_label {
width: 100% !important;
height: 2.75rem !important;
padding: 13px 0px 0px 0px !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.frm_style_style-formidable.with_frm_style .frm_primary_label, /* réglages textes libellés + bouton Envoyer */
.frm_style_style-formidable.with_frm_style .frm_submit button {
font-size: 1rem !important;
line-height: 1rem !important;
}
body.page-id-898 .with_frm_style .frm_left_container .frm_primary_label { /* réglages blocs contenant les libellés */
display: block !important;
width: 100% !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
/*** réglage des boutons Envoyer + Suivant + Précédent ***/
.frm_style_style-formidable.with_frm_style .frm_submit button {
font-size: 0.8rem !important;
line-height: 0.8rem !important;
}
}
/*** réglages des champs de saisie: textes (saisis par l'utilisateur) et blocs ***/
.frm_style_style-formidable.with_frm_style input[type="text"],
.frm_style_style-formidable.with_frm_style input[type="email"],
.frm_style_style-formidable.with_frm_style textarea {
font-family: hk_groteskregular, Arial, sans-serif !important;
color: #3c3c3b !important; /* anthracite */
font-size: 1.25rem !important; /* réglages idem p */
font-weight: 500 !important;
line-height: 1.25rem !important;
letter-spacing: 0 !important;
background-color: transparent !important;
border: 1.25px solid #282828 !important; /* anthracite+foncé */
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
padding: 6px 10px !important;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
outline: none !important;
box-shadow: none !important;
height: 2.75rem !important;
}
/** hauteur du champs de saisie "Message" **/
.frm_style_style-formidable.with_frm_style textarea {
height: inherit !important;
padding: 11px 10px !important;
}
/** largeur des champs de saisie Nom, Email et Sujet **/
body.page-id-898 .with_frm_style .frm_form_field.frm_left_container input:not([type="radio"]):not([type="checkbox"]) {
max-width: none !important;
width: 60% !important;
}
/** largeur du champs de saisie "Message" **/
body.page-id-898 .with_frm_style .frm_form_field.frm_left_container textarea {
max-width: none !important;
width: 94% !important;
}
/** pour annuler les valeur par défaut de Formidable (focus faisait un border plus clair) **/
.frm_style_style-formidable.with_frm_style .form-field input:not([type="file"]):focus,
.frm_style_style-formidable.with_frm_style textarea:focus {
border-color: #282828 !important; /* anthracite+foncé */
box-shadow: none !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.frm_style_style-formidable.with_frm_style input[type="text"], /* réglages textes à saisir dans les champs */
.frm_style_style-formidable.with_frm_style input[type="email"],
.frm_style_style-formidable.with_frm_style input[type="tel"],
.frm_style_style-formidable.with_frm_style textarea {
font-size: 1rem !important;
line-height: 1rem !important;
}
body.page-id-898 .with_frm_style .frm_form_field.frm_left_container input:not([type="radio"]):not([type="checkbox"]),
body.page-id-898 .with_frm_style .frm_form_field.frm_left_container textarea { /* réglages blocs champs de saisie */
display: block !important;
width: 100% !important;
}
}
/*** réglages des boutons radio: par défaut c'était sur 2 lignes --> on les met en inline-block ***/
.radio-button-EMC .frm_radio {
display: inline-block !important;
margin-right: 5px !important;
}
/** on ajoute une margin-left de 17%, pour que ça s'aligne avec les champs de saisie **/
body.page-id-898 .radio-button-EMC .frm_opt_container {
margin-left: 21.75% !important;
padding-left: 10px !important; /* pour compenser le text-indent:-20px; du ratio */
}
.radio-button-EMC .frm_radio label {
font-family: hk_groteskmedium, Arial, sans-serif !important;
text-transform: uppercase !important;
color: #3c3c3b !important; /* anthracite */
font-size: 0.85rem !important;
line-height: 1em !important;
font-weight: 500 !important;
letter-spacing: 0.1em !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
body.page-id-898 .radio-button-EMC .frm_opt_container { /* on enlève la margin-left / padding-left (vu que l'affichage n'est plus en inline) */
margin-left: 0 !important;
padding-left: 0 !important;
}
}
/** réglages spéciaux pour "échelonnement paiements" **/
.radio-button-EMC.paiements .frm_radio {
display: block !important;
margin-bottom: 0.75em !important;
}
.radio-button-EMC.paiements .frm_radio label {
font-family: hk_groteskregular, Arial, sans-serif !important;
text-transform: none !important;
color: #3c3c3b !important; /* anthracite */
font-size: 1rem !important;
line-height: 1em !important;
font-weight: 500 !important;
letter-spacing: 0.1em !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.radio-button-EMC.paiements .frm_radio label {
font-size: 0.85rem !important;
}
}
/*** réglages du bouton Envoyer ***/
.frm_style_style-formidable.with_frm_style .frm_submit button {
background-color: transparent !important;
border: 1.25px solid #282828 !important; /* anthracite+foncé */
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
padding: 6px 10px !important;
}
/** on applique le même effet hover (opacité 50%) que sur les liens du site **/
.frm_style_style-formidable.with_frm_style .frm_submit button:hover {
opacity: 0.5 !important;
}
/** pour annuler les valeur par défaut de Formidable **/
.frm_style_style-formidable.with_frm_style .frm_submit button:hover {
background: transparent !important;
border-color: inherit !important;
color: inherit !important;
}
/** on ajoute une margin-left de 18%, pour que ça s'aligne avec les champs de saisie **/
body.page-id-898 button.frm_button_submit {
margin-left: 22.75% !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
body.page-id-898 button.frm_button_submit { /* on enlève la margin-left (vu que l'affichage n'est plus en inline) */
margin-left: 0 !important;
float: right !important;
}
}
/*** réglages du message de succès d'envoi du formulaire ***/
.frm_style_style-formidable.with_frm_style .frm_message, .frm_success_style {
border: none !important;
background-color: transparent !important;
background-image: linear-gradient(90deg,#69c5da 0%,rgba(105,197,218,0) 100%) !important; /* bleu */
color: inherit !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
}
.with_frm_style .frm_error_style, .with_frm_style .frm_message, .frm_success_style {
padding: 1rem !important;
}
.frm_message p {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/*** réglages du message d'erreur ***/
.frm_style_style-formidable.with_frm_style .frm_error {
font-family: hk_groteskmedium, Arial, sans-serif !important;
font-weight: 600 !important;
color: #e74319 !important;
font-size: 0.9rem !important;
line-height: 1.25em !important;
margin-top: 0.5rem !important;
}
.frm_style_style-formidable.with_frm_style .frm_error_style {
font-family: hk_groteskmedium, Arial, sans-serif !important;
font-weight: 600 !important;
background-color: #e74319 !important;
border: 1px solid #e74319;
border-radius: 0px;
color: #fff !important;
font-size: 0.9rem !important;
line-height: 1.25em !important;
margin: 0;
margin-bottom: 20px;
}
.frm_style_style-formidable.with_frm_style .frm_blank_field input[type="text"], .frm_style_style-formidable.with_frm_style .frm_blank_field input[type="password"], .frm_style_style-formidable.with_frm_style .frm_blank_field input[type="url"], .frm_style_style-formidable.with_frm_style .frm_blank_field input[type="tel"], .frm_style_style-formidable.with_frm_style .frm_blank_field input[type="number"], .frm_style_style-formidable.with_frm_style .frm_blank_field input[type="email"], .frm_style_style-formidable.with_frm_style .frm_blank_field textarea, .frm_style_style-formidable.with_frm_style .frm_blank_field .mce-edit-area iframe, .frm_style_style-formidable.with_frm_style .frm_blank_field select, .frm_form_fields_error_style, .frm_style_style-formidable.with_frm_style .frm_blank_field .frm-g-recaptcha iframe, .frm_style_style-formidable.with_frm_style .frm_blank_field .g-recaptcha iframe, .frm_style_style-formidable.with_frm_style .frm_blank_field .frm-card-element.StripeElement, .frm_style_style-formidable.with_frm_style .frm_blank_field .chosen-container-multi .chosen-choices, .frm_style_style-formidable.with_frm_style .frm_blank_field .chosen-container-single .chosen-single, .frm_style_style-formidable.with_frm_style .frm_form_field :invalid {
color: #3c3c3b !important;
background-color: transparent !important;
border-color: #e74319 !important;
border-width: 1px !important;
border-style: solid !important;
}
/*** ------------------------------------------------------------ ***/
/*** 15.11) réglages du formulaire Inscripton ***/
/*** ------------------------------------------------------------ ***/
/*** padding gauche et droite sur les titres de la rootline, pour les forcer à se mettre sur 2 lignes sur l'ordi (plus joli) ***/
@media only screen and (min-width: 981px) { /* bureau */
ul.frm_page_bar li {
padding-left: 35px !important;
padding-right: 35px !important;
}
}
/*** réglages des "blocs" : modules sections + html ***/
/** supprimer le border-top entre les modules sections **/
.frm_style_style-formidable.with_frm_style .frm-show-form .frm_section_heading h3 {
border-top: none !important;
}
/** réglages des modules sections **/
.form-field.formulaire-section-initiation {
background-image: linear-gradient(180deg,#eeaecf 0%,rgba(238,174,207,0) 100%) !important; /* rose */
}
.form-field.formulaire-section-instrument {
background-image: linear-gradient(180deg,#fbef77 0%,rgba(251,239,119,0) 100%) !important; /* jaune */
}
.form-field.formulaire-section-ateliers {
background-image: linear-gradient(180deg,#a4cd84 0%,rgba(164,205,132,0) 100%) !important; /* vert */
}
.form-field.formulaire-section-solfege {
background-image: linear-gradient(180deg,#69c5da 0%,rgba(105,197,218,0) 100%) !important; /* bleu */
}
.form-field.formulaire-section-senior {
background-image: linear-gradient(180deg,rgba(235,237,238,1) 0%, rgba(253,251,251,1) 100%) !important; /* gris perle dégradé 018 Cloudy Knoxville */
}
.form-field.formulaire-section-initiation,
.form-field.formulaire-section-instrument,
.form-field.formulaire-section-ateliers,
.form-field.formulaire-section-solfege,
.form-field.formulaire-section-senior {
margin-bottom: 2rem !important;
padding: 1rem 1rem 3rem 1rem !important;
background-color: transparent !important;
}
@media only screen and (max-width: 767px) { /* smartphone */
.form-field.formulaire-section-initiation,
.form-field.formulaire-section-instrument,
.form-field.formulaire-section-ateliers,
.form-field.formulaire-section-solfege,
.form-field.formulaire-section-senior {
padding: 0.5rem 0.5rem 2rem 0.5rem !important;
}
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
/** passer la section Initiation sur 1 colonne **/
#frm_field_18_container.frm_form_field.frm_two_col .frm_opt_container {
grid-template-columns: 100% !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
/** passer les sections Ateliers et Solfège sur 1 colonne **/
.frm_form_field.frm_two_col .frm_opt_container,
.frm_form_field.frm_three_col .frm_opt_container {
grid-template-columns: 100% !important;
}
}
/** margin à 0 sur le module html **/
.frm_html_container {
margin-bottom: 0px !important;
}
/*** réglage des textes ***/
/** réglage des titres de section (h3), car ça ne prend pas les valeurs normales du h3... faut les redire **/
.frm_section_heading h3 {
padding-top: 0 !important;
font-family: hk_groteskbold, Arial, sans-serif !important;
font-weight: 400 !important;
font-size: 1.125rem !important;
line-height: 1em !important;
color: #3c3c3b !important; /* anthracite */
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
padding-bottom: 10px !important;
}
/** réglages des textes span (jours de semaines etc) **/
#form_inscription-emc span.texte-petit,
#form_inscription-emc span.formulaire-remarque {
font-family: hk_groteskregular, Arial, sans-serif !important;
color: #3c3c3b !important; /* anthracite */
font-size: 0.75em !important; /* 75% du texte "normal" */
line-height: 1.25rem !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
}
#form_inscription-emc span.formulaire-remarque {
text-transform: initial !important;
padding-left: 0.5rem !important;
letter-spacing: 0.075em !important;
}
#form_inscription-emc span.formulaire-remarque:before {
font-family: ETmodules !important;
color: #3c3c3b !important; /* anthracite */
font-size: 0.95em !important; /* 75% du texte "normal" */
line-height: 1.25rem !important;
content: "p";
position: relative !important;
left: -0.5rem;
bottom: 0;
}
#form_inscription-emc span.formulaire-remarque.solfege {padding-left: 0 !important;}
#form_inscription-emc span.formulaire-remarque.solfege:before {display: none;}
#frm_field_252_container.frm_form_field.remarque-solfege {padding-right: 40px !important;}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
#frm_field_252_container.frm_form_field.remarque-solfege {padding-right: 0px !important;}
}
@media only screen and (max-width: 767px) { /* smartphone */
#form_inscription-emc span.texte-petit,
#form_inscription-emc span.formulaire-remarque,
#form_inscription-emc span.formulaire-remarque:before {
line-height: 0.75rem !important;
}
}
/*** réglages spécifiques aux modules "boutons radio" ***/
.radio-button-EMC.inscription > .frm_primary_label {
margin-left: 0px !important;
font-size: 1.25rem !important;
line-height: 1.25rem !important;
text-transform: initial !important;
letter-spacing: 0 !important;
}
.radio-button-EMC.inscription.expmus > .frm_primary_label {
width: 300px !important;
}
@media only screen and (max-width: 980px) { /* tablette */
.radio-button-EMC.inscription > .frm_primary_label {
font-size: 1rem !important;
line-height: 1.5rem !important;
margin-bottom: 0px !important;
}
.radio-button-EMC.inscription.expmus > .frm_primary_label {
width: 220px !important;
}
.radio-button-EMC.inscription > .frm_opt_container {
height: auto !important;
margin-bottom: 0.5rem !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.radio-button-EMC.inscription.expmus > .frm_primary_label {
width: initial !important;
}
}
@media only screen and (min-width: 768px) { /* bureau et tablette */
.radio-button-EMC.inscription br {
display: none !important;
}
}
/*** réglages spécifiques aux modules "cases à cocher" ***/
.frm_style_style-formidable.with_frm_style .frm_checkbox label,
.frm_style_style-formidable.with_frm_style .inscription-liste-1choix .frm_radio label {
font-family: hk_groteskregular, Arial, sans-serif !important;
color: #3c3c3b !important; /* anthracite */
font-size: 1.25rem !important; /* réglages idem p */
line-height: 1.25rem !important;
font-weight: normal !important;
letter-spacing: 0.075em !important;
padding-bottom: 0.75em !important;
}
@media only screen and (max-width: 980px) { /* tablette */
.frm_style_style-formidable.with_frm_style .frm_checkbox label,
.frm_style_style-formidable.with_frm_style .inscription-liste-1choix .frm_radio label {
font-size: 1rem !important;
line-height: 1rem !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.frm_style_style-formidable.with_frm_style .frm_checkbox label,
.frm_style_style-formidable.with_frm_style .inscription-liste-1choix .frm_radio label {
font-size: 0.9rem !important;
line-height: 0.9rem !important;
}
}
/** "transformer" le rond des boutons radio en carrés **/
.with_frm_style .frm_radio input[type="radio"] {
appearance: checkbox !important;
-moz-appearance: checkbox !important;
-webkit-appearance: checkbox !important;
border-radius: 0 !important;
}
/** annuler le
(avant span) sur bureau et tablette **/
.form-field.inscription-liste-initiation .frm_checkbox br,
.form-field.inscription-liste-initiation .frm_radio br,
.frm_section_heading h3 br {
display: none;
}
@media only screen and (max-width: 767px) { /* smartphone */
/*** réactiver le
sur smartphone ***/
.form-field.inscription-liste-initiation .frm_checkbox br,
.form-field.inscription-liste-initiation .frm_radio br,
.frm_section_heading h3 br {
display: inherit;
}
}
.horizontal_radio .frm_checkbox {
margin-right: 5px !important;
}
/** ajouter un padding-bottom pour aérer un peu les listes **/
.form-field .frm_checkbox,
.form-field.inscription-liste-1choix .frm_radio {
padding-bottom: 0.5em !important;
}
/** réglage des jours de semaine (pour indisponibilité) idem que boutons radio **/
#frm_field_97_container .frm_checkbox label {
font-family: hk_groteskmedium, Arial, sans-serif !important;
text-transform: uppercase !important;
color: #3c3c3b !important;
font-size: 0.85rem !important;
line-height: 0.5em !important;
font-weight: 500 !important;
letter-spacing: 0.1em !important;
padding-bottom: 0 !important;
}
/** réglage du bouton "réinitialiser" **/
input.bouton-reset {
background-color: transparent !important;
font-family: hk_groteskregular, Arial, sans-serif !important;
color: #3c3c3b !important; /* anthracite */
font-size: 0.9375rem !important; /* 75% du texte "normal" */
line-height: 1.25rem !important;
letter-spacing: 0.075em !important;
float: left !important;
padding-left: 0.375rem !important;
}
#frm_field_233_container:before,
#frm_field_239_container:before,
#frm_field_377_container:before {
font-family: ETmodules !important;
color: #3c3c3b !important; /* anthracite */
font-size: 0.9375rem !important; /* 75% du texte "normal" */
line-height: 1.25rem !important;
font-weight: bold;
content: "Q";
position: relative !important;
right: 0 !important;
bottom: 0;
float: left !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
input.bouton-reset,
#frm_field_233_container:before,
#frm_field_239_container:before,
#frm_field_377_container:before {
font-size: 0.75rem !important;
line-height: 0.75rem !important;
}
}
/*** réglages spécifiques au module "repeater" (choix Instrument) : largeurs des blocs ***/
.frm_form_field.formulaire-section-instrument .choix-instrument,
.frm_form_field.formulaire-section-instrument .choix-prof {
grid-column: span 6 / span 6 !important;
}
.frm_form_field.formulaire-section-instrument .choix-duree {
grid-column: span 5 / span 5 !important;
}
.frm_form_field.formulaire-section-instrument .ajouter-instrument {
grid-column: span 1 / 13 !important;
}
@media only screen and (max-width: 767px) { /* smartphone */
.frm_form_field.formulaire-section-instrument .choix-instrument,
.frm_form_field.formulaire-section-instrument .choix-prof,
.frm_form_field.formulaire-section-instrument .choix-duree,
.frm_form_field.formulaire-section-instrument .ajouter-instrument {
grid-column: span 12 / span 12 !important;
}
}
/** row d'instruments supplémentaires: les "séparer" par un espace et une ligne **/
.frm_repeat_inline.frm_grid_container:not(.frm_first_repeat) {
margin-top: 1rem !important;
padding-top: 2rem !important;
border-top: 0.25px solid rgba(60, 60, 59, 0.5) !important;
}
/** bloc html "Plusieurs choix possibles" : montrer le premier, mais masquer les suivants **/
#frm_field_70-69-1_container,
#frm_field_70-69-2_container {
display: none !important;
}
/** réglage des pictos + - **/
.frm_icon_font {
margin-right: 1rem !important;
font-size: 1.25rem !important;
line-height: 1em !important;
margin-top: 0.5rem !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
.frm_icon_font {
margin-right: 0.5rem !important;
font-size: 1rem !important;
line-height: 1em !important;
margin-top: 0.75rem !important;
}
}
/** masquer la ligne vide (label) au dessus des pictos **/
.ajouter-instrument label.frm_primary_label {
display: none !important;
}
/** réglages des listes déroulantes : textes et format de la liste **/
.frm_style_style-formidable.with_frm_style select {
font-family: hk_groteskregular, Arial, sans-serif !important;
color: #3c3c3b !important; /* anthracite */
font-size: 1.25rem !important;
line-height: 1.25rem !important;
font-weight: 500 !important;
width: 95% !important;
background-color: rgba(255,255,255,0.75) !important;
height: 2.75rem !important;
border-color: #3c3c3b !important;
-moz-border-radius: 0px !important;
-webkit-border-radius: 0px !important;
border-radius: 0px !important;
box-shadow: none !important;
}
@media only screen and (max-width: 980px) { /* tablette */
.frm_style_style-formidable.with_frm_style select {
font-size: 1rem !important;
line-height: 1rem !important;
height: 2.25rem !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
.frm_style_style-formidable.with_frm_style select {
font-size: 0.9rem !important;
line-height: 0.9rem !important;
height: 2.25rem !important;
}
}
/*** ajouter un peu d'espace entre certains blocs ***/
.espace-apres {margin-bottom: 4rem !important;}
.espace-apres2 {margin-bottom: 3rem !important;}
.espace-apres3 {margin-bottom: 2.5rem !important;}
@media only screen and (max-width: 767px) { /* smartphone */
.espace-apres {margin-bottom: 2rem !important;}
.espace-apres2 {margin-bottom: 1.5rem !important;}
.espace-apres3 {margin-bottom: 1.25rem !important;}
}
/*** réglage des boutons Envoyer + Suivant ***/
body.page-id-1009 .frm_button_submit.frm_final_submit,
body.page-id-1009 .frm_button_submit {
float: right !important;
}
/*** réglage des textes sur la dernières page ***/
span.confirmation-avant-envoi {
font-family: hk_groteskregular, Arial, sans-serif !important;
color: #3c3c3b !important; /* anthracite */
font-size: 1.25rem !important;
font-weight: 500 !important;
line-height: 1.25em !important;
letter-spacing: 0 !important;
-webkit-hyphens: auto;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none; /** césure = non! */
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
span.confirmation-avant-envoi {font-size: 1rem !important;}
}
a.hk_groteskmedium_500 {
font-family: hk_groteskmedium, Arial, sans-serif !important;
font-weight: 500 !important;
color: #3c3c3b !important;
}
/*** réglages pour le bloc "Résumé" sur la dernière page ***/
/** on masque tous les border **/
.frm-summary-page-wrapper th {
display: none !important;
}
.frm-summary-page-wrapper .frm-line-table tr {
border-bottom: none !important;
}
.frm-summary-page-wrapper tr td {
border-top: none !important;
}
/** réduire les margin / padding du bloc Résumé **/
.with_frm_style .frm-summary-page-wrapper {
padding: 1rem !important;
margin: 10px 0 25px !important;
}
/** masquer le titre du bloc Résumé (on ne garde que le titre de la section) **/
#frm_field_186_container h3.frm_pos_.frm_primary_label {
display: none !important;
}
/** ajouter un padding-top aux titres à l'intérieur du bloc Résumé, excepté pour le premier + on désactive les br **/
.frm-summary-page-wrapper table.frm-line-table tr td h3 {
padding-top: 2rem !important;
}
.frm-summary-page-wrapper table.frm-line-table tr:first-child td h3 {
padding-top: 0 !important;
}
.frm-summary-page-wrapper h3 br {
display: none !important;
}
@media only screen and (max-width: 767px) { /* smartphone */
.with_frm_style .frm-summary-page-wrapper .frm-edit-page-btn {
margin-bottom: 1.25rem !important;
}
}
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/***** ------------------- 16) réglages d'éléments spéciaux (utilisés sur plusieurs pages) ------------------- *****/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ------------------------------------------------------------ ***/
/*** 16.1) réglages des posts Custom Post Type que j'ai créés (pour les pages de chaque Prof et de chaque Cours) ***/
/*** ------------------------------------------------------------ ***/
/** je sais pas pourquoi, le réglage par défaut de DIVI est à width 80%, et ça fout la merde... donc on le remet à 100% / ainsi la largeur des section est à 100% aussi, et c'est sur les row qu'on applique width: 90%; max-width: 1080px; **/
#main-content .container {
width: 100% !important;
max-width: 100%;
padding-top: 0;
}
/** on masque le "titre de l'article", et on le rajouter manuellement avec un module texte, pour plus de maitrise... (surtout qu'en le laissant, ça fait vraiment une mise en page de merde ^^) **/
/** et en plus, ça permet de mettre un titre (dans le content) différent du titre de page... par exemple: page "Cours de guitare", on peut juste mettre "Guitare" comme titre dans le content, mais "Cours de guitare" comme titre de page, ainsi, dans les fiches profs, quand on montre quels cours ils donnent, ce sera écrit "Cours de guitare" et pas "Guitare"... ça peut être pas mal... non en fait ça sert à rien - cf les maquettes de Kim ^^ **/
.et_post_meta_wrapper {
display: none !important;
}
/** pour annuler la valeur par défaut de DIVI (58px) **/
body:not(.et-tb) #main-content .container, body:not(.et-tb-has-header) #main-content .container {
padding-top: 0px !important;
}
/*** ------------------------------------------------------------ ***/
/*** 16.2) réglages des fonds dégradés dans les pages Cours>Initiation/Instruments/Atelier/Solfège (2e niveau)
* et dans chaque page de Cours (3e niveau) ***/
/*** ------------------------------------------------------------ ***/
article#post-1051,
body:not(.page-id-1051) .type-cours.et_pb_post.type-cours.category-cours-initiation {
background-image: linear-gradient(180deg,#eeaecf 0%,rgba(238,174,207,0) 100%) !important; /* dégradé rose */
}
article#post-1046,
body:not(.page-id-1046) .type-cours.et_pb_post.type-cours.category-cours-instruments {
background-image: linear-gradient(180deg,#fbef77 0%,rgba(251,239,119,0) 100%) !important; /* dégradé jaune */
}
article#post-1054,
body:not(.page-id-1054) .type-cours.et_pb_post.type-cours.category-cours-les-ateliers {
background-image: linear-gradient(180deg,#a4cd84 0%,rgba(164,205,132,0) 100%) !important; /* dégradé vert */
}
article#post-234423,
body:not(.page-id-234423) .type-cours.et_pb_post.type-cours.category-cours-solfege {
background-image: linear-gradient(180deg,#69c5da 0%,rgba(105,197,218,0) 100%) !important; /* dégradé bleu */
}
/* article#post-241224, page Senior (niveau 2) N'EXISTE PAS */
body:not(.page-id-241224) .type-cours.et_pb_post.type-cours.category-cours-senior {
background-image: linear-gradient(180deg,#ebedee 0%,rgba(253,251,251,0) 100%) !important; /* dégradé gris perle 018 Cloudy Knoxville */
}
article#post-1051, /* page Initiation (niveau 2) */
article#post-1046, /* page Instruments (niveau 2) */
article#post-1054, /* page Ateliers (niveau 2) */
article#post-234423, /* page Solfège (niveau 2) */
/* article#post-241224, page Senior (niveau 2) N'EXISTE PAS */
body:not(.page-id-1051) .type-cours.et_pb_post.type-cours.category-cours-initiation, /* pages Initiation > XXX (niveau 3) */
body:not(.page-id-1046) .type-cours.et_pb_post.type-cours.category-cours-instruments, /* pages Instruments > XXX (niveau 3) */
body:not(.page-id-1054) .type-cours.et_pb_post.type-cours.category-cours-les-ateliers, /* pages Ateliers > XXX (niveau 3) */
body:not(.page-id-234423) .type-cours.et_pb_post.type-cours.category-cours-solfege, /* pages Solfège > XXX (niveau 3) */
body:not(.page-id-241224) .type-cours.et_pb_post.type-cours.category-cours-senior { /* pages Senior > XXX (niveau 3) */
width: 90% !important;
max-width: 1080px !important;
height: 720px !important;
margin: auto !important;
}
article#post-1051 .et_pb_row,
article#post-1046 .et_pb_row,
article#post-1054 .et_pb_row,
article#post-234423 .et_pb_row,
article#post-241224 .et_pb_row,
body:not(.page-id-1051) .type-cours.et_pb_post.type-cours.category-cours-initiation .et_pb_row,
body:not(.page-id-1046) .type-cours.et_pb_post.type-cours.category-cours-instruments .et_pb_row,
body:not(.page-id-1054) .type-cours.et_pb_post.type-cours.category-cours-les-ateliers .et_pb_row,
body:not(.page-id-234423) .type-cours.et_pb_post.type-cours.category-cours-solfege .et_pb_row,
body:not(.page-id-241224) .type-cours.et_pb_post.type-cours.category-cours-senior .et_pb_row {
width: 100% !important;
}
@media only screen and (max-width: 980px) { /* tablette */
article#post-1051,
article#post-1046,
article#post-1054,
article#post-234423,
article#post-241224,
body:not(.page-id-1051) .type-cours.et_pb_post.type-cours.category-cours-initiation,
body:not(.page-id-1046) .type-cours.et_pb_post.type-cours.category-cours-instruments,
body:not(.page-id-1054) .type-cours.et_pb_post.type-cours.category-cours-les-ateliers,
body:not(.page-id-234423) .type-cours.et_pb_post.type-cours.category-cours-solfege,
body:not(.page-id-241224) .type-cours.et_pb_post.type-cours.category-cours-senior {
max-width: none !important;
height: 550px !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
article#post-1051,
article#post-1046,
article#post-1054,
article#post-234423,
article#post-241224,
body:not(.page-id-1051) .type-cours.et_pb_post.type-cours.category-cours-initiation,
body:not(.page-id-1046) .type-cours.et_pb_post.type-cours.category-cours-instruments,
body:not(.page-id-1054) .type-cours.et_pb_post.type-cours.category-cours-les-ateliers,
body:not(.page-id-234423) .type-cours.et_pb_post.type-cours.category-cours-solfege,
body:not(.page-id-241224) .type-cours.et_pb_post.type-cours.category-cours-senior {
max-width: none !important;
height: 400px !important;
}
}
/*** ------------------------------------------------------------ ***/
/*** 16.3) réglages des sigles de couleur dans les pages Cours>Initiation/Instruments/Atelier/Solfège (2e niveau)
* et dans chaque page de Cours (3e niveau)
* source: https://www.elegantthemes.com/blog/divi-resources/how-to-style-and-position-images-in-abstract-places-in-divi */
/*** ------------------------------------------------------------ ***/
/*** hauteur de la section, de la row et de la colonne qui contiennent le sigle de couleur à 0px, pour pas que ça crée un espace inutile entre le chemin d'accès et le titre de la page
* + padding à 0 (sinon on a 2 portées latérales qui se chevauchent!) ***/
#section-sigle-couleur.et_pb_section,
#section-sigle-couleur.et_pb_section .et_pb_row,
#section-sigle-couleur.et_pb_section .et_pb_row .et_pb_column {
height: 0px !important;
padding-bottom: 0px !important;
}
/*** passer les sections contenant des sigles de couleur en z-index -100 (pour qu'elles soient sous toutes autres sections) ***/
#section-sigle-couleur.et_pb_section {
z-index: -100 !important;
}
/*** sigle rose - page Cours > Initiation ***/
#section-sigle-couleur.et_pb_section .et_pb_image.sigle-rose {
max-width: 50% !important;
transform: scaleX(0.9) scaleY(0.9) translateX(169.5%) translateY(14%) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
text-align: left !important;
margin-left: 0 !important;
z-index: -1 !important;
opacity: 0.85 !important;
}
/*** sigle jaune - page Cours > Instruments ***/
#section-sigle-couleur.et_pb_section .et_pb_image.sigle-jaune {
max-width: 50% !important;
transform: scaleX(1.4848) scaleY(1.4848) translateX(131.5%) translateY(13%) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
text-align: left !important;
margin-left: 0 !important;
z-index: -1 !important;
opacity: 0.55 !important;
}
/*** sigle vert - page Cours > Ateliers ***/
#section-sigle-couleur.et_pb_section .et_pb_image.sigle-vert {
max-width: 50% !important;
transform: scaleX(1.5484) scaleY(1.5484) translateX(90.5%) translateY(14.5%) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
text-align: left !important;
margin-left: 0 !important;
z-index: -1 !important;
opacity: 0.75 !important;
}
/*** sigle bleu - page Cours > Solfège ***/
#section-sigle-couleur.et_pb_section .et_pb_image.sigle-bleu {
max-width: 50% !important;
transform: scaleX(1.4848) scaleY(1.4848) translateX(131.5%) translateY(13%) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
text-align: left !important;
margin-left: 0 !important;
z-index: -1 !important;
opacity: 0.75 !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
#section-sigle-couleur.et_pb_section .et_pb_image.sigle-bleu {
transform: scaleX(1.4848) scaleY(1.4848) translateX(91.5%) translateY(33%) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
}
}
/*** sigle gris - page Professeurs > nom du professeur ***/
@media only screen and (min-width: 981px) { /* bureau */
/** sigle gris BUREAU - taille et positionnement + tous les autres réglages **/
#section-sigle-couleur.et_pb_section .et_pb_image.sigle-gris {
max-width: 75% !important;
transform: scaleX(1.0323) scaleY(1.0323) translateX(-44.5%) translateY(-67%) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
text-align: left !important;
margin-left: 0 !important;
z-index: -1 !important;
opacity: 0.55 !important;
margin-bottom: -700px !important;
}
/** colonne gauche (qui contient titre + bio + "lire plus") : padding-bottom à 8rem, pour faire de la place pour le sigle **/
.et_pb_section .et_pb_row #col-gauche-prof.et_pb_column {
padding-bottom: 8rem !important;
}
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
/** sigle gris TABLETTE - taille et positionnement **/
#section-sigle-couleur.et_pb_section .et_pb_image.sigle-gris {
max-width: 50% !important;
transform: scaleX(1.4778) scaleY(1.4778) translateX(-113%) translateY(-29.5%) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
opacity: 0.75 !important;
}
/** sur tablette: colonne droite (photo + Expertise + Liens) : on met une min-height=438px, comme ça même s'il y a moins de contenu dans la "colonne" Expertise + Liens, le sigle est tout de même positionné correctement (ça fait un espace blanc sous le bloc Liens, mais c'est pas grave) **/
.et_pb_section .et_pb_row #col-droite-prof.et_pb_column {
min-height: 438px !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
/** sigle gris SMARTPHONE - taille et positionnement **/
#section-sigle-couleur.et_pb_section .et_pb_image.sigle-gris {
transform: scaleX(2.0778) scaleY(2.0778) translateX(-80.5%) translateY(-192%) rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
}
/** sur smartphone: min-height colonne droite (photo + Expertise + Liens) = 740px **/
.et_pb_section .et_pb_row #col-droite-prof.et_pb_column {
min-height: 740px !important;
}
}
/*** ------------------------------------------------------------ ***/
/*** 16.4) réglages de la section contenant le lien vers le post suivant/précédent (shortcode) ***/
/*** ------------------------------------------------------------ ***/
p.lien-post-precedent,
p.lien-post-precedent span,
p.lien-post-suivant,
p.lien-post-suivant span {
text-transform: uppercase;
font-size: 0.875rem !important;
line-height: 1rem !important;
text-align: left !important;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none; /** césure = non! */
}
p.lien-post-suivant,
p.lien-post-suivant span {
text-align: right !important;
}
p.lien-post-precedent span,
p.lien-post-suivant span {
font-size: 1rem !important;
}
p.lien-post-precedent span.desXans,
p.lien-post-suivant span.desXans {
font-size: 0.875rem !important;
text-transform: initial;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
p.lien-post-precedent,
p.lien-post-suivant,
p.lien-post-precedent span.desXans,
p.lien-post-suivant span.desXans {
font-size: 0.7rem !important;
}
}
@media only screen and (max-width: 767px) { /* smartphone */
p.lien-post-precedent span,
p.lien-post-suivant span {
font-size: 0.7rem !important;
display: inline-block;
position: relative;
height: 0;
vertical-align: baseline;
bottom: 0.125em; /* la distance entre la baseline et l'exposant */
}
}
/** on enlève la balise , pour que les noms des profs s'affichent sur une ligne **/
p.lien-post-precedent br,
p.lien-post-suivant br {
display: none !important;
}
/*** forcer les 2 colonnes à rester en 2 colonnes, y compris sur tablette et smartphone ***/
#section-lien-post-suivant.et_pb_section .et_pb_row .et_pb_column_1_2 {
width: 49% !important;
margin-right: 2% !important;
}
#section-lien-post-suivant.et_pb_section .et_pb_row .et_pb_column_1_2.et-last-child {
margin-right: 0 !important;
}
/*** hauteur de la section, de la row et de la colonne qui contiennent ces liens à 1rem (équivalent line-height), pour pas que ça crée trop d'espace entre le bas de la page "normal" et le footer
* + padding à 0 (sinon on a 2 portées latérales qui se chevauchent!) ***/
#section-lien-post-suivant.et_pb_section,
#section-lien-post-suivant.et_pb_section .et_pb_row,
#section-lien-post-suivant.et_pb_section .et_pb_row .et_pb_column {
height: 1rem !important;
padding-bottom: 0px !important;
}
/** on positionne le module Code en relative / top -2.5rem, pour le centrer plus ou moins dans l'espace blanc du bas de la page **/
#section-lien-post-suivant.et_pb_section .et_pb_row .et_pb_column .et_pb_code {
position: relative !important;
top: -2.5rem !important;
}
/*** ------------------------------------------------------------ ***/
/*** 16.5) gestion du CSS pour les textes rognés ***/
/*** ------------------------------------------------------------ ***/
#texte-reduit-SM p,
#texte-reduit-LG p,
#texte-reduit-XL p {
font-size: 1.25rem !important;
line-height: 1.25em !important;
}
#texte-reduit-SM,
#texte-reduit-LG,
#texte-reduit-XL {
font-size: 1.25rem !important; /* il faut respécifier la font-size, sinon les valeurs ci-dessous (max-height / margin-bottom) n'ont pas de "référence" */
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 1.25em !important; /* on ajoute une margin-bottom à cette div, équivalente au padding-bottom du texte contenu dans cette div, car sinon le bouton "lire plus" est collé à la div #texte-reduit (vu qu'on limite sa max-height, du coup la div suivante est direct après, sans marge) */
}
#texte-reduit-SM { /*** réglages des textes rognés après 4 lignes (#texte-reduit-SM) ***/
max-height: 5em; /* 5 = 1.25 (line-height) x 4 (lignes de texte) */
}
#texte-reduit-LG { /*** réglages des textes rognés après 8 lignes (#texte-reduit-LG) ***/
max-height: 10em; /* 10 = 1.25 (line-height) x 8 (lignes de texte) */
}
#texte-reduit-XL { /*** réglages des textes rognés après 11 lignes (#texte-reduit-XL) ***/
max-height: 13.75em; /* 13.75 = 1.25 (line-height) x 11 (lignes de texte) */
}
.ouverture-SM,
.ouverture-LG,
.ouverture-XL { /* class créée spécialement pour la fonction onclick sur le bouton "lire plus" */
max-height:none !important; /* ici on supprime la valeur de la max-height définie dans #texte-reduit */
}
.ouverture-SM p:last-child,
.ouverture-LG p:last-child,
.ouverture-XL p:last-child {
padding-bottom: 0px !important; /* on met un padding-bottom (de la div #texte-reduit en mode "ouverture") à zéro, sinon il y a le padding-bottom du texte contenu dans cette div qui s'ajoute à la margin-bottom de #texte-reduit-XX, et ça "crée trop d'espace" entre la div #texte-reduit et la div #bouton-lire-plus */
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
#texte-reduit-SM p,
#texte-reduit-LG p,
#texte-reduit-XL p {
font-size: 1rem !important;
}
#texte-reduit-SM,
#texte-reduit-LG,
#texte-reduit-XL {
font-size: 1rem !important;
}
}
@media only screen and (min-width: 981px) { /* bureau */
#texte-reduit-LG.bio-prof{
max-height:none !important; /* ici on supprime la valeur de la max-height définie dans #texte-reduit-LG, pour que la bio prof ne soit pas rognée sur ordi */
margin-bottom: 0 !important;
}
}
/*** réglages du lien "Lire plus" (SM + LG + XL) ***/
#bouton-lire-plus-SM,
#bouton-lire-moins-SM,
#bouton-lire-plus-LG,
#bouton-lire-moins-LG,
#bouton-lire-plus-XL,
#bouton-lire-moins-XL {
float: right !important;
}
.etiquette-lire-plus-cours .et_pb_code_inner #bouton-lire-plus-SM,
.etiquette-lire-moins-cours .et_pb_code_inner #bouton-lire-moins-SM,
.etiquette-lire-plus-cours .et_pb_code_inner #bouton-lire-plus-LG,
.etiquette-lire-moins-cours .et_pb_code_inner #bouton-lire-moins-LG,
.etiquette-lire-plus-cours .et_pb_code_inner #bouton-lire-plus-XL,
.etiquette-lire-moins-cours .et_pb_code_inner #bouton-lire-moins-XL {
margin-bottom: 1rem !important;
}
#colonne-texte-reduit.et_pb_column {
margin-bottom: 30px !important;
}
#bouton-lire-plus-SM a,
#bouton-lire-moins-SM a,
#bouton-lire-plus-LG a,
#bouton-lire-moins-LG a,
#bouton-lire-plus-XL a,
#bouton-lire-moins-XL a {
padding: 0px 24px 0px 0px !important;
color: #3c3c3b !important; /* anthracite */
font-size: 1rem !important;
font-weight: 500 !important;
line-height: 1.25em !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
#bouton-lire-plus-SM a:after,
#bouton-lire-plus-LG a:after,
#bouton-lire-plus-XL a:after {
position: absolute;
top: 0;
right: 0;
font-family: ETmodules;
font-size: 1.5rem;
font-weight: 500;
content: "3"; /* triangle vers le bas */
}
#bouton-lire-moins-SM a:after,
#bouton-lire-moins-LG a:after,
#bouton-lire-moins-XL a:after {
position: absolute;
top: 0;
right: 0;
font-family: ETmodules;
font-size: 1.5rem;
font-weight: 500;
content: "2"; /* triangle vers le haut */
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
#bouton-lire-plus-SM a,
#bouton-lire-moins-SM a,
#bouton-lire-plus-LG a,
#bouton-lire-moins-LG a,
#bouton-lire-plus-XL a,
#bouton-lire-moins-XL a {
font-size: 0.875rem !important;
}
#bouton-lire-plus-SM a:after,
#bouton-lire-moins-SM a:after,
#bouton-lire-plus-LG a:after,
#bouton-lire-moins-LG a:after,
#bouton-lire-plus-XL a:after,
#bouton-lire-moins-XL a:after {
font-size: 1.3125rem;
top: 1.5px;
}
}
/*** ------------------------------------------------------------ ***/
/*** 16.6) gestion du bloc Contactez-nous! ***/
/*** ------------------------------------------------------------ ***/
#contactez-nous.et_pb_row {
background-color: #000000 !important; /* noir */
padding-bottom: 0 !important; /* pour annuler le padding-bottom de base qu'il y a dans toutes les autres row */
padding-top: 0 !important;
}
#contactez-nous.et_pb_row .contactez-nous p.contactez-nous {
font-family: Baskerville, "Times New Roman", serif !important;
font-size: 1.317rem !important;
font-weight: 500 !important;
letter-spacing: 0.04em !important; /* correspond à un interlettrage de 40 sur InDesign */
color: #ffffff !important; /* blanc */
text-transform: uppercase;
text-align: center !important;
padding: 0.1em 0 !important;
}
#contactez-nous.et_pb_row .contactez-nous-home p.contactez-nous-home {
font-family: Baskerville, "Times New Roman", serif !important;
font-size: 2.9rem !important;
letter-spacing: 0.04em !important; /* correspond à un interlettrage de 40 sur InDesign */
color: #ffffff !important;
text-transform: uppercase;
text-align: center !important;
padding: 0.1em 0 !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
#contactez-nous.et_pb_row .contactez-nous p.contactez-nous {
font-size: 1.2675rem !important;
}
#contactez-nous.et_pb_row .contactez-nous-home p.contactez-nous-home {
font-size: 2rem !important;
}
#contactez-nous.et_pb_row .et_pb_column {
margin-bottom: 0 !important;
}
}
#contactez-nous.et_pb_row .contactez-nous a,
#contactez-nous.et_pb_row .contactez-nous-home a {
color: #ffffff !important; /* blanc */
text-decoration: none !important;
}
#contactez-nous.et_pb_row .contactez-nous a:hover,
#contactez-nous.et_pb_row .contactez-nous-home a:hover {
color: #ffffff !important; /* blanc */
text-decoration: none !important;
font-weight: inherit !important;
}
/*** ------------------------------------------------------------ ***/
/*** 16.7) pour les pages "résultats de recherche" et "Cours 3e niveau" :
* réglages pour que la largeur de la portée (contour photos profs) soit plus ou moins équivalente à la largeur des portées sur les bords du site...
* pour l'affichage bureau et tablette :
* on remplace l'image à la une (la même que l'image utilisée dans les pages de chaque prof) par une background-image avec un autre ratio photo-cadre... c'est pas parfait, mais c'est pas mal! ***/
/*** ------------------------------------------------------------ ***/
/* on remplace chaque feature_image (qu'on met en opacité 0, voir ci-dessous) par une background-image contenant la version desktop de la photo du prof */
@media only screen and (min-width: 768px) { /* bureau et tablette */
body.search #post-230806.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230806 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/alexandre_sassolas_desktop.png") !important; /* Alexandre Sassolas */
}
body.search #post-230807.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230807 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/andrea_baggi_desktop.png") !important; /* Andrea Baggi */
}
body.search #post-230808.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230808 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/anne_sylvie_schmid_desktop.png") !important; /* Anne-Sylvie Schmid */
}
body.search #post-230809.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230809 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/anne_therese_bieri_desktop.png") !important; /* Anne-Thérèse Bieri */
}
body.search #post-230810.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230810 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/blaise_ubaldini_desktop.png") !important; /* Blaise Ubaldini */
}
body.search #post-230811.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230811 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/davide_montagne_desktop.png") !important; /* Davide Montagne */
}
body.search #post-230812.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230812 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/elodie_wulliens_desktop.png") !important; /* Elodie Wulliens */
}
body.search #post-230813.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230813 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/emilie_fournier_desktop.png") !important; /* Emilie Fournier */
}
body.search #post-230814.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230814 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/eran_levi_desktop.png") !important; /* Eran Levi */
}
body.search #post-230815.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230815 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/florine_juvet_desktop.png") !important; /* Florine Juvet */
}
body.search #post-230816.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230816 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/francois_margot_desktop.png") !important; /* François Margot */
}
body.search #post-230817.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230817 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/gustavo_murillo_desktop.png") !important; /* Gustavo Murillo */
}
body.search #post-229968.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-229968 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/guy_francois_leuenberger_desktop.png") !important; /* Guy-François Leuenberger */
}
body.search #post-230818.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230818 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/jacques_saugy_desktop.png") !important; /* Jacques Saugy */
}
body.search #post-230819.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230819 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/jacques_andre_rime_desktop.png") !important; /* Jacques-André Rime */
}
body.search #post-230820.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230820 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/jean_philippe_iracane_desktop.png") !important; /* Jean-Philippe Iracane */
}
body.search #post-230821.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230821 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/jeremie_stricker_desktop.png") !important; /* Jérémie Stricker */
}
body.search #post-230410.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230410 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/joelle_aurelie_masson_desktop.png") !important; /* Joëlle-Aurélie Masson-Mayor */
}
body.search #post-230822.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230822 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/johan_smith_desktop.png") !important; /* Johan Smith */
}
body.search #post-230823.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230823 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/lucas_buclin_desktop.png") !important; /* Lucas Buclin */
}
body.search #post-230824.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230824 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/madeleine_boyer_murray_desktop.png") !important; /* Madeleine Murray-Robertson */
}
body.search #post-230825.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230825 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/magali_ibram_desktop.png") !important; /* Magali Ibram */
}
body.search #post-230826.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230826 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/marc_jufer_desktop.png") !important; /* Marc Jufer */
}
body.search #post-230411.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230411 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/marie_helene_essade_desktop.png") !important; /* Marie-Hélène Essade Mariaux */
}
body.search #post-230827.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230827 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/marie_luce_raposo_desktop.png") !important; /* Marie-Luce Raposo-Challet */
}
body.search #post-230828.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230828 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/marylene_muller_desktop.png") !important; /* Marylène Müller */
}
body.search #post-230829.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230829 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/nathalie_erbeau_desktop.png") !important; /* Nathalie Erbeau */
}
body.search #post-230830.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230830 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/nicole_chanson_desktop.png") !important; /* Nicole Chanson */
}
body.search #post-230831.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230831 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/pascal_cassoli_desktop.png") !important; /* Pascal Cassoli */
}
body.search #post-230832.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230832 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/rachel_clerc_desktop.png") !important; /* Rachel Clerc */
}
body.search #post-230833.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230833 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/tania_mazzucchelli_desktop.png") !important; /* Tania Mazzucchelli */
}
body.search #post-230834.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230834 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/vinciane_noir_desktop.png") !important; /* Vinciane Noir */
}
body.search #post-230835.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230835 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/03/zoran_kazakov_desktop.png") !important; /* Zoran Kazakov */
}
body.search #post-234763.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-234763 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/04/noemie_de_rham_desktop.png") !important; /* Noémie de Rham */
}
body.search #post-234771.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-234771 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/04/tristan_moreau_desktop.png") !important; /* Tristan Moreau */
}
body.search #post-234773.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-234773 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2020/04/jean_yves_zwahlen_desktop.png") !important; /* Jean-Yves Zwahlen */
}
body.search #post-237533.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-237533 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2021/03/carine_delpierre_desktop.png") !important; /* Carine Delpierre */
}
body.search #post-237540.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-237540 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2021/03/guilhem_mainier_desktop.png") !important; /* Guilhem Maynier */
}
body.search #post-236624.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-236624 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2021/02/corentin_brandet_desktop.png") !important; /* Corentin Brandet */
}
body.search #post-240944.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-240944 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2019/12/anna_benzakoun_desktop.png") !important; /* Anna Benzakoun */
}
body.search #post-240961.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-240961 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2019/12/merlijn_breij_desktop.png") !important; /* Merlijn Breij */
}
body.search #post-240965.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-240965 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2019/12/samuel_favez_desktop.png") !important; /* Samuel Favez */
}
body.search #post-242084.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-242084 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2023/05/benjamin_monney_desktop.png") !important; /* Benjamin Monney */
}
body.search #post-240967.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-240967 .entry-featured-image-url { /* pages de Cours 3e niveau */
background-image: url("/wp-content/uploads/2019/12/emilie_mory_desktop.png") !important; /* Emilie Mory */
}
body.search #post-230806.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230806 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Alexandre Sassolas */
body.search #post-230807.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230807 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Andrea Baggi */
body.search #post-230808.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230808 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Anne-Sylvie Schmid */
body.search #post-230809.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230809 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Anne-Thérèse Bieri */
body.search #post-230810.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230810 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Blaise Ubaldini */
body.search #post-230811.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230811 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Davide Montagne */
body.search #post-230812.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230812 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Elodie Wulliens */
body.search #post-230813.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230813 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Emilie Fournier */
body.search #post-230814.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230814 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Eran Levi */
body.search #post-230815.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230815 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Florine Juvet */
body.search #post-230816.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230816 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* François Margot */
body.search #post-230817.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230817 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Gustavo Murillo */
body.search #post-229968.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-229968 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Guy-François Leuenberger */
body.search #post-230818.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230818 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Jacques Saugy */
body.search #post-230819.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230819 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Jacques-André Rime */
body.search #post-230820.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230820 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Jean-Philippe Iracane */
body.search #post-230821.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230821 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Jérémie Stricker */
body.search #post-230410.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230410 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Joëlle-Aurélie Masson-Mayor */
body.search #post-230822.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230822 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Johan Smith */
body.search #post-230823.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230823 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Lucas Buclin */
body.search #post-230824.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230824 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Madeleine Murray-Robertson */
body.search #post-230825.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230825 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Magali Ibram */
body.search #post-230826.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230826 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Marc Jufer */
body.search #post-230411.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230411 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Marie-Hélène Essade Mariaux */
body.search #post-230827.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230827 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Marie-Luce Raposo-Challet */
body.search #post-230828.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230828 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Marylène Müller */
body.search #post-230829.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230829 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Nathalie Erbeau */
body.search #post-230830.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230830 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Nicole Chanson */
body.search #post-230831.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230831 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Pascal Cassoli */
body.search #post-230832.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230832 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Rachel Clerc */
body.search #post-230833.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230833 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Tania Mazzucchelli */
body.search #post-230834.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230834 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Vinciane Noir */
body.search #post-230835.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-230835 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Zoran Kazakov */
body.search #post-234763.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-234763 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Noémie de Rham */
body.search #post-234771.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-234771 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Tristan Moreau */
body.search #post-234773.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-234773 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Jean-Yves Zwahlen */
body.search #post-237533.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-237533 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Carine Delpierre */
body.search #post-237540.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-237540 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Guilhem Maynier */
body.search #post-236624.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-236624 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Corentin Brandet */
body.search #post-240944.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-240944 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Anna Benzakoun */
body.search #post-240961.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-240961 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Merlijn Breij */
body.search #post-240965.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-240965 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Samuel Favez */
body.search #post-242084.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-242084 .entry-featured-image-url, /* pages de Cours 3e niveau */ /* Benjamin Monney */
body.search #post-240967.et_pb_post a.entry-featured-image-url, /* page résultats de recherche */
body.single-cours #post-240967 .entry-featured-image-url { /* pages de Cours 3e niveau */ /* Emilie Mory */
background-origin: content-box !important;
background-position: bottom !important;
background-repeat: no-repeat !important;
background-size: 100% !important;
}
/* pas besoin de spécifier l'ID du post (#post-230806, #post-230807, etc), on "efface" toutes les images d'un coup */
body.search .et_pb_post.type-professeur img, /* page résultats de recherche */
body.single-cours.et-db #et-boc .et-l .et_pb_post a img { /* pages de Cours 3e niveau */
opacity: 0 !important;
}
}
/* on remplace chaque feature_image (qu'on met en opacité 0, voir ci-dessous) par une background-image contenant la version desktop de la photo du cours Initiation */
@media only screen and (min-width: 768px) { /* bureau et tablette */
body.search #post-242095.et_pb_post a.entry-featured-image-url {
background-image: url("/wp-content/uploads/2023/05/Graines_de_chansons_desktop.png") !important; /* Graines de chansons */
}
body.search #post-230459.et_pb_post a.entry-featured-image-url {
background-image: url("/wp-content/uploads/2020/04/Jardin_des_chansons_desktop.png") !important; /* Jardin des chansons */
}
body.search #post-230456.et_pb_post a.entry-featured-image-url {
background-image: url("/wp-content/uploads/2020/04/Rythmique_Jaques_Dalcroze_desktop.png") !important; /* Rythmique Jaques-Dalcroze */
}
body.search #post-230458.et_pb_post a.entry-featured-image-url {
background-image: url("/wp-content/uploads/2020/04/Initiation_musicale_Willems_desktop.png") !important; /* Initiation musicale Willems */
}
body.search #post-230460.et_pb_post a.entry-featured-image-url {
background-image: url("/wp-content/uploads/2020/04/Preparation_a_l_instrument_desktop.png") !important; /* Préparation à l'instrument */
}
body.search #post-242149.et_pb_post a.entry-featured-image-url {
background-image: url("/wp-content/uploads/2020/01/violon_650px.png") !important; /* Violon Suzuki - initiation */
}
body.search #post-241224.et_pb_post a.entry-featured-image-url {
background-image: url("/wp-content/uploads/2022/11/Rythmique_seniors_desktop.png") !important; /* Rythmique senior 65+ */
}
body.search #post-242095.et_pb_post a.entry-featured-image-url,
body.search #post-230459.et_pb_post a.entry-featured-image-url,
body.search #post-230456.et_pb_post a.entry-featured-image-url,
body.search #post-230458.et_pb_post a.entry-featured-image-url,
body.search #post-230460.et_pb_post a.entry-featured-image-url,
body.search #post-242149.et_pb_post a.entry-featured-image-url,
body.search #post-241224.et_pb_post a.entry-featured-image-url {
background-origin: content-box !important;
background-position: bottom !important;
background-repeat: no-repeat !important;
background-size: 100% !important;
}
/* pas besoin de spécifier l'ID du post (#post-230459, #post-230456, etc), on "efface" toutes les images d'un coup */
body.search .et_pb_post.type-cours.tag-initiation img {
opacity: 0 !important;
}
}
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/***** 17) réglages des pages Mentions légales (id-229606) + Conditions générales (id-229608) + Confidentialité (id-229611) *****/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** réglages des titres h3 ***/
.page-id-229606 h3,
.page-id-229608 h3,
.page-id-229611 h3 {
margin-top: 1.5rem !important;
}
/*** réglages des textes ***/
.page-id-229606 p,
.page-id-229608 p,
.page-id-229611 p {
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none; /** césure = non */
}
/* réglages ligne hr insérée en bas des pages Politique de confidentialité + Mentions légales */
hr.ligne-pdc-ml {
border: 0.25px solid rgba(135, 135, 135, 0.34) !important;
margin-bottom: 0.25rem;
}
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/***** -------------------------- 18) réglages de la page Professeurs - Accès privé -------------------------- *****/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** ---------------------------------------------------------------------------------------------------------- ***/
/*** réglages de la row dans la page de connexion (où on entre le mot de passe) ***/
.post-password-required .et_pb_row,
.post-password-required p.nocomments.container {
width: 90% !important;
position: relative !important;
max-width: 1080px !important;
margin: auto !important;
height: 100vh !important; /* pour "remplir" la page sur la hauteur */
}
/** dans cette page: masquer le vide qu'il y a à la fin (et qui crée un espace en bas de page) **/
body.page-id-229614:not(.logged-in) .et_pb_section p:last-child {
display: none !important;
}
/*** réglages des h1 ***/
#titre-acces-prive {
padding-bottom: 1.5rem !important;
}
/*** réglages des h3 ***/
body.page-id-229614 h3 {
text-align: center !important;
}
/*** réglages des listes à puces (ul) ***/
.et_pb_module.liste-doc-prive-centree ul,
.et_pb_module.liste-doc-prive-col-gauche ul,
.et_pb_module.liste-doc-prive-col-centre ul,
.et_pb_module.liste-doc-prive-col-droite ul {
color: #3c3c3b !important; /* anthracite */
font-size: 1.25rem !important;
font-weight: 500 !important;
line-height: 1.25em !important;
padding-bottom: 1.25em !important;
list-style-type: none !important;
padding-left: 0 !important;
text-align: center !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
#titre-acces-prive {
padding-bottom: 1rem !important;
}
body.page-id-229614 #docs-fem .et_pb_column,
body.page-id-229614 #docs-fem .et_pb_column .et_pb_module,
body.page-id-229614 #docs-fem .et_pb_column .et_pb_module ul {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
body.page-id-229614 .et_pb_module ul {
font-size: 1rem !important;
}
}
body.page-id-229614 .et_pb_module.tableau-sous-etiquette-horaires {
position: relative !important;
top: 48px;
margin-bottom: 4rem !important;
}
body.page-id-229614 .et_pb_module.tableau-sous-etiquette-horaires.agenda {
position: relative !important;
top: 36px;
margin-bottom: 6rem !important;
}
@media only screen and (max-width: 980px) { /* tablette et smartphone */
body.page-id-229614 .et_pb_module.tableau-sous-etiquette-horaires {
top: 36px;
margin-bottom: 2rem !important;
}
body.page-id-229614 .et_pb_module.tableau-sous-etiquette-horaires.fem {
top: 36px;
margin-bottom: 2rem !important;
margin-top: -3rem !important;
}
body.page-id-229614 .et_pb_module.tableau-sous-etiquette-horaires.agenda {
top: 24px;
margin-bottom: 3rem !important;
}
}
/* page "printscreen" report bug Ivory - à effacer quand ce sera résolu */
body.page-id-234439 article {
width: 100%;
max-width: 1080px;
margin: 50px auto !important;
}