/* =========================================================
   VARIABLES GLOBALES
   ========================================================= */
:root{
  --page-max-width:1200px;
  --page-padding:20px;
  --bg-page:#ECFEFF;
  --bg-body:#f7f7f7;
  --text:#333;
  --muted:#666;
  --accent:#0b66c3;
  --primary:#4a6fa5;
  --primary-dark:#2e4a6f;
  --card-bg:#ffffff;
  --card-border:#e6e6e6;
  --shadow:0 0 5px rgba(0,0,0,0.12);
  --radius:6px;
  --gap:14px;
  --font-sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --nav-size-desktop:24px;
  --nav-size-mobile:18px;
}

/* =========================================================
   RESET MINIMAL ET TYPOGRAPHIE
   ========================================================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:20px;
  font-family:var(--font-sans);
  background:var(--bg-body);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Conteneur principal */
.page{
  max-width:var(--page-max-width);
  width:100%;
  margin:0 auto;
  background:var(--bg-page);
  padding:var(--page-padding);
}

/* Titres et paragraphes */
h1,h2{ text-align:center; margin-top:40px; color:var(--primary-dark) }
p{ font-size:16px; line-height:1.5; margin:0 0 1rem 0 }
.page-content{ text-align:center }

/* =========================================================
   BANDEAU HEADER
   ========================================================= */
.header{
  background:linear-gradient(var(--primary),var(--primary-dark));
  color:#fff;
  padding:20px;
  text-align:center;
  border-radius:var(--radius);
  margin-bottom:30px;
}
.header .logo{ width:80px; margin-bottom:10px; display:inline-block }
.header .title{ font-size:28px; font-weight:700 }
.header .subtitle{ font-size:16px; opacity:.9 }

/* =========================================================
   NAVIGATION
   ========================================================= */
.nav{ margin:18px 0; color:#222 }
.nav h2{ margin:0 0 10px 0; font-size:1.6rem }
.nav-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--gap);
}
.nav-group{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  padding:12px;
  border-radius:8px;
  box-shadow:0 1px 2px rgba(0,0,0,0.03);
}
.nav-group h3{ margin:0 0 8px 0; font-size:1.05rem; color:#333 }

/* Liens de navigation */
.nav-btn{
  display:block;
  text-decoration:none;
  padding:12px 10px;
  border-radius:6px;
  color:var(--accent);
  font-weight:700;
  font-size:var(--nav-size-desktop);
  line-height:1.25;
  background:transparent;
  border:1px solid transparent;
  transition:background .12s ease, border-color .12s ease;
}
.nav-btn:hover,
.nav-btn:focus{
  background:#f3f8ff;
  border-color:#cfe3ff;
  outline:3px solid rgba(11,102,195,0.12);
  outline-offset:2px;
}
.nav-btn:active{ background:#e6f0ff }
.nav-btn[aria-current="page"]{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

/* Responsive tactile */
@media (pointer:coarse), (max-width:600px){
  .nav-btn{ padding:14px 12px; font-size:var(--nav-size-mobile) }
  .nav-grid{ gap:10px }
}

/* =========================================================
   LISTES GÉNÉRIQUES
   ========================================================= */
ul{ list-style:none; padding:0; margin:0; text-align:center }
ul li{ display:inline-block; margin:5px 10px }
ul li a{
  color:#444; text-decoration:none; padding:6px 12px; border-radius:4px;
  background:#eaeaea; transition:background .18s;
}
ul li a:hover{ background:#dcdcdc }

/* =========================================================
   IMAGES (GRAPHIQUES)
   ========================================================= */
img{
  display:block;
  margin:20px auto;
  max-width:95%;
  border:1px solid #ccc;
  background:#fff;
  padding:10px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* =========================================================
   TABLEAUX
   ========================================================= */
table{
  width:90%;
  margin:30px auto;
  border-collapse:collapse;
  background:#fff;
  box-shadow:var(--shadow);
}
th,td{ padding:3px; border:1px solid #ccc; text-align:center }
th{ background:var(--primary); color:#fff }
tr:nth-child(even){ background:#f2f2f2 }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ text-align:center; margin-top:40px; font-size:14px; color:var(--muted) }

/* =========================================================
   GRILLES ANNÉES / MOIS / CARTES D'ACCUEIL / GRAPHIQUES
   ========================================================= */
.year-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px;
  margin-top:20px;
}
.year-grid a,
.month-grid a,
.month-graphs-grid a{
  display:block; padding:12px; background:#f0f4fa; border-radius:6px;
  text-align:center; text-decoration:none; color:#000; font-weight:700;
}
.year-grid a:hover,
.month-grid a:hover,
.month-graphs-grid a:hover{ background:#e0e8f2 }

.month-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px;
  margin-top:20px;
}

.home-grid{
  display:flex; gap:20px; margin-top:30px; flex-wrap:wrap;
}
.home-card{
  flex:1; min-width:220px; padding:20px; background:#f0f4fa; border-radius:6px;
  text-decoration:none; color:#000; transition:background .18s;
}
.home-card:hover{ background:#e0e8f2 }
.home-card h2{ margin-top:0 }

/* month-graphs grid */
.month-graphs-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px; margin-top:20px;
}

/* =========================================================
   CALENDRIER LUNAIRE / JARDINAGE
   ========================================================= */
.jardinage{
  margin-top:40px; padding:20px; background:#f4f8f4; border:1px solid #cdd8cd;
  border-radius:6px;
}
.jardinage h3{ margin-top:0; color:#2f5e2f }
.texte-jardinage{ line-height:1.6; white-space:pre-line }

/* =========================================================
   UTILITAIRES
   ========================================================= */
.hidden{ display:none !important }
.center{ text-align:center }

/* Icônes inline petites (ex : haut.gif) */
img.icon-inline,
img.icon {
  width: 40px;            /* taille fixe */
  height: 40px;           /* taille fixe */
  display: inline-block;  /* reste dans le flux du texte */
  vertical-align: middle; /* aligne avec le texte */
  margin: 0;              /* annule le margin global */
  padding: 0;             /* annule le padding global */
  border: 0;              /* annule la bordure globale */
  background: transparent;
  box-shadow: none;       /* annule l'ombre globale */
  max-width: none;        /* évite le redimensionnement */
}

table thead tr:nth-child(2) th {
    font-weight: normal;
//    font-size: 12px;
    padding: 1px 2px;
    line-height: 1.0;
}