/ 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 sur https://yeswiki.net/?DocumentationThemeMargot /

  • :root {
  • -title-h2-color:var(--neutral-color);
  • -title-h3-color:var(--neutral-color);
    • -navbar-bg-color: var(--neutral-light-color);
    • -navbar-text-color: var(--neutral-color);
    • -navbar-link-color: var(--neutral-color);
    • -navbar-active-link-color: var(--primary-color);
    • -navbar-link-bg-color: transparent;
    • -navbar-link-hover-color: var(--neutral-soft-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);

  • -footer-bg-color: var(--neutral-color);
  • -footer-text-color: var(--neutral-light-color);
  • -footer-title-color:var(--secondary-color-1);
  • -footer-border-top: 3px solid var(--neutral-soft-color);

  • -btn-border:none;
  • -btn-border-radius:1em;

  • -checkbox-color: var(--primary-color)
}
h1 {
  • font-size:3rem;
  • font-weight:bolder;
  • margin-top:0;
}
/ Animation de l'icone chevron sur home /
@keyframes scroll {

  • 0% { opacity: 0; }
  • 30% { transform: translateY(0); opacity: .5; }
  • 90% { transform: translateY(15px); opacity: 1;}
  • 100% { transform: translateY(20px); opacity: 0;}

}
.icon-action {
  • font-size: 4em;
  • text-align: center;
  • margin-right: auto;
  • margin-left: auto;
  • width: fit-content;
  • display: block;
  • animation-name: scroll;
  • animation-duration: 2.2s;
  • animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  • animation-iteration-count: infinite;
}



.col-flex{display: flex;
  • flex-wrap: wrap;
  • justify-content: space-evenly;
  • align-items: center;
  • gap:2em;
}

.bloc-solution{width:300px;height:300px;background-blend-mode: overlay;}

section.bloc-solution:hover{width:300px;height:300px;background-blend-mode: normal;}

.c4-izmir figcaption {
  • font-size: 1.5em;
  • color: #fff;
  • background-color: rgba(17, 20, 17, 0.27);
  • opacity: 1;}
  • .intro{width:auto;}
  • .logo-footer img{height:130px;width:auto;}
  • / adaptation car pas de header /
  • @media (min-width: 1200px){
    • #yw-main { padding: 0;}
  • }
  • .img-colored{background-blend-mode: soft-light;}
  • .white .btn-primary { border: 2px solid white;}
  • .col-propo {
  • display: flex;
  • flex-direction: column;
  • height: 400px;
  • justify-content: space-between;
    • }
    • / réglage de l'image dans l'accordéon /
      • .bazar-list.dynamic .panel-heading-container .visual-area { background-color: transparent;}
  • /
    /
  • .panel-secondary-2 .panel-heading {text-align:center;}

.panel-secondary-2 {border:1px solid var(--neutral-color);}

.panel-fondbleu {
  • background-color: var(--primary-color);}


.neutral-color {

  • background: #f6f6f6;
  • opcacity:0.9;
  • border-top: 5px solid var(--secondary-color-1);
/ border-bottom: 3px solid var(--secondary-color-1);/
  • padding:20px;
  • }

  • .titre_thema h1{
    • background-color:var(--primary-color);
    • color:#fff;
    • border-radius:10px 10px 0 0;
    • position:absolute;
    • bottom: 45px;
    • width: 100%;
    • padding-left: 20px;
    • line-height: 1.7;
    • }



  • .titre_thema h5 {
  • background-color: #fff;
  • opacity: 0.8;
  • margin-bottom: 0;
  • padding-bottom: 30px;
padding-left:20px;
padding-top:20px;
  • margin-top: -25px;
    • position:absolute;
    • bottom:0;
    • width:100%;
}

a.btn-white{ color: var(--primary-color);
  • background-color: white;
}

.aceditor-btn-help{display:none;}