:root {
  --max-width : 1024px;
  --text-max-width : 768px;

  --bleu-marine : #161846;
  --bleu-gris : #8f9dc6;
  --gris : #b6bbc7;
  --vert-clair : #9faaa6;
  --vert-foret : #03524e;
  --rose-fuschia : #ba3a6e;
  --peau-de-blanc : #f8c3c0;
  --rouge-bordeau : #570c39;
  --orange-flash : #f0522c;
  --jaune-orange : #fda408;
}

h1 {
  font-weight: 900;
  font-size: 3rem;
  margin: 0;
  padding: 0.75rem 0 0.25rem 0;
}

h2 {
  font-size: 2rem;
}

body {
  background-color: white;
  margin: 0 auto;
  font-family: 'Faune', sans-serif;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='1'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.05' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='40' specularConstant='3' specularExponent='20' lighting-color='%23fda408' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='163'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%23ffffff'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23fda408' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");



  header {
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='1'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='40' specularConstant='3' specularExponent='20' lighting-color='%23f0522c' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='163'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%23fda408'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23f0522c' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");
    text-align: center; */
    max-width: var(--max-width);
    margin: 3rem auto 2rem auto;
    padding: 0 1rem;
    color: var(--rouge-bordeau);

    p {
      font-size: 1.5rem;
      margin: 0;
      padding: 0 0 1.25rem 0;
    }
  }

  main {
    max-width: var(--max-width);
    margin: 1rem auto;

    .accroche {
      min-height: 8em;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='40' specularConstant='3' specularExponent='20' lighting-color='%23fda408' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='163'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%23e3b0ae'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23fda408' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");
      font-size: 3em;
      font-weight: bold;
      position: relative;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;

      .texte:after {
        animation: rotate-cover 20s infinite;
        white-space: pre-wrap;
        content: "";
        font-style: italic;
      }

      p {
        margin: 0;
        text-align: center;
        text-transform: uppercase;
        position: relative;
        z-index: 1;
      }
    }

    .exposition {
      margin-top: 2rem;

      .presentation {
        min-height: 8em;
        /* text-align: center; */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='1'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='40' specularConstant='3' specularExponent='20' lighting-color='%23fda408' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='163'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%238f9dc6'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23fda408' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");
        display: flex;
        flex-wrap: wrap;
        padding: 2rem;
        gap: 2rem;

        img {
          flex: 1 1 200px;
          object-fit: cover;
          max-width: 100%;
        }

        .content {
          flex: 1 1 400px;

          h2 {
            display: inline;
            background-color: var(--peau-de-blanc);
          }

          div {
            display: block;
            margin-bottom: 1rem;
          }

          p {
            display: inline;
            font-size: 1.5rem;
            background-color: var(--peau-de-blanc);
          }

          div:last-child {
            p {
              background-color: var(--bleu-gris);
            }
          }
        }
      }

      .container {
        display: flex;
        flex-wrap: wrap;
        min-height: 8rem;
        margin-top: 2rem;
        justify-content: space-between;
        gap: 2rem;

        .ateliers {
          .image {
            background-image: url(images/atelier.jpeg);
          }
        }

        .colloque {
          .image {
            background-image: url(images/colloque.jpeg);
          }
        }

        .ateliers, .colloque {
          flex: 1 1 300px;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='1'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='40' specularConstant='3' specularExponent='20' lighting-color='%23fda408' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='163'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%238f9dc6'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23fda408' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");
          padding: 2rem;
          display: flex;
          gap: 2rem;

          h2 {
            display: inline;
            background-color: var(--peau-de-blanc);
          }

          p {
            display: inline;
            background-color: var(--bleu-gris);
          }

          .content {
            margin: auto 0;

            div:last-child {
              padding-top: 1rem;
            }
          }

          .image {
            flex: 0 0 30%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 108%;
            background-color: var(--bleu-gris);
            background-blend-mode: multiply;
          }
        }
      }
    }

    .information {
      margin-top: 2rem;
      padding: 2rem;
      text-align: center;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='40' specularConstant='3' specularExponent='20' lighting-color='%23fda408' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='163'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%23e3b0ae'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23fda408' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");

      h2 {
        margin: 0;
      }

      .form {
        margin-top: 2rem;

        .name {
          display: none;
        }

        .email {
          margin-bottom: 1rem;

          label {
            font-size: 1.125rem;
            font-weight: bold;
            display: block;
            margin-bottom: 0.5rem;
          }

          input {
            max-width: 300px;
            width: 80%;
            font-size: 1.125rem;
            font-family: 'Faune', sans-serif;
            font-weight: bold;
            color: var(--rouge-bordeau);
            background-color: var(--peau-de-blanc);
            border: solid 2px var(--rouge-bordeau);
            padding: 0.5rem 1rem;
            margin-bottom: 1rem;
            text-align: center;
          }
        }

        button {
          font-size: 1.125rem;
          font-family: 'Faune', sans-serif;
          font-weight: bold;
          color: var(--peau-de-blanc);
          background-color: var(--rouge-bordeau);
          border: solid 2px var(--peau-de-blanc);
          padding: 0.5rem 2rem;
        }
      }
    }

    .equipe, .soutiens, .histoire {
      margin-top: 2rem;
      padding: 2rem;
      text-align: center;

      h2 {
        margin: 0 0 2rem 0;
      }

      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 2rem;
        list-style: none;
        padding: 0;

        li {
          flex: 1 1 160px;

          .image {
            margin: 0 auto;
            width: 100%;
            height: 8rem;
            background-color: white;
            position: relative;

            img {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              max-width: 80%;
              max-height: 80%;
            }
          }
        }
      }
    }

    .equipe {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='1'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='40' specularConstant='3' specularExponent='20' lighting-color='%23fda408' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='163'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%23ffffff'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23fda408' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");

      img {
        max-width: 80%;
      }
    }

    .histoire {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='1'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='40' specularConstant='3' specularExponent='20' lighting-color='%23fda408' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='163'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%238f9dc6'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23fda408' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");

      h2 {
        display: inline-block;
        background-color: var(--bleu-gris);
      }

      p {
        display: inline-block;
        background-color: var(--bleu-gris);
        font-size: 1.25rem;
        max-width: var(--text-max-width);
        margin-left: auto;
        margin-right: auto;
      }
    }

    .soutiens {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='1'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='40' specularConstant='3' specularExponent='20' lighting-color='%23fda408' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='163'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%23ffffff'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23fda408' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");
    }
  }

  footer {
    padding: 1rem 0.5rem;
    text-align: center;
  }
}

@keyframes rotate-cover {
  0% {
    content: "Avoir chaud,\A mais pas trop,\A selon la saison";
    opacity: 1;
    color: black;
  }
  17% {
    content: "Avoir chaud,\A mais pas trop,\A selon la saison";
    opacity: 1;
  }
  18% {
    content: "Avoir chaud,\A mais pas trop,\A selon la saison";
    opacity: 0;
    color: var(--rouge-bordeau);
  }
  19% {
    content: "Un art de vivre,\A pour le monde de demain";
    opacity: 0;
    color: black;
  }
  20% {
    content: "Un art de vivre,\A pour le monde de demain";
    opacity: 1;
  }
  37% {
    content: "Un art de vivre,\A pour le monde de demain";
    opacity: 1;
  }
  38% {
    content: "Un art de vivre,\A pour le monde de demain";
    opacity: 0;
    color: var(--rouge-bordeau);
  }
  39% {
    content: "Assez chaud\A assez frais,\A juste bien";
    opacity: 0;
    color: black;
  }
  40% {
    content: "Assez chaud\A assez frais,\A juste bien";
    opacity: 1;
  }
  57% {
    content: "Assez chaud\A assez frais,\A juste bien";
    opacity: 1;
  }
  58% {
    content: "Assez chaud\A assez frais,\A juste bien";
    opacity: 0;
    color: var(--rouge-bordeau);
  }
  59% {
    content: "Tempérons-nous\A sans tout cramer";;
    opacity: 0;
    color: black;
  }
  60% {
    content: "Tempérons-nous\A sans tout cramer";
    opacity: 1;
  }
  77% {
    content: "Tempérons-nous\A sans tout cramer";
    opacity: 1;
  }
  78% {
    content: "Tempérons-nous\A sans tout cramer";
    opacity: 0;
    color: var(--rouge-bordeau);
  }
  79% {
    content: "Au-delà de la performance,\A le confort";
    opacity: 0;
    color: black;
  }
  80% {
    content: "Au-delà de la performance,\A le confort";
    opacity: 1;
  }
  97% {
    content: "Au-delà de la performance,\A le confort";
    opacity: 1;
  }
  98% {
    content: "Au-delà de la performance,\A le confort";
    opacity: 0;
    color: var(--rouge-bordeau);
  }
  99% {
    content: "Avoir chaud,\A mais pas trop,\A selon la saison";
    opacity: 0;
    color: black;
  }
  100% {
    content: "Avoir chaud,\A mais pas trop,\A selon la saison";
    opacity: 1;
  }
}