/** TimeHub — Template 0003 — calendar.css
 * Fusion de calendar-design-final.css + calendar-form.css.
 * @version 3.0.0
 */

/* ============================================================
   SECTION 1 — DESIGN A4 + OVERLAY (calendar-design-final.css)
   ============================================================ */

/**
 * TimeHub — Template 0003 — calendar-design-final.css
 * Design A4 portrait : photo bord-à-bord, badge année, tiroir bas, sidebar, footer entreprise.
 * Toutes les règles sont scopées [data-template="0003"] (Règle d'Or).
 *
 * @version 3.0.0
 */

/* =========================================================================
   1. WRAPPER EXTÉRIEUR + CENTRAGE
   ========================================================================= */

[data-template="0003"] .preview-outer-wrapper {
    position       : relative;   /* ancre le badge + contrôles en position absolue */
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 10px;
    width          : 100%;
}

/* Wrapper A4 portrait — ratio 210×297 */
[data-template="0003"] .preview-a4-wrapper {
    position         : relative;
    width            : 100%;
    max-width        : 560px;
    aspect-ratio     : 210 / 297;
    background       : #ffffff;
    box-shadow       : 0 4px 24px rgba(0,0,0,.18);
    overflow         : hidden;
    container-type   : size;
    container-name   : a4;
    display          : flex;
    flex-direction   : column;
    padding          : 0;       /* anti-injection WordPress/thème */
    margin           : 0 auto;
}

/* Wrapper Letter portrait — ratio 8.5×11 */
[data-template="0003"] .preview-a4-wrapper.is-format-letter {
    aspect-ratio     : 8.5 / 11;
}

/* Wrapper A3 portrait — même ratio 1:√2 que A4 (297×420mm) */
[data-template="0003"] .preview-a4-wrapper.is-format-a3 {
    aspect-ratio     : 297 / 420;
}

/* Wrapper Tabloid portrait — 279×432mm (11"×17") */
[data-template="0003"] .preview-a4-wrapper.is-format-tabloid {
    aspect-ratio     : 279 / 432;  /* Tabloid portrait */
}

/* =========================================================================
   2. ZONE IMAGE — plein cadre haut de page
   ========================================================================= */

[data-template="0003"] .th-image-container {
    position            : relative;
    width               : 100%;
    height              : 37.04cqh; /* 110mm / 297mm */
    margin              : 0;        /* flush bord-à-bord : aucune marge */
    padding             : 0;
    background-color    : #ccc;
    background-size     : cover;
    background-position : center;
    background-repeat   : no-repeat;
    flex-shrink         : 0;
    display             : block;    /* neutralise tout display hérité */
}

/* =========================================================================
   3. BADGE ANNÉE — rectangle plein bas-droite de la photo
   ========================================================================= */

[data-template="0003"] .th-year-badge {
    position        : absolute;
    bottom          : -5cqh;
    right           : 10cqh;
    background-color: var(--th-weekend-color, #5386B4); /* thème global */
    color           : #ffffff;
    font-size       : 7cqh;
    text-align: center;
    vertical-align: middle;
    font-weight     : 800;
    line-height     : 1;
    padding-top: 2.3cqh;
    padding-bottom: 2.3cqh;
    padding-left: 2cqh;
    padding-right: 2cqh;
    letter-spacing  : -0.07em;
    height: 12cqh;
    width: 24cqh;
}

/* =========================================================================
   4. TIROIR BAS — contient tout le bas de page
   ========================================================================= */

[data-template="0003"] .th-bottom-drawer {
    flex            : 1;
    display         : flex;
    flex-direction  : column;
    padding         : 0 0 1cqh 0;  /* gauche/droite gérés par les enfants directs */
    overflow        : hidden;
    gap             : 0;            /* espacement contrôlé par padding-top des enfants */
}

/* =========================================================================
   5. TITRE DU MOIS — gras + italique + couleur weekend
   ========================================================================= */

[data-template="0003"] .th-month-container {
    flex-shrink : 0;
    padding     : 1.68cqh 9.52cqw 0 9.52cqw; /* top≈5mm | gauche/droite≈20mm */
}

[data-template="0003"] .th-month-title {
    display        : block;
    font-size      : 5cqh;
    font-weight    : 800;
    color          : var(--th-weekend-color, #3688D4);
    line-height    : 1.1;
    text-transform : capitalize;               /* Janvier au lieu de JANVIER */
    letter-spacing : -0.06em;
}

/* =========================================================================
   6. LIGNE CONTENU : grille + sidebar
   ========================================================================= */

[data-template="0003"] .th-content-row {
    flex           : 1;
    min-height     : 0;
    padding        : 1.68cqh 0 0 0;
}

[data-template="0003"] .th-grid-container {
    flex           : 1;
    padding        : 0 5% 1cqh 5%;
    display        : flex;
    flex-direction : column;
}

/* =========================================================================
   7. GRILLE CALENDRIER
   ========================================================================= */

[data-template="0003"] .th-calendar-grid {
    display               : grid;
    grid-template-columns : repeat(7, 1fr);
    grid-template-rows    : auto repeat(6, 1fr);
    align-content         : start;
    text-align            : center;
}

/* En-têtes jours */
[data-template="0003"] .th-day-header {
    text-align    : center;
    display       : flex;
    align-items   : center;
    justify-content: center;
    font-size     : 1.8cqh;
    font-weight   : 600;
    color         : var(--th-main-color, #000000);
    padding-bottom: 0.3cqh;
}

[data-template="0003"] .th-day-header.is-weekend {
    color : var(--th-weekend-color, #3688D4);
}

/* Cellules jours */
[data-template="0003"] .th-day-cell {
    display         : flex;
    align-items     : center;
    justify-content : center;
}

[data-template="0003"] .th-day-cell.empty {
    visibility : hidden;
}

/* Cellule jour férié */
[data-template="0003"] .th-day-cell.is-holiday {
    background-color: var(--th-weekend-color, #3688D4);
}

[data-template="0003"] .th-day-cell.is-holiday .day-number {
    color       : #ffffff;
    font-weight : 700;
}

[data-template="0003"] .day-number {
    font-weight : 700;
    color       : var(--th-main-color, #000000);
    font-size   : 3.0cqh;
}

[data-template="0003"] .day-number.is-weekend {
    color : var(--th-weekend-color, #3688D4);
}

/* =========================================================================
   8. LISTE JOURS FÉRIÉS DU MOIS
   ========================================================================= */

[data-template="0003"] .th-holidays-list {
    padding    : 0.4cqh 9.52cqw 0 9.52cqw;
    flex-shrink: 0;
    padding-bottom: 1cqh;
}

[data-template="0003"] .th-holiday-item {
    font-size  : 1.4cqh;
    color      : #444444;
    margin     : 0 0 0.1cqh 0;
    line-height: 1.1;
}

/* =========================================================================
   10. FOOTER ENTREPRISE
   ========================================================================= */

/* -------------------------------------------------------------------------
   10. FOOTER ENTREPRISE — 3 sections : Logo | Gap | Infos
   40 mm / 297 mm A4 = 13.47cqh
   Logo gauche : 80 mm / 210 mm = 38.1cqw
   ------------------------------------------------------------------------- */

[data-template="0003"] .th-company-footer {
    display         : flex;
    flex-direction  : row;
    align-items     : center;
    height          : 13.47cqh;     /* 40mm / 297mm */
    flex-shrink     : 0;
    overflow        : hidden;
    border-top:solid 1px var(--th-weekend-color, #3688D4);
    width: 80.96cqw;
    margin:0 9.52cqw;
    
}

/* Section gauche — logo (~80mm) */
[data-template="0003"] .th-footer-logo {
    flex-shrink         : 0;
    width               : 38.1cqw;  /* 80mm / 210mm */
    height              : 100%;
    display             : flex;
    align-items         : center;
    justify-content     : flex-start;
}

[data-template="0003"] .th-logo-placeholder {
    width               : 100%;
    height              : 80%;
    background-size     : contain;
    background-repeat   : no-repeat;
    background-position : left center;
    height: 13.47cqh;
}

/* Section milieu — gap élastique */
[data-template="0003"] .th-footer-gap {
    flex : 1;
    height: 13.47cqh;
}



[data-template="0003"] .th-company-info {
    font-size      : 1.3cqh;
    color          : #000000;
    margin         : 0;
    line-height    : 1.2;
    word-break     : break-word;
    font-weight    : 400;
    height         : 13.47cqh;
    padding-top    : 1.0cqh;
    padding-bottom : auto;
    padding-left   : 1cqw;
    padding-right  : 1cqw;
}

/* =========================================================================
   11. LOGO DE MARQUE TIMEHUB
   ========================================================================= */

[data-template="0003"] .brand-logo-zone {
    position      : absolute;
    right         : -4cqw;
    bottom        : 2.0cqh;
    transform     : translateX(-50%);
    height        : 1.8cqh;
    pointer-events: none;
}

[data-template="0003"] .brand-logo-zone svg {
    height : 100%;
    width  : auto;
}

/* =========================================================================
   12. BOUTON PLEIN ÉCRAN
   ========================================================================= */

/* --- BOUTON PLEIN ÉCRAN --- */
/* Position / taille / opacity uniquement — apparence dans timehub-ui.css */
[data-template="0003"] .btn-fullscreen-toggle {
    position  : absolute;
    top       : 45cqh;   /* centre de la zone image (0→37.04cqh) */
    left      : 50%;
    transform : translate(-50%, -50%);
    width     : 20cqh;
    height    : 20cqh;
    opacity   : 0.2;
}

[data-template="0003"] .btn-fullscreen-toggle:hover {
    opacity   : 0.99;
    transform : translate(-50%, -50%) scale(1.1);
}

/* Fallback Dashicons — taille différente de timehub-ui.css (18px vs 20px) */
[data-template="0003"] .btn-fullscreen-toggle .dashicons {
    font-size  : 18px;
    width      : auto;
    height     : auto;
    margin     : 0;
    line-height: 1;
}

/* =========================================================================
   13. CONTRÔLES CARROUSEL
   ========================================================================= */

[data-template="0003"] .th-carousel-controls {
    position        : absolute;
    top             : 45cqh;     /* centre de la zone image (0→37.04cqh) */
    left            : 5%;
    right           : 5%;
    transform       : translateY(-50%);
    display         : flex;
    justify-content : space-between;
    pointer-events  : none;
    z-index         : 10;
}

/* Taille / opacity / icône — apparence de base dans timehub-ui.css */
[data-template="0003"] .btn-carousel {
    width      : 10cqh;
    height     : 10cqh;
    font-size  : 5cqh;
    line-height: 1;
    opacity    : 0.35;
}

/* =========================================================================
   14. BADGE MOIS/12
   ========================================================================= */

[data-template="0003"] .carousel-badge {
    position        : absolute;
    top             : 2cqh;
    left            : 50%;
    width           : 70%;
    text-align      : center;
    transform       : translateX(-50%);
    background      : rgba(255,255,255,.2);
    border          : 1px solid rgba(255,255,255,.4);
    text-shadow     : 1px 1px 1px rgba(0,0,0,.8);
    color           : #fff;
    padding         : 6px 18px;
    border-radius   : 20px;
    font-size       : 14px;
    font-weight     : bold;
    pointer-events  : none;
    z-index         : 10;
    box-shadow      : 0 2px 5px rgba(0,0,0,.3);
    backdrop-filter : blur(1px);
}

/* =========================================================================
   15. ANIMATIONS CARROUSEL
   ========================================================================= */

[data-template="0003"] .anim-slide-out-left {
    animation : th03-slide-out-left 0.4s ease forwards;
    position  : absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index   : 1;
}

[data-template="0003"] .anim-slide-out-right {
    animation : th03-slide-out-right 0.4s ease forwards;
    position  : absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index   : 1;
}

[data-template="0003"] .anim-slide-in-right {
    animation : th03-slide-in-right 0.4s ease forwards;
    z-index   : 2;
}

[data-template="0003"] .anim-slide-in-left {
    animation : th03-slide-in-left 0.4s ease forwards;
    z-index   : 2;
}

@keyframes th03-slide-out-left {
    from { transform: translateX(0);     opacity: 1; }
    to   { transform: translateX(-100%); opacity: 0; }
}
@keyframes th03-slide-out-right {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(100%); opacity: 0; }
}
@keyframes th03-slide-in-right {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes th03-slide-in-left {
    from { transform: translateX(-100%); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}

/* =========================================================================
   16. OVERLAY FULLSCREEN — overrides T0003
   Base (position, display, transition…) → timehub-ui.css
   ========================================================================= */

/* Fond overlay → timehub-ui.css (rgba 0.65) — pas d'override ici */

#timehub-fullscreen-overlay[data-template="0003"] .timehub-fullscreen-content {
    position        : relative;
    max-width       : 95vw;
    max-height      : 95vh;
    display         : flex;
    align-items     : center;
    justify-content : center;
    pointer-events  : none;
}

#timehub-fullscreen-overlay[data-template="0003"] .timehub-fullscreen-content .preview-a4-wrapper {
    pointer-events : auto;
    width          : auto;
    height         : 95vh;
    max-width      : 95vw;
    aspect-ratio   : 210 / 297;
    box-shadow     : 0 10px 40px rgba(0,0,0,0.3);
    container-type : size;
    overflow       : hidden;
}

#timehub-fullscreen-overlay[data-template="0003"] .timehub-fullscreen-content .preview-a4-wrapper.is-format-letter {
    aspect-ratio   : 8.5 / 11;
}

#timehub-fullscreen-overlay[data-template="0003"] .timehub-fullscreen-content .preview-a4-wrapper.is-format-a3 {
    aspect-ratio   : 297 / 420;
}

#timehub-fullscreen-overlay[data-template="0003"] .timehub-fullscreen-content .preview-a4-wrapper.is-format-tabloid {
    aspect-ratio   : 279 / 432;
}

/* Mobile : piloter par la largeur pour éviter le débordement horizontal */
@media (max-width: 768px) {
    #timehub-fullscreen-overlay[data-template="0003"] .timehub-fullscreen-content .preview-a4-wrapper {
        width  : 90vw !important;
        height : auto !important;
    }
}

/* Bouton ✕ T0003 — 100% identique à timehub-ui.css → géré par timehub-ui.css */

/* ============================================================
   SECTION 2 — FORMULAIRE (calendar-form.css)
   ============================================================ */

/**
 * TimeHub — Template 0003 — calendar-form.css
 * Styles du formulaire : layout 2 colonnes, uploads, sidebar toggle, footer entreprise.
 * Scopé [data-template="0003"] (Règle d'Or).
 *
 * @version 3.0.0
 */

/* =========================================================================
   1. WRAPPER PRINCIPAL
   ========================================================================= */

[data-template="0003"] {
    font-family : Arial, sans-serif;
    font-size   : 14px;
    color       : #222;
    box-sizing  : border-box;
}

[data-template="0003"] *,
[data-template="0003"] *::before,
[data-template="0003"] *::after {
    box-sizing : inherit;
}

/* =========================================================================
   2. GRID 2 COLONNES : Paramètres | Aperçu
   ========================================================================= */

/* Layout géré par timehub-ui.css section 15 */
/* margin-bottom spécifique T0003 conservé */
[data-template="0003"].timehub-wrapper {
    font-family : 'Segoe UI', sans-serif;
    background  : #f0f2f5;
}

[data-template="0003"] .timehub-col-params {
    background    : #eef2f7;
    padding       : 33px 10px 10px 10px;
    border-radius : 4px;
}

[data-template="0003"] .timehub-main-container {
    margin-bottom : 20px;
}

[data-template="0003"] .preview-container {
    /* Pas de box visible autour de la feuille — layout géré par timehub-ui.css */
}

[data-template="0003"] .preview-header h3 {
    text-align    : center;
    margin-top    : 0;
    margin-bottom : 15px;
    font-size     : 18px;
}

[data-template="0003"] #timehub-preview-content {
    background-color : #f0f0f1;
    padding          : 30px;
    border-radius    : 4px;
    border           : 1px solid #ddd;
    min-height       : 200px;
    display          : flex;
    align-items      : center;
    justify-content  : center;
}

[data-template="0003"] .loading-spinner {
    color      : #999;
    font-size  : 13px;
    font-style : italic;
}

/* =========================================================================
   4. LISTE PARAMÈTRES
   ========================================================================= */

[data-template="0003"] .param-list {
    display        : flex;
    flex-direction : column;
    gap            : 10px;
}

/* Ligne paramètre standard (label | champ) */
[data-template="0003"] .param-row {
    display     : flex;
    align-items : center;
    gap         : 10px;
}

[data-template="0003"] .param-row label:first-child {
    flex        : 0 0 60%;
    font-size   : 13px;
    font-weight : 500;
    color       : #444;
    line-height : 1.3;
}

[data-template="0003"] .field-wrapper {
    flex     : 1;
    min-width: 0;
}

/* Variante colonne (label au-dessus, champ en dessous) */
[data-template="0003"] .param-row--column {
    flex-direction : column;
    align-items    : flex-start;
}

[data-template="0003"] .param-row--column label:first-child {
    flex  : none;
    width : 100%;
}

[data-template="0003"] .param-row--column .field-wrapper {
    width : 100%;
}

/* =========================================================================
   10. SÉLECTEUR JOURS WEEK-END
   ========================================================================= */

[data-template="0003"] .weekend-selector {
    display : flex;
    gap     : 4px;
}

[data-template="0003"] .we-day {
    width          : 28px;
    height         : 28px;
    border         : 1px solid #ced4da;
    border-radius  : 4px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 11px;
    font-weight    : 600;
    cursor         : pointer;
    background     : #f5f5f5;
    color          : #555;
    transition     : background .2s, color .2s;
    user-select    : none;
}

[data-template="0003"] .we-day.active {
    background   : #205081;
    color        : #fff;
    border-color : #205081;
}

/* =========================================================================
   11. TOGGLE SIDEBAR (checkbox stylisé)
   ========================================================================= */

[data-template="0003"] .th-toggle-label {
    display    : flex;
    gap        : 8px;
    cursor     : pointer;
    user-select: none;
    margin-top: 40px;
}

[data-template="0003"] .th-toggle-label input[type="checkbox"] {
    width  : 20px;
    height : 20px;
    cursor : pointer;
    accent-color: #3688D4;
    padding: 5px;
    vertical-align: middle;
    
}

[data-template="0003"] .th-toggle-text {
    font-size : 13px;
    color     : #444;
}

[data-template="0003"] .th-field-hint {
    font-size: 12px;
    display: flex;
    padding-top: 5px;
    text-align: left;

}

[data-template="0003"] .th-toggle-label input[type="radio"] {
    width  : 20px;
    height : 20px;
    cursor : pointer;
    accent-color: #3688D4;
    padding: 0px;
    vertical-align: middle;
    margin-top:     0px;
    
}

[data-template="0003"] .th-month-pill{
    width  : 6cqw;
    height : 5cqh;
    cursor : pointer;
    accent-color: #3688D4;
    margin: 1cqh 0.6cqw 1cqh 0cqw; 
    padding: 0px;   
    text-align: center;    
    background-color: rgb(4,107,209, 0.8);
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
      -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

[data-template="0003"] .th-month-pill:hover{
    background-color: rgba(3, 59, 116, 1);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    border: solid 1px rgba(255, 255, 255, 0.8);
}

[data-template="0003"] .th-month-pill:active,
[data-template="0003"] .th-month-pill.is-writing {
    background-color: rgb(2, 53, 104);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    border: solid 1px rgba(255, 255, 255, 0.8);
    font-weight: 700;
}


/* =========================================================================
   12. AIDE (icônes ?)
   ========================================================================= */

[data-template="0003"] .th-help-trigger {
    background  : none;
    border      : none;
    padding     : 0 0 0 4px;
    cursor      : pointer;
    color       : #888;
    vertical-align: middle;
}

[data-template="0003"] .th-help-trigger .dashicons {
    font-size  : 16px;
    line-height: 1;
}

[data-template="0003"] .th-help-trigger:hover {
    color : #3688D4;
}

/* =========================================================================
   13. GALERIE PHOTOS
   ========================================================================= */

[data-template="0003"] .th-gallery-section {
    margin-bottom : 16px;
}

[data-template="0003"] .th-photo-gallery {
    display         : flex;
    flex-wrap       : wrap;
    gap             : 8px;
    min-height      : 40px;
}

[data-template="0003"] .th-thumbnail-wrapper {
    position      : relative;
    width         : 72px;
    height        : 52px;
    border-radius : 4px;
    overflow      : hidden;
    cursor        : pointer;
    border        : 2px solid #ccc;
    flex-shrink   : 0;
}

[data-template="0003"] .th-thumbnail-wrapper.ready   { border-color : #28a745; }
[data-template="0003"] .th-thumbnail-wrapper.large   { border-color : #dc3545; }
[data-template="0003"] .th-thumbnail-wrapper.pending { border-color : #ccc; }

[data-template="0003"] .th-thumbnail-wrapper img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
}

[data-template="0003"] .th-thumb-index {
    position    : absolute;
    top         : 2px;
    left        : 4px;
    font-size   : 10px;
    font-weight : 700;
    color       : #fff;
    text-shadow : 0 1px 2px rgba(0,0,0,.7);
}

[data-template="0003"] .th-thumb-delete {
    position      : absolute;
    top           : 2px;
    right         : 2px;
    width         : 16px;
    height        : 16px;
    background    : rgba(220,53,69,.85);
    border        : none;
    border-radius : 50%;
    color         : #fff;
    font-size     : 10px;
    font-weight   : 700;
    line-height   : 16px;
    text-align    : center;
    cursor        : pointer;
    padding       : 0;
    display       : flex;
    align-items   : center;
    justify-content: center;
}

/* =========================================================================
   15. MODALE CROPPER
   ========================================================================= */

[data-template="0003"] .timehub-cropper-modal {
    display         : none;
    position        : fixed;
    inset           : 0;
    background      : rgba(0,0,0,.75);
    z-index         : 99990;
    align-items     : center;
    justify-content : center;
}

[data-template="0003"] .timehub-cropper-modal.active {
    display : flex;
}

[data-template="0003"] .cropper-modal-content {
    background    : #fff;
    border-radius : 8px;
    width         : min(90vw, 700px);
    max-height    : 90vh;
    display       : flex;
    flex-direction: column;
    overflow      : hidden;
}

[data-template="0003"] .cropper-modal-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 14px 18px;
    border-bottom   : 1px solid #dee2e6;
}

[data-template="0003"] .cropper-modal-header h4 {
    margin    : 0;
    font-size : 15px;
}

[data-template="0003"] .cropper-modal-close {
    background : none;
    border     : none;
    font-size  : 22px;
    cursor     : pointer;
    color      : #666;
    line-height: 1;
    padding    : 0;
}

[data-template="0003"] .cropper-modal-body {
    flex     : 1;
    overflow : hidden;
    padding  : 14px;
}

[data-template="0003"] .cropper-img-container {
    height    : min(50vh, 400px);
    overflow  : hidden;
}

[data-template="0003"] .cropper-img-container img {
    max-width : 100%;
    display   : block;
}

[data-template="0003"] .cropper-modal-footer {
    display         : flex;
    justify-content : flex-end;
    gap             : 10px;
    padding         : 12px 18px;
    border-top      : 1px solid #dee2e6;
}

[data-template="0003"] .btn-cancel {
    padding       : 7px 16px;
    border        : 1px solid #ced4da;
    border-radius : 4px;
    background    : #fff;
    cursor        : pointer;
    font-size     : 13px;
}

[data-template="0003"] .btn-resize-only {
    padding       : 7px 16px;
    border        : 1px solid #ffc107;
    border-radius : 4px;
    background    : #fff8e1;
    color         : #856404;
    cursor        : pointer;
    font-size     : 13px;
}

[data-template="0003"] .btn-validate {
    padding       : 7px 16px;
    border        : none;
    border-radius : 4px;
    background    : #3688D4;
    color         : #fff;
    cursor        : pointer;
    font-size     : 13px;
    font-weight   : 600;
}

/* =========================================================================
   16. MODALE ALERTE PERSONNALISÉE
   ========================================================================= */

[data-template="0003"] .th-custom-alert-overlay {
    display         : none;
    position        : fixed;
    inset           : 0;
    background      : rgba(0,0,0,.6);
    z-index         : 99995;
    align-items     : center;
    justify-content : center;
}

[data-template="0003"] .th-custom-alert-overlay.active {
    display : flex;
}

[data-template="0003"] .th-custom-alert-box {
    background    : #fff;
    border-radius : 8px;
    padding       : 28px 32px;
    max-width     : 440px;
    width         : 90vw;
    text-align    : center;
    box-shadow    : 0 8px 32px rgba(0,0,0,.25);
}

[data-template="0003"] .alert-icon .dashicons {
    font-size : 36px;
    margin-bottom: 8px;
}

[data-template="0003"] .alert-title {
    margin    : 0 0 10px 0;
    font-size : 17px;
}

[data-template="0003"] .alert-message {
    font-size  : 14px;
    color      : #555;
    margin     : 0 0 18px 0;
    white-space: pre-line;
}

[data-template="0003"] .alert-buttons {
    display         : flex;
    justify-content : center;
    gap             : 12px;
}

[data-template="0003"] .btn-alert-confirm {
    padding       : 8px 24px;
    background    : #3688D4;
    color         : #fff;
    border        : none;
    border-radius : 4px;
    cursor        : pointer;
    font-size     : 14px;
    font-weight   : 600;
}

[data-template="0003"] .btn-alert-cancel {
    padding       : 8px 24px;
    background    : #fff;
    color         : #333;
    border        : 1px solid #ced4da;
    border-radius : 4px;
    cursor        : pointer;
    font-size     : 14px;
}

/* =========================================================================
   17. VALEURS SLIDER LOGO (T0003 uniquement)
   ========================================================================= */

[data-template="0003"] #logo-scale-val,
[data-template="0003"] #logo-x-val {
    font-weight  : 700;
    color        : #3688D4;
    display      : inline-block;
    margin-left  : 6px;
}

/* ──────────────────────────────────────────────────────────────────────────
   FONT PICKER — sélecteur de police avec aperçu Google Fonts
   ────────────────────────────────────────────────────────────────────────── */
[data-template="0003"] .th-font-picker { position: relative; width: 100%; }

[data-template="0003"] .th-font-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px; background: #fff; border: 1px solid #ccc; border-radius: 4px;
    cursor: pointer; color: #333; text-align: left; transition: border-color 0.15s;
    font-size: 14px; line-height: 1.4; min-height: 34px;
}
[data-template="0003"] .th-font-trigger:hover,
[data-template="0003"] .th-font-picker.is-open .th-font-trigger { border-color: #5386B4; outline: none; }
[data-template="0003"] .th-font-trigger-label {
    flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px;
}
[data-template="0003"] .th-font-trigger-arrow {
    margin-left: 8px; font-size: 10px; color: #888; transition: transform 0.2s; flex-shrink: 0;
}
[data-template="0003"] .th-font-picker.is-open .th-font-trigger-arrow { transform: rotate(180deg); }
[data-template="0003"] .th-font-dropdown {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: #fff; border: 1px solid #d0d0d0; border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.14); max-height: 280px; overflow-y: auto;
    z-index: 1100; padding: 4px 0;
}
[data-template="0003"] .th-font-picker.is-open .th-font-dropdown { display: block; }
[data-template="0003"] .th-font-option {
    padding: 9px 14px; font-size: 16px; cursor: pointer; color: #222;
    transition: background 0.1s; white-space: nowrap; line-height: 1.3; text-align: left;
}
[data-template="0003"] .th-font-option:hover { background: #f0f4f9; }
[data-template="0003"] .th-font-option.is-active { background: #e8eef6; color: #5386B4; }

/* ──────────────────────────────────────────────────────────────────────────
   OVERLAY — Avertissement polices DOCX
   ────────────────────────────────────────────────────────────────────────── */
[data-template="0003"] .timehub-docx-font-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
}
[data-template="0003"] .docx-font-overlay-box {
    background: #fff; border-radius: 10px; padding: 32px 36px; max-width: 520px; width: 90%;
    box-shadow: 0 12px 48px rgba(0,0,0,0.28); font-size: 15px; line-height: 1.65;
}
[data-template="0003"] .docx-font-overlay-box p { margin: 0 0 16px; color: #333; }
[data-template="0003"] .docx-font-overlay-box a { color: #5386B4; text-decoration: underline; }
[data-template="0003"] .docx-font-overlay-box a:hover { color: #3a6693; }
[data-template="0003"] #docx-continue-btn {
    display: block; width: 100%; margin-top: 8px; padding: 14px 20px;
    background: #5386B4; color: #fff; border: none; border-radius: 6px;
    font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s; letter-spacing: 0.3px;
}
[data-template="0003"] #docx-continue-btn:hover { background: #3a6693; }