
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  max-width: 100%;
}

body {
  background-color: #cb6de5;
  font-family: "Arial", sans-serif;
  color: white;
  font-size: 1.2em;
  line-height: 1.6;
    max-width: 100%;
    margin-top:100px; 
    
}

.header {
  background-color: #9400d9; 
  display: flex;
  justify-content: space-between; 
  align-items: center;
  padding:15px 30px;
  font-size: 14px;
  position: fixed;
  width: 100%;
  margin: 0;
  top: 0; 
  z-index: 10;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 30px; 
}

.contact-info {
  display: flex;
  align-items: center;
  gap: 20px; 
}

.contact-info span,
.contact-info a {
  color: white;
  text-decoration: none;
  font-size: 14px; 
}

.contact-info a:hover,
.contact-info span:hover {
  text-decoration: underline;
}

.social-icon {
  color: white;
  font-size: 18px; 
}

.social-icon:hover {
  color: #ddd; /
}

.header-center {
  flex-grow: 1; 
  display: flex;
  justify-content: center;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  color: white;
  text-decoration: none;
  font-size: 16px;
  padding: 10px 20px; /* Plus d'espace autour du texte */
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  color: black;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 20;
  min-width: 150px;
  list-style: none;
  padding: 10px 0;
  margin: 0;
}

.dropdown-content li {
  padding: 8px 20px; 
}

.dropdown-content a {
  text-decoration: none;
  color: black;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}


.dropdown:hover .dropdown-content {
  display: block;
}

.header-right {
  display: flex;
  gap: 40px; 
}

.header-right a {
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
}

.header-right a:hover {
  text-decoration: underline;
}

@media (min-width: 901px) {
  .contact-info span, .contact-info a {
    display: inline-block; 
  }

  .social-icon {
    display: inline-block; 
    justify-content: space-between;
    font-size: 18px; 
  }
}


@media (max-width: 900px) {
  .header p{
    display: none; 
  }

  .social-icon {
    display: inline-block; 
    font-size: 18px; 
    margin-right: 20px; 
  }

  .header-right {
    display: none; 
  }

  .header {
    width: 100%;
    max-width: 100%;
  }
}

h1, h2, h3, p {
  color: white;
    margin-left:30px;
}

h1{
    font-size:2em;
  text-align: center;
  text-decoration: underline;
}

h2 {
  font-size: 1.8em;
  color: white; 
    margin-top:40px;
}

h3 {
  font-size: 1.5em;
  color: white;
}

p {
  font-size: 1.2em;
  color: white;
  margin:30px;
}

ul {
  list-style-position: inside;
  font-size: 1.1em;
  color: white;
  margin-left: 20px;
}

ul li {
  margin-bottom: 10px;
}

ul li::before {
  margin-right: 10px;
  color: white; 
}

address {
  font-style: normal;
  line-height: 1.5;
}

address p {
  margin-bottom: 10px;
}

/* Link Styling */
a {
  color: white;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 768px) {
    h1 {
        font-size: 1.6em;
    }
    h2 {
        font-size: 1.3em;
    }
    p {
        font-size: 0.95em;
    }
}

@media screen and (max-width: 480px) {
    h1 {
        font-size: 1.4em;
    }
    h2 {
        font-size: 1.1em;
    }
    p {
        font-size: 0.9em;
    }
}

/* Footer plein écran + couleur demandée */
.site-footer{
  font-family: "Poppins", Arial, sans-serif; 
  width:100%;
  background:#9400d9;              /* couleur demandée */
  color:#fff;
  padding:14px clamp(12px,4vw,18px);
  margin:32px 0 0;                 /* colle au bas de page */
  text-align:center;
  border-radius:0;                  /* plein écran, pas de coins */
  box-shadow:none;                  /* look plus flat */
}

/* “Header” de footer : liens sur toute la largeur */
.legal-links{
  width:100%;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  font-weight:600;
  line-height:1.25;
}

.legal-links a{
  color:#fff;
  text-decoration:none;
  position:relative;
  padding:6px 8px;                  /* zones tactiles mais sobres */
  border-radius:6px;
  font-size:clamp(12px, 1.9vw, 14px);  /* ← plus petit */
  opacity:.95;                      /* moins imposant */
}

/* Séparateur | en clair */
.legal-links a + a::before{
  content:"|";
  margin-right:8px;
  opacity:.5;
}

/* hover/focus discrets */
.legal-links a:hover{ text-decoration:underline }
.legal-links a:focus-visible{
  outline:2px solid rgba(255,255,255,.6);
  outline-offset:3px;
}

/* Crédit plus discret */
.credit{
  margin:6px 0 0;
  font-size:clamp(11px, 1.7vw, 13px);  /* ← plus petit */
  opacity:.85;
}

/* ---------- Responsive ---------- */
/* Mobile : liens empilés, séparés par une ligne claire, toujours plein écran */
@media (max-width:520px){
  .legal-links{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .legal-links a{
    padding:10px 12px;
    font-size:13px;
  }
  .legal-links a + a::before{ content:none }
  .legal-links a + a{
    border-top:1px solid rgba(255,255,255,.25);
  }
}