body                        {background: url('../img/illustration/fond-accueil-zone1.jpg') center center no-repeat; background-size: cover; display: block; padding: 50px 0px; height: 100vh;}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .25);
    /* voile discret */
    pointer-events: none; }
.content                    {width: 100%; max-width: 450px; margin: 0px auto; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); border-radius: 8px; padding-top: 100px; padding-bottom:0px; position: relative;font-family: 'Arial', sans-serif;text-align: center; box-sizing: border-box;}
.content .logolinktree 		{width:200px; height:70px; background:url('../img/fond/logo.png') center center no-repeat; background-size: cover; position: relative; margin:20px auto; display: block; z-index: 20;}
.content .slogan            {font-size: 14px; color: #666; margin: 20px auto;}
.content h1                 {font-size: 24px; color: #333; margin: 30px auto 50px auto; font-weight: normal;}
.content .social            {margin: 10px auto 10px auto; padding: 0px; box-sizing: border-box; display: flex; justify-content: center; flex-direction: column; flex-wrap: wrap; gap: 10px; width: 100%;}
.content .social p          {font-size: 13px; color: #333; margin: 0px auto 10px auto;}
.content .social a          {display: block; font-size:13px; width: 300px; height: 40px; border-radius: 20px; background: #ffffff; box-shadow: 0px 2px 1px rgba(0,0,0,0.1); text-align: center; line-height: 40px; color: #333; transition: all 0.3s ease; display: flex; justify-content: center; align-items: center; text-decoration: none; box-sizing: border-box; margin: 0px auto; cursor: pointer;}
.content .social a:focus-visible {outline: 2px solid #ff9800; outline-offset: 2px; }
.content .social a img      {width: 20px; height: 20px; margin-right: 10px;}
.content .social a:hover    {background: #f0f0f0; box-shadow: 0px 4px 2px rgba(0,0,0,0.2); transform: translateY(-2px);}

.content .page-footer       {padding: 0px !important; border-bottom-right-radius:8px; border-bottom-left-radius:8px; }
.content .page-footer .footer-copyright {border-bottom-right-radius:8px; border-bottom-left-radius:8px; }

/* Entrée du bloc central */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .content {
    animation: fadeUp .6s ease-out both;
  }
  
  /* Stagger sur les liens */
  @keyframes popIn {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .content .social a {
    opacity: 0;                /* état initial */
    animation: popIn .4s ease-out both;
  }
  .content .social a:nth-child(1) { animation-delay: .10s; }
  .content .social a:nth-child(2) { animation-delay: .18s; }
  .content .social a:nth-child(3) { animation-delay: .26s; }
  .content .social a:nth-child(4) { animation-delay: .34s; }
  .content .social a:nth-child(5) { animation-delay: .42s; }
  .content .social a:nth-child(6) { animation-delay: .50s; }
  .content .social a:nth-child(7) { animation-delay: .58s; }
  
  /* Respecte les préférences d’accessibilité */
  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
  }
  

@media only screen and (max-width: 601px) {
    body                    {padding: 0px;}
    .content                {background:rgba(255,255,255,0.7); background-image:unset !important; height: 100vh; position: relative; padding-top:20px;}
    .content .logolinktree  {margin: 0px auto;}
    .content .slogan        {font-size: 11px; margin: 10px auto;}
    .content h1             {margin: 20px auto 20px auto;}

    .content .page-footer   {position: absolute; bottom: 0px; width: 100%; margin: 0px auto;}
    .content .page-footer .footer-copyright {margin: 0px auto;}
}