/*============== sidebar ============ */
*{
    margin: 0%;
    padding: 0%;
}

.main-container{
    display: flex;
    height: 100vh;
}

.toiture{
    width: 20%;
    background-color: #4B9DA4;
    font-size: 25px;
}
.clime{
    width: 80%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background-color: rgb(215, 212, 212);
    overflow-y: auto;
}


/* Contenu du sidebar */


.picture img{
    width: 70%;
    height: auto;
}

.picture2 img{
    width: 20%;
    height: auto;
}
.perso{
    color: #C5FECD;
    margin-left: 1rem;
    margin-bottom: 1rem;
}

.plat i{
    color: white;
}


.plat span{
    color: white;
    margin-left: 1rem;
}


.phrase0 a{ 
   text-decoration: none;
    font-size: 25px;
    margin-left: 2rem;
    align-items: start;
    line-height: 55px;
    position: relative;
    z-index: 2;
    border-radius: 10px;
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 12px 16px;
}

.phrase0.active a,
.phrase0 a:hover{
    background-color: rgba(255, 255, 255, 0.18);
    color: #C5FECD;
}

.phrase0.active i,
.phrase0 a:hover i{
    color: #C5FECD;
}

.phrase9{
    padding-top: 50px;
    border-top: 1px solid #f3f4f6;
    margin-top: 90px;
    width: 100%;
    box-sizing: border-box;
}

.phrase9 form,
.phrase9 button{
    width: 100%;
}

.phrase9 button{
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 12px 16px;
    margin: 0;
    border: 0;
    background: transparent;
    color: white;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.phrase9 button:hover{
    background-color: rgba(255, 255, 255, 0.12);
}

.phrase9 span{
    flex: 1;
    margin: 0;
}


/*========= dashboard ===========*/


.topbar{
    display: flex;
    align-items: center;                                                                
    width: 100%;
    margin-bottom: 1rem;
    min-height: 72px;
    justify-content: space-between;
}

.titre{
    font-size: 25px;
}

.nb3 input{
    height: 40px;
    width: 500px;
    border-radius: 20px;
    font-size: 20px;
    text-align: center;
    border-radius: 8px;
    border:1px solid #dde3e8;
    background:#fcfcfc;
}

.nb3 i{
    font-size: 23px;
}

.nb4 i{
    font-size: 23px;
}

.nb4 span{
    font-size: 23px;
}

.nb4{
    gap: 4rem;
}


.stat1 i{
    font-size: 40px;
    color: #14b8b8;
    margin-top: 15px;
}

.stat2 i{
    font-size: 40px;
    color: rgb(239, 239, 10);
    margin-top: 15px;
}

.stat3 i{
    font-size: 40px;
    color: rgb(55, 189, 91);
    margin-top: 15px;
}

.stat4 i{
    font-size: 40px;
    color: rgb(171, 70, 154);
    margin-top: 15px;
}

.stat1 p{
    font-size: 20px;
}

.stat2 p{
    font-size: 20px;
}

.stat3 p{
    font-size: 20px;
}

.stat4 p{
    font-size: 20px;
}

.toggle-button{
    background: none;
    border: none;
    color: white;
    font-size: 25px;
    cursor: pointer;
    margin-left: 1rem;
}

.picture{
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
    justify-content:space-between;
}

.picture2{
    display: none;
}

@media screen and (max-width: 768px) {
    .picture2{
        display: flex;
        align-items: center;
        width: 100%;
        justify-content:space-between;
    }

    .nb400{
        display: none !important;
    }
    
}

.stat{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;

}
.stat1{
    background-color: white;
    font-size: 15px;
    line-height: 2.5rem;
    border-radius: 12px;
    text-align: center;
}
.stat2{
    background-color: white;
    font-size: 15px;
    line-height: 2.5rem;
     border-radius: 12px;
      text-align: center;
}
.stat3{
    background-color: white;
    font-size: 15px;
    line-height: 2.5rem;
     border-radius: 12px;
      text-align: center;
}
.stat4{
    background-color: white;
    font-size: 15px;
    line-height: 2.5rem;
     border-radius: 12px;
     text-align: center;
}
.cards-container {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    gap: 20px;
    margin-top: 20px;
    min-height: 420px;
    }
.cardf{
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06); 
    width: 100%;
    box-sizing: border-box;
         
}
.card2 {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    width: 100%;
    box-sizing: border-box;
}
.card-header {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}
.card-header2{
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    height: 70px;
}


.duck{
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin-top: 80px;
}
.card-title{
    font-size: 25px;
    color: #1f2937;
    width: 63%;
    margin-left: 1rem;
}
.card-title2{
    font-size: 25px;
    color: #1f2937;
    margin-left: 1rem;
    width: 50%;

}

/* Boutons 24H 7D 30D */
.btn-group {
    display: flex;
    gap: 8px;
    align-items: center;
    height: 80px;
    width: 35%;
    justify-content: center;
}
.btn {
    border: none;
    background: #f3f4f6;
    padding: 10px 10px;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
    color: #4b5563;
}
.btn.active {
    background: #14b8b8;
        /* Couleur teal comme sur ton image */
    color: white;
    width: 100px;
}
.btn-export {
    background: none;
    border: 1px solid #e5e7eb;
}
.stats {
    display: flex;
    font-size: 18px;
    color: #6b7280;
    width: 96%;
    justify-content: space-between;
    margin-left: 15px;
    margin-top: 24px;

}
.chart-wrap{
    position:relative;
    height:280px;
    margin:20px 18px 0;
}
.dashboard-chart-stats{
    margin-left:18px;
    width:calc(100% - 36px);
    margin-bottom:18px;
}
/* Recent Alerts */


.alert-item {
    display: flex;
    border-bottom: 1px solid #f3f4f6;
    gap: 30px;
    margin-left: 3rem;
}
.dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-top: 6px;
}
.dot.orange { 
    background: #f97316; 
}
.dot.blue {    
    background: #3b82f6; 
}
.dot.yellow { 
    background: #facc15; 
}
.alert-text { 
    font-size: 30px; 
    color: #1f2937; 
}
.alert-sub { 
    font-size: 18px; 
    color: #6b7280; 
}
.view-all { 
    color: #14b8b8; 
    font-size: 25px; 
    text-decoration: none;
    margin-right: 1rem;
}

@media(max-width:900px){
    .dashboard-stats{grid-template-columns:repeat(2,1fr)}
    .dashboard-cards{grid-template-columns:1fr}
    .card-title{font-size:20px}
    .btn-group{width:auto;flex-wrap:wrap;height:auto}
}
@media(max-width:600px){
    .dashboard-stats{grid-template-columns:1fr}
    .topbar{align-items:flex-start;flex-direction:column}
    .nb4{display:flex;align-items:center;gap:10px}
    .nb4 span{font-size:16px}
    .card-header{align-items:flex-start;flex-direction:column;gap:10px}
    .chart-wrap{height:220px;margin-left:8px;margin-right:8px}
    .dashboard-chart-stats{align-items:flex-start;flex-direction:column;gap:8px}
}



/*=========gestion clients==========*/

.topbar4{
    display: flex;
    align-items: center;                                                                
    width: 100%;
    margin-bottom: 1rem;
    height: 16%;
    border-radius: 12px;
    justify-content: center;
    justify-content: space-between;
}
.nb10 i {
    font-size: 23px;
}
.nb10 {
    display: flex;
    gap: 2rem;
    margin-right: 1rem;
}

.titre{
    margin-left: 1rem;
}

.null{
    display: flex;
    gap: 859px;

}

.nb12{
    font-size: 25px;
    margin-left: 12px;
}

.nb13 button{
    font-size: 25px;
    width: 140%;
    height: 40px;
    border-radius: 10px;
    background-color: #4B9DA4;
    color: white;
}

.nb32{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 2.8rem;
}

.total{
    background-color: white;
    text-align: center;
    border-radius: 15px;
     line-height: 2.5rem;
}

.total i{
    font-size: 40px;
    color: rgb(171, 70, 154);
    margin-top: 10px;
}


.f1{
    background-color: white;
    text-align: center;
    border-radius: 15px;
     line-height: 2.8rem;
}

.f2{
    background-color: white;
    text-align: center;
    border-radius: 15px;
     line-height: 2.8rem;
}

.f3{
    background-color: white;
    text-align: center;
    border-radius: 15px;
     line-height: 2.8rem;
}

.total p{
    font-size: 20px;
}

.f1 p{
    font-size: 20px;
}

.f2 p{
    font-size: 20px;
}

.f3 p{
    font-size: 20px;
}

.f1 span{
    font-size: 30px;
    margin-top: 10px;
    color: #b97a0e;
}

.f2 span{
    font-size: 30px;
    margin-top: 10px;
    color: #b10fbd;
}

.f3 span{
    font-size: 30px;
    margin-top: 10px;
    color: #25b728;
}

.garr{
    display: flex;
    align-items: center;
    margin-top: 2rem;
    gap: 862px;
}

.g1{
    font-size: 20px;
    margin-left: 14px;
}

.g2{
    display: flex;
    align-items: center;
    width: 30%;
}


.g2 input{
    width: 500px;
    height: 40px;
    font-size: 20px;
    display: flex;
    text-align: center;
    border-radius: 10px;
    background-color: rgb(233, 230, 230);
}

.nb30{
    background-color: white;
    margin-top: 2rem;
    height: 50%;
    border-radius: 10px;
}


.deff{
    margin-top: 2rem;
    display: flex;
    font-size: 25px;
    justify-content: center;
    gap: 125px;
    text-align: center;
    width: 99%;
    
}

.e1{
    display: grid;
    justify-content: center;
    gap: 1.5rem;
    
}

.e1 button{
    color: white;
    background-color: red;
    width: 100px;
    border: none;
    border-radius: 10px;
}


/*=========gestion des compte==========*/

.topbar2{
    display: flex;
    align-items: center;                                                                
    width: 100%;
    height: 16%;
    justify-content: space-between;
    margin-top: -15px;
}

.nb6 input{
    border-radius: 8px;
    border:1px solid #dde3e8;
    background:#fcfcfc;
    padding-inline: 100px;
    height: 30px;
}
.nb{
    display: flex;
    align-items: center;
    
    gap: 100px;
}

.nb5{ display: flex;
    gap: 1rem;
}


.nb5 i{ 
    font-size: 25px;
}

.nb5 span{ 
    font-size: 30px;
}

.content-admin{
    display: grid;
}


.grid-2{
    display:flex;
    grid-template-columns:1fr 1fr;
    gap:20px;
}
.mt-20{margin-top:20px}
.card{
    background:#fff;
    border-radius:14px;
    padding:20px;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
    width: 97%;
    align-items: center;
    justify-content: center;

}
.card-title{
    font-size: 30px;
}
.content-admin label{
    display: grid;
    font-size:15px;
    font-weight:600;
    margin-top: 5px;

}
.content-admin input,.content-admin select{
    width:95%;
    padding:10px;
    border:1px solid #dde3e8;
    border-radius:8px;
    margin-top:4px;
    background:#fcfcfc;
}
.hint{
    font-size:18px;
    color:#888;
}
.code-box{
    background:#f6f8f9;
    border:1px solid #dde3e8;
    border-radius:8px;
    padding:10px;
    font-size:13px;
    margin-top:4px;
}
.code-box a{
    color:#2DB5A3;
    font-size:12px;
    text-decoration:none;
    display:block;
}
.btn-green{
    width:100%;
    margin-top:14px;
    background:#4B9DA4;
    color:#fff;border:none;
    padding:11px;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
}
.btn-light{
    border:1px solid #dde3e8;
    background:#fff;
    padding:6px 12px;
    border-radius:8px;
    font-size:12px;
    cursor:pointer;
}
.table-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
table{
    width:100%;
    margin-top:12px
}
th{
    font-size:20px;
    color:black;
    text-align:left;
    padding:10px;
    border-bottom:1px solid #eee;
}
td{
    padding:12px 10px;
    font-size:14px;
    border-bottom:1px solid #f0f0f0;
}
.u{
    display:flex;
    gap:10px;
    align-items:center;
}
.u b{
    font-size:13px;
    display:block;
}
.u i{
    font-size:11px;
    color:#888;
    font-style:normal;
}
.av{
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:700;
    font-size:12px;
}
.av1{
    background:#1e8a5c
}
.av2{background:#1e5a8a
}
.av3{
    background:#e67e22
}
.av4{
    background:#9ca3af
}
.b{
    padding:4px 10px;
    border-radius:20px;
    font-size:11px
    ;font-weight:600
}
.b-blue{
    background:#dbeafe;
    color:#1e40af
}
.b-cyan{
    background:#cffafe;
    color:#155e75
}
.b-green{background:#dcfce7;
    color:#166534
}
.b-red{
    background:#fee2e2;
    color:#991b1b
}
.b-gray{background:#f3f4f6;
    color:#6b7280
}
.acts{
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
}
.inline-form{display:inline-flex}
.account-filters{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:16px;
}
.account-filters input,
.account-filters select{
    width:auto;
    flex:1;
    margin:0;
}
.accounts-table-wrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}
.accounts-table-wrap table{
    min-width:760px;
}
.accounts-table-wrap td:last-child{
    min-width:260px;
}
.flash-success,
.flash-error{
    padding:10px 14px;
    border-radius:8px;
    margin-bottom:14px;
}
.flash-success{background:#dcfce7;color:#166534}
.flash-error{background:#fee2e2;color:#991b1b}
.flash-error ul{margin:0;padding-left:20px}
/*=========facturation==========*/

.topbar1{
    margin-top: 1rem;
    display: flex;
    align-items: center;                                                                
    width: 100%;
    margin-bottom: 0px;
    height: 10%;
    border-radius: 12px; 
    gap: 725px;
}

.table-wrap button{
    border-radius: 4px;
}

.nb400{
    display: flex;
    gap: 2rem;
    align-items: center;

}


.nb400 button{
    width: 350px;
    height: 35px;
    border-radius: 8px;
    color: white;
    background:#4B9DA4;
    font-size: 20px;
}
.btn-export-csv{display:inline-block;text-decoration:none;border-radius:8px;padding:9px 14px;background:#4B9DA4;color:#fff;font-size:14px}
.billing-create details{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:12px}
.billing-create summary{display:inline-block;list-style:none;width:auto;padding:10px 16px}
.billing-create summary::-webkit-details-marker{display:none}
.billing-form{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:14px}
.billing-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600}
.billing-form input,.billing-form select{box-sizing:border-box;width:100%;padding:9px;border:1px solid #dde3e8;border-radius:8px}
.billing-form .btn-green{padding:9px 12px}
.search-box button{border:0;background:#4B9DA4;color:#fff;border-radius:6px;padding:7px;cursor:pointer}
.billing-actions{display:flex;gap:6px;white-space:nowrap}
.billing-actions form{display:inline-flex}

.nb400 i{
    font-size: 30px;
}

.airgate-analytics{
    font-family:Inter,system-ui,sans-serif;
    background:#f7f8fa;
    padding:35px;
    border-radius:16px;color:#111827;
    height: 800px;
    margin-top: 40px;
}
.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;margin-bottom:24px;
}
.stat-card{
    background:#fff;
    border-radius:12px;
    padding:16px 18px;
    box-shadow:0 1px 2px rgba(0,0,0,.05);
    border:1px solid #eef0f3;
}
.stat-head{
    display:flex;justify-content:space-between;font-size:13px;color:#6b7280;margin-bottom:8px}
.icon-box{
    background:#eef6ee;padding:2px 6px;border-radius:6px;font-size:11px}
.stat-card h2{
    font-size:22px;margin:0;font-weight:700}
.growth{
    font-size:12px;
    margin-top:4px;
}
.growth.up{color:#15803d}
.growth.muted{color:#b45309}

.section-head{
    display:flex;justify-content:space-between;align-items:center;margin:18px 0 12px}
.section-head h3{
    font-size:18px;font-weight:700;margin:0}
.search-box{
    background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:8px 12px;display:flex;gap:8px;align-items:center;min-width:260px}
.search-box input{
    border:0;outline:0;width:100%;font-size:14px}

.filters-bar{
    background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.filter-group{
    display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.filter-btn{
    background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:6px 10px;font-size:12px;cursor:pointer}
.clear-btn{
    background:transparent;border:0;font-size:13px;cursor:pointer;color:#374151}

.table-wrap{
    background:#fff;border-radius:12px;border:1px solid #eef0f3;overflow:auto;margin-top: 40px;}
table{
    width:100%;border-collapse:collapse;font-size:13px}
thead th{
    color:#6b7280;font-weight:500;text-align:left;padding:12px;border-bottom:1px solid #eef0f3;white-space:nowrap}
tbody td{
    padding:12px;border-bottom:1px solid #f3f4f6;vertical-align:middle}
.bold{
    font-weight:600}
.client{
    display:flex;gap:8px;align-items:center}.client img{border-radius:50%}.client small{color:#6b7280}
.badge{
    padding:4px 10px;border-radius:999px;font-size:11px;color:#fff;font-weight:600}
.badge.blue{
    background:#25b728}.badge.blue-light{background:#b97a0e;color:#fff}.badge.gray{background:#e5e7eb;color:#374151}
.status{
    padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600}
.status.paid{
    background:#dcfce7;color:#166534}.status.pending{background:#fef3c7;color:#92400e}.status.no-charge{background:#f3f4f6;color:#6b7280}
.pay{
    display:flex;gap:4px;align-items:center}
.z1{
    background-color: #25b728;
    color: white;
}

.z2{
    background-color: red;
    color: white;
}

@media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr)} .section-head{flex-direction:column;align-items:stretch;gap:10px}}
@media(max-width:700px){.billing-form{grid-template-columns:1fr}.billing-actions{flex-wrap:wrap}.nb400{flex-wrap:wrap}.airgate-analytics{height:auto;padding:16px}}

/*=========gestion forfait==========*/

.topbar3{
    display: flex;
    align-items: center;                                                                
    width: 100%;
    margin-bottom: 1rem;
    height: 12%;
    border-radius: 12px;
}

.forfait-content{
  width:99%;
  min-height:80%;
  padding:22px 8px;
  
  font-family:Inter, sans-serif;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.f-top{
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.f-stat{
    background:#fff;border:1px solid #e6e9e2;border-radius:10px;padding:35px 18px;display:flex;gap:14px;align-items:center;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.f-ico{
    width:36px;height:36px;border:1px solid #e0e0e0;border-radius:8px;display:grid;place-items:center}
.f-stat small{
    font-size:18px;color:#5f6368;display:block}
.f-stat h2{
    font-size:30px;font-weight:800;margin:10px 0;line-height:1}
.f-stat span{
    font-size:11px;color:#5f6368}.f-stat span.green{color:#2e7d32}

.f-header{
    display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.f-header h3{
    font-size:20px;font-weight:800;margin:0}
.btn-new{
    background:#2ba8b0;color:#fff;border:0;padding:9px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer}

.f-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.f-card{gap: 32px;
    background:#fff;border:1px solid #e6e9e2;border-radius:14px;padding:16px;position:relative;box-shadow:0 2px 10px rgba(0,0,0,.05);display:flex;flex-direction:column;align-items:center; text-align:center}
.f-tag{
    position:absolute;left:12px;top:12px;font-size:20px;font-weight:700;color:#c9a86a;letter-spacing:0.5px}
.f-tag.orange{color:#f9a825}
.f-tag.violet{
    color:#7c4dff;font-size: 20px}.f-tag.green{color:#81c784;font-size: 20px;}
.f-circle{
    width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:20px;color:#fff;margin-top:10px}
.f-circle.orange{
    background:#f9a825}.f-circle.purple{background:#673ab7}.f-circle.lightgreen{background:#9ccc65}
.f-time{
    font-size:22px;font-weight:900;margin:10px 0 4px}
.f-price{
    font-size:18px;font-weight:600;color:#2ba8b0}
.f-speed{
    font-size:12px;color:#5f6368;margin:8px 0}
.f-list{
    width:100%;text-align:left;margin:10px 0;border-top:1px solid #f1f3f4;padding-top:10px}
.f-list p{
    font-size:20px;display:flex;gap:6px;align-items:center;justify-content: center;}
.f-actions{
    display:flex;gap:10px;width:100%;margin-top:12px}
.f-actions form{display:flex;flex:1}
.f-actions a,
.f-actions button{display:flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}
.f-actions button{
    flex:1;padding:14px 0;border-radius:6px;border:0;font-size:11px;font-weight:600;cursor:pointer}
.f-actions a{flex:1;padding:14px 0;border-radius:6px;font-size:11px;font-weight:600;background:#2ba8b0;color:#fff}
.f-actions .mod{
    background:#2ba8b0;color:#fff}.f-actions .sup{background:#e6f4ea;color:#e65100}

.plan-details{position:relative}
.plan-details summary{list-style:none}
.plan-details summary::-webkit-details-marker{display:none}
.plan-form{position:absolute;right:0;top:48px;z-index:3;width:300px;background:#fff;border:1px solid #e6e9e2;border-radius:10px;padding:16px;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.plan-form h3{margin:0 0 10px}
.plan-form label{display:flex;flex-direction:column;gap:4px;margin-top:8px;font-size:12px;font-weight:600}
.plan-form input{box-sizing:border-box;width:100%;padding:8px;border:1px solid #dde3e8;border-radius:6px}
.plan-form .btn-new{margin-top:12px}

.f-footer{margin-top:10px;font-size:11.5px;color:#5f6368;border-top:1px solid #e9eef2;padding-top:10px}

@media(max-width:1100px){.f-grid{grid-template-columns:1fr 1fr}.f-top{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:700px){.f-grid{grid-template-columns:1fr}.f-top{grid-template-columns:1fr}}


/*=========notification==========*/

.topbar78{
    display: flex;
    align-items: center;                                                                
    width: 100%;
    margin-bottom: 1rem;
    height: 16%;
    border-radius: 12px;
    justify-content: space-between;
}


.user0{ 
    display: flex;
    align-items: center;
    gap: 1rem;

}

.user0 i{ 
    font-size: 25px;

}

.user{ 
    border-radius: 50%;
    height: 60px;
    width: 60px;
    background-color: #4B9DA4;
    font-size: 30px;
    text-align: center;
}


.user span{ 
    display: block;
    color: white;
    margin-top: 10px;

}


.be1{ 
    display: flex;
    gap: 1rem;
    margin-left: 1058px;
}

.notif-container{ 
    grid-template-columns: repeat(1, 1fr);
    max-width:100%;
    
}


.notif-filters{
    width:100%; 
     background:#fff;
      border-radius:12px 12px 0px 0px;
      height: 70px;  
      display:flex; 
       align-items:center; 
       box-shadow:0 1px 4px rgba(0,0,0,.06); 
}
.filter{
    border:1px solid #e5e7eb;
     background:#f3f4f6;
      padding:10px 14px; 
      border-radius:8px; 
      font-size:12px; 
      cursor:pointer; 
      white-space:nowrap
}
.notif-filters a.filter{
    text-decoration:none;color:#374151;display:inline-block}
.notif-filters form{
    display:inline-block}
.notif-item.is-read{
    opacity:.72}
.notification-actions{
    display:flex;align-items:center;gap:8px;white-space:nowrap}
.notification-actions form{
    display:inline-flex}
.read-label{
    font-size:12px;color:#15803d;font-weight:600}
.empty-state{
    padding:30px;text-align:center;color:#6b7280}
.filter.active{
    background:#4B9DA4;
     color:#fff; 
     border-color:#4B9DA4;
}


.btn-mark-all{
    background:#4B9DA4;
     color:#fff; 
     border:none;
      padding:10px 14px;
      border-radius:8px;
       font-size:15px; 
       font-weight:600; 
       cursor:pointer;
        white-space:nowrap}

.notif-list{
    width:100%;
     background:#fff;
      border-radius:0px 0px 12px 12px;
       height: 680px; box-shadow:0 1px 4px rgba(0,0,0,.06); 
       overflow:hidden;
       display: grid;
}

/* GRID QUI PREND TOUT L'ECRAN */
.notif-item{
    display:grid;
    grid-template-columns:44px 1fr auto;
    align-items:center;
    gap:14px;
    padding:16px 18px;
    border-bottom:1px solid #f1f5f9;
    position:relative;
}
.notif-item:last-child{
    border-bottom:none
}
.notif-item::before{
    content:""; 
    position:absolute;
     left:0; top:0; 
     bottom:0; width:4px; 
     border-radius:0 4px 4px 0;
}
.border-red::before{
    background:#d32f2f;
}
.border-orange::before{
    background:#ff9800;
}
.border-blue::before{
    background:#1565c0;
}
.border-green::before{
    background:#2e7d32;
}

.icon{
    width:80px;
     height:80px;
      border-radius:50%; 
      display:flex; 
      align-items:center;
       justify-content:center;
        font-weight:700; 
        flex-shrink:0;
        font-size: 45px;
}
.bg-red{
    background:#fee2e2; color:#b91c1c}
.bg-orange{
    background:#ffedd5; color:#c2410c}
.bg-blue{
    background:#dbeafe; color:#1d4ed8}
.bg-green{
    background:#dcfce7; color:#15803d}

.content b{
    display:block; 
    font-size:30px;
    color:#111827;
    margin: 2px 50px;
}

.content p{
    display:block;
     font-size:20px;
      color:#4b5563; 
      margin:2px 50px;
}

.content small{
    display:block; 
    font-size:18px; 
    color:#9ca3af; 
    margin-top:4px;
     margin:2px 50px;
}

.btn-outline, .btn-green{
    white-space:nowrap;
     height:fit-content; cursor:pointer; 
     flex-shrink:0;
}
.btn-outline{
    border:1px solid #d1d5db; 
    background:#fff; 
    color:#374151; 
    padding:12px 100px;
     border-radius:8px;
      font-size:18px;
}
.btn-outline.gray{
    border-color:#ccc;
     color:#333;
}
.btn-green{
    background:#4B9DA4;
     color:#fff; 
     border:none;
      padding:12px 100px; 
      border-radius:8px; 
      font-size:15px; 
      font-weight:600;
}

/*=========parametre==========*/

.topbar6{
    display: flex;
    align-items: center;                                                                
    width: 100%;
    margin-bottom: 1rem;
    height: 16%;
    border-radius: 12px;
    justify-content: space-between;
}

.fake button{
    font-size: 30px;
    margin-right: 10px;
    
    background-color: rgb(215, 212, 212);
}


.swat{
    grid-template-columns: repeat(1, 1fr);
    display: grid;
    gap: 2.2rem;
    width: 100%;
    height: 800px;
    
}

.wifi2{
    background-color: white;
    border-radius: 10px;
    line-height: 2.2rem;
    height: 220px;
    box-shadow: 0 4px 12px gray;
}

.wifi2 p{
    margin-left: 4.7rem;
    font-size: 20px; 
}

.wifi2 input{
    width: 60%;
    margin-left: 4.7rem;
    height: 28px; 
    font-size: 18px; 
    text-align: center;
    border-radius: 8px;
    border:1px solid #dde3e8;
    background:#fcfcfc;
}

.limite{
    background-color: white; 
    border-radius: 10px;
     line-height: 2.5rem;
     height: 170px;
     box-shadow: 0 4px 12px gray;
}

.limite p{
    margin-left: 4.7rem;
    font-size: 20px; 
}

.limite input{
    margin-left: 4.7rem;
    width: 60%;
    height: 28px;
    border-radius: 8px;
    border:1px solid #dde3e8;
    background:#fcfcfc;
}


.api{
    background-color: white;
    border-radius: 10px; 
    line-height: 2rem;
    height: 210px;
    box-shadow: 0 4px 12px gray;
}

.api p{
    margin-left: 4.7rem; 
    font-size: 20px;
}


.api input{
    margin-left: 4.7rem;
    width: 60%;
    height: 28px; 
    text-align: center;
    font-size: 18px;
    border-radius: 8px;
    border:1px solid #dde3e8;
    background:#fcfcfc;
    
}



.stop{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    
}

.stop button{
    height: 50px;
}

.up button{
    width: 450px;
    font-size: 20px;
    border-radius: 10px;
    border: none;
    background-color: white;
    color: #4B9DA4;
    box-shadow: 0 4px 12px gray;
}

.save button{
    width: 700px;
    font-size: 20px;
    border-radius: 10px;
    border: none;
    background-color: #4B9DA4;
    color: white;
    box-shadow: 0 4px 12px grey;
}

.domingo1{
    display: flex;
    align-items: center;
    margin-left: 1.3rem;
    margin-top: 7px;
    gap: 30px;
    
}

.domingo1 i{
    font-size: 33px;
    color: #4B9DA4;
}

.domingo1 h2{
    font-size: 30px;
}

.domingo2{
    display: flex;
    align-items: center;
    margin-left: 1rem;
    margin-top: 7px;
    gap: 25px;
}

.domingo2 i{
    font-size: 30px;
    color: #4B9DA4;
}

.domingo2 h2{
    font-size: 30px;
}

.domingo{
     display: flex;
    align-items: center;
    margin-left: 1rem;
    margin-top: 7px;
    gap: 25px;
}

.domingo i{
    font-size: 33px;
    color: #4B9DA4;
}

.domingo h2{
    font-size: 30px;
}

.settings-form{display:flex;flex-direction:column;gap:18px;width:100%}
.settings-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.settings-heading{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.settings-heading i{color:#4B9DA4;font-size:25px;margin-top:3px}
.settings-heading h2{font-size:22px;margin:0 0 4px}
.settings-heading p{font-size:13px;color:#6b7280;margin:0}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.settings-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.settings-card label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:#374151}
.settings-card input{box-sizing:border-box;width:100%;height:42px;margin:0;padding:9px 12px;border:1px solid #d7dee5;border-radius:7px;background:#fcfcfc}
.settings-single{max-width:420px}
.settings-help{font-size:12px;color:#6b7280;margin:12px 0 0}
.settings-actions{display:flex;justify-content:space-between;align-items:center;gap:16px}
.settings-actions button{height:44px;border:0;border-radius:8px;padding:0 22px;font-size:14px;cursor:pointer}
.settings-reset{background:#fff;color:#4B9DA4;border:1px solid #d7dee5!important}
.settings-save{background:#4B9DA4;color:#fff;min-width:300px}


/*=========statistique==========*/

.topbar8{
    display: flex;
    align-items: center;                                                                
    width: 100%;
    margin-bottom: 1rem;
    height: 16%;
    border-radius: 12px;
    justify-content: space-between;
}
.btn-export-pdf{
    border:0;
    border-radius:8px;
    padding:11px 18px;
    background:#4B9DA4;
    color:#fff;
    font-size:14px;
    cursor:pointer;
}
.btn-export-pdf:hover{background:#367f86}

.nb24{
    display: flex;
    gap: 1rem;
    align-items: center;
}




.icon2 button{
    width: 500px;
    height: 40px;
    border-radius: 8px;
    font-size: 20px;
    color: white;
    background-color: #4B9DA4;
    margin-right: 20px;
}


/* REMPLIT 100% DE L'ESPACE BLANC DE TA PAGE */
.airgate-analytique-content{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:10px 0 30px 0;
  font-family:Inter, sans-serif;
}
.stats-top{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.main-row{
    display:grid;grid-template-columns:1.6fr 1fr;gap:18px;align-items:start}

.a-card{
    background:#fff;border-radius:16px;padding:30px 20px;border:1px solid #e9eef2;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.a-card.big{
    min-height:380px}
.a-icon{
    width:26px;height:26px;background:#e6f4ea;border-radius:50%;display:grid;place-items:center;color:#137333;font-size:13px;margin-bottom:8px}
.a-label{
    font-size:12px;color:#5f6368} .a-value{font-size:30px;font-weight:800;margin:4px 0;letter-spacing:-1px}
.a-trend{
    font-size:12px}
.a-trend.up{color:#137333}.a-trend.neutral{color:#5f6368}

.a-card-header{
    display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.a-card-header h3{
    font-size:23px;font-weight:900;margin:0}
.a-card-header .info{
    width:18px;height:18px;border:1px solid #ddd;border-radius:50%;display:grid;place-items:center;font-size:11px}

.graph{
    position:relative;height:220px;margin-top:100px}
.graph svg{
    position:absolute;left:30px;right:0;top:0;bottom:25px;width:calc(100% - 30px);height:calc(100% - 25px)}
.graph .y{
    position:absolute;left:0;top:0;bottom:25px;display:flex;flex-direction:column;justify-content:space-between;font-size:11px;color:#888}
.graph .x{
    display:flex;justify-content:space-between;margin-left:30px;font-size:15px;color:#888;padding-top:10px}

.moy{
    font-size:18px;color:#888;margin-top:30px}

.right-col{
    display:flex;flex-direction:column;gap:18px}
.u-row{
    display:flex;align-items:center;gap:8px;margin:8px 0}
.av{
    width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:700;color:#fff}
.c1{
    background:#2e7d32}.c2{background:#a8d5a2;color:#1b3a1d}.c3{background:#f8bbd0;color:#6a1b1b}.c4{background:#90caf9;color:#0d2a54}.c5{background:#ffe082;color:#5d4037}
.u-name{
    font-size:12px;width:95px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{
    flex:1;height:9px;background:#eef2f5;border-radius:99px;overflow:hidden}
.bar div{
    height:100%;background:#2e7d32}
.u-val{
    font-size:11px;padding:2px 6px;border-radius:99px;background:#eef2f5}
.u-val.active{
    background:#2e7d32;color:#fff}

.pie-box{
    display:flex;align-items:center;gap:16px}
.pie{
    width:150px;height:150px;border-radius:50%;background:conic-gradient(#1b5e20 0 126deg, #43a047 126deg 252deg, #a5d6a7 252deg 360deg);position:relative}
.legend p{
    font-size:11.5px;margin:6px 0;display:flex;gap:6px;justify-content:space-between}
.dot{
    width:7px;height:7px;border-radius:50%;display:inline-block}.d1{background:#1b5e20}.d2{background:#43a047}.d3{background:#a5d6a7}
.legend em{
    color:#888;font-style:normal}

/* RESPONSIVE */
@media(max-width:1100px){.main-row{grid-template-columns:1fr} .stats-top{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:700px){.stats-top{grid-template-columns:1fr}}
@media(max-width:900px){.settings-grid-three{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.settings-grid,.settings-grid-three{grid-template-columns:1fr}.settings-actions{align-items:stretch;flex-direction:column}.settings-save{width:100%;min-width:0}.settings-reset{width:100%}}
@media print{
    .toiture,.btn-export-pdf{display:none!important}
    .clime{width:100%;background:#fff;padding:0}
    .airgate-analytique-content{padding:0}
}


/*=========gestionwifi==========*/

.topbar100{
    display: flex;
    align-items: center;                                                                
    width: 100%;
    min-height: 84px;
    margin-bottom: 18px;
    justify-content: space-between;
}

.speed{
   gap: 1rem; 
   display: flex;
   align-items: center;
   margin-right: 20px;
}

.nb20{
   gap: 1rem; 
   display: flex;
}

.nb20 i{
   font-size: 25px;
}

.tik{
    border-radius: 50%;
    background-color: #4B9DA4;
    height: 60px;
    width: 60px;
    color: white;
    text-align: center;
    font-size: 30px;
    
}

.tik span{
    display: grid;
    margin-top: 13px;
    
}

/* CONTENEUR QUI REMPLIT TON ESPACE GESTION WIFI */
.wifi-content{
        width:100%;
        display:flex;
        flex-direction:column;
        gap:22px;
        font-family:Inter, sans-serif;
}
.stats-wifi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.w-card{background:#fff;border:1px solid #e9eef2;border-radius:14px;padding:18px;display:flex;gap:14px;align-items:flex-start;box-shadow:0 2px 8px rgba(0,0,0,.04);min-height:82px}
.w-icon{width:32px;height:32px;border-radius:8px;background:#f1f5f9;display:grid;place-items:center;font-size:16px}
.w-card b{font-size:12px;color:#202124;display:block}
.w-card h2{font-size:20px;font-weight:800;margin:2px 0;letter-spacing:-0.5px}
.w-card small{font-size:11px;color:#5f6368}

.table-header{display:flex;justify-content:space-between;align-items:center;margin-top:4px;flex-wrap:wrap;gap:16px}
.table-header h3{font-size:26px;font-weight:600;margin:0}
.right-actions{display:flex;gap:10px;align-items:center}
.update-badge{font-size:18px;background:#fff;border:1px solid #e0e0e0;padding:5px 10px;border-radius:20px;color:#5f6368}
.btn-add{background:#2ba8b0;color:#fff;border:0;padding:14px 20px;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer}
.modem-form{background:#fff;border:1px solid #e9eef2;border-radius:14px;padding:18px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.modem-form h3{margin-bottom:12px}
.modem-form-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:14px}
.modem-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:#374151}
.modem-form input{width:100%;box-sizing:border-box;padding:9px;border:1px solid #dde3e8;border-radius:8px}
.modem-form .btn-light{margin-left:8px}
.statut.blocked{background:#fee2e2;color:#b91c1c;border:1px solid #fecaca}
.actions form{display:inline-flex}
.empty-state{padding:30px;text-align:center;color:#6b7280}

.modem-table{background:#fff;border:1px solid #e9eef2;border-radius:14px;overflow-x:auto;box-shadow:0 2px 12px rgba(0,0,0,.05)}
.t-head{display:grid;grid-template-columns:minmax(210px,1.6fr) 1fr 1fr 1fr .8fr minmax(160px,1.2fr);gap:14px;min-width:960px;padding:12px 18px;background:#f8f9fa;font-size:11px;color:#5f6368;font-weight:600;text-transform:uppercase}
.t-row{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 0.7fr 1.1fr;gap:10px;padding:14px 18px;border-top:1px solid #f1f3f4;align-items:center}
.t-row{grid-template-columns:minmax(210px,1.6fr) 1fr 1fr 1fr .8fr minmax(160px,1.2fr);min-width:960px;gap:14px}
.appareil{display:flex;gap:10px;align-items:center}
.ic{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;font-size:18px}
.ic.blue{background:#e3f2fd}.ic.purple{background:#ede7f6}.ic.orange{background:#fff3e0}
.appareil b{font-size:12.5px;display:block}.appareil small{font-size:10.5px;color:#5f6368}
.ip{font-size:13px;font-weight:500}
.data b,.bande b{font-size:13px;display:block}.data small,.bande small{font-size:10px;color:#5f6368}
.statut{font-size:11px;padding:4px 10px;border-radius:20px;background:#e6f4ea;color:#137333;font-weight:600}
.statut.online{border:1px solid #c8e6c9}
.actions{display:flex;gap:6px}
.btn-block{background:#fff;border:1px solid #e0e0e0;border-radius:20px;padding:5px 10px;font-size:11px;cursor:pointer}
.btn-del{background:#fff1f1;border:1px solid #ffcdd2;border-radius:20px;padding:5px 10px;font-size:11px;cursor:pointer;color:#c62828}

@media(max-width:1100px){.t-head{display:none}.t-row{grid-template-columns:1fr 1fr;min-width:0}.stats-wifi{grid-template-columns:1fr 1fr}.modem-form-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.toiture{width:72px}.toiture .plat span,.toiture .perso h2{display:none}.phrase0 a{margin-left:0;padding:12px 20px}.clime{width:calc(100% - 72px);padding:12px}.stats-wifi{grid-template-columns:1fr}.topbar100{min-height:64px}.speed{display:none}.table-header h3{font-size:22px}.right-actions{width:100%;flex-wrap:wrap}.modem-form-grid{grid-template-columns:1fr}.t-row{grid-template-columns:1fr;min-width:0}.actions{flex-wrap:wrap}}



/*=========Acheter==========*/

body{
     background-color: rgb(215, 212, 212);
}

.topbar24{
     margin-left: 5px;
     display: flex;
     justify-content: space-between;

}

.topbar24 a{
    margin-right: 2rem;
    font-size: 20px;
    text-decoration: none;
    margin-top: 2rem;
     
}

.titre{
     margin-top: 1rem;
}

.week0{
    display: grid;
    grid-template-columns: repeat(2, 2fr);
    gap: 2.5rem;
    width: 30%;
   margin-left: 1rem;
}



.week2{
    background-color: white;
    text-align: center;
    border-radius: 10px;
    padding: 35px;
    display: grid;
    gap: 5px;
    font-size: 20px;
}

.pointe99{
    display: grid;
    gap: 1.5rem;
}

.topbar99 input{
    border-radius: 8px;
    text-align: center;
    width: 30%;
    height: 30px;
    font-size: 20px;
}

.topbar99 {
    display: flex;
    justify-content: space-between;
    width: 97%;
    margin-left: 1rem;
    align-items: center;
}

.topbar99 h2 {
    font-size: 35px;
}

.week3{
     grid-template-columns: repeat(3, 1fr);
     width: 98%;
    display: grid;
     gap: 2.5rem;
    margin-left: 1rem;
}

.week{
    background-color: white;
     width: 100%;
     height: 525px;
    text-align: center;
    border-radius: 30px;
    
}
    
.pawa{
    display: grid;
    gap: 1.7rem;
    margin-top: 10px;
    justify-content: center;
}

.pawa button{
    width: 300px;
    height: 30px;
    background-color: #C5FECD;
    font-size: 15px;
    border-radius: 8px;
}

.pawa select{
    font-size: 15px;
}

.pawa p{
    font-size: 15px;
}

.pawa h2{
    color: #4B9DA4;
}

.type1{
    font-size: 25px;
    margin-right: 430px;
    margin-top: 1rem;
    color: #b97a0e;
}

.type2{
    font-size: 25px;
    margin-right: 430px;
    margin-top: 1rem;
    color: #b10fbd;
}

.type3{
    font-size: 25px;
    margin-right: 430px;
    margin-top: 1rem;
    color: #25b728;
}

.g-circle1{
    border-radius: 50%;
    background-color: #b97a0e;
    height: 50px;
    width: 50px;
    margin-left: 126px;
    font-size: 25px;
}

.g-circle1 span{
    display: grid;
    margin-top: 10px;
}

.g-circle2 span{
    display: grid;
    margin-top: 10px;
}

.g-circle3 span{
    display: grid;
    margin-top: 10px;
}

.g-circle2{
    border-radius: 50%;
    background-color: #b10fbd;
    height: 50px;
    width: 50px;
    margin-left: 126px;
    font-size: 25px;
}

.g-circle3{
    border-radius: 50%;
    background-color: #25b728;
    height: 50px;
    width: 50px;
    margin-left: 126px;
    font-size: 25px;
}

/* Global responsive overrides */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
}

button, input, select, textarea {
    max-width: 100%;
}

@media (max-width: 1100px) {
    .stat,
    .stats-grid,
    .f-top,
    .settings-grid-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-2,
    .billing-form,
    .modem-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-2 {
        display: grid;
    }

    .nb3 input {
        width: min(500px, 45vw);
    }

    .null {
        gap: 2rem;
    }
}

@media (max-width: 700px) {
    .main-container {
        min-height: 100vh;
        height: auto;
    }

    .toiture {
        width: 72px;
        flex: 0 0 72px;
        font-size: 16px;
    }

    .toiture .plat span,
    .toiture .perso h2 {
        display: none;
    }

    .picture img {
        width: 90%;
    }

    .perso {
        margin-left: 0;
        text-align: center;
    }

    .phrase0 a {
        display: flex;
        justify-content: center;
        margin-left: 0;
        padding: 12px 8px;
        font-size: 18px;
        line-height: 1.5;
    }

    .phrase9 {
        margin-top: 2rem;
        padding-top: 1rem;
    }

    .phrase9 button {
        justify-content: center;
        padding: 12px 8px;
    }

    .clime {
        width: calc(100% - 72px);
        padding: 12px;
    }

    .topbar,
    .topbar1,
    .topbar2,
    .topbar3,
    .topbar4,
    .topbar6,
    .topbar8,
    .topbar24,
    .topbar78,
    .topbar100,
    .table-top,
    .table-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        height: auto;
        min-height: 0;
    }

    .titre,
    .topbar .titre {
        margin-left: 0;
        font-size: 20px;
    }

    .nb3,
    .nb3 input,
    .right-actions,
    .account-filters,
    .search-box {
        width: 100%;
    }

    .nb3 input {
        width: 100%;
    }

    .stat,
    .stats-grid,
    .stats-top,
    .f-grid,
    .settings-grid,
    .settings-grid-three,
    .grid-2,
    .billing-form,
    .modem-form-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .card,
    .content-admin input,
    .content-admin select {
        width: 100%;
        max-width: 100%;
    }

    .card-title {
        font-size: 22px;
    }

    .table-wrap,
    .modem-table,
    .notif-list {
        max-width: 100%;
        overflow-x: auto;
    }

    table {
        min-width: 620px;
    }

    .notification-actions,
    .actions,
    .acts,
    .btn-group,
    .billing-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .notification-actions form,
    .notification-actions button,
    .btn-green,
    .settings-save,
    .settings-reset {
        width: 100%;
    }

    .alert-text {
        font-size: 20px;
    }

    .alert-sub,
    .hint {
        font-size: 14px;
    }

    .null {
        gap: 1rem;
        margin-right: 0;
    }
}

/* Fluid layout for all authenticated content */
.main-container,
.clime,
.toiture,
.clime > *,
.content-admin,
.notif-container,
.airgate-analytics {
    min-width: 0;
}

.clime > * {
    max-width: 100%;
}

.toiture {
    flex-shrink: 0;
}

button,
.btn-light,
.btn-green,
a {
    overflow-wrap: anywhere;
}

@media (min-width: 701px) and (max-width: 1200px) {
    .toiture {
        width: 230px;
    }

    .clime {
        width: calc(100% - 230px);
    }

    .phrase0 a {
        margin-left: 0.75rem;
        padding-left: 10px;
        padding-right: 10px;
        font-size: clamp(16px, 1.8vw, 22px);
    }

    .plat span {
        margin-left: 0.5rem;
    }

    .grid-2 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .billing-form,
    .modem-form-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .table-wrap,
    .modem-table,
    .notif-list {
        overflow-x: auto;
    }
}

@media (max-width: 700px) {
    .clime {
        overflow-x: hidden;
    }

    .topbar,
    .topbar1,
    .topbar2,
    .topbar3,
    .topbar4,
    .topbar6,
    .topbar8,
    .topbar24,
    .topbar78,
    .topbar100 {
        width: 100%;
    }

    .titre h1,
    .topbar h1,
    .topbar2 h1,
    .topbar3 h1,
    .topbar4 h1,
    .topbar6 h1,
    .topbar8 h1,
    .topbar24 h1,
    .topbar78 h1,
    .topbar100 h1 {
        max-width: 100%;
        font-size: clamp(20px, 6vw, 30px);
        overflow-wrap: anywhere;
    }

    .content-admin .card,
    .grid-2 .card {
        margin-left: 0;
        margin-right: 0;
        padding: 16px;
    }

    .account-filters,
    .section-head,
    .table-top,
    .table-header,
    .right-actions {
        align-items: stretch;
    }

    .account-filters > *,
    .section-head > *,
    .right-actions > * {
        max-width: 100%;
    }

    .notif-item {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 10px;
    }

    .notification-actions {
        grid-column: 1 / -1;
        width: 100%;
    }

    .notification-actions form {
        flex: 1 1 140px;
    }

    .notification-actions button {
        min-height: 38px;
    }

    .chart-wrap {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 420px) {
    .toiture {
        width: 58px;
        flex-basis: 58px;
    }

    .clime {
        width: calc(100% - 58px);
        padding: 8px;
    }

    .phrase0 a,
    .phrase9 button {
        padding-left: 4px;
        padding-right: 4px;
    }

    .phrase0 a i,
    .phrase9 button i {
        font-size: 16px;
    }

    .card,
    .content-admin .card {
        padding: 12px;
        border-radius: 10px;
    }

    th,
    td {
        padding: 8px 6px;
    }

    table {
        min-width: 560px;
    }
}

/* Subscription page responsive cards */
.pointe99 {
    width: min(100%, 1500px);
    margin: 0 auto;
    padding: clamp(12px, 2vw, 28px);
    min-width: 0;
}

.pointe99 .topbar24 {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    align-items: center;
    gap: 18px;
}

.pointe99 .topbar24 .titre {
    min-width: 0;
}

.pointe99 .topbar24 h1,
.pointe99 .topbar24 p,
.pointe99 .topbar24 a {
    overflow-wrap: anywhere;
}

.pointe99 .topbar24 a {
    margin-right: 0;
    white-space: nowrap;
}

.pointe99 .week0 {
    width: 100%;
    margin-left: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 2vw, 24px);
}

.pointe99 .week2 {
    min-width: 0;
    padding: clamp(16px, 3vw, 32px);
    overflow-wrap: anywhere;
}

.pointe99 .topbar99 {
    width: 100%;
    margin-left: 0;
    gap: 16px;
}

.pointe99 .topbar99 h2 {
    min-width: 0;
    font-size: clamp(22px, 3vw, 35px);
    overflow-wrap: anywhere;
}

.pointe99 .topbar99 input {
    width: min(100%, 360px);
    min-width: 0;
    height: 40px;
    padding: 8px 12px;
    font-size: 16px;
}

.pointe99 .week3 {
    width: 100%;
    margin-left: 0;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(12px, 2vw, 28px);
}

.pointe99 .week {
    min-width: 0;
    height: auto;
    min-height: 500px;
    overflow: hidden;
}

.pointe99 .week form {
    height: 100%;
}

.pointe99 .type1,
.pointe99 .type2,
.pointe99 .type3 {
    margin-right: 0;
    padding: 16px 18px 0;
    text-align: left;
    font-size: clamp(20px, 2vw, 28px);
}

.pointe99 .pawa {
    width: min(100%, 300px);
    margin: 12px auto 24px;
    padding: 0 12px;
    gap: 14px;
}

.pointe99 .g-circle1,
.pointe99 .g-circle2,
.pointe99 .g-circle3 {
    width: 50px;
    height: 50px;
    margin-left: 0;
    justify-self: center;
}

.pointe99 .pawa h1,
.pointe99 .pawa h2,
.pointe99 .pawa p,
.pointe99 .pawa label {
    overflow-wrap: anywhere;
}

.pointe99 .pawa select,
.pointe99 .pawa button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.pointe99 .pawa button {
    height: 42px;
}

@media (max-width: 700px) {
    .pointe99 {
        padding: 12px;
    }

    .pointe99 .topbar24,
    .pointe99 .topbar99 {
        align-items: stretch;
        flex-direction: column;
    }

    .pointe99 .topbar24 a,
    .pointe99 .topbar99 input {
        width: 100%;
        max-width: none;
    }

    .pointe99 .week0 {
        grid-template-columns: 1fr 1fr;
    }

    .pointe99 .week3 {
        grid-template-columns: 1fr;
    }

    .pointe99 .week {
        min-height: 0;
    }
}

@media (max-width: 380px) {
    .pointe99 .week0 {
        grid-template-columns: 1fr;
    }

    .pointe99 .week2 {
        padding: 14px;
    }

    .pointe99 .pawa {
        width: 100%;
    }
}

/* Notification page fluid layout */
.topbar78,
.notif-container,
.notif-filters,
.notif-list {
    width: 100%;
    min-width: 0;
}

.topbar78 {
    height: auto;
    min-height: 72px;
    gap: 16px;
}

.topbar78 .titre {
    min-width: 0;
}

.topbar78 h1,
.topbar78 p {
    overflow-wrap: anywhere;
}

.be1 {
    width: 100%;
    margin-left: 0;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.notif-filters {
    height: auto;
    min-height: 70px;
}

.notif-filters .filter,
.btn-mark-all {
    max-width: 100%;
}

.btn-mark-all {
    font-size: clamp(12px, 1.3vw, 15px);
    white-space: normal;
}

.notif-list {
    height: auto;
    min-height: 220px;
    max-height: none;
    overflow: hidden;
}

.notif-item {
    grid-template-columns: 64px minmax(0, 1fr) minmax(150px, auto);
    min-width: 0;
}

.notif-item .icon {
    width: 56px;
    height: 56px;
    font-size: 30px;
}

.notif-item .content,
.notif-item .content b,
.notif-item .content p,
.notif-item .content small {
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
}

.notif-item .content b {
    font-size: clamp(17px, 2vw, 25px);
}

.notif-item .content p {
    font-size: clamp(13px, 1.4vw, 17px);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.notif-item .content small {
    font-size: 12px;
}

.notification-actions {
    min-width: 0;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.notification-actions form {
    max-width: 100%;
}

.btn-outline {
    padding: 9px 14px;
    font-size: 13px;
    white-space: normal;
}

@media (max-width: 900px) {
    .notif-item {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .notification-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-left: 52px;
    }
}

@media (max-width: 600px) {
    .topbar78 {
        align-items: flex-start;
        flex-direction: column;
    }

    .user0 {
        align-self: flex-end;
    }

    .be1 {
        align-items: stretch;
        padding: 10px;
    }

    .be1 .filter,
    .be1 form,
    .be1 .btn-mark-all {
        flex: 1 1 100%;
        width: 100%;
        text-align: center;
    }

    .notif-item {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px;
        padding: 14px 12px;
    }

    .notif-item .icon {
        width: 42px;
        height: 42px;
        font-size: 22px;
    }

    .notification-actions {
        padding-left: 0;
        gap: 6px;
    }

    .notification-actions form,
    .notification-actions button {
        width: 100%;
    }
}

/* Client management cards and list */
.topbar4,
.null,
.nb30,
.garr,
.nb32 {
    width: 100%;
    min-width: 0;
}

.topbar4 {
    height: auto;
    min-height: 72px;
    gap: 18px;
}

.null {
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.nb12,
.nb13 {
    min-width: 0;
}

.nb13 button {
    width: auto;
    max-width: 100%;
    min-height: 42px;
    padding: 8px 16px;
    font-size: clamp(14px, 1.5vw, 20px);
}

.nb32 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.total,
.f1,
.f2,
.f3 {
    min-width: 0;
    min-height: 150px;
    padding: 16px 10px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.total p,
.f1 p,
.f2 p,
.f3 p {
    font-size: clamp(13px, 1.4vw, 18px);
}

.total h1,
.f1 h1,
.f2 h1,
.f3 h1 {
    font-size: clamp(24px, 3vw, 38px);
}

.f1 span,
.f2 span,
.f3 span {
    display: block;
    font-size: clamp(18px, 2vw, 28px);
}

.nb30 {
    height: auto;
    min-height: 0;
    padding: 18px;
}

.garr {
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 0;
}

.g1 {
    min-width: 0;
    margin-left: 0;
}

.g1 h2 {
    font-size: clamp(18px, 2vw, 26px);
    overflow-wrap: anywhere;
}

.g2 {
    width: min(100%, 360px);
    min-width: 180px;
}

.g2 input {
    width: 100%;
    min-width: 0;
    font-size: 14px;
}

.client-form {
    width: 100%;
    margin-top: 18px;
    padding: 16px;
    border: 1px solid #e9eef2;
    border-radius: 12px;
    background: #f8fafb;
}

.client-form .modem-form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.client-form label {
    min-width: 0;
}

.client-form input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.deff {
    width: 100%;
    min-width: 760px;
    justify-content: stretch;
    gap: 0;
    margin-top: 18px;
    padding: 14px 0;
    border-top: 1px solid #eef0f3;
    text-align: left;
}

.deff .e1 {
    flex: 1 1 0;
    min-width: 100px;
    justify-content: start;
    gap: 6px;
    padding: 0 10px;
}

.deff .p2 {
    overflow-wrap: anywhere;
}

.nb30 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
    .nb32 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .client-form .modem-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .topbar4,
    .null,
    .garr {
        align-items: stretch;
        flex-direction: column;
    }

    .topbar4 {
        gap: 10px;
    }

    .nb10 {
        justify-content: flex-end;
        margin-right: 0;
    }

    .nb13 button,
    .g2 {
        width: 100%;
    }

    .nb32 {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .client-form .modem-form-grid {
        grid-template-columns: 1fr;
    }

    .client-form .btn-add,
    .client-form .btn-light {
        width: 100%;
        margin: 6px 0 0;
    }
}

/* Account management layout */
.content-admin {
    width: 100%;
    gap: 0;
}

.content-admin > .grid-2 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.content-admin > .grid-2 > .card,
.content-admin > .card {
    width: 100%;
    min-width: 0;
}

.content-admin .card-title {
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.account-filters {
    display: grid;
    grid-template-columns: minmax(180px, 2fr) minmax(140px, 1fr) auto auto;
    width: 100%;
}

.account-filters input,
.account-filters select {
    min-width: 0;
    width: 100%;
}

.acts {
    white-space: normal;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .content-admin > .grid-2 {
        grid-template-columns: 1fr;
    }

    .account-filters {
        grid-template-columns: 1fr 1fr;
    }

    .account-filters input {
        grid-column: 1 / -1;
    }

    .account-filters .btn-light {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .content-admin > .grid-2 > .card,
    .content-admin > .card {
        padding: 14px;
    }

    .account-filters {
        grid-template-columns: 1fr;
    }

    .account-filters input {
        grid-column: auto;
    }

    .accounts-table-wrap table {
        min-width: 700px;
    }
}

/* Dashboard cards: fluid sizing at every viewport */
.dashboard-stats {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: stretch;
}

.dashboard-stats > [class^="stat"] {
    min-width: 0;
    min-height: 150px;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-wrap: anywhere;
}

.dashboard-stats > [class^="stat"] p {
    margin: 4px 0;
    font-size: clamp(14px, 1.4vw, 20px);
    line-height: 1.35;
}

.dashboard-stats > [class^="stat"] h2 {
    font-size: clamp(22px, 2.5vw, 34px);
    line-height: 1.15;
}

.dashboard-stats > [class^="stat"] i {
    margin-top: 0;
    font-size: clamp(28px, 3vw, 40px);
}

.dashboard-cards {
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
    min-height: 0;
    align-items: stretch;
}

.cardf,
.card2 {
    min-width: 0;
    min-height: 380px;
    overflow: hidden;
}

.card-header,
.card-header2 {
    min-width: 0;
    min-height: 70px;
    padding: 12px 18px;
    gap: 12px;
}

.card-title,
.card-title2 {
    min-width: 0;
    width: auto;
    margin-left: 0;
}

.card-title h2,
.card-title2 h2 {
    font-size: clamp(18px, 2vw, 26px);
    overflow-wrap: anywhere;
}

.btn-group {
    width: auto;
    height: auto;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn {
    white-space: nowrap;
}

.chart-wrap {
    width: auto;
    min-height: 220px;
}

.stats.dashboard-chart-stats {
    margin-left: 18px;
    margin-right: 18px;
    width: auto;
    max-width: none;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.duck {
    gap: 24px;
    margin: 12px 18px 24px;
}

.alert-item {
    min-width: 0;
    margin-left: 0;
    gap: 12px;
    padding: 12px 0;
}

.alert-item > div:last-child {
    min-width: 0;
}

.alert-text {
    font-size: clamp(18px, 2vw, 28px);
    overflow-wrap: anywhere;
}

.alert-sub {
    font-size: clamp(13px, 1.4vw, 18px);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .dashboard-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .dashboard-stats > [class^="stat"] {
        min-height: 125px;
        padding: 12px 8px;
    }

    .cardf,
    .card2 {
        min-height: 0;
        border-radius: 10px;
    }

    .card-header,
    .card-header2 {
        align-items: stretch;
        flex-direction: column;
        padding: 12px;
    }

    .btn-group {
        justify-content: flex-start;
        width: 100%;
    }

    .btn {
        flex: 1 1 auto;
    }

    .chart-wrap {
        height: 220px;
        min-height: 0;
        margin: 8px 12px 0;
    }

    .stats.dashboard-chart-stats {
        align-items: flex-start;
        flex-direction: column;
        margin: 16px 12px;
    }

    .view-all {
        margin-right: 0;
        font-size: 16px;
    }
}

@media (max-width: 380px) {
    .dashboard-stats {
        grid-template-columns: 1fr;
    }

    .dashboard-stats > [class^="stat"] {
        min-height: 105px;
    }
}

/* Global application shell */
.app-shell {
    display: flex;
    width: 100%;
    min-height: 100vh;
    height: auto;
    align-items: stretch;
}

.app-sidebar {
    flex: 0 0 clamp(220px, 20vw, 300px);
    width: auto;
    min-height: 100vh;
}

@media screen and (max-width: 768px) {
    .app-sidebar {
        display: none;
    }

    /* Style de base de la sidebar (masquée par défaut) */
    .app-sidebar {
    height: 100%;
    width: 250px;
    position: fixed;
    top: 0;
    left: -250px; /* Cache la sidebar à gauche */
    background-color: #111;
    transition: 0.3s; /* Animation fluide */
    padding-top: 60px;
    }

    .app-sidebar.active {
    left: 0;
    }
}

.app-content {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 100vh;
}

.app-content-inner {
    width: min(100%, 1800px);
    min-width: 0;
    margin: 0 auto;
}

.app-content-inner > * {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 1100px) {
    .app-sidebar {
        flex-basis: 220px;
    }
}

@media (max-width: 700px) {
    .app-sidebar {
        flex: 0 0 64px;
        width: 64px;
    }

    .app-content {
        width: calc(100% - 64px);
        min-height: 100vh;
    }

    .app-content-inner {
        padding: 0;
    }
}

@media (max-width: 420px) {
    .app-sidebar {
        flex-basis: 52px;
        width: 52px;
    }

    .app-content {
        width: calc(100% - 52px);
    }
}