/*
Theme Name: GeneratePress Child
Theme URI: https://optifoot.live
Description: Thème enfant basé sur GeneratePress pour le projet OptiFoot.
Author: Votre Nom
Author URI: https://votre-site.com
Template: generatepress
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: generatepress-child
*/





/* -------------------------------
   1. Variables globales : couleurs, arrondis, espacements
--------------------------------- */
:root {
  /* Couleurs principales */
  --color-primary: #004AAD;
  --color-secondary: #FFCF0E;
  --color-white: #FFFFFF;

  /* Nuances de bleu */
  --color-blue-dark: #00347A;
  --color-blue-medium: #005FCC;
  --color-blue-light: #E6F0FA;

  /* Couleurs d'équilibre */
  --color-gray-very-light: #F7F9FC;
  --color-gray-light: #E1E5EA;
  --color-gray-text: #4A4A4A;
  --color-gray-dark: #1F1F1F;

  /* Arrondis */
  --radius-card: 12px;
  --radius-button: 8px;
  --radius-input: 6px;
  --radius-badge: 20px;
}

/* -------------------------------
   2. Polices
--------------------------------- */
@font-face {
  font-family: 'Lovelo';
  src: url('/wp-content/themes/generatepress-child/assets/fonts/Lovelo-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');

/* -------------------------------
   3. Typographie
--------------------------------- */
h1 {
  font-family: 'Lovelo', sans-serif;
  font-weight: 900;
  font-size: 2.25rem; /* 36px */
  color: var(--color-primary);
  margin-bottom: 1.5rem;
}

h2 {
  font-family: 'Lovelo', sans-serif;
  font-weight: 900;
  font-size: 1.875rem; /* 30px */
  color: var(--color-primary);
  margin-bottom: 1.5rem;
}

h3 {
  font-family: 'Questrial', sans-serif;
  font-weight: 400;
  font-size: 1.5rem; /* 24px */
  color: var(--color-gray-dark);
  margin-bottom: 1rem;
}

h4 {
  font-family: 'Questrial', sans-serif;
  font-weight: 400;
  font-size: 1.25rem; /* 20px */
  color: var(--color-gray-dark);
  margin-bottom: 1rem;
}

p {
  font-family: 'Questrial', sans-serif;
  font-size: 1rem;
  color: var(--color-gray-text);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.small-text {
  font-size: 0.875rem;
  color: var(--color-gray-text);
}

/* -------------------------------
   4. Boutons
--------------------------------- */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-button);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-family: 'Questrial', sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}


.btn-outline {
  background-color: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: var(--radius-button);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-family: 'Questrial', sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background-color: var(--color-secondary); /* Jaune */
  color: var(--color-gray-dark); /* Texte noir foncé */
  border-color: var(--color-secondary); /* optionnel : harmoniser la bordure */
}


.btn-yellow {
  background-color: var(--color-secondary); /* Jaune */
  color: var(--color-gray-dark);            /* Noir foncé */
  border: none;
  border-radius: var(--radius-button);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-family: 'Questrial', sans-serif;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-yellow:hover {
  background-color: #e6b800; /* Variante plus foncée du jaune */
}


/* -------------------------------
   5. Layouts (Grid)
--------------------------------- */
.layout-3-columns {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  gap: 2rem;
}

.layout-2-columns {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 2rem;
}

/* Responsive pour layout-3-columns */
@media (max-width: 767px) {
  .layout-3-columns {
    grid-template-columns: 1fr;
  }
}

/* Responsive pour layout-2-columns */
@media (max-width: 767px) {
  .layout-2-columns {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------
   6. Containers & Sections
--------------------------------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem; /* mobile */
}

@media (min-width: 768px) {
  .container {
    padding: 0 2rem; /* tablette */
  }
}

.section {
  margin-bottom: 3rem; /* 48px */
}

.section-title {
  margin-bottom: 1.5rem; /* 24px */
}

/* -------------------------------
   7. Composants
--------------------------------- */
.card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-card);
  padding: 1.5rem; /* 24px */
}

/* Grille de cartes responsive */
.grid-cards {
  display: grid;
  gap: 1.5rem; /* 24px */
  grid-template-columns: 1fr; /* mobile */
}

@media (min-width: 768px) {
  .grid-cards {
    grid-template-columns: repeat(2, 1fr); /* tablette */
  }
}

@media (min-width: 1024px) {
  .grid-cards {
    grid-template-columns: repeat(3, 1fr); /* desktop */
  }
}