/* EN TETE */
  
  .entete {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 0;
    background-color: #FDF5E2;
  }
  
  .banner {
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(to right, #FDF5E2, #10763E, #0F753D, #10763E, #FDF5E2, #FDF5E2);
    border-radius: 6px;
    height: 50px;
    width: 80%;
  }
  
  .logo {
    height: 70px;
    margin-right: 20px;
    z-index: 1;
  }
  
  .banner-text {
    color: #FDF5E2;
    font-size: 28px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    flex-grow: 0.8;
    text-align: center;
    z-index: 1;
  }
  
  .cards {
    height: 90px;
    position: absolute;
    right: 2%;
    top: -20px;
    z-index: 0;
  }

@media screen and (max-width: 950px) {
    .banner {
        width: 70%;
        flex-grow: 0.5;
    }
    .banner-text {
        font-size: 20px;
    }
}

@media screen and (max-width: 1000px) {
    .banner-text {
        text-align: left;
        margin-left: 8%;
    }
}

@media screen and (max-width: 700px) {
    .banner-text {
        margin-left: 2%;
    }
}
@media screen and (max-width: 650px) {
    .cards {
        height: 70px;
    }
    .banner {
        height: 30px;
    }
    .logo {
        height: 50px;
    }
    .entete {
        padding: 20px 0;
    }
    .banner-text {
        font-size: 15px;
    }
}

@media screen and (max-width: 500px) {
    .cards {
        opacity: 0.2;
    }
}


/* HEADER ANNEXE */

.header_annexe {
    background: linear-gradient(to bottom, #13803C, #0C371E);
    background-color: #0C371E;
    font-size: 13px;
    width: 100%;
}

.header_annexe nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.annexe_liens {
    list-style: none;
    display: flex;
    justify-content: left;
    align-items: center;
    padding-left: 0;
}

.annexe_liens li a {
    color: #FDF5E2;
    text-decoration: none;
    padding: 23px 30px;
}

.annexe_liens a:hover {
  background:
  radial-gradient(ellipse at top, #010974, transparent),
  radial-gradient(ellipse at bottom, #18208e, transparent);
}


.container_annexe {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 60px;
    width: 80%;
    margin: 0 auto;
}

@media screen and (max-width: 400px) {
  .annexe_liens li a {
    padding: 5px 10px;
}
}

.p_sport_annexe {
  color: #FDF5E2;
  font-style: italic;
}

@media screen and (max-width: 320px) {
  .p_sport_annexe {
    font-size: 10px;
    display: flex;
    justify-content: right;
    align-items: center;
    text-align: right;
    padding-left: 10px;
}
}

  
  :root{
    --brand:#146b34;          /* vert foncé (rappel de ton header) */
    --brand-2:#1f8a46;        /* vert clair */
    --bg:#FDF5E2;             /* fond ivoire */
    --text:#14312c;           /* texte principal */
    --muted:#4b6358;          /* texte secondaire */
    --border:#d7e5dc;         /* séparateurs */
    --radius:10px;
  }
  html { scroll-behavior:smooth; }
  body {
    margin:0; background:var(--bg); color:var(--text);
    font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  }

/* --- Layout --- */
  .layout{
    display:grid; grid-template-columns: 280px 1fr; gap:0;
    min-height:100vh;
  }
  aside.sidebar{
    position:sticky; top:0; align-self:start; height:100svh;
    background:linear-gradient(#174d2c,#196636);
    color:white; padding:16px; overflow:auto;
  }


/*



  main.content_conventions {
    padding:10px clamp(16px,3vw,48px); 
  }



*/

  /* --- Sidebar elements --- */
  .brand{
    font-weight:800; letter-spacing:.2px; margin:0 0 10px 0; font-size:22px;
  }
  .search{
    margin:12px 0 16px; position:relative;
  }
  .search input{
    width:100%; padding:10px 12px; border-radius:8px; border:0; outline:none;
  }

  .nav_convention .group{ border-top:1px solid rgba(255,255,255,.15); padding:6px 0; }
.nav_convention .group-title{
  margin:0; padding:8px 0px; font-weight:700; color:#fff;
}
.nav_convention ul{ list-style:none; margin:6px 0 10px; padding:0; }
.nav_convention a{
  display:block; padding:6px 20px; margin:2px 0; text-decoration:none;
  color:rgba(255,255,255,.92); border-radius:6px;
}
.nav_convention a:hover{ background:rgba(255,255,255,.12); }
.nav_convention a.active{ background:#fff; color:var(--brand); font-weight:700; }

  /* --- Page content --- */

.h_vert_conventions {
  color: #14312c;
  font-size: 28px;
  padding: 20px 0 0 35px;
}

.section {
  max-width:900px;
  margin: 0 auto 20px;
  border-bottom:1px dashed var(--border);
  scroll-margin-top: 100px; /* confort au clic dans le menu */
  padding: 30px;
}

.section img {
  display: block;
  width: 800px;        /* largeur fixe */
  height: 600px;       /* hauteur fixe */
  margin: 0;   
  object-fit: contain; /* garde le bon ratio sans déformation */
}

@media (max-width: 1000px) {
  .section img {
    width: 800px; 
    height: 500px; 
  }
}


@media (max-width: 900px) {
  .section img {
    width: 100%;
    height: auto;
  }
}

.section h3{
  margin:0 0 10px; font-size:25px;
  color: #174d2c;
}


  .badge{
    display:inline-block; padding:.1rem .5rem; border-radius:999px;
    border:1px solid var(--border); color:var(--muted); font-size:.85rem;
  }
  .lead{ color:var(--muted); margin:0 0 12px; }

  /* --- Mobile --- */
  @media (max-width: 900px){
    .layout{ grid-template-columns:1fr; }
    aside.sidebar{
      position:relative; height:auto; border-right:0; border-bottom:1px solid var(--border);
      border-bottom-left-radius:var(--radius); border-bottom-right-radius:var(--radius);
    }
  }



.zoomable {
  cursor: zoom-in;
  max-width:100%;
}

#lightbox {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.85);
  justify-content:center; align-items:center;
  z-index:1000;
}

#lightbox img {
  max-width:90%; max-height:90%;
  box-shadow:0 0 20px rgba(0,0,0,.8);
  border-radius:8px;
}

#lightbox #close {
  position:absolute; top:20px; right:30px;
  font-size:40px; color:#fff; cursor:pointer;
}


.section_annexes {
  margin: 50px auto;
  width: 80%;
}

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

.ima_trucs_astuces img {
  width: 200px;
}

.ima_new_tech {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 50px auto;
}

.ima_new_tech div img {
  width: 200px;
  height: 250px;
  object-fit: cover;
}


@media (max-width: 700px) {
  .ima_trucs_astuces {
    display: block;
  }

  .ima_new_tech {
  display: block;
}
}

@media (max-width: 300px) {
  .ima_trucs_astuces img {
    width: 150px;
  }
}

.lien_annexe {
  color: #174d2c;
}

.lien_annexe:hover {
  color: #174d2c95;
}

footer {
  background-color: #4b6358;
  padding: 23px 10%;
  display: flex;
  justify-content: right;
}

.footer_annexe a {
  color: #FDF5E2;
  font-size: 13px;
}

.footer_annexe a:hover {
  color: #fdf5e2a8;
}