/* ============================================================
       ROOT — modifier ici pour changer toute la charte
    ============================================================ */
    :root {
      /* Couleurs principales */
      --clr_primary:     #1a2e44;
      --clr_primary_hov: #aa1cbb;
      --clr_accent:      #e8a84c;
      --clr_accent_hov:  #d4943a;
 
      /* Surfaces */
      --clr_bg:          #f4f6f9;
      --clr_surface:     #ffffff;
      --clr_surface_alt: #f0f2f5;
 
      /* Texte */
      --clr_txt:         #1a2e44;
      --clr_txt_muted:   #7a8a9a;
      --clr_txt_light:   rgba(255,255,255,0.65);
 
      /* Bordures */
      --clr_border:      #e2e6eb;
      --clr_border_focus:#1a2e44;
 
      /* Danger */
      --clr_danger:      #c0392b;
      --clr_danger_bg:   #fdf0ef;
 
      /* Typographie */
      --font_ui:         'DM Sans', sans-serif;
      --font_brand:      'Sora', sans-serif;
 
      /* Espacements */
      --sp_xs:  4px;
      --sp_sm:  8px;
      --sp_md:  16px;
      --sp_lg:  24px;
      --sp_xl:  40px;
 
      /* Rayons */
      --rad_sm: 6px;
      --rad_md: 10px;
      --rad_lg: 16px;
 
      /* Ombres */
      --shadow_sm: 0 1px 3px rgba(0,0,0,0.08);
      --shadow_md: 0 4px 16px rgba(0,0,0,0.10);
      --shadow_lg: 0 12px 40px rgba(0,0,0,0.14);
 
      /* Transitions */
      --trans: 0.18s ease;
    }
 
    /* ============================================================
       RESET & BASE
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
    html, body {
      height: 100%;
      font-family: var(--font_ui);
      font-size: 14px;
      color: var(--clr_txt);
      background: var(--clr_bg);
    }
	
	section {
		margin: var(--sp_md) auto;
	} 
	
	h1 {
	  font-size: 22px;
	  font-weight: 500;
	  color: var(--clr_primary);
	  margin-bottom: 4px;
	} 
	
	p {
	  color: var(--clr_txt_muted);
	}
 
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
	
    /* ============================================================
       COMPOSANT : LOGO COZYDO
    ============================================================ */
    .logo {
      display: inline-flex;
      align-items: center;
      gap: 9px;
    }
    .logo_icon {
      width: 32px; height: 32px;
      border-radius: var(--rad_sm);
      background: linear-gradient(135deg, var(--clr_accent) 0%, var(--clr_accent_hov) 100%);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .logo_name {
      font-family: var(--font_brand);
      font-size: 18px;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: inherit;
    }
    .logo_name em { font-style: normal; color: var(--clr_accent); }
 
    /* version claire (sur fond sombre) */
    .logo_light .logo_name { color: #fff; }
 


/* ============================================================
   ESPACE CONTENU div.contenu
============================================================ */
.contenu {
  padding: var(--sp_lg);
  max-width: 1200px;
  margin: 0 auto;
}

/* ============================================================
   SECTION : CARD
============================================================ */
section.card {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp_md);
}
section.card > div {
  background: var(--clr_surface);
  border: 1px solid var(--clr_border);
  border-radius: var(--rad_md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color var(--trans), transform var(--trans);
} 
section.card > div:hover {
  border-color: var(--clr_primary);
  transform: translateY(-1px);
}

section#tdb.card > div {
	align-items: center;
  justify-content: space-between;
}

/** titre avec icone **/
section.card .titre_ico {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr_txt_muted);
}
section.card .titre_ico i { font-size: 13px; }
section.card .qte {
  font-size: 26px;
  font-weight: 500;
  color: var(--clr_primary);
  line-height: 1.1;
  text-align: center;
}
section.card .infos { 
  font-size: 11px;
  color: var(--clr_txt_muted); 
  text-align: center; 
}

/* ============================================================
   SECTION : CARD MODULES
============================================================ */
section#modules.card {
  grid-template-columns: repeat(2, 1fr);
}
#modules > div > a {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	text-decoration: none;
	cursor: pointer;
}
#modules > div > a:hover .mod_arrow {
  transform: translateX(3px); 
}
#modules .mod_body { flex: 1; min-width: 0; }

#modules .mod_title {
  font-size: 15px;
  font-weight: 500;
  color: var(--clr_primary);
  margin-bottom: 3px;
}

#modules .mod_desc {
  font-size: 12px;
  color: var(--clr_txt_muted);
  line-height: 1.5;
}

#modules .mod_arrow {
    color: var(--clr_txt_muted);
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    transition: transform var(--trans);
}
/* ============================================================
   SECTION : ICONES MODULES
============================================================ */
.mod_icon {
  width: 44px; height: 44px;
  border-radius: var(--rad_md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}

/* couleurs icônes modules */
.mod_icon.ic_doc    { background: #e6f1fb; color: #185fa5; }
.mod_icon.ic_budget { background: #eaf3de; color: #3b6d11; }
.mod_icon.ic_forum  { background: #faeeda; color: #854f0b; }
.mod_icon.ic_copro  { background: rgba(26,46,68,0.07); color: var(--clr_primary); }

/* ============================================================
   SECTION : ACTIONS
============================================================ */
section#actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp_md);
  border-top: 1px solid var(--clr_border);
  flex-wrap: wrap;
  gap: var(--sp_sm);
}
section#actions .btns { gap: var(--sp_sm); }

/** MOBILE **/
@media (max-width: 768px) {
  section.card {
    grid-template-columns: repeat(2, 1fr);
  }
	section#modules.card {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 768px) {
	.visible_mobile { display: none; }
}


.forum_reponse {
	margin-bottom: var(--sp_sm);
	padding-bottom: var(--sp_sm);
	border-bottom: 1px solid var(--g-btnActive);
}
.forum_reponse h4 {
	margin-bottom: var(--sp_sm);
	padding-bottom: var(--sp_sm);
}