/*=================================
 FOOTER HTR PROFESSIONNEL
=================================*/


.footerHTR{

background:

linear-gradient(
135deg,
#002171,
#0d47a1,
#1565c0
);

color:white;

margin-top:40px;

}



.footerContainer{


display:grid;

grid-template-columns:

repeat(auto-fit,minmax(240px,1fr));


gap:30px;


padding:40px;


}



.footerBox{


background:rgba(255,255,255,.08);

padding:25px;

border-radius:20px;

backdrop-filter:blur(8px);

transition:.3s;


}



.footerBox:hover{


transform:translateY(-8px);

background:rgba(255,255,255,.15);


}



.footerLogo{


width:90px;

height:90px;

border-radius:50%;

background:white;

padding:5px;

margin-bottom:15px;


}



.footerBox h2{


font-size:35px;

margin-bottom:5px;


}



.footerBox h3{


font-size:22px;

margin-bottom:15px;

color:#bbdefb;


}



.footerBox p{


line-height:1.7;

font-size:15px;


}



.footerBox ul{


list-style:none;

padding:0;


}



.footerBox li{


padding:8px 0;

font-size:16px;


}



.social{


display:flex;

gap:10px;

flex-wrap:wrap;

margin-top:15px;


}



.social a{


text-decoration:none;

background:white;

color:#1565c0;

padding:8px 15px;

border-radius:20px;

font-weight:bold;

transition:.3s;


}



.social a:hover{


background:#bbdefb;

transform:scale(1.05);


}



/*====================
 BAS FOOTER
=====================*/


.footerBottom{


background:#001f54;

text-align:center;

padding:25px;


}



.footerBottom p{


margin:8px;

font-size:15px;


}



.topButton{


margin-top:15px;

background:white;

color:#1565c0;

border:none;

padding:12px 25px;

border-radius:30px;

font-size:16px;

font-weight:bold;

cursor:pointer;


}



.topButton:hover{


background:#bbdefb;

transform:scale(1.05);


}


/*====================
 MOBILE
=====================*/


@media(max-width:600px){


.footerContainer{

padding:20px;

}



.footerBox{

text-align:center;

}


.social{

justify-content:center;

}


}
/*==============================
 HEADER HTR COMPLET
==============================*/


.headerHTR{

background:linear-gradient(
135deg,
#003c8f,
#1565c0,
#2196f3
);

padding:25px;

display:flex;

justify-content:space-between;

align-items:center;

gap:25px;

color:white;

flex-wrap:wrap;

}



.logoZone{

display:flex;

align-items:center;

gap:15px;

}



.logoHTR{

width:100px;

height:100px;

border-radius:50%;

background:white;

padding:6px;

object-fit:contain;

box-shadow:

0 0 25px rgba(255,255,255,.7);

animation:

flottement 4s ease-in-out infinite;

}



@keyframes flottement{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-10px);

}


}



.identite h1{

font-size:40px;

margin:0;

letter-spacing:3px;

}



.identite p{

font-size:18px;

font-weight:bold;

}



.identite span{

font-size:14px;

opacity:.9;

}



.titre{

text-align:center;

}



.titre h2{

font-size:28px;

}



.titre p{

font-size:17px;

margin-top:10px;

}



.horloge{

background:white;

color:#1565c0;

padding:15px 25px;

border-radius:20px;

box-shadow:0 8px 20px rgba(0,0,0,.25);

text-align:center;

}



#heure{

font-size:32px;

font-weight:bold;

}



#date{

margin-top:8px;

font-size:15px;

}



/*==============================
 BARRE INFORMATION
==============================*/


.infoHTR{

display:flex;

justify-content:center;

align-items:center;

gap:20px;

padding:15px;

background:#e3f2fd;

flex-wrap:wrap;

}



.statut{

background:#2e7d32;

color:white;

padding:10px 20px;

border-radius:30px;

font-weight:bold;

}



.messageHTR{

color:#0d47a1;

font-weight:bold;

text-align:center;

}



/* MOBILE */

@media(max-width:700px){


.headerHTR{

flex-direction:column;

text-align:center;

}


.logoZone{

flex-direction:column;

}


.titre h2{

font-size:22px;

}


.horloge{

width:100%;

}


}
/*==========================================
    HTR - CSS COMPLET
    Humanitarian Team Rescue
==========================================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Segoe UI",Arial,sans-serif;
}

body{

background:linear-gradient(-45deg,
#0d47a1,
#1565c0,
#1976d2,
#42a5f5);

background-size:400% 400%;

animation:fondHTR 15s ease infinite;

min-height:100vh;

}

@keyframes fondHTR{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}

.container{

width:95%;
max-width:1100px;

margin:30px auto;

background:rgba(255,255,255,.95);

border-radius:25px;

overflow:hidden;

box-shadow:0 20px 50px rgba(0,0,0,.30);

backdrop-filter:blur(10px);

}

/*================ HEADER ================*/

.headerHTR{

background:linear-gradient(90deg,#003c8f,#1565c0,#1e88e5);

padding:20px;

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

color:white;

}

.logoZone{

display:flex;

align-items:center;

gap:15px;

}

.logoHTR{

width:90px;

height:90px;

border-radius:50%;

background:white;

padding:5px;

box-shadow:0 0 20px rgba(255,255,255,.5);

animation:rotationLogo 12s linear infinite;

}

@keyframes rotationLogo{

100%{

transform:rotate(360deg);

}

}

.logoZone h1{

font-size:34px;

}

.logoZone p{

font-size:15px;

}

.titre{

text-align:center;

}

.titre h2{

font-size:30px;

margin-bottom:8px;

}

.titre p{

font-size:18px;

}

.horloge{

background:white;

color:#1565c0;

padding:15px;

border-radius:15px;

text-align:center;

min-width:170px;

font-weight:bold;

}

#heure{

font-size:30px;

}

#date{

font-size:15px;

margin-top:8px;

}

/*================ ACCUEIL ================*/

.accueil{

padding:30px;

text-align:center;

}

.message{

background:#e3f2fd;

border-left:8px solid #1565c0;

padding:25px;

border-radius:15px;

line-height:1.8;

font-size:18px;

margin-top:25px;

margin-bottom:35px;

}

.message h2{

color:#1565c0;

margin-bottom:15px;

}

/*================ LANGUES ================*/

.langues{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

margin-top:30px;

}

.langues button{

padding:18px;

font-size:18px;

font-weight:bold;

border:none;

border-radius:15px;

cursor:pointer;

color:white;

transition:.35s;

box-shadow:0 8px 18px rgba(0,0,0,.25);

}

.langues button:hover{

transform:translateY(-5px);

box-shadow:0 12px 30px rgba(0,0,0,.35);

}

.fr{

background:#1565c0;

}

.sw{

background:#2e7d32;

}

.li{

background:#6a1b9a;

}

.en{

background:#ef6c00;

}

.ki{

background:#c62828;

}

/*================ PROGRESSION ================*/

.progression{

height:18px;

margin:20px;

background:#dbeafe;

border-radius:30px;

overflow:hidden;

}

#barreProgression{

width:0%;

height:100%;

background:linear-gradient(90deg,#2e7d32,#43a047,#81c784);

background-size:200%;

animation:progression 2s linear infinite;

transition:1s;

}

@keyframes progression{

100%{

background-position:200%;

}

}

/*================ PERSONNAGE ================*/

.personnage{

padding:25px;

text-align:center;

background:white;

}

.personnage img{

width:200px;

height:200px;

border-radius:50%;

border:6px solid #1565c0;

object-fit:cover;

box-shadow:0 0 30px rgba(0,0,0,.30);

transition:.4s;

}

.personnage img:hover{

transform:scale(1.05);

}

.personnage h2{

margin-top:15px;

color:#1565c0;

font-size:28px;

}

/*================ CHAT ================*/

.chat{

height:450px;

overflow-y:auto;

padding:20px;

background:#f7fbff;

}

.messageChat{

display:flex;

margin-bottom:20px;

animation:apparition .6s;

}

@keyframes apparition{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.gauche{

justify-content:flex-start;

}

.droite{

justify-content:flex-end;

}

.bulle{

max-width:72%;

padding:18px;

border-radius:20px;

line-height:1.8;

font-size:17px;

box-shadow:0 10px 25px rgba(0,0,0,.15);

}

.gauche .bulle{

background:#e3f2fd;

}

.droite .bulle{

background:#dcedc8;

}

.nom{

font-weight:bold;

margin-bottom:8px;

color:#1565c0;

}

/*================ INDICATEUR ================*/

.parle{

display:none;

margin-top:12px;

font-weight:bold;

color:#2e7d32;

animation:clignote 1s infinite;

}

@keyframes clignote{

50%{

opacity:.3;

}

}

/*================ BOUTONS ================*/

button{

cursor:pointer;

border:none;

border-radius:12px;

padding:14px 28px;

font-size:17px;

font-weight:bold;

transition:.3s;

}

button:hover{

transform:scale(1.05);

}

/*================ FOOTER ================*/

.footerHTR{

background:#0d47a1;

color:white;

text-align:center;

padding:20px;

font-size:16px;

}

/*================ SCROLLBAR ================*/

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-thumb{

background:#1976d2;

border-radius:10px;

}

::-webkit-scrollbar-track{

background:#dbeafe;

}

/*================ RESPONSIVE ================*/

@media(max-width:900px){

.headerHTR{

flex-direction:column;

text-align:center;

gap:20px;

}

.logoZone{

justify-content:center;

}

.titre h2{

font-size:24px;

}

.personnage img{

width:160px;

height:160px;

}

}

@media(max-width:600px){

.langues{

grid-template-columns:1fr;

}

.bulle{

max-width:95%;

font-size:16px;

}

.logoHTR{

width:70px;

height:70px;

}

#heure{

font-size:24px;

}

}