/*   BASE  */
  
 body {
  margin: 0;
  background-color: rgb(196,234,226);
  font-family: Arial, "Comic Sans MS", sans-serif;
  height: 100%;
  max-width: 95%;
  color: rgb(0,64,0);
  margin: 0;
}
 
/*  HEADER */
header {
  background: url(logo.png) repeat-x;
  height: 7rem;
  position: relative;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 7rem;
  position: relative;
}

.site-title {
  color: white;
  font-size: 3rem;
  margin: 0;
  text-align: center;
  text-shadow: 0.1em 0.1em 0.1em black;
}

.site-url {
  position: absolute;
  left: 1rem;
  bottom: 0.5rem;
  background: white;
  color: black;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.85em;
}

/* HAMBURGER (desktop caché) */
#hamburger {
  display: none;
  position: absolute;
  right: 1rem;
  top: 2rem;
  z-index: 4000;
}

#hamburger img {
  width: 40px;
}

/* MENU DESKTOP  */
#menu {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  position: relative;
  z-index: 2000;
}

#menu li {
  display: inline-block;
  width: 150px;
  position: relative;
}

#menu > li > a {
  display: block;
  padding: 10px;
  color: white;
  background: linear-gradient(to top, #2bc235, #0e4211);
  text-decoration: none;
  border-radius: 8px;
}

#menu > li > a:hover {
  background: linear-gradient(to bottom, #4df04d, #249e1e);
  color: black;
}

/* sous-menu desktop */
#menu ul {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #1f5e1f;
  display: none;
}

#menu li:hover > ul {
  display: block;
}

#menu ul li {
  display: block;
  width: 100%;
}

#menu ul li a {
  display: block;
  padding: 8px;
  color: white;
  text-decoration: none;
  background: #145a32;
}

#menu ul li a:hover {
  background: #4df04d;
  color: black;
}

/* DRAPEAUX / IMAGES  */
.drap {
  float: left;
  margin: 35px 20px 0 10%;
  min-height: 150px;
}

.drap img {
  width: 700px;
  max-width: 100%;
  box-shadow: -1px 2px 5px rgba(0,0,0,0.7);
}

.drap figcaption {
  margin-top: 1em;
  padding: 0.3em;
  border: 1px solid black;
  background-color: rgb(100,200,200);
  border-radius: 0.3em;
}

caption {
  font-weight: bold;
}

figure {
  display: inline-block;
}

h1 {
  text-align: center;
  color: green;
  font-size: xx-large;
  box-shadow: -1px 2px 5px rgba(0,0,0,0.7);
  width: 50%;
  margin: auto;
}
h2, h3, h4, h5 {
  color: green;
}
h2 { margin-left: 5%; }
h3 { margin-left: 8%; }
h4 { margin-left: 12%; }
h5 { margin-left: 15%; }
figcaption {
  text-align: center;
  border: 1px solid black;
  border-radius: 8px;
  background-color: rgb(90,220,70);
}
hr { width: 100%; }
li { display: inline-block; }
p {
  margin: 1% 15% 0 8%;
  text-indent: 3%;
}
table { border-collapse: collapse; }

.ech1 img{
width:280px;
}
.fig_130{
margin: 8px 0px;
width:130px;
}
.fig_200, .h200{
margin: 8px 0px;
width:200px;
vertical-align:bottom;
}

.h201{
max-width:100px;
vertical-align:center;
}

.fig_300{
max-width:330px;
}

.fig_330{
max-width:300px;
margin-left: 10px;	
}
.fig_400, .fig_420{
width:400px;
}
.flb figure {
    display: flex;            /* met image et légende côte à côte */
    align-items: center;      /* centre verticalement l'image et le figcaption */
    justify-content: center;  /* centre horizontalement la figure dans le div parent */
    gap: 15px;                /* espace entre l'image et le figcaption */
    margin: 10px auto;        /* centre le figure horizontalement et ajoute un petit margin vertical */
}
.flb img {
width: 300px;
border: 3px double black; 
}
.flb figcaption {
    padding: 5px 10px;        /* padding autour du texte de la légende */
	background-color: rgb(90,220,70);
    border-radius: 5px;        /* optionnel : coins arrondis */
    margin: 0;                 /* supprime les marges par défaut */
}
.flr{
display:flex;
margin: 0% 10% 0% 25%;
}
.flr img{
width: 300px;
border: 3px double black; 
}
.flr p{
margin: auto;
padding: 0.3em;
text-align: center;
border: 1px solid black;
border-radius: 8px;		
background-color: rgb(90,220,70);
width: 300px;
}
.flr figcaption{
margin: auto;
padding: 0.3em;
text-align: center;
border: 1px solid black;
border-radius: 8px;		
background-color: rgb(90,220,70);
width: 300px;
}

.flr4{
display:flex;
margin-left: 5%;
justify-content: start;
vertical-align:middle;
}
.flr4 figure{
max-width: 400px;
}
.flr4 img{
width: 100%;
}
.flr4 p{
margin: auto 40px;
padding: 0.3em;
border: 1px solid black; 
border-radius: 8px;		
background-color: rgb(90,220,70);	
text-indent:0px;
}

.hist30{
	margin: 10px 0px;
	width: 40px;
	vertical-align: middle;	
}
.h60{
    width: 60px;
	justify-content: center;
}
.h80 img{
    height: 80px; 
	margin-bottom: 5px;
}
.h130{
	margin: 8px 0px;
	width: 128px;
	vertical-align: bottom;
}
.h300{
	width: 300px;
	margin : 10px;
	vertical-align: bottom;	
}
.h400{
	width: 400px;
	margin: 10px 0px;
	vertical-align: top;
	}
.h800 {
  width: 90%;
  max-width: 90%;
  margin: 0 auto;
  display: block;
}
.h800 img {
  width: 100%;
  height: auto;
  display: block;
}
.h800 figcaption {
  margin-top: 1em;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  border: 1px solid black; 
  border-radius: 8px;
  background-color: rgb(90,220,70);
}
.livredor{
margin-left: 10%;
width: 70%;
}
.mg15{
margin-left:15%;
margin-right:30%;
}
.ref{
	background-color : rgb(100,200,200);
	border: 1px solid blue;		
	border-radius: 5px;
	margin: 30px;
	padding: 10px;	
	display:inline-block;
	font-size: .9em;
}
.ref a{
	padding-left: 10px;	
}
.sep img{
	display:block;
	width: 60%;
	margin:100px auto;
}
.tab1 table{
	display:inline-block;
	background-color : rgb(100,200,200);
	border: 1px solid blue;		
	border-radius: 5px;
	padding: 5px;	
	margin: 35px 0px 0px 10px;
	width: 300px;
}
.tab1 td{
	width: 290px;
	background-color: rgb(160,223,200);	
    border: 1px solid black;
	padding: 3px;
	vertical-align: middle;
}
.suiv{
	padding-right: 0px;
	padding-left: 0px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; 
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; 
  border: 0;
}
.xxsmall{
	font-size: .8em;
}
input[type=button], input[type=submit], input[type=reset], button, .button {
  padding: 0.2em 0.8em;
	margin: 8px 2px;
	display: inline-block;
	color: #BFE8CD;
	font-size: 1em;
	margin: 0.5em 0.05em;
	cursor: pointer;
	background: #2bc235;
	background: linear-gradient(to top, #2bc235, #0e4211);
	border-radius: 5px;
	text-decoration: none;
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover, .button:hover {
	background: linear-gradient(to bottom, #4df04d, #249e1e);
	color: black;
}
input[type=button]:active, input[type=submit]:active, input[type=reset]:active, button:active, .button:active{
	opacity:0.8;
}
/* Base commune à toutes les cartes */
.zaf,
.zasi,
.zeur,
.zamS,
.zoce,
.zamC {
  position: relative;
  overflow: visible;
}
/* Bordure pour toutes les cartes */
.zaf img,
.zasi img,
.zeur img,
.zamS img,
.zoce img,
.zamC img {
  display: inline-block;
  border-radius: 1px;
  border: 1px solid black;
  transition: transform 0.25s ease;
  cursor: zoom-in;
  transform-origin: top right;
}
/* Dimensions normales */
.zaf img { width: 281px; height: 307px; }   /* 0.92 */
.zasi img { width: 281px; height: 246px; }  /* 1.14 */
.zeur img { width: 281px; height: 234px; }  /* 1.2 */
.zamS img { width: 285px; height: 379px; }  /* 0.75 */
.zoce img { width: 281px; height: 185px; }  /* 1.5 */
.zamC img { width: 280px; height: 192px; }  /* 1.45 */
/* Positionnement stable au zoom */
.zaf:hover img,
.zasi:hover img,
.zeur:hover img,
.zamS:hover img,
.zoce:hover img,
.zamC:hover img {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1000;
  background: white;
}
/* Zoom */
.zaf:hover img  { transform: scale(2); }
.zasi:hover img { transform: scale(1.8); }
.zeur:hover img { transform: scale(2); }
.zamS:hover img { transform: scale(1.5); }
.zoce:hover img { transform: scale(2); }
.zamC:hover img { transform: scale(2); }

.zoom img{
transition: transform .3s;
vertical-align: center;
}
.zoom img:hover{
-ms-transform: scale(3); /* IE 9 */
-webkit-transform: scale(3); /* Safari 3-8 */
transform: scale(3);
}
.but{
	background: linear-gradient(to top, #2bc235, #0e4211);
	width: 2%;
	padding: 0.2em 1em;
	border-radius: 0.3em;
	color: #BFE8CD;
	text-decoration:none;
	text-align:center;
	font-size: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 20%;
}
.badge {
  width: 350px;
  margin: 50px auto 0;
  padding: 10px;
  border: 1px solid brown;
  border-radius: 10px;
  background-color: rgb(236,228,230);
  box-sizing: border-box;
}
.badge-ligne {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 15px;
  align-items: center;
  padding: 2px 0;
}
.badge-valeur {
  text-align: right;
}
.badge-valeur img {
  width: 90px;
  height: auto;
}
.bob {
  background-color: #F6AD1A;
  background-image: linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
  padding: .2em .6em;
  border-radius: 1em;
  text-align: center;
  position: fixed;
  right: .5em;
  bottom: 5em;
  font-size: 0.9rem;
  color: white;
  text-decoration: none;
  width: max-content;
  min-width: 120px;
  max-width: 220px;
  z-index: 1000;
}
.bob:hover,
.bob:focus {
  filter: brightness(1.1);
}
#copyright{
	font-size: .8em;
	text-align: center;	
	margin-top:1em;
	margin-bottom:30px;
}
.copyright{
	font-size: .8em;
	text-align: center;	
	margin-top:1em;
	margin-bottom:30px;
}
/* conteneur / layout */
.menuplante {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menuplante li {
  display: inline-block;
  margin: 4px;
}
/* base des boutons du menu plante (ne touche pas .button globale) */
.menuplante-button {
  padding: 0.2em 0.8em;
  display: inline-block;
  font-size: 1em;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  /* font-weight supprimé pour enlever le gras */
  /* transition légère pour un rendu plus doux */
  transition: background 0.18s ease, color 0.12s ease, filter 0.12s ease;
}
/* Dégradés par classe (fond par défaut) */
.menuplante-button.but_ros { background: linear-gradient(to top, #ffb6c1, #b03060); color: #fff; } /* fleurs - rose */
.menuplante-button.but_ble { background: linear-gradient(to top, #1E90FF, #00BFFF); color: #fff; } /* palmiers - bleu */
.menuplante-button.but_ver { background: linear-gradient(to top, #81c784, #2e7d32); color: #fff; } /* arbres - vert */
.menuplante-button.but_ora { background: linear-gradient(to top, #ffcc80, #ef6c00); color: #fff; } /* plantes - orange */
/* Hover : remplace le dégradé par la couleur claire (uni) */
.menuplante-button.but_ros:hover { background: #ffb6c1; color: black; }
.menuplante-button.but_ble:hover { background: #1E90FF; color: black; }
.menuplante-button.but_ver:hover { background: #81c784; color: black; }
.menuplante-button.but_ora:hover { background: #ffcc80; color: black; }
/* active (clic) */
.menuplante-button:active {
  transform: translateY(1px);
  opacity: 0.95;
}
/* menu générique pour toutes les pages avec un menu includ php */
.menuphp {
  list-style: none;       /* pas de puces */
  padding: 0 0 0 0.5em;  /* padding gauche de 0.5em pour décoller légèrement les items du bord */
  margin: 1em 0 0 0;     /* 1em de marge au-dessus pour espacer du paragraphe précédent, 0 à droite et en bas */
}
.menuphp li {
  display: inline-block;
  margin: 4px;
}
/* base des boutons menuphp */
.menuphp-button {
  padding: 0.15em 0.6em; /* padding réduit pour meilleure lisibilité responsive */
  display: inline-block;
  font-size: 1em;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.12s ease, filter 0.12s ease;
}
/* Dégradés par catégorie */
.menuphp-button.but_orange { background: linear-gradient(to top, #ffcc80, #ef6c00); color: #fff; } /* Montagnes */
.menuphp-button.but_red    { background: linear-gradient(to top, #ff6b6b, #c21807); color: #fff; } /* Volcans */
.menuphp-button.but_green  { background: linear-gradient(to top, #81c784, #2e7d32); color: #fff; } /* Collines */
.menuphp-button.but_blue   { background: linear-gradient(to top, #64b5f6, #1565c0); color: #fff; } /* Autre */

/* Hover : couleur claire unie, texte noir pour lisibilité */
.menuphp-button.but_orange:hover { background: #ffcc80; color: black; }
.menuphp-button.but_red:hover    { background: #ff6b6b; color: black; }
.menuphp-button.but_green:hover  { background: #81c784; color: black; }
.menuphp-button.but_blue:hover   { background: #64b5f6; color: black; }
/* active (clic) */
.menuphp-button:active {
  transform: translateY(1px);
  opacity: 0.95;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 800px) {

  #hamburger {
    display: block;
  }

  #menu {
    display: none;
    position: absolute;
    top: 7rem;
    left: 0;
    width: 100%;
    background: white;
  }

  #menu.open {
    display: block;
  }

  #menu li {
    display: block;
    width: 100%;
    text-align: center;
  }

  #menu ul {
    display: none !important;
    position: relative;
  }

  #menu ul.open {
    display: block !important;
  }