body{ font-size:14px;  /*min-height: 100vh;*/ /* hauteur 100ù */ background-color:#efece6; 
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
/* On active la grille de 2 colonnes quand le point de rupture est atteint */
@media(min-width: 576px){
   body{
    display:grid;
    grid-template-columns:200px 1fr;
    grid-template-rows: auto 1fr auto;/* header | contenu | footer */
    grid-template-areas:
      "header header"
      "nav    main"
      "footer footer";
    gap: 0;                            /* aucun espace entre les lignes/cols */
  }
}
/* Bonus : Centré ? */
/* body{ max-width:800px; margin:0 auto; } */

/* ===== HEADER en flex : 3 colonnes qui s'étirent sur toute la hauteur ===== */
header{ grid-column:1 / -1; display:flex; align-items:stretch; /* les enfants prennent 100% de la hauteur du header */
  background-color:#EDE6D8; position:relative; height:120px; box-sizing:border-box;
}
/* colonnes gauche / centre / droite */
header .bandeau_left, header .bandeau_center, header .bandeau_right{ display:flex; }
header .bandeau_left{ flex:0 0 200px; background:url('../img/bandeau.png') no-repeat left center; }
header .bandeau_center{ flex:1 1 auto; justify-content:center; /* centre horizontalement le logo */ }
/* titres éventuels (si tu en mets) */
header .bandeau_center h1, header .bandeau_center h3{ position:static; margin:0; }
/* image logo : s’adapte à la hauteur du header */
header img{
  max-height:100%; height:auto; width:auto; display:block;
}
header .bandeau_right
{
  flex:0 0 250px; justify-content:flex-end; text-align:right; background:url('../img/bandeau.png') no-repeat right center;
  padding:0 12px 0 0;
  flex-direction:column;      /* empile verticalement */
  justify-content:flex-start; /* colle en haut */
}
/* micro-ajustements typographiques */
header .bandeau_right .version{ font-size:12px; line-height:1; }

/*
header{ grid-column:1 / -1; background-color:#EDE6D8; border:1px solid black; }

/*header, header .bandeau_left, header .bandeau_center, header .bandeau_right{ height:120px; }*/
/*header .bandeau_left{ display:block; position:relative; float:left; width:200px; background:url('../img/bandeau.png') no-repeat; z-index:10;border:1px solid yellow; }
header .bandeau_center{ position:absolute; top:0; width:100%; background-color:#EDE6D8; color:#c66347; border:1px solid orange;}
header img{ position:relative; float:left; left:20%; }
header .bandeau_center h1{ position:relative; float:left; left:20%; top:20px; font:SimSun-ExtG; }
header .bandeau_center h3{ position:relative; float:left; left:20%; top:70px; }
header .bandeau_right{ position:absolute; right:0; text-align:right; width:200px; background:url('../img/bandeau.png') right; border:1px solid red;}
header .version{ margin-right:20px; }*/

main{ padding:1rem; }
nav{ background-color:#DECBBE; padding-top:20px; width:187px; }
nav .group_menu, nav a{ padding:1rem; }
nav .group_menu{ padding-left:0; background-color:#D9BE91; }
/*nav ul{ display:grid; gap:.5rem; }*/
nav a{ display:block; text-decoration:none; padding:.5rem .75rem; border-radius:10px; }
nav a:hover{ background:#f3f4f6; }
nav a{ color:#69886E; }
.menu_selected{ background-color:#EDE6D8; color:#63856A; }

footer{ grid-column:1 / -1; background-color:#ddd; clear:both; }

/* placement explicite des zones */
header{ grid-area:header; }
nav{    grid-area:nav; margin:0; display:flow-root; }   /* empêche les marges de remonter */
main{   grid-area:main; margin:0; display:flow-root; min-width:0; }
footer{ grid-area:footer; margin-top:20px; border-top:1px solid var(--border); }

.dont_change{ font-size:70%; }

.fieldset{ width:900px; }
option{ background-color:white; }

:root{
      --brand:#6C8A70;
      --brand-2:#DDCBBF;
      --accent-1:#D29D85;
      --accent-2:#D9C8BC;
      --fg:#1f2937;
      --muted:#6b7280;
      --border:#e5e7eb;
      --shadow:0 6px 24px rgba(0,0,0,.08);
      --radius:18px;
    }
input[type=submit] , .btn{display:inline-block;border:1px solid transparent;padding:.75rem 1rem;border-radius:999px;font-weight:600}
input[type=submit] , .btn-primary{background:var(--brand);color:#fff}
input[type=submit]:hover , .btn-primary:hover{ filter:brightness(.95); cursor:pointer; }
.btn-ghost{border-color:var(--brand);color:var(--brand);background:#fff}
/* ------------------------------------- Tableau ------------------------------------- */
.tab_style{ border:1px solid #19870d; }
.tab_style th{ border-bottom:1px solid #224089; background-color:#6C8970; padding:10px; }
.tab_style td{ padding:0 20px; }
.tab_style tr:nth-child(even){ background-color:#d5e8d5; } /* Colorise 1 ligne sur 2 (odd=>impaire) */
.tab_style tr:hover{ background-color:#dae9fa; }
.tab_style .delete{ text-align:center; }
.tab_style .delete:hover{ background-color:#fdd9de; }

.legende td{ border:1px solid #224089; }
.legende_col1{ width:20px; }
/* -------------------------------------- Divers -------------------------------------- */
#reference a{ text-decoration:none; }
.citation
{
  font:normal 20px Comic Sans MS;
  text-align:center;
}
.center
{
  text-align:center;
}
.opacity
{
  filter:alpha(opacity=60);
  -moz-opacity:0.6;
  opacity:0.6;
  -khtml-opacity:0.6;
}
.no_opacity
{
  position:relative;    /* Seulement pour IE... */
}
/* -------------------------------------- Liste des clients --------------------------------------- */

/* -------------------------------------- 4 piliers --------------------------------------- */
.listing_col_div{ width:90%; padding:10px; overflow-x:scroll; }
.listing_col{ width:100%; text-align:center; }
.listing_col th{ border-bottom:1px solid #224089; background-color:#6C8970; width:70px; }
.listing_col td{ border:1px solid #224089; padding:0; }
.listing_col .selected{ background-color:#A1C41B; }
.listing_col a{ text-decoration:none; color:black; display:block; }
.selec, .listing_col a:hover{ background-color:#A1C41B; }
.result{ float:left; margin-right:5px; }
.result th, .result td{ border:1px solid #224089; text-align:center; padding:3px 10px; }
.result th{ background-color:#6C8970; }
.result td{ position:relative;      /* référence pour l'absolu de l'image */
  overflow:visible; padding:5px 15px; }
.clash{ position:absolute; top:50%; display:block; z-index:1;
  left:100%;              /* se cale sur le bord droit de la cellule */
  transform:translate(-50%, -50%); /* moitié dedans, moitié dehors */
  pointer-events:none;    /* ne capte pas les clics, optionnel */ }
.clash_js{ position:absolute; top:50%; display:block; z-index:1;
  right:100%;              /* se cale sur le bord droit de la cellule */
  transform:translate(30%, -50%); /* moitié dedans, moitié dehors */
  pointer-events:none;    /* ne capte pas les clics, optionnel */ }

/* -------------------------------------- Titre --------------------------------------- */
.titre
{
  font-family:Script MT Bold, Ancestory SF, Liffey Script SF, Handscript SF, Edwardian Script ITC, Blackadder ITC, Monotype Corsiva;
}
h1{ font-size:22px; }
h2{ font-size:18px; }
h4{ font-size:15px; }
.titre .ombre
{
  color:#d2d2d2;
}

/* ------------------------------ El?ments de formulaire ------------------------------ */
input, textarea{ border:1px solid #A7A6AA; } /* #00008B */
textarea
{
  width:450px;
  height:150px;
}
/*input:focus, textarea:focus, select:focus
{
  border:1px solid blue;
  background-color:#F3F1FF;
}*/
.bouton
{
  background:url('../img/bc_bouton.gif') repeat-x;
  color:#224089;
}
.champ_tres_petit{ width:35px; }
.champ_petit{ width:75px; }
.champ_max{ width:90%; }
.champ_date
{
  width:75px;
  /*background:url('../inc/cal/images/b_calendrier.png') no-repeat 100% 50%;*/
  cursor:pointer;
  padding-right:20px;
}
.password img
{
  position:relative;
  right:35px;
  top:7px;
  cursor:pointer;
}
/* ------------------------------------- Couleur ------------------------------------- */
.vert{ background-color:#66FFCC; }
.rose{ background-color:#FED8DE; }
.rose_clair{ background-color:#feb1b4; }
.bleu{ background-color:#7db3f2; }
.rouge{ background-color:red; }
.bleu_clair{ background-color:#e8ebff; }
.bleu_fluo{ background-color:#99FFFF; }
.bleu_gris{ background-color:#cae0e8; }
.bleu_fonce{ background-color:#7a97fa; }
.jaune_clair{ background-color:#FFFFCC; }
.jaune_fonce{ background-color:#FFFF33; }
.orange{ background-color:#ff9966; }