:root {
	--cp--brun-mokka: #5A3A2E;    
    --cp--beige-latte: #E6D2C3;
    --cp--blanc-creme: #F8F5F2;
    --cp--bg-bouton:#C88741;
}
h1{color:var(--cp--brun-mokka);font-size:2.5rem;font-weight:normal;}
h3{color :var(--cp--brun-mokka);}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;margin:0}
.container{max-width:1200px;margin:24px auto;padding:0 16px}
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cp--beige-latte);
    background-color: var(--cp--blanc-creme);
}

a:link, a:visited, a:active {
	color: var(--cp--brun-mokka);
    text-decoration: none;
}
a:hover{text-decoration: underline;}

a.abtdroit:link, a.abtdroit:visited, a.abtdroit:active {
    color: white;
    background-color: var(--cp--bg-bouton);
    padding: 0.5rem;
    text-decoration: none;
    margin-top: 2rem;
    padding-right: 3rem;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
    position: absolute;
    right: 1rem;
    top: 0;
}
a.abtdroit:hover{background-color:var(--cp--brun-mokka);}

a.atitrepost:link, a.atitrepost:visited, a.atitrepost:active {
    color: var(--cp--brun-mokka);
    text-decoration:none;
}
a.atitrepost:hover{text-decoration:underline;}

.divstatus {
    color: white;
    background-color: #857f79;
    padding: 0.3rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    text-decoration: none;
    border-radius: 0.5rem;
    display: inline-block;
    width: auto;
    position: absolute;
    right: 0;
    top: 0;
}
.datepost {
    position: absolute;
    right: 0;
    top: 35px;
}

#divlisteposts .divstatus{
	position:absolute;
	right:1rem;
	top:1.5rem;
}
#divlisteposts .numticket{
	position:absolute;
	right:1rem;
	top:4.5rem;
}
#divlisteposts .datepost{
	position:absolute;
	right:1rem;
	top:6rem;
}


.brand a{font-weight:700}

a.aretour{background-image: url(/images/retour.png);background-repeat:no-repeat;padding-left:30px;}

.card{border:1px solid var(--cp--beige-latte);border-radius:10px;padding:16px;margin:12px 0;background-color:#fffefe;}
.row{display:block;position:relative;}
.row h2 {
    display: inline-block;
    font-weight: normal;
    margin-bottom: 0;
    margin-top: 0.4rem;
    font-size: 1.1rem;
}
.muted{color:#666}
.danger{color:#b00020}
input{width:95%;padding:10px;border:1px solid #ccc;border-radius:8px}
button{padding:10px 14px;border:0;border-radius:8px;cursor:pointer;margin-top:1rem;}
button.primary{background:#eb7000;color:#fff}
button.link{background:transparent;color:#0b57d0;padding:0}
.badge{display:inline-block;padding:2px 8px;border:1px solid #ccc;border-radius:999px;font-size:12px;margin-right:8px;background-color:white;}
textarea {
    width: 94%;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    padding:1rem;
}
label{display:block;margin-bottom:0.5rem;}

/* ====== Messages style SMS ====== */
.thread { display: flex; flex-direction: column; gap: 10px; }

.msg {
  max-width: 90%;
  min-width:90%;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f7f7f7;
}

.msg .meta {
  font-size: 12px;
  color: #666;
  margin-bottom: 6px;
}

.msg .body {
  white-space: pre-wrap;  /* conserve retours à la ligne */
  word-break: break-word;
}

.msg-client { align-self: flex-start; background: #f4f6f8; }
.msg-admin  { align-self: flex-end;   background: #4f2f240f;}

/* Pièces jointes */
.msg .atts { margin-top: 8px; }
.msg .atts ul { margin: 0; }
.msg .atts li {
    list-style-type: none;
    background-image: url(/images/trombone.png);
    background-repeat: no-repeat;
    padding-left: 20px;
    height: 30px;
    margin-left: -35px;
}

#mainint{
	background-color:red;
	padding:1rem;
	border-radius:0.5rem;
	background-color:var(--cp--blanc-creme);
	position:relative;
	margin-left: auto;
	margin-right: auto;
	width:auto;
	max-width:1500px;
}