/* ============================================================
       UTILITAIRES GÉNÉRIQUES
    ============================================================ */
 
    /* Texte */
    .txt_ctr  { text-align: center; }
    .txt_left { text-align: left; }
    .txt_muted { color: var(--clr_txt_muted); }
    .txt_sm   { font-size: 12px; }
    .txt_xs   { font-size: 11px; }
 
    /* Affichage */
    .d_flex   { display: flex; }
    .d_grid   { display: grid; }
    .flex_col { flex-direction: column; }
    .align_ctr { align-items: center; }
    .justify_ctr { justify-content: center; }
    .justify_between { justify-content: space-between; }
    .gap_sm   { gap: var(--sp_sm); }
    .gap_md   { gap: var(--sp_md); }
 
    /* Espacement */
    .mt_sm    { margin-top: var(--sp_sm); }
    .mt_md    { margin-top: var(--sp_md); }
    .mt_lg    { margin-top: var(--sp_lg); }
    .mb_sm    { margin-bottom: var(--sp_sm); }
    .mb_md    { margin-bottom: var(--sp_md); }
    .mb_lg    { margin-bottom: var(--sp_lg); }
 
    /* ============================================================
       COMPOSANT : BOUTON
       Usage : <button class="btn">Texte</button>
               <button class="btn btn_outline">Texte</button>
               <button class="btn btn_ghost btn_danger">Supprimer</button>
               <button class="btn btn_sm">Petit</button>
    ============================================================ */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--sp_sm);
      padding: 10px 20px;
      font-family: var(--font_ui);
      font-size: 13px;
      font-weight: 500;
      border-radius: var(--rad_md);
      border: 1px solid transparent;
      cursor: pointer;
      transition: background var(--trans), border-color var(--trans), color var(--trans), transform 0.1s;
      line-height: 1;
      white-space: nowrap;
      /* variante par défaut : primaire */
      background: var(--clr_primary);
      color: #fff;
    }
    .btn:hover, .btn.active  { background: var(--clr_primary_hov); }
    .btn:active, .btn.active { transform: scale(0.98); }
 
    /* Variantes */
    .btn_accent  { background: var(--clr_accent); color: #fff; }
    .btn_accent:hover { background: var(--clr_accent_hov); }
 
    .btn_outline {
      background: transparent;
      color: var(--clr_primary);
      border-color: var(--clr_border);
    }
    .btn_outline:hover { background: var(--clr_surface_alt); }
 
    .btn_ghost {
      background: transparent;
      color: var(--clr_txt_muted);
      border-color: transparent;
    }
    .btn_ghost:hover { background: var(--clr_surface_alt); color: var(--clr_txt); }
 
    .btn_danger  { color: var(--clr_danger); }
    .btn_danger:hover { background: var(--clr_danger_bg); border-color: var(--clr_danger); }
 
    /* Tailles */
    .btn_sm  { padding: 6px 12px; font-size: 12px; border-radius: var(--rad_sm); }
    .btn_lg  { padding: 13px 28px; font-size: 15px; }
    .btn_full { width: 100%; }
 
    /* ============================================================
       COMPOSANT : GROUPE DE BOUTONS
       Usage : <div class="btns">...</div>            → horizontal
               <div class="btns btns_col">...</div>   → vertical
               <div class="btns btns_end">...</div>   → aligné à droite
    ============================================================ */
    .btns {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp_sm);
      align-items: center;
    }
    .btns_col   { flex-direction: column; }
    .btns_ctr   { justify-content: center; }
    .btns_end   { justify-content: flex-end; }
    .btns_full > .btn { flex: 1; }
 
    /* ============================================================
       COMPOSANT : CHAMP DE FORMULAIRE
       Usage : <div class="grp_champs">
                 <label>Label</label>
                 <div class="field_input_wrap">
                   <i class="ti ti-mail field_icon"></i>
                   <input class="field_input" type="email">
                 </div>
               </div>
    ============================================================ */
    .grp_champs { display: flex; flex-direction: column; gap: 6px; }
 
    LABEL {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--clr_txt_muted);
    }
 
    .div_champs { position: relative; }
 
    .icon {
      position: absolute;
      left: 11px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 16px;
      color: var(--clr_txt_muted);
      pointer-events: none;
    }
 
    INPUT {
      width: 100%;
      height: 42px;
      padding: 0 12px 0 38px;
      font-family: var(--font_ui);
      font-size: 13px;
      color: var(--clr_txt);
      background: var(--clr_surface_alt);
      border: 1px solid var(--clr_border);
      border-radius: var(--rad_md);
      outline: none;
      transition: border-color var(--trans), background var(--trans);
    }
    INPUT:focus {
      border-color: var(--clr_border_focus);
      background: var(--clr_surface);
    }
    INPUT::placeholder { color: var(--clr_txt_muted); opacity: 0.7; }
 
    /* sans icône */
    .div_champs.no_icon INPUT { padding-left: 12px; }
 
    /* ============================================================
       COMPOSANT : CHECKBOX
    ============================================================ */
    .check {
      display: flex;
      align-items: center;
      gap: var(--sp_sm);
      cursor: pointer;
    }
    .check input[type="checkbox"] {
      width: 15px; height: 15px;
      accent-color: var(--clr_primary);
      cursor: pointer;
      flex-shrink: 0;
    }
    .check label {
      font-size: 13px;
      color: var(--clr_txt_muted);
      cursor: pointer;
    }
 
    /* ============================================================
       COMPOSANT : SÉPARATEUR TEXTE
    ============================================================ */
    .divider {
      display: flex;
      align-items: center;
      gap: var(--sp_md);
    }
    .divider::before, .divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--clr_border);
    }
    .divider span { font-size: 11px; color: var(--clr_txt_muted); }

    /* ============================================================
       COMPOSANT : BADGE
    ============================================================ */
	.badge {
		display: inline-block;
		font-size: 10px;
		font-weight: 600;
		padding: 2px 8px;
		border-radius: 10px;
		margin-top: 2px;
	}

	.badge.large {
		font-size: 12px;
		align-items: center;
		font-weight: 500;
		padding: 4px 11px;
		border-radius: 20px;
		white-space: nowrap;
	}
	
	.badge_ok   { background: #eaf3de; color: #3b6d11; }
	.badge_warn { background: #faeeda; color: #854f0b; }
	.badge_info { background: #e6f1fb; color: #185fa5; }
	.badge_muted { background: var(--clr_surface_alt); color: var(--clr_txt_muted); }

	
	/*** MENU ***/
.menu {	display: flex;
	gap: .2rem;
	padding-bottom: 1rem; 
} 
.menu.r { justify-content: flex-end; }
.menu .menuBtn { display: inline-block; }

/** MENU MAJ 30/01/2024 **/
.menu.c { justify-content: center; } 
A.onglet { padding: .45rem .9rem; border-radius: 6px; }
.menu A.onglet { border-bottom: .1rem solid #fbe6f1; }
A.onglet:hover, A.onglet:active, A.onglet.active 
{ background-color: var(--g-bleu);
	color: var(--g-blanc)!important;
	border-bottom: 0;
}