/*
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 page Home (essentiel)
Author: bubulgum.comm'
Author URI: https://bubulgum.com/
Template: Divi
Version: 1.0
Date: 23.03.20
Dernière mise à jour: 23.02.23
*/
/* --- */
/*** CSS du site de l'ECOLE DE MUSIQUE DE COSSONAY ***/
/* --- */
@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 */
}
/*** 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;
}
/* --- */
/***** --------------------------------------- 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;
}
/* --- */
/*** 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;
}
/* --- */
/***** ------------------------------------ 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.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;
}
}
/* --- */
/*** 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;
}