/* ===== Hauteur du menu (variable globale) ===== */
:root {
  --menu-height: 130px;      /* desktop par défaut : plus haut */
  --menu-icon-h: 42px;       /* hauteur cible des icônes/logos du menu */
  --partner-maxh: 90px;      /* hauteur max des logos partenaires (desktop) */
}

/* ===== Base + fond fixe ===== */
html, body { height: 100%; }

body {
  font-family: 'Lato', sans-serif;
  margin: 0;
  padding: 0;
  background: none !important;   /* le fond est géré par ::before */
  position: relative;
  isolation: isolate;
  padding-top: var(--menu-height);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: center / cover no-repeat url("images/oneFond.png");
  will-change: transform;
}

section { scroll-margin-top: calc(var(--menu-height) + 10px); }

/* ===== Hero & sections ===== */
.hero {
  text-align: center;
  padding: 72px 8px 8px;
  color: white;
}

.container1 {
  margin: 0 auto 8px;
  max-width: 900px;
  text-align: center;
  padding: 0 16px;
  font-size: 28px;
  color: white;
}

.container2 {
  max-width: 900px;
  width: calc(100% - 32px);
  margin: 0 auto 120px;
  text-align: center;
  padding: 48px 16px;
  font-size: 30px;
  color: white;
  word-wrap: break-word;
}

.container3 {
  max-width: 900px;
  width: calc(100% - 32px);
  margin: 0 auto 120px;
  text-align: left;
  padding: 48px 16px;
  font-size: 30px;
  color: white;
  word-wrap: break-word;
}
.container3-1 {
  max-width: 900px;
  width: calc(100% - 32px);
  margin: 0 auto 0px;
  text-align: left;
  padding: 0px 1px;
  font-size: 20px;
  color: yellow;
  word-wrap: break-word;
}


.container4 {
  max-width: 900px;
  width: calc(100% - 32px);
  margin: 0 auto 0px;
  text-align: left;
  padding: 48px 0px;
  font-size: 20px;
  color: green;
  word-wrap: break-word;
}

/* ===== Logo (hero) ===== */
.logo {
  display: block;
  max-width: 500px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
@media (max-width: 768px) { .logo { max-width: 300px; } }
@media (max-width: 480px) { .logo { max-width: 220px; } }

/* ===== Animations ===== */
.fade-in { animation: fadeIn 1s; }
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }

.fade-in-up { animation: fadeInUp 1s; }
@keyframes fadeInUp {
  from { opacity:0; transform: translateY(20px); }
  to   { opacity:1; transform: translateY(0); }
}

/* ===== Menu fixe ===== */
.menu-container {
  text-align: center;
  color: white;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 32px;
}

.menu-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(15, 21, 39, 0.9);
  color: white;
  padding: 12px 14px;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 16px;
}
.menu-item:hover { background-color: rgba(230, 100, 70, 0.9); }

.menu-item1 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: white;
  padding: 4px 6px;
  text-decoration: none;
  background: transparent;
  border-radius: 0;
}
.menu-item1:hover { background: transparent; }

.menu-item img,
.menu-logo {
  height: var(--menu-icon-h);
  width: auto;
  display: block;
}

/* ===== Formulaire / messages ===== */
.form {
  background-color: rgba(15, 21, 39, 0.9);
  padding: 24px;
  border-radius: 24px;
  max-width: 420px;
  text-align: left;
  font-size: 18px;
  margin: 0 auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.label { display:block; margin-bottom:8px; font-weight:700; font-size:14px; }
.input, textarea, button {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  width: 90%;
  margin: 0 auto 12px; /* centrage horizontal */
  padding: 10px 8px;
  display: block;      /* indispensable pour que margin auto fonctionne */
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 18px;
}
.button { background:#007BFF; color:#fff; border:none; cursor:pointer; font-size:16px; }
.button:hover { background:#0056b3; }

.message {
  max-width: 420px;
  margin: 20px auto 0;
  padding: 14px;
  border-radius: 8px;
  font-weight: 700;
  display: none;
  font-size: 18px;
}
.message.success { background:#e6ffed; color:#1b5e20; border:2px solid #1b5e20; }
.message.error  { background:#ffe6e6; color:#b71c1c; border:2px solid #b71c1c; }

/* ===== Partenaires ===== */
#nos-partenaires .partners-grid {
  display: flex;
  justify-content: center;           /* centre le tableau sur desktop */
}
#nos-partenaires .partners-grid table {
  display: inline-table;
  width: auto;                        /* évite 100% qui casse le centrage */
  border-collapse: separate;
  border-spacing: 16px 12px;          /* espace horizontal/vertical entre logos */
}
#nos-partenaires .partners-grid td {
  text-align: center;
  vertical-align: middle;
  padding: 0;
}
#nos-partenaires .partners-grid img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  max-height: var(--partner-maxh);
  object-fit: contain;
}

/* ===== Footer ===== */
.footer {
  text-align: center;
  padding: 8px;
  background-color: rgba(15, 21, 39, 1);
  color: white;
  position: fixed;
  bottom: 0; left: 0; right: 0;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  :root {
    --menu-height: 140px;
    --partner-maxh: 80px;
  }
  .menu-container { padding: 20px 16px 34px; }
  .menu-item { padding: 12px 16px; font-size: 16px; }
  .container2, .container3 { margin-bottom: 110px; }
}

@media (max-width: 768px) {
  :root {
    --menu-height: 150px;
    --partner-maxh: 70px;
  }
  .menu-container { padding: 18px 14px 30px; }
  .menu-item { padding: 10px 14px; font-size: 15px; }
  .container1 {
    /* on neutralise l'ancien margin-top et on ajoute un padding-top */
    margin: 0 auto 8px;
    padding-top: 18px;              /* ↑ espace réel sous le menu */
  }
  .container2, .container3 {
    width: 94%;
    padding: 36px 16px;
    margin-bottom: 90px;
    font-size: 20px;
  }
  .hero { padding: 68px 8px 8px; }
  .logo { max-width: 300px; }
  /* 4 colonnes max partenaires */
  #nos-partenaires .partners-grid td { width: 25%; }
}

@media (max-width: 480px) {
  :root {
    --menu-height: 120px;
    --partner-maxh: 56px;
  }
  .container1 {
    margin: 0 auto 8px;
    /* version fixe */
    padding-top: 20px;
    /* ou version dynamique liée à la hauteur du menu :
       padding-top: calc(var(--menu-height) * 0.6);
    */
  }
  .menu-container { padding: 12px 10px 22px; gap: 8px; }
  .menu-item { padding: 8px 10px; font-size: 13px; }
  .container2, .container3 {
    width: 96%;
    padding: 28px 14px;
    margin-bottom: 70px;
    font-size: 18px;
  }
  .hero { padding: 56px 6px 6px; }
  .form { padding: 20px; font-size: 16px; }
  .input, textarea, button, .message { font-size: 16px; }
  .logo { max-width: 220px; }
  /* 2 colonnes max partenaires */
  #nos-partenaires .partners-grid td { width: 50%; }
  /* Centrage du paragraphe descriptif */
  #nos-partenaires p { text-align: center; }
}
/* ===== Partenaires (desktop par défaut) ===== */
#nos-partenaires .partners-grid { display: block; max-width: 900px; margin: 0 auto; }
#nos-partenaires .partners-grid table {
  width: 100%;
  table-layout: fixed;       /* important: colonnes stables */
  border-collapse: separate;
  border-spacing: 16px 12px; /* écart entre logos */
  margin: 0 auto;
}
#nos-partenaires .partners-grid td {
  width: 25%;                /* 4 colonnes */
  text-align: center;
  vertical-align: middle;
  padding: 0;
}
#nos-partenaires .partners-grid img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  max-height: var(--partner-maxh);
  object-fit: contain;
}

/* Tablette (on garde 4 colonnes) */
@media (max-width: 768px) {
  #nos-partenaires .partners-grid table { border-spacing: 12px 10px; }
  #nos-partenaires .partners-grid td    { width: 25%; }
  #nos-partenaires .partners-grid img   { max-height: 70px; }
}

/* Mobile (3 colonnes) */
@media (max-width: 480px) {
  #nos-partenaires .partners-grid table { border-spacing: 10px 8px; }
  #nos-partenaires .partners-grid td    { width: 33.33%; }  /* 3 par ligne */
  #nos-partenaires .partners-grid img   { max-height: 56px; }
  #nos-partenaires p { text-align: center; }
}
/* ===== Carte d’implantation ===== */
.Map {
  display: block;
  width: 100%;
  max-width: 600px;            /* limite desktop */
  height: auto;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .Map { max-width: 520px; }
}
@media (max-width: 480px) {
  .Map { max-width: 90vw; max-height: 50vh; }
}

/* ===== Ajustement titre Prenons contact ===== */
@media (max-width: 768px) {
  #contact h2 {
    font-size: 30px;
    margin-bottom: 12px;
  }
}
@media (max-width: 480px) {
  #contact h2 {
    font-size: 30px;
    margin-bottom: 10px;
  }
}

/* ===== Formulaire plus compact (tablette) ===== */
@media (max-width: 768px) {
  .form {
    max-width: 340px;          /* largeur réduite */
    padding: 18px;
    font-size: 16px;
    border-radius: 16px;
  }
  .form .input,
  .form input,
  .form textarea,
  .form button,
  .form .message {
    font-size: 15px;
    padding: 8px 6px;          /* hauteur réduite */
    line-height: 1.3;
    margin-bottom: 8px;
  }
}

/* ===== Formulaire ultra-compact + anti-recouvrement (mobile) ===== */
@media (max-width: 480px) {
  /* Le footer ne masque pas le bas du formulaire */
  .footer { position: static; }

  /* Titre + message plus compacts */
  #contact .container1 { margin-top: 20px;margin-bottom: 8px; padding: 10px 12px; }
  #message.message { margin-top: 10px; font-size: 18px; }

  /* FORMULAIRE : plus étroit, pas de scroll interne, espace bas généreux */
  .form {
    max-width: 260px;          /* plus étroit */
    padding: 8px;              /* moins de padding */
    font-size: 13px;
    border-radius: 8px;
    margin: 0 auto 90px;       /* gros espace avant le footer */
    /* ✅ on supprime le scroll interne qui masquait le bouton */
    max-height: none !important;
    overflow: visible !important;
  }

  /* Labels centrés (optionnel) */
  .form .label { font-size: 11px; margin-bottom: 3px; text-align: center; }

  /* Champs centrés et moins larges */
  .form .input,
  .form input,
  .form textarea,
  .form button,
  .form .message {
    display: block;
    width: 90%;                /* moins large que le fond du formulaire */
    margin: 0 auto 6px;        /* centrés */
    box-sizing: border-box;
    font-size: 12px;
    padding: 4px;
    line-height: 1.1;
  }

  /* Hauteurs minimales */
  .form input[type="text"],
  .form input[type="email"] { height: 28px; }

  .form textarea {
    height: 55px;              /* plus court pour voir le bouton */
    resize: vertical;
  }

  .form button {
    padding: 6px 8px;
    font-size: 12px;
  }
}