*{ 

   box-sizing: border-box; 
    margin: 0 auto;
    padding: 0;
}


body{
    font-family: 'Segoe UI', Arial, sans-serif;
    
    color: #1a1a1a;
    line-height: 1.5;
    background: #fff;
}
h5{
    font-size: 13px;
}

.navbar {
    Display: flex;
    Align-items: center;
    Justify-content: space-between;
    Padding: 16px 40px;
    Border-bottom: 1px solid #eee;
}

.logo {
    Display: flex;
    Align-items: center;
    Gap: 8px;
    font-size: 22px;
    Font-weight: 700;
    Color: #1a7a4c;
}

.nav-links {
    display: flex;
    Gap: 28px;
}

.nav-links a {
    Color: #333;
    Font-weight: 500;
    Font-size: 20px;
    Padding-bottom: 4px;
}

.nav-links a.active {
    Color: #1a7a4c;
    Border-bottom: 2px solid #1a7a4c;
}

.nav-actions {
    Display: flex;
    Align-items: center;
    Gap: 20px;
}
.menu-toggle{display: none;}
span{
    color:#1a7a4c;
}
.form-footer-link{
    text-align: center;
}
.btn{
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1a7a4c;
    color: #fff !important;
    padding: 12px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    border: none;
    cursor: pointer;
    text-align: center;
    justify-content: center;
}
button{
    margin-bottom: 0;
}
.btn1{
    margin-top:10px ;
    display: inline-flex;
    text-align: left;
    gap: 8px;
    background: #1a7a4c;
    color: #fff !important;
    padding: 8px 116px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    border: none;
    cursor: pointer;
   
    justify-content: center;
    
}
.rules-link {
    margin-bottom: 15px;
}
.btn:hover{
    background: #146138;
    
}
.btn-outline {
    background: #fff;
    color: #1a7a4c !important;
    border: 1.5px solid #1a7a4c;
}

.btn-outline:hover { background: #f0f9f4; }

.btn-segondary{
    background: #666;
}
.btn-segondary:hover{
    background: #444;
}
.btn-danger{
    background: #c0392b;
}
.btn-danger:hover{
    background: #922b21;
}

.hero {
    Display: flex;
    Align-items: center;
    Justify-content: space-between;
    Padding: 60px 40px;
    Max-width: 1000px;
    Margin: 0 auto;
    Gap: 40px;
    Flex-wrap: wrap;
}

.hero-text {
    Flex: 1;
    Min-width: 280px;
}

.hero-text h1, .hero-text h3{
    Font-size: 42px;
    Font-weight: 800;
    Line-height: 1.15;
    Margin-bottom: 10px;
    Color: #111;
}

.hero-text p {
    Font-size: 16px;
    Color: #555;
    Margin-bottom: 28px;
    Max-width: 480px;
}

.hero-buttons {
    Display: flex;
    Gap: 14px;
    Flex-wrap: wrap;
}

.hero-image {
    Flex: 1;
    Min-width: 300px;
    Display: flex;
    Justify-content: center;
    Position: relative;
}
.hero-image1 {
    Flex: 1;
    Min-width: 100px;
    Display: flex;
    
}

.hero-image-circle {
    Width: 380px;
    Height: 380px;
    Border-radius: 35px;
    Background: #1a7a4c;
    Display: flex;
    Align-items: center;
    Justify-content: center;
    Overflow: hidden;
    Position: relative;
    
    box-shadow: 0 20px 45px rgba(0,0,0,.18);
}
.hero-image-circle1 {
    Width: 380px;
    Height: 380px;
    Border-radius: 5px;
    Background: #1a7a4c;
    Display: flex;
    Align-items: center;
    Justify-content: center;
    Overflow: hidden;
    Position: relative;
    
    box-shadow: 0 20px 45px rgba(0,0,0,.18);
}

.hero-image-circle img {
    Width: 90%;
    height: 90%;
    Object-fit: cover;
    object-position: center center;
    border-radius: 5px;
}
.hero-image-circle1 img {
    Width: 100%;
    height: 100%;
    Object-fit: cover;

    border-radius: 5px;
}


.stat-badge {
    Position: absolute;
    Background: #fff;
    Border-radius: 10px;
    Padding: 12px 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    Display: flex;
    Align-items: center;
    Gap: 10px;
}

.stat-badge strong {
    Display: block;
    
    Color: #111;
}

.stat-badge span {
    Color: #777;
    Font-size: 12px;
}

.stat-badge.top-left { top: 30px; left: -20px; }
.stat-badge.bottom-right { bottom: 40px; right: -20px; }

/* ===== BARRE DE RECHERCHE ===== */
.search-bar {
    Max-width: 1100px;
    Margin: -20px auto 40px;
    Background: #fff;
    Border: 1px solid #eee;
    Box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    Border-radius: 12px;
    Padding: 16px;
    Display: flex;
    Gap: 12px;
    Flex-wrap: wrap;
}

.search-bar input,
.search-bar select {
    Flex: 1;
    Min-width: 160px;
    Padding: 12px 14px;
    Border: 1px solid #ddd;
    Border-radius: 8px;
    Font-size: 14px;
}

.search-bar button {
    White-space: nowrap;
}

/* ===== SECTION PRODUITS ===== */
.section-title {
    Text-align: center;
    Font-size: 24px;
    Font-weight: 700;
    Margin: 40px 0 24px;
    Position: relative;
}

.section-title::after {
    Content: "";
    Display: block;
    Width: 50px;
    Height: 3px;
    Background: #1a7a4c;
    Margin: 10px auto 0;
    Border-radius: 2px;
}

.produits-grid {
    Display: grid;
    Grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    Gap: 20px;
    Max-width: 1300px;
    Margin: 0 auto;
    Padding: 0 40px;
}

.produit-card1{
    Background: #fff;
    Border: 1px solid #eee;
    Border-radius: 12px;
    Overflow: hidden;
    Transition: box-shadow 0.2s ease, transform 0.2s ease;
    margin: 10px;
    padding:8px;

}
.hh{
    margin-top: -100px;
    margin-left: 200px;
}
.produit-card {
    Background: #fff;
    Border: 1px solid #eee;
    Border-radius: 12px;
    Overflow: hidden;
    Transition: box-shadow 0.2s ease, transform 0.2s ease;
    Position: relative;
}

.produit-card:hover {
    Box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    Transform: translateY(-3px);
}

.produit-card .card-image {
    Position: relative;
    Width: 100%;
    Height: 180px;
    Background: #f5f5f5;
}

.produit-card .card-image img {
    Width: 100%;
    Height: 100%;
    Object-fit: cover;
}

.badge-nouveau {
    Position: absolute;
    Top: 10px;
    Left: 10px;
    Background: #1a7a4c;
    Color: #fff;
    Font-size: 11px;
    Font-weight: 600;
    Padding: 4px 10px;
    Border-radius: 6px;
}

.card-body {
    Padding: 14px;
}

.card-body h3 {
    Font-size: 15px;
    Font-weight: 600;
    Margin-bottom: 6px;
    Color: #111;
}

.card-price {
    Color: #1a7a4c;
    Font-weight: 700;
    Font-size: 15px;
    Margin-bottom: 4px;
}

.card-location {
    Font-size: 13px;
    Color: #888;
}

/* ===== FOOTER ===== */
.footer {
    Margin-top: 20px;
    Padding: 40px 10% 20px;
    Border-top: 5px solid #22C55E;
    Text-align: left;
    Font-size: 14px;
    Color: black;
    background: white;
}

.page-wrapper {
    Max-width: 480px;
    Margin: 60px auto;
    Padding: 0 20px;
}

.form-card {
    Background: #fff;
    Border: 1px solid #eee;
    Border-radius: 14px;
    Padding: 36px;
    Box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.form-card h1 {
    Font-size: 24px;
    Font-weight: 700;
    Margin-bottom: 8px;
    Color: #111;
}

.form-card p.subtitle {
    Color: #777;
    Font-size: 14px;
    Margin-bottom: 24px;
}

.form-card label {
    Display: block;
    Font-size: 13px;
    Font-weight: 600;
    Color: #333;
    Margin-bottom: 6px;
    Margin-top: 16px;
}

.form-card input,
.form-card select,
.form-card textarea {
    Width: 100%;
    Padding: 11px 14px;
    Border: 1px solid #ddd;
    Border-radius: 8px;
    Font-size: 14px;
}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
    Outline: none;
    Border-color: #1a7a4c;
}

.form-card button {
    Width: 100%;
    Margin-top: 24px;
}



/* ===== DASHBOARD ===== */
.dashboard-header {
    Max-width: 1100px;
    Margin: 0 auto;
    Padding: 30px 40px 0;
}

.dashboard-header h1 {
    Font-size: 26px;
    Margin-bottom: 6px;
}

.dashboard-actions {
    Display: flex;
    Gap: 12px;
    Margin: 20px 0;
    Flex-wrap: wrap;
}


.store-header {
    Max-width: 1100px;
    Margin: 30px auto;
    Padding: 0 40px;
}

.store-header h1 {
    Font-size: 28px;
    Margin-bottom: 6px;
}

.store-meta {
    Color: #777;
    Font-size: 14px;
    Margin-bottom: 10px;
}

.admin-login-wrapper {
    Min-height : 100vh ;
    Display : flex ;
    Align-items : center ;
    Justify-content : center ;
    Background : #f7f8fa ;
}

.admin-login-card {
    Background : #fff ;
    Border-radius : 16px ;
    Padding : 50px 40px ;
    Max-width : 440px ;
    Width : 100% ;
    Text-align : center ;
    Box-shadow : 0 10px 40px rgba(0,0,0,0.06) ;
}

.admin-login-icon {
    Width : 70px ;
    Height : 70px ;
    Background : #e8f5ee ;
    Color : #1a7a4c ;
    Border-radius : 50% ;
    Display : flex ;
    Align-items : center ;
    Justify-content : center ;
    Font-size : 30px ;
    Margin : 0 auto 20px ;
}

.admin-login-card h1 {
    Font-size : 24px ;
    Margin-bottom : 20px ;
}

.admin-login-card h1 span { color : #1a7a4c ; }

.admin-login-card input {
    Width : 100% ;
    Padding : 13px 16px ;
    Border : 1px solid #ddd ;
    Border-radius : 8px ;
    Font-size : 14px ;
    Margin-bottom : 14px ;
}

.admin-login-card button {
    Width : 100% ;
    Padding : 13px ;
}

/* ===== ADMIN DASHBOARD ===== */
.admin-page-header {
    Background : #1a7a4c ;
    Padding : 20px 40px ;
    Color : #fff ;
}

.admin-page-header a { color : #fff ; }

.admin-stats-row {
    Display : flex ;
    Gap : 16px ;
    Padding : 30px 40px 0 ;
    Flex-wrap : wrap ;
}

.admin-stat-card {
    Background : #fff ;
    Border : 1px solid #eee ;
    Border-radius : 12px ;
    Padding : 20px ;
    Flex : 1 ;
    Min-width : 160px ;
    Display : flex ;
    Align-items : center ;
    Gap : 14px ;
}

.admin-stat-icon {
    Width : 46px ;
    Height : 46px ;
    Background : #e8f5ee ;
    Color : #1a7a4c ;
    Border-radius : 50% ;
    Display : flex ;
    Align-items : center ;
    Justify-content : center ;
    Font-size : 20px ;
    Flex-shrink : 0 ;
}

.admin-stat-card strong {
    Display : block ;
    Font-size : 24px ;
    Color : #111 ;
}

.admin-stat-card span {
    Font-size : 13px ;
    Color : #777 ;
}

.admin-search-row {
    Display : flex ;
    Gap : 10px ;
    Justify-content : center ;
    Margin : 30px 40px ;
}

.admin-search-row input {
    Flex : 1 ;
    Max-width : 400px ;
    Padding : 11px 16px ;
    Border : 1px solid #ddd ;
    Border-radius : 8px ;
}

.admin-table-panel {
    Margin : 0 40px 40px ;
    Background : #fff ;
    Border : 1px solid #eee ;
    Border-radius : 12px ;
    Padding : 10px 24px ;
    Overflow-x : auto ;
}

.admin-table-panel table {
    Width : 100% ;
    Border-collapse : collapse ;
}

.admin-table-panel th {
    Text-align : left ;
    Font-size : 13px ;
    Color : #999 ;
    Padding : 14px 10px ;
    Border-bottom : 1px solid #eee ;
}

.admin-table-panel td {
    Padding : 14px 10px ;
    Border-bottom : 1px solid #f5f5f5 ;
    Font-size : 14px ;
}

.badge-actif {
    Background : #e8f5ee ;
    Color : #1a7a4c ;
    Padding : 4px 12px ;
    Border-radius : 20px ;
    Font-size : 12px ;
    Font-weight : 600 ;
}

.badge-bloque {
    Background : #fdeaea ;
    Color : #c0392b ;
    Padding : 4px 12px ;
    Border-radius : 20px ;
    Font-size : 12px ;
    Font-weight : 600 ;
}

.admin-actions a {
    Font-size : 13px ;
    Margin-right : 10px ;
}

.footer-container{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:50px;
}

.footer-col h3{
    Color:#22C55E;
    Margin-bottom:20px;
}

.footer-col p{
    Color:black;
    Line-height:1.8;
    text-align: center;
    margin-right: 80px;
}

.footer-col a{
    Display:block;
    Color:black;
    Text-decoration:none;
    Margin:10px 0;
    Transition:.3s;
}

.footer-col a:hover{
    Color:#22C55E;
    Padding-left:6px;
}

.socials a{
    Margin-top:10px;
}

.footer-bottom{
    Text-align:center;
    Margin-top:10px;
    Padding-top:20px;
    Border-top:1px solid #334155;
    Color:#94A3B8;
}

.mission-section{
    Max-width:1000px;
    Margin:100px auto;
   
}

.mission-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:10px;
    max-width: 1400px;
}
.mission-grid1{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
    gap:20px;
    max-width: 1800px;
}
.mission-card1{
    Background:transparent;
    Padding:20px;
    Border-radius:20px;
    Border:1px solid #ececec;
    Box-shadow:0 10px 30px rgba(0,0,0,.08);
    Transition:.3s;
   
}

.mission-card{
    Background:transparent;
    Padding:55px;
    Border-radius:20px;
    Border:1px solid #ececec;
    Box-shadow:0 10px 30px rgba(0,0,0,.08);
    Transition:.3s;
   
}

.mission-card:hover{
    Transform:translateY(-8px);
    Box-shadow:0 20px 40px rgba(0,0,0,.12);
    background: #1a7a4c;
}
.mission-card1:hover{
    Transform:translateY(-8px);
    Box-shadow:0 20px 40px rgba(0,0,0,.12);
    background: #f0f0f0;
}

.icon{
    Width:75px;
    Height:75px;
    Background:#E8F8EE;
    Color:#1A7A4C;
    Border-radius:50%;
    Display:flex;
    Align-items:center;
    Justify-content:center;
    Font-size:36px;
    Margin-bottom:20px;
}

.mission-card h3{
    Font-size:24px;
    Margin-bottom:15px;
    Color:#111827;
}
.mission-card1 h3{
    Font-size:14px;
    Margin-bottom:15px;
    Color:#111827;
}


.mission-card p{
    Color:black;
    Line-height:1.8;
}
.app-layout {
    Display : flex ;
    align-items: stretch;
    
    
}

.sidebar {
    Width : 240px ;
    Background : #0d2818 ;
    Color : #fff ;
    Padding : 24px 16px ;
    Flex-shrink : 0 ;
    border-radius: 5px;
}

.sidebar .logo {
    Color : #fff ;
    Font-size : 20px ;
    Margin-bottom : 30px ;
    Display : flex ;
    Align-items : center ;
    Gap : 8px ;
}

.sidebar-nav a {
    Display : flex ;
    Align-items : center ;
    Gap : 10px ;
    Color : #cfe8d8 ;
    Padding : 10px 10px ;
    Border-radius : 8px ;
    Margin-bottom : 4px ;
    Font-size : 14px ;
    Font-weight : 500 ;
}

.sidebar-nav a :hover {
    Background : rgba(255,255,255,0.08) ;
    Text-decoration : none ;
}

.sidebar-nav a.active {
    Background : #1a7a4c ;
    Color : #fff ;
}

.main-content {
    Flex : 1 ;
    Background : #f7f8fa ;
}

.top-header {
    Background : #fff ;
    Border-bottom : 1px solid #eee ;
    Padding : 16px 40px ;
    Display : flex ;
    Justify-content : flex-end ;
    Align-items : center ;
    Gap : 20px ;
}

.content-body {
    Padding : 20px 30px 30px 16px;
}

.page-title {
    Font-size : 26px ;
    Font-weight : 700 ;
    Margin-bottom : 4px ;
}

.back-link {
    Font-size : 14px ;
    Margin-bottom : 24px ;
    Display : inline-block ;
    color: #0d2818;
}
.b1{
    margin-left: 130px;
}
.b2{
    margin-left: 50px;
}
.card-panel {
    Background : #fff ;
    Border : 1px solid #eee ;
    Border-radius : 12px ;
    Padding : 28px ;
}

.card-panel-title {
    Display : flex ;
    Align-items : center ;
    Gap : 10px ;
    Font-weight : 700 ;
    Font-size : 16px ;
    Margin-bottom : 24px ;
}

.form-grid {
    Display : grid ;
    Grid-template-columns : 1fr 320px ;
    Gap : 30px ;
    margin-right: 200px;
}

.form-grid label {
    Display : block ;
    Font-size : 13px ;
    Font-weight : 600 ;
    Margin-bottom : 6px ;
    Margin-top : 16px ;
}

.form-grid label :first-of-type { margin-top : 0 ; }

.form-grid input,
.form-grid select,
.form-grid textarea {
    Width : 100% ;
    Padding : 11px 14px ;
    Border : 1px solid #ddd ;
    Border-radius : 8px ;
    Font-size : 14px ;
}

.upload-box {
    Border : 2px dashed #ccc ;
    Border-radius : 12px ;
    Padding : 20px 16px ;
    Text-align : center ;
    Cursor : pointer ;
    Transition : border-color 0.2s ;
    max-height: 240px;
}

.upload-box :hover,
.upload-box.dragover {
    Border-color : #1a7a4c ;
    Background : #f0f9f4 ;
}

.upload-box .upload-icon {
    Width : 48px ;
    Height : 48px ;
    Background : #e8f5ee ;
    Border-radius : 50% ;
    Display : flex ;
    Align-items : center ;
    Justify-content : center ;
    Margin : 0 auto 10px ;
    Font-size : 24px ;
}

.upload-box p.upload-title {
    Font-weight : 600 ;
    Margin-bottom : 6px ;
}

.upload-box p.upload-sub {
    Font-size : 12px ;
    Color : #888 ;
}

.upload-box img.preview {
    Max-width : 100% ;
    Max-height : 180px ;
    Border-radius : 8px ;
}

.form-actions {
    Display : flex ;
    Justify-content : space-between ;
    Margin-top : 24px ;
    gap: 20px;
}
.active{
    margin:10px;
}
.form-row-split{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.form-row-split> div label:first-of-type{
    margin-top: 16px;

}
html,body{
    height: 100%;
}
.dashboard-top { padding : 30px 40px 0 ; }
.dashboard-top h1 { font-size : 26px ; }
.dashboard-meta { display : flex;
    flex-direction: column;
     gap : 4px ; color : #555 ; 
     font-size : 14px ; margin-top : 10px ; flex-wrap : wrap ;
    text-align: left;
 }
.dashboard-meta a { color : #1a7a4c ; font-weight : 600 ; }

.quick-actions {
    Background : #1a7a4c ;
    Border-radius : 14px ;
    Margin : 24px 40px ;
    Padding : 30px 40px ;
    Display : flex ;
    Justify-content : space-around ;
    Flex-wrap : wrap ;
    Gap : 20px ;
}

.quick-action-item {
    Display : flex ;
    Gap : 14px ;
    Align-items : center ;
    Color : #fff !important ;
    Text-decoration : none ;
}

.quick-action-icon {
    Width : 48px ;
    Height : 48px ;
    Background : rgba(255,255,255,0.15) ;
    Border-radius : 50% ;
    Display : flex ;
    Align-items : center ;
    Justify-content : center ;
    Font-size : 20px ;
    Flex-shrink : 0 ;
}

.quick-action-item h3 { font-size : 15px ; margin-bottom : 4px ; }
.quick-action-item p { font-size : 13px ; color : #d9f0e3 ; }

.products-list-panel {
    Margin : 24px 40px ;
    Background : #fff ;
    Border : 1px solid #eee ;
    Border-radius : 12px ;
    Padding : 10px 24px ;
    text-align: left;
}

.product-row {
    Display : flex ;
    Align-items : center ;
    Justify-content : space-between ;
    Padding : 16px 0 ;
    Border-bottom : 1px solid #f0f0f0 ;
    Gap : 16px ;
    
}

.product-row :last-child { border-bottom : none ; }

.product-row-left { display : flex ; gap : 16px ; align-items : center ; 
text-align: left;}

.product-row img {
    Width : 70px ;
    Height : 70px ;
    Object-fit : cover ;
    Border-radius : 8px ;
    Background : #f5f5f5 ;
}

.product-row h3 { font-size : 15px ; margin-bottom : 4px ; }
.product-row .price { color : #1a7a4c ; font-weight : 700 ; font-size : 14px ; }
.product-row .date { font-size : 12px ; color : #999 ; margin-top : 4px ; }
.dashboard-info-row{
    display: flex;
    align-items: center;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.visits-card{
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.visits-card strong{
    font-size: 20px;
    color: #1a7a4c;
}
.visits-card span{
    font-size: 13px;
    color: #777;
}
.store-products-nav {
    Display : flex ;
    Justify-content : center ;
    Align-items : center ;
    Gap : 16px ;
    Margin : 30px 0 ;
}

.produit-card .card-image {
    width : 100% ;
    aspect-ratio : 4/3 ;
    Background : #f5f5f5 ;
    Overflow : hidden ;
}

.produit-card .card-image img {
    width : 100% ;
    height : 100% ;
    object-fit : cover ;
    
}
.champ-note {
    font-size: 12px;
    color: #888;
    margin-top: 6px;
    margin-bottom: 16px;
}
.menu-toggle-nav { display: none; }
.nav-mobile-overlay { display: none; }
.nav-mobile-panel { display: contents; }

@media (max-width: 768px) {
    .hh{
        margin-top: 20px;
        margin-left: 0;
    }
    .hero-text, .hero-image, .hero-image1{min-width: 0; flex: 0  0 100%;}
   .b1, .b2{margin-left: 0;}
   .form-actions{flex-direction: column;}
    .form-actions .btn{width: 100%;}
    .nav-mobile-panel {
        Display: flex;
        Flex-direction: column;
        Position: fixed;
        Top: 0;
        Right: -280px;
        Width: 260px;
        Height: 100vh;
        Background: #fff;
        Padding: 80px 24px 24px;
        Box-shadow: -4px 0 20px rgba(0,0,0,0.15);
        Transition: right 0.3s ease;
        z-index: 1000;
        gap: 24px;
    }
    .nav-mobile-panel.ouvert { right: 0; }
    .nav-mobile-panel .nav-links { flex-direction: column; gap: 18px; }
    .nav-mobile-panel .nav-actions { flex-direction: column; }
    .nav-mobile-overlay {
        Display: none;
        Position: fixed;
        Top: 0; left: 0;
        Width: 100%; height: 100%;
        Background: rgba(0,0,0,0.4);
        z-index: 999;
    }
    .nav-mobile-overlay.actif { display: block; }
    .menu-toggle-nav{display: block; background: none; border: none; font-size: 26px; color: #1a7a4c; cursor: pointer;}
    .hero { padding: 30px 20px; text-align: center; justify-content: center; }
    .hero-text h1 { font-size: 30px; }
    .hero-buttons { justify-content: center; }
    .search-bar { margin: 20px 16px; }
    .produits-grid { padding: 0 16px; }
    .hero-image-circle, .hero-image-circle1{width: 260px; height: 260px;}
    .stat-badge.top-left{left: 0;}
    .stat-badge.bottom-right{right: 0;}
   
    .form-grid{
        grid-template-columns: 1fr;
    }
    .form-row-split{
        grid-template-columns: 1fr;
    }
    .content-body{
        padding: 20px 16px;
    }
    .footer-container{
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    .footer-col p{
        margin-right: 0;
    }
    
    .main-content .footer-container, .footer-container{
        grid-template-columns: 1fr !important;
    }
    .form-grid{
        margin-right: 0;
    }
    .sidebar{padding: 12px 16px;}
    .sidebar .logo{
        margin-bottom: 12px;
        font-size: 16px;
    }
    .sidebar-nav a{
        padding: 8px 10px;
        font-size: 13px;
        margin-bottom: 2px;
    }
    .sidebar {
        Position : fixed ;
        Top : 0 ;
        Left : -280px ;
        Height : 100vh ;
        z-index : 1000 ;
        transition : left 0.3s ease ;
        width : 240px ;
        overflow-y : auto ;
    }

    .sidebar.ouvert {
        Left : 0 ;
    }

    .app-layout {
        Flex-direction : row ;
    }

    .main-content {
        Width : 100% ;
    }

    .menu-toggle {
        Display : block ;
    }

    .sidebar-overlay {
        Display : none ;
        Position : fixed ;
        Top : 0 ;
        Left : 0 ;
        Width : 100% ;
        Height : 100% ;
        Background : rgba(0,0,0,0.5) ;
        z-index : 999 ;
    }

    .sidebar-overlay.actif {
        Display : block ;
    }
    .menu-toggle {
        Display : block;
        Background : none ;
        Border : none ;
        Font-size : 24px ;
        Cursor : pointer ;
        Color : #1a7a4c ;
    }
    .quick-actions{margin: 20px 16px; padding: 20px; flex-direction: column;}
    .quick-action-item{width: 100%;}
    
}
.top-header-user{font-size: 14px; color: #333; font-weight: 600;}
.favoris-btn {
    position: absolute;
    top: 12px;
    Right: 12px;
    Background: rgba(255,255,255,0.9);
    Border: none;
    Border-radius: 50%;
    Width: 32px;
    Height: 32px;
    Font-size: 18px;
    Cursor: pointer;
    Display: flex;
    Align-items: center;
    Justify-content: center;
    Color: #c0392b;
    z-index: 2;
}

.favoris-btn.actif {
    Background: #c0392b;
    Color: #fff;
}