:root{
	--emb-color: #00b4c1;
	--emb-color-rgb: 0, 180, 193;
	--mybrief-color: #35A936;
	--mybrief-color-rgb: 53, 169, 54;
	/* Custom colors vars from bootstrap colors */
	--bs-yellow: #ffc107;
	--bs-yellow-rgb: 255, 193, 7;
	--bs-orange: #fd7e14;
	--bs-orange-rgb: 253, 126, 20;
	--bs-red: #dc3545;
	--bs-red-rgb: 220, 53, 69;
}

/*** Override modal opacity for jquery ui dialogs ***/
.ui-widget-overlay {
	opacity: 0.5 !important;
	z-index: 1049 !important;
}

.ui-dialog {
	z-index: 1050 !important;
}

html {
    margin: 0;
    padding: 0;
}

body {
    margin: 0px;
    padding: 0px;
    font-size: 14px;
    font-weight: normal;
    overflow-y: scroll;
		z-index: 1;
}

/* Disable a underline text */
a {
		text-decoration: none;
}

.clear {
	clear: both;
}

.cursor-pointer {
	cursor: pointer;
}

/* Header */
.head_container {
    /*display: flex;*/
    justify-content: space-between;
		align-items: center;
		height: 50px;
}

.logo {
		width: 20%;
		height:100%;
		padding: 0px 5px;
		float:left;
}

.logo_img {
    padding: 5px;
}

.logo_txt {
    text-align: center;
    padding-left: 5px;
    font-size: 11px;
    font-style: italic;
    color: #2E74B5;
}

.div_title {
		width: 60%;
		height:100%;
		margin: 10px auto;
		margin-left:0;
    text-align: center;
    color: var(--main-color);
    font-size: 40px;
		padding: 0px 5px;
		float:left;
}

.div_logout{
	width: 20%;
	height:100%;
	padding: 0px 5px;
	text-align: center;
	float:left;
	position: relative;
}

.text_logout{
	position:absolute;
	bottom: 0;
	font-weight: bold;
}

/* Phone header. The three blocks above are percentage-width floats in a fixed 50px-tall bar, and
   they only hold together while the viewport is wide: .logo is 20% (78px at 390px) but the logo
   <img> is a hard width="185", so it spills out of its own box and the 60%-wide 40px title is drawn
   straight over it, while .text_logout — absolutely positioned against a 50px box — escapes the bar.
   Flex here makes the floats inert without touching the desktop rules. Scoped to the customer
   layout by class: main_layout has its own header and shares none of these names. */
@media (max-width: 768px) {
	.head_container{ display: flex; flex-wrap: wrap; align-items: center; height: auto; padding: 6px 10px; }
	.logo, .div_title, .div_logout{ float: none; width: auto; height: auto; padding: 0; }
	.logo_img{ padding: 0; }
	/* beats the width="185" attribute; height:auto keeps the ratio */
	.logo_img img{ width: 116px; height: auto; margin-left: 0 !important; }
	.div_logout{ margin-left: auto; text-align: right; position: static; }
	/* static parent + static child: the absolute bottom:0 had nothing sane to anchor to here */
	.text_logout{ position: static; }
	/* the title repeats the logo wordmark, so on a phone it steps down to a caption on its own row
	   rather than competing with it for the same 390px */
	.div_title{ order: 3; flex: 1 1 100%; margin: 2px 0 0; font-size: 19px; text-align: center; }
	.div_title .doc_title{ font-size: inherit; margin: 0; }
}

.page_title {
    text-align: center;
    color: green;
    margin-bottom: 0px;
}


.frame {
    padding: 10px;
    background-color: #fff;
    margin: 0 5px 5px 5px;
}

.no_level{
	text-align: center;
	color: red;
	font-size: 18px;
	font-weight: bold;
}

/*** SECTIONS ***/

.section{
	border: 1px solid #9dd7b1;
	border-radius: 5px;
	position: relative;
	margin: 20px auto;
	margin-top: 0px;
}

.section_title{
	background-color:black;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	color:rgb(132, 226, 250);
	font-weight:bold;
	padding: 8px 10px;
}

/****************/

.highlighted {
    font-weight: bold;
}

.array_table {
    border: 1px solid black;
    border-collapse: collapse;
    border-spacing: 0px;
    min-width: 30%;
}

.array_table td,
.array_table th {
    border: 1px solid black;
    padding: 5px 10px;
}

.array_table thead tr {
    background-color: #cccccc;
}

.array_table tbody tr:nth-child(even) {
    background-color: #c0d6e4;
}

.array_table tbody td:nth-child(n+2) {
    text-align: right;
}

.array_table tfoot tr {
    background-color: #e6fddf;
    font-weight: bold;
    text-transform: uppercase;
}

.array_table tfoot td:nth-child(n+2) {
    text-align: right;
}

@-moz-document url-prefix () {
    .array_table {
        border-collapse: separate;
        border: 0px solid black;
    }
    .array_table td,
    th {
        border: 1px solid black;
        border-bottom: 0px;
        border-right: 0px;
    }
    .array_table tfoot td {
        border-bottom: 1px solid black;
    }
    .array_table td:last-child,
    th:last-child {
        border-right: 1px solid black;
    }
}

.bottom_text {
    font-style: italic;
    font-size: 12px;
}

img {
    vertical-align: middle;
}


/****** NAVBAR ******/

.navbar{
	padding:0px;
}

.nav-link{
	padding: 1rem;
}

.nav-link.active {
	background-color: rgba(255, 255, 255, 0.2);
}

/* .navbar-nav li a {
	border-right: 1px solid rgba(0,0,0, 0.5);
} */

/* .navbar-nav li:first-child a {
	border-left: 1px solid rgba(0,0,0, 0.5);
} */

/* TO ADD BORDER LEFT AND RIGHT
.nav-item:nth-child(1){
	border-left: 1px solid grey;
}

.nav-item{
	border-right: 1px solid grey;
}
*/


/****** END NAVBAR ******/

.my_container {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -webkit-flex;
    /* NEW - Chrome */
    display: flex;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-flex-direction: row;
    -moz-box-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    /*justify-content: space-between;*/
    justify-content: center;
}

/***** Form validation *****/

.inputError{
	border:1px solid red !important;
}

.home_welcome{
	text-align: center;
	color: red;
}

/*** FORM ***/

.relative{
	position:relative;
}

.top-submit{
	border-bottom: 4px solid var(--main-color);
	margin-bottom: 10px;
	padding: 5px;
}

.bottom-submit{
	border-top: 4px solid var(--main-color);
	padding: 5px;
}

.submit-title{
	font-size: 24px;
	font-weight: bold;
	padding-left: 10px;
	line-height: 40px;
}

.submit-button{
	/* padding-right: 10px; */
	line-height: 40px;
}

.submit-button span{
	display: inline-block;
	font-size:12px;
	font-style: italic;
	font-weight: bold;
	color:#aaaaaa;
	padding-right: 5px;
}

.table-border-right{
	border-right:1px solid #000000 !important;
}

.form-hrow{
	display: flex;
	flex-wrap: wrap;
	--bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
}

.form-hrow > *{
	padding-right: calc(var(--bs-gutter-x)* .5);
	padding-left: calc(var(--bs-gutter-x)* .5);
	margin-top: var(--bs-gutter-y);
}

.form-label{
	padding-right: 20px;
	font-size: 16px;
	font-weight: bold;
	color:#000000;
}

.form-padding{
	padding:10px 20px;
	margin:0;
}

.form-bg-grey{
	background-color: #eeeeee;
}

.radio-table{
	height: 100%;
}

.radio-table label{
	margin-bottom:0 !important;
}

.input150{
	max-width:150px;
}

.input400{
	max-width:400px;
}

.input700{
	max-width:700px;
}

/*** RADIO ***/
.radio_container {
  display: block;
  position: relative;
	padding-left: 26px;
	margin-right:10px;
  cursor: pointer;
	font-size: 16px;
	line-height: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radio_container_table {
	display: inline !important;
	margin-right: 0px !important;
	margin-left:45%;
}

/* Hide the browser's default radio button */
.radio_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 19px;
  width: 19px;
  background-color: #ccc;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio_container:hover input ~ .checkmark {
  background-color: #aaa;
}

/* When the radio button is checked, add a blue background */
.radio_container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio_container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radio_container .checkmark:after {
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}



/*** Form validation ***/

.inputError {
	border-color: red;
}

/***** Drop files *****/
.dropfiles{
	border: 1px solid #ced4da;
	border-radius: 0.25em;
	padding:10px;
}

/***** Retour Campagnes *****/

.campagnes_table_left{
	width:20%;
}

.h50{
	height:50px;
	line-height:50px;
}

.campagnes_table_right{
	width:80%;
	display: flex;	
	align-items: center;
}

.int_row{
	display:flex;
	width:100%;
	flex-wrap: wrap;
}

.int_elem{
	flex:0 0 25%;
}

.campagnes_border_section{
	border: 1px solid #ced4da;
	border-radius: 0.25em;
	padding:10px;
}

.campagnes_row_bck{
	background-color: #ffffff;
	padding:10px;
}

.campagnes_row_bck.pair{
	background-color: #eeeeee;
}

/*** Commandes ***/

.instructions{
	font-size:10px;
	font-style: italic;
}

.submit-title-annotation{
	font-size:0.8em;
	font-style:italic;
	padding-left:10px;
}

.calendars, .timers{
	background-color: #ffffff !important;
	cursor: pointer;
}

.pair{
	background-color: #eeeeee;
}

.icon-anchor{
	text-decoration:none !important;
	color:#007BFF !important;
}


.commandes_table th {
	text-align: center;
	vertical-align: middle !important;
}

.commandes_table td {
	vertical-align: middle !important;
}

/** Tables with first 3 columns fixed **/

.scroll-table{
	overflow-y: hidden;
	overflow-x: scroll;
}

.commandes_table_fixed th {
	text-align: center;
	vertical-align: middle !important;
}

.commandes_table_fixed th div{
	white-space: nowrap;
}

.commandes_table_fixed td {
	vertical-align: middle !important;
}

.commandes_table_fixed {
	border-collapse: separate;
	border-spacing: 0;
}

.commandes_table_fixed td:first-child {
	position:sticky;
	left:0px;
	background-color:#f4f9ff;
	z-index: 2;
	min-width:70px;
}

.commandes_table_fixed td:nth-child(2) {
	position:sticky;
	left:70px;
	background-color:#f4f9ff;
	z-index: 2;
	min-width:150px;
}

.commandes_table_fixed td:nth-child(3) {
	position:sticky;
	left:220px;
	background-color:#f4f9ff;
	z-index: 2;
	min-width:250px;
}

.fl-scrolls {
	z-index:1000;
}

.table_results tr td:nth-child(2){
	font-weight: bold;
}

.sources_table td {	
	padding-right: 5px;
}

.pair_row {
	background-color: #eeeeee;
	--bs-table-bg: #eeeeee;
}

.closed_commande td {
	background-color: #7DFFCD !important;
}

/*** Buttons ***/

/** Buttons secondary greyed + colored on checked **/

.btn-status-sent:not(:disabled):not(.disabled):checked + .btn {
	background-color:#007bff;
}

.btn-status-sent:focus + .btn {
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.4);
}

.btn-status-pending:not(:disabled):not(.disabled):checked + .btn {
	background-color: rgba(255, 193, 7, 1);
	color: #000000;
}

.btn-status-pending:focus + .btn {
	box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.4);
}

.btn-status-accepted:not(:disabled):not(.disabled):checked + .btn {
	background-color: rgba(40, 167, 69, 1);
}

.btn-status-accepted:focus + .btn {
	box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.4);
}

.btn-status-refused:not(:disabled):not(.disabled):checked + .btn {
	background-color: rgba(220, 53, 69, 1);
}

.btn-status-refused:focus + .btn {
	box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.4);
}

.btn-secondary-emb:not(:disabled):not(.disabled):checked + .btn {
	background-color: var(--emb-color) !important;
}

.btn-secondary-emb:focus + .btn {
	box-shadow: 0 0 0 0.2rem rgb(146, 216, 237);
}

.btn-secondary-mybrief:not(:disabled):not(.disabled):checked + .btn{
	background-color:var(--mybrief-color) !important;
}

.btn-secondary-mybrief:focus + .btn {
	box-shadow: 0 0 0 0.2rem lightgreen;
}

.btn-secondary-client:not(:disabled):not(.disabled):checked + .btn {
	background-color: #198754 !important;
}

.btn-secondary-client:focus + .btn {
	box-shadow: 0 0 0 0.2rem #198754;
}

.btn-secondary-prospect:not(:disabled):not(.disabled):checked + .btn {
	background-color: #ffc107 !important;
	color: #000000;
}

.btn-secondary-prospect:focus + .btn {
	box-shadow: 0 0 0 0.2rem #ffc107;
	color: #000000;
}

.btn-secondary-dark:not(:disabled):not(.disabled):checked + .btn{
	background-color: var(--bs-dark) !important;
}

.btn-secondary-dark:focus + .btn {
	box-shadow: 0 0 0 0.2rem rgba(var(--bs-dark-rgb), 0.7);
}

.btn-secondary-warning:not(:disabled):not(.disabled):checked + .btn{
	background-color: var(--bs-warning) !important;
	color:#000000;
}

.btn-secondary-warning:focus + .btn {
	box-shadow: 0 0 0 0.2rem rgba(var(--bs-warning-rgb), 0.5);
	color: #000000;
}

.btn-secondary-be:not(:disabled):not(.disabled):checked + .btn{
	background-color: rgb(210, 173, 114) !important;
	color:#000000;
}

.btn-secondary-be:focus + .btn {
	box-shadow: 0 0 0 0.2rem rgba(210, 173, 114, 0.5);
	color: #000000;
}

.btn-secondary-md-amber-300:not(:disabled):not(.disabled):checked + .btn{
	background-color: #FFD54F !important;
	color:#000000;
}

.btn-secondary-md-amber-300:focus + .btn {
	box-shadow: 0 0 0 0.2rem #FFD54F; /* amber-500 */
	color: #000000;
}

.btn-secondary-md-orange-300:not(:disabled):not(.disabled):checked + .btn{
	background-color: #FFB74D !important;
	color:#000000;
}

.btn-secondary-md-orange-300:focus + .btn {
	box-shadow: 0 0 0 0.2rem #FF9800;
	color: #000000;
}

.btn-secondary-md-deep-orange-300:not(:disabled):not(.disabled):checked + .btn{
	background-color: #FF8A65 !important;
	color:#000000;
}

.btn-secondary-md-deep-orange-300:focus + .btn {
	box-shadow: 0 0 0 0.2rem #FF5722;
	color: #000000;
}

.btn-secondary-md-light-blue-300:not(:disabled):not(.disabled):checked + .btn{
	background-color: #4FC3F7 !important;
	color:#000000;
}

.btn-secondary-md-light-blue-300:focus + .btn {
	box-shadow: 0 0 0 0.2rem #03A9F4; /* light-blue-500 */
	color: #000000;
}

/*******************************/

.btn-all-commandes, 
.btn-all-commandes:active,
.btn-all-commandes:focus,
.btn-all-commandes:hover {
	color:#ffffff;
	background-color: #0096B4 !important;
	--bs-btn-bg: #0096B4;
	border-color: #0096B4;
}

.btn-all-commandes:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #0096B4;
}

.btn-all-commandes.focus {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #0096B4;
}

.btn-closed,
.btn-closed:active,
.btn-closed:focus,
.btn-closed:hover {
	color: #000000;
	background-color: #7DFFCD !important;
	--bs-btn-bg: #7DFFCD;
	border-color: #7DFFCD;
}

.btn-closed:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #7DFFCD;
}

.btn-closed.focus {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #7DFFCD;
}

.btn-no-sv,
.btn-no-sv:active,
.btn-no-sv:focus,
.btn-no-sv:hover {
	color: #000000;
	background-color: #c8ca2a !important;
	--bs-btn-bg: #c8ca2a;
	border-color: #c8ca2a;
}

.btn-no-sv.focus {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #c8ca2a;
}

.btn-no-sv:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #c8ca2a;
}

.btn-no-stats,
.btn-no-stats:active,
.btn-no-stats:focus,
.btn-no-stats:hover {
	color: #000000;
	background-color: #a6b1e1 !important;
	--bs-btn-bg: #a6b1e1;
	border-color: #a6b1e1;
}

.btn-no-stats.focus {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #a6b1e1;
}

.btn-no-stats:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #a6b1e1;
}

.btn-no-invoice,
.btn-no-invoice:active,
.btn-no-invoice:focus,
.btn-no-invoice:hover {
	color: #ffffff;
	background-color: #F07210 !important;
	--bs-btn-bg: #F07210;
	border-color: #F07210;
}

.btn-no-invoice.focus {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #F07210;
}

.btn-no-invoice:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #F07210;
}

.btn-no-invoice-d,
.btn-no-invoice-d:active,
.btn-no-invoice-d:focus,
.btn-no-invoice-d:hover {
	color: #ffffff;
	background-color: #e34351 !important;
	--bs-btn-bg: #e34351;
	border-color: #e34351;
}

.btn-no-invoice-d.focus {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #e34351;
}

.btn-no-invoice-d:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #e34351;
}

.btn-pending-commandes.focus {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #198754;
}

.btn-pending-commandes:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #198754;
}

.btn-primary-custom.focus {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #007bff;
}

.btn-primary-custom:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #007bff;
}

.btn-warning-custom.focus {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #ffc107;
}

.btn-warning-custom:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #ffc107;
}

.btn-success-custom.focus {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #198754;
}

.btn-success-custom:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #198754;
}

.btn-danger-custom.focus {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #dc3545;
}

.btn-danger-custom:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #dc3545;
}

.btn-red-custom:not(:disabled):not(.disabled):checked + .btn {
	background-color:#bd2130 !important;
	border-color: #000000 !important;
}

.btn-red-custom:focus + .btn {
	box-shadow:0 0 0 0.2rem #b21f2d !important;
}

.ui-tooltip { 
	white-space: pre-line; 
}

.btn-s {
	font-size: 14px !important;
}

.btn-excel,
.btn-excel:active,
.btn-excel:focus,
.btn-excel:hover {
	background-color: #B1BC00 !important;
	--bs-btn-bg: #B1BC00;
	color: #000000;
}

.btn-excel:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #B1BC00;
}

.btn-excel.active {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #B1BC00;
}

.btn-vis-cumul,
.btn-vis-cumul:active,
.btn-vis-cumul:focus,
.btn-vis-cumul:hover {
	color: #000000;
	background-color: #a6b1e1 !important;
	--bs-btn-bg: #a6b1e1;
	border-color: #a6b1e1;
}

.btn-vis-cumul:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #a6b1e1;
}

.btn-vis-cumul.active {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #a6b1e1;
}

.btn-vis-men, 
.btn-vis-men:active, 
.btn-vis-men:focus, 
.btn-vis-men:hover {
	background-color: #7eb9de !important;
	--bs-btn-bg: #7eb9de;
	color: #000000;
}

.btn-vis-men:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #7eb9de;
}

.btn-vis-men.active {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #7eb9de;
}

.btn-secondary:not(:disabled):not(.disabled):checked + .btn {
	background-color:green;
}

.btn-secondary:focus + .btn {
	box-shadow: 0 0 0 0.2rem lightgreen;
}

.btn-light-blue {
	background-color: #A4FBE7;
	color: #000000;
}

.btn-light-blue:hover {
	background-color: #76c2b0;
	color: #000000;
	box-shadow: 0 0 0 0.2rem #A4FBE7;
}

/* Crm buttons */
.btn-crm-disabled,
.btn-crm-disabled:active,
.btn-crm-disabled:focus,
.btn-crm-disabled:hover {
	color: #000000;
	background-color: #c5ccdf !important;
	--bs-btn-bg: #c5ccdf;
	border-color: #c5ccdf;
}

.btn-crm-disabled.focus {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #c5ccdf;
}

.btn-crm-disabled:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #c5ccdf;
}

/*** End buttons ***/

.grey-text{
	color:grey !important;
}

.icon-blue{
	color:#007BFF;
}
.icon-ok      { color: #198754; display: inline-grid; }
.icon-warn    { color: #dc3545; display: inline-grid; }
.icon-pending { color: #ECC44C; display: inline-grid; }
.icon-disabled{ color: #6c757d; display: inline-grid; }
.icon-orange  { color: #FF8C00; display: inline-grid; }

.fs-05e{
	font-size: 0.5em !important;
}

.fs-06e{
	font-size: 0.6em !important;
}

.fs-07e{
	font-size: 0.7em !important;
}

.fs-08e{
	font-size: 0.8em !important;
}

.fs-09e{
	font-size: 0.9em !important;
}

.fs-10e{
	font-size: 1.0em !important;
}

.fs-11e{
	font-size: 1.1em !important;
}

.fs-12e{
	font-size: 1.2em !important;
}

.fs-13e{
	font-size: 1.3em !important;
}

.fs-14e{
	font-size: 1.4em !important;
}

.fs-15e{
	font-size: 1.5em !important;
}

.min-250{
	min-width:250px;
}

.floating-title-centered {
	position:absolute;
	top:-23px;
	left:50%;
	transform: translate(-50%);
	display:flex;
	justify-content: center;
	line-height:35px;
	width:130px;
	padding:1px;
	background-color:#ffffff;
	color:var(--main-color);
	font-size:25px;
	font-weight:bold;
}

.icon-input {
	position:absolute;
	right:12px;
	top:10px;
}

.search-total {
	position:absolute;
	bottom:0px;
	right:20px;
	font-style:italic;
	font-weight: 500;
}

.no-vertical-padding {
	padding-top:0px; 
	padding-bottom:0px;
}

.br-light-grey {
	border-right:1px solid #dee2e6;
}

.margin-v-form {
	margin-top: 10px;
	margin-bottom: 10px;
}

.force-border {
	border-radius:0.25rem !important;
}



.fixed-table{
	table-layout:fixed;
	width:100%;
}

.fixed-table td.col_emails, .fixed-table td.col_mobiles_tmkg, 
.fixed-table td.col_mobiles_sms, .fixed-table td.col_fixes, 
.fixed-table td.col_postal {
	width: 20%;
}

.tot-divs {
	border: 1px solid #ced4da;
	border-radius: 3px;
	width: 100%;
	text-align: right;
	padding:5px 10px;
}

.tot-divs:after{
	content: "\2800\20AC";
}

.tot-divs-no-border{
	width: 100%;
	text-align: right;
	padding:5px 10px;
}

.invoice-single-input{
	width:20%;
	float:left;
	height:100%;
	display:flex; 
	align-items: center;
}

.invoice-single-input-euro{
	float:left;
	height:100%;
	display:flex;
	align-items:center;
	font-weight:bold;
	font-size:16px;
}

.invoice-alert {
	float:left;
	height: 100%;
	display: flex;
	align-items: center;
	font-weight: bold;
	font-size: 16px;
	padding: 0px 20px;
	margin-left: 20px;
}

.border-alert {
	border: 2px solid red;
}

.invoice-remise-label {
	width:40%;
	height:100%;
	float:left;
	display:flex;
	align-items:center;
}

.valign-abs-middle{
	position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.valign-middle{
	vertical-align: middle;
}

.p-amounts{
	display: inline-block;
	font-size: 12px;
	color: #000000;
	padding:5px;
	margin:0;
	line-height:12px;
}

.alert-amounts-waiting {
	color:red !important;
}

.alert-amounts-paid{
	color:green !important;
}

.red-bck {
	background-color: #ff6969 !important;
}

.green-bck {
	background-color:#5ec69e !important;
}

.tot-bck {
	background-color: #9a7ac1 !important;
	--bs-table-bg: #9a7ac1;
}

.tot-comp {
	background-color: #36b5cf !important;
	--bs-table-bg: #36b5cf;
}

.tot-komp-alt {
	background-color: #d2cf72 !important;
	--bs-table-bg: #d2cf72;
}

.tot-country {
	background-color: #d2ad72 !important;
	--bs-table-bg: #d2ad72;
}

.bck-light-blue {
	background-color: rgb(173, 216, 230, 0.3) !important;
	--bs-table-bg: rgb(173, 216, 230, 0.3);
}

.bck-green {
	background-color: rgb(0, 128, 0, 0.5) !important;
	--bs-table-bg: rgb(0, 128, 0, 0.5);
}

.strikethrough {
	text-decoration: line-through;
}

.strikethrough td {
	text-decoration: line-through;
}

.header-nowrap th {
	white-space: nowrap;
}

.commande-name-emb{
	font-weight:bold;
	color:var(--emb-color) !important;
}

.commande-name-mybrief{
	font-weight:bold;
	color:var(--mybrief-color) !important;
}

.bg-light-blue{
	background-color: #54cde0 !important;
	--bs-table-bg: #54cde0;
}

.compta-month-button{
	color: darkblue;
	font-weight:bold;
}

.compta_table td {
	text-align: right;
	white-space: nowrap;
}

/*** DEVIS ***/


.label-vcenter-txtr {
	display: flex;
  align-items: center;
  justify-content: end;
}

.label-vend-txtr {
	display: flex;
  align-items: end;
  justify-content: end;
}

/* BE */
.bck-BE-full-opacity {
	background-color: rgb(210, 173, 114, 1);
	--bs-table-bg: rgb(210, 173, 114, 1);
}

.bck-BE {
	background-color: rgb(210, 173, 114, 0.7);
	--bs-table-bg: rgb(210, 173, 114, 0.7);
}

/* .bck-BE:hover {
	background-color: rgb(210, 173, 114, 1);
	cursor:pointer;
} */

.bck-BE.l3 {
	background-color: rgb(210, 173, 114, 0.3);
	--bs-table-bg: rgb(210, 173, 114, 0.3);
}

.bck-BE.l3:hover {
	background-color: rgb(210, 173, 114, 0.5);
	cursor:pointer;
}

.bck-BE.l4 {
	background-color: rgb(210, 173, 114, 0.1);
	--bs-table-bg: rgb(210, 173, 114, 0.1);
}

.bck-BE.l4:hover {
	background-color: rgb(210, 173, 114, 0.3);
	--bs-table-bg: rgb(210, 173, 114, 0.3);
}

.text-BE {
	color: rgb(210, 173, 114, 1);
}

/* FR */
.bck-FR-full-opacity {
	background-color: rgb(var(--emb-color-rgb), 1);
	--bs-table-bg: rgb(var(--emb-color-rgb), 1);
}

.bck-FR {
	background-color: rgb(var(--emb-color-rgb), 0.7);
	--bs-table-bg: rgb(var(--emb-color-rgb), 0.7);
}

/* .bck-FR:hover {
	background-color: rgb(var(--emb-color-rgb), 1);
	cursor:pointer;
} */

.bck-FR.l3 {
	background-color: rgb(var(--emb-color-rgb), 0.3);
	--bs-table-bg: rgb(var(--emb-color-rgb), 0.3);
}

.bck-FR.l3:hover {
	background-color: rgb(var(--emb-color-rgb), 0.5);
	cursor:pointer;
}

.bck-FR.l4 {
	background-color: rgb(var(--emb-color-rgb), 0.1);
	--bs-table-bg: rgb(var(--emb-color-rgb), 0.1);
}

.bck-FR.l4:hover {
	background-color: rgb(var(--emb-color-rgb), 0.3);
	--bs-table-bg: rgb(var(--emb-color-rgb), 0.3);
}

.text-FR {
	color: rgb(var(--emb-color-rgb), 1);
}

/* MC */
.bck-MC-full-opacity {
	background-color: rgb(var(--mybrief-color-rgb), 1);
	--bs-table-bg: rgb(var(--mybrief-color-rgb), 1);
}

.bck-MC {
	background-color: rgb(var(--mybrief-color-rgb), 0.7);
	--bs-table-bg: rgb(var(--mybrief-color-rgb), 0.7);
}

/* .bck-MC:hover {
	background-color: rgb(var(--mybrief-color-rgb), 1);
	cursor:pointer;
} */

.bck-MC.l3 {
	background-color: rgb(var(--mybrief-color-rgb), 0.3);
	--bs-table-bg: rgb(var(--mybrief-color-rgb), 0.3);
}

.bck-MC.l3:hover {
	background-color: rgb(var(--mybrief-color-rgb), 0.5);
	cursor:pointer;
}

.bck-MC.l4 {
	background-color: rgb(var(--mybrief-color-rgb), 0.1);
	--bs-table-bg: rgb(var(--mybrief-color-rgb), 0.1);
}

.bck-MC.l4:hover {
	background-color: rgb(var(--mybrief-color-rgb), 0.3);
	--bs-table-bg: rgb(var(--mybrief-color-rgb), 0.3);
}

.text-MC {
	color: rgb(var(--mybrief-color-rgb), 1);
}

.bck-b-hidden {
	background-color: #fae7ff;
	--bs-table-bg: #fae7ff;
}

.th-b-hidden {
	background-color: #fae7ff !important;
	--bs-table-bg: #fae7ff !important;
	color:#000000 !important;
	font-weight:bold;
	font-style:italic;
}

.bck-r-hidden {
	background-color: #bee2fc;
	--bs-table-bg: #bee2fc;
}

.th-r-hidden {
	background-color: #bee2fc !important;
	--bs-table-bg: #bee2fc !important;
	color:#000000 !important;
	font-weight:bold;
	font-style:italic;
}

.tot-bck-rgb{
	background-color: rgb(154, 122, 193, 0.3) !important;
}

.text-tot {
	color: rgb(154, 122, 193, 1);
}

.bck-white {
	background-color: #ffffff !important;
}

.draggable_icon{
	position:absolute;
	top:0;
	left:0;
	cursor:hand;
}

.devis_table_bck_EMB {
	background-color: rgb(var(--emb-color-rgb), 0.2);
}

.devis_table_bck_MB {
	background-color: rgb(var(--mybrief-color-rgb), 0.2);
}

.table_fix th {
	text-align: center;
	vertical-align: middle !important;
}

.table_fix th div{
	white-space: nowrap;
}

.table_fix td {
	vertical-align: middle !important;
}

.table_fix {
	border-collapse: separate;
	border-spacing: 0;
}

.badge-custom-1 {
	background-color: rgb(222, 81, 81, 0.3);
	color: #000000;
}

.badge-custom-commande {
	background-color: rgb(234, 125, 1);
	color: #ffffff;
	font-size: 0.7em;
	margin-top:5px;
}

.devis-sticky-tbl th {
	text-align: center;
	vertical-align: middle !important;
}

.devis-sticky-tbl th div{
	white-space: nowrap;
}

.devis-sticky-tbl td {
	vertical-align: middle !important;
}

.devis-sticky-tbl {
	border-collapse: separate;
	border-spacing: 0;
}

/* .devis-sticky-tbl td:first-child {
	position:sticky;
	left:0px;
	background-color:#f4f9ff;
	z-index: 2;
	min-width:180px;
}

.devis-sticky-tbl td:nth-child(2) {
	position:sticky;
	left:180px;
	background-color:#f4f9ff;
	z-index: 2;
	min-width:150px;
}

.devis-sticky-tbl td:nth-child(3) {
	position:sticky;
	left:330px;
	background-color:#f4f9ff;
	z-index: 2;
	min-width:250px;
} */

.bg-d-total {
	background-color: rgba(247, 241, 120, 0.3);
	color: #000000;
}

/*** Toggles ***/

.toggle-volume-offert { 
	white-space: nowrap;
}

.toggle-rounded {
  border-radius: 1rem;
}

/***************/

.top-submit-buttons {
	position:relative;
	bottom:-20px;
	padding-right:0px;
}

/* Custom transform classes */
.ts-12{
	transform: scale(1.2);
}

.ts-15{
	transform: scale(1.5);
}

.ts-20{
	transform: scale(2);
}

.ts-25{
	transform: scale(2.5);
}

.ts-30{
	transform: scale(3);
}

.table-success-darker {
	--bs-table-bg: #28A745;
}

.danger-warning {
	border-color: var(--bs-form-invalid-border-color);
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.danger-warning:focus {
	border-color: var(--bs-form-invalid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

/*** Custom table colors ***/
.table-blue {
  --bs-table-color: #fff;
  --bs-table-bg: #1e5eac;
  --bs-table-border-color: #0250b0;
  --bs-table-striped-bg: #1e5eac;
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: #608bc0;
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: #608bc0;
  --bs-table-hover-color: #fff;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-indigo {
  --bs-table-color: #fff;
  --bs-table-bg: #6610f2;
  --bs-table-border-color: #560ccd;
  --bs-table-striped-bg: #752de9;
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: #8950e3;
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: #8950e3;
  --bs-table-hover-color: #fff;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.custom-card-border {
	border-color: var(--main-color);
	border-radius: 5px;
}

.custom-card-border-thick {
	border-color: var(--main-color);
	border-width: 4px;
}

.card.card-section { border-left: 4px solid transparent !important; }
.card.card-section-origine     { border-left-color: var(--bs-secondary) !important; }
.card.card-section-type        { border-left-color: var(--bs-primary) !important; }
.card.card-section-client      { border-left-color: var(--bs-success) !important; }
.card.card-section-details     { border-left-color: var(--bs-info) !important; }
.card.card-section-contacts    { border-left-color: var(--bs-secondary) !important; }
.card.card-section-facturation { border-left-color: var(--bs-warning) !important; }

.border-emb {
	border-color: var(--emb-color);
}

.border-mybrief {
	border-color: var(--mybrief-color);
}

.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1000;
	left: 0px;
	opacity: 0.5;
	filter: alpha(opacity=50);
}

/*** CRM ***/

.bg-indigo {
	opacity: 1;
	background-color: var(--bs-indigo) !important
}

.border-indigo {
	opacity: 1;
	border-color: var(--bs-indigo) !important;
}

.bg-contact-commercial {
	opacity: 1;
	background-color: var(--bs-purple) !important
}

.border-contact-commercial {
	opacity: 1;
	border-color: var(--bs-purple) !important;
}

.btn-contact-commercial {
	color: #ffffff;
	background-color: var(--bs-purple) !important;
	--bs-btn-bg: var(--bs-purple);
	border-color: var(--bs-purple);
}

.text-contact-commercial {
	color: var(--bs-purple) !important;
}

.text-orange {
	color: var(--bs-orange) !important;
}

.form-check-input-comm:checked {
	background-color: var(--bs-purple) !important;
	border-color: var(--bs-purple) !important;
}

.bg-contact-tech {
	opacity: 1;
	background-color: #5ab7e8 !important
}

.border-contact-tech {
	opacity: 1;
	border-color: #5ab7e8 !important;
}

.btn-contact-tech {
	color: #ffffff;
	background-color: #5ab7e8 !important;
	--bs-btn-bg: #5ab7e8;
	border-color: #5ab7e8;
}

.text-contact-tech {
	color: #5ab7e8 !important;
}

.form-check-input-tech:checked {
	background-color: #5ab7e8 !important;
	border-color: #5ab7e8 !important;
}

.bg-contact-finance {
	opacity: 1;
	background-color: #42a780 !important
}

.border-contact-finance {
	opacity: 1;
	border-color: #42a780 !important;
}

.btn-contact-finance {
	color: #ffffff;
	background-color: #42a780 !important;
	--bs-btn-bg: #42a780;
	border-color: #42a780;
}

.text-contact-finance {
	color: #42a780 !important;
}

.form-check-input-finance:checked {
	background-color: #42a780 !important;
	border-color: #42a780 !important;
}

/* Newsletter color */
.bg-contact-ns {
	opacity: 1;
	background-color: var(--bs-pink) !important
}

.border-contact-ns {
	opacity: 1;
	border-color: var(--bs-pink) !important;
}

.btn-contact-ns {
	color: #ffffff;
	background-color: var(--bs-pink) !important;
	--bs-btn-bg: var(--bs-pink);
	border-color: var(--bs-pink);
}

.text-contact-ns {
	color: var(--bs-pink) !important;
}

.form-check-input-ns:checked {
	background-color: var(--bs-pink) !important;
	border-color: var(--bs-pink) !important;
}

.bg-contacts {
	opacity: 1;
	background-color: #ce834f !important
}

.border-contacts {
	opacity: 1;
	border-color: #ce834f !important;
}

.shadow-badge {
	box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.50) !important;
}

.crm-disabled-row td {
	background-color: #f8d7da !important;
}

.bg-md-amber-300 {
	background-color: #FFD54F !important;
	color:#000000;
}

.bg-md-orange-300 {
	background-color: #FFB74D !important;
	color:#000000;
}

.bg-md-deep-orange-300 {
	background-color: #FF8A65 !important;
	color:#000000;
}

/* Firm typologie badge [GitLab #116] — a hue apart from the amber/orange typeClient badges */
.bg-md-light-blue-300 {
	background-color: #4FC3F7 !important;
	color:#000000;
}

/* Remove limit max-width for bootstrap tooltip */
.tooltip-inner {
	max-width: none !important;
}

/* Scoped exception: SMS/RCS text tooltip (GSM char table) needs its long
   warning line to wrap instead of stretching unbounded like other tooltips. */
.sms-tooltip .tooltip-inner {
	max-width: 340px !important;
}

input[readonly], input[readonly]:focus {
	background-color: #f7f9fc;
}

/* Submenu classes */
.dropdown-menu li {
	position: relative;
}
.dropdown-menu .dropdown-submenu {
	display: none;
	position: absolute;
	left: 100%;
	top: -7px;
}
.dropdown-menu .dropdown-submenu-left {
	right: 100%;
	left: auto;
}
.dropdown-menu > li:hover > .dropdown-submenu {
	display: block;
}

/* Table tr backgrounds */
.table-bg-danger-subtle {
	background-color: var(--bs-danger-bg-subtle) !important;
}

.table-bg-danger-subtle td {
	background-color: var(--bs-danger-bg-subtle) !important;
}

.bg-emb {
	background-color: var(--emb-color) !important;
}

.bg-mybrief {
	background-color: var(--mybrief-color) !important;
}

.bg-be {
	background-color: rgb(210, 173, 114) !important;
	color: #000000 !important;
}

/*** Popover custom classes ***/
.popover-dark {
  --bs-popover-bg: #000000;
  --bs-popover-body-color: #fff;
  --bs-popover-border-color: #2c2f33;
	--bs-popover-header-bg: #50545a;
  --bs-popover-header-color: #fff;
}

.popover-indigo {
	--bs-popover-bg: #6610f2;
	--bs-popover-body-color: #fff;
	--bs-popover-border-color: #560ccd;
	--bs-popover-header-bg: #7c3aed;
	--bs-popover-header-color: #fff;
}

.popover-blue {
	--bs-popover-bg: #1e5eac;
	--bs-popover-body-color: #fff;
	--bs-popover-border-color: #0250b0;
	--bs-popover-header-bg: #3577c9;
	--bs-popover-header-color: #fff;
}

/******** MATERIAL SYMBOLS ********/

/* To add fill to google symbols */
.material-symbols-filled {
	font-variation-settings:
		'FILL' 1,
		'wght' 400,
		'GRAD' 0,
		'opsz' 48;
}

/* Toggle Fill via hover (empty to filled) */
.material-symbols-toggle {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 48;
	transition: font-variation-settings 0.3s ease;
}

.material-symbols-toggle:hover {
	font-variation-settings: 'FILL' 1, 'wght' 500, 'opsz' 48;
}

/* Different colors on hover */
.material-symbols-green-hover:hover {
	color: #42a780 !important;
}

/* Toggle Fill via reverse (filled to empty) */
.material-symbols-reverse-toggle {
	font-variation-settings: 'FILL' 1, 'wght' 400, 'opsz' 48;
	transition: font-variation-settings 0.3s ease;
}

.material-symbols-reverse-toggle:hover {
	font-variation-settings: 'FILL' 0, 'wght' 500, 'opsz' 48;
}

/************************************/

/*** DataTables fixes ***/
/* DT2 applies flex-direction:row-reverse on div.dt-column-header for numeric/date/right
   aligned columns, which puts the sort icon on the visual left.
   Target the actual flex container (div.dt-column-header) and force row direction.
   None of DT's flex-direction rules use !important so this wins. */
table.dataTable thead th div.dt-column-header,
table.dataTable thead td div.dt-column-header {
	flex-direction: row !important;
}
/*** End DataTables fixes ***/

/************************************/

/* ============================================================
   SIDEBAR LAYOUT
   ============================================================ */

:root {
	--sidebar-width: 230px;
	--sidebar-collapsed-width: 62px;
	--sidebar-bg: #1e2329;
	--sidebar-border: rgba(255,255,255,.08);
	--sidebar-text: rgba(255,255,255,.82);
	--sidebar-text-muted: rgba(255,255,255,.42);
	--sidebar-hover-bg: rgba(255,255,255,.07);
	--sidebar-active-bg: rgba(255,255,255,.13);
	--sidebar-transition: 0.22s ease;
	/* Top bar heights: the single place to change them (the JS measures the rendered bar) [GitLab #116] */
	--topbar-height: 54px;
	--mobile-topbar-height: 48px;
}

/* Disable sidebar/wrapper transitions during initial page load to prevent flash */
html.sidebar-preload .app-sidebar,
html.sidebar-preload .main-wrapper,
html.sidebar-preload .app-topbar {
    transition: none !important;
}

/* ── Sidebar ── */
.app-sidebar {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: var(--sidebar-width);
	background: var(--sidebar-bg);
	color: var(--sidebar-text);
	display: flex;
	flex-direction: column;
	transition: width var(--sidebar-transition);
	overflow: hidden;
	z-index: 1045;
	box-shadow: 2px 0 12px rgba(0,0,0,.35);
}

body.sidebar-collapsed .app-sidebar {
	width: var(--sidebar-collapsed-width);
}

/* ── Main content offset ── */
.main-wrapper {
	margin-left: var(--sidebar-width);
	transition: margin-left var(--sidebar-transition);
	min-height: 100vh;
	padding-top: var(--topbar-height);
}

body.sidebar-collapsed .main-wrapper {
	margin-left: var(--sidebar-collapsed-width);
}

/* ── Sidebar header ── */
.sidebar-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 0.6rem 0 0.85rem;
	height: var(--topbar-height);
	flex-shrink: 0;
	border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-brand {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	flex: 1;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	min-width: 0;
}

.sidebar-logo-img {
	height: 28px;
	width: auto;
	flex-shrink: 0;
	/* filter: brightness(0) invert(1); */
	opacity: 0.9;
}

.sidebar-brand-text {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: .02em;
	white-space: nowrap;
	opacity: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: opacity var(--sidebar-transition), width var(--sidebar-transition);
}

body.sidebar-collapsed .sidebar-brand-text {
	opacity: 0;
	width: 0;
}

#sidebar-toggle {
	background: none;
	border: none;
	color: var(--sidebar-text);
	width: 32px;
	height: 32px;
	border-radius: 6px;
	cursor: pointer;
	flex-shrink: 0;
	font-size: 1.15rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--sidebar-transition);
}

#sidebar-toggle:hover {
	background: var(--sidebar-hover-bg);
	color: #fff;
}

/* ── Navigation ── */
.sidebar-nav {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0.4rem 0;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,.15) transparent;
}

.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

/* ── Group button & direct link ── */
.sidebar-group-btn,
.sidebar-direct-link {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 0.55rem 0.9rem;
	background: none;
	border: none;
	border-left: 3px solid transparent;
	color: var(--sidebar-text);
	text-align: left;
	cursor: pointer;
	gap: 0.75rem;
	white-space: nowrap;
	overflow: hidden;
	font-size: 0.875rem;
	text-decoration: none;
	transition: background var(--sidebar-transition), border-color var(--sidebar-transition), color var(--sidebar-transition);
}

.sidebar-group-btn:hover,
.sidebar-direct-link:hover {
	background: var(--sidebar-hover-bg);
	color: #fff;
}

.sidebar-group.active > .sidebar-group-btn,
.sidebar-direct-link.active {
	background: var(--sidebar-active-bg);
	border-left-color: var(--main-color);
	color: #fff;
}

/* Icon */
.sidebar-group-btn > .bi:first-child,
.sidebar-direct-link > .bi:first-child,
.sidebar-icon-wrap { /* also handles the icon-wrap container */
	font-size: 1.05rem;
	flex-shrink: 0;
	width: 1.15rem;
	text-align: center;
}
.sidebar-direct-link > .bi:first-child {
	width: 1.15rem;
}

/* ── Icon wrapper for badge overlay ── */
.sidebar-icon-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.sidebar-icon-wrap .bi {
	font-size: 1.05rem;
}

/* ── Sidebar Bootstrap tooltip ── */
.sidebar-tooltip .tooltip-inner {
	background: #0d1117;
	color: #e6edf3;
	font-size: 0.8rem;
	font-weight: 500;
	padding: 0.35rem 0.7rem;
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0,0,0,.45);
	max-width: 220px;
	letter-spacing: .01em;
}
.sidebar-tooltip.bs-tooltip-end .tooltip-arrow::before,
.sidebar-tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
	border-right-color: #0d1117;
}

/* ── Notification badge overlaid on icon ── */
.sidebar-badge {
	position: absolute;
	top: -6px;
	right: -8px;
	background: #0d6efd;
	color: #fff;
	font-size: 0.6rem;
	font-weight: 700;
	line-height: 1;
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px var(--sidebar-bg);
	pointer-events: none;
}

/* Label */
.sidebar-item-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: opacity var(--sidebar-transition);
	flex: 1;
}

/* Chevron */
.sidebar-chevron {
	font-size: 0.7rem;
	flex-shrink: 0;
	transition: transform 0.2s ease, opacity var(--sidebar-transition);
}

.sidebar-group-btn[aria-expanded="true"] .sidebar-chevron {
	transform: rotate(180deg);
}

/* Collapsed state: hide labels, chevrons and sub-menus */
body.sidebar-collapsed .sidebar-item-label,
body.sidebar-collapsed .sidebar-chevron {
	opacity: 0;
	pointer-events: none;
}

body.sidebar-collapsed .sidebar-submenu {
	display: none !important;
}

/* Active accent in collapsed mode */
body.sidebar-collapsed .sidebar-group.active > .sidebar-group-btn {
	border-left-color: var(--main-color);
	background: var(--sidebar-active-bg);
}

/* ── Sub-menu ── */
.sidebar-submenu {
	padding: 0;
	background: rgba(0,0,0,.15);
}

.sidebar-subitem {
	display: flex;
	align-items: center;
	padding: 0.42rem 0.9rem 0.42rem 2.75rem;
	color: rgba(255,255,255,.68);
	text-decoration: none;
	font-size: 0.835rem;
	white-space: nowrap;
	overflow: hidden;
	transition: background var(--sidebar-transition), color var(--sidebar-transition);
}

.sidebar-subitem:hover,
.sidebar-subitem.active {
	background: var(--sidebar-hover-bg);
	color: #fff;
}

/* Sub-menu section labels */
.sidebar-submenu-header {
	display: block;
	font-size: 0.63rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--sidebar-text-muted);
	padding: 0.65rem 0.9rem 0.2rem 2.75rem;
	white-space: nowrap;
}

/* Subtle visual separator between submenu groups */
.sidebar-submenu-sep {
	border-top: 1px solid rgba(255,255,255,.1);
	margin: 0.3rem 0.9rem;
}

/* ── Sidebar footer ── */
.sidebar-footer {
	flex-shrink: 0;
	border-top: 1px solid var(--sidebar-border);
	padding: 0.35rem 0;
}

.sidebar-env-badge {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.4rem 0.9rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: #ffc107;
	white-space: nowrap;
	overflow: hidden;
}

.sidebar-env-badge .bi {
	font-size: 1rem;
	flex-shrink: 0;
	width: 1.15rem;
	text-align: center;
}

.sidebar-env-badge .sidebar-item-label {
	display: flex;
	flex-direction: column;
	line-height: 1.4;
}

.sidebar-env-branch {
	font-size: 0.68rem;
	font-weight: 400;
	opacity: 0.75;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 148px;
}

/* ── frame_title ── */
.frame_title {
	padding: 4px 16px 6px;
	font-size: 1.05rem;
	font-weight: 600;
	color: #1e293b;
	border-bottom: 1px solid #e9ecef;
	background: #fff;
}
.frame_title h2 {
	color: #1e293b;
	font-weight: 700;
	letter-spacing: -0.2px;
	position: relative;
	display: inline-block;
}
.frame_title h2::after {
	content: '';
	display: block;
	width: 3rem;
	height: 3px;
	background: var(--main-color);
	border-radius: 2px;
	margin: 3px auto 0;
}
/* Breadcrumb inside frame_title */
.page-breadcrumb {
	margin-bottom: 0;
}
.page-breadcrumb .breadcrumb {
	font-size: 0.72rem;
	margin-bottom: 0;
	padding: 3px 0 0;
	justify-content: center;
	--bs-breadcrumb-divider: '›';
}
.page-breadcrumb .breadcrumb-item {
	color: #94a3b8;
}
.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
	color: #cbd5e1;
}
.page-breadcrumb .breadcrumb-item a {
	color: var(--main-color);
	text-decoration: none;
}
.page-breadcrumb .breadcrumb-item a:hover {
	text-decoration: underline;
}
.page-breadcrumb .breadcrumb-item.active {
	color: #64748b;
	font-weight: 500;
}

/* ── Floating breadcrumb pill (bottom-left, appears on scroll) ── */
#breadcrumb-pill {
	position: fixed;
	bottom: 1.1rem;
	left: calc(var(--sidebar-width) + 1rem);
	transition: left var(--sidebar-transition), opacity 0.25s ease, transform 0.25s ease;
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	z-index: 1039;
}
#breadcrumb-pill.bc-pill-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
body.sidebar-collapsed #breadcrumb-pill {
	left: calc(var(--sidebar-collapsed-width) + 1rem);
}
#breadcrumb-pill .bc-pill-inner {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	background: rgba(30, 41, 59, 0.88);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #f1f5f9;
	font-size: 0.72rem;
	font-weight: 500;
	padding: 0.3rem 0.75rem;
	border-radius: 99px;
	box-shadow: 0 2px 8px rgba(0,0,0,.2);
	white-space: nowrap;
	max-width: calc(100vw - var(--sidebar-width) - 2rem);
	overflow: hidden;
	text-overflow: ellipsis;
}
#breadcrumb-pill .bc-pill-inner a {
	color: var(--main-color);
	text-decoration: none;
}
#breadcrumb-pill .bc-pill-inner a:hover {
	text-decoration: underline;
}
#breadcrumb-pill .bc-pill-sep {
	color: #94a3b8;
	font-size: 0.65rem;
}
@media (max-width: 768px) {
	#breadcrumb-pill { display: none; }
}
/* Reserve bottom space so the fixed breadcrumb pill (bottom-left) never overlaps
   the last line of content (e.g. the "champs obligatoires" note at a form's end). */
main {
	padding-bottom: 3.5rem;
}
@media (max-width: 768px) {
	/* Pill hidden on mobile → no reserve needed. */
	main { padding-bottom: 0; }
}

/* ── Sticky filter bar: offset for sidebar ── */
#filter-sticky-bar {
	left: var(--sidebar-width) !important;
	width: calc(100% - var(--sidebar-width)) !important;
	transition: left var(--sidebar-transition), width var(--sidebar-transition) !important;
}
body.sidebar-collapsed #filter-sticky-bar {
	left: var(--sidebar-collapsed-width) !important;
	width: calc(100% - var(--sidebar-collapsed-width)) !important;
}

/* ── Backdrop (mobile only) ── */
.sidebar-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	z-index: 1044;
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
	cursor: pointer;
}
body.sidebar-mobile-open .sidebar-backdrop {
	display: block;
}

/* ── Mobile top bar ── */
.mobile-topbar {
	display: none;
	align-items: center;
	height: var(--mobile-topbar-height);
	padding: 0 0.85rem;
	background: var(--sidebar-bg);
	color: #fff;
	gap: 0.75rem;
	position: sticky;
	top: 0;
	z-index: 1000;
	flex-shrink: 0;
}
.mobile-topbar-toggle {
	background: none;
	border: none;
	color: #fff;
	font-size: 1.35rem;
	cursor: pointer;
	padding: 0.25rem;
	display: flex;
	align-items: center;
	border-radius: 6px;
	transition: background 0.2s;
}
.mobile-topbar-toggle:hover { background: rgba(255,255,255,.1); }
.mobile-topbar-title {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: .03em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}
.mobile-topbar-logo {
	height: 22px;
	width: auto;
	filter: brightness(0) invert(1);
	opacity: .85;
}

/* ── Tablet (769 – 900px): push-collapsed ── */
@media (min-width: 769px) and (max-width: 900px) {
	.app-sidebar {
		width: var(--sidebar-collapsed-width);
	}
	body.sidebar-collapsed .app-sidebar {
		width: var(--sidebar-collapsed-width);
	}
	.main-wrapper {
		margin-left: var(--sidebar-collapsed-width);
	}
	body.sidebar-collapsed .main-wrapper {
		margin-left: var(--sidebar-collapsed-width);
	}
	.app-topbar,
	body.sidebar-collapsed .app-topbar {
		left: var(--sidebar-collapsed-width);
	}
	#filter-sticky-bar,
	body.sidebar-collapsed #filter-sticky-bar {
		left: var(--sidebar-collapsed-width) !important;
		width: calc(100% - var(--sidebar-collapsed-width)) !important;
	}
}

/* ── Mobile portrait: disable sticky columns ── */
@media (max-width: 768px) and (orientation: portrait) {
	.commandes_table_fixed td:first-child,
	.commandes_table_fixed td:nth-child(2),
	.commandes_table_fixed td:nth-child(3) {
		position: static !important;
		z-index: auto !important;
		left: auto !important;
	}
}

/* ── Mobile (≤ 768px): off-canvas overlay ── */
@media (max-width: 768px) {
	.mobile-topbar { display: flex; }

	/* Sidebar hides off-screen; always full-width when open (overlays content) */
	.app-sidebar {
		width: var(--sidebar-width) !important;
		transform: translateX(-100%);
		transition: transform var(--sidebar-transition);
	}
	body.sidebar-mobile-open .app-sidebar {
		transform: translateX(0);
	}

	/* Sidebar collapsed class has no effect on mobile */
	body.sidebar-collapsed .app-sidebar {
		width: var(--sidebar-width) !important;
		transform: translateX(-100%);
	}
	body.sidebar-collapsed.sidebar-mobile-open .app-sidebar {
		transform: translateX(0);
	}

	/* Full-width content, no left margin; topbar also full-width on mobile */
	.main-wrapper,
	body.sidebar-collapsed .main-wrapper {
		margin-left: 0 !important;
	}

	.app-topbar,
	body.sidebar-collapsed .app-topbar {
		left: 0 !important;
	}

	/* Sticky bar: full width on mobile */
	#filter-sticky-bar,
	body.sidebar-collapsed #filter-sticky-bar {
		left: 0 !important;
		width: 100% !important;
	}

	/* Show submenu labels (they're always visible when open on mobile) */
	body.sidebar-collapsed .sidebar-item-label,
	body.sidebar-collapsed .sidebar-chevron {
		opacity: 1;
		pointer-events: auto;
	}
	body.sidebar-collapsed .sidebar-submenu {
		display: block !important;
	}
}

/* ============================================================
   END SIDEBAR LAYOUT
   ============================================================ */

		 /* ── Calc montants ── */
		 .montants-calc {
		 	display: flex;
		 	align-items: stretch;
		 	gap: 0;
		 	padding: 12px 20px;
		 	border-bottom: 1px solid #f3f4f6;
		 }
	
		 .montants-calc .calc-block {
		 	flex: 1;
		 	display: flex;
		 	flex-direction: column;
		 	align-items: center;
		 	gap: 0.3rem;
		 	padding: 10px 14px;
		 	border: 1px solid #dee2e6;
		 	border-radius: 8px;
		 	background: #fff;
		 }
	
		 .montants-calc .calc-block.calc-result {
		 	background: #f0fdf4;
		 	border-color: #86efac;
		 }
	
		 .montants-calc .calc-separator {
		 	display: flex;
		 	align-items: center;
		 	padding: 0 6px;
		 	color: #adb5bd;
		 	font-size: 1.3rem;
		 	font-weight: 300;
		 	align-self: center;
		 }
	
		 .montants-calc .calc-label {
		 	font-size: 0.72rem;
		 	font-weight: 700;
		 	text-transform: uppercase;
		 	letter-spacing: 0.05em;
		 	color: #6c757d;
		 }
	
		 .montants-calc .calc-input-wrap {
		 	width: 100%;
		 }
	
		 .montants-calc .calc-input-wrap .input-group {
		 	width: 100%;
		 }
	
		 .montants-calc .calc-input-wrap input {
		 	min-width: 80px;
		 }
	
		 .montants-calc .calc-actions {
		 	display: flex;
		 	align-items: center;
		 	padding-left: 10px;
		 	align-self: center;
		 	flex-direction: column;
		 	gap: 6px;
		 }
	
		 .pdf-preview-card {
		 	transition: background 0.15s, box-shadow 0.15s;
		 	cursor: pointer;
		 }
	
		 .pdf-preview-card:hover {
		 	background: #e9ecef !important;
		 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		 }

		/* ── Invoice receipt summary card ── */
		.invoice-receipt-card {
			margin: 6px 20px 14px calc(210px + 20px);
			border: 1px solid #dee2e6;
			border-radius: 8px;
			overflow: hidden;
			max-width: 480px;
		}
		.invoice-receipt-card .receipt-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 7px 14px;
			border-bottom: 1px solid #f3f4f6;
			gap: 0.5rem;
		}
		.invoice-receipt-card .receipt-row:last-child {
			border-bottom: none;
		}
		.invoice-receipt-card .receipt-label {
			font-size: 0.84rem;
			font-weight: 600;
			color: #374151;
			display: flex;
			align-items: center;
			gap: 0.4rem;
			flex-shrink: 0;
		}
		.invoice-receipt-card .receipt-op-sign {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background: #f3f4f6;
			font-size: 0.8rem;
			font-weight: 700;
			color: #6b7280;
			flex-shrink: 0;
		}
		.invoice-receipt-card .receipt-value {
			display: flex;
			align-items: center;
			gap: 6px;
		}
		.invoice-receipt-card .receipt-currency {
			font-size: 0.84rem;
			color: #6b7280;
			font-weight: 500;
			flex-shrink: 0;
		}
		.invoice-receipt-card .receipt-input-readonly {
			max-width: 120px;
			border: none;
			background: transparent;
			font-size: 0.9rem;
			font-weight: 500;
			color: #374151;
			box-shadow: none;
		}
		.invoice-receipt-card .receipt-input-readonly:focus {
			box-shadow: none;
			outline: none;
		}
		.invoice-receipt-card .receipt-input-editable {
			max-width: 120px;
			font-size: 0.9rem;
		}
		.invoice-receipt-card .receipt-label-input {
			max-width: 170px;
			font-size: 0.82rem;
			height: 28px;
			padding: 2px 6px;
		}
		.invoice-receipt-card .receipt-separator {
			height: 0;
			border-top: 1px dashed #dee2e6;
			margin: 0 14px;
		}
		.invoice-receipt-card .receipt-separator.solid {
			border-top: 2px solid #dee2e6;
			border-top-style: solid;
		}
		.invoice-receipt-card .receipt-row-result {
			background: #f0fdf4;
			border-top: 2px solid #198754;
			border-bottom: none;
		}
		.invoice-receipt-card .receipt-label-result {
			font-size: 0.9rem;
			font-weight: 700;
			color: #15803d;
		}
		.invoice-receipt-card .receipt-input-result {
			max-width: 130px;
			border: none;
			background: transparent;
			font-size: 1rem;
			font-weight: 700;
			color: #15803d;
			box-shadow: none;
		}
		.invoice-receipt-card .receipt-input-result:focus {
			box-shadow: none;
		}
		.invoice-receipt-card .receipt-alert-row {
			padding: 4px 14px 6px;
			background: #fef2f2;
		}
		.invoice-receipt-ttc {
			border-color: #198754;
			margin-top: 10px;
		}
		.invoice-receipt-ttc .receipt-row-result {
			border-top: none;
		}
		/* border-alert override for receipt card */
		.invoice-receipt-card.border-alert {
			border-color: #dc3545;
		}

/* ============================================================
   FORM MODERNIZATION UTILITIES
   (sticky bar, section headers, 2-col grid, chips)
   ============================================================ */

/* ── Sticky action bar ── */
.sticky-action-bar {
	position: sticky;
	top: 0;
	z-index: 1020;
	background: rgba(255,255,255,0.97);
	backdrop-filter: blur(4px);
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ── Section divider header ── */
.form-section-header {
	background: #f8f9fa;
	border-top: 1px solid #dee2e6;
	border-bottom: 1px solid #dee2e6;
	padding: 0.35rem 1rem;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6c757d;
}

/* ── 2-column grid form rows ── */
.frow-2col {
	display: grid;
	grid-template-columns: 210px 1fr;
	align-items: center;
	padding: 7px 20px;
	border-bottom: 1px solid #f3f4f6;
	min-height: 42px;
}
.frow-2col.align-top {
	align-items: start;
	padding-top: 10px;
	padding-bottom: 10px;
}
.form-label-2col {
	text-align: right !important;
	padding-right: 1.1rem !important;
	padding-left: 0 !important;
	font-size: 0.84rem !important;
	font-weight: 600 !important;
	color: #374151 !important;
	line-height: 1.35;
	margin-bottom: 0;
	word-break: break-word;
	border-right: 1px solid #dee2e6;
}
.fcol-right {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.fcol-right.align-top {
	align-items: flex-start;
}

/* ── Radio chip (btn-check + label) ── */
.ratt-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.85rem;
	border-radius: 999px;
	border: 2px solid #dee2e6;
	background: #fff;
	color: #374151;
	font-weight: 500;
	font-size: 0.88rem;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
	cursor: pointer;
}
.ratt-chip .chip-cc {
	display: inline-block;
	width: 20px;
	height: 15px;
	border-radius: 2px;
	overflow: hidden;
	flex-shrink: 0;
	vertical-align: middle;
}
.btn-check:checked + .ratt-chip {
	background: #198754;
	border-color: #198754;
	color: #fff;
}
.ratt-chip:hover {
	border-color: #adb5bd;
	background: #f8f9fa;
}
.btn-check:checked + .ratt-chip:hover {
	background: #157347;
	border-color: #157347;
	color: #fff;
}

/* ============================================================
   MODERN OVERRIDES — Step 1.3 (2026-04)
   CSS spinner to replace loader.gif / spinner.gif
   ============================================================ */

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* Base spinner — uses brand primary color via CSS var */
.spinner-modern {
	display: inline-block;
	border-radius: 50%;
	border: 2px solid var(--neutral-200, #e5e2dc);
	border-top-color: var(--main-color, #00b4c1);
	animation: spin 0.65s linear infinite;
	flex-shrink: 0;
}

/* Sizes */
.spinner-modern.spinner-sm { width: 1rem;    height: 1rem; }
.spinner-modern.spinner-md { width: 1.5rem;  height: 1.5rem; }
.spinner-modern.spinner-lg { width: 2rem;    height: 2rem; }
.spinner-modern.spinner-xl { width: 2.75rem; height: 2.75rem; border-width: 3px; }

/* Default size when no modifier is specified */
.spinner-modern:not(.spinner-sm):not(.spinner-md):not(.spinner-lg):not(.spinner-xl) {
	width: 1.5rem;
	height: 1.5rem;
}

/* Inline usage: vertically centered in text flow */
.spinner-modern.spinner-inline {
	vertical-align: middle;
	margin-right: 0.4rem;
}

/* Centered block (page/section loader) */
.spinner-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
}

/* ── Lucide icon sizing helpers ── */
[data-lucide] {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}
.lucide-sm  { width: 1rem;    height: 1rem; }
.lucide-md  { width: 1.25rem; height: 1.25rem; }
.lucide-lg  { width: 1.5rem;  height: 1.5rem; }
.lucide-xl  { width: 2rem;    height: 2rem; }

/* ============================================================
   END MODERN OVERRIDES — Step 1.3
   ============================================================ */

/* ============================================================
   MODERN OVERRIDES — Step 1.4 (2026-04)
   Typography, card, buttons, forms, badges, DataTables
   All rules are additive — legacy CSS above is untouched
   ============================================================ */

/* ── Typography base ────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  /* font-size kept at legacy 14px — not overridden here */
  /* line-height kept at Bootstrap default — not overridden here */
  color: var(--text-primary, #1e1c19);
  background-color: var(--surface-bg, #f8f7f6);
}

h1, .h1 { font-size: var(--text-h1); font-weight: var(--font-bold);     letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); }
h2, .h2 { font-size: var(--text-h2); font-weight: var(--font-semibold); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); }
h3, .h3 { font-size: var(--text-h3); font-weight: var(--font-semibold); }
h4, .h4 { font-size: var(--text-h4); font-weight: var(--font-medium);   }
h5, .h5 { font-size: var(--text-base); font-weight: var(--font-semibold); }
h6, .h6 { font-size: var(--text-sm);   font-weight: var(--font-semibold); }

small, .small { font-size: var(--text-sm); }
.text-xs       { font-size: var(--text-xs); }

/* ── Card ───────────────────────────────────────────────────── */
.card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--surface-border, #e5e2dc);
  background: var(--surface-card, #fff);
}
.card-header {
  border-bottom: 1px solid var(--surface-border, #e5e2dc);
  background: var(--surface-card, #fff);
  border-top-left-radius:  var(--radius-lg) !important;
  border-top-right-radius: var(--radius-lg) !important;
  padding: 0.875rem 1.25rem;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.card-body {
  padding: 1.25rem;
}
.card-footer {
  border-top: 1px solid var(--surface-border, #e5e2dc);
  background: var(--surface-card, #fff);
  border-bottom-left-radius:  var(--radius-lg) !important;
  border-bottom-right-radius: var(--radius-lg) !important;
  padding: 0.75rem 1.25rem;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: background-color 150ms cubic-bezier(.4,0,.2,1),
              border-color     150ms cubic-bezier(.4,0,.2,1),
              box-shadow       150ms cubic-bezier(.4,0,.2,1),
              transform        100ms cubic-bezier(.4,0,.2,1);
}
.btn:active { transform: translateY(1px); }

.btn:focus-visible          { box-shadow: var(--ring-primary); outline: none; }
.btn-primary                { background-color: var(--main-color); border-color: var(--main-color); }
.btn-primary:hover          { background-color: var(--primary-600); border-color: var(--primary-600); }
.btn-primary:focus-visible  { box-shadow: var(--ring-primary); }
.btn-outline-primary        { color: var(--main-color); border-color: var(--main-color); }
.btn-outline-primary:hover  { background-color: var(--main-color); border-color: var(--main-color); }
.btn-danger:focus-visible,
.btn-outline-danger:focus-visible { box-shadow: var(--ring-danger); }

/* ── Form controls ──────────────────────────────────────────── */
.form-control,
.form-select {
  border-color: var(--neutral-300, #d0cdc6);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background-color: var(--surface-input, #fff);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--main-color);
  box-shadow: var(--ring-primary);
  outline: none;
}
.form-control::placeholder { color: var(--text-muted); }
.form-control.is-invalid:focus,
.form-select.is-invalid:focus { box-shadow: var(--ring-danger); }

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
}
.form-text    { font-size: var(--text-xs); color: var(--text-muted); }
.invalid-feedback { font-size: var(--text-xs); }

/* ── Badge ──────────────────────────────────────────────────── */
.badge {
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  padding: 0.3em 0.7em;
}
/* Semantic badge variants — override Bootstrap bg colors */
.badge.bg-success, .badge.text-bg-success { background-color: var(--success-bg)  !important; color: var(--success-text)  !important; }
.badge.bg-warning, .badge.text-bg-warning { background-color: var(--warning-bg)  !important; color: var(--warning-text)  !important; }
.badge.bg-danger,  .badge.text-bg-danger  { background-color: var(--danger-bg)   !important; color: var(--danger-text)   !important; }
.badge.bg-info,    .badge.text-bg-info    { background-color: var(--info-bg)      !important; color: var(--info-text)     !important; }

/* ── DataTables ─────────────────────────────────────────────── */
.dataTables_wrapper {
  font-size: var(--text-sm);
  color: var(--text-primary);
}
/* border-collapse intentionally left at DataTables default (separate) — FixedColumns requires it for correct cell geometry */

table.dataTable thead th,
table.dataTable thead td {
  font-weight: var(--font-semibold);
  color: #fff;
  border-bottom: 1px solid var(--neutral-200) !important;
  /* padding and background left at legacy values — no override */
}
table.dataTable tbody tr {
  border-bottom: 1px solid var(--neutral-100) !important;
  transition: background 120ms ease;
}
table.dataTable tbody tr:nth-child(even)       { background-color: var(--neutral-50, #f8f7f6); }
table.dataTable tbody tr:hover                  { background-color: var(--neutral-100) !important; }
table.dataTable tbody tr:nth-child(even):hover  { background-color: var(--neutral-100) !important; }
table.dataTable tbody td {
  vertical-align: middle;
  border-top: none !important;
  /* padding left at legacy values — no override */
}
table.dataTable.no-footer { border-bottom: 1px solid var(--neutral-200) !important; }

/* Length & filter controls */
.dataTables_length label,
.dataTables_filter label { font-size: var(--text-xs); color: var(--text-secondary); }

.dataTables_filter input {
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-md);
  padding: 0.3rem 0.65rem;
  font-size: var(--text-sm);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.dataTables_filter input:focus {
  border-color: var(--main-color);
  box-shadow: var(--ring-primary);
  outline: none;
}

/* Pagination */
.dataTables_paginate .paginate_button {
  border-radius: var(--radius-sm) !important;
  font-size: var(--text-xs) !important;
  padding: 0.3rem 0.6rem !important;
  border: none !important;
  color: var(--text-secondary) !important;
  background: transparent !important;
  transition: background 120ms ease !important;
}
.dataTables_paginate .paginate_button:hover {
  background: var(--neutral-100) !important;
  color: var(--text-primary) !important;
  border: none !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background: var(--main-color) !important;
  color: #fff !important;
  border: none !important;
}
.dataTables_paginate .paginate_button.disabled { opacity: .35 !important; cursor: default !important; }

.dataTables_info { font-size: var(--text-xs); color: var(--text-muted); }

/* ============================================================
   END MODERN OVERRIDES — Step 1.4
   ============================================================ */

/* ============================================================
   MODERN OVERRIDES — Step 1.5 (2026-05)
   Desktop topbar · Login split-card · Home divider
   ============================================================ */

/* ─── Desktop topbar ────────────────────────────────────────── */
.app-topbar {
    display: none;
    align-items: center;
    justify-content: space-between;
    height: var(--topbar-height);
    padding: 0 1.5rem;
    background: #fff;
    border-bottom: 1px solid var(--neutral-100, #f1f5f9);
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    z-index: 1040;
    transition: left var(--sidebar-transition);
    flex-shrink: 0;
}

body.sidebar-collapsed .app-topbar {
    left: var(--sidebar-collapsed-width);
}
@media (min-width: 769px) {
    .app-topbar { display: flex; }
}
.topbar-start {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.topbar-end {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.topbar-search {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--neutral-50, #f8f7f6);
    border: 1px solid var(--neutral-200, #e5e1db);
    border-radius: var(--radius-md, 8px);
    padding: 0.32rem 0.75rem;
    cursor: text;
    transition: border-color 150ms ease;
}
.topbar-search:focus-within {
    border-color: var(--main-color);
    box-shadow: var(--ring-primary);
}
.topbar-search i {
    color: var(--text-muted, #9ca3af);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.topbar-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.8rem;
    color: var(--text-secondary, #6b7280);
    width: 155px;
}
.topbar-search input::placeholder { color: var(--text-muted, #9ca3af); }
.topbar-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    border-radius: var(--radius-md, 8px);
    color: var(--text-secondary, #6b7280);
    font-size: 1rem;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.topbar-icon-btn:hover {
    background: var(--neutral-100, #f1ede8);
    color: var(--text-primary, #1f2937);
}
.topbar-user-wrap { position: relative; }
.topbar-user-btn {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.6rem 0.3rem 0.35rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
    color: var(--text-primary, #1f2937);
    font-size: 0.8rem;
    font-weight: 500;
}
.topbar-user-btn:hover {
    background: var(--neutral-50, #f8f7f6);
    border-color: var(--neutral-200, #e5e1db);
}
.topbar-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--main-color);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0;
}
.topbar-user-name {
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-chevron {
    font-size: 0.65rem;
    color: var(--text-muted);
    transition: transform 200ms ease;
}
.topbar-user-wrap.open .topbar-chevron { transform: rotate(180deg); }
.topbar-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 210px;
    background: #fff;
    border: 1px solid var(--neutral-200, #e5e1db);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    z-index: 1050;
    overflow: hidden;
}
.topbar-user-wrap.open .topbar-dropdown { display: block; }
.topbar-dropdown-header {
    padding: 0.85rem 1rem 0.75rem;
}
.topbar-dropdown-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    margin: 0 0 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-dropdown-email {
    font-size: 0.72rem;
    color: var(--text-muted, #9ca3af);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-dropdown-divider {
    height: 1px;
    background: var(--neutral-100, #f1ede8);
    margin: 0;
}
.topbar-dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.65rem 1rem;
    font-size: 0.82rem;
    color: var(--text-secondary, #6b7280);
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}
.topbar-dropdown-item:hover {
    background: var(--neutral-50, #f8f7f6);
    color: var(--text-primary, #1f2937);
}

/* ─── Login split-card ──────────────────────────────────────── */
.login-card {
    max-width: 680px !important;
    display: flex !important;
    flex-direction: row !important;
}
.login-form-side {
    flex: 1;
    min-width: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.login-brand-side {
    width: 45%;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--sidebar-bg, #1e2329) 0%, var(--sidebar-bg-2, #2d3748) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    padding: 2.5rem 1.75rem;
    text-align: center;
}
.login-brand-side img {
    max-height: 52px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.88;
}
.login-brand-tagline {
    font-size: 0.78rem;
    color: rgba(255,255,255,.48);
    margin: 0;
    line-height: 1.6;
    max-width: 20ch;
}
.login-brand-accent {
    width: 28px;
    height: 3px;
    background: var(--main-color);
    border-radius: 2px;
}
/* Hide old card header on desktop (logo moved to brand side) */
.login-card-header { display: none; }
@media (max-width: 640px) {
    .login-card {
        flex-direction: column !important;
        max-width: 400px !important;
    }
    .login-brand-side { display: none; }
    .login-card-header { display: block; }
}

/* ─── Home section divider ──────────────────────────────────── */
.home-section-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 1rem;
}
.home-section-divider-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted, #9ca3af);
    white-space: nowrap;
}
.home-section-divider-line {
    flex: 1;
    height: 1px;
    background: var(--neutral-100, #f1ede8);
}

/* ============================================================
   INFOS AGENT RCS — form style
   All rules scoped under .ia-form-wrap to avoid Bootstrap / existing conflicts.

   Two views share this block:
     - add_infos_agent  (customer, split-screen + live preview)
     - edit_infos_agent (internal, dense editor + popover preview)
   ============================================================ */

/* --ia-brand and --ia-brand-soft: live-tinting source fed by infos_agent.js.
   Default = EMB cyan. These tint ONLY the RCS action buttons, never the banner. */
.ia-form-wrap {
    --ia-brand: #00b4c1;
    --ia-brand-soft: color-mix(in srgb, var(--ia-brand) 14%, white);
}

/* ------------------------------------------------------------
   Shared form atoms
   Used in both customer and internal views for all field groups.
------------------------------------------------------------ */
.ia-form-wrap .f-label {
    display: block;
    font-size: .8125rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--neutral-600);
    margin-bottom: 5px;
}
.ia-form-wrap .f-label .opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--neutral-400); font-style: italic; }

.ia-form-wrap .f-control {
    width: 100%;
    font-family: var(--font-ui); font-size: .9375rem;
    color: var(--neutral-900);
    padding: 9px 12px;
    background: #fff;
    border: 1px solid var(--neutral-300);
    border-radius: var(--r-input, 8px);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.ia-form-wrap .f-control:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-50);
}
.ia-form-wrap textarea.f-control { resize: vertical; min-height: 72px; }
.ia-form-wrap .f-help { font-size: .8125rem; font-style: italic; color: var(--neutral-500); margin-top: 4px; }
.ia-form-wrap .f-mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, monospace; }

/* live character counter — warns at 90%, turns danger at max */
.ia-form-wrap .f-count { display: block; text-align: right; margin-top: 3px; font-size: .72rem; font-variant-numeric: tabular-nums; color: var(--neutral-400); }
.ia-form-wrap .f-count.warn { color: var(--warning-text); font-weight: 600; }
.ia-form-wrap .f-count.over { color: var(--danger-text); font-weight: 700; }

/* inline validation: red field state + danger message */
.ia-form-wrap .f-control.is-error { border-color: var(--danger-500); box-shadow: 0 0 0 3px var(--danger-bg); }
.ia-form-wrap .f-error-msg { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: .76rem; font-weight: 600; color: var(--danger-text); }
.ia-form-wrap .f-error-msg i { width: 14px; height: 14px; flex: none; }

/* Server-side validation summary banner — the server-side companion of form-validation.js
   (which paints client-side inline errors). Generic/reusable: NOT scoped under any form
   wrapper, rendered by the partials/error_summary.blade.php include on any $errors->any(). */
.f-error-summary {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--danger-bg); color: var(--danger-text);
    border: 1px solid var(--danger-500); border-left: 4px solid var(--danger-500);
    border-radius: 10px; padding: 14px 16px;
}
.f-error-summary .f-err-ico { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.f-error-summary strong { display: block; margin-bottom: 6px; font-size: .95rem; }
.f-error-summary ul { margin: 0; padding-left: 18px; font-size: .85rem; }
.f-error-summary li { margin: 2px 0; }

/* Session-flash banner — sibling of .f-error-summary above and, like it, deliberately NOT
   scoped under any page wrapper: rendered by partials/flash_messages.blade.php wherever a
   redirect-with-flash can land. It used to live scoped under .ia-list in
   commandes/infos_agents_list.css, so only the listing ever showed a flash and the edit/show
   pages dropped theirs in silence. */
.flash {
    display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
    padding: 12px 14px; border-radius: var(--radius-md);
    font-size: .9rem; font-weight: 500; border: 1px solid transparent;
}
.flash .material-symbols-outlined { font-size: 20px; flex: none; }
.flash-close {
    margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px;
    border: none; background: none; border-radius: var(--radius-sm); cursor: pointer;
    color: inherit; opacity: .7;
}
.flash-close:hover { opacity: 1; background: rgba(0, 0, 0, .06); }
/* Tokens, not literals: the twin below already used --danger-*, and both families carry
   [data-theme="dark"] overrides in css_vars_emb.css / css_vars_mybrief.css (identical in both
   brands). Nothing sets data-theme yet — dark mode is UI-04, still in the backlog — so that half is
   preparation; but the LIGHT values are not the same as the literals they replaced
   (#ecfdf5/#a7f3d0/#065f46 → #dcfce7/#86efac/#166534), so the banner does change appearance today.
   Contrast goes 7.30:1 → 6.49:1, still AA, no longer AAA. Visually confirmed 2026-08-05. */
.flash--success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.flash--error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }

/* badges: "Visible par vos clients" (teal) / "Non visible" (gray) */
.ia-form-wrap .badge-visible,
.ia-form-wrap .badge-hidden {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .72rem; font-weight: 700; letter-spacing: .03em;
    padding: 3px 9px; border-radius: 999px;
}
.ia-form-wrap .badge-visible { background: var(--ia-brand-soft); color: var(--primary-700); border: 1px solid color-mix(in srgb, var(--ia-brand) 30%, white); }
.ia-form-wrap .badge-hidden  { background: var(--neutral-100); color: var(--neutral-600); border: 1px solid var(--neutral-300); }

/* info banner inside the hidden macro */
.ia-form-wrap .note-meta { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--neutral-600); background: var(--neutral-100); border: 1px solid var(--neutral-200); border-radius: 8px; padding: 9px 13px; margin-bottom: 16px; }
.ia-form-wrap .note-meta i { width: 16px; height: 16px; flex: none; color: var(--neutral-500); }
.ia-form-wrap .note-meta b { color: var(--neutral-700); }

/* live contrast ratio pill — green = AA pass (≥4.5:1), red = fail */
.ia-form-wrap .contrast-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--neutral-100); color: var(--neutral-600); }
.ia-form-wrap .contrast-pill i { width: 14px; height: 14px; }
.ia-form-wrap .contrast-pill.ok  { background: var(--success-bg); color: var(--success-text); }
.ia-form-wrap .contrast-pill.bad { background: var(--danger-bg);  color: var(--danger-text); }

/* colour picker row: native picker + hex input + contrast pill + swatches */
.ia-form-wrap .color-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ia-form-wrap .color-row input[type=color] { width: 46px; height: 46px; border: none; border-radius: 10px; background: none; cursor: pointer; padding: 0; }
.ia-form-wrap .swatches { display: flex; gap: 7px; }
.ia-form-wrap .swatch { width: 26px; height: 26px; border-radius: 7px; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--neutral-300); }
.ia-form-wrap .swatch:hover { transform: scale(1.08); }

/* dropzone: click/drag image upload — scoped to avoid conflict with dropzone_modern.css */
.ia-form-wrap .dropzone {
    border: 2px dashed var(--neutral-300); border-radius: 10px;
    padding: 18px; text-align: center; color: var(--neutral-500);
    background: var(--neutral-50); cursor: pointer; font-size: .85rem;
    transition: border-color .16s ease, background .16s ease;
}
.ia-form-wrap .dropzone:hover           { border-color: var(--ia-brand); background: var(--ia-brand-soft); }
.ia-form-wrap .dropzone i               { width: 24px; height: 24px; display: block; margin: 0 auto 6px; }
.ia-form-wrap .dropzone .dz-text        { display: block; }
.ia-form-wrap .dropzone .dz-dim         { display: block; font-size: .74rem; color: var(--neutral-400); margin-top: 3px; }
.ia-form-wrap .dropzone.has-file        { border-style: solid; border-color: var(--success-500); color: var(--success-text); background: var(--success-bg); }
.ia-form-wrap .dropzone.dz-over         { border-color: var(--ia-brand); background: var(--ia-brand-soft); }
.ia-form-wrap .dropzone.dz-warn         { border-style: solid; border-color: var(--warning-500); color: var(--warning-text); background: var(--warning-bg); }
/* Required image missing — painted by validateRequiredFiles() via setFieldError() on the dropzone id */
.ia-form-wrap .dropzone.is-error        { border-style: solid; border-color: var(--danger-500); box-shadow: 0 0 0 3px var(--danger-bg); }
.ia-form-wrap .dropzone.dz-sm           { padding: 12px; font-size: .8rem; }
.ia-form-wrap .dropzone.dz-sm i         { width: 20px; height: 20px; margin-bottom: 4px; }
/* Current-file confirmation line: shown only when the dropzone is "has-file" (existing DB
   file in edit mode, or a freshly picked one). Green check + file name (no path). */
.ia-form-wrap .dropzone .dz-current     { display: none; align-items: center; justify-content: center; gap: 5px; margin-top: 6px; font-size: .74rem; font-weight: 600; color: var(--success-text); word-break: break-all; }
.ia-form-wrap .dropzone.has-file .dz-current { display: inline-flex; }
/* lucide.createIcons() swaps the <i data-lucide> for an <svg> (default 24px), so size both. */
.ia-form-wrap .dropzone .dz-current i,
.ia-form-wrap .dropzone .dz-current svg { width: 13px !important; height: 13px !important; margin: 0 !important; flex: none; }

/* shared layout grid helpers */
.ia-form-wrap .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ia-form-wrap .grid2 .full { grid-column: 1 / -1; }
.ia-form-wrap .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ia-form-wrap .grid3 .full { grid-column: 1 / -1; }
/* value + libellé pair (contact fields): wide value, fixed-width label */
.ia-form-wrap .pair { display: grid; grid-template-columns: 1fr 200px; gap: 12px; align-items: start; }
.ia-form-wrap .pair + .pair { margin-top: 14px; }

/* ------------------------------------------------------------
   RCS info page mock — the "phone" live preview
   Shared by the customer preview rail and the internal popover.
   The phone renders the real RCS agent card (Google Messages).
------------------------------------------------------------ */
.ia-form-wrap .phone {
    width: 332px; background: #082a2e;
    border-radius: 38px; padding: 12px;
    box-shadow: 0 28px 70px -22px rgba(8,42,46,.55);
    position: relative;
}
.ia-form-wrap .phone::after { /* speaker notch */
    content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
    width: 54px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.14);
}
.ia-form-wrap .phone-screen { background: #fff; border-radius: 28px; overflow: hidden; height: 624px; display: flex; flex-direction: column; font-family: 'Roboto', system-ui, sans-serif; }
.ia-form-wrap .gm-statusbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px 6px; font-size: .72rem; color: var(--neutral-700); font-weight: 600; background: #fff; }
.ia-form-wrap .gm-statusbar .icons { display: flex; gap: 5px; align-items: center; }
.ia-form-wrap .gm-statusbar .icons i { width: 13px; height: 13px; }

/* Google Messages app-bar */
.ia-form-wrap .gm-appbar { display: flex; align-items: center; gap: 14px; padding: 8px 14px 12px; background: #fff; border-bottom: 1px solid var(--neutral-100); }
.ia-form-wrap .gm-appbar .back i { width: 22px; height: 22px; color: var(--neutral-700); display: block; }
.ia-form-wrap .gm-appbar .title { font-size: .95rem; font-weight: 500; color: var(--neutral-800); }
.ia-form-wrap .gm-appbar .more { margin-left: auto; }
.ia-form-wrap .gm-appbar .more i { width: 20px; height: 20px; color: var(--neutral-500); display: block; }

/* scrollable info card inside the phone */
.ia-form-wrap .ip-page { flex: 1; overflow-y: auto; background: #fff; }

/* banner: separate uploaded image (1440×448), never tinted by brand hex */
.ia-form-wrap .ip-banner { aspect-ratio: 1440 / 448; background: #e9e7e2 center/cover no-repeat; position: relative; }
.ia-form-wrap .ip-banner.is-empty {
    background-image: repeating-linear-gradient(45deg, var(--neutral-100), var(--neutral-100) 11px, var(--neutral-200) 11px, var(--neutral-200) 22px);
    display: grid; place-items: center;
}
.ia-form-wrap .ip-banner .dim-hint { font-size: .72rem; font-weight: 600; color: var(--neutral-500); background: rgba(255,255,255,.78); padding: 3px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
.ia-form-wrap .ip-banner .dim-hint i { width: 13px; height: 13px; }
.ia-form-wrap .ip-banner.has-file .dim-hint { display: none; }

/* logo circle: separate image (224×224), overlaps banner bottom */
.ia-form-wrap .ip-logo { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); width: 68px; height: 68px; border-radius: 50%; overflow: hidden; background: var(--neutral-200) center/cover no-repeat; border: 3px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.2); display: grid; place-items: center; color: var(--neutral-600); font-weight: 800; font-size: 1.4rem; }
/* sealed fiche uses a real <img> child (live form sets background-image via JS) — clamp it to the circle */
.ia-form-wrap .ip-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ia-form-wrap .ip-head { padding: 46px 18px 14px; text-align: center; }
.ia-form-wrap .ip-name { display: inline-flex; align-items: center; gap: 5px; font-size: 1.12rem; font-weight: 700; color: var(--neutral-900); }
.ia-form-wrap .ip-name .txt.is-empty { color: var(--neutral-400); font-weight: 600; }
.ia-form-wrap .ip-name .check { width: 17px; height: 17px; color: #fff; background: #1a73e8; border-radius: 50%; padding: 2px; }
.ia-form-wrap .ip-verified { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: .72rem; color: var(--neutral-500); margin: 3px 0 9px; }
.ia-form-wrap .ip-verified i { width: 12px; height: 12px; }
.ia-form-wrap .ip-desc { font-size: .84rem; color: var(--neutral-700); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ia-form-wrap .ip-desc.is-empty { color: var(--neutral-400); font-style: italic; }

/* action buttons: text + icons tinted by --ia-brand (the RCS spec colour) */
.ia-form-wrap .ip-actions { display: flex; justify-content: center; gap: 22px; padding: 6px 16px 18px; }
.ia-form-wrap .ip-act { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; font-size: .72rem; font-weight: 500; color: var(--ia-brand); transition: transform .14s ease; }
.ia-form-wrap .ip-act i { width: 21px; height: 21px; padding: 11px; border-radius: 50%; background: var(--ia-brand-soft); transition: background .16s ease; }
.ia-form-wrap .ip-act[hidden] { display: none; }
.ia-form-wrap .ip-act:active { transform: scale(.94); }

/* Infos | Options tabs */
.ia-form-wrap .ip-tabs { display: flex; border-bottom: 1px solid var(--neutral-200); }
.ia-form-wrap .ip-tab { flex: 1; text-align: center; padding: 11px 0; font-size: .82rem; font-weight: 500; color: var(--neutral-500); border-bottom: 2px solid transparent; cursor: default; }
.ia-form-wrap .ip-tab.active { color: var(--ia-brand); border-bottom-color: var(--ia-brand); font-weight: 600; }

/* contact list: primary value + libellé subtitle */
.ia-form-wrap .ip-list { padding: 4px 0 2px; }
.ia-form-wrap .ip-item { display: flex; align-items: center; gap: 15px; padding: 11px 18px; }
.ia-form-wrap .ip-item > i { width: 20px; height: 20px; color: var(--neutral-500); flex: none; }
.ia-form-wrap .ip-item .it-txt { display: flex; flex-direction: column; min-width: 0; }
.ia-form-wrap .ip-item .val { font-size: .88rem; color: var(--neutral-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-form-wrap .ip-item .lib { font-size: .74rem; color: var(--neutral-500); }
.ia-form-wrap .ip-item .lib.is-empty { font-style: italic; color: var(--neutral-400); }
.ia-form-wrap .ip-item[hidden] { display: none; }

.ia-form-wrap .ip-legal { padding: 14px 18px 24px; border-top: 1px solid var(--neutral-100); font-size: .72rem; color: var(--neutral-500); text-align: center; }
.ia-form-wrap .ip-legal a { color: var(--neutral-600); text-decoration: none; }
.ia-form-wrap .ip-legal a:hover { text-decoration: underline; }
.ia-form-wrap .ip-legal .sep { margin: 0 6px; color: var(--neutral-300); }

/* micro-pulse on live preview update */
@keyframes ia-pulse { 0%{transform:scale(1)} 40%{transform:scale(1.025)} 100%{transform:scale(1)} }
.ia-form-wrap .pulse { animation: ia-pulse .18s ease; }

/* ------------------------------------------------------------
   Direction A — "L'Atelier" (customer view: add_infos_agent)
   3-column layout: sticky rail | form macros | sticky phone preview
------------------------------------------------------------ */
.ia-form-wrap .atelier {
    display: grid;
    grid-template-columns: 210px minmax(420px, 1fr) minmax(360px, 432px);
    gap: 28px;
    max-width: 1420px; margin: 0 auto; padding: 28px;
    align-items: start;
}

/* progress rail: two semantic groups (Infos agent / Lancement) */
.ia-form-wrap .rail { position: sticky; top: 92px; }
.ia-form-wrap .rail-group + .rail-group { margin-top: 24px; }
.ia-form-wrap .rail-group .rg-title { display: flex; align-items: center; gap: 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--neutral-500); margin: 0 0 8px 4px; }
.ia-form-wrap .rail-group .rg-title i { width: 13px; height: 13px; }
.ia-form-wrap .rail-group.is-hidden .rg-title { color: var(--neutral-400); }
.ia-form-wrap .rail ol { list-style: none; margin: 0; padding: 0; position: relative; }
.ia-form-wrap .rail ol::before { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; background: var(--neutral-200); }
.ia-form-wrap .rail li { position: relative; padding: 7px 0 7px 34px; font-size: .85rem; color: var(--neutral-500); cursor: pointer; transition: color .16s ease; }
.ia-form-wrap .rail li .pin { position: absolute; left: 4px; top: 9px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--neutral-300); transition: all .18s ease; }
.ia-form-wrap .rail li.done { color: var(--neutral-700); }
.ia-form-wrap .rail li.done .pin { background: var(--success-500); border-color: var(--success-500); }
.ia-form-wrap .rail li.active { color: var(--primary-700); font-weight: 700; }
.ia-form-wrap .rail li.active .pin { border-color: var(--ia-brand); background: var(--ia-brand); box-shadow: 0 0 0 4px var(--ia-brand-soft); }

/* form column: two macro sections stacked */
.ia-form-wrap .form-col { display: flex; flex-direction: column; }
.ia-form-wrap .macro { background: #fff; border: 1px solid var(--neutral-200); border-radius: 14px; box-shadow: 0 1px 2px rgba(30,28,25,.06), 0 8px 24px -14px rgba(30,28,25,.18); overflow: hidden; }
.ia-form-wrap .macro + .macro { margin-top: 24px; }
.ia-form-wrap .macro-head { display: flex; align-items: center; gap: 13px; padding: 16px 22px; border-bottom: 1px solid var(--neutral-100); }
.ia-form-wrap .macro--visible .macro-head { background: var(--ia-brand-soft); }
.ia-form-wrap .macro--hidden  .macro-head { background: var(--neutral-100); }
.ia-form-wrap .macro-head .m-ico { width: 24px; height: 24px; flex: none; }
.ia-form-wrap .macro--visible .macro-head .m-ico { color: var(--primary-700); }
.ia-form-wrap .macro--hidden  .macro-head .m-ico { color: var(--neutral-500); }
.ia-form-wrap .macro-head .m-title { line-height: 1.15; }
.ia-form-wrap .macro-head .part { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--neutral-500); }
.ia-form-wrap .macro-head h2 { margin: 1px 0 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.ia-form-wrap .macro-head .right { margin-left: auto; }
.ia-form-wrap .macro-body { padding: 6px 22px 20px; }
.ia-form-wrap .macro--hidden { opacity: .96; }

/* sub-blocks inside a macro: each scrolls into view from the rail */
.ia-form-wrap .sub { padding: 18px 0; border-top: 1px dashed var(--neutral-200); scroll-margin-top: 92px; }
.ia-form-wrap .sub:first-child { border-top: none; }
.ia-form-wrap .sub-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.ia-form-wrap .sub-head .s-ico { width: 18px; height: 18px; color: var(--neutral-500); }
.ia-form-wrap .sub-head h3 { margin: 0; font-size: 1rem; font-weight: 600; }

/* sticky preview column with the live phone */
.ia-form-wrap .preview-col { position: sticky; top: 92px; }
.ia-form-wrap .preview-shell { border-radius: 24px; padding: 26px 20px 20px; background: radial-gradient(120% 90% at 70% 0%, var(--ia-brand-soft), var(--neutral-50) 70%); display: flex; flex-direction: column; align-items: center; transition: background .3s ease, filter .3s ease; }
/* dimmed when scrolled into the "Lancement" (hidden) macro */
.ia-form-wrap .preview-shell.dimmed { filter: grayscale(.55) opacity(.7); }
.ia-form-wrap .preview-shell .cap { margin-top: 16px; text-align: center; font-size: .82rem; color: var(--neutral-600); max-width: 280px; }
.ia-form-wrap .preview-shell .cap b { color: var(--primary-700); display: block; font-size: .9rem; margin-bottom: 2px; }
.ia-form-wrap .preview-shell .cap .hidden-hint { display: none; margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: var(--neutral-100); color: var(--neutral-600); font-size: .78rem; }
.ia-form-wrap .preview-shell.dimmed .cap .hidden-hint { display: block; }

/* submit bar at the bottom of the form column */
.ia-form-wrap .nav-btns { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }

/* buttons — scoped to avoid Bootstrap .btn-primary conflict */
.ia-form-wrap .btn { font-family: var(--font-ui); font-size: .9rem; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; padding: 10px 20px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, background .16s ease, filter .16s ease; }
.ia-form-wrap .btn i { width: 16px; height: 16px; }
.ia-form-wrap .btn:active { transform: translateY(1px); }
.ia-form-wrap .btn-ghost { background: #fff; border-color: var(--neutral-300); color: var(--neutral-700); }
.ia-form-wrap .btn-ghost:hover { background: var(--neutral-50); }
.ia-form-wrap .btn-primary { background: var(--ia-brand); color: #fff; border-color: var(--ia-brand); }
.ia-form-wrap .btn-primary:hover { filter: brightness(1.06); }
.ia-form-wrap .btn-sm { padding: 6px 12px; font-size: .82rem; border-radius: 8px; }
.ia-form-wrap .btn-block { width: 100%; justify-content: center; margin-top: 18px; }

/* ------------------------------------------------------------
   Direction C — "Le Dossier" (internal view: edit_infos_agent)
   2-column layout: sticky TOC + completeness meter | dense form
------------------------------------------------------------ */
.ia-form-wrap .dossier-wrap { display: grid; grid-template-columns: 256px 1fr; gap: 40px; max-width: 1180px; margin: 0 auto; padding: 28px; align-items: start; }

/* sticky TOC sidebar with completeness meter */
.ia-form-wrap .toc { position: sticky; top: 24px; }
.ia-form-wrap .toc .meter-card { background: #fff; border: 1px solid var(--neutral-200); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(30,28,25,.06), 0 8px 24px -14px rgba(30,28,25,.18); }
.ia-form-wrap .toc .meter-card .meter-top { display: flex; align-items: baseline; justify-content: space-between; }
.ia-form-wrap .toc .meter-card .meter-top span { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--neutral-500); font-weight: 700; }
.ia-form-wrap .toc .meter-card .meter-top b { font-size: 1.5rem; font-weight: 700; color: var(--neutral-900); font-variant-numeric: tabular-nums; }
.ia-form-wrap .toc .meter-hint { margin: 8px 0 0; font-size: .76rem; color: var(--neutral-500); line-height: 1.4; }

/* completeness bar: amber → green at 80% (managed by JS via .high class) */
.ia-form-wrap .meter { height: 8px; border-radius: 999px; background: var(--neutral-200); margin-top: 8px; overflow: hidden; }
.ia-form-wrap .meter > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--warning-500); transition: width .4s ease, background .4s ease; }
.ia-form-wrap .meter.high > span { background: var(--success-500); }

.ia-form-wrap .toc .tg-title { display: flex; align-items: center; gap: 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--neutral-500); margin: 16px 0 4px 6px; }
.ia-form-wrap .toc .tg-title:first-of-type { margin-top: 4px; }
.ia-form-wrap .toc .tg-title i { width: 13px; height: 13px; }
.ia-form-wrap .toc nav { list-style: none; }
.ia-form-wrap .toc a { display: flex; align-items: center; gap: 9px; padding: 7px 10px 7px 12px; border-left: 2px solid transparent; color: var(--neutral-600); text-decoration: none; font-size: .9rem; border-radius: 0 6px 6px 0; transition: all .14s ease; }
.ia-form-wrap .toc a:hover { background: var(--neutral-100); color: var(--neutral-900); }
.ia-form-wrap .toc a.active { border-left-color: var(--ia-brand); color: var(--primary-700); font-weight: 700; background: var(--primary-50); }
/* status dot: order:2 keeps label left, dot right despite DOM order (dot first) */
.ia-form-wrap .toc a .st { order: 2; margin-left: auto; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--neutral-300); background: #fff; flex: none; }
.ia-form-wrap .toc a.active .st { border-color: var(--ia-brand); }
.ia-form-wrap .toc a.done .st  { background: var(--success-500); border-color: var(--success-500); }

/* dense dossier form */
.ia-form-wrap .dossier { max-width: 780px; }
.ia-form-wrap .dsec { padding: 24px 0; border-top: 1px solid var(--neutral-200); scroll-margin-top: 24px; }
.ia-form-wrap .dsec:first-of-type { border-top: none; }
.ia-form-wrap .dsec-h { font-size: 1.05rem; font-weight: 700; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.ia-form-wrap .dsec-h i { width: 19px; height: 19px; color: var(--neutral-500); }
.ia-form-wrap .dsec-h.sub-h { font-size: .92rem; margin-top: 22px; color: var(--neutral-700); }

/* visual divider between visible / hidden zones */
.ia-form-wrap .section-band { display: flex; align-items: center; gap: 12px; margin: 30px 0 2px; color: var(--neutral-600); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ia-form-wrap .section-band i { width: 15px; height: 15px; color: var(--neutral-500); }
.ia-form-wrap .section-band::after { content: ""; height: 1px; background: var(--neutral-200); flex: 1; }
.ia-form-wrap .section-band.visible-band { color: var(--primary-700); }
.ia-form-wrap .section-band.visible-band i { color: var(--ia-brand); }

/* sticky action bar at the bottom of the internal view */
.ia-form-wrap .actionbar { position: sticky; bottom: 0; z-index: 30; margin: 24px -28px -28px; padding: 14px 28px; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); border-top: 1px solid var(--neutral-200); display: flex; align-items: center; gap: 16px; }
.ia-form-wrap .actionbar .spacer { flex: 1; }
.ia-form-wrap .actionbar .ab-status { display: flex; align-items: center; gap: 8px; color: var(--neutral-600); font-size: .85rem; }
.ia-form-wrap .actionbar .ab-status i { width: 16px; height: 16px; }

/* preview popover (overlay) — fixed full-screen backdrop, scoped to avoid Bootstrap modal conflicts */
/* Backdrop darkened (.55 → .86) + blur so the phone card stands out and the busy form
   behind it no longer bleeds through (the preview used to look translucent / faded). */
/* opacity:1 overrides the legacy generic ".overlay { opacity:.5 }" (line ~1684) which otherwise
   makes the whole modal (white card + phone preview) half-transparent, letting the form bleed
   through. With it reset, the .86 dark-teal backdrop properly isolates the preview. */
.ia-form-wrap .overlay { position: fixed; inset: 0; z-index: 60; opacity: 1; background: rgba(8,42,46,.86); backdrop-filter: blur(4px); display: none; place-items: center; padding: 20px; }
.ia-form-wrap .overlay.open { display: grid; }

/* popover card with spring-entrance animation */
@keyframes ia-pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ia-form-wrap .overlay-card { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(8,42,46,.7); width: min(380px, 92vw); max-height: 94vh; display: flex; flex-direction: column; animation: ia-pop .2s ease; }
.ia-form-wrap .overlay-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--neutral-200); font-weight: 700; }
.ia-form-wrap .overlay-head > span { display: inline-flex; align-items: center; gap: 8px; }
.ia-form-wrap .overlay-head i { width: 18px; height: 18px; }
.ia-form-wrap .ov-close { background: none; border: none; cursor: pointer; color: var(--neutral-500); padding: 4px; border-radius: 6px; line-height: 0; }
.ia-form-wrap .ov-close:hover { background: var(--neutral-100); color: var(--neutral-900); }
.ia-form-wrap .overlay-body { padding: 22px; display: grid; place-items: center; background: var(--neutral-50); overflow: auto; }

/* spinner: used when the save button is in loading state */
@keyframes ia-spin { to { transform: rotate(360deg); } }
.ia-form-wrap .spin { animation: ia-spin .8s linear infinite; }

/* ------------------------------------------------------------
   Responsive — tablet / narrow desktop (≤ 1100px)
   Both layouts collapse to a single column.
------------------------------------------------------------ */
@media (max-width: 1100px) {
    .ia-form-wrap .atelier { grid-template-columns: 1fr; }
    .ia-form-wrap .rail { display: none; }
    .ia-form-wrap .preview-col { position: static; order: -1; }
    .ia-form-wrap .dossier-wrap { grid-template-columns: 1fr; }
    .ia-form-wrap .toc { position: static; }
    .ia-form-wrap .pair { grid-template-columns: 1fr; }
}

/* Mobile phones (≤ 520px) */
@media (max-width: 520px) {
    /* grids collapse to single column */
    .ia-form-wrap .grid2,
    .ia-form-wrap .grid3 { grid-template-columns: 1fr; }
    .ia-form-wrap .pair { grid-template-columns: 1fr; }

    /* tighten page gutter */
    .ia-form-wrap .atelier { padding-left: 16px; padding-right: 16px; }

    /* fluid phone: never overflows viewport, capped at design width */
    .ia-form-wrap .preview-shell { padding: 18px 10px 14px; }
    .ia-form-wrap .phone { width: 100%; max-width: 332px; }
    .ia-form-wrap .phone-screen { height: auto; min-height: 560px; }

    /* dropzones share row and stay equal height */
    .ia-form-wrap .grid2 .dropzone { height: 100%; display: flex; flex-direction: column; justify-content: center; }

    /* sticky action bar: negative desktop margins zero out on mobile */
    .ia-form-wrap .actionbar { flex-wrap: wrap; row-gap: 10px; margin-left: 0; margin-right: 0; padding-left: 16px; padding-right: 16px; }
    .ia-form-wrap .actionbar .spacer { display: none; }
    .ia-form-wrap .actionbar .btn { width: 100%; justify-content: center; }
    .ia-form-wrap .nav-btns .btn { width: 100%; justify-content: center; }
}

/* 6.2-bis shared-IA collision banner (info tone) — stacked: message row on top, reuse button below */
.ia-collision { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 8px 0 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--main-color) 22%, white); background: var(--primary-50); border-radius: 10px; font-size: .8125rem; line-height: 1.45; color: var(--neutral-700); }
/* top row: small info icon + flexible message text */
.ia-collision .ia-collision-row { display: flex; align-items: flex-start; gap: 8px; }
.ia-collision .ia-collision-row i, .ia-collision .ia-collision-row svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--main-color); }
/* brand-name token («…») kept on one line — must never break mid-phrase */
.ia-collision .ia-brand-name { white-space: nowrap; }
/* reuse button: own line, single line of text (wraps only when viewport forces it) */
.ia-collision .btn-reuse { align-self: flex-start; white-space: nowrap; padding: .45rem .85rem; border: 0; border-radius: 8px; background: var(--main-color); color: #fff; font-size: .8125rem; font-weight: 600; cursor: pointer; transition: background .15s ease; }
.ia-collision .btn-reuse:hover { background: var(--primary-600); }
.ia-collision[hidden] { display: none; }
/* read-only preview state applied by JS to the visible inputs while a collision is shown */
#iaForm.ia-readonly .f-control[readonly] { background: #f4f6f8; color: #555; }

/* ============================================================
   END MODERN OVERRIDES — Step 1.5
   ============================================================ */

/* ============================================================
   STATUS PAGE — reusable customer message/outcome component
   [rcs.html §6.3]
   ============================================================ */

/* per-tone aliases — single data-tone attribute on frame + card drives every accent
   (radial wash, medallion glow/ring/disc, top seam, eyebrow pill) via --tone-rgb */
[data-tone="info"]    { --tone-500:var(--info-500);    --tone-600:var(--info-600);    --tone-text:var(--info-text);    --tone-bg:var(--info-bg);    --tone-border:var(--info-border);    --tone-rgb:59,130,246; }
[data-tone="success"] { --tone-500:var(--success-500); --tone-600:var(--success-600); --tone-text:var(--success-text); --tone-bg:var(--success-bg); --tone-border:var(--success-border); --tone-rgb:34,197,94; }
[data-tone="warning"] { --tone-500:var(--warning-500); --tone-600:var(--warning-600); --tone-text:var(--warning-text); --tone-bg:var(--warning-bg); --tone-border:var(--warning-border); --tone-rgb:245,158,11; }
[data-tone="danger"]  { --tone-500:var(--danger-500);  --tone-600:var(--danger-600);  --tone-text:var(--danger-text);  --tone-bg:var(--danger-bg);  --tone-border:var(--danger-border);  --tone-rgb:239,68,68; }
[data-tone="neutral"] { --tone-500:var(--neutral-500); --tone-600:var(--neutral-600); --tone-text:var(--neutral-700); --tone-bg:var(--neutral-100); --tone-border:var(--neutral-300); --tone-rgb:140,136,128; }

/* atmosphere layer: tone-tinted radial wash + faint brand wash + dot-grid so the card floats */
.status-frame {
    position: relative;
    min-height: calc(100vh - 50px - 7px - 44px);
    display: flex; align-items: center; justify-content: center;
    padding: 48px 20px 64px;
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(var(--tone-rgb),.10), transparent 60%),
        radial-gradient(80% 60% at 50% 120%, rgba(var(--main-color-rgb),.06), transparent 70%),
        var(--neutral-50);
    overflow: hidden;
}
/* dot-grid overlay: radial mask fades the dots toward the edges */
.status-frame::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(0,0,0,0) 0, rgba(0,0,0,.025) 1px, transparent 1.4px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 75%);
            mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 75%);
}

.status-card {
    position: relative;
    width: 100%; max-width: 480px;
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 50px -12px rgba(0,0,0,.18), 0 8px 16px -8px rgba(0,0,0,.08);
    padding: 56px 40px 36px;
    text-align: center;
    overflow: hidden;
    animation: status-card-in .65s cubic-bezier(.22,1,.36,1) both;
}
/* top accent seam: thin gradient from tone to a tone+brand colour-mix */
.status-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--tone-500), color-mix(in srgb, var(--tone-500) 55%, var(--main-color)));
}

/* medallion container — spring-entrance animation, houses 4 layers */
.status-medallion {
    position: relative;
    width: 96px; height: 96px; margin: 0 auto 26px;
    display: grid; place-items: center;
    animation: status-medallion-in .7s cubic-bezier(.34,1.56,.64,1) .12s both;
}
/* glow halo: soft radial wash behind the disc */
.status-medallion::before {
    content: ''; position: absolute; inset: -18px; border-radius: var(--radius-full);
    background: radial-gradient(circle, rgba(var(--tone-rgb),.14), transparent 68%);
}
/* static ring: thin border just outside the disc edge */
.status-medallion::after {
    content: ''; position: absolute; inset: -2px; border-radius: var(--radius-full);
    border: 1px solid rgba(var(--tone-rgb),.28);
}
/* inner disc: tone-bg gradient + coloured drop shadow + inset highlight */
.status-disc {
    position: relative; z-index: 2;
    width: 96px; height: 96px; border-radius: var(--radius-full);
    display: grid; place-items: center;
    background: linear-gradient(160deg, color-mix(in srgb, var(--tone-bg) 80%, #fff), var(--tone-bg));
    border: 1px solid var(--tone-border);
    box-shadow: 0 10px 24px -8px rgba(var(--tone-rgb),.55), inset 0 1px 0 #fff;
    color: var(--tone-600);
}
.status-disc i { width: 44px; height: 44px; stroke-width: 1.75; }

/* one-shot expanding ring — fires once on load then disappears */
.status-ping {
    position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-full);
    border: 2px solid rgba(var(--tone-rgb),.55);
    animation: status-ping 1.7s cubic-bezier(0,0,.2,1) .35s 1 both;
}

.status-eyebrow {
    display: inline-block; margin-bottom: 12px;
    font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--tone-text); background: var(--tone-bg); border: 1px solid var(--tone-border);
    padding: 4px 11px; border-radius: var(--radius-full);
    animation: status-rise .55s ease .22s both;
}
.status-title {
    margin: 0 0 12px;
    font-size: 1.6rem; font-weight: 700; line-height: 1.2; letter-spacing: -.02em;
    color: var(--text-primary);
    animation: status-rise .55s ease .28s both;
}
.status-text {
    margin: 0 auto; max-width: 38ch;
    font-size: 1rem; line-height: 1.6; color: var(--text-secondary);
    animation: status-rise .55s ease .34s both;
}
.status-text strong { color: var(--text-primary); font-weight: 600; }

/* contact chip: brand-tinted icon tile + label + mailto link */
.status-contact {
    margin-top: 26px;
    display: inline-flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    background: var(--neutral-50); border: 1px solid var(--surface-border); border-radius: var(--radius-lg);
    text-align: left;
    animation: status-rise .55s ease .40s both;
}
.status-contact .ct-ico {
    width: 38px; height: 38px; flex: none; border-radius: var(--radius-md);
    display: grid; place-items: center;
    background: rgba(var(--main-color-rgb),.10); color: var(--main-color);
}
.status-contact .ct-ico i { width: 20px; height: 20px; }
/* --neutral-600 (#6b6762, 4.9:1 on white) — replaces --text-muted (#b5b0a7, 2.1:1 — fails WCAG AA) */
.status-contact .ct-label { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--neutral-600); }
.status-contact .ct-value { font-size: .95rem; font-weight: 600; color: var(--text-primary); }
.status-contact .ct-value .ct-mailto { color: inherit; text-decoration: none; }
.status-contact .ct-value .ct-mailto:hover { color: var(--main-color); }
.status-contact .ct-value .ct-mailto:focus-visible { outline: 2px solid var(--tone-500); outline-offset: 2px; }

/* action buttons — scoped to .status-actions to avoid Bootstrap .btn conflicts */
.status-actions {
    margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
    animation: status-rise .55s ease .46s both;
}
.status-actions .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; border-radius: var(--radius-md);
    font-family: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
    border: 1px solid transparent; text-decoration: none;
    transition: transform .12s, box-shadow .2s, background .2s;
}
.status-actions .btn i { width: 17px; height: 17px; }
.status-actions .btn:active { transform: translateY(1px); }
.status-actions .btn:focus-visible { outline: 2px solid var(--tone-500); outline-offset: 2px; }
.status-actions .btn-primary { background: var(--main-color); color: #fff; box-shadow: 0 6px 14px -6px rgba(var(--main-color-rgb),.70); }
.status-actions .btn-primary:hover { background: var(--primary-700); }
.status-actions .btn-ghost { background: #fff; color: var(--text-secondary); border-color: var(--surface-border); }
.status-actions .btn-ghost:hover { border-color: var(--neutral-400); color: var(--text-primary); }

/* --neutral-600 (#6b6762, 4.9:1 on white) — replaces --text-muted (#b5b0a7, 2.1:1 — fails WCAG AA) */
.status-foot {
    margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--neutral-100);
    font-size: .78rem; color: var(--neutral-600);
    animation: status-rise .55s ease .52s both;
}

/* card rises + scales in from below */
@keyframes status-card-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
/* spring entrance — cubic-bezier(.34,1.56,.64,1) is DELIBERATE (approved spring; do not flatten to ease-out) */
@keyframes status-medallion-in { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
/* staggered fade+rise: eyebrow → title → text → contact → actions → foot */
@keyframes status-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* one-shot ring: expands to 1.9× and fades */
@keyframes status-ping { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }

/* kill-switch: scoped to .status-frame so we don't suppress animations elsewhere in the layout */
@media (prefers-reduced-motion: reduce) {
    .status-frame * { animation: none !important; }
}

/* phone (≤ 520px): tighter padding, smaller title, full-width contact chip + action buttons */
@media (max-width: 520px) {
    .status-frame { padding: 28px 14px 44px; }
    .status-card { padding: 44px 22px 28px; border-radius: var(--radius-lg); }
    .status-title { font-size: 1.35rem; }
    .status-contact { width: 100%; }
    .status-actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   END STATUS PAGE — Step 6.3
   ============================================================ */

/* ============================================================
   LOCKED / SEALED READ-ONLY PAGE — Step 6.4 [rcs.html §6.4]
   Atoms: .lk-* (banner) / .ro-* (read-only fields) /
          .seal-* (ink stamp + watermark) / .locked-body (layout)
   Info-tone tokens are shared with status-page (--info-*).
   Brand tokens (--brand-accent etc.) are resolved via
   [data-brand] on <html>, set server-side in the Blade.
   ============================================================ */

/* brand token sets — drives chrome accent + banner seam + contact chip;
   the phone keeps the agent's own submitted colour (--ia-brand), independent */
[data-brand="emb"]     { --brand-accent: #00b4c1; --brand-700: #007d88; --brand-soft: #e0f8f9; }
[data-brand="mybrief"] { --brand-accent: #35a936; --brand-700: #237226; --brand-soft: #e6f6e6; }

/* info-tone RGB triplet for rgba() usage in the lock banner (fixed, not driven by data-tone) */
.locked-page { --info-rgb: 59,130,246; }

/* ── Lock banner ── */
.lock-banner {
    max-width: 1420px; margin: 24px auto 0; padding: 0 28px;
}
.lock-banner-inner {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 26px;
    padding: 22px 26px;
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(var(--info-rgb),.10), transparent 60%),
        #fff;
    border: 1px solid var(--info-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(30,28,25,.06), 0 8px 24px -14px rgba(30,28,25,.18);
    animation: lk-rise .6s var(--ease-ui, cubic-bezier(.22,.61,.36,1)) both;
}
/* state-tinted left seam: info blue → info+brand color-mix */
.lock-banner-inner::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--info-500), color-mix(in srgb, var(--info-500) 55%, var(--brand-accent)));
}

/* medallion — spring entrance (cubic-bezier(.34,1.56,.64,1) DELIBERATE, do not flatten) */
.lk-medallion {
    position: relative; flex: none;
    width: 64px; height: 64px; display: grid; place-items: center;
    animation: lk-pop .7s cubic-bezier(.34,1.56,.64,1) .1s both;
}
.lk-medallion::before { /* soft ambient glow */
    content: ''; position: absolute; inset: -14px; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--info-rgb),.16), transparent 68%);
}
.lk-medallion::after { /* thin static ring */
    content: ''; position: absolute; inset: -2px; border-radius: 50%;
    border: 1px solid rgba(var(--info-rgb),.30);
}
.lk-disc {
    position: relative; z-index: 2; width: 64px; height: 64px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(160deg, color-mix(in srgb, var(--info-bg) 80%, #fff), var(--info-bg));
    border: 1px solid var(--info-border);
    box-shadow: 0 10px 22px -10px rgba(var(--info-rgb),.6), inset 0 1px 0 #fff;
    color: var(--info-600);
}
.lk-disc i { width: 30px; height: 30px; stroke-width: 1.75; }

.lk-body { flex: 1; min-width: 0; }
.lk-eyebrow {
    display: inline-block; margin-bottom: 7px;
    font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--info-text); background: var(--info-bg); border: 1px solid var(--info-border);
    padding: 3px 10px; border-radius: 999px;
}
.lk-title { margin: 0 0 5px; font-size: 1.22rem; font-weight: 700; letter-spacing: -.01em; color: var(--neutral-900); }
.lk-text { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--neutral-600); max-width: 64ch; }
.lk-text b { color: var(--neutral-800); font-weight: 600; }
.lk-text a { color: var(--brand-700); font-weight: 600; text-decoration: none; }
.lk-text a:hover { text-decoration: underline; }

/* contact chip — sales rep (User::find(commande.created_by)) */
.lk-contact {
    flex: none; align-self: stretch;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; min-width: 210px;
    background: var(--neutral-50); border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
}
.lk-contact .ct-ico {
    width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand-700);
}
.lk-contact .ct-ico i { width: 21px; height: 21px; }
/* display:block on both, so the chip stacks label over address as it was drawn. Without it they run
   inline as one string — invisible on add_infos_agent, which pairs them with .ct-name, but plain on
   any page that has no rep name to show.
   --neutral-600, not -500: at .68rem/700 this is normal-size text by WCAG (bold only counts as large
   from 18.66px), so it needs 4.5:1. -500 (#8c8880 on --neutral-50) measures 3.30:1 and fails; -600
   measures 5.25:1. The token, not a hex — it flips correctly in the dark set (css_vars_*.css:169). */
.lk-contact .ct-label { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--neutral-600); }
.lk-contact .ct-name { font-size: .92rem; font-weight: 700; color: var(--neutral-900); line-height: 1.25; }
/* break-word, not break-all: an address only has to break when it genuinely cannot fit, and
   break-all splits it mid-token on a 430px screen ("claudio.ciarrocchi@emb-e / urope.com"). */
.lk-contact .ct-mail { display: block; font-size: .8rem; color: var(--brand-700); text-decoration: none; word-break: break-word; }
.lk-contact .ct-mail:hover { text-decoration: underline; }

/* ── Read-only field atom — replaces inputs on the sealed form ── */
.ro-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .72rem; font-weight: 700; letter-spacing: .03em;
    padding: 3px 9px; border-radius: 999px;
    background: var(--info-bg); color: var(--info-text); border: 1px solid var(--info-border);
}
.ro-chip i { width: 13px; height: 13px; }

.ro-field { display: flex; flex-direction: column; gap: 5px; }
.ro-label {
    font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--neutral-600);
}
/* "(facultatif)" hint — neutral-500 (#8c8880) for WCAG AA compliance */
.ro-label .opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--neutral-500); font-style: italic; }
/* value box — inert input look (no focus ring, default cursor) */
.ro-value {
    font-size: .9375rem; color: var(--neutral-900);
    padding: 9px 12px; min-height: 40px;
    background: var(--neutral-50); border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    word-break: break-word;
}
.ro-value.is-multiline { white-space: pre-wrap; line-height: 1.5; }
/* neutral-600 (#6b6762, ~4.8:1 on white) — WCAG AA fix; prototype used neutral-400 (fails) */
.ro-value.is-empty { color: var(--neutral-600); font-style: italic; }
.ro-value a { color: var(--brand-700); text-decoration: none; }
.ro-value a:hover { text-decoration: underline; }
.ro-value.is-mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, monospace; }

/* colour swatch + hex display (brand-colour field read-only view) */
.ro-color { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ro-swatch { width: 34px; height: 34px; border-radius: 9px; flex: none; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--neutral-300); }
.ro-hex { font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace; font-size: .9rem; color: var(--neutral-800); }

/* visibility badges on macro heads */
.macro--visible .macro-head { background: var(--brand-soft); }
.macro--visible .macro-head .m-ico { color: var(--brand-700); }
.badge-visible { background: var(--brand-soft); color: var(--brand-700); border: 1px solid color-mix(in srgb, var(--brand-accent) 30%, white); }

/* slight desaturation on coloured accents only — not on dark text or values (see §2 no-dimming rule) */
.locked-page .form-col .macro-head { filter: saturate(.82); }

/* ── "Document scellé" seal cues ── */
.form-col, .preview-shell { position: relative; }

/* faint diagonal tiled watermark — pointer-events:none keeps every value selectable */
.seal-watermark {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 3; pointer-events: none; opacity: .04; color: var(--neutral-900);
}
.seal-watermark text { font-weight: 800; font-size: 17px; letter-spacing: .2em; fill: currentColor; }

/* ink rubber-stamp — deep ink green #2f6b4f (≠ myBRIEF brand green, this is ink not brand),
   multiply blend = stamped-on-paper look; spring entrance (deliberate, do not flatten) */
.seal-stamp {
    position: absolute; top: 46px; right: -6px; z-index: 6;
    width: 94px; height: 94px; transform: rotate(-11deg);
    display: grid; place-items: center; pointer-events: none;
    color: #2f6b4f; mix-blend-mode: multiply; opacity: .9;
    animation: seal-in .5s cubic-bezier(.34,1.56,.64,1) .3s both;
}
.seal-ring {
    width: 94px; height: 94px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 2.5px solid currentColor;
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4.5px currentColor; /* ring · gap · ring */
    text-align: center;
}
.seal-ring i { width: 15px; height: 15px; stroke-width: 2.5; margin-bottom: 1px; }
.seal-main { font-weight: 800; font-size: 17px; letter-spacing: .06em; line-height: 1; }
.seal-sub  { font-weight: 700; font-size: 8.5px; letter-spacing: .16em; }

/* mini twin-seal on the phone frame — read-only cue without dimming the screen */
.preview-seal {
    position: absolute; top: 10px; right: 10px; z-index: 6; pointer-events: none;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 999px;
    background: #fff; border: 1px solid #d4e8db; box-shadow: 0 2px 6px rgba(0,0,0,.08);
    font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #2f6b4f; transform: rotate(-3deg);
}
.preview-seal i { width: 13px; height: 13px; }

/* stamp-down spring entrance (cubic-bezier(.34,1.56,.64,1) DELIBERATE) */
@keyframes seal-in {
    from { opacity: 0; transform: rotate(-11deg) scale(1.55); }
    to   { opacity: .9; transform: rotate(-11deg) scale(1); }
}
/* banner rise + medallion spring entrance */
@keyframes lk-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes lk-pop  { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .seal-stamp { animation: none; }
    .lock-banner-inner, .lk-medallion { animation: none !important; }
}

/* ── 2-col layout: read-only form (left) + frozen phone preview (right) ── */
.locked-body {
    display: grid;
    grid-template-columns: minmax(420px, 1fr) minmax(360px, 432px);
    gap: 28px; max-width: 1420px; margin: 0 auto; padding: 24px 28px 40px;
    align-items: start;
}

/* print button — ghost, shown only on screen */
.lk-print-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px; border-radius: var(--radius-md);
    font-family: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
    background: #fff; color: var(--neutral-600);
    border: 1px solid var(--neutral-300); text-decoration: none;
    transition: border-color .15s, color .15s;
}
.lk-print-btn:hover { border-color: var(--neutral-500); color: var(--neutral-900); }
.lk-print-btn i { width: 16px; height: 16px; }

/* responsive breakpoints */
@media (max-width: 1100px) {
    .locked-body { grid-template-columns: 1fr; }
    .lock-banner-inner { flex-wrap: wrap; }
    .lk-contact { width: 100%; }
}
@media (max-width: 520px) {
    .lock-banner { padding: 0 16px; }
    .locked-body { padding-left: 16px; padding-right: 16px; }
    .lock-banner-inner { padding: 18px; }
}

/* ── Print stylesheet — hides chrome; prints clean single-column fiche ── */
@media print {
    /* hide: topbar, animated banner medallion/ping, phone preview, print button */
    .head_container,
    .frame_title,
    nav,
    .lk-medallion,
    .status-ping,
    .preview-col,
    .lk-print-btn { display: none !important; }

    /* reset page chrome — white background, full width */
    body, .frame, .locked-body { background: #fff !important; display: block !important; padding: 0 !important; margin: 0 !important; }
    .lock-banner { margin: 0; padding: 0; max-width: none; }
    .lock-banner-inner { border: 1px solid #ccc; border-radius: 0; box-shadow: none; animation: none; }
    .form-col { max-width: none; width: 100%; }

    /* seal stamp + watermark: keep if readable, but remove animation */
    .seal-stamp { animation: none; }
    .seal-watermark { opacity: .03; }

    /* read-only fields: clean single-column stack */
    .ro-value { border-color: #ccc; background: #fafafa; }
    .macro-body { display: block !important; }
    .grid2, .pair { display: block !important; }
    .grid2 > *, .pair > * { margin-bottom: 12px; }
}

/* ============================================================
   END LOCKED PAGE — Step 6.4
   ============================================================ */

/* ============================================================
   INFOS AGENT FICHE — Step 8 [rcs.html §8]
   Read-only consultation BODY (partial: infos_agent_fiche.blade.php).
   Reuses the shipped .ro-* atoms + unscoped .macro--visible / .badge-visible
   color rules; this block adds only the .ia-fiche-scoped base box layout.
   Brand tokens (--brand-*) resolve from [data-brand] set on <html> by the page.
   ============================================================ */
.ia-fiche { display: flex; flex-direction: column; gap: 22px; }

/* brand head: logo + name + SIREN + brand colour */
.ia-fiche .iaf-ident { display: flex; align-items: center; gap: 16px; }
.ia-fiche .iaf-logo {
    width: 64px; height: 64px; flex: none; border-radius: 14px; overflow: hidden;
    display: grid; place-items: center;
    background: #fff; border: 1px solid var(--neutral-200); color: var(--neutral-400);
}
.ia-fiche .iaf-logo img { width: 100%; height: 100%; object-fit: contain; }
.ia-fiche .iaf-ident-txt { min-width: 0; }
.ia-fiche .iaf-name { margin: 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.1; color: var(--neutral-900); }
.ia-fiche .iaf-siren {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
    font-size: .82rem; font-weight: 600; color: var(--neutral-700);
    background: var(--neutral-100); border: 1px solid var(--neutral-200); border-radius: 999px;
    padding: 3px 11px; font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace;
}
.ia-fiche .iaf-siren .material-symbols-outlined { font-size: 15px; color: var(--neutral-500); }
.ia-fiche .iaf-brandcolor { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }

/* macro section card — quiet full border, NO side-stripe (impeccable ban) */
.ia-fiche .macro {
    background: #fff; border: 1px solid var(--neutral-200); border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(30,28,25,.06); overflow: hidden;
}
.ia-fiche .macro-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--neutral-100); }
.ia-fiche .m-ico {
    width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center;
    background: var(--neutral-100); color: var(--neutral-600);
}
.ia-fiche .macro--visible .m-ico { background: #fff; }
.ia-fiche .m-ico .material-symbols-outlined { font-size: 21px; }
.ia-fiche .m-title { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--neutral-900); }
.ia-fiche .badge-visible {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: .7rem; font-weight: 700; letter-spacing: .03em; padding: 3px 10px; border-radius: 999px;
}
.ia-fiche .badge-visible .material-symbols-outlined { font-size: 14px; }

/* two-column field grid; multiline fields span the row */
.ia-fiche .macro-body { padding: 18px 20px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 22px; }
.ia-fiche .macro-body .span2 { grid-column: 1 / -1; }

/* visuals block (logo + banner thumbnails) */
.ia-fiche .iaf-visuals { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.ia-fiche .iaf-vthumb { margin: 0; border: 1px solid var(--neutral-200); border-radius: var(--radius-md); background: var(--neutral-50); overflow: hidden; }
.ia-fiche .iaf-vthumb figcaption {
    font-size: .74rem; font-weight: 600; color: var(--neutral-600); padding: 8px 12px;
    border-bottom: 1px solid var(--neutral-100); display: flex; align-items: center; gap: 6px;
}
.ia-fiche .iaf-vthumb figcaption .material-symbols-outlined { font-size: 16px; color: var(--neutral-500); }
.ia-fiche .iaf-vimg { min-height: 120px; display: grid; place-items: center; padding: 12px; }
.ia-fiche .iaf-vimg img { max-width: 100%; max-height: 160px; object-fit: contain; }

@media (max-width: 620px) {
    .ia-fiche .macro-body { grid-template-columns: 1fr; }
    .ia-fiche .iaf-visuals { grid-template-columns: 1fr; }
    .ia-fiche .iaf-name { font-size: 1.2rem; }
}

/* ============================================================================
   INFOS AGENT CONSULTATION PAGE — chrome only — Step 8 [rcs.html §8]
   Scoped under .ia-consult so it never leaks. The read-only BODY (.ia-fiche,
   .macro, .ro-*) ships in the block above; here = sticky action bar, jump-nav
   aside, glance card. Buttons are .btn-act (NOT Bootstrap .btn) on purpose.
   data-brand on .ia-consult resolves the --brand-* tokens for this subtree.
   ============================================================================ */

/* ── sticky action header (the hero) — sits just under the fixed app-topbar ── */
.ia-consult .fiche-head {
    position: sticky; top: var(--topbar-height); z-index: 50;
    background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--neutral-200);
}
.ia-consult .fiche-head-in { max-width: 1320px; margin: 0 auto; padding: 16px 28px; display: flex; align-items: center; gap: 18px; }
.ia-consult .ident { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ia-consult .ident-logo {
    width: 52px; height: 52px; border-radius: 12px; flex: none; overflow: hidden;
    border: 1px solid var(--neutral-200); background: #fff; display: grid; place-items: center; color: var(--neutral-400);
}
.ia-consult .ident-logo img { width: 100%; height: 100%; object-fit: cover; }
.ia-consult .ident-txt { min-width: 0; }
.ia-consult .ident-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.ia-consult .crumb { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--neutral-500); }
.ia-consult .brand-badge {
    display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; padding: 2px 9px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-700);
}
.ia-consult .brand-badge .material-symbols-outlined { font-size: 13px; }
.ia-consult .ident-name {
    font-size: 1.4rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.1; color: var(--neutral-900);
    margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ia-consult .siren-chip {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; font-size: .78rem; font-weight: 600;
    color: var(--neutral-700); background: var(--neutral-100); border: 1px solid var(--neutral-200); border-radius: 999px;
    padding: 3px 10px; font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace;
}
.ia-consult .siren-chip .material-symbols-outlined { font-size: 15px; color: var(--neutral-500); }

/* action buttons — .btn-act (Bootstrap-collision-free namespace) */
.ia-consult .head-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.ia-consult .btn-act {
    display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
    border-radius: var(--radius-md); padding: 9px 16px; text-decoration: none; border: 1px solid transparent;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.ia-consult .btn-act .material-symbols-outlined { font-size: 19px; }
.ia-consult .btn-act--primary { background: var(--brand-accent); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.10); }
.ia-consult .btn-act--primary:hover { background: var(--brand-700); color: #fff; }
.ia-consult .btn-act--ghost { background: #fff; color: var(--neutral-700); border-color: var(--neutral-300); }
.ia-consult .btn-act--ghost:hover { border-color: var(--neutral-500); color: var(--neutral-900); }

/* ── page body: main column + sticky aside ── */
.ia-consult .fiche-body { max-width: 1320px; margin: 0 auto; padding: 26px 28px 64px; display: grid; grid-template-columns: minmax(0,1fr) 312px; gap: 30px; align-items: start; }
.ia-consult .col-main { min-width: 0; }
/* macro anchors must clear the fixed topbar (54) + sticky head (~78) on jump */
.ia-consult .macro { scroll-margin-top: 140px; }

/* ── aside: jump-nav + at-a-glance ── */
.ia-consult .aside { position: sticky; top: 140px; display: flex; flex-direction: column; gap: 18px; }
.ia-consult .aside-card { background: #fff; border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 14px; }
.ia-consult .aside-cap { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--neutral-500); margin: 0 0 10px 4px; }
.ia-consult .jump a { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 8px; color: var(--neutral-600); text-decoration: none; font-size: .86rem; font-weight: 500; }
.ia-consult .jump a .material-symbols-outlined { font-size: 18px; color: var(--neutral-400); }
.ia-consult .jump a:hover { background: var(--neutral-100); color: var(--neutral-900); }
/* active = inset bar clipped to radius (NOT a banned side-stripe) */
.ia-consult .jump a.is-active { background: var(--brand-soft); color: var(--brand-700); box-shadow: inset 3px 0 0 var(--brand-accent); font-weight: 600; }
.ia-consult .jump a.is-active .material-symbols-outlined { color: var(--brand-700); }
.ia-consult .glance dt { font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--neutral-500); margin-top: 10px; }
.ia-consult .glance dd { margin: 2px 0 0; font-size: .9rem; color: var(--neutral-900); font-weight: 600; }
.ia-consult .glance dd.muted { font-weight: 400; color: var(--neutral-600); }
.ia-consult .glance dd.is-mono { font-family: ui-monospace, monospace; }

@media (max-width: 1080px) {
    .ia-consult .fiche-body { grid-template-columns: 1fr; }
    .ia-consult .aside { position: static; flex-direction: row; flex-wrap: wrap; }
    .ia-consult .aside-card { flex: 1; min-width: 240px; }
    /* collapse buttons to icon-only when the bar gets tight */
    .ia-consult .head-actions .btn-act span:not(.material-symbols-outlined) { display: none; }
    .ia-consult .head-actions .btn-act { padding: 9px 11px; }
}
@media (max-width: 768px) {
    .ia-consult .fiche-head { top: var(--mobile-topbar-height); }  /* under the mobile-topbar instead */
}
@media (max-width: 620px) {
    .ia-consult .fiche-head-in, .ia-consult .fiche-body { padding-left: 16px; padding-right: 16px; }
    .ia-consult .ident-name { font-size: 1.15rem; white-space: normal; }
}

/* [rcs.html §8] Infos Agent actions dropdown in list_commandes — RCS rows only.
   data-brand on the .ia-actions wrapper resolves --brand-* (the list layout sets
   no brand). The trigger is the single accent "badge" icon with a state dot. */
.ia-actions { position: relative; display: inline-block; }
.ia-actions .ia-trigger { position: relative; }
.ia-actions .ia-trigger.is-done .material-symbols-outlined { color: var(--brand-700); }
/* state dot: filled = fiche reçue/validée, hollow = en attente du client */
.ia-actions .ia-dot { position: absolute; top: 0; right: 0; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #fff; }
.ia-actions .ia-dot.filled { background: var(--brand-accent); }
.ia-actions .ia-dot.hollow { background: #fff; box-shadow: inset 0 0 0 1.5px #8c8880; }
.ia-actions .ia-menu { min-width: 240px; }
.ia-actions .ia-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ia-actions .ia-state-pill { font-size: .64rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; text-transform: none; letter-spacing: .02em; }
.ia-actions .ia-state-pill.ok { background: var(--brand-soft); color: var(--brand-700); }
.ia-actions .ia-state-pill.wait { background: #fef3c7; color: #92400e; }
.ia-actions .dropdown-item { display: flex; align-items: center; gap: 10px; }
.ia-actions .dropdown-item .material-symbols-outlined { font-size: 19px; color: #8c8880; }
.ia-actions .dropdown-item:hover { background: var(--brand-soft); color: var(--brand-700); }
.ia-actions .dropdown-item:hover .material-symbols-outlined { color: var(--brand-700); }
.ia-actions .dropdown-item.ia-item-primary { color: var(--brand-700); font-weight: 600; }
.ia-actions .dropdown-item.ia-item-primary .material-symbols-outlined { color: var(--brand-700); }