/* A mettre sur les différentes pages <link rel="stylesheet" href="/assets/style.css">*/

:root{
  --primary:#006881;      /* couleur LQ */
  --primary-600:#26b6b4;  /* couleur LQ */
  --primary-300:#f4f4f4;
  --accent:#00a6c8;
  --bg:#f5f7fa;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --ok:#198754;
  --warn:#b08900;
  --err:#b00020;
  --radius:10px;
  --shadow:0 2px 8px rgba(0,0,0,.08);
}

/* Reset léger */
*{box-sizing:border-box}
html,body{height:100%}
[hidden]{display:none!important}
body{
  margin:0; font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text); background:var(--bg);
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}

/* Layout */
.container{max-width:1000px; margin:0 auto; padding:24px}
.header{
  background:#fff; border-bottom:3px solid var(--primary); box-shadow:var(--shadow);
}
.header .inner{max-width:1000px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:12px}
.brand .logo{width:50px; border-radius:50%}
.brand .title{font-weight:700; color:var(--primary)}
.nav a{margin-left:16px; font-weight:600}

.card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:20px; margin:20px 0;
}

/* Boutons */
.btn{
  display:inline-block; padding:10px 16px; border-radius:8px; border:1px solid transparent;
  background:var(--primary); color:#fff; font-weight:600; cursor:pointer;
}
.btn:hover{background:var(--primary-600)}
.btn.secondary{background:#fff; color:var(--primary); border-color:var(--primary)}
.btn.secondary:hover{background:var(--primary-300); color:#083344}

/* Formulaires */
form{max-width:1260px}
label{display:block; margin:10px 0 6px; font-weight:600; color:var(--muted)}
input[type="text"],input[type="email"],input[type="password"],input[type="date"]{
  width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:8px; background:#fff;
}
input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,102,153,.15)}
.actions{margin-top:14px}

/* Messages */
.alert{padding:10px 12px; border-radius:8px; margin:10px 0; font-weight:600}
.alert.ok{background:#e8f5ee; color:var(--ok)}
.alert.warn{background:#fff7e0; color:var(--warn)}
.alert.err{background:#fde7eb; color:var(--err)}

/* Tables */
.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:10px 12px; border-bottom:1px solid #e5e7eb}
.table th{background:#eef6fa; color:#0f2a38; text-align:left}

/* Footer */
.footer{color:var(--muted); font-size:.92rem; padding:24px 0}

/* Utilitaires */
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.center{text-align:center}

/* ===== Champs unifiés (inputs + selects) ===== */
:root{
  --field-h: 42px;
  --field-bg: #fff;
  --field-bd: #d0d7de;
  --field-bd-focus: #2684ff;
  --field-radius: 8px;
  --pad-x: 12px;
  --pad-r: 36px; /* espace pour la flèche du select */
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea{
  display:block;
  width:100%;
  height:var(--field-h);
  box-sizing:border-box;
  padding:0 var(--pad-r) 0 var(--pad-x);
  font:14px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:#111;
  background:var(--field-bg);
  border:1px solid var(--field-bd);
  border-radius:var(--field-radius);
  transition:border-color .15s ease, box-shadow .15s ease;
}

/* ===== Select: retirer le style natif + flèche SVG ===== */
select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23666' stroke-width='2' d='M1 1l5 5 5-5'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:12px 8px;
  padding-right:var(--pad-r);
}

/* IE/Edge hérité: masquer la flèche */
select::-ms-expand{ display:none; }

/* Focus accessible et cohérent */
input:focus, select:focus, textarea:focus{
  outline:0;
  border-color:var(--field-bd-focus);
  box-shadow:0 0 0 3px rgba(38,132,255,.2);
}

/* Empilage propre des labels/champs */
label{ display:block; margin:12px 0; position:relative; }
label > input, label > select, label > textarea{ margin-top:6px; }

/*boutons du menu entrée */
#entry { float: right !important; }

/* --- Grille 2 colonnes stricte pour #f --- */
@media (min-width:801px){
  form#f{
    display:grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:12px !important;
    align-items:start;
  }

  /* Chaque champ occupe 1 cellule */
  form#f > *{ float:none !important; clear:none !important; margin:0 !important; }
  form#f > :where(label,.field){ display:block !important; }
  form#f > :where(label,.field) > :where(input,select,textarea){ width:100% !important; }

  /* Éléments pleine largeur */
  form#f > :where(.full,.actions,.form-actions,table,h1){ grid-column:1 / -1 !important; }
}

/* Sous 800px: 1 colonne */
@media (max-width:2400px){
  form#f{ display:block !important; }
}

/* Bouton Liste dans company_create */

/* Ligne recherche = flex pour égaliser les hauteurs */
.search-line.input-group{
  display:flex;
  align-items:stretch;
  width:100%;
}
.search-line.input-group > .form-control{
  flex:1 1 auto;
  border-top-right-radius:0 !important;
  border-bottom-right-radius:0 !important;
}

/* Append en flex et boutons étirés à la hauteur de l’input */
.search-line.input-group > .input-group-append{
  display:flex;
  align-items:stretch;
}
.search-line.input-group > .input-group-append > .btn{
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  height:auto;
  padding:0 16px;
  white-space:nowrap;
  box-sizing:border-box;
  border-radius:0 !important; /* coins droits par défaut */
  border-top-right-radius:var(--field-radius, .5rem) !important;
  border-bottom-right-radius:var(--field-radius, .5rem) !important;
}

/* Séparation de 5 mm entre les 2 boutons (override Bootstrap) */
.search-line.input-group > .input-group-append > .btn + .btn{
  margin-left:2mm !important;
}

/* Option: annuler toute “jonction” forcée de Bootstrap */
.search-line.input-group > .input-group-append > .btn{
  margin-left:0;
}

/* Espace les deux div colonne de droite contact_create.php */
.mt-35{margin-top:35px}

/* Input avec l'attribut style="overflow:hidden" remplacé par classe */
.overflow-hidden { overflow: hidden; }

/* ===================== */
/*  Autocomplétion LQ    */
/* ===================== */

.lq-ac-list{
  position:absolute;          /* positionnée via label{position:relative} */
  top:calc(100% + 4px);
  left:0; right:0;
  z-index:1000;
  background:var(--field-bg);
  border:1px solid var(--field-bd);
  border-radius:var(--field-radius);
  box-shadow:var(--shadow);
  list-style:none;
  margin:0;
  padding:4px 0;
  max-height:240px;
  overflow:auto;
  scrollbar-gutter:stable;
}

.lq-ac-list:empty{display:none}

.lq-ac-item{
  padding:8px 12px;
  line-height:1.3;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.lq-ac-item:hover,
.lq-ac-item:focus,
.lq-ac-item[aria-selected="true"]{
  background:var(--primary-300);
}

/* Option: style de texte plus doux dans la liste */
.lq-ac-item span{ color:#111 }

/* wrapper pour l'autocomplétion */
.lq-ac-wrap{ position: relative; }

/* contact form offset (override bootstrap .mt-3) */
#contactform { margin-top: -8px !important; }

/* Badges contacts */
.badge-lq-teal{background:#17a2b8;color:#fff;}
.badge-lq-gray{background:#6c757d;color:#fff;}
.badge-lq-deepteal{background:#006881;color:#fff;}
.card .badge{margin-right:.25rem;margin-bottom:.25rem;}

.card-updated{
  font-style: italic;
  font-size: .70rem; /* plus petit */
}