/* Le style de base de l'image */
.image1pc {
  
  animation: entreeDouce 2s ease out forwards;
  
 
  transition: transform 0.3s ease-in-out;

  
}

@keyframes entreeDouce {
  from {
    opacity: 0; 
    transform: translateY(40px); 
  }
  to {
    opacity: 1; 
    transform: translateY(0);
  }

  
}


.image1pc:hover {
  
  transform: translateY(-10px) scale(1.02);
  cursor: pointer; 
}

/* ---------------------------------------------------
   1. ANIMATION DU ROBOT CENTRAL
   Il va léviter doucement de haut en bas en permanence.
--------------------------------------------------- */
.robot-central {
    /* Mouvement continu de 3 secondes */
    animation: levitation-robot 3s ease-in-out infinite;
    /* Important pour le SVG : définir le centre des transformations */
    transform-origin: center;
    transform-box: fill-box;
}

@keyframes levitation-robot {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); /* Il monte de 8 pixels */ }
}


/* ---------------------------------------------------
   2. ANIMATION DES ICÔNES AUTOUR (Bulle, Engrenage, etc.)
   Elles vont palpiter (grossir légèrement) et bouger un peu.
--------------------------------------------------- */
.icone-flottante {
    animation: pulse-icone 4s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}

/* On décale le démarrage de l'animation pour chaque icône 
   afin qu'elles ne bougent pas toutes exactement en même temps (effet naturel) */
.icone-1 { animation-delay: 0s; }
.icone-2 { animation-delay: 1s; }
.icone-3 { animation-delay: 2s; }
.icone-4 { animation-delay: 0.5s; }

@keyframes pulse-icone {
    0%, 100% { 
        transform: scale(1) translateY(0) rotate(0deg); 
    }
    50% { 
        /* Grossit de 10%, monte un peu, et tourne de 5 degrés */
        transform: scale(1.1) translateY(-4px) rotate(5deg); 
    }
}


/* ---------------------------------------------------
   3. ANIMATION DES POINTS DE COULEUR (Jaune et Orange)
   Ils dérivent très lentement en arrière-plan.
--------------------------------------------------- */
.point-deco {
    animation: derive-spatiale 6s linear infinite alternate;
}

/* On inverse la direction du deuxième point pour varier */
.point-deco.inverse {
    animation-direction: alternate-reverse;
}

@keyframes derive-spatiale {
    0% { transform: translate(0, 0); }
    100% { transform: translate(12px, -12px); /* Glisse en diagonale */ }
}


/* ---------------------------------------------------
   4. BONUS : INTERACTION AU SURVOL DU SVG ENTIER
   Quand on passe la souris, le robot s'excite un peu !
--------------------------------------------------- */
.conteneur-svg:hover .robot-central {
    animation-duration: 1s; /* Le robot bouge 3x plus vite ! */
}

/* ---------------------------------------------------
   1. L'ORDINATEUR (Section CV)
   Apparition douce par la gauche, et léger effet "tilt" (inclinaison) au survol.
--------------------------------------------------- */
.image-mac-cv {
    /* Glisse depuis la gauche en douceur */
    animation: apparitionGauche 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    
    /* Préparation de la transition pour le survol */
    transition: transform 0.5s ease-out, box-shadow 0.5s ease-out;
}

@keyframes apparitionGauche {
    from {
        opacity: 0;
        transform: translateX(-60px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Au survol : l'image s'avance un peu vers l'utilisateur avec une très légère inclinaison 3D */
.image-mac-cv:hover {
    transform: perspective(1000px) scale(1.03) translateY(-5px) rotateX(2deg) rotateY(-2deg);
    box-shadow: 15px 20px 40px rgba(0, 0, 0, 0.1); /* Ombre douce */
}


/* ---------------------------------------------------
   2. LA FORME 3D (En bas à droite)
   Elle flotte lentement de bas en haut en tournant légèrement.
--------------------------------------------------- */
.element-3d-decor {
    /* Mouvement continu très lent (6 secondes) */
    animation: flottement-3d 6s ease-in-out infinite;
}

@keyframes flottement-3d {
    0%, 100% { 
        transform: translateY(0) rotate(0deg); 
    }
    50% { 
        /* Monte de 20px et tourne de 10 degrés */
        transform: translateY(-20px) rotate(10deg); 
    }
}


/* ---------------------------------------------------
   3. L'ÉTOILE VIOLETTE (En haut à gauche)
   Elle tourne doucement sur elle-même et palpite un peu.
--------------------------------------------------- */
.etoile-violette {
    animation: rotation-etoile 8s linear infinite;
}

/* A holographic plinth integrates the cropped avatar into the FAQ scene. */
.tg-avatar-stage {
    position: relative;
    isolation: isolate;
}
.tg-avatar-stage > img {
    position: relative;
    display: block;
    z-index: 2;
    /* Blend the waist into the light instead of exposing the straight crop. */
    -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
}
.tg-avatar-stage::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 12% 6% 0 15%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgb(19 194 139 / 18%), rgb(19 194 139 / 5%) 48%, transparent 72%);
    pointer-events: none;
}
.tg-avatar-stage::after {
    content: "";
    position: absolute;
    z-index: 3;
    left: 57.5%;
    bottom: -1%;
    width: 47%;
    height: 7%;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 1px solid rgb(20 180 137 / 35%);
    background: radial-gradient(ellipse, rgb(158 247 216 / 80%) 0%, rgb(78 219 173 / 24%) 45%, rgb(236 255 247 / 70%) 74%);
    box-shadow: 0 0 24px rgb(20 194 139 / 16%), 0 12px 22px -12px rgb(0 74 54 / 25%), inset 0 0 12px rgb(255 255 255 / 80%);
    pointer-events: none;
}
.tg-avatar-orbit {
    position: absolute;
    z-index: 1;
    left: 16%;
    top: 18%;
    width: 71%;
    height: 75%;
    border: 1px solid rgb(17 164 122 / 13%);
    border-radius: 50%;
    transform: rotate(-22deg);
    pointer-events: none;
}
.tg-avatar-orbit::before, .tg-avatar-orbit::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #63dcb6;
    box-shadow: 0 0 0 5px rgb(99 220 182 / 12%);
}
.tg-avatar-orbit::before { left: 11%; top: 15%; }
.tg-avatar-orbit::after { right: 6%; bottom: 22%; width: 5px; height: 5px; }

/* Landing page motion: entrance on the container, depth on the image.
   Content stays visible without JavaScript or IntersectionObserver. */
body[data-page="index"] {
    --tg-ease: cubic-bezier(.22, 1, .36, 1);
}
.tg_hero_audiences {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}
.tg_hero_audiences button {
    min-height: 36px;
    padding: 7px 13px;
    border: 1px solid rgb(255 255 255 / 45%);
    border-radius: 999px;
    background: rgb(255 255 255 / 8%);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.tg_hero_audiences button:is(:hover, :focus-visible),
.tg_hero_audiences button.active {
    border-color: #fff;
    background: #fff;
    color: #003d30;
}
.tg_hero_audiences button:focus-visible {
    outline: 3px solid #21d99b;
    outline-offset: 3px;
}
.tg_hero_message {
    min-height: 320px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 300ms ease, transform 420ms var(--tg-ease);
}
.tg_hero_message.is-changing {
    opacity: 0;
    transform: translateY(10px);
}
@media (max-width: 1199px) {
    .tg_hero_message { min-height: 270px; }
}
@media (max-width: 767px) {
    .tg_hero_audiences { gap: 6px; margin-bottom: 16px; }
    .tg_hero_audiences button { min-height: 34px; padding: 6px 10px; font-size: 12px; }
    .tg_hero_message { min-height: 245px; }
}
[data-tg-reveal] {
    transition: opacity 650ms var(--tg-ease) var(--tg-delay, 0ms),
                translate 750ms var(--tg-ease) var(--tg-delay, 0ms),
                scale 750ms var(--tg-ease) var(--tg-delay, 0ms);
}
.tg-pending { opacity: 0; translate: 0 22px; will-change: opacity, translate, scale; }
.tg-pending[data-tg-reveal="left"] { translate: -26px 0; }
.tg-pending[data-tg-reveal="right"] { translate: 26px 0; }
.tg-pending[data-tg-reveal="zoom"] { translate: 0 12px; scale: .97; }
body[data-page="index"] .tg-tilt-image,
body[data-page="index"] .tg-tilt-image:hover {
    animation: none;
    transition: none;
    transform: none;
    transform-origin: center;
    box-shadow: none;
    cursor: auto;
}
body[data-page="index"] .cs_card_thumbnail.tg-motion-host { overflow: visible; }

/* Replace perpetual decoration loops with quiet, scroll-driven motion. */
body[data-page="index"] :is(.robot-central, .cs_elipse_1, [class*="cs_star_shape"], .cs_faq_shape_2) {
    animation: none;
}
body[data-page="index"] :is(.cs_btn, .cs_cta_btn, .cs_step_indfo_wrapper, .cs_pricing_table, .cs_iconbox_icon) {
    transition: transform 280ms var(--tg-ease), box-shadow 280ms ease,
                background-color 250ms ease, border-color 250ms ease, color 250ms ease,
                opacity 650ms var(--tg-ease) var(--tg-delay, 0ms),
                translate 750ms var(--tg-ease) var(--tg-delay, 0ms);
}
body[data-page="index"] :is(.cs_btn, .cs_cta_btn):focus-visible {
    outline: 3px solid #19c994;
    outline-offset: 5px;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    body[data-page="index"] :is(.cs_btn, .cs_cta_btn):hover {
        transform: translateY(-2px);
        box-shadow: 0 9px 24px rgb(0 53 42 / 16%);
    }
    body[data-page="index"] :is(.cs_btn, .cs_cta_btn):active { transform: scale(.98); }
    body[data-page="index"] :is(.cs_step_indfo_wrapper, .cs_pricing_table):hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 36px rgb(0 53 42 / 9%);
    }
    body[data-page="index"] .cs_iconbox:hover .cs_iconbox_icon { transform: translateY(-3px) scale(1.035); }
    body[data-page="index"] .cs_iconbox:hover img { transform: none; }
}
@media (max-width: 1024px), (pointer: coarse) {
    [data-tg-reveal] { transition-duration: 560ms; transition-delay: 0ms; }
    .tg-pending[data-tg-reveal] { translate: 0 16px; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    body[data-page="index"] *, body[data-page="index"] *::before, body[data-page="index"] *::after {
        animation: none !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
    [data-tg-reveal] { opacity: 1 !important; translate: none !important; scale: none !important; }
    body[data-page="index"] :is(.tg-tilt-image, .cs_star_shape_1 > img, .cs_faq_shape_2 > img) { transform: none !important; }
    body[data-page="index"] :is(.tg-tilt-image, .cs_btn, .cs_cta_btn):hover { transform: none !important; }
}
@media print {
    [data-tg-reveal] { opacity: 1 !important; translate: none !important; scale: none !important; }
}

@keyframes rotation-etoile {
    0% { transform: scale(1) rotate(0deg); opacity: 0.7; }
    50% { transform: scale(1.2) rotate(180deg); opacity: 1; }
    100% { transform: scale(1) rotate(360deg); opacity: 0.7; }
}