/* =====================================================
   RESPONSIVE.CSS
   VERSION 2
===================================================== */

/* ===========================
   ECRANS < 1400 px
=========================== */

@media (max-width:1400px){

.container{

    padding:0 25px;

}

.hero{

    gap:40px;

}

.hero h2{

    font-size:46px;

}

.section-title h2{

    font-size:38px;

}

}

/* ===========================
   TABLETTE
=========================== */

@media (max-width:1100px){

.topbar{

    padding:18px 25px;

}

.hero{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-actions{

    justify-content:center;

}

.hero-illustration{

    margin-top:40px;

}

.assistant-card{

    width:100%;

    max-width:450px;

}

.chat-container{

    margin:50px 20px;

}

.services-grid{

    grid-template-columns:repeat(2,1fr);

}

.official-grid{

    grid-template-columns:repeat(2,1fr);

}

.stats-section{

    grid-template-columns:repeat(2,1fr);

}

.footer-content{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-left{

    justify-content:center;

}

}

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

@media (max-width:768px){

.topbar{

    flex-direction:column;

    gap:20px;

    text-align:center;

}

.topbar-left{

    flex-direction:column;

}

.logo-circle{

    width:60px;

    height:60px;

    font-size:26px;

}

.logo-text h1{

    font-size:26px;

}

.hero{

    padding:20px;

    margin-top:30px;

}

.hero h2{

    font-size:34px;

}

.hero-text{

    font-size:18px;

}

.hero-actions{

    flex-direction:column;

}

.primary-btn,
.secondary-btn{

    width:100%;

}

.quick-actions{

    padding:20px;

}

.quick-grid{

    grid-template-columns:1fr;

}

.chat-window{

    height:420px;

}

.input-box{

    flex-direction:column;

}

.send-button{

    width:100%;

    height:60px;

}

.services-panel{

    padding:20px;

}

.services-grid{

    grid-template-columns:1fr;

}

.stats-section{

    grid-template-columns:1fr;

}

.official-links{

    padding:20px;

}

.official-grid{

    grid-template-columns:1fr;

}

.contact-section{

    padding:20px;

}

.contact-card{

    padding:45px 25px;

}

.contact-card h2{

    font-size:30px;

}

.contact-buttons{

    flex-direction:column;

}

.footer{

    padding:50px 25px;

}

.footer-content{

    gap:30px;

}

}/* =====================================================
   PETITS SMARTPHONES
===================================================== */

@media (max-width:480px){

body{

    font-size:15px;

}

.topbar{

    padding:15px;

}

.logo-circle{

    width:50px;

    height:50px;

    font-size:22px;

}

.logo-text h1{

    font-size:22px;

}

.logo-text p{

    font-size:14px;

}

.hero{

    margin:20px auto;

    padding:15px;

}

.hero h2{

    font-size:28px;

    line-height:1.25;

}

.hero-text{

    font-size:16px;

}

.hero-badge{

    font-size:13px;

    padding:7px 14px;

}

.assistant-avatar{

    width:120px;

    height:120px;

    font-size:60px;

}

.assistant-card{

    padding:20px;

}

.quick-actions h3{

    font-size:26px;

}

.suggestion{

    font-size:15px;

    padding:15px;

}

.chat-header{

    flex-direction:column;

    gap:12px;

    text-align:center;

}

.chat-title{

    font-size:20px;

}

.chat-window{

    height:360px;

    padding:18px;

}

#userInput{

    min-height:65px;

    font-size:15px;

}

.send-button{

    height:56px;

    font-size:24px;

}

.section-title h2{

    font-size:28px;

}

.section-title p{

    font-size:16px;

}

.service-card{

    padding:22px;

}

.service-icon{

    width:60px;

    height:60px;

    font-size:28px;

}

.service-card h4{

    font-size:20px;

}

.stat-card{

    padding:30px 15px;

}

.stat-card h2{

    font-size:36px;

}

.official-card{

    padding:22px;

}

.contact-card{

    padding:35px 20px;

}

.contact-card h2{

    font-size:26px;

}

.footer{

    padding:40px 20px;

}

.footer-text h3{

    font-size:22px;

}

}

/* =====================================================
   MODE PAYSAGE MOBILE
===================================================== */

@media (max-height:600px){

.hero{

    margin-top:20px;

}

.chat-window{

    height:280px;

}

}

/* =====================================================
   ECRANS XXL
===================================================== */

@media (min-width:1800px){

.container{

    max-width:1700px;

}

.hero h2{

    font-size:64px;

}

.hero-text{

    font-size:24px;

}

.chat-container{

    max-width:1500px;

}

}

/* =====================================================
   IMPRESSION
===================================================== */

@media print{

.topbar,
.hero-actions,
.quick-actions,
.chat-input-section,
.footer{

    display:none !important;

}

body{

    background:#fff;

    color:#000;

}

.chat-window{

    height:auto;

    overflow:visible;

}

}

/* =====================================================
   APPAREILS TACTILES
===================================================== */

@media (hover:none){

button:hover{

    transform:none;

}

.service-card:hover{

    transform:none;

}

.official-card:hover{

    transform:none;

}

}

/* =====================================================
   FIN RESPONSIVE.CSS
===================================================== */