/**
 * TimeHub — timehub-ui.css
 *
 * Styles partagés par TOUS les templates : overlay fullscreen, bouton fermer,
 * bouton zoom et boutons carousel.
 *
 * Règle d'architecture :
 *   - Ce fichier contient UNIQUEMENT l'apparence (couleurs, ombres, transitions).
 *   - Le positionnement (top/left/width/height) reste dans chaque calendar.css de template.
 *   - Les règles des templates ont une spécificité plus haute ([data-template="XXXX"])
 *     et écrasent naturellement les règles de base définies ici.
 *
 * Chargé une seule fois par le Loader (class-loader.php).
 *
 * @version 3.0.0
 */

/* ============================================================
   1. VERROU DE DÉFILEMENT — empêche le scroll pendant l'overlay
   ============================================================ */

body.timehub-fullscreen-active {
    overflow: hidden;
}

/* ============================================================
   2. OVERLAY FULLSCREEN — base commune
   ============================================================ */

#timehub-fullscreen-overlay {
    position        : fixed;
    inset           : 0;
    background      : rgba(0, 0, 0, 0.65);
    z-index         : 99999;
    display         : flex;
    align-items     : center;
    justify-content : center;
    backdrop-filter : blur(5px);
    opacity         : 0;
    visibility      : hidden;
    transition      : opacity .3s ease, visibility .3s ease;
}

#timehub-fullscreen-overlay.active {
    opacity    : 1;
    visibility : visible;
}

/* ============================================================
   3. BOUTON FERMER (✕)
   ============================================================ */




#timehub-fullscreen-overlay .timehub-fullscreen-close {
    position         : absolute;
    top              : 16px;
    right            : 16px;
    background-color : #cc0000;
    color            : #ffffff;
    border           : none;
    border-radius    : 6px;
    font-size        : 20px;
    font-weight      : bold;
    line-height      : 1;
    padding          : 6px 14px;
    cursor           : pointer;
    z-index          : 100000;
    transition       : background-color 0.15s ease, color 0.15s ease;
}

#timehub-fullscreen-overlay .timehub-fullscreen-close:hover {
    background-color : #ffffff;
    color            : #cc0000;
}







/* ============================================================
   4. BOUTON ZOOM (loupe) — apparence uniquement
   Position / dimensions / opacity définies dans chaque calendar.css
   ============================================================ */

.btn-fullscreen-toggle {
    border-radius    : 50%;
    background-color : #205081;
    color            : white;
    border           : 2px solid #fff;
    box-shadow       : 0 4px 10px rgba(0, 0, 0, 0.3);
    display          : flex;
    align-items      : center;
    justify-content  : center;
    cursor           : pointer;
    z-index          : 100;
    transition       : opacity .4s ease, transform .4s ease;
    padding          : 0;
}

.btn-fullscreen-toggle:hover {
    background-color : #163a5f;
}

/* Icône SVG */
.btn-fullscreen-toggle svg {
    width       : 52%;
    height      : auto;
    fill        : white;
    display     : block;
    flex-shrink : 0;
}

/* Fallback Dashicons si SVG absent */
.btn-fullscreen-toggle .dashicons {
    font-size   : 20px;
    width       : 20px;
    height      : 20px;
    margin      : 0;
    line-height : 1;
}

/* Masquer le bouton zoom dans l'overlay (clone) — évite la récursion */
#timehub-fullscreen-overlay .btn-fullscreen-toggle {
    display : none !important;
}

/* ============================================================
   5. BOUTON CAROUSEL (‹ ›) — apparence uniquement
   Taille (cqh) et position (.th-carousel-controls) dans chaque calendar.css
   ============================================================ */

.btn-carousel {
    border-radius   : 50%;
    background      : #205081;
    color           : #fff;
    border          : 2px solid #fff;
    box-shadow      : 0 4px 10px rgba(0, 0, 0, 0.3);
    display         : flex;
    align-items     : center;
    justify-content : center;
    cursor          : pointer;
    pointer-events  : auto;
    transition      : background .2s, opacity .2s;
    padding         : 0;
}

.btn-carousel:hover {
    background : #163a5f;
    opacity    : 1;
}

/* ============================================================
   6. CHAMPS COMMUNS — SELECT, INPUT, TEXTAREA
   Modèle : template_0003 /**** 
   ============================================================ */

.timehub-wrapper .gcw-select,
.timehub-wrapper .gcw-input {
    width         : 100%;
    padding       : 6px 8px;
    border        : 1px solid #35608d;
    border-radius : 4px;
    font-size     : 13px;
    background    : #fff;
    color         : #333;
    outline       : none;
    transition    : border-color .2s;
}

.timehub-wrapper .gcw-select:focus,
.timehub-wrapper .gcw-input:focus {
    border-color : #3688D4;
}

.timehub-wrapper .gcw-textarea {
    width         : 100%;
    padding       : 6px 8px;
    border        : 1px solid #ced4da;
    border-radius : 4px;
    font-size     : 13px;
    background    : #fff;
    color         : #333;
    outline       : none;
    resize        : vertical;
    font-family   : inherit;
    transition    : border-color .2s;
}

.timehub-wrapper .gcw-textarea:focus {
    border-color : #3688D4;
}

/* ============================================================
   7. SÉLECTEUR ANNÉE (+/-)
   Modèle : template_0003
   ============================================================ */

.timehub-wrapper .year-wrapper {
   /* background-color: orange;
    padding: 5px;*/
    display         : flex;
    align-items     : center;
    gap             : 0;
    justify-content : center;
    width           : 100%;
}

.timehub-wrapper .year-wrapper input[type="number"] {
    flex            : 1;
    min-width       : 50px;
    height          : 4.3cqh;
    max-height      : 30px;
    min-height      : 36px;
    text-align      : center !important;
    padding         : 0;
    margin          : 0;
    border          : none;
    border-top      : 1px solid #35608d;
    border-bottom   : 1px solid #35608d;
    border-radius   : 0;
    font-size       : 14px;
    font-weight     : 500;
    color           : #333;
    background      : #fff;
    -moz-appearance : textfield;
    box-sizing      : border-box;
    outline         : none;
}

.timehub-wrapper .year-wrapper input[type="number"]::-webkit-inner-spin-button,
.timehub-wrapper .year-wrapper input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance : none;
    margin             : 0;

}

.timehub-wrapper .year-btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    border          : 1px solid #205081 !important;
    margin          : 0;
    width           : 40px !important;
    /*max-width       : 40px;
    min-width       : 30px;*/
    height          : 4.3cqh;
    max-height      : 30px;
    min-height      : 36px;
    background      : #205081;
    color           : #fff;
    cursor          : pointer;
    font-size: clamp(12px, 6vw, 18px);
    font-weight     : bold;
    line-height     : 1;
    opacity         : 0.9;
    padding         : 0;

}

.timehub-wrapper .year-btn:hover {
    opacity   : 1;
    transform : scale(1.05);
}

.timehub-wrapper .year-btn[data-action="year-down"] {
    border-radius : 5px 0 0 5px;
}

.timehub-wrapper .year-btn[data-action="year-up"] {
    border-radius : 0 5px 5px 0;
}

/* ============================================================
   8. PILLS JOURS — WEEK-END & DÉBUT DE SEMAINE
   Modèle : template_0001
   ============================================================ */

.timehub-wrapper .weekend-selector,
.timehub-wrapper .sd-selector {
    display         : flex;
    gap             : 2px;
    justify-content : space-between;
    width           : 100%;
}

.timehub-wrapper .we-day,
.timehub-wrapper .sd-day {
    flex            : 1;
    height          : 30px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    border          : 1px solid #ccc;
    border-radius   : 3px;
    font-size       : 10px;
    cursor          : pointer;
    background      : #fff;
    color           : #333;
    user-select     : none;
}

.timehub-wrapper .we-day:hover,
.timehub-wrapper .sd-day:hover {
    background : #f0f0f0;
}

.timehub-wrapper .we-day.active,
.timehub-wrapper .sd-day.active {
    background   : #205081;
    color        : #fff;
    border-color : #205081;
    font-weight  : bold;
}

/* ============================================================
   9. BOUTON UPLOAD (photos / logo)
   Modèle : template_0002 (outlined)
   ============================================================ */

.timehub-wrapper .th-input-file {
    position : absolute;
    width    : 1px;
    height   : 1px;
    overflow : hidden;
    clip     : rect(0,0,0,0);
    opacity  : 0;
    z-index  : -1;
}

.timehub-wrapper .th-upload-wrapper {
    display     : flex;
    align-items : center;
    gap         : 10px;
    flex-wrap   : wrap;
}

.timehub-wrapper .th-upload-btn {
    display      : inline-flex;
    align-items  : center;
    gap          : 8px;
    padding      : 8px 16px;
    background   : transparent;
    color        : #205081;
    border       : 2px solid #205081;
    border-radius: 4px;
    cursor       : pointer;
    font-size    : 13px;
    font-weight  : 600;
    transition   : background .2s, color .2s;
    white-space  : nowrap;
    user-select  : none;
    line-height  : 1.4;
}

.timehub-wrapper .th-upload-btn:hover {
    background : #205081;
    color      : #fff;
}

.timehub-wrapper .th-upload-btn .dashicons {
    font-size : 18px;
    width     : 18px;
    height    : 18px;
    margin    : 0;
}

.timehub-wrapper .th-input-file:focus + .th-upload-btn {
    outline        : 2px solid #205081;
    outline-offset : 2px;
}

.timehub-wrapper .th-file-count {
    font-size  : 12px;
    color      : #888;
    font-style : italic;
}

/* ============================================================
   10. LOGO — ZONE APERÇU & MESSAGE SUCCÈS
   Modèle : template_0003
   ============================================================ */

.timehub-wrapper .th-logo-preview-zone {
    width              : 80px;
    height             : 48px;
    border             : 1px dashed #bbb;
    border-radius      : 4px;
    background-size    : contain;
    background-repeat  : no-repeat;
    background-position: center;
    background-color   : #f8f8f8;
    flex-shrink        : 0;
}

.timehub-wrapper .th-logo-success-msg {
    font-size   : 12px;
    color       : #28a745;
    font-weight : 600;
    font-style  : italic;
}

/* ============================================================
   11. SLIDER LOGO (scale / position horizontale)
   Modèle : template_0003
   ============================================================ */

.timehub-wrapper .th-custom-slider {
    -webkit-appearance : none;
    width              : 100%;
    height             : 10px;
    background         : linear-gradient(90deg, #3688D4 0%, #a4c9eb 100%);
    border-radius      : 5px;
    outline            : none;
    margin             : 15px 0;
    box-shadow         : inset 0 2px 4px rgba(0,0,0,0.1);
}

.timehub-wrapper .th-custom-slider::-webkit-slider-thumb {
    -webkit-appearance : none;
    appearance         : none;
    width              : 24px;
    height             : 24px;
    border-radius      : 50%;
    background         : #fff;
    border             : 3px solid #3688D4;
    cursor             : pointer;
    box-shadow         : 0 2px 5px rgba(0,0,0,0.3);
    transition         : transform 0.1s;
}

.timehub-wrapper .th-custom-slider::-webkit-slider-thumb:hover {
    transform : scale(1.15);
}

/* ============================================================
   12. ACCORDÉON "PERSONNALISATION ET PARAMÈTRES AVANCÉS"
   Modèle : template_0003
   ============================================================ */

.timehub-wrapper .advanced-container {
    margin-top    : 12px;
    border-radius : 8px;
    overflow      : hidden;
    box-shadow    : 0 4px 6px -2px rgba(0, 0, 0, 0.35);
}

.timehub-wrapper .advanced-btn {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    width           : 100%;
    padding         : 14px 16px;
    background      : rgba(4, 57, 94, .8);
    color           : #fff;
    font-weight     : bold;
    font-size       : 14px;
    border          : none;
    border-radius   : 8px;
    cursor          : pointer;
    text-align      : left;
    transition      : background .3s;
}

.timehub-wrapper .advanced-btn::after {
    content     : "\276F";
    font-style  : normal;
    font-size   : 13px;
    flex-shrink : 0;
    transition  : transform .3s;
}

.timehub-wrapper .advanced-btn:hover {
    background : rgba(4, 57, 94, 1);
}

.timehub-wrapper .advanced-btn.active {
    background    : rgba(4, 57, 94, 1);
    border-radius : 8px 8px 0 0;
}

.timehub-wrapper .advanced-btn.active::after {
    transform : rotate(90deg);
}

.timehub-wrapper .advanced-content {
    padding        : 16px;
    display        : flex;
    flex-direction : column;
    gap            : 10px;
    background     : #fff;
    border         : 1px solid rgba(4, 57, 94, .2);
    border-top     : none;
    border-radius  : 0 0 8px 8px;
}

/* ============================================================
   13. BOUTON TÉLÉCHARGEMENT + ANIMATION
   Modèle : template_0003 (pill animé)
   ============================================================ */

.timehub-wrapper .action-area {
    padding-top     : 25px;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    min-height      : 52px;
    gap             : 15px;
}

.timehub-wrapper #generate-btn {
    outline          : none;
    height           : 48px;
    text-align       : center;
    width            : 100%;
    max-width        : 400px;
    border-radius    : 50px;
    background-color : rgba(32, 80, 129, 0.1);
    border           : 2px solid #3688D4;
    color            : rgba(32, 80, 129, 1);
    letter-spacing   : 1px;
    font-size        : 14px;
    font-weight      : bold;
    cursor           : pointer;
    transition       : all 0.2s ease;
    position         : relative;
    padding          : 0;
    margin           : 0 auto;
}

.timehub-wrapper #generate-btn:hover {
    filter           : brightness(1.1);
    background-color : rgba(32, 80, 129, 0.99);
    color            : rgba(255, 255, 255, 1);
}

.timehub-wrapper #generate-btn:active {
    letter-spacing : 2px;
    box-shadow     : 0 0 10px #335fce;
}

.timehub-wrapper #generate-btn.onclic {
    width             : 48px;
    height            : 48px;
    border-color      : #bbbbbb;
    border-width      : 3px;
    font-size         : 0;
    color             : transparent !important;
    border-radius     : 50%;
    border-left-color : #3688D4;
    background        : transparent;
    animation         : th-rotating 2s 0.25s linear infinite;
}

.timehub-wrapper #generate-btn.onclic:hover {
    background : transparent;
}

.timehub-wrapper #generate-btn.validate {
    width         : 48px;
    height        : 48px;
    font-size     : 0;
    color         : transparent !important;
    background    : #3688D4;
    border-color  : #3688D4;
    border-radius : 50%;
}

.timehub-wrapper #generate-btn.validate::after {
    content   : "✓";
    font-size : 24px;
    color     : white;
    position  : absolute;
    top       : 50%;
    left      : 50%;
    transform : translate(-50%, -50%);
}

/* ── Bouton PDF (thème rouge) ─────────────────────────────────────────────── */

.timehub-wrapper #pdf-btn {
    outline          : none;
    height           : 48px;
    text-align       : center;
    width            : 100%;
    max-width        : 400px;
    border-radius    : 50px;
    background-color : rgba(160, 30, 30, 0.08);
    border           : 2px solid #c0392b;
    color            : rgba(100, 10, 10, 1);
    letter-spacing   : 1px;
    font-size        : 14px;
    font-weight      : bold;
    cursor           : pointer;
    transition       : all 0.2s ease;
    position         : relative;
    padding          : 0;
    margin           : 8px auto 0;
    display          : block;
}

.timehub-wrapper #pdf-btn:hover {
    filter           : brightness(1.1);
    background-color : rgba(160, 30, 30, 0.9);
    color            : rgba(255, 255, 255, 1);
}

.timehub-wrapper #pdf-btn:active {
    letter-spacing : 2px;
    box-shadow     : 0 0 10px #c0392b;
}

.timehub-wrapper #pdf-btn.onclic {
    width             : 48px;
    height            : 48px;
    border-color      : #bbbbbb;
    border-width      : 3px;
    font-size         : 0;
    color             : transparent !important;
    border-radius     : 50%;
    border-left-color : #c0392b;
    background        : transparent;
    animation         : th-rotating 2s 0.25s linear infinite;
}

.timehub-wrapper #pdf-btn.onclic:hover {
    background : transparent;
}

.timehub-wrapper #pdf-btn.validate {
    width         : 48px;
    height        : 48px;
    font-size     : 0;
    color         : transparent !important;
    background    : #c0392b;
    border-color  : #c0392b;
    border-radius : 50%;
}

.timehub-wrapper #pdf-btn.validate::after {
    content   : "✓";
    font-size : 24px;
    color     : white;
    position  : absolute;
    top       : 50%;
    left      : 50%;
    transform : translate(-50%, -50%);
}

@keyframes th-rotating {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.timehub-wrapper #timehub-message {
    display       : none;
    padding       : 10px 18px;
    border-radius : 4px;
    font-size     : 13px;
    text-align    : center;
}

.timehub-wrapper #timehub-message.success {
    background : #d4edda;
    color      : #155724;
    border     : 1px solid #c3e6cb;
}

.timehub-wrapper #timehub-message.error {
    background : #f8d7da;
    color      : #721c24;
    border     : 1px solid #f5c6cb;
}

.timehub-wrapper #timehub-message.info {
    background : #d1ecf1;
    color      : #0c5460;
    border     : 1px solid #bee5eb;
}

/* ============================================================
   14. COMPTEURS DE CARACTÈRES
   Modèle : template_0003
   ============================================================ */

.timehub-wrapper .th-counter {
    font-size   : 11px;
    color       : #888;
    text-align  : right;
    display     : block;
    margin-top  : 3px;
}

.timehub-wrapper .th-counter--over {
    color       : #dc3545;
    font-weight : 600;
}

/* ============================================================
   15. LAYOUT 2 COLONNES — PARTAGÉ TOUS TEMPLATES
   Règles : centrage, largeur max/min, grille 50/50, mobile.
   Chaque template peut overrider via [data-template="XXXX"].
   ============================================================ */

/* Wrapper : centré dans la page, limité en largeur */
.timehub-wrapper {
    max-width  : 1440px;
    margin     : 0 auto;
    padding    : 20px 24px;
    box-sizing : border-box;
}

/* Grille principale 2 colonnes égales */
.timehub-main-container {
    display               : grid;
    grid-template-columns : 3fr 2fr;
    gap                   : 24px;
    align-items           : start;
}

/* Colonne gauche — formulaire */
.timehub-col-params {
    display        : flex;
    flex-direction : column;
    min-width      : 0;   /* évite le débordement des enfants */
}

/* Colonne droite — aperçu : sticky pour rester visible pendant le scroll */
.timehub-col-preview {
    display        : flex;
    flex-direction : column;
    min-width      : 0;
    position       : sticky;
    top            : 20px;
}

/* ── Mobile < 900px : cascade verticale, formulaire d'abord ── */
@media (max-width: 899px) {
    .timehub-wrapper {
        padding : 12px 16px;
    }
    .timehub-main-container {
        grid-template-columns : 1fr;
        gap                   : 20px;
    }
    .timehub-col-params  { order : 1; }
    .timehub-col-preview {
        order    : 2;
        position : static;   /* désactiver sticky */
    }
}

/* ============================================================
   16. BOUTONS TOGGLE 2 ÉTATS — orientation, oui/non, etc.
   Partagé — tous templates actuels et futurs
   ============================================================ */

.timehub-wrapper .th-btn-toggle {
    display : flex;
    gap     : 6px;
    width   : 100%;
}

.timehub-wrapper .th-btn-toggle .th-btn {
    flex           : 1;
    padding        : 6px 10px;
    font-size      : 13px;
    font-weight    : 500;
    border         : 1px solid #35608d;
    border-radius  : 4px;
    background     : #fff;
    color          : #35608d;
    cursor         : pointer;
    position       : relative;
    overflow       : hidden;
    transition     : background 0.15s, color 0.15s;
    line-height    : 1.4;
    text-align     : center;
    white-space    : nowrap;
}

.timehub-wrapper .th-btn-toggle .th-btn.active {
    background   : #35608d;
    color        : #fff;
    border-color : #35608d;
}

.timehub-wrapper .th-btn-toggle .th-btn:not(.th-btn-disabled):not(.active):hover {
    background : #e8f0f8;
}

/* État désactivé — grisé + barre diagonale */
.timehub-wrapper .th-btn-toggle .th-btn.th-btn-disabled {
    color        : #b8b8b8;
    background   : #f7f7f7;
    border-color : #ddd;
    cursor       : not-allowed;
}

.timehub-wrapper .th-btn-toggle .th-btn.th-btn-disabled::after {
    content        : '';
    position       : absolute;
    inset          : 0;
    background     : linear-gradient(
        to bottom right,
        transparent calc(50% - 0.8px),
        #c8c8c8     calc(50% - 0.8px),
        #c8c8c8     calc(50% + 0.8px),
        transparent calc(50% + 0.8px)
    );
    pointer-events : none;
}

/* ── Mobile : param-row en colonne pour éviter le débordement ── */
@media (max-width: 599px) {
    .timehub-wrapper .param-row {
        flex-wrap : wrap;
    }
    .timehub-wrapper .param-row > label:first-child {
        flex         : 0 0 100% !important;
        margin-bottom: 4px;
    }
    .timehub-wrapper .param-row > .field-wrapper {
        flex  : 0 0 100% !important;
        width : 100%;
    }
}

/* ── Toast notification — partagé tous templates ── */
.timehub-toast {
    position       : fixed;
    bottom         : 32px;
    left           : 50%;
    transform      : translateX(-50%) translateY(12px);
    background     : #2c3e50;
    color          : #fff;
    padding        : 10px 20px;
    border-radius  : 6px;
    font-size      : 13px;
    opacity        : 0;
    z-index        : 9999;
    pointer-events : none;
    transition     : opacity 0.3s ease, transform 0.3s ease;
    white-space    : nowrap;
}

.timehub-toast.visible {
    opacity   : 1;
    transform : translateX(-50%) translateY(0);
}

.timehub-toast.error {
    background : #c0392b;
}

/* ============================================================
   17. PALETTE COULEURS — 4 swatches horizontaux avec tooltip
   Partagé — tous templates actuels et futurs
   ============================================================ */

/* Rangée de 4 cercles */
.timehub-wrapper .th-color-palette {
    display     : flex;
    gap         : 10px;
    align-items : center;
    width       : 100%;
}

/* Conteneur individuel swatch + tooltip */
.timehub-wrapper .th-color-swatch {
    position       : relative;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    flex           : 1;
}

/* Cercle coloré */
.timehub-wrapper .th-swatch-circle {
    width         : 100%;
    max-width     : 44px;
    aspect-ratio  : 1;
    height        : auto;
    border-radius : 50%;
    border        : 2px solid #35608d;
    cursor        : pointer;
    position      : relative;
    overflow      : hidden;
    transition    : outline 0.12s, transform 0.12s;
}

/* Hover — anneau blanc via outline-offset */
.timehub-wrapper .th-color-swatch:not(.th-swatch-disabled):hover .th-swatch-circle {
    outline        : 2.5px solid #35608d;
    outline-offset : 3px;
    transform      : scale(1.08);
}

/* Input color — overlay invisible mais cliquable */
.timehub-wrapper .th-color-input {
    position      : absolute;
    top           : 0;
    left          : 0;
    width         : 100%;
    height        : 100%;
    opacity       : 0;
    cursor        : pointer;
    padding       : 0;
    border        : none;
}

/* Swatch désactivé */
.timehub-wrapper .th-swatch-disabled .th-swatch-circle {
    background   : #f7f7f7;
    border-color : #ddd;
    cursor       : not-allowed;
}

/* Barre diagonale sur swatch désactivé */
.timehub-wrapper .th-swatch-disabled .th-swatch-circle::after {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : linear-gradient(
        to bottom right,
        transparent calc(50% - 0.8px),
        #c8c8c8     calc(50% - 0.8px),
        #c8c8c8     calc(50% + 0.8px),
        transparent calc(50% + 0.8px)
    );
}

/* Tooltip — apparaît sous le swatch au survol */
.timehub-wrapper .th-swatch-tooltip {
    position      : absolute;
    top           : calc(100% + 10px);
    left          : 50%;
    transform     : translateX(-50%);
    background    : #fff;
    border        : 1px solid #ddd;
    border-radius : 4px;
    padding       : 5px 12px;
    font-size     : 12px;
    white-space   : nowrap;
    opacity       : 0;
    pointer-events: none;
    transition    : opacity 0.2s;
    z-index       : 200;
    box-shadow    : 0 2px 8px rgba(0,0,0,.12);
    color         : #333;
}

/* Triangle pointant vers le haut (vers le swatch) */
.timehub-wrapper .th-swatch-tooltip::before {
    content              : '';
    position             : absolute;
    bottom               : 100%;
    left                 : 50%;
    transform            : translateX(-50%);
    border               : 6px solid transparent;
    border-bottom-color  : #ddd;
}

.timehub-wrapper .th-swatch-tooltip::after {
    content              : '';
    position             : absolute;
    bottom               : calc(100% - 1px);
    left                 : 50%;
    transform            : translateX(-50%);
    border               : 6px solid transparent;
    border-bottom-color  : #fff;
}

/* Affichage au survol */
.timehub-wrapper .th-color-swatch:hover .th-swatch-tooltip {
    opacity : 1;
}

/* Dernier swatch — tooltip ancré à droite pour éviter le débordement */
.timehub-wrapper .th-color-swatch:last-child .th-swatch-tooltip {
    left      : auto;
    right     : 0;
    transform : none;
}
.timehub-wrapper .th-color-swatch:last-child .th-swatch-tooltip::before,
.timehub-wrapper .th-color-swatch:last-child .th-swatch-tooltip::after {
    left      : auto;
    right     : 10px;
    transform : none;
}