/* ==========================================================
   SURCHARGES PERSONNALISÉES - fiche technique
   (à charger APRÈS main.css)
   ========================================================== */


.product-single-feature-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px 16px;
}

.product-single-feature-list li span {
    white-space: normal;      /* autorise le retour à la ligne */
    text-transform: none;     /* garde la casse d'origine (plus lisible avec du texte long) */
    word-break: break-word;
}

.product-single-feature-list li span:first-child {
    flex: 0 0 auto;
    font-weight: 600;
    white-space: nowrap;      /* le libellé (ex: "AUTORADIO :"), lui, reste sur une ligne */
}

.product-single-feature-list li span:last-child {
    flex: 1 1 55%;
    text-align: left;
    font-weight: 400;
}

/* En-tête de catégorie dans la liste des caractéristiques (fiche finition) :
   bandeau orange plein qui déborde du padding de la carte, avec icône. */
.product-single-feature-list li.feature-category-title {
    background: #ff5421;
    margin: -20px -20px 10px;
    padding: 14px 20px;
    width: calc(100% + 40px);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
}
.product-single-feature-list li.feature-category-title h6 {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    color: #ffffff;
}
.product-single-feature-list li.feature-category-title h6 .material-icons {
    color: #ffffff;
    font-size: 20px;
}
/* Le bandeau plein ci-dessus déborde volontairement de -20px pour compenser
   le padding de .common-card (22px 25px 25px) — mais sous 575px, .common-card
   passe à padding:0 (voir main-ltr.css), donc cette même marge négative fait
   déborder le bandeau hors de l'écran au lieu de juste combler le padding. */
@media (max-width: 575px) {
    .product-single-feature-list li.feature-category-title {
        margin: 0 0 10px;
        width: 100%;
    }
}
.product-single-finition-list li span.price{
    direction: ltr;
}
/* Badge promo pour les cartes modèles */
.badge.promo {
    background: #e63946;
}
.product-feature-badge {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.price-range-widget input[type="range"]::-webkit-slider-thumb {
                            pointer-events: all; -webkit-appearance: none;
                            width: 18px; height: 18px; border-radius: 50%;
                            background: #e63946; border: 3px solid #fff; box-shadow: 0 0 3px rgba(0,0,0,0.4);
                            cursor: pointer; margin-top: 3px;
                        }
                        .price-range-widget input[type="range"]::-moz-range-thumb {
                            pointer-events: all; -moz-appearance: none; appearance: none;
                            width: 18px; height: 18px; border-radius: 50%;
                            background: #e63946; border: 3px solid #fff; box-shadow: 0 0 3px rgba(0,0,0,0.4);
                            cursor: pointer;
                        }
                        .price-range-widget input[type="range"]::-webkit-slider-runnable-track { background:none; }
                        .price-range-widget input[type="range"]::-moz-range-track { background:none; }

/* Formulaire de création d'annonce (occasion) */
.listing-section {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    padding: 25px;
    margin-bottom: 22px;
}
.listing-section-title {
    color: #9a9fa8;
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 20px;
    text-transform: none;
}
.listing-section-next {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
.listing-section-hidden {
    display: none;
}
.listing-hint {
    color: #9a9fa8;
    font-size: 13px;
    margin-top: 8px;
}
.listing-toggle {
    display: inline-flex;
    border: 1px solid #e3e3e8;
    border-radius: 6px;
    overflow: hidden;
}
.listing-toggle-btn {
    padding: 10px 34px;
    border: none;
    background: #f1f2f3;
    color: #666;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: background .15s, color .15s;
}
.listing-toggle-btn.active {
    background: #e63946;
    color: #fff;
}
.listing-equipment-category h6 {
    font-weight: 700;
    margin: 22px 0 12px;
    font-size: 14px;
}
.listing-equipment-category:first-child h6 { margin-top: 0; }
.listing-equipment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 20px;
}
@media (max-width: 767px) {
    .listing-equipment-grid { grid-template-columns: 1fr; }
    .common-card.product-single-feature-list, .product-single-finition-list,.product-single-feature-list, .product-single-finition-list{ width: 95vw;}
}
.listing-equipment-grid .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 0;
    margin-bottom: 0;
}
.listing-equipment-grid .form-check-input {
    float: none;
    margin: 0;
    flex-shrink: 0;
}
.listing-equipment-grid .form-check-label {
    text-transform: none;
}
.listing-dropzone {
    border: 2px dashed #dcdcdc;
    border-radius: 8px;
    padding: 45px 20px;
    text-align: center;
    cursor: pointer;
    background: #fafafa;
    transition: border-color .15s, background .15s;
}
.listing-dropzone.dragover {
    border-color: #e63946;
    background: #fff5f5;
}
.listing-dropzone .material-icons {
    font-size: 42px;
    color: #b7bbc3;
}
.listing-photo-count {
    font-size: 13px;
    color: #666;
    margin: 12px 0;
}
.listing-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}
.listing-photo-item {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 1;
    background: #eee;
}
.listing-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.listing-photo-remove {
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    line-height: 1;
    cursor: pointer;
    font-size: 16px;
}
.listing-photo-main-badge {
    display: none;
    position: absolute;
    top: 4px;
    inset-inline-start: 4px;
    z-index: 2;
    background: #ff5421;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 3px 8px;
    border-radius: 4px;
}
/* Photos déjà enregistrées : l'ordre du DOM reflète toujours la colonne
   'order' persistée (déplacer un élément dans le JS suffit), donc la
   première de la grille est toujours la photo principale, en CSS pur. */
#listing-existing-photos [data-photo-item]:first-child .listing-photo-main-badge {
    display: inline-block;
}
/* Nouvelles photos (pas encore envoyées) : uniquement la toute première de
   TOUTE la galerie (existantes + nouvelles combinées) — voir
   showMainBadgeOnFirstNewPhoto() qui bascule .is-main en JS. */
#listing-photo-grid [data-photo-item].is-main .listing-photo-main-badge {
    display: inline-block;
}
.listing-photo-actions {
    position: absolute;
    bottom: 4px;
    inset-inline-start: 4px;
    inset-inline-end: 4px;
    display: flex;
    justify-content: center;
    gap: 4px;
}
.listing-photo-move,
.listing-photo-set-main {
    background: rgba(0, 0, 0, .65);
    color: #fff;
    border: none;
    border-radius: 4px;
    min-width: 24px;
    height: 22px;
    line-height: 1;
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
}
.listing-photo-set-main {
    color: #ffcc00;
    font-size: 12px;
}

/* Select recherchable (marque / modèle) : la base commune vit dans
   searchable-select.css (chargée aussi côté admin) ; ici on ne fait que
   réaligner le déclencheur sur les dimensions du .form-select du thème
   public (47px, radius 6px), différentes de celles de l'admin (Bootstrap
   standard, resté sur la base commune). */
.searchable-select__trigger {
    height: 47px;
    padding: 0 16px;
    border-radius: 6px;
    font-size: 16px;
    letter-spacing: .3px;
    color: #444;
}
.searchable-select.is-open .searchable-select__trigger {
    border-color: #ff5421;
}
.searchable-select__search input {
    border-color: #ff5421;
}
.searchable-select__options li.is-selected {
    background: #fff3ee;
    color: #ff5421;
}

/* Galerie fiche annonce (occasion) */
.listing-gallery-main {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: #eee;
}
.listing-gallery-main-item {
    position: absolute;
    inset: 0;
    display: none;
    cursor: zoom-in;
}
.listing-gallery-main-item.active {
    display: block;
}
.listing-gallery-main-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Frein basique à l'enregistrement (clic droit / appui long mobile) — dissuasif
   uniquement, ne bloque pas une capture d'écran ou les outils développeur. */
.listing-gallery-main-item img,
.listing-gallery-thumb img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
.listing-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.listing-gallery-thumb {
    flex: 0 0 auto;
    width: 90px;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: #eee;
    opacity: .6;
    transition: opacity .15s, border-color .15s;
}
.listing-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.listing-gallery-thumb.active,
.listing-gallery-thumb:hover {
    opacity: 1;
    border-color: #e63946;
}
@media (max-width: 575px) {
    .listing-gallery-thumb { width: 70px; }
}

/* Encadré prix + caractéristiques + contact (fiche annonce) */
.listing-sidebar-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eee;
}
.listing-sidebar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.listing-sidebar-price .favorite {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e3e3e8;
    background: #fff;
    color: #9a9fa8;
    cursor: pointer;
}
.listing-sidebar-price .favorite i {
    font-size: 20px;
}
.listing-sidebar-price .favorite.active,
.listing-sidebar-price .favorite:hover {
    color: #e63946;
    border-color: #e63946;
}
.listing-quickspecs {
    list-style: none;
    margin: 0;
    padding: 0;
}
.listing-quickspecs li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f2f3;
    font-size: 14px;
}
.listing-quickspecs li:last-child {
    border-bottom: none;
}
.listing-quickspecs .q-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
}
.listing-quickspecs .q-label i {
    font-size: 18px;
    color: #9a9fa8;
}
.listing-quickspecs .q-value {
    font-weight: 600;
    text-align: left;
}
.listing-sidebar-contact {
    margin-top: 16px;
}
.listing-sidebar-contact .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.listing-sidebar-contact-row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.listing-sidebar-contact-row a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border: 1px solid #e3e3e8;
    border-radius: 6px;
    color: #333;
    font-size: 13px;
}
.listing-sidebar-contact-row a:hover {
    border-color: #e63946;
    color: #e63946;
}
.listing-sidebar-contact-row i {
    font-size: 18px;
}
.listing-sidebar-contact-row a.whatsapp-contact-link {
    color: #25d366;
    border-color: #25d366;
}
.listing-sidebar-contact-row a.whatsapp-contact-link:hover {
    background: #25d366;
    color: #fff;
}
.listing-sidebar-contact-row a.whatsapp-contact-link svg {
    width: 18px;
    height: 18px;
}
.listing-details-subtitle {
    font-weight: 700;
    margin: 0 0 12px;
    font-size: 14px;
}
.feature-check {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
}
.feature-check .material-icons.check {
    font-size: 16px;
    color: #2ecc71;
    flex-shrink: 0;
}

/* Tableau de bord utilisateur */
.dash-sidebar {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    margin-bottom: 22px;
}
.dash-user {
    text-align: center;
    padding: 30px 20px;
    border-bottom: 1px solid #f1f2f3;
}
.dash-user-avatar {
    width: 70px;
    height: 70px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #f1f2f3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.dash-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dash-user-avatar .material-icons {
    font-size: 34px;
    color: #9a9fa8;
}
.dash-user h6 {
    margin: 0 0 8px;
    font-weight: 700;
}
.dash-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    background: #f1f2f3;
    color: #666;
    font-size: 12px;
    font-weight: 600;
}
.dash-badge.pro {
    background: #e63946;
    color: #fff;
}
.dash-nav {
    list-style: none;
    margin: 0;
    padding: 10px 0;
}
.dash-nav li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.dash-nav li a .material-icons {
    font-size: 20px;
    color: #9a9fa8;
}
.dash-nav li a:hover {
    background: #f9f9f9;
}
.dash-nav li a.active {
    background: rgba(230, 57, 70, .08);
    color: #e63946;
}
.dash-nav li a.active .material-icons {
    color: #e63946;
}
.dash-stat-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}
@media (max-width: 575px) {
    .dash-stat-cards { grid-template-columns: 1fr; }
}
.dash-stat-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    padding: 20px;
    text-align: center;
}
.dash-stat-card .material-icons {
    font-size: 28px;
    color: #e63946;
    margin-bottom: 8px;
}
.dash-stat-card h3 {
    margin: 0 0 4px;
    font-weight: 800;
}
.dash-stat-card p {
    margin: 0;
    color: #9a9fa8;
    font-size: 13px;
}
.dash-empty {
    text-align: center;
    padding: 60px 20px;
}
.dash-empty .material-icons {
    font-size: 50px;
    color: #d5d5d5;
    margin-bottom: 12px;
}
.dash-empty p {
    color: #9a9fa8;
    margin: 0;
}
.dash-table {
    width: 100%;
    border-collapse: collapse;
}
.dash-table th,
.dash-table td {
    padding: 12px 10px;
    text-align: right;
    border-bottom: 1px solid #f1f2f3;
    font-size: 14px;
    vertical-align: middle;
}
.dash-table th {
    color: #9a9fa8;
    font-weight: 600;
    font-size: 13px;
}
.dash-table img {
    width: 60px;
    height: 45px;
    object-fit: cover;
    border-radius: 4px;
}
.dash-table .badge {
    font-size: 11px;
}
.dash-table-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.dash-table-actions a,
.dash-table-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #e3e3e8;
    background: #fff;
    color: #666;
    cursor: pointer;
}
.dash-table-actions a:hover {
    color: #e63946;
    border-color: #e63946;
}
.dash-table-actions .delete:hover {
    color: #e63946;
    border-color: #e63946;
}
.dash-table-actions .material-icons {
    font-size: 18px;
}
.dash-table-actions form {
    display: contents;
}
.product-grid-btn form {
    display: contents;
}
.product-grid-btn button.favorite {
    width: 100%;
    padding: 8px 0;
    border: none;
    border-radius: 6px;
    color: #5e5d72;
    background: var(--bs-gray-300);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.product-grid-btn button.favorite.active,
.product-grid-btn button.favorite:hover {
    color: #fff;
    background: #e63946;
}

/* Page showroom (dealer) */
.dealer-header {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    margin-bottom: 30px;
}
.dealer-cover {
    width: 100%;
    height: 220px;
    background: #eee;
}
.dealer-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dealer-header-body {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0 25px 20px;
}
.dealer-logo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 5px solid #fff;
    background: #f1f2f3;
    margin-top: -50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.dealer-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dealer-logo .material-icons {
    font-size: 40px;
    color: #9a9fa8;
}
.dealer-info {
    flex: 1 1 auto;
    padding-top: 16px;
}
.dealer-info h3 {
    margin: 0 0 8px;
    font-weight: 700;
}
.dealer-info-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.dealer-info-meta li {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 13px;
}
.dealer-info-meta .material-icons {
    font-size: 16px;
    color: #9a9fa8;
}
.dealer-actions {
    display: flex;
    gap: 10px;
    padding-top: 16px;
}
.dealer-description {
    padding: 0 25px 25px;
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.8;
    border-top: 1px solid #f1f2f3;
    padding-top: 20px;
}
@media (max-width: 575px) {
    .dealer-cover { height: 140px; }
    .dealer-logo { width: 80px; height: 80px; margin-top: -40px; }
}

/* Liste des finitions (page modèle) : la propriété justify-content standard
   manquait dans le thème (seuls les préfixes -webkit-/-ms- étaient présents),
   ce qui laissait les éléments s'entasser sans espacement correct. */
.product-single-finition-list li {
    justify-content: space-between;
}

/* Sur mobile, le titre + le badge + les 3 boutons d'action + le prix ne
   tiennent pas sur une seule ligne en white-space:nowrap : ça se chevauche.
   On passe en flex-wrap avec le titre sur sa propre ligne, des boutons
   compacts (icône seule) et le prix bien visible. */
@media (max-width: 767px) {
    .product-single-finition-list li {
        flex-wrap: wrap;
        row-gap: 10px;
        column-gap: 8px;
        padding: 18px 0;
    }
    .product-single-finition-list li > span:first-child {
        flex: 1 1 100%;
        margin-left: 0 !important;
        white-space: normal;
    }
    .product-single-finition-list li a,
    .product-single-finition-list li button {
        padding: 8px;
        flex: 0 0 auto;
    }
    .product-single-finition-list li a span:last-child,
    .product-single-finition-list li button span:last-child {
        display: none;
    }
    .product-single-finition-list li a i,
    .product-single-finition-list li button i {
        font-size: 18px;
    }
    .product-single-finition-list li span.price {
        font-size: 15px;
    }
}

/* Le nom de la finition est un lien vers sa page de détail : on annule le
   style "bouton" générique hérité de .product-single-finition-list a. */
.product-single-finition-list a.finition-name-link {
    display: inline;
    padding: 0;
    background: none;
    color: inherit;
    text-transform: none;
}
.product-single-finition-list a.finition-name-link:hover {
    color: #e63946;
    background: none;
}

/* ==== Rubrique Actualités ==== */
.news-category-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.news-category-list li {
    border-bottom: 1px solid #eee;
}
.news-category-list li:last-child {
    border-bottom: none;
}
.news-category-list a {
    display: block;
    padding: 10px 0;
    color: #333;
    text-decoration: none;
    transition: color .2s;
}
.news-category-list a:hover,
.news-category-list a.active {
    color: #e63946;
    font-weight: 600;
}

.news-cover img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
}

.news-video-embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.news-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 8px;
}

.news-content {
    font-size: 16px;
    line-height: 1.9;
    color: #333;
}
.news-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
.news-content h2, .news-content h3, .news-content h4 {
    margin-top: 1.5em;
    margin-bottom: .6em;
}
.news-content iframe {
    max-width: 100%;
}
.news-content blockquote {
    border-right: 4px solid #e63946;
    padding: 10px 20px;
    background: #f8f9fa;
    margin: 1.5em 0;
}
.news-content .article-chart {
    position: relative;
    height: 340px;
    margin: 1.8em 0;
    padding: 20px;
    background: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 12px;
    color: #999;
    font-size: 14px;
    text-align: center;
}

.news-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.news-gallery-item img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 6px;
}

.news-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.news-tag-badge {
    display: inline-block;
    padding: 6px 14px;
    background: #f1f1f1;
    color: #333;
    border-radius: 20px;
    font-size: 13px;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.news-tag-badge:hover {
    background: #e63946;
    color: #fff;
}

/* ==== Badges motorisation (hybride / électrique / REEV) sur les cartes voiture neuve ==== */
.product-feature-energy {
    position: absolute;
    top: 15px;
    inset-inline-end: 15px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.product-feature-energy-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.product-feature-energy-svg {
    display: block;
    width: 24px;
    height: 24px;
    background-color: #ffffff;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
.product-feature-energy-icon.energy-hybrid {
    background: #2e7d32;
}
.product-feature-energy-icon.energy-electric {
    background: #1e88e5;
}
.product-feature-energy-icon.energy-reev {
    background: #8e44ad;
}

/* ==== Badge "voiture populaire" — dernier numéro de dossier traité (commerce.gov.tn) ==== */
.popular-car-dossier-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 16px;
    background: #fff6f2;
    border: 1px solid #ffcbb3;
    border-radius: 20px;
    color: #e0430f;
    font-size: 14px;
    font-weight: 700;
}
.popular-car-dossier-badge .material-icons {
    font-size: 18px;
    color: #ff5421;
}

/* ==== Barre de filtre de la page marque : logo à gauche du tri ==== */
.top-filter-brand-logo {
    height: 40px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

/* ==== Bloc "تعديل البحث" (accordéon des filtres) ==== */
#searchFilterAccordion .accordion-button {
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #1d1d2b;
    box-shadow: none;
}
#searchFilterAccordion .accordion-button:not(.collapsed) {
    background: #fff6f2;
    color: #ff5421;
}
#searchFilterAccordion .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
}
#searchFilterAccordion .accordion-body {
    padding: 12px 16px 16px;
}
#searchFilterAccordion .product-widget-list {
    margin-bottom: 0;
}

/* Barre de puces (filtres actifs) collée sous le header fixe, AU-DESSUS de
   .top-filter — voir partials/_filter_chips_bar.blade.php. Le décalage "top"
   est resynchronisé en JS sur la hauteur réelle du header (.header-part,
   fixed, hauteur variable selon .sticky et le retour à la ligne du menu en
   mobile), voir public/js/sticky-filter-bar.js.
   z-index:4, sous .sidebar-part.open (menu hamburger principal du site,
   z-index:5, voir main-ltr.css) : le menu doit toujours passer par-dessus
   cette barre quand il est ouvert, pas l'inverse. */
.filter-chips-bar {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #fff;
    margin: 0 -12px 20px;
    padding: 10px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.filter-chips-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    /* Une seule ligne, défilement horizontal plutôt que retour à la ligne —
       voir demande d'origine. */
    flex-wrap: nowrap;
    scrollbar-width: none;
}
.filter-chips-scroll::-webkit-scrollbar {
    display: none;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    background: #fff;
    color: #1d1d2b;
    border: 1px solid #e3e3e3;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}
.filter-chip .material-icons {
    font-size: 16px;
}
.filter-chip:hover {
    color: #ff5421;
    border-color: #ff5421;
    text-decoration: none;
}
/* Le bouton qui ouvre le panneau (pas un filtre actif à retirer) se distingue
   visuellement des puces de filtres actifs, qui elles se ferment (×). */
.filter-chip-primary,
.filter-chip-primary:hover {
    background: #ff5421;
    border-color: #ff5421;
    color: #fff;
}

.brand-filter-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1049;
}

.brand-filter-close {
    display: none;
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    background: #f1f2f3;
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

/* Titre en tête du panneau plein écran (mobile uniquement) — voir
   listings/index.blade.php et catalog-search.blade.php. */
.brand-filter-mobile-title {
    display: none;
}

/* Barre "Afficher les X résultats" collée en bas du panneau (façon
   mobile.de) — masquée sur desktop où le panneau reste une sidebar classique
   avec son propre bouton de soumission inline. */
.brand-filter-footer {
    display: none;
}

@media (max-width: 991.98px) {
    .brand-filter-panel {
        display: none;
    }
    .brand-filter-panel.is-open {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        /* Plein écran (pas un tiroir partiel) — voir demande d'origine (style
           mobile.de : le bouton "Filtrer" ouvre un panneau plein écran, pas un
           tiroir latéral étroit). */
        width: 100%;
        max-width: 100%;
        height: 100%;
        background: #fff;
        z-index: 1050;
        overflow-y: auto;
        padding: 50px 16px 20px;
    }
    .brand-filter-backdrop.is-open {
        display: block;
    }
    .brand-filter-close {
        display: flex;
    }
    .brand-filter-mobile-title {
        display: block;
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 16px;
    }
    .brand-filter-footer {
        display: block;
        /* position:sticky (pas fixed) : reste ancrée au bas du panneau
           scrollable lui-même, jamais par-dessus le contenu de la page
           derrière lui. env(safe-area-inset-bottom) : dégagement sur les
           téléphones à encoche/barre de geste (iPhone). */
        position: sticky;
        bottom: -20px;
        margin: 20px -16px -20px;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid #eee;
    }
    .brand-filter-footer .btn {
        width: 100%;
    }
}

/* ===== Bloc de recherche accueil (onglets مستعملة / جديدة) ===== */
.home-search-section {
    margin-top: 40px;
    margin-bottom: 95px;
}
.home-search-widget {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
.home-search-tabs {
    display: flex;
}
.home-search-tab {
    flex: 1;
    border: none;
    padding: 16px;
    font-weight: 700;
    font-size: 15px;
    background: #1c2434;
    color: #fff;
    cursor: pointer;
}
.home-search-tab.active {
    background: #ff5421;
    color: #fff;
}
.home-search-panel {
    padding: 24px;
}
.home-search-title {
    font-size: 17px;
    font-weight: 700;
    color: #1c2434;
    margin: 0 0 16px;
}
.home-search-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.home-search-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}
.home-search-price {
    margin-bottom: 18px;
    font-size: 14px;
}
.home-search-price .price-range-widget {
    margin-top: 12px;
}
.home-search-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.home-search-btn-secondary {
    background: #6c757d;
}
@media (max-width: 767px) {
    .home-search-actions { justify-content: stretch; }
    .home-search-actions .btn-inline { flex: 1; justify-content: center; }
}

/* ===== Page "recherche avancée" (fond blanc, accent orange) ===== */
.advanced-search-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 25px rgba(0,0,0,0.08);
    padding: 30px;
}
.advanced-search-subtitle {
    font-weight: 700;
    margin: 24px 0 14px;
}
.advanced-search-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

/* ===== Bannières promo accueil (simulateur / bornes) ===== */
.promo-banner-link {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    transition: transform .2s, box-shadow .2s;
}
.promo-banner-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}
.promo-banner-link img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== Résultats de recherche : 2 par ligne sur mobile, texte réduit en conséquence ===== */
@media (max-width: 767.98px) {
    .catalog-results-grid .product-feature-meta h3 {
        font-size: 14px;
    }
    .catalog-results-grid .product-feature-meta h4 {
        font-size: 14px;
    }
    .catalog-results-grid .product-feature-meta h4 span {
        font-size: 11px;
    }
}

/* Switcher de langue AR/FR (header, drapeaux) */
.header-widget.lang-switch {
    column-gap: 6px;
    flex-shrink: 0;
    margin-inline: 12px;
}
.lang-flag {
    display: flex;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid transparent;
    opacity: .55;
    transition: all .2s;
}
.lang-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lang-flag:hover {
    opacity: .85;
}
.lang-flag.active {
    opacity: 1;
    border-color: #ff5421;
}

/* Switcher de langue AR/FR (sidebar) */
.lang-toggle {
    display: flex;
    gap: 6px;
    background: #f1f2f3;
    border-radius: 8px;
    padding: 4px;
}
.lang-toggle-btn {
    flex: 1;
    text-align: center;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #5e5d72;
    transition: all .2s;
}
.lang-toggle-btn:hover {
    color: #ff5421;
}
.lang-toggle-btn.active {
    background: #ff5421;
    color: #fff;
}

/* Liste des finitions (fiche modèle) : les 3 boutons (détails / devis /
   comparer) sont regroupés dans .finition-actions pour pouvoir les traiter
   comme un seul bloc — même rendu qu'avant sur desktop (juste un span de
   plus autour). */
.product-single-finition-list li .finition-actions {
    display: flex;
    align-items: center;
}

/* Le thème d'origine pousse le span:first-child d'un <li> avec un margin
   auto (main.css / main-ltr.css) pour séparer nom et actions — mais son
   sélecteur n'est pas limité à l'enfant direct de <li> : il attrape aussi
   le premier bouton niché dans .finition-actions et le repousse tout seul
   à l'opposé des deux autres, créant un grand vide au milieu de la ligne
   (visible à toutes les tailles d'écran, pas seulement en mobile). */
.product-single-finition-list li .finition-actions > span:first-child {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Nom + 3 boutons (libellés complets) + prix ne tiennent plus sur une seule
   ligne dès qu'on descend sous ~1000px (pas seulement en mobile — les
   tablettes, 768-991px, débordaient aussi, un bouton coupé hors de l'écran).
   On force 3 lignes fixes — nom / boutons / prix — au lieu de compter sur un
   flex-wrap dont le résultat dépend de la largeur exacte de chaque bouton.
   991.98px = seuil "lg" de Bootstrap, déjà utilisé ailleurs dans le projet. */
@media (max-width: 991.98px) {
    .product-single-finition-list li {
        flex-wrap: wrap;
        row-gap: 8px;
    }
    .product-single-finition-list li > span:first-child {
        flex: 1 0 100%;
        margin-right: 0 !important;
    }
    .product-single-finition-list li .finition-actions {
        flex: 1 0 100%;
        justify-content: flex-end;
        flex-wrap: nowrap;
        row-gap: 6px;
    }
    .product-single-finition-list li span.price {
        flex: 1 0 100%;
        order: 10;
        padding-right: 0;
        text-align: end;
    }
}

/* Slider bannière (page d'accueil) : le thème RTL colle le bloc titre/texte/bouton
   contre le bord "start" du conteneur, qui devient le bord droit en arabe — on le
   fixe physiquement à gauche dans les 2 langues pour une mise en page cohérente. */
.banner-slider .banner-content {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Slider bannière (page d'accueil) : le thème ne prévoit qu'un seul palier
   <=767px pour tablette et mobile confondus, avec un H1 encore à 43px — sur un
   vrai téléphone (portrait ~360-430px comme en paysage ~650-930px) le H1 +
   les gros paddings/espacements en font une bannière disproportionnée, et la
   liste email/téléphone (3e slide) déborde avec ses icônes 50px et son
   column-gap de 50px. On resserre tout sur l'intégralité du palier mobile
   (même seuil <=767px que le thème, mais chargé après lui donc prioritaire).

   La diapo (fond "cover") ne fait que la hauteur de son contenu, calculée en
   JS par Slick à chaque changement de diapo (mode fade => animateHeight()) —
   on ne peut donc pas lui imposer une min-height/flex en CSS pur sans risquer
   de désynchroniser cette mesure JS (vu en pratique : les diapos se
   chevauchent brièvement au changement, glitch visuel sous le header). On
   laisse Slick mesurer normalement et on donne juste plus de respiration
   (padding) autour du pavé de texte déjà réduit, pour que l'image reste
   visible au-dessus/en dessous sans toucher au display/à la hauteur de la
   diapo elle-même. */
@media (max-width: 767px) {
    .banner-overlay {
        padding: 70px 0 45px;
    }
    .banner-content {
        max-width: 100%;
    }
    .banner-content h1 {
        font-size: 24px;
        line-height: 1.3;
        padding: 12px 14px;
        margin-bottom: 10px;
    }
    .banner-content p {
        font-size: 14px;
        padding: 12px 14px;
        margin-bottom: 20px;
    }
    .banner-content ul {
        column-gap: 16px;
        row-gap: 12px;
        margin-bottom: 22px;
    }
    .banner-content ul li {
        gap: 10px;
    }
    .banner-content ul li i {
        width: 36px;
        height: 36px;
        line-height: 36px;
        font-size: 18px;
    }
    .banner-content ul li span {
        font-size: 14px;
    }
    .banner-content ul li span small {
        font-size: 12px;
    }
    .banner-content .btn.btn-inline {
        padding: 10px 18px;
        font-size: 13px;
    }
}

/* ===== Fiche finition : mise en avant du bouton simulateur d'économies =====
   Bleu (au lieu de l'orange de marque, déjà utilisé par "Demander un devis"
   juste à côté) pour que ce bouton se distingue clairement des autres actions,
   avec une pulsation pour inviter au clic. */
.product-single-action a.ev-simulator-highlight {
    background: #1a73e8;
    color: #fff;
    animation: ev-sim-pulse 2s ease-out infinite;
}
.product-single-action a.ev-simulator-highlight:hover {
    background: #1558b0;
}
.product-single-action a.ev-simulator-highlight i {
    animation: ev-sim-bolt 1.6s ease-in-out infinite;
}
@keyframes ev-sim-pulse {
    0% { box-shadow: 0 0 0 0 rgba(26, 115, 232, .55); }
    70% { box-shadow: 0 0 0 12px rgba(26, 115, 232, 0); }
    100% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0); }
}
@keyframes ev-sim-bolt {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.2) rotate(-10deg); }
}
@media (prefers-reduced-motion: reduce) {
    .product-single-action a.ev-simulator-highlight,
    .product-single-action a.ev-simulator-highlight i {
        animation: none;
    }
}

/* ===== Fiche finition : un seul bouton "Partager", qui déploie les réseaux
   sociaux colorés au clic (au lieu d'une rangée de boutons Facebook/WhatsApp/
   X/Copier le lien occupant chacun une case de la grille .product-single-action) ===== */
.share-dropdown {
    position: relative;
    display: inline-block;
    margin-top: 14px;
}
.share-dropdown .js-share-toggle {
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    background: #f1f2f3;
    color: #5e5d72;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all linear .3s;
}
.share-dropdown .js-share-toggle i {
    font-size: 20px;
}
.share-dropdown .js-share-toggle span {
    font-size: 16px;
    margin-left: 6px;
    text-transform: capitalize;
    white-space: nowrap;
}
.share-dropdown .js-share-toggle:hover,
.share-dropdown.is-open .js-share-toggle {
    color: #fff;
    background: #ff5421;
}
/* Fiche finition : le bouton "Partager" est une case de la grille
   .product-single-action (comme ses voisins comparateur/devis) — il doit donc
   remplir la case plutôt que garder sa largeur naturelle de pilule. */
.product-single-action .share-dropdown {
    display: block;
    margin-top: 0;
}
.product-single-action .share-dropdown .js-share-toggle {
    width: 100%;
    height: 100%;
}

/* Annonce (fiche détail) : bouton de partage compact, en rond, aligné à côté
   du cœur "favoris" plutôt qu'en pilule pleine largeur. */
.share-dropdown--compact {
    margin-top: 0;
}
.share-dropdown--compact .js-share-toggle {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #e3e3e8;
    background: #fff;
    color: #9a9fa8;
}
.share-dropdown--compact .js-share-toggle:hover,
.share-dropdown--compact.is-open .js-share-toggle {
    color: #e63946;
    border-color: #e63946;
    background: #fff;
}
.share-dropdown--compact .share-dropdown-menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.share-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-start: 0;
    z-index: 20;
    display: flex;
    gap: 10px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
    padding: 12px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(.95);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.share-dropdown.is-open .share-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.share-option {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    transition: transform .15s ease, box-shadow .15s ease;
}
.share-option:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .2);
}
.share-option i {
    font-size: 20px;
}
.share-option--facebook { background: #1877f2; }
.share-option--whatsapp { background: #25d366; }
.share-option--twitter { background: #000000; }
.share-option--copy { background: #6c757d; position: relative; }
.share-option--copy.is-copied { background: #25d366; }
.share-option--copy.is-copied::after {
    content: attr(data-copied-label);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #212529;
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    padding: 4px 9px;
    border-radius: 5px;
}

@media (max-width: 575px) {
    .share-dropdown-menu {
        inset-inline-start: auto;
        inset-inline-end: 0;
    }
}

/* ===== Accueil : carrousel "Voitures populaires" ===== */
.popular-cars-slider.slick-initialized .slick-slide {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
}

/* ===== Popup galerie annonce (venobox) : image taille originale, adaptée à l'écran =====
   max-width et max-height combinés sur une image sans width/height forcés font que le
   navigateur la réduit pour tenir dans les deux dimensions à la fois (jamais plus grande
   que l'écran), en conservant ses proportions, sans jamais l'agrandir au-delà de sa taille
   réelle. */
.vbox-container img.vbox-figlio {
    max-height: 88vh;
    width: auto;
    height: auto;
}

/* ===== Liste occasion : carte entière cliquable =====
   .product-grid-card est un <div> partout ailleurs (accueil, favoris, showroom...) —
   cette règle ne s'applique qu'à la page /occasion, où la carte est un <a>. */
a.product-grid-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ===== Page 404 ===== */
.error-404-code {
    font-size: 130px;
    font-weight: 700;
    line-height: 1;
    color: #ff5421;
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.error-404-title {
    margin-bottom: 14px;
}
.error-404-text {
    color: #5e5d72;
    margin-bottom: 34px;
}
.error-404-search {
    position: relative;
    max-width: 460px;
    margin: 0 auto 34px;
}
.error-404-search input {
    width: 100%;
    height: 54px;
    border: 1px solid #e7e7ec;
    border-radius: 30px;
    padding: 0 60px 0 24px;
    font-size: 15px;
}
[dir="rtl"] .error-404-search input {
    padding: 0 24px 0 60px;
}
.error-404-search button {
    position: absolute;
    top: 50%;
    inset-inline-end: 6px;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: #ff5421;
    color: #fff;
}
.error-404-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
@media (max-width: 575px) {
    .error-404-code {
        font-size: 80px;
    }
    .error-404-actions {
        flex-direction: column;
    }
    .error-404-actions .btn {
        width: 100%;
        justify-content: center;
        display: flex;
    }
}

/* Bouton "Continuer avec Google" (connexion / inscription) — volontairement
   distinct du .form-btn orange plein (action secondaire, pas l'action
   principale du formulaire), suit la convention visuelle standard des
   boutons Google (fond blanc, bordure grise, texte sombre). */
.auth-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 47px;
    border-radius: 6px;
    border: 1px solid #dcdfe4;
    background: #fff;
    color: #3c4043;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 18px;
    transition: background-color .15s ease, box-shadow .15s ease;
}
.auth-google-btn:hover {
    background: #f8f9fa;
    color: #3c4043;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* Bouton "Continuer avec Facebook" — même gabarit que .auth-google-btn,
   fond bleu plein (couleur de marque officielle Facebook #1877F2) au lieu du
   blanc/gris de Google, pour rester reconnaissable des deux côtés. */
.auth-facebook-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 47px;
    border-radius: 6px;
    border: 1px solid #1877f2;
    background: #1877f2;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 18px;
    transition: background-color .15s ease, box-shadow .15s ease;
}
.auth-facebook-btn:hover {
    background: #166fe0;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #9aa0a6;
    font-size: 12px;
    margin-bottom: 18px;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e5e5e5;
}
.auth-divider span {
    padding: 0 12px;
}

/* Icône "vendre voiture" (SVG inline remplaçant le glyphe de police
   material-icons "sell") — l'icône hérite la taille de police et la couleur
   déjà définies par chaque contexte (.btn i, .mobile-menu a i, ...) via em
   et currentColor, pour ne rien casser des mises en page existantes. */
.icon-sell-car {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.icon-sell-car svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

/* ===== Module commentaires (fiches finition neuve + article) =====
   Rendu principal (.comment-item, .comment-head, .comment-reply,
   .comment-action*...) fourni par le thème (main.css/main-ltr.css ~L6450) —
   uniquement les compléments qu'il ne couvre pas ci-dessous. */

/* Le thème stylise .comment-action-list a (menu d'actions), mais l'action
   "Supprimer" doit être un vrai <button type="submit"> dans un <form method="POST">
   (suppression = action destructive, pas un simple lien) — on étend le même
   style au bouton. */
.comment-action-list form {
    margin: 0;
}
.comment-action-list button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 25px;
    padding-left: 15px;
    text-transform: capitalize;
    color: #5e5d72;
    background: none;
    border: none;
    font-size: 15px;
    transition: color linear .3s;
}
.comment-action-list button:hover {
    color: #ff5421;
}
.comment-action-list button i {
    font-size: 18px;
    margin-right: 8px;
}

/* data-reply-toggle bascule .hidden natif (voir partials/_comments.blade.php) —
   le thème ne prévoit pas de style de formulaire de réponse dédié, on réutilise
   .form-control/.btn standards, juste un peu d'espacement. */
.comment-reply-form {
    margin-top: 12px;
}
.comment-reply-form textarea {
    resize: vertical;
}