:root {
  /* Déclaration du thème pour mail / navigateur */
  color-scheme: light dark;

  /* Background */
  --main-bg-color: #F8F8F5;          /* blanc perlé */
  --secondary-bg-color: #FFFFFF;     /* sections secondaires */

  /* Textes */
  --main-font-color: #1A1A1A;        /* texte principal */
  --secondary-font-color: #112953;   /* titres secondaires */
  --tertiary-font-color: #215998;    /* accents de texte */

  /* Highlights / CTA */
  --main-highlight-color: #F9D86F;   /* CTA principal */
  --secondary-highlight-color: #D4C178; /* hover CTA */
  --zen-green-color: #238856;        /* boutons secondaires / badges */
  --zen-green-hover: #6CB39E;        /* hover boutons secondaires */
  --accent-violet-color: #6B3E81;    /* titres / hero */
  --accent-blue-color: #215998;      /* liens / titres secondaires */
  --accent-blue-hover: #3D6FA6;      /* hover liens / boutons secondaires */

  /* Misc */
  --hero-text-color: #F8F8F5;        /* texte sur hero/banner */
  --contrast-dark-color: #1A1A1A;    /* texte sur fonds clairs */
}
body {
  color: var(--main-font-color);
  background-color: var( --main-bg-color);
}
.header .logo img {
  width: 100%;
  max-height: 150px;
  max-width: unset;
}
h2 { color: var(--secondary-font-color);}
h3 { color: var(--tertiary-font-color);}
.button {
  background: var(--zen-green-hover);
  border: solid thin var(--secondary-bg-color);

  transition: background-color ease 0.5s;
  padding: 10px 20px;
  color: var(--contrast-dark-color);
}

.button.button-outline {
    border: solid thin var(--zen-green-color);
    color:  var(--zen-green-color);
  }
.button:hover {
  background: var(--zen-green-color);
  color: var(--main-bg-color);
}
 .button.button-outline:hover {
  background: var(--zen-green-hover);
  color: var(--main-bg-color);
  border: solid thin var(--secondary-bg-color);
}