/* ==========================================================================
   Importation des police Google Fonts & Réinitialisation
   ========================================================================== */
   @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

   :root {
     /* Palette de Couleurs */
     --bleu-marine-dark: #0B192C;   /* Bleu Marine très foncé */
     --bleu-marine: #1E3E62;        /* Bleu Marine classique */
     --flamme: #FF6500;             /* Orange Flamme vif */
     --flamme-hover: #E05300;       /* Flamme plus sombre au survol */
     
     --bg-light: #F8FAFC;          /* Fond de page très clair */
     --text-dark: #1E293B;          /* Couleur texte principal */
     --text-muted: #64748B;         /* Texte secondaire */
     --white: #FFFFFF;
     
     /* Ombres & Transitions */
     --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
     --shadow-lg: 0 10px 25px -5px rgba(11, 25, 44, 0.15);
     --transition: all 0.3s ease;
   }
   
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   body {
     font-family: 'Poppins', sans-serif;
     background-color: var(--bg-light);
     color: var(--text-dark);
     line-height: 1.6;
   }
   
   /* ==========================================================================
      Section Contact Layout
      ========================================================================== */
   .contact {
     max-width: 1100px;
     margin: 50px auto;
     padding: 0 20px;
     display: grid;
     grid-template-columns: 1fr 1.5fr;
     gap: 0; /* Pas d'espace entre les deux cartes pour l'effet fusionné */
     box-shadow: var(--shadow-lg);
     border-radius: 16px;
     overflow: hidden; /* Pour garder les coins arrondis */
   }
   
   /* ==========================================================================
      1. Carte d'informations (Bleu Marine)
      ========================================================================== */
   .contact-info {
     background: linear-gradient(135deg, var(--bleu-marine-dark) 0%, var(--bleu-marine) 100%);
     color: var(--white);
     padding: 50px 40px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     position: relative;
   }
   
   /* Petit accent décoratif couleur Flamme */
   .contact-info::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 5px;
     background: var(--flamme);
   }
   
   .contact-info h2 {
     font-size: 2rem;
     font-weight: 700;
     margin-bottom: 25px;
     position: relative;
     display: inline-block;
   }
   
   .contact-info h2::after {
     content: "";
     position: absolute;
     bottom: -8px;
     left: 0;
     width: 50px;
     height: 3px;
     background-color: var(--flamme);
     border-radius: 2px;
   }
   
   .contact-info p {
     font-size: 1.05rem;
     margin-bottom: 20px;
     display: flex;
     align-items: center;
     color: #E2E8F0;
     transition: var(--transition);
   }
   
   .contact-info p:hover {
     transform: translateX(5px);
     color: var(--white);
   }
   
   /* ==========================================================================
      2. Formulaire de Contact (Blanc / Flamme)
      ========================================================================== */
   .contact-form {
     background-color: var(--white);
     padding: 50px 40px;
   }
   
   .contact-form h2 {
     font-size: 1.8rem;
     color: var(--bleu-marine-dark);
     margin-bottom: 20px;
     font-weight: 600;
   }
   
   /* Messages d'alerte PHP (Success & Error) */
   .success {
     background-color: #D1FAE5;
     color: #065F46;
     padding: 12px 15px;
     border-radius: 8px;
     border-left: 4px solid #10B981;
     margin-bottom: 20px;
     font-size: 0.95rem;
   }
   
   .error {
     background-color: #FEE2E2;
     color: #991B1B;
     padding: 12px 15px;
     border-radius: 8px;
     border-left: 4px solid #EF4444;
     margin-bottom: 20px;
     font-size: 0.95rem;
   }
   
   /* Styles des champs du formulaire */
   .contact-form form {
     display: flex;
     flex-direction: column;
     gap: 18px;
   }
   
   .contact-form input,
   .contact-form textarea {
     width: 100%;
     padding: 14px 18px;
     border: 1.5px solid #E2E8F0;
     border-radius: 8px;
     font-family: inherit;
     font-size: 0.95rem;
     color: var(--text-dark);
     background-color: #F8FAFC;
     transition: var(--transition);
     outline: none;
   }
   
   .contact-form input::placeholder,
   .contact-form textarea::placeholder {
     color: var(--text-muted);
   }
   
   /* Effet au clic (Focus) */
   .contact-form input:focus,
   .contact-form textarea:focus {
     border-color: var(--bleu-marine);
     background-color: var(--white);
     box-shadow: 0 0 0 4px rgba(30, 62, 98, 0.1);
   }
   
   .contact-form textarea {
     resize: vertical;
     min-height: 140px;
   }
   
   /* Bouton Envoyer (Couleur Flamme) */
   .contact-form button[type="submit"] {
     background-color: var(--flamme);
     color: var(--white);
     border: none;
     padding: 15px 30px;
     font-size: 1rem;
     font-weight: 600;
     border-radius: 8px;
     cursor: pointer;
     transition: var(--transition);
     box-shadow: 0 4px 12px rgba(255, 101, 0, 0.3);
     margin-top: 5px;
   }
   
   .contact-form button[type="submit"]:hover {
     background-color: var(--flamme-hover);
     transform: translateY(-2px);
     box-shadow: 0 6px 15px rgba(255, 101, 0, 0.4);
   }
   
   .contact-form button[type="submit"]:active {
     transform: translateY(0);
   }
   
   /* ==========================================================================
      Responsive Design (Adaptation Mobile)
      ========================================================================== */
   @media (max-width: 850px) {
     .contact {
       grid-template-columns: 1fr; /* Passe à une seule colonne sur mobile */
       margin: 20px auto;
     }
   
     .contact-info, 
     .contact-form {
       padding: 35px 25px;
     }
   }