:root {
    --b_pol: Arial, sans-serif;
    --b_h: 40px;
    --b_l: 120px;
    --c_vert: #198754; 
	--c_rouge: #dc3545; 
	--c_bleu: #0063B1;
    --c_noir: #000000;
	--c_gris_x: #F9F7F7;	/* ultra clair pour fond */
	--c_gris_a: #E3E1E1;
	--c_gris_b: #b0b0b0;
	--c_gris_c: #767676;	--c_gris: #767676;
	--c_gris_d: #3A3A3A;
    --b_radius: 5px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--b_h) - 5px);
    min-width: var(--b_l);
    width: auto;
    box-sizing: border-box;
    border: 1px solid var(--c_gris);
    background: var(--c_gris_x);
    color: #000;
    border-radius: var(--b_radius);
    padding: 0;
    cursor: pointer;
    font-family: var(--b_pol);
}
.btn:hover { border-color: var(--c_gris); background: #fff; color: #000; }

.btn_container {
    display: inline-flex;
    height: var(--b_h);
    min-width: var(--b_l);
    width: var(--b_l);
    border: 3px solid transparent; 
    box-sizing: border-box; 
    cursor: pointer;
    background: transparent;
    transition: none;
}

.btn_inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c_gris);
    background: #fff;
    box-sizing: border-box;
    border-radius: var(--b_radius);
    padding: 0 10px;
}


/* TYPE A : Extérieur ------------------- */
.btn_container.typ_a {
    position: relative;
    display: inline-flex;
    height: var(--b_h);
    min-width: var(--b_l);
    width: var(--b_l);
    box-sizing: border-box;
}
.btn_container.typ_a .btn_inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c_gris);
    background: var(--c_gris_x);
    box-sizing: border-box;
    border-radius: var(--b_radius);
    padding: 0 10px;
    color: #000;
}
.btn_container.typ_a::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 4px solid transparent;
    border-radius: calc(var(--b_radius) + 4px);
    pointer-events: none;
    box-sizing: border-box;
}
.btn_container.typ_a:hover::after {
    border-color: var(--halo-color, #000);
}
.btn_container.typ_a_bleu 	{ --halo-color: var(--c_bleu); }
.btn_container.typ_a_rouge 	{ --halo-color: var(--c_rouge); }
.btn_container.typ_a_vert 	{ --halo-color: var(--c_vert); }


/* TYPE B : inversion simple  ------------------- */
.typ_b .btn_inner 		{ border: 1px solid var(--c_gris_c);  background: var(--c_gris_x); color: #000; }
.typ_b:hover .btn_inner { background: var(--c_gris_c); color: #fff; border-color: #b0b0b0; }

/* Variantes couleur : une seule classe couleur */
.typ_b.col_noir .btn_inner 			{ border-color: var(--c_noir);  color: var(--c_noir); }
.typ_b.col_noir:hover .btn_inner 	{ background: var(--c_noir); color: #fff; border-color: var(--c_noir); }
.typ_b.col_rouge .btn_inner 		{ border-color: var(--c_rouge); color: var(--c_rouge); }
.typ_b.col_rouge:hover .btn_inner 	{ background: var(--c_rouge); color: #fff; border-color: var(--c_rouge); }

.typ_b.col_vert .btn_inner 			{ border-color: var(--c_vert);  color: var(--c_vert); }
.typ_b.col_vert:hover .btn_inner 	{ background: var(--c_vert); color: #fff; border-color: var(--c_vert); }


/* TYPE C : repos gris fin, survol couleur ------------------- */
.typ_c .btn_inner,
.typ_c_noir .btn_inner,
.typ_c_rouge .btn_inner,
.typ_c_vert .btn_inner 			{ border: 1px solid var(--c_gris_c); background: var(--c_gris_x); color: #000; }
.typ_c:hover .btn_inner 		{ border-color: #000000; border-width: 3px; }
.typ_c_noir:hover .btn_inner 	{ border-color: var(--c_noir); border-width: 3px; }
.typ_c_rouge:hover .btn_inner 	{ border-color: var(--c_rouge); border-width: 3px; }
.typ_c_vert:hover .btn_inner 	{ border-color: var(--c_vert); border-width: 3px; }

/* TYPE C1 : fond blanc ------------------- */
.typ_c1 .btn_inner,
.typ_c1_noir .btn_inner,
.typ_c1_rouge .btn_inner,
.typ_c1_vert .btn_inner 		{ border: 1px solid var(--c_gris_c); background: #fff; color: #000; }
.typ_c1:hover .btn_inner 		{ border-color: #000000; border-width: 3px; }
.typ_c1_noir:hover .btn_inner 	{ border-color: var(--c_noir); border-width: 3px; }
.typ_c1_rouge:hover .btn_inner 	{ border-color: var(--c_rouge); border-width: 3px; }
.typ_c1_vert:hover .btn_inner 	{ border-color: var(--c_vert); border-width: 3px; }

/* TYPE C2 : Monochrome fixe ------------------- */
.typ_c2_noir .btn_inner 		{ border: 1px solid var(--c_noir); color: var(--c_noir); }
.typ_c2_noir:hover .btn_inner 	{ border: 3px solid var(--c_noir); }
.typ_c2_rouge .btn_inner 		{ border: 1px solid var(--c_rouge); color: var(--c_rouge); }
.typ_c2_rouge:hover .btn_inner 	{ border: 3px solid var(--c_rouge); }
.typ_c2_vert .btn_inner 		{ border: 1px solid var(--c_vert); color: var(--c_vert); }
.typ_c2_vert:hover .btn_inner 	{ border: 3px solid var(--c_vert); }

/* TYPE D : minimaliste  ------------------- */
.typ_d .btn_inner 			{ border: none; background: var(--c_gris_a); color: #000; }
.typ_d:hover .btn_inner 	{ background: #000; color: #fff;}

/* TYPE D fond blanc */
.typ_d_blanc .btn_inner 			{ border: none; background: #fff; color: #000; }
.typ_d_blanc:hover .btn_inner 		{ background: var(--c_gris); color: #fff; }

/* TYPE D COULEURS --- */
.typ_d_vert .btn_inner 				{ border: none; background: var(--c_vert); color: #fff; }
.typ_d_vert:hover .btn_inner 		{ background: #2f2f2f; color: #fff; }
.typ_d_anthracite .btn_inner 		{ border: none; background: #2f2f2f; color: #fff; }
.typ_d_anthracite:hover .btn_inner 	{ background: var(--c_vert); color: #fff; }
.typ_d_blanc_vert .btn_inner,
.typ_d_blanc_rouge .btn_inner {
    border: none;
    background: #fff;
    color: #000;
    transition: background 0.2s ease, color 0.2s ease;
}
.typ_d_blanc_vert:hover .btn_inner 	{ background: #cfeecf; color: #000; }
.typ_d_blanc_rouge:hover .btn_inner { background: #f3d2e6; color: #000; }


/*  ajustements ----------------------- */
.h15 { height: 15px; }
.h20 { height: 20px; }
.h25 { height: 25px; }
.h30 { height: 30px; }

.l50 { width: 50px; min-width: 50px; }		/*   <div class="btn l50">OK</div>   */
.l60 { width: 60px; min-width: 60px; }
.l70 { width: 70px; min-width: 70px; }
.l100 { width: 100px; min-width: 100px; }
.l130 { width: 130px; min-width: 130px; }
.l150 { width: 150px; min-width: 150px; }
.l180 { width: 180px; min-width: 180px; }

.pad5 { padding-left: 5px; padding-right: 5px; }
.pad8 { padding-left: 8px; padding-right: 8px; }
.pad10 { padding-left: 10px; padding-right: 10px; }

.t1 {
    height: 28px;							/*  <div class="btn t1">Tiny</div>  */
    min-width: 50px;
    padding: 0 8px;
}
.t1:hover {
    border-color: #000;
}