.body2, body {
  background-image:url('../images/ondes_2026_02b.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: auto;
}
body {
  _background:brown;
}
.surB {
    background-color: yellow;
    _font-weight: bold;
}
.center, .centre {
  text-align:center;
}
.left, .gauche {
  text-align:left;
}
.droite, .right {
  text-align:right;
}
.voir_css {
  border:1px solid black;
  background:yellow;
}
.bloc1 {
  background:rgba(220,220,220,0.7);
  border-radius:10px;
  padding:10px;
  margin:30px;
  _box-shadow: 10px 10px 10px rgba(180, 180, 180, 0.3);
  box-shadow: 0 0 10px rgba(180, 180, 180, 0.3);
  border:1px solid rgba(100,100,100,1.0);
}
a {
  color:brown;
  text-decoration:none;
  transition-duration:0.4s;
  _letter-spacing:2pt;

}
a:hover {
  color:blue;
  text-decoration: none;
  transition-duration:0.4s;
  _letter-spacing:4pt;

}
a.outils {
  background:rgba(240,240,240,0.7);
  color:green;
  transition-duration:0.4s;
  display:inline-block;
  height:100%;
  width:100%;
  border-radius:10px;
}
a.outils:hover {
  background:rgba(240,240,240,0.8);
  _background:lemonchiffon;
  transition-duration:0.4s;
  color:blue;
}
a.menu {
  width:100%;
  display:inline-block;
  border:1px solid rgba(200,200,200,1.0);
  border-radius:8px;
  padding:5px;
}
a.menu:hover {
    background:rgba(200,200,200,0.7);
}
.p-menu {
  margin:3px;
}
a, a:hover, a.a_liens, a.a_liens:hover {
  text-decoration: none;
}

a.a_liens, a.a_categs {
  width:100%; 
  display:inline-block;
}
a.a_categs {
  border:1px solid rgba(160,160,160,1.0);
  border-radius:5px;
  background:rgba(200,200,200,0.3);
  font-size:15pt;
  margin:5px;
}
a.a_liens {
  border-bottom:1px solid rgba(160,160,160,1.0);
}
a.a_liens:hover {
  background:rgba(200,200,200,0.3);
  color:rgba(200,200,200,0.7);
  color:red;
}

.color {
    color: black;
    text-shadow:
        -1px -1px 0 white,
         1px -1px 0 white,
        -1px  1px 0 white,
         1px  1px 0 white;
font-weight:400;
height:50px;display:flex; align-items:center; justify-content:center;
border:1px solid rgba(80,80,80,0.9);
}
.color2 {
    color: black;
    text-shadow:
        -1px -1px 0 white,
         1px -1px 0 white,
        -1px  1px 0 white,
         1px  1px 0 white;
font-weight:bold;
height:50px;display:flex; align-items:center; justify-content:center;
border:1px solid rgba(80,80,80,0.9);
}


/* Menu dépliant*/
/* Structure de base du menu */
.menu-vertical {
  width: 250px;
  font-family: Arial, sans-serif;
  background-color: #2c3e50;
  border-radius: 5px;
  overflow: hidden;
}

/* Cache les cases à cocher */
.menu-toggle {
  display: none;
}

/* Style des titres de sections */
.menu-label {
  display: block;
  padding: 15px;
  color: #fff;
  background-color: #34495e;
  cursor: pointer;
  border-bottom: 1px solid #2c3e50;
  transition: background 0.3s;
  position: relative;
}

.menu-label:hover {
  background-color: #415b76;
}

/* Flèche indicative (tourne quand le menu s'ouvre) */
.menu-label::after {
  content: '▼';
  position: absolute;
  right: 15px;
  font-size: 12px;
  transition: transform 0.3s;
}

/* --- LOGIQUE DE REPLI / DÉPLI --- */

/* Conteneur des sous-éléments (masqué par défaut) */
.menu-sous-elements {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background-color: #1a252f;
}

/* Action : Quand la case est cochée, on déplie le contenu */
.menu-toggle:checked ~ .menu-sous-elements {
  max-height: 200px; /* Hauteur max supérieure au contenu réel */
}

/* Action : Fait pivoter la flèche à l'ouverture */
.menu-toggle:checked ~ .menu-label::after {
  transform: rotate(-180deg);
}

/* Style des liens enfants */
.menu-sous-elements a {
  display: block;
  padding: 12px 25px;
  color: #bdc3c7;
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid #2c3e50;
  transition: all 0.3s;
}

.menu-sous-elements a:hover {
  background-color: #e67e22;
  color: #fff;
  padding-left: 30px; /* Petit effet de glissement au survol */
}