:root {
    /* Couleurs basées sur le logo */
    --bleu-principal: #1F4599; 
    --jaune-accent: #FFC300;
    --blanc: #FFFFFF;
    --gris-clair: #f4f4f4;
    --texte-sombre: #333;

    /* Polices (estimation basée sur l'apparence) */
    --police-titre: 'Garamond', serif; 
    --police-corps: 'Helvetica Neue', Arial, sans-serif;
}

/* Styles de base et réinitialisation */
body                        {font-family: var(--police-corps); line-height: 1.6; margin: 0;
                            padding: 0; background-color: var(--blanc); color: var(--texte-sombre);}

h1, h2, h3                  {font-family: var(--police-titre); color: var(--bleu-principal);
                            line-height: 1.2;}

a                           {color: var(--bleu-principal); text-decoration: none;}

a:hover                     {text-decoration: underline;}

.container                  {width: 90%; max-width: 1200px; margin: auto; overflow: hidden;
                            padding: 20px 0;}

header                      {background: var(--blanc); padding: 10px 0;
                            border-bottom: 3px solid var(--jaune-accent); text-align: center;}

header .logo-container      {display: flex; justify-content: center; align-items: center;
                            flex-wrap: wrap;}

header img                  {max-width: 150px; /* Taille maximale du logo */ height: auto;
                            margin-right: 15px; /* Espace entre le logo et le texte */}

header h1                   {font-size: 2.5em; color: var(--bleu-principal); margin: 0;
                            text-align: left;}

header .tagline             {font-family: 'Brush Script MT', cursive; 
                            font-size: 1.8em; color: var(--jaune-accent); margin-top: -10px;
                            text-align: left;}

/* Section Héro */
#hero                       {background: var(--bleu-principal); color: var(--blanc);
                            padding: 60px 0; text-align: center;}

#hero h2                    {color: var(--jaune-accent); font-size: 2.2em; margin-bottom: 10px;}

#hero p                     {font-size: 1.1em; max-width: 800px; margin: 0 auto 20px auto;}

#hero img                   {width: 100%;}

.cta-button                 {display: inline-block; background: var(--jaune-accent);
                            color: var(--bleu-principal); padding: 10px 20px;
                            border-radius: 5px; font-weight: bold;
                            text-transform: uppercase; transition: background-color 0.3s;}

.cta-button:hover           {background: #FFD740; text-decoration: none;}

/* Sections Contenu */
.section                    {padding: 40px 0;}

.section:nth-child(even)    {background: var(--gris-clair);}

.section h3                 {font-size: 1.8em; border-bottom: 2px solid var(--jaune-accent);
                            padding-bottom: 10px; margin-bottom: 20px; text-align: center;}

.mission-vision             {display: flex; justify-content: space-between; gap: 20px;}

.mission-vision div         {flex: 1; padding: 15px; border: 1px solid var(--gris-clair);
                            border-radius: 8px; background-color: var(--blanc);}

/* Grille d'impact */
.impact-grid                {display: flex; flex-wrap: wrap; justify-content: center;
                            gap: 20px; text-align: center;}

.impact-item                {flex-basis: calc(50% - 20px); /* 2 items par ligne sur desktop */
                            background: var(--blanc); padding: 20px; border-radius: 8px;
                            box-shadow: 0 2px 4px rgba(0,0,0,0.1);}

.impact-item strong         {display: block; font-size: 2em; color: var(--jaune-accent);
                            margin-bottom: 5px;}

/* Section Fondatrice */
#founder-section            {background: var(--bleu-principal); color: var(--blanc);
                            padding: 40px 0;}

.founder-content            {display: flex; align-items: center; gap: 30px;}

.founder-content img        {max-width: 250px; height: auto; border-radius: 50%;
                            border: 5px solid var(--jaune-accent); object-fit: cover;}

.founder-text h3            {color: var(--jaune-accent); text-align: left;}

.founder-text p             {margin-bottom: 15px;}

/* Section Événement */
#event-section              {padding: 40px 0; text-align: center;}

.event-details              {background: var(--jaune-accent); color: var(--bleu-principal);
                            padding: 20px; border-radius: 8px; margin-bottom: 20px;
                            display: inline-block;}

.event-details strong       {display: block; margin: 5px 0; font-size: 1.1em;}

.event-action p             {margin-bottom: 10px;}

.event-action .contribution {font-size: 1.5em; color: #E60000; /* Rouge pour le prix */
                            font-weight: bold; margin: 15px 0; display: block;}

/* Footer */
footer                      {background: var(--texte-sombre); color: var(--blanc);
                            text-align: center; padding: 20px 0; font-size: 0.9em;}

footer a                    {color: var(--jaune-accent);}
#about i                    {color: var(--bleu-principal);}

/* Media Queries pour la réactivité */
@media (max-width: 768px) 
{
  h1                          {font-size: 2em;}
  #hero h2                    {font-size: 1.8em;}  
  .mission-vision             {flex-direction: column;}  
  .impact-item                {flex-basis: 100%; /* 1 item par ligne sur mobile */}
  .founder-content            {flex-direction: column; text-align: center;}  
  .founder-content img        {margin: 0 auto;}  
  .founder-text h3            {text-align: center;}  
  header .logo-container      {flex-direction: column;}  
  header img                  {margin-right: 0; margin-bottom: 10px;}  
  header h1, header .tagline  {text-align: center;}
}