/*
 * ============================================================================
 *  accueil_oeufs.css : œufs de Pâques du graphique de la page d'accueil
 * ============================================================================
 *
 *  Les animations lancées par accueil_oeufs.js (explications dans ce fichier) :
 *    A. Réglages communs (aucun indice visible, couleurs des bases, impression)
 *    B. Un gag par base : ver de terre (Sols), épis au vent (Céréales), pousses (Fourrages),
 *       mouches (Engrais de ferme), microbes qui se divisent (Microbiologie)
 *    C. Les pastilles des bases trouvées
 *    D. Le final quand les 5 bases sont trouvées : ola, confettis, message de bravo
 *
 *  Les éléments ajoutés par le JS ont tous la classe "oeuf" : ils sont posés PAR-DESSUS le graphique,
 *  puis retirés à la fin de l'animation. Les barres elles-mêmes ne changent pas.
 *
 *  ATTENTION : les durées des animations ci-dessous sont aussi écrites dans accueil_oeufs.js (oeufs_durees),
 *  qui retire les éléments à la fin. Si une durée change ici, la changer là-bas aussi.
 *
 *  Pas d'animation de .barre ici : elle a déjà son animation de montée (homepage_view.php),
 *  qui se relancerait (les barres disparaîtraient puis remonteraient) si on la remplaçait puis la rendait.
 *  On anime donc le groupe (.groupe) ou la colonne (.colonne), qui n'ont pas d'animation à eux.
 * ============================================================================
 */


/* ============================================================================
 *  A. RÉGLAGES COMMUNS
 * ============================================================================ */

/* La classe oeufs-actifs est ajoutée au graphique par le JS (sauf si le système demande moins d'animations).
   Volontairement AUCUN indice (pas de curseur « main ») : les œufs de Pâques se découvrent en cliquant par hasard. */
.oeufs-actifs .groupe,
.oeufs-actifs .graphiques-base {
  user-select: none;                /* cliquer vite sur le nom d'une base ne le sélectionne pas */
}

/* Les éléments des gags (mouches, microbes) se placent dans le groupe de barres : en % de sa largeur et de sa hauteur */
.oeufs-actifs .groupe {
  position: relative;
}

/* Tous les éléments ajoutés : pas de clic possible dessus (le clic passe au graphique en dessous) */
.oeuf,
.oeuf-pastilles {
  pointer-events: none;
}

/* Les dessins (SVG) des gags */
.oeuf svg {
  display: block;
  overflow: visible;
}

/* La couleur de chaque base dans --couleur, pour les pastilles et les confettis
   (les 5 couleurs sont dans requaconsult-theme.css) */
.oeuf-couleur-sol    { --couleur: var(--couleur-sol); }
.oeuf-couleur-nirc   { --couleur: var(--couleur-nirc); }
.oeuf-couleur-nirmin { --couleur: var(--couleur-nirmin); }
.oeuf-couleur-eff    { --couleur: var(--couleur-eff); }
.oeuf-couleur-mic    { --couleur: var(--couleur-mic); }

/* Rien de tout ça à l'impression */
@media print {
  .oeuf,
  .oeuf-pastilles {
    display: none !important;
  }
}


/* ============================================================================
 *  B. UN GAG PAR BASE
 * ============================================================================ */

/* --- Sols : un ver de terre sort du haut de la barre du milieu (2,6 s) ---
   La boîte est posée sur le haut de la barre (bottom: --hauteur, la hauteur de la barre donnée par la vue)
   et coupe ce qui dépasse en bas (overflow: hidden) : le ver semble sortir de la barre. */
.oeuf-ver {
  position: absolute;
  left: 50%;
  bottom: var(--hauteur);
  width: 52px;                      /* plus large que le ver (30 px) : il se tortille et penche sans être coupé */
  height: 56px;                     /* la hauteur du dessin */
  margin-left: -26px;               /* centré sur la barre */
  overflow: hidden;
  z-index: 2;
}

/* Le ver se tortille tout seul (animation dans le dessin, voir accueil_oeufs.js) ;
   ici : il sort de la barre, penche à gauche puis à droite, et replonge */
.oeuf-ver svg {
  margin: 0 auto;
  transform-origin: 50% 100%;       /* il penche depuis sa base */
  animation: oeuf-ver 2.6s ease-in-out both;
}

@keyframes oeuf-ver {
  0%   { transform: translateY(100%); }               /* caché dans la barre */
  18%  { transform: translateY(0); }                  /* sorti */
  32%  { transform: translateY(0) rotate(-10deg); }   /* penche à gauche */
  48%  { transform: translateY(0) rotate(10deg); }    /* penche à droite */
  60%  { transform: translateY(0) rotate(-4deg); }
  72%  { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(100%); }               /* replonge */
}

/* --- Céréales : un épi pousse en haut de chaque barre, le groupe ondule comme un champ au vent (2,6 s) --- */
.oeuf-epi {
  position: absolute;
  left: 50%;
  bottom: var(--hauteur);           /* posé sur le haut de la barre */
  margin-left: -8px;                /* centré (l'épi fait 16 px de large) */
  z-index: 2;
  transform-origin: 50% 100%;
  animation: oeuf-sortie 2.6s ease-out both;
  animation-delay: calc(var(--rang) * 0.12s);    /* les 3 épis poussent l'un après l'autre */
}

/* Le vent : le groupe entier penche d'un côté puis de l'autre (skewX = penché, la base reste en place) */
.groupe.oeuf-vent {
  transform-origin: 50% 100%;
  animation: oeuf-vent 2.6s ease-in-out;
}

@keyframes oeuf-vent {
  0%, 100% { transform: skewX(0deg); }
  25%      { transform: skewX(-5deg); }
  45%      { transform: skewX(3deg); }
  65%      { transform: skewX(-4deg); }
  85%      { transform: skewX(1.5deg); }
}

/* --- Fourrages : une pousse sort de chaque barre, le groupe grandit un peu (2,8 s) --- */
.oeuf-pousse {
  position: absolute;
  left: 50%;
  bottom: var(--hauteur);
  margin-left: -12px;               /* centré (la pousse fait 24 px de large) */
  z-index: 2;
  transform-origin: 50% 100%;
  animation: oeuf-sortie 2.8s ease-out both;
  animation-delay: calc(var(--rang) * 0.15s);
}

.groupe.oeuf-croissance {
  transform-origin: 50% 100%;
  animation: oeuf-croissance 2.8s ease-in-out;
}

@keyframes oeuf-croissance {
  0%, 100% { transform: scaleY(1); }
  35%      { transform: scaleY(1.1); }      /* les barres grandissent avec leur pousse... */
  50%      { transform: scaleY(1.07); }
  80%      { transform: scaleY(1.07); }     /* ...puis reviennent à leur hauteur */
}

/* Apparition commune aux épis (Céréales) et aux pousses (Fourrages) : sort de la barre, reste, puis s'efface */
@keyframes oeuf-sortie {
  0%   { transform: scale(0); opacity: 1; }
  22%  { transform: scale(1.15); }
  30%  { transform: scale(1); }
  80%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* --- Engrais de ferme : deux mouches tournent autour des barres, puis s'envolent (3,2 s) ---
   left et top = position de la mouche en % du groupe de barres (0 % = à gauche / en haut).
   Elles restent surtout au-dessus des barres (le haut des barres des engrais de ferme est entre 29 % et 51 %) :
   une mouche noire sur une barre violette se verrait mal.
   margin : la position donnée est celle du centre de la mouche (21 x 17 px). */
.oeuf-mouche {
  position: absolute;
  margin: -8px 0 0 -10px;
  z-index: 3;                       /* au-dessus des barres de la base suivante quand elle s'envole */
  opacity: 0;
}

.oeuf-mouche-a { animation: oeuf-mouche-a 3.2s linear both; }
.oeuf-mouche-b { animation: oeuf-mouche-b 3.2s linear both; }

@keyframes oeuf-mouche-a {
  0%   { left: 30%;  top: 22%; opacity: 0; }
  6%   { opacity: 1; }
  16%  { left: 85%;  top: 26%; }
  28%  { left: 62%;  top: 14%; }
  40%  { left: 8%;   top: 22%; }
  52%  { left: 38%;  top: 6%; }
  64%  { left: 90%;  top: 16%; }
  76%  { left: 50%;  top: 24%; }
  88%  { left: 18%;  top: 12%; opacity: 1; }
  100% { left: 160%; top: -20%; opacity: 0; }    /* s'envole en haut à droite */
}

@keyframes oeuf-mouche-b {
  0%   { left: 70%;  top: 18%; opacity: 0; }
  8%   { opacity: 1; }
  20%  { left: 15%;  top: 24%; }
  32%  { left: 30%;  top: 8%; }
  44%  { left: 88%;  top: 20%; }
  56%  { left: 60%;  top: 27%; }
  68%  { left: 10%;  top: 15%; }
  80%  { left: 55%;  top: 4%; }
  90%  { left: 80%;  top: 18%; opacity: 1; }
  100% { left: -60%; top: -25%; opacity: 0; }    /* s'envole en haut à gauche */
}

/* Le vol de la mouche n'est jamais droit : elle tremblote sans arrêt... */
.oeuf-mouche svg {
  animation: oeuf-bzz 0.12s linear infinite alternate;
}

@keyframes oeuf-bzz {
  from { transform: translate(0, -1px) rotate(-10deg); }
  to   { transform: translate(1px, 1px) rotate(10deg); }
}

/* ...et bat des ailes (transform-box : l'aile se replie depuis sa base, pas depuis le coin du dessin) */
.oeuf-mouche .oeuf-aile {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: oeuf-battement 0.06s linear infinite alternate;
}

@keyframes oeuf-battement {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0.3); }
}

/* --- Microbiologie : un microbe apparaît, se divise en deux, puis en quatre (3,2 s) ---
   Il y a en fait 4 microbes, tous au même endroit au départ (on n'en voit qu'un).
   Chacun suit 3 positions (en % du groupe de barres) :
     --x0 / --y0 : le départ, au milieu (les 4 l'un sur l'autre)
     --x1 / --y1 : après la 1re division (a et c restent ensemble, b et d aussi : on en voit deux)
     --x2 / --y2 : après la 2e division (chacun le sien : on en voit quatre) */
.oeuf-microbe {
  position: absolute;
  margin: -9px 0 0 -9px;            /* la position donnée est celle du centre du microbe (18 x 18 px) */
  z-index: 2;
  animation: oeuf-microbe 3.2s ease-in-out both;
}

.oeuf-microbe-a { --x0: 50%; --y0: 34%; --x1: 26%; --y1: 24%; --x2: 16%; --y2: 13%; }
.oeuf-microbe-b { --x0: 50%; --y0: 34%; --x1: 74%; --y1: 42%; --x2: 84%; --y2: 54%; }
.oeuf-microbe-c { --x0: 50%; --y0: 34%; --x1: 26%; --y1: 24%; --x2: 54%; --y2: 12%; }
.oeuf-microbe-d { --x0: 50%; --y0: 34%; --x1: 74%; --y1: 42%; --x2: 44%; --y2: 58%; }

@keyframes oeuf-microbe {
  0%   { left: var(--x0); top: var(--y0); transform: scale(0.2); opacity: 0; }
  10%  { left: var(--x0); top: var(--y0); transform: scale(1); opacity: 1; }
  22%  { left: var(--x0); top: var(--y0); transform: scale(1.25, 0.85); }   /* s'étire avant de se diviser */
  36%  { left: var(--x1); top: var(--y1); transform: scale(1); }            /* 1re division */
  50%  { left: var(--x1); top: var(--y1); transform: scale(1.25, 0.85); }
  64%  { left: var(--x2); top: var(--y2); transform: scale(1); }            /* 2e division */
  88%  { left: var(--x2); top: var(--y2); transform: scale(1); opacity: 1; }
  100% { left: var(--x2); top: var(--y2); transform: scale(0.6); opacity: 0; }
}

/* Les microbes gigotent sans arrêt */
.oeuf-microbe svg {
  animation: oeuf-gigote 0.45s ease-in-out infinite alternate;
}

@keyframes oeuf-gigote {
  from { transform: rotate(-12deg) scale(1.06, 0.94); }
  to   { transform: rotate(12deg) scale(0.94, 1.06); }
}


/* ============================================================================
 *  C. LES PASTILLES DES BASES TROUVÉES
 *  Une par base, en haut à droite du graphique, ajoutées au premier gag : vides au départ,
 *  remplies de la couleur de la base quand son gag a été vu. Elles montrent qu'il y en a d'autres à trouver.
 * ============================================================================ */
.oeuf-pastilles {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  gap: 5px;
  z-index: 2;
  animation: oeuf-apparait 0.4s ease-out both;
}

.oeuf-pastille {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--couleur);
  background-color: transparent;
}

.oeuf-pastille.trouvee {
  background-color: var(--couleur);
  animation: oeuf-pastille 0.4s ease-out;
}

@keyframes oeuf-apparait {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes oeuf-pastille {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.6); }
  100% { transform: scale(1); }
}


/* ============================================================================
 *  D. LE FINAL : les 5 bases trouvées
 * ============================================================================ */

/* --- La ola (1,7 s) : les 15 barres se lèvent l'une après l'autre, de gauche à droite ---
   --groupe (0 à 4) et --rang (0 à 2) sont déjà donnés par la vue : la barre n° groupe x 3 + rang part la dernière. */
.oeuf-ola .colonne {
  transform-origin: 50% 100%;
  animation: oeuf-ola 0.6s ease-in-out both;
  animation-delay: calc((var(--groupe) * 3 + var(--rang)) * 0.07s);
}

@keyframes oeuf-ola {
  0%, 100% { transform: scaleY(1); }
  40%      { transform: scaleY(1.22); }
  70%      { transform: scaleY(0.95); }
}

/* --- Les confettis aux couleurs des bases (3,1 s au plus) ---
   Le JS donne à chacun, au hasard : --gauche (position de départ), --delai, --derive (vers la gauche ou la droite)
   et --rotation. La boîte coupe ce qui dépasse : les confettis disparaissent en touchant l'axe. */
.oeuf-confettis {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 3;
}

.oeuf-confetti {
  position: absolute;
  left: var(--gauche);
  top: -12px;
  width: 7px;
  height: 11px;
  border-radius: 2px;
  background-color: var(--couleur);
  animation: oeuf-confetti 2.3s cubic-bezier(0.35, 0.5, 0.65, 1) both;
  animation-delay: var(--delai);
}

@keyframes oeuf-confetti {
  from { top: -12px; transform: translateX(0) rotate(0deg); }
  to   { top: 100%;  transform: translateX(var(--derive)) rotate(var(--rotation)); }
}

/* --- Le message de bravo (5 s, après 1 s d'attente : la ola est presque finie, la carte ne la cache pas) ---
   Une carte blanche au-dessus du graphique, avec un liseré aux 5 couleurs */
.oeuf-bravo {
  position: absolute;
  top: 16%;
  left: 0;
  right: 0;
  width: max-content;
  max-width: 85%;
  margin: 0 auto;                   /* centré */
  padding: 1rem 1.5rem 0.9rem;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(31, 37, 35, 0.18);
  text-align: center;
  overflow: hidden;                 /* le liseré suit les coins arrondis */
  z-index: 4;
  animation: oeuf-bravo 5s ease-out 1s both;
}

/* Le liseré du haut : les 5 couleurs des bases, côte à côte */
.oeuf-bravo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg,
    var(--couleur-sol) 0 20%, var(--couleur-nirc) 20% 40%, var(--couleur-nirmin) 40% 60%,
    var(--couleur-eff) 60% 80%, var(--couleur-mic) 80% 100%);
}

.oeuf-bravo-titre {
  display: block;
  font-family: var(--police-titres);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--encre);
}

.oeuf-bravo-texte {
  display: block;
  font-size: 0.95rem;
  color: var(--encre-douce);
}

@keyframes oeuf-bravo {
  0%   { opacity: 0; transform: translateY(12px) scale(0.9); }
  8%   { opacity: 1; transform: translateY(0) scale(1.04); }
  12%  { transform: translateY(0) scale(1); }
  88%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-8px) scale(1); }
}