/* ============================================================
   ZONE DE PERSONNALISATION RAPIDE
   Change ici la couleur principale et la police
   ============================================================ */
:root{
  --color-primary: #042c93;
  --color-primary-dark: #021d61;
  --color-text: #111111;
  --color-bg: #ffffff;
  --font-main: Arial, Helvetica, sans-serif; /* police "normal" */
}

*{ margin:0; padding:0; box-sizing:border-box; }
body{ font-family: var(--font-main); color: var(--color-text); background: var(--color-bg); }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
img{ display:block; max-width:100%; }

/* ================= HEADER ================= */
.header{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  position:relative;
  padding:26px 24px;
  border-bottom:1px solid #e5e5e5;
}
.header__sitename{
  height:70px;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
.header__sitename img{ height:100%; width:auto; }
.header__logo{
  /* EMPLACEMENT LOGO : remplace le contenu de .header__logo par ta balise <img> */
  width:120px; height:40px;
  display:flex; align-items:center; justify-content:center;
  background:#f2f2f2; color:#999; font-size:12px; border-radius:4px;
}
.header__contact{ font-size:15px; font-weight:600; }
.header__contact:hover{ color:var(--color-primary); }

/* ================= MENU CATEGORIES (carousel) ================= */
.cat-menu{
  display:flex;
  gap:24px;
  padding:16px 24px;
  overflow-x:auto;
  border-bottom:none;
  position:absolute;
  left:0; right:0; top:24px;   /* <-- changé */
  z-index:3;
}
.cat-menu::-webkit-scrollbar{ height:6px; }
.cat-card{
  flex:0 0 auto;
  height:150px;
  width:150px;
  position:relative;
  border-radius:6px;
  overflow:hidden;
  background:#f2f2f2;
}
.cat-card__img{ width:100%; height:100%; }
.cat-card__img img{ width:auto; height:100%; object-fit:contain; }
.cat-card__label{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:10px 8px;
  font-size:13px; font-weight:700;
  color:#1b4db8;
  text-align:center;
  background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
}

/* Pour changer une image de catégorie : modifie le src de l'<img> correspondant
   dans le HTML plus bas (section "cat-menu"). */

/* ================= CAT-CARD EN MENU DEROULANT ================= */
/* Nouvelle classe à ajouter EN PLUS de "cat-card" sur les catégories
   qui doivent ouvrir un sous-menu au survol / clic :
   <a href="#" class="cat-card cat-card--dropdown"> ... </a>
   Il suffit ensuite d'ajouter une liste <ul class="cat-card__submenu"> à l'intérieur. */

.cat-card--dropdown{
  overflow:visible; /* pour que le sous-menu ne soit pas coupé par le border-radius */
}

.cat-card__submenu{
  /* position:fixed (et non absolute) : le carousel ".cat-menu" a overflow-x:auto,
     ce qui coupe aussi tout ce qui dépasse verticalement (overflow-y devient
     automatiquement "auto" dès qu'overflow-x est précisé). En fixed, le sous-menu
     échappe à cette limite. Sa position (top/left) est calculée en JS. */
  position:fixed;
  min-width:200px;
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:6px;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  padding:8px 0;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:999;
  pointer-events:none;
}

.cat-card__submenu li a{
  display:block;
  padding:10px 16px;
  font-size:14px;
  color:var(--color-text);
  white-space:nowrap;
}

.cat-card__submenu li a:hover{
  background:#f2f2f2;
  color:var(--color-primary);
}

/* Ouverture du sous-menu (survol ordinateur ET clic mobile), pilotée par le JS
   qui ajoute la classe "is-open" et calcule la position en fixed */
.cat-card--dropdown.is-open .cat-card__submenu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

/* Petite flèche indiquant qu'il y a un sous-menu */
.cat-card--dropdown .cat-card__label::after{
  content:"▾";
  margin-left:6px;
  font-size:11px;
  display:inline-block;
}

/* ================= HERO avec fondu ================= */
.hero{
  position:relative;
  height:70vh;        /* <-- augmenté (était 50vh) */
  min-height:500px;   /* <-- augmenté (était 300px) */
  background-image: url('Herofondu3.jpg'); /* <-- modifie ici l'image de fond */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  /* fondu bas de l'image vers le blanc, modifie ici si besoin */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, var(--color-bg) 100%);
}

/* ================= BANDEAU PICTOS ================= */
.picto-band{
  background: var(--color-primary);
  color:#fff;
  padding:40px 24px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:32px;
}
.picto{
  flex:1 1 200px;
  max-width:220px;
  text-align:center;
}
.picto__icon{
  width:48px; height:48px;
  margin:0 auto 12px;
  border-radius:50%;
  overflow:hidden;
}
.picto__icon img{
  width:100%; height:100%;
  object-fit:cover;
}
.picto__text{ font-size:14px; line-height:1.4; }

/* ================= CONTACT ================= */
.hero2{
  position:relative;
  height:65vh;
  min-height:300px;
  background-image: url('Herofondu2.jpg?v=4'); /* <-- modifie ici l'image de fond contact */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:1;              /* <-- ajouté */
}
.contact{
  position:relative;      /* <-- ajouté */
  z-index:2;               /* <-- ajouté, passe au-dessus de hero2 */
  margin-top:0px;        /* <-- ajouté, fait remonter le contact sur le hero2 */
  padding:60px 24px;
  text-align:center;
}
.contact h2{
  font-size:28px;
  color: #011aff;
  margin-bottom:24px;
}
.contact__card{
  max-width:400px;
  margin:0 auto;
  border:1px solid rgba(255,255,255,0.3);
  border-radius:8px;
  padding:24px;
  background: rgba(255,255,255,0.1);   /* <-- blanc semi-transparent au lieu de plein */
  backdrop-filter: blur(10px);           /* <-- floute ce qu'il y a derrière */
  -webkit-backdrop-filter: blur(10px);   /* <-- pour compatibilité Safari */
}
.contact__line{ font-size:15px; margin-bottom:10px; }
.contact__line strong{ display:block; font-size:13px; color:#011aff; margin-bottom:2px; }
.warning__line{
  position: absolute;   /* <-- indispensable pour que bottom fonctionne */
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 23px;
  color: #000000d1;
  text-align: center;   /* si tu veux le texte centré */
  padding: 10px;         /* un peu d'espace avec le bord */
    z-index: 2; 
}

/* ================= LIEN MENTIONS LEGALES (bas de hero2) ================= */
.legal-footer{
  position:absolute;
  left:0;
  right:0;
  bottom:14px;
  text-align:center;
  z-index:3;
}
.legal-footer a{
  font-size:13px;
  color:#ffffffcc;
  text-decoration:underline;
}
.legal-footer a:hover{
  color:#ffffff;
}

/* ============================================================
   RESPONSIVE / MOBILE
   ============================================================ */
@media (max-width: 700px){
  .header{
    flex-direction:column;
    gap:8px;
    padding:14px 16px 12px;
  }
  .header__sitename{
    position:static;
    transform:none;
    height:30px;
  }
  .header__contact{
    font-size:13px;
  }

  .hero{
    height:auto;
    min-height:0;
    padding-bottom:8px;
  }

  .hero::after{
    background: none;   /* ← ajoute cette règle ici, dans le bloc mobile */
  }


  .cat-menu{
    position:static;
    top:auto;
    padding:14px 12px;
    gap:12px;
  }
  .cat-card{
    width:108px;
    height:108px;
  }
  .cat-card__label{
    font-size:11px;
    padding:6px 4px;
  }
  .cat-card__submenu{
    max-width:88vw;
  }
  .warning__line{
    position:static;
    font-size:14px;
    line-height:1.4;
    padding:14px 16px;
    background:#f5f5f5;
  }

  .picto-band{
    gap:20px;
    padding:28px 16px;
  }
  .picto{
    flex:1 1 40%;
    max-width:none;
  }

  .hero2{
      height:70vh;        /* ← ajoute/modifie ça */
      min-height:380px;   /* ← ajoute/modifie ça */
      padding-bottom:20px;
  }
  .contact{
    padding:32px 16px;
  }
  .contact h2{
    font-size:22px;
  }
  .contact__card{
    padding:18px;
  }
  .legal-footer{
    position:static;
    padding:16px 0 20px;
  }
}

@media (max-width: 380px){
  .cat-card{
    width:92px;
    height:92px;
  }
}