/* =========================================================================
   style2.css — feuille de style dédiée aux ÉVOLUTIONS DE FONCTIONNALITÉS
   (thème enfant).

   Objectif : ne plus jamais avoir à comparer le style.css d'un ancien site
   à celui de devsystem pour savoir ce qui a changé. Toute nouvelle
   fonctionnalité développée à partir de maintenant ajoute son CSS ICI,
   dans un bloc daté et commenté — jamais dans style.css.
   ========================================================================= */


/* -------------------------------------------------------------------------
   Catalogue d'équipements éditable (tableau de bord propriétaire)
   Ajouté le 2026-09-09, redessiné le 2026-09-11 (retour client Albert & Célestine :
   textes en anglais, boutons trop discrets, page trop haute).
   ------------------------------------------------------------------------- */

.catalog-feature-block {
    border: 1px solid #e3e3e8;
    border-radius: 8px;
    padding: 8px 14px;
    margin-bottom: 6px;
    background: #fff;
}

.catalog-feature-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    -webkit-user-select: none;
    user-select: none;
    padding: 4px 0;
}

.catalog-feature-drag-handle {
    cursor: grab;
    color: #9a9aa2;
    font-size: 15px;
}

.catalog-feature-arrow {
    display: inline-block;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.catalog-feature-arrow::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f107"; /* chevron-down */
}

.catalog-feature-block.is-open .catalog-feature-arrow {
    transform: rotate(180deg);
}

.catalog-feature-items {
    display: none;
    padding-top: 8px;
}

.catalog-feature-block.is-open .catalog-feature-items {
    display: block;
}

.catalog-feature-items::after {
    content: "";
    display: table;
    clear: both;
}

.catalog-feature-item {
    margin-bottom: 4px;
}

.catalog-feature-item p {
    margin-bottom: 0;
}

/* Rangée d'ajout d'équipement / catégorie, plus compacte et boutons redessinés */
.catalog-add-feature-row,
.catalog-add-category-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
}

.catalog-add-category-row {
    margin: 12px 0;
}

.catalog-add-feature-row .form-control,
.catalog-add-category-row .form-control {
    max-width: 320px;
    margin-bottom: 0;
    height: 36px;
}

.catalog-add-feature-btn,
.catalog-add-category-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #333;
    color: #fff;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.catalog-add-feature-btn::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f067"; /* plus */
    font-size: 11px;
}

.catalog-add-feature-btn:hover,
.catalog-add-category-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.catalog-add-category-btn {
    background-color: #45cd72;
}

.catalog-add-category-btn::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f07b"; /* folder-plus look-alike (dossier) */
    font-size: 11px;
}

/* Bloc de préférence d'affichage (déplié/replié), plus compact */
.catalog-display-pref-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin: 10px 0 14px;
    padding: 10px 16px;
    background: #f7f7fa;
    border-radius: 8px;
}

.catalog-display-pref-label {
    font-weight: 500;
    color: #484848;
}

.catalog-display-pref-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    margin-bottom: 0;
    cursor: pointer;
}

.catalog-display-pref-option input[type="radio"] {
    margin: 0;
}

/* -------------------------------------------------------------------------
   Suppression d'une catégorie ou d'un équipement, ajoutée le 2026-09-14.
   ------------------------------------------------------------------------- */
.catalog-delete-category-btn {
    margin-left: auto;
    color: #b8474f;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.catalog-delete-category-btn:hover {
    color: #841820;
}

.catalog-feature-item p {
    display: flex;
    align-items: center;
    gap: 6px;
}

.catalog-delete-feature-btn {
    color: #b8474f;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
}

.catalog-delete-feature-btn:hover {
    opacity: 1;
    color: #841820;
}

.ui-sortable-helper.catalog-feature-block {
    box-shadow: 0 4px 14px rgba(20, 20, 30, 0.15);
}

/* La règle .edit_custom_period a été retirée d'ici le 2026-09-14 et fusionnée
   dans wprentals/style.css avec .delete_custom_period (refonte complète du
   tableau de périodes tarifaires, boutons redessinés en icônes). */


/* =============================================================================
   CALENDRIER DES TARIFS — grille compacte 3x3 (v2, corrige le débordement)
   =============================================================================
   Les mini-calendriers avaient une largeur minimale fixe de ~396px, ce qui
   ne permettait d'en afficher que 2 côte à côte, même sur un grand écran
   (impossible sur un MacBook sans défilement horizontal). Réduit à une
   grille de 3 colonnes CSS Grid (plus fiable que du flex+calcul manuel de
   largeur, qui provoquait un débordement sur la 3e colonne), avec un
   tableau forcé à occuper exactement 100% de sa carte (table-layout: fixed)
   pour qu'il ne puisse jamais dépasser, quel que soit le contenu.
   Ne concerne QUE le calendrier des tarifs (#custom_price_wrapper) —
   les autres calendriers du thème ne sont pas affectés.
   ============================================================================= */

#custom_price_wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

#custom_price_wrapper .booking-calendar-wrapper-in-price {
    min-width: 0;
    max-width: none;
    width: 100%;
    min-height: auto;
    box-sizing: border-box;
    overflow: hidden;
    float: none;
}

#custom_price_wrapper .booking-calendar-wrapper-in-price .month-title {
    font-size: 12px;
    padding: 8px 0px;
}

#custom_price_wrapper .booking-calendar-wrapper-in-price .has_future,
#custom_price_wrapper .booking-calendar-wrapper-in-price .has_past {
    padding: 3px 1px 6px 1px !important;
    font-size: 10px;
}

#custom_price_wrapper .booking-calendar-wrapper-in-price td {
    padding: 4px 0px 0px 0px;
}

#custom_price_wrapper table.booking-calendar {
    width: 100%;
    table-layout: fixed;
    padding: 0px 4px;
    box-sizing: border-box;
}

#custom_price_wrapper table.booking-calendar th {
    font-size: 10px;
    padding: 4px 0px;
}

/* En dessous de 1100px environ (tablette), repasse à 2 par ligne pour
   garder une taille de texte confortable plutôt que de continuer à
   rétrécir indéfiniment. */
@media (max-width: 1100px) {
    #custom_price_wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #custom_price_wrapper .booking-calendar-wrapper-in-price .has_future,
    #custom_price_wrapper .booking-calendar-wrapper-in-price .has_past {
        font-size: 12px;
        padding: 6px 2px 8px 2px !important;
    }
}

/* En dessous de 650px (mobile), une seule colonne. */
@media (max-width: 650px) {
    #custom_price_wrapper {
        grid-template-columns: 1fr;
    }
}

/* Étiquettes de prix (.price-day, .custom_set_price) dans la grille 3x3
   du calendrier de tarifs — réduites pour rester lisibles dans des
   cartes plus petites. */
#custom_price_wrapper .price-day,
#custom_price_wrapper .custom_set_price {
    font-size: 10px;
    padding: 1px 7px;
}

/* Widget de réservation : « Arrivée : » / « Départ : » devant la date choisie.
   Le préfixe n'apparaît que lorsqu'une date est renseignée (le placeholder prend sinon la place). */
.booking_date_prefix {
    display: none;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    font-weight: 600;
    color: #000;
    pointer-events: none;
    z-index: 2;
}
#start_date:not(:placeholder-shown) + .booking_date_prefix,
#end_date:not(:placeholder-shown) + .booking_date_prefix {
    display: block;
}
#booking_form_request #start_date:not(:placeholder-shown),
#booking_form_request #end_date:not(:placeholder-shown) {
    text-align: left;
    padding-left: 92px;
}