/* Saison : Halloween
   Période conseillée : de mi-octobre au 1er novembre.
   Emplacements utilisés :
   1. au-dessus du logo (.accroche .contenu::after) : petite citrouille ;
   2. ciel de l'en-tête, PC seulement (.accroche .contenu::before, dès 900px) : chauves-souris ;
   3. au-dessus de « Écrire à Julie » (.ecrire h2::before) : citrouille ;
   4. couleur des vagues (.courbe) : trait orange ;
   5. phrase de saison (.saison), texte dans index.html. */

/* Vagues citrouille : même forme et même fond que style.css, seul le trait change (#f28c28) */
.courbe {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='36' viewBox='0 0 120 36'%3E%3Cpath d='M0 12 Q30 32 60 12 T120 12' fill='none' stroke='%23f28c28' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 120px 36px repeat-x,
    linear-gradient(to bottom, var(--de) 50%, var(--vers) 50%);
}

/* Citrouille qui sourit (sourire miel, clin d'œil au logo), utilisée au-dessus du logo et du titre du bas */
:root { --citrouille: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='%23f28c28' stroke='%234a2a6e' stroke-width='1.5'%3E%3Cellipse cx='15' cy='28' rx='11' ry='14'/%3E%3Cellipse cx='33' cy='28' rx='11' ry='14'/%3E%3Cellipse cx='24' cy='28' rx='10' ry='15'/%3E%3C/g%3E%3Cpath d='M24 13 Q24 8 28 6' fill='none' stroke='%234a2a6e' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='18' cy='26' r='2.2' fill='%234a2a6e'/%3E%3Cpath d='M27 26 Q30 23 33 26' fill='none' stroke='%234a2a6e' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M16 34 Q24 42 32 34' fill='none' stroke='%23f5c33b' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E"); }

.ecrire h2::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: .5rem;
  background: var(--citrouille) center / contain no-repeat;
  pointer-events: none;
}

.saison { margin-top: 1rem; }

/* Petite citrouille en haut à gauche de l'en-tête, au-dessus du logo (mobile et PC) */
.accroche .contenu { position: relative; padding-top: 3.75rem; }
.accroche .contenu::after {
  content: "";
  position: absolute;
  top: .75rem;
  left: 1.25rem;
  width: 40px;
  height: 40px;
  background: var(--citrouille) center / contain no-repeat;
  pointer-events: none;
}

@media (min-width: 48em) {
  .accroche .contenu::after { left: 2rem; }
}

@media (min-width: 900px) {
  .ecrire h2::before { margin-left: auto; margin-right: auto; }

  /* Cinq chauves-souris lilas en vol, en haut de l'en-tête (à droite du logo jusqu'au coin) */
  .accroche .contenu::before {
    content: "";
    position: absolute;
    top: 1rem;
    right: 2rem;
    width: 34rem;
    height: 7rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 70'%3E%3Cdefs%3E%3Cg id='b'%3E%3Cpath d='M-4 -1 C-12 -8 -20 -6 -26 -2 C-23 0 -22 3 -20 5 C-17 2 -15 3 -13 6 C-11 3 -8 4 -4 4 Z M4 -1 C12 -8 20 -6 26 -2 C23 0 22 3 20 5 C17 2 15 3 13 6 C11 3 8 4 4 4 Z M0 5 C-4 5 -5 -2 -4 -6 L-2 -3 L0 -4 L2 -3 L4 -6 C5 -2 4 5 0 5 Z' fill='%238e6bb5'/%3E%3Ccircle cx='-1.7' cy='-1' r='.8' fill='%234a2a6e'/%3E%3Ccircle cx='1.7' cy='-1' r='.8' fill='%234a2a6e'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23b' transform='translate(45 24) scale(1.4)'/%3E%3Cuse href='%23b' transform='translate(125 50) scale(1.7)'/%3E%3Cuse href='%23b' transform='translate(205 20) scale(1.9)'/%3E%3Cuse href='%23b' transform='translate(262 52) scale(1.5)'/%3E%3Cuse href='%23b' transform='translate(308 16) scale(1.2)'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
  }
}