/* ============================================================================
   CLIMYO MASCOTTE — test d'habillage illustratif (pingouin été / hiver)
   ----------------------------------------------------------------------------
   Composant de test, entièrement préfixé .cm- : rien de l'existant n'est
   modifié, et supprimer ce fichier suffit à tout annuler.

   Le personnage se synchronise avec la bascule été/hiver déjà présente sur
   l'accueil (classe body.mode-hiver posée par setMode() dans main.js) :
   aucune modification JavaScript n'a été nécessaire, uniquement du CSS.

   À charger APRÈS styles.css, climyo-plus.css et climyo-v2.css.
   ============================================================================ */

/* --- personnage intégré DANS la scène du visuel héros ---
   Plus un badge flottant au-dessus de l'illustration : les deux variantes
   (été/hiver) sont deux <g> dans le même <svg viewBox="0 0 560 360"> que la
   pièce, déjà positionnés/mis à l'échelle en coordonnées de scène (au sol,
   entre le canapé et la petite table). Comme ils vivent dans le viewBox de
   l'illustration, ils suivent son redimensionnement responsive sans média
   requête ni positionnement CSS séparé. */
.cm-illu-ete{display:block}
.cm-illu-hiver{display:none}
body.mode-hiver .cm-illu-ete{display:none}
body.mode-hiver .cm-illu-hiver{display:block}

@keyframes cm-flotte{
  0%,100%{transform:translateY(0) rotate(-1.5deg)}
  50%{transform:translateY(-10px) rotate(1.5deg)}
}

/* --- clin d'œil "en transition" entre deux sections ---
   Positionné dans un conteneur à hauteur nulle placé ENTRE deux <section>,
   pas dedans : le personnage chevauche la fin de la section du dessus et le
   début de celle du dessous. Centrage en marge fixe (pas en transform) pour
   ne pas entrer en conflit avec le transform de .reveal pendant l'entrée. */
.cm-transition-wrap{
  position:relative;
  height:0;
  max-width:1120px;
  margin:0 auto;
}
.cm-mascotte-transition{
  position:absolute;
  left:50%;
  top:-43px;
  margin-left:-43px;
  width:86px;
  z-index:2;
  filter:drop-shadow(0 12px 22px rgba(14,42,56,.22));
  animation:cm-flotte 4.8s ease-in-out infinite;
  pointer-events:none;
}
.cm-mascotte-transition svg{display:block;width:100%;height:auto}
.cm-mascotte-transition .cm-ete{display:block}
.cm-mascotte-transition .cm-hiver{display:none}
body.mode-hiver .cm-mascotte-transition .cm-ete{display:none}
body.mode-hiver .cm-mascotte-transition .cm-hiver{display:block}
@media(prefers-reduced-motion:reduce){
  .cm-mascotte-transition{animation:none}
}
@media(max-width:900px){
  .cm-mascotte-transition{width:60px;top:-30px;margin-left:-30px}
}

/* --- clin d'œil dans le bloc final (CTA de bas de page) --- */
.cm-mascotte-final{
  width:104px;
  margin:0 auto 10px;
  animation:cm-flotte 5.2s ease-in-out infinite;
}
.cm-mascotte-final svg{display:block;width:100%;height:auto}
@media(prefers-reduced-motion:reduce){
  .cm-mascotte-final{animation:none}
}