/* Wrapper global en flexbox */
:root {
  --c-dark: #0a0a0a;     /* Noir profond */
  --c-light: #ffffff;    /* Blanc pur */
  --c-gold: #d4af37;     /* Doré élégant */
  --c-cyan: darkcyan;     /* Doré élégant */
}
html, body {
  height: 100%;
  margin: 0;
}
body { 
  font-family:'Roboto', sans-serif; 
  background:#f9f9f9; 
  color:#333; 
}
header { 
  background:#0A192F; 
  color:white; 
}
a {
  color: var(--c-cyan);
}
a:hover {
  color: var(--c-gold);
}
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* toute la hauteur de l’écran */
}
/*.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* toute la hauteur de l’écran */
/*}*/
main {
  flex: 1; /* pousse le footer vers le bas */
  display : inline-grid;
  /*grid-template-rows: auto 1fr auto;*//* header - contenu - footer */
}

footer {
  background: #0A192F;
  color: white;
  text-align: center;
  padding: 10px;
  font-size:0.9rem; 
}


.container { 
  width:85%; 
  margin:auto; 
  padding:30px 0 15px 0; 
}
.navbar { 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  padding:15px 0; 
}
.nav-links { 
  list-style:none; 
  display:flex; 
  gap:20px; 
}
.nav-links a { 
  color:white; 
  text-decoration:none; 
  font-weight:600; 
}

.nav-links a:hover, 
.nav-links a.active {
  color: var(--c-gold);
}
.burger { 
  display:none; 
  cursor:pointer; 
}
.hero { 
  /*height:90vh;*/ 
  display:flex; 
  flex-direction:column; 
  justify-content:center; 
  align-items:center; 
  text-align:center; 
  background:linear-gradient(120deg,#0A192F,#00C9A7); 
  color:white; 
}
.hero h1 { 
  font-size:2.5rem; 
}
.hero p { 
  margin:20px 0; 
  font-size:1.2rem; 
}
.ruby {
  display: ruby;
}

.btn { 
  color:#0A192F; 
  padding:12px 20px; 
  border-radius:8px; 
  text-decoration:none; 
  margin:10px; 
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: var(--c-gold);
  color:white;
  border:none;
  border-radius:10px;
  cursor:pointer;
  font-size:1.1rem;
  min-width:200px;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  box-shadow: 0 8px 20px rgba(12,107,230,0.16);
}
.btn.secondary { 
  background:#00C9A7; 
  color:white; 
}
.btn:hover {
  font-weight: bold; 
  color:var(--c-light);
}
/* ==== CARTES ==== */
.cards {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
  justify-content: center;
}
.card {
  flex: 1;
  padding: 1.5rem;
  border-radius: 12px;
  background: darkcyan;
  color: var(--c-light);
  text-align: center;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border .2s ease;
  border: 2px solid transparent;
}
.card h3 {
  color : var(--c-gold);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.card.active {
  border: 2px solid var(--c-gold);
  box-shadow: 0 0 15px rgba(212,175,55,0.5);
}
.justified {
  text-align: justify;
}
.aleft {
  text-align: left;
  font-size: 1.2rem;  
}

li {
  padding: 10px;
}
.title {
  margin: auto;
  font-size: 2rem;
  height : 20px;
  color : white;
}
.title2 {
  font-size: 1.5rem;
}
.contactfrm {
  min-width: 40%;
}
.continput {
  border:1px solid rgba(255,215,0,0.85);
  padding:12px 14px;
  border-radius:10px;
  font-size:1.2rem;
  background: cornsilk;
}

.continput:focus {
  /**border-color: var(--accent);**/
  /**border:1px solid rgba(255,215,0,0.3);**/
  /**box-shadow: 0 6px 18px rgba(255,215,0,0.2);**/
  /**transform: translateY(-1px);**/
}

textarea{min-height:160px; max-height:300px; min-width: 80%;}

/*.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: var(--c-gold);
  color:white;
  border:none;
  padding:10px 16px;
  border-radius:10px;
  cursor:pointer;
  font-size:1.2rem;
  min-width:150px;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  box-shadow: 0 8px 20px rgba(12,107,230,0.16);
}*/
/*footer { text-align:center; padding:20px; background:#0A192F; color:white; margin-top:40px; }*/

/* ==== ZONE TEXTE solutions.php ==== */
.content {
  background: var(--c-light);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  margin: 10px auto;
  color: var(--c-dark);
}
.section {
  display: none;
  color: var(--c-dark);
  animation: fadeIn .4s ease forwards;
}
.section.active {
  display: block;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* fin solutions.php */

.success { color:green; }
.error { color:red; }

@media(max-width:768px){
  	.nav-links { 
	  display:none; 
	  flex-direction:column; 
	  background:#0A192F; 
	  position:absolute; 
	  top:60px; right:0; 
	  width:200px; 
	}
  	.burger { 
  	  display:block; color:white; 
	}
	.cards {
	  display: grid;
	  gap: 1rem;
	}
	.title {
	  margin: -20px;
	  font-size: 1.5rem;
	  color: white;
	}
	.card {
	  padding: 1rem;
	}
	.container {
	  width: 90%;
	  padding: 5px 0 5px 0;
	}
	footer {
	  font-size: 0.8rem;
	}
}