body {
    margin: 0;
}

main {
    background-image: url('../Portfolio/img/fond.jpg');
}

.objectif {
    text-align: center;
    font-variant: small-caps;
    font-size: larger;
    padding-bottom: 25px;
    padding-top: 25px;
    background-color: rgb(10, 10, 10);
    color: #ddd;
    font-size: 2em;
    font-weight: bold;
    unicode-bidi: isolate;
}

.intro {
    background-color: #f7fafc;
    display: flex;
    font-variant: small-caps;
    font-style: italic;
    font-size: large;
    padding: 20px;
    gap: 20px; 
    padding-bottom: 20px;
}

.intro2 {
    display: flex;
    border: solid 7px rgb(199, 199, 199);
    border-style: double;
    font-variant: small-caps;
    font-style: italic;
    font-size: large;
    padding: 20px;
    gap: 20px; 
    margin-bottom: 100px;
    margin-top: 100px;
    background-color: rgb(192, 90, 72, 0.883)
}

.présentation {
    text-align: center;
    padding-right: 50px;
    text-align: center;
}

.liens img {
    text-align: right;
    width: 100px; 
    display: flex;
}

.photo img {
    border: 2px solid rgb(244, 244, 244);
    border-style: double;
}

.travaux img, #STIC, #VIP, #ERGO, #METHODE, #ADID{
    border: 4px rgb(244, 244, 244) solid;
    border-radius: 20px;
    border-style:outset;
}

.travaux img:hover {
    transform: scale(0.9);
}

.liens img:hover {
    transform: scale(1.1);
}

.travaux1 {
    display: flex;
    flex-wrap: wrap;
    padding-top: 250px;
}

.travaux {
    padding-top: 35px;
    padding-left: 235px;
    padding-bottom: 20px;
}

.travaux p {
    margin-right: 235px;
    background-color: #b7b2b2;
    border: solid 1px rgb(198, 198, 198);
    opacity: 0.8;
    padding: 10px;
    border-radius: 5px;
    width: 450px;
}

#STIC, #ERGO, #ADID {
 padding: 20px;
 background-color: rgba(179, 53, 31, 0.883);
 opacity: 0.7;
 display: inline-block;
 display: flex;
 flex-wrap: wrap;
}

#VIP, #METHODE {
 padding: 20px;
 background-color: rgba(192, 90, 72, 0.883);
 opacity: 0.7;
 display: inline-block;
 display: flex;
 flex-wrap: wrap;
}

h2, h3, h4 {
    font-variant: small-caps;
}


#info, #info1, #info2 {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border-color: #f5efef;
    background-color: rgb(168, 165, 165);
    margin: 15px;

}

.travaux2 a {
    color:#222; 
}

.travaux a:visited {
    color:burlywood; 
}

table {
    border-collapse: separate;
    border-spacing :20px;
}

/*partie chatbot*/

 #pf-chat-btn {
    position:fixed;
    right:16px;
    bottom:16px;padding:10px 12px;
    border:1px solid #222;
    border-radius:999px;
    background:#fff;
    cursor:pointer }

  #pf-chat {
  position:fixed;
  right:16px;
  bottom:64px;
  width:320px;
  max-width:92vw;
  height:420px;
  max-height:70vh;
  border:1px solid #e7e5e5;
  border-radius:14px;
  background:#b1afaf;
  display:flex;              
  flex-direction:column;     
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  overflow:hidden;
  font-family:system-ui,Segoe UI,Roboto,Arial;

  /* caché par défaut */
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

#pf-chat.open {
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
}  

#pf-chat header {
    padding:10px 12px;
    border-bottom:1px solid #ddd;
    font-weight:600; 
    flex: 0 0 auto; }

  #pf-chat .msgs {
  flex:1 1 auto;       
  min-height:0;        
  overflow-y:auto;     
  overflow-x:hidden;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  -webkit-overflow-scrolling: touch;
}

  .m {
    max-width:90%;
    padding:10px 12px;
    border:1px solid #dbd0d0;
    border-radius:12px;
    line-height:1.25; 
    white-space:pre-line;
}

  .me {
    align-self:flex-end;
    border-color:#f5efef
}

  .bot {
    align-self:flex-start;
    background:#d8d8d8
}

  #pf-chat .quick {
    flex:0 0 auto;
    padding:10px 12px;
    border-top:1px solid #ddd;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    max-height:110px;
    overflow-y:auto;
    min-height:0;
}
  #pf-chat .quick button {
    border:1px solid #ece8e8;
    background:rgba(142, 141, 141, 0.883);
    border-radius:999px;
    padding:6px 10px;
    cursor:pointer;
}

  #pf-chat .foot{ 
    flex:0 0 auto;
    padding:10px 12px;
    border-top:1px solid #ddd;
    display:flex;
    gap:8px;
}
  #pf-chat input{
    flex:1;border:1px solid #bbb;
    border-radius:10px;padding:8px 10px;
}

  #pf-chat .send {
    border:1px solid #ece2e2;
    background:#c4c4c4;
    border-radius:10px;
    padding:8px 10px;
    cursor:pointer;
}