<?php
$datas = $args['data'];

$titre = isset($datas['titre']) ? $datas['titre'] : '';
$sous_titre = isset($datas['sous_titre']) ? $datas['sous_titre'] : '';
$texte = isset($datas['texte']) ? $datas['texte'] : '';
$image = isset($datas['image']) ? $datas['image'] : '';
$couleur_texte = isset($datas['couleur_texte']) ? $datas['couleur_texte'] : '';

$degrade_debut = get_field('degrade')['debut'];
$degrade_fin = get_field('degrade')['fin'];


$etape_position
  = get_field('degrade')['etape_position'] != '' ? get_field('degrade')['etape_position']  : '0';
$etape_couleur =
  get_field('degrade')['etape_couleur'] != '' ? get_field('degrade')['etape_couleur'] : 'transparent';

$couleur_fond = get_field('couleur');
$theme = get_field('theme');

$deg = 'background:radial-gradient(68.05% 68.05% at 50.00% 57.21%, ' . $degrade_debut . ' 0%, ' . $etape_couleur . ' ' . $etape_position . '%, ' . $degrade_fin . ' 100%);'

?>
bla
<div class="bg absolute w-full h-[370px] lg:h-full top-0 left-0 z-0 " style=" <?php echo $deg; ?>"></div>
<div class="container relative lg:h-[560px]">
  <div class="flex flex-col lg:grid lg:grid-cols-5 items-center lg:h-full">
    <div class="left w-full lg:w-auto col-span-2 scroll-appear order-2 lg:order-1 px-2 lg:px-0">
      <style>
        h1 {
          color: black;

          @media screen and (min-width: 984px) {
            color: <?php echo $couleur_texte ?>;
          }
        }
      </style>

      <h1 class=" heading-text text-xs md:text-[19px] tracking-[2.85px] leading-[170%]  text-center mt-8 md:mt-0"> <strong class="block text-base lg:text-[30px] tracking-[4.5px]"><?php echo get_the_title() ?></strong><?php echo $sous_titre ?></h1>

      <div class="mx-auto text-center">
        <?php include('lien_dachat.php'); ?>
      </div>
    </div>

    <div class="center h-full relative order-1 lg:order-2 pt-5 lg:pt-20">
      <img <?php acf_responsive_image($image['id'], 'page', null,) ?> class="w-[150px] mx-auto lg:object-contain lg:max-h-[550px] lg:w-full lg:absolute scroll-appear scroll-appear-image">
    </div>
    <div class="right px-2 lg:px-0 col-span-2 lg:pl-20 text-[17px] scroll-appear order-3 lg:order-3 text-sm lg:text-base text-black">
      <div class="hidden lg:block max-w-sm" style="color:<?php echo $couleur_texte ?>"><?php echo $texte ?></div>
      <div class="lg:hidden pt-10"><?php echo $texte ?></div>
    </div>

  </div>
</div>
