/*
Theme Name: annuaire des commerçants et artisans du Grand Verdun
Theme URI: https://www.verdun.fr/commercants/
Author: Stéphanie Torzecki
*/


/* Effet de zoom sur l'image */
/*.card-img-wrapper {
    overflow: hidden; 
}

.zoom {
    transition: transform 0.3s ease; 
}

.zoom:hover {
    transform: scale(1.1); 
}*/


.navbar .menu-item a:hover,
.navbar .nav-link:hover{
    color: #ffffff !important;
}


h2 {
    color: #55bcb9;
    font-weight: bold;
}


h5 {
    color: #fc0065;
    font-weight: bold;
}




a {
    color: #fc0065;
    text-decoration: none;
}

a:hover {
    color: #fc0065;
    text-decoration: underline;
}

a:focus {
    color: #fc0065;
    outline: none;
    text-decoration: underline;
}



.text-primary {
    text-color: #fc0065 !important;
}


/* Liens pour .text-secondary */
.text-secondary {
    color: #68839d!important;
    text-decoration: none;
}

.text-secondary:link {
    color: #68839d!important;
    text-decoration: none;
}

.text-secondary:visited {
    color: #68839d!important;
    text-decoration: none;
}

.text-secondary:hover {
    color: #68839d!important;
    text-decoration: underline;
}

.text-secondary:active {
    color: #eb0095 !important;
}

.text-secondary:focus {
    outline: 2px solid #eb0095; /* Ajoute un contour lorsqu'il est sélectionné via le clavier */
    outline-offset: 2px;
}








/* --- Formulaires --- */


.wpcf7 form, form.custom-form {
    /*background-color: #f8f9fa;*/
    padding: 20px;
    border-radius: 0px;
    /*box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);*/
}

.wpcf7 input, .wpcf7 textarea, .wpcf7 select,
form.custom-form input,
form.custom-form textarea,
form.custom-form select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    border: 2px solid #fc0065;
}

.wpcf7 input[type="submit"], form.custom-form input[type="submit"] {
    background-color: #fc0065;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 4px;
}

.wpcf7 input[type="submit"]:hover, form.custom-form input[type="submit"]:hover {
    background-color: #fc0065;
}



/* --- Boutons --- */
.bg-orange {
    background-color: #e4026a; !important;
    color: white;  
padding:0px;	
}


.bg-orange:hover {
    background-color: #e40269 !important;
	 color: white;  
	
}



.bg-green, .bg-green:link {
    background-color: #68839d!important;
    color: white !important;
    padding: 15px;
    transition: all 0.3s ease;
    border-radius: 5px;
}

.bg-green:hover {
    background-color: #68839d;
    cursor: pointer;
}

.bg-green:focus {
    background-color: #68839d;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.bg-green:active {
    background-color: #409e94;
    transform: scale(0.98);
}


.bg-primary {
    background-color: #55bcb9;!important;
}



/* --- Navigation --- */
.navbar-dark .navbar-nav .nav-link {
    color: #ffffff !important;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:active {
    color: #ffffff !important;
}


#breadcrumb-section .breadcrumb a {
    color: #55bcb9; 
}

#breadcrumb-section .breadcrumb a:hover {
    color: #55bcb9; 
}






/* --- Bouton Retour en haut --- */
#topBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 24px;
    text-align: center;
    line-height: 50px;
}

#topBtn:hover {
    transform: scale(1.1);
}

/* --- Boutons Primaires --- */
.btn-primary {
    background-color: #3e9691;
    border-color: #3e9691;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #35736f;
    border-color: #35736f;
}


.download-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #55bcb9;
    color: white;
    font-size: 16px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.download-btn:hover {
    background-color: #68839d;
}





/* --- Modals --- */
.modal-content {
    border-radius: 1rem;
}




.text-pink {
    color: #fc0065 !important;
}

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
}

.status-badge.active {
    background-color: #28a745; /* vert pour active */
}

.status-badge.inactive {
    background-color: #dc3545; 
}

/* Checkbox rose */
.form-check-input:checked {
    background-color: #fc0065; 
    border-color: #fc0065;
}

.form-check-input:focus {
    border-color: #fc0065;
    box-shadow: 0 0 0 0.25rem rgba(233,30,99,.25);
}


.btn-update {
    background-color: #fc0065;
    border-color: #fc0065;
    color: #fff;
}

.btn-update:hover,
.btn-update:focus {
    background-color: #fc0065;
    border-color: #fc0065;
    color: #fff;
}


.btn-tertiary {
    background-color: #fc0065 !important; 
    border-color: #fc0065 !important;
    color: #fff !important;
}

.btn-tertiary:hover,
.btn-tertiary:focus, {
    background-color: #d81b60 !important;
    border-color: #d81b60 !important;
    color: #fff !important;
}


.bg-tertiary {
    background-color: #fce4ec !important; /* rose clair */
}


.form-check-input:checked {
    background-color: #e91e63; 
    border-color: #e91e63;     
}


.form-check-input:checked {
    background-color: #e91e63 !important; /* rose */
    border-color: #e91e63 !important;     /* rose */
}

/* Focus */
.form-check-input:focus {
    border-color: #e91e63 !important;
    box-shadow: 0 0 0 0.25rem rgba(233, 30, 99, 0.25);
}

/* Pour la checkbox désactivée cochée */
.form-check-input:disabled:checked {
    background-color: #e91e63 !important;
    border-color: #e91e63 !important;
}

/* Label associé à la checkbox */
.form-check-label {
    color: #333;
    font-weight: 500;
}

header > .container-fluid > img {
    pointer-events: none;
    cursor: default;
}

@media (max-width: 767.98px) {
    #logo {
        height: 100px; 
    }
}


@media (max-width: 768px) {
    .user-dropdown {
        position: static !important; 
        width: 100% !important;      
        left: 0 !important;
        right: 0 !important;
        transform: none !important;  
        margin-left: 0 !important;
    }

   
    #userDropdown {
        width: 100%;
        text-align: left; 
    }
}


 /* Ajustement de la position verticale */
  .top-35 {
    top: 20%;
  }

  /* Adaptation sur mobile */
  @media (max-width: 768px) {
    .top-35 {
      top: 15%;
    }
    h3.display-4 {
      font-size: 0.8rem !important; 
      line-height: 0.8;
    }
    p.fs-3 {
      font-size: 0.8rem !important; 
    }
  }
  

*, *::before, *::after { box-sizing: border-box; }

body {
    background: #f7f4f0;
	font-family: 'Catamaran', sans-serif;
   
}

/* ── HERO ── */
.directory-hero {
    background: #1a1a2e;
    padding: 70px 0 50px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.directory-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 80% 50%, rgba(255,0,127,.18) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 10% 80%, rgba(255,79,163,.12) 0%, transparent 60%);
    pointer-events: none;
}

.directory-hero h1 {
    /*font-family: 'cata', sans-serif;*/
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.directory-hero h1 span {
    color: #e5026a;
}

.hero-sub {
    color: rgba(255,255,255,.65);
    font-size: 1.1rem;
    margin-top: 8px;
}

/* ── SEARCH BOX ── */
.search-box {
    background: #fff;
    padding: 20px 24px;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,.13);
    margin-top: 36px;
}

.search-box .form-control,
.search-box .form-select {
    border: 2px solid #ececec;
    border-radius: 12px;
    
    font-size: .95rem;
    padding: 12px 16px;
    transition: border-color .2s;
}

.search-box .form-control:focus,
.search-box .form-select:focus {
    border-color: #e5026a;
    box-shadow: none;
}

/* ── RESULTS COUNT ── */
.results-count {
    
    font-weight: 700;
    font-size: .9rem;
    color: #888;
    margin-bottom: 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.results-count span { color: #e5026a; }

/* ── CARDS ── */
.commerce-item { transition: opacity .2s; }
.commerce-item.hidden { display: none !important; }

.commerce-card {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,.07);
    background: #fff;
    height: 100%;
}

.commerce-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,.13);
}

.commerce-card .card-img-top {
    height: 200px;
    object-fit: cover;
}

.commerce-card .card-body {
    padding: 18px 20px 22px;
}

.badge-thematique {
    display: inline-block;
    background: #e5026a;
    color: #fff;
    padding: 5px 14px;
    border-radius: 10px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.commerce-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 12px 0 4px;
    color: #1a1a2e;
}

.commerce-commune {
    font-size: .88rem;
    color: #999;
    margin: 0;
}

/* ── MAP ── */
#commerce-map {
    height: calc(100vh - 40px);
    border-radius: 24px;
    position: sticky;
    top: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,.1);
}

/* ── MODAL ── */
.modal-content {
    border: none;
    border-radius: 24px;
    overflow: hidden;
   
}

.modal-header {
    background: #e40269;
    color: #fff;
    border: none;
    padding: 20px 28px;
}

.modal-header .modal-title {   
    font-weight: 700;
    font-size: 1.2rem;
}

.modal-header .btn-close {
    filter: invert(1);
}

.modal-img {
    width: 100%;
    height: 100%;
    min-height: 300px;
    object-fit: cover;
}

.modal-body-content {
    padding: 36px 40px;
}

.modal-body-content h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 20px;
}

.info-line {
    margin-bottom: 10px;
    font-size: .95rem;
    color: #444;
}

.info-line a {
    color: #e5026a;
    text-decoration: none;
}

.info-line a:hover { text-decoration: underline; }

/* ── NO RESULTS ── */
#no-results {
    display: none;
    text-align: center;
    padding: 60px 20px;
    color: #aaa;    
    font-size: 1.1rem;
}

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
    #commerce-map {
        height: 380px;
        position: relative;
        top: 0;
        margin-bottom: 32px;
    }
}