/* dosis-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/dosis-v34-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dosis-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/dosis-v34-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dosis-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/dosis-v34-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* exo-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Exo';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/exo-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* exo-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Exo';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/exo-v25-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* hind-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Hind';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/hind-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* hind-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Hind';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/hind-v18-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ========  Variables Principales (Root)   ============ */
:root {
   /* Couleurs principales*/
   --color-dark-green: #FFFFFF; /* Vert très foncé/noirâtre */
   --color-medium-green: #90a88e; /* Vert sauge/gris-vert */
  --color-light-green: #e0ffe2; /* Vert très clair/menthe pâle */
   --color-black: #000000;
   
   /* Couleurs secondaires */
   --color-white: #ffffff;
   --color-text-dark: var(--color-dark-green);
   --color-text-light: var(--color-white);
  --color-accent: var(--color-medium-green);
}

/* =======   Styles Généraux (Global)   ========= */

/* Global */

body{
   background-color: #1a1a1a;
   font-family: 'Dosis';
   place-items: center;
   margin: 0;
   min-height: 100vh;
   padding-bottom: 5px;
   background: linear-gradient(#000000, #38412F, #000000);
}

h1{
   margin-top: 3rem;
   font-size: 3em;
   text-transform: uppercase;
}

h2 {
   font-size: 2em;
   margin-top: 1.5em;
   padding-bottom: 2rem;
   color: #FFFFFF;
}

p {
   margin-bottom: 1em;
}

a{
   color: var(--color-text-dark);
   text-decoration: none;
   transition: color 0.3s;
}

a:hover {
  color: #043721;
}

/* ============= Disposition & Utilitaires (Layout & Utilities) ========== */

.container{
   width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
}

/* ========= En-tête (Header) & Navigation ======== */
header{
   background: linear-gradient(to right, #043721, #0FD898);
   width: 100%;
   border-bottom: 1.5px solid #968e8e;
   margin-bottom: 50px;

}

header .container{
   display: flex;
  align-items: center;
}

header a{
   padding-right: 70px;
   display: flex;
   align-items: center;
}

.navigation{
   display: flex;
   gap: 70px;
   font-family: 'hind';
}

/* ============ Section Hero (Accueil) ============ */
.hero{
   background: linear-gradient(
      to bottom, /* Direction du gradient */
      rgba(0, 0, 0, 0.7), /* En haut : très peu opaque */
      rgba(0, 0, 0, 0.1)  /* En bas : plus opaque */
    ),
    url(../img/BcgrdHero.png);
   background-size: cover;
   background-position: center;
   height: 90vh;
   width: 100%;
   
}

.hero .container{
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 40px;
   padding-block: 3rem;
}

.hero__name{
   color: var(--color-medium-green);
}

.hero p{ 
   font-family: 'Exo';
   font-style: italic;
   font-weight: 400;
   font-size: 3rem;
}

.AboutME{
   display: flex;
   justify-content: flex-start;
   color: #C1C3C7;
   margin-bottom: 5rem;
   margin-top: 2rem;
   color: #C1C3C7;
}

/* ==========Section Compétences (Accueil) ============ */
#Compétences{
   margin-bottom: 35.6rem;
   margin-top: 30rem;
}

.Comp{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1.75rem;
   margin-bottom: 7.03rem;
}

.listSkills{
   display:flex;
   align-items: center;
   justify-items: center;
   gap: 4.5rem;
}

.piluleSkills{  
   background-color: #FFFFFF;
   padding-inline: 5.4rem;
   padding-block: 0.6rem;
   border-radius: 2.4rem;
   font-weight: 600;
   flex-wrap: wrap;
   transition: transform 0.2s ease;
}

.piluleSkills:hover{
   transform: scale(1.05);
}

.listSkills a{
   color: #000000;
}

/* ================== Section Projets (Accueil)========== */
#LastProjects{
   margin-bottom: 34.6rem;
}

.listProjets{
   display: flex;
   justify-content: center;
   gap: 18.1rem;
}

.PjtOne, .PjtTwo{
   border: 1px solid #968e8e;
   padding: 8px;
   border-radius: 8px;
   background-color: #70825E;
   transition: transform 0.3s, box-shadow 0.3s;
}

.PjtOne:hover, .PjtTwo:hover{
   transform: scale(1.05);
}

.listProjets p{
  font-size: 1.6rem;
   font-family: 'hind';
}

/* ========== Section Contact (Accueil) ======= */
#contact{
   margin-bottom: 25rem;
   text-align: center;
   justify-items: center;
}

#contact h2, #contact p {
   text-align: center;
   margin-bottom: 15px;
}

#contact p{
   width: 556px;
   height: 108px;
   font-size: 1.6rem;
   font-family: 'Exo';
   font-style: italic;
   text-align: center;
   color: #C1C3C7;

}

.Mecontacter{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1.75rem;
   margin-bottom: 7.03rem;
}

.contact-container {
   display: flex;
   align-items: center; /* Centre verticalement les deux blocs */
   gap: 40px; /* Espace entre la carte et les infos */
   max-width: 1100px; /* Limite la largeur sur grand écran */
   margin: 0 auto; /* Centre le conteneur */
}

.map-container, .info-container {
   flex: 1;
   margin-top: 6rem;
}

.info-container li {
   display: flex;
   align-items: center;
   margin-bottom: 25px; /* Espace entre chaque ligne */
}

.info-container li:last-child {
   margin-bottom: 0rem;
}

.info-container li img {
   width: 24px; /* Ajustez la taille de vos icônes */
   height: 24px;
   margin-right: 15px; /* Espace entre l'icône et le texte */
}

.info-container li a,
.info-container li span {
   color: #FFFFFF;
   text-decoration: none;
   font-size: 1.6rem;
}

.info-container li a:hover {
   text-decoration: underline;
}

iframe{
  border-radius: 8px;
}

/* ============ Composants (Boutons, Cartes, Icônes) =========== */

/* -- Boutons -- */
.btnHero2{
  background-color: transparent;
  border: 1px solid #FFFFFF;
   padding-inline: 24px;
   padding-block: 13px;
   border-radius: 24px;
   font-family: 'hind';
   font-weight: 600;
}

.btnHero1{
   background: linear-gradient(to right, #043721, #0FD898);
   padding-inline: 24px;
   padding-block: 13px;
   border-radius: 24px;
   font-family: 'hind';
  border: 1px solid #FFFFFF;
  font-weight: 600;
}

.prjt-Contact{
  display: flex;
   gap: 2.4rem;
}


.SavoirPlus{
   display: flex;
   justify-content: center;
}

.BTNplus{
   display: flex;
   justify-content: center;
   width: 150px;
   padding-inline: 1.2rem;
   padding-block: 1.2rem;
   margin-top: 10rem;
   border-radius: 8px;
   background-color: #90a88e;
   
}

.cta-button {
     background-color: #ffffff;
   color: #333333;
   padding: 10px 18px;
  border: none;
   border-radius: 4px;
   font-size: 12px;
  font-weight: bold;
   text-decoration: none;
  display: inline-block;
   transition: background-color 0.3s ease;
}

.cta-button:hover {
   background-color: #f0f0f0;
}

.btnClose{
   background-color: #70825E;
   border: none;
   padding: 12px 24px;
   border-radius: 4px;
   letter-spacing: 0.5px;
}

.btnClose{
   margin-left: 30%;
}

.btnClose:hover{
   background-color: #7a917a;
}


/* -- Icônes -- */
.icon1{
   background-image: url(../img/IconCompetences.svg);
   width: 65px;
   height: 65px;
   background-size: cover;
}

.icon2{
   background-image: url(../img/IconProjets.svg);
   width: 50px;
   height: 65px;
   background-size: cover;
}

.icon3{
   background-image: url(../img/IconContact.svg);
   width: 60px;
   height: 65px;
   background-size: cover;
}


/* -- Carte Newsletter -- */
.newsletterCard{
   background-color: #e6f0f0;
   color: #333;
   padding: 2.4rem;
   max-width: 300px;
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   position: relative; 
   top: 50%;
   left: 95%;
   z-index: 1001;
   transform: translate(100vw, -50%);
   opacity: 0;
   animation-name: slideInFromRight;
   animation-duration: 0.9s;
   animation-delay: 0.1s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}

.newsletterCard h2{
   color: #70825E;
   font-size: 4rem;
  margin-top: 0;
   font-weight: 700;
}
.newsletterCard p{
  font-size: 1.7rem;
   margin-bottom: 2.4rem;
   line-height: 1.6;
}

/* ====== Footer ============ */
footer{
   width: 100%;
   padding-top: 7rem;
}

.site-footer{
   background: linear-gradient( #043721, #0FD898);
   border-top: 1px solid #968e8e;
}

.footer-container{
   max-width: 1200px;
   margin: 0 auto;
  padding: 0 20px;
}

/* sous catégories */

.footer-main{
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.footer-column{
   min-width: 200px;
   flex: 1;
}

.footer-info p{
   margin: 5px 0;
   font-size: 16px;
}

.footer-menu h4, .footer-legal h4{
   color: #ffffff;
   font-size: 16px;
   margin-top: 0;
  margin-bottom: 15px;
}

.footer-menu ul, .footer-legal ul{
   list-style: none;
   padding: 0;
   margin: 0;
}

.footer-menu li, .footer-legal li{
   margin-bottom: 10px;
}

.footer-menu a, .footer-legal a{
   color: #FFFFFF;
   text-decoration: none;
   font-size: 14px;
}

.footer-menu a:hover, .footer-legal a:hover{
   text-decoration: underline;
}

.footer-cta {
   text-align: right;
   font-weight: 600;
}

.footer-divider {
   border: 0;
   border-top: 1px solid #e0ffe2;
   margin: 30px 0;
}

.footer-bottom {
   display: flex;
  justify-content: space-between;
  align-items: center;
   gap: 40px;
   font-size: 15px;
}

.footer-social a {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   width: 32px;
   height: 32px;
   border: 1px solid #ffffff;
   border-radius: 50%; /* Pour faire des cercles */
   color: #ffffff;
   text-decoration: none;
   margin-right: 8px;
   transition: background-color 0.3s ease;
}

.footer-social a:hover {
   background-color: rgba(255, 255, 255, 0.1);
}

.footer-links{
   display: flex;
   gap: 2rem;
}

/* ========= Animations (Keyframes) ========== */
@keyframes slideInFromRight {
   from {
   transform: translate(100vw, -50%);
   opacity: 0;
   }
   to {
   transform: translate(-50%, -50%);
   opacity: 1;
   }
}

/* ============ Media Queries (Accueil) ======= */
@media (max-width: 768px) {
   .contact-container {
   flex-direction: column; /* Empile les éléments verticalement */
   }
}

/* ########################################################################## */
/* ##
/* ## DEBUT PAGE PROJET
/* ##
/* ########################################################################## */

/* ========= PAGE PROJET - Variables & Focus  ===== */

/*PAGE PROJET*/

:root {
   --color-background: #2D2D2D; /* Gris foncé du fond */
   --color-text: #E0E0E0;    /* Texte principal (blanc cassé) */
   --color-text-secondary: #B0B0B0; /* Texte plus discret */
    --color-primary: #00A98F; /* Vert principal (approximatif) */
  --color-surface: #353535;   /* Gris un peu plus clair (ex: footer) */
   --color-accent: #FFFFFF;    /* Blanc pur (titres, etc.) */
   --font-main: 'Arial', sans-serif; /* CHANGE CETTE POLICE */
}


:focus-visible {
   outline: 3px solid var(--color-primary);
   outline-offset: 3px;
  border-radius: 4px;
}

/* ===========   PAGE PROJET - Header  ============ */

.site-header {
   background-color: var(--color-surface); /* Ou une nuance de ton vert */
  padding: 1.5rem 0;
   border-bottom: 1px solid #444;
}

.header-container {
  display: flex;
   justify-content: space-between;
   align-items: center;
}

.logo a {
   font-size: 1.5rem;
   font-weight: bold;
  color: var(--color-accent);
}

.main-nav ul {
   display: flex;
   gap: 2rem;
}

.main-nav a {
   font-size: 1rem;
   color: var(--color-text);
}
/* Souligne la page active */
.main-nav a[aria-current="page"] {
  color: var(--color-primary);
  font-weight: bold;
}

/* =========== PAGE PROJET - Introduction   ========== */
.project-intro {
  padding: 5rem 0;
  text-align: left;
}

.project-intro .container {
  max-width: 800px; /* Limite la largeur du texte d'intro */
  margin-left: auto;
   margin-right: auto;
}

.breadcrumb {
   font-size: 3.5rem;
   color:  #70825E;
   font-weight: 600;
}

.project-intro h1 {
   color: var(--color-accent);
}

.subtitle {
   font-size: 1.8rem;
   color: var(--color-text-secondary);
   font-family: 'Exo';
   font-style: italic;
}

/* ======= PAGE PROJET - Galerie ========== */

.project-gallery {
   padding-bottom: 5rem;
}

.gallery-wrapper {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
}

.gallery-main-image img {
  
   min-height: 300px; /* À ajuster */
   background-color: #555; /* Placeholder si l'image ne charge pas */
   object-fit: contain;
}

.gallery-nav {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background-color: rgba(255, 255, 255, 1);
   color: #000;
   border: none;
   border-radius: 50%;
   width: 50px;
   height: 50px;
   font-size: 1.5rem;
   cursor: pointer;
   transition: background-color 0.3s ease;
   z-index: 10;
}

.gallery-nav:hover {
   
   background-color: rgba(255, 255, 255, 0.9);
}

.gallery-nav.prev { left: 150px; }
.gallery-nav.next { right: 150px; }

.gallery-pagination {
   display: flex;
   justify-content: center;
     gap: 12px;
   margin-top: 1.5rem;
}

.gallery-pagination .dot {
   width: 40px; /* Petits rectangles de la maquette */
   height: 6px;
   background-color: #555;
   border-radius: 3px;
   cursor: pointer;
}

.gallery-pagination .dot.active {
   background-color: var(--color-primary);
}

/* ============ PAGE PROJET - Contenu Détaillé (Description, Outils)========== */

.project-content {
   padding-bottom: 5rem;
}

.content-block {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4rem;
   align-items: center;
   margin-bottom: 5rem;
}

.content-block .image-content {
   background-color: #555; /* Placeholder */
   min-height: 300px;
   border-radius: 12px;
}

.content-block .text-content p {
  color: var(--color-text-secondary);
   margin-bottom: 1rem;
   font-family: 'hind';

}

.content-block .text-content h2{
   color: #00A98F;
   margin-bottom: 1rem;
}

.content-block .text-content ul {
   list-style: disc;
   padding-left: 20px;
   color: var(--color-text-secondary);
   font-family: 'hind';
}

/* Inverse l'ordre pour le 2e bloc */
.content-block.image-first {
 grid-template-areas: "image text";
}
.content-block.image-first .text-content { grid-area: text; }
.content-block.image-first .image-content { grid-area: image; }


/* ==========  PAGE PROJET - Navigation (Pagination) =========== */

/* Navigation Projets*/

.project-pagination {
   border-top: 1px solid #444;
   border-bottom: 1px solid #444;
}

.project-pagination .container {
  display: flex;
   justify-content: space-between;
   align-items: center;
  padding: 2.5rem 0;
}

.project-pagination a {
   color: var(--color-accent);
   font-weight: bold;
   font-size: 1.5rem;
}

/* =========  PAGE PROJET - Styles de Footer (Spécifiques/Overrides)  ============ */

/* Footer */

.footer-info p{ 
   color: #FFFFFF;
}

.footer-brand .logo {
   font-size: 1.5rem;
   font-weight: bold;
  color: var(--color-accent);
}

.footer-brand p {
   margin: 1rem 0;
}

.social-links {
  display: flex;
   gap: 1rem;
}

.social-links a {
 /* Style pour tes icônes */
   font-size: 1.5rem;
   color: var(--color-text-secondary);
}
.social-links a:hover {
   color: var(--color-primary);
}


.footer-back-to-top {
   text-align: right;
}

.footer-back-to-top a {
   display: inline-block;
   background-color: #FFFFFF;
   color: #000;
   width: 40px;
   height: 40px;
   line-height: 40px;
   text-align: center;
   border-radius: 50%;
   font-size: 1.2rem;
}

/* ====== PAGE PROJET - Media Queries ========== */

/* Responsive: passe en une seule colonne sur mobile */
@media (max-width: 768px) {
  .content-block,
   .content-block.image-first {
   grid-template-columns: 1fr;
   grid-template-areas: none !important;
  }
   .content-block .text-content,
  .content-block .image-content {
   grid-area: auto !important;
   }
   
   /* Inverse l'ordre visuel sur mobile pour le 2e bloc */
   .content-block.image-first .image-content {
   order: 1;
   }
  .content-block.image-first .text-content {
   order: 2;
   }
}

@media (max-width: 1200px) {
  .container {
    width: 95%; /* Ou width: auto; */
  }
}



/* Responsive pour le footer légal */
@media (max-width: 768px) {

  .footer-legal .container {
  flex-direction: column;
   gap: 0.5rem;
   }
}

/* ########################################################################## */
/* ##
/* ## DEBUT PAGE Mentions Légales
/* ##
/* ########################################################################## */



/* ======================= */
/* HEADER          */
/* ======================= */
header {
    color: #fff;
    padding: 1rem 0;
}

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px; /* Plus large pour correspondre à l'image */
    margin: 0 auto;
    padding: 0 2rem;
}

.main-nav .logo {
    font-size: 1.5rem;
    font-weight: 700;
}

.main-nav ul {
    display: flex;
}

.main-nav li {
    margin-left: 25px;
}

.main-nav a {
    color: #fff;
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: 400;
}

/* ======================= */
/* CONTENU PRINCIPAL    */
/* ======================= */
.legal-content {
    padding: 4rem 0;
    color: #e0e0e0; /* Texte gris clair */
    position: relative;
    background-color: #5a6a62; /* Couleur de repli + lisibilité */

   
}

/* Superposition sombre pour la lisibilité */
.legal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(40, 50, 45, 0.85); /* Superposition vert/gris foncé */
    z-index: -1;
}

.legal-content .container {
    position: relative;
    z-index: 2;
    max-width: 800px; /* Contenu plus centré */
}

.legal-content h1 {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 2rem;
    letter-spacing: 2px;
}

.legal-content .intro-text {
    font-family: 'hind'; /*Choix pour lisibilité*/
    text-align: center;
    font-size: 1.3rem;
    margin-bottom: 3rem;
}

.legal-content section {
    margin-bottom: 2rem;
}

.legal-content h2 {
  font-family: 'Dosis';
    font-size: 2rem;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}

.legal-content p {
  font-family: 'hind';
    font-size: 1.5rem;
    text-transform: uppercase;
    margin: 0.5rem 0;
}

.legal-content .credits {
    text-align: center;
    font-size: 1.2rem;
    margin-top: 3.5rem;
    color: #cfcece;
}

/* ########################################################################## */
/* ##
/* ## DEBUT PAGE Contact
/* ##
/* ########################################################################## */

.page-content {
    padding: 4rem 0;
    color: #e0e0e0;
    position: relative;
    background-color: #5a6a62;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: 1;
}

/* Superposition sombre pour la lisibilité */
.page-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(40, 50, 45, 0.85);
    z-index: -1;
}

.page-content .container {
    position: relative;
    z-index: 2;
    max-width: 800px; /* Contenu centré */
}

.page-content h1 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    letter-spacing: 2px;
    text-decoration: underline;
}

.page-content .intro-text {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 3rem;
}

/* --- Styles pour Mentions Légales --- */
.page-content section {
    margin-bottom: 2rem;
}

.page-content h2 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}

.page-content p {
    font-size: 2rem;
    text-transform: uppercase;
    margin: 0.5rem 0;
}

.page-content .credits {
    text-align: center;
    font-size: 0.8rem;
    margin-top: 3rem;
    color: #aaa;
}


/* ================================== */
/* STYLES POUR FORMULAIRE CONTACT */
/* ================================== */
.contact-form {
    width: 100%;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.8rem;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid #777;
    border-radius: 4px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #fff;
    background-color: rgba(0, 0, 0, 0.4);
}

/* Style pour le texte de remplissage (placeholder) */
::placeholder {
    color: #ccc;
    opacity: 1;
}

.submit-button {
    width: 100%;
    padding: 0.9rem 1.5rem;
    border: none;
    border-radius: 4px;
    background-color: #fff;
    color: #222;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-button:hover {
    background-color: #e0e0e0;
}







.project-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 3 colonnes flexibles */
    gap: 30px; /* Espace entre les cartes */
    margin-top: 3rem;
}

.project-card {
    background-color: rgba(0, 0, 0, 0.3); /* Fond plus sombre pour les cartes */
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: #e0e0e0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.project-image-placeholder {
    width: 100%;
    padding-bottom: 60%; /* Ratio 16:9 pour l'image (hauteur relative à la largeur) */
    background-color: #777; /* Placeholder gris pour les images */
    background-image: url('https://via.placeholder.com/600x360?text=Image+Projet'); /* Exemple de placeholder */
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.project-info {
    padding: 1.5rem;
    flex-grow: 1; /* Permet au contenu de prendre l'espace restant */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.project-info h3 {
    font-size: 1.4rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: #fff;
}

.project-info p {
    font-size: 1.4rem;
    line-height: 1.4;
    margin-bottom: 1rem;
    text-transform: none; /* Pas d'uppercase pour la description */
}

.project-info span { /* Pour le "VOIR LE PROJET" */
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #b2f0e0; /* Couleur d'accent pour le lien */
    text-transform: uppercase;
    position: relative;
    padding-bottom: 3px;
}

.project-info span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #b2f0e0;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

.project-card:hover .project-info span::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}