@keyframes Wiggle {
  0%   { transform: rotate(0deg) translateY(0); }
  25%  { transform: rotate(-4deg) translateY(-2px); }
  50%  { transform: rotate(2deg) translateY(0.10px); }
  75%  { transform: rotate(4deg) translateY(-1px); }
  100% { transform: rotate(0deg) translateY(0); }
}

#ziiczaac span {
  display: inline-block;
  animation: Wiggle 2.5s ease-in-out infinite;
}

#ziiczaac span:nth-child(1) { animation-delay: 0s; }
#ziiczaac span:nth-child(2) { animation-delay: 0.15s; }
#ziiczaac span:nth-child(3) { animation-delay: 0.3s; }
#ziiczaac span:nth-child(4) { animation-delay: 0.45s; }
#ziiczaac span:nth-child(5) { animation-delay: 0s; }         /* Espace */
#ziiczaac span:nth-child(6) { animation-delay: 0.6s; }
#ziiczaac span:nth-child(7) { animation-delay: 0.75s; }
#ziiczaac span:nth-child(8) { animation-delay: 0.9s; }
#ziiczaac span:nth-child(9) { animation-delay: 1.05s; }

h2 + h3 {
    color: #666;
    font-style: italic;
    margin-top: 0;
        font-weight: normal; /* enlève le gras */
        font-size:1.25rem; /* réduit la taille à 80% de la taille héritée */
}

body.dark h2 + h3 {
    color: #999;
    font-style: italic;
        margin-top: 0;
        font-weight: normal; /* enlève le gras */
        font-size: 1.25rem; /* réduit la taille à 80% de la taille héritée */
}


blockquote,
body.dark blockquote {
    all: unset;
    border: none;
    font-weight: normal;

    position: relative;
    display: inline-block;
    text-align: center;
    font-style: italic;
    font-size: 1.25rem;
    background: transparent;

    /* Padding en % pour s'adapter à la largeur */
    padding: 10%; 

    /* Marges pour centrer et espacement vertical */
    margin: 1rem 8% 1rem 8%;
}

/* Guillemets gauche */
blockquote::before {
    content: "\f10d"; /* fa-quote-left */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 2rem;
}

/* Guillemets droit */
blockquote::after {
    content: "\f10e"; /* fa-quote-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 2rem;
}

/* Mode clair */
blockquote,
blockquote::before,
blockquote::after {
    color: #666;
}

/* Mode sombre */
body.dark blockquote,
body.dark blockquote::before,
body.dark blockquote::after {
    color: #888;
}

/*************************
* Contact Formulaire
**************************/

#contact label {
    display: block;
    margin: 1rem 0 0.5rem;
}

#contact input,
#contact textarea,
#contact button {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    border-radius: 6px;
    border: 1px solid #ccc;
}

/* Hover sur le bouton */
#contact button:hover {
    background-color: #336699;
    color: white;
    border: 1px solid #2a4b6a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

/* Style du texte placeholder */
#contact input::placeholder,
#contact textarea::placeholder {
    color: #666;
    font-style: italic;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 0.95rem;
}

#contact #form-message {
    margin-top: 1rem;
    font-weight: bold;
    padding: 0.75rem;
    border-radius: 6px;
}

#contact .hidden-field {
    display: none;
}

#contact button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

#contact .success {
    background-color: #e6f3ea;
    color: #2e654b;
    border: 1px solid #c3e6cb;
    border-radius: 6px;
}

#contact .error {
    background-color: #fbeaea;
    color: #993333;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
}