/*
Theme Name: Portfolio
Theme URI: 
Author: Romain Testaert
Author URI: 
Description: Mon premier portfolio créé
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: portfolio
Tags: 
*/

/* ============================================
   2. VARIABLES CSS (:root)
   ============================================ */

:root {
  /* Colors */
  --color-primary: #7b3fbf;
  --color-secondary: #414b5a;
  --color-light: #fff9f2;
  --color-dark: #121212;
  --color-white: #ffffff;

  /* Font sizes */
  --fs-xl: 7.2rem; /* Gros titres */
  --fs-lg: 5.2rem; /* Titres secondaires */
  --fs-md: 2.8rem; /* Titres tertiaires */
  --fs-base: 1.6rem; /* Texte normal */
  --fs-sm: 1.2rem; /* Petit texte */

  /* Spacing */
  --spacing-xs: 1rem;
  --spacing-sm: 2rem;
  --spacing-md: 4rem;
  --spacing-lg: 8rem;
  --spacing-xl: 12rem;

  /* Border radius */
  --border-radius-sm: 0.8rem;
  --border-radius-md: 1rem;

  /* Box shadow */
  --shadow-project: 5px 5px 15px rgba(123, 63, 191, 100%);

  /* Nouvelle variable pour l'ombre des titres */
  --shadow-title: 2px 2px 5px rgba(0, 0, 0, 0.2);

  /* Font weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes flip3d {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

/* animation logo accueil */

.wp-image-166 {
  animation: fadeIn 2s ease-out, flip3d 6s linear infinite;
  animation-delay: 0s; 
  transform-style: preserve-3d; 
  width: 35rem;
  filter: drop-shadow(0 15px 30px rgba(123, 63, 191, 0.5));
  height: auto;
  display: block;
  filter: drop-shadow(0 15px 30px rgba(123, 63, 191, 0.5));
  border-radius: 1rem;
}

.wp-image-166 {
  perspective: 500px;
}

/* fin animation logo accueil */


/* animation btn3 */

.wp-block-button__link {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border: 4px solid var(--color-primary);
  background-color: transparent;
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: color 0.4s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
	font-family: lexend, sans-serif;
	font-size: 16px;
}

.wp-block-button__link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, var(--color-dark), var(--color-primary));
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.wp-block-button__link:hover,
.wp-block-button__link:active {
  color: var(--color-light);
}

.btn-nav:hover,
.btn-nav:active {
  color: var(--color-light);
}

.wp-block-button__link:hover::before,
.wp-block-button__link:active::before {
  opacity: 1;
}

.btn-nav:hover::before,
.btn-nav::before:active::before {
  opacity: 1;
}

.wp-block-button__link:active,
.btn-nav:active {
  transform: scale(0.98);
}

/* fin animation btn3 */

h1,
h2,
h3,
h4 {
  text-shadow: var(--shadow-title);
}