/ Voici un exemple de css custom pour le theme margot, il agit sur les variables css non personnalisables dans le theme et permet de faire des css sur mesure. Chaque ligne ci-dessous est à décommenter pour etre utilisée Pour en savoir plus, voyez la documentation à ce sujet. /

/
  • /


@keyframes fadeIn {
  • 0% { opacity: 0; }
  • 100% { opacity: 1; }
}

h1, h2, h3, h4, h5, h6 {
  • font-weight: 400;
}
h1 {
  • font-size: 2.3rem;
  • /animation: fadeIn 3s;/
  • text-transform: uppercase;
  • text-align: center;
}

h2{
  • font-size:2rem;
  • /animation: fadeIn 5s;/
  • text-transform: uppercase;}
.lead{color:var(--secondary-color-1); text-align:left;font-weight:bold;}
/ suppression de la ligne apres le titre des fiches /
.BAZ_fiche_titre::after {
  • content: none;
  • }
/ Affiche les titres avec des couleurs différentes page accueil/

.bloc-chiffres h2{color:white !important;}
.bloc-chiffres h3{color:var(--neutral-light-color)!important;}
.bloc-chiffres h4{color:white !important;}
.bloc-agenda h2{color:white !important;}

/ Affiche les titres avec des couleurs différentes sur les blocs fonction page Le Concept/

.bloc-fonction h3{color:var(--secondary-color-1) !important;}
.bloc-fonction h4{color:var(--secondary-color-1) !important;}
.bloc-fonction .lead{text-align:center;}
.bloc-fonction {align-items: flex-start;}

.bloc-flex{display:flex;justify-content:space-around;}
:root {

/ couleur des titres /
  • -title-h1-color:var(--neutral-color);
  • -title-h2-color:var(--primary-color);
  • -title-h3-color:var(--primary-color);
/ --title-h4-color:var(--secondary-color-2); /
/ couleur pour les messages positifs par defaut vert /
/ --success-color: #3cab3b; /

/ couleur pour les messages d'erreur par defaut rouge /
/ --danger-color: #d8604c; /

/ couleur pour les messages d'alerte par defaut orange /
/ --warning-color: #D78958; /

/ couleur de fond de la partie centrale votre wiki /
/ --main-container-bg-color:var(--neutral-light-color); /

/ couleur des liens /
/ --link-color: var(--primary-color); /

/ couleur des liens au survol /
/ --link-hover-color: var(--primary-color); /

/ couleur de la barre de menu /
  • -navbar-bg-color:var(--primary-color) ;

/ --navbar-text-color: var(--neutral-light-color); /

--navbar-link-color:white ;

/ --navbar-link-bg-color: transparent; /

--navbar-link-hover-color: var(--neutral-light-color);

/ --navbar-link-bg-hover-color: transparent; /

/ --navbar-border: none; /

/ --navbar-border-radius: 0; /

/ --navbar-shadow: none; /

/ --header-bg-color: var(--neutral-light-color); /

/ --header-text-color: var(--neutral-color); /

/ --header-title-color: var(--primary-color); /

/ couleur de fond du pied de page /
/ --footer-bg-color: transparent; /

/ --footer-text-color: var(--main-text-color); /

/ --footer-title-color: var(--main-text-color); /

/ --footer-border: 3px solid var(--neutral-soft-color); /

/ --btn-border: none; /

--btn-border-radius: 25px;

/ --checkbox-color: var(--primary-color); /

}

#yw-topnav .navbar-nav > li > a:not(.btn) {
  • padding: .5rem 1.1rem;
}



/
/ .btn {margin-bottom:1em;}
.btn-white {background-color:white;}
a.btn-white {color:var(--neutral-color)!important;text-transform:uppercase;}
a.btn-icon {font-size: 1.5em;}

/ test animation bouton [pas conservé]/
/
  • /

section.shape-blob1 {
  • border-radius: 50% 50% 59% 41% / 35% 50% 50% 65%;
  • padding: 6rem 10rem;
}

/ ACCUEIL /
/
/ .agenda-item{
  • background-color: #f5f5f5;
  • padding: 1em;
  • margin:1.5em;
}

/ logos partenaires - effet noir et blanc [pas utilisé]/
/
  • /

/
/ .area + .area:not(.floating-area) {
  • margin-top: 0!important;
}

.bazar-card .text-area {
  • color: var(--neutral-color);
  • max-height: 9rem;
  • font-weight: normal;
  • }
  • .style-horizontal .bazar-card h4 {
    • font-size: 1.1rem;
    • margin-bottom: .5em;
    • }

.bazar-card .content {margin-left:1em;}
/ pb de largeur de colonne avec card horizontal /
.style-horizontal .bazar-card { max-width: 1000px; }
/ suppression du degradé sur texte actu /
.bazar-card .text-area::after { background-image: none;}
.bazar-card .visual-area { border-radius: 0;}
@media (min-width: 900px) {
  • .style-horizontal .bazar-card { min-height: 7rem; }
}

  • / Style pour les blocs actus sur page accueil /
  • .style-vertical .bazar-card {
    • padding: 2em;
    • }
.style-vertical .bazar-card div.visual-area {
  • margin: 0;
  • margin-bottom:2em;
  • border-radius: 0;
  • }
.style-vertical .bazar-card {
  • border-radius: 0;
  • box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  • border: 1px solid #ebebeb;
  • background-color: white;
}
.style-vertical .bazar-card .visual-area {
  • height: 300px;
  • }
.white .bazar-card .title-area {
  • color: var(--secondary-color-1) !important;
  • text-transform: uppercase;
  • font-size: 1.4em;
  • line-height: 1.2em;
}
.bazar-cards-container{margin-bottom:2rem;}

  • /
    /
  • .panel-body iframe{width:100%!important;}
  • .bazar-map-container .entry-container {

  • min-width: 530px;
  • }

/
/ / Personnalisation de l'affichage card type square avec effet survol /
.style-square .bazar-card .content {
  • position: absolute;
  • top: 0;
  • left: 0;
  • right: 0;
  • background-color: #2a3d459e;
  • padding: 1rem;
  • height: 100%;
  • max-height: 100%;
  • justify-content: space-around;
  • display:none;
}
.style-square .bazar-card .content h4 {color:white;text-align:center;font-weight:400;}
.style-square .bazar-card .text-area {
  • color: white;
  • font-weight: lighter;
  • display:none;
  • text-align:center;
}
a.bazar-entry{ transition: ease-in-out;}
.style-square .bazar-entry:hover .text-area{display:block;}
.style-square .bazar-entry:hover .content {background-color:var(--primary-color);display:flex;}

/
/ .panel-secondary-1 > .panel-heading h4 {
  • color: white;
  • font-size:1.2em;
  • }
.panel-group .panel { border-radius: 0; }
  • .panel-primary > .panel-heading h4 {
    • color: white;
    • font-size:1.2em;
    • }
.panel-primary { background-color: var(--primary-color);}
.panel-secondary-1 { background-color: var(--secondary-color-1);}
.panel-secondary-2 > .panel-heading h4{
  • color: white;
  • font-size:1.2em;
  • }
.panel-secondary-2 { background-color: var(--secondary-color-2);}
.panel-body {
  • padding: 15px;
  • margin: 15px;
  • background-color: #ffffff8f;
}

/ mise en forme portrait equipe /
.temoin {
  • box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  • margin: .5em;
  • padding: 1.5em;
  • margin-top: 100px;
  • font-size:18px;
}
.temoin img {
  • border-radius: 50%;
  • margin-top: -100px;
  • border: 3px solid #f5f5f5;
  • width: 150px;
  • background-color: #fafafa;
  • padding: 0 20px;
}


/ section effet texte au survol - utilisé pour les missions page concept/
.text-hidden {
  • background-color:transparent;
  • webkit-transition: all ease-out 0.3s;
  • -moz-transition: all .3s ease-in-out;
  • transition: background-image 2s ease;
    • border: 1em solid var(--secondary-color-1);
    • box-shadow: inset 0 0 0 0 var(--secondary-color-1)!important;
    • font-size:18px;
    • }
.text-hidden:hover{
  • background-image: unset !important;
  • background-color:var(--secondary-color-1);
  • box-shadow: inset 0 0 0 100px var(--secondary-color-1)!important;}
.text-hidden .container {
  • display:flex;
  • flex-direction:column;
  • justify-content:center;
  • min-height:630px;
  • transition: all .7s ease;
  • }

.text-hidden .text-hover{opacity:0;height:0;}
.text-hidden:hover .text-hover{opacity:1;height:100%;transition: all .7s ease;}

/ logos partenaires sur une seule ligne - PC/
@media only screen and (min-width: 992px) {
  • .gallery-container { flex-wrap: nowrap; }
}
/ Adaptation mobile /
@media only screen and (max-width: 799px) {
/ .yw-topnav-fast-access {max-width:150px;}/
  • #yw-topnav .yw-topnav-fast-access .btn-group { display: none;}
  • h1 .typewriter { white-space: wrap!important;}
  • .lead { font-size: 1.1em;}
  • section.pattern-border-dotted{height:auto!important;margin-bottom:1em;}
  • section.bloc-fonction{height:auto!important;margin-bottom:1em;padding:0;}
  • /carte sur mobile - fixbouton close invisible/
  • div.entry-container> div > iframe { max-width: 70% !important; }
  • .entry-container .btn-close { right: 30%;}
  • .id1 .entete {flex-direction: column;}

}

/
/ h1 .typewriter {
  • overflow: hidden; / Ensures the content is not revealed until the animation /
  • border-right: .15em solid transparent; / The typwriter cursor /
  • white-space: nowrap; / Keeps the content on a single line /
  • margin: 0 auto; / Gives that scrolling effect as the typing happens /
  • animation:
    • typing 3.5s steps(26, end),
    • blink-caret .75s step-end ;
}

/ The typing effect /
@keyframes typing {
  • from { width: 0 }
  • to { width: 100% }
}

/ The typewriter cursor effect /
@keyframes blink-caret {
  • from, to { border-color: transparent ;}
  • 50% { border-color: var(--secondary-color-1); }
  • 100% { border-color: transparent; }
}