/* =============================================================
   custom.css — surcharges CSS Docadoc
   Chargé après style.css — toutes les règles ici priment.
   À intégrer progressivement dans le SCSS par Steph.
   ============================================================= */


/* -------------------------------------------------------------
   ANNONCES — Photo principale : fond gris au lieu de noir
   ------------------------------------------------------------- */
body.annonces .annonce-details .annonce-contenu .droite a img {
    background-color: #b5b5b5;
    display: block;
}

/* Centrage du grand conteneur et des vignettes dans la colonne droite */
body.annonces .annonce-details .annonce-contenu .piece-jointe-1 {
    display: block;
    text-align: center;
    margin-bottom: 22px;
}
body.annonces .annonce-details .annonce-contenu .pieces-jointes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* Contraindre la colonne droite pour éviter le débordement */
body.annonces .annonce-details .annonce-contenu .droite {
    overflow: hidden;
}

/* Vignettes sous le texte quand pas d'image principale (colonne gauche) */
body.annonces .annonce-details .annonce-contenu .pieces-jointes-gauche {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

/* Vignettes : taille fixe 100×100 dans les deux colonnes */
body.annonces .annonce-details .annonce-contenu .pieces-jointes a img,
body.annonces .annonce-details .annonce-contenu .pieces-jointes-gauche a img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    background-color: #b5b5b5;
    display: block;
}

/* Icônes bureautiques et PDF : taille fixe 100×100, fond contrasté */
body.annonces .annonce-details .annonce-contenu .pieces-jointes a.lienpj.icon-defaut,
body.annonces .annonce-details .annonce-contenu .pieces-jointes-gauche a.lienpj.icon-defaut,
body.annonces .annonce-details .annonce-contenu .pieces-jointes a.lienpj.icon-pdf,
body.annonces .annonce-details .annonce-contenu .pieces-jointes-gauche a.lienpj.icon-pdf {
    display: inline-block !important;
    width: 100px;
    height: 100px;
    overflow: hidden;
    background-color: #cccccc !important;
    vertical-align: top;
}

body.annonces .annonce-details .annonce-contenu .pieces-jointes a.lienpj.icon-defaut i,
body.annonces .annonce-details .annonce-contenu .pieces-jointes-gauche a.lienpj.icon-defaut i,
body.annonces .annonce-details .annonce-contenu .pieces-jointes a.lienpj.icon-pdf i,
body.annonces .annonce-details .annonce-contenu .pieces-jointes-gauche a.lienpj.icon-pdf i {
    font-size: 70px !important;
    line-height: 100px !important;
    color: #000000 !important;
    display: block !important;
    text-align: center !important;
}
/* -------------------------------------------------------------
   ANNONCES — Message contextuel upload image
   ------------------------------------------------------------- */
#annonce-info-image {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    background-color: rgba(96, 208, 132, 0.12);
    border-left: 3px solid #60D084;
    border-radius: 4px;
    color: #2a7a4a;
    font-size: 0.88rem;
}
#annonce-info-image .icon {
    color: #60D084;
    font-size: 1.1rem;
    flex-shrink: 0;
}
/* -------------------------------------------------------------
   ANNONCES — Feedback clic vignette bureautique (Bloc 2)
   ------------------------------------------------------------- */
.annonce-loader-carres {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    justify-content: center;
    width: 100%;
}
.annonce-loader-carres span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background-color: #60D084;
    animation: annonce-carre-pulse 1s ease-in-out infinite;
}
.annonce-loader-carres span:nth-child(1) { animation-delay: 0s;    opacity: 1;    }
.annonce-loader-carres span:nth-child(2) { animation-delay: 0.15s; opacity: 0.75; }
.annonce-loader-carres span:nth-child(3) { animation-delay: 0.30s; opacity: 0.50; }
.annonce-loader-carres span:nth-child(4) { animation-delay: 0.45s; opacity: 0.25; }

@keyframes annonce-carre-pulse {
    0%, 100% { transform: scaleY(1);   opacity: 0.25; }
    50%       { transform: scaleY(1.6); opacity: 1;    }
}
/* -------------------------------------------------------------
   ANNONCES — Zoom loupe image unique (Bloc 1B)
   ------------------------------------------------------------- */
#annonce-zoom-tooltip {
    position: fixed;
    display: none;
    width: 800px;
    height: 800px;
    z-index: 9999;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    pointer-events: none;
    background: #b5b5b5;
}
#annonce-zoom-tooltip img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* -------------------------------------------------------------
   ANNONCES — Lightbox Fancybox 2 : chevrons, croix, dots
   ------------------------------------------------------------- */
body.annonces .fancybox-skin {
    background: #000 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
}
body.annonces .fancybox-nav {
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: none !important;
    width: 44px !important;
    height: 44px !important;
    top: 50% !important;
    bottom: auto !important;
    margin-top: -22px !important;
}
body.annonces .fancybox-prev { left: -50px !important; }
body.annonces .fancybox-next { right: -50px !important; }
body.annonces .fancybox-nav span {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background-image: none !important;
    background: none !important;
    border: none !important;
    top: 0 !important; left: 0 !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
}
body.annonces .fancybox-prev span::after,
body.annonces .fancybox-next span::after {
    content: '' !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    border-top: 3px solid #60D084 !important;
    border-right: 3px solid #60D084 !important;
    position: absolute !important;
    top: 50% !important;
    margin-top: -8px !important;
}
body.annonces .fancybox-prev span::after { transform: rotate(-135deg) !important; right: 8px !important; }
body.annonces .fancybox-next span::after { transform: rotate(45deg) !important; left: 8px !important; }
body.annonces .fancybox-wrap:not(:hover) .fancybox-nav { opacity: 1 !important; }
body.annonces a.fancybox-item.fancybox-close {
    background-image: none !important;
    overflow: hidden !important;
    opacity: 1 !important;
    width: 36px !important;
    height: 36px !important;
    text-indent: -9999px !important;
}
body.annonces a.fancybox-item.fancybox-close::after {
    content: '×' !important;
    text-indent: 0 !important;
    display: block !important;
    font-size: 28px !important;
    line-height: 36px !important;
    color: #fff !important;
    text-align: center !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
}
body.annonces a.fancybox-item.fancybox-close:hover::after { color: #60D084 !important; }
#annonce-fb-dots {
    position: fixed !important;
    bottom: 18px !important;
    left: 0 !important; right: 0 !important;
    top: auto !important;
    z-index: 10001 !important;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 5px;
    pointer-events: none;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
}
#annonce-fb-dots .annonce-dot-active { background: #60D084 !important; }



/* -------------------------------------------------------------
   ANNONCES — Bouton téléchargement superposé
   ------------------------------------------------------------- */
.annonce-conteneur-principal {
    display: inline-block;
    line-height: 0;
    font-size: 0;
}
.annonce-btn-telecharger {
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    left: auto !important;
    top: auto !important;
    width: 44px;
    height: 44px;
    background: rgba(96, 208, 132, 0.85) !important;
    border-radius: 6px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100;
    text-decoration: none !important;
    transition: background 0.2s ease;
}
.annonce-btn-telecharger:hover {
    background: rgba(96, 208, 132, 1) !important;
}
.annonce-btn-telecharger .icon {
    color: #fff !important;
    font-size: 22px !important;
    display: block !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
}

/* Réduire la taille de l'icône dans le bouton téléchargement */
a.annonce-btn-telecharger i.icon {
    font-size: 16px !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    color: #fff !important;
    line-height: 1 !important;
}

/* Taille icône téléchargement annonces */
a.annonce-btn-telecharger i.icon,
a.annonce-btn-telecharger i.icon:before {
    font-size: 16px !important;
}
.annonce-btn-telecharger:hover {
    background: rgba(255, 255, 255, 0.95) !important;
}
.annonce-btn-telecharger:hover span {
    color: #60D084 !important;
}
/* Loader barres animées — page annonce_dur.php */
.annonce-loader {
    display: flex;
    gap: 4px;
    align-items: center;
}
.annonce-loader span {
    display: inline-block;
    width: 6px;
    height: 28px;
    background: #0ad37c;
    border-radius: 3px;
    animation: annonce-loader-pulse 1s ease-in-out infinite;
}
.annonce-loader span:nth-child(1)  { animation-delay: 0s; }
.annonce-loader span:nth-child(2)  { animation-delay: 0.08s; }
.annonce-loader span:nth-child(3)  { animation-delay: 0.16s; }
.annonce-loader span:nth-child(4)  { animation-delay: 0.24s; }
.annonce-loader span:nth-child(5)  { animation-delay: 0.32s; }
.annonce-loader span:nth-child(6)  { animation-delay: 0.40s; }
.annonce-loader span:nth-child(7)  { animation-delay: 0.48s; }
.annonce-loader span:nth-child(8)  { animation-delay: 0.56s; }
.annonce-loader span:nth-child(9)  { animation-delay: 0.64s; }
.annonce-loader span:nth-child(10) { animation-delay: 0.72s; }
.annonce-loader span:nth-child(11) { animation-delay: 0.80s; }
.annonce-loader span:nth-child(12) { animation-delay: 0.88s; }
@keyframes annonce-loader-pulse {
    0%, 100% { opacity: 0.2; }
    50%       { opacity: 1; }
}
/* -------------------------------------------------------------
   URLs longues — coupure forcée pour éviter le débordement
   Forum et annonces, particulièrement sur mobile
   ------------------------------------------------------------- */
.thread_corps_message a,
body.annonces .annonce-details .annonce-contenu p a {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
}
/* ============================================================
   Annonces — Images dans le corps du message (.gauche)
   Empêche le débordement sur mobile et dans TinyMCE
   ============================================================ */
body.annonces .annonce-contenu .gauche img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
}
/* =============================================================== */
/* Popup désabonnement mail annonces de la semaine                 */
/* =============================================================== */

/* Fond gris très foncé #353535 (charte Docadoc) qui forme le cadre */
body.annonces .fancybox-wrap .fancybox-skin {
    background: #353535 !important;
    border: 4px solid #fff !important;
    outline: 2px solid #353535 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
    border-radius: 4px !important;
    padding: 0 !important;
}

body.annonces .fancybox-inner {
    border-radius: 0 !important;
    overflow: hidden !important;
}

/* Croix de fermeture : blanche, hover verte */
body.annonces .fancybox-close {
    width: 36px !important;
    height: 36px !important;
    background-image: none !important;
    background: transparent !important;
    top: 8px !important;
    right: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.annonces .fancybox-close::after {
    content: '\00D7' !important;
    font-size: 34px !important;
    font-weight: 300 !important;
    color: #fff !important;
    line-height: 1 !important;
    transition: color 0.2s !important;
}

body.annonces .fancybox-close:hover::after {
    color: #0ad37c !important;
}

/* Conteneur global */
body.annonces #desabo-annonces-popup {
    font-family: 'Nunito', sans-serif;
    width: 440px;
    max-width: 100%;
    box-sizing: border-box;
    background: transparent;
}

/* Bande titre : fond #353535, titre vert centré, liseré vert dessous */
body.annonces .dap-header {
    background: #353535 !important;
    color: #0ad37c !important;
    font-family: 'Karla', Verdana, Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    margin: 0 16px !important;
    padding: 14px 36px 0 16px !important;
    border-bottom: 3px solid #0ad37c !important;
    text-align: center !important;
    display: block !important;
}

/* Insert gris clair posé dans le cadre sombre — padding pour voir le fond #353535 sur les côtés */
body.annonces .dap-body {
    margin: 14px 16px 16px !important;
    padding: 22px 20px 20px !important;
    background: #d8d8d8 !important;
    text-align: center;
    border-radius: 2px;
}

body.annonces .dap-texte {
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    color: #333;
    margin: 0 0 10px;
    line-height: 1.6;
}

body.annonces .dap-texte-small {
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    color: #666;
    margin: 0 0 14px;
    line-height: 1.5;
}

body.annonces .dap-question {
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    margin: 12px 0 18px;
}

/* Adresses mail */
body.annonces .dap-emails {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 8px 0 4px;
}

body.annonces .dap-email {
    display: inline-block;
    background: #fff;
    border: 1px solid #0ad37c;
    border-radius: 20px;
    padding: 5px 16px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0a8f52;
}

/* Boutons */
body.annonces .dap-boutons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

/* Bouton action principale : vert plein, texte blanc */
body.annonces .dap-btn-confirmer,
body.annonces .dap-btn-reabo,
body.annonces .dap-btn-fermer {
    background: #0ad37c !important;
    color: #fff !important;
    border: 2px solid #0ad37c !important;
    border-radius: 5px !important;
    padding: 10px 20px !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    width: 100%;
    box-sizing: border-box;
    transition: background 0.2s, border-color 0.2s;
}

body.annonces .dap-btn-confirmer:hover,
body.annonces .dap-btn-reabo:hover,
body.annonces .dap-btn-fermer:hover {
    background: #33e896 !important;
    border-color: #33e896 !important;
    color: #fff !important;
}

body.annonces .dap-btn-confirmer:disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
}

/* Bouton annuler : fond blanc, bordure verte, texte vert */
body.annonces .dap-btn-annuler {
    background: #fff !important;
    color: #0ad37c !important;
    border: 2px solid #0ad37c !important;
    border-radius: 5px !important;
    padding: 10px 20px !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    width: 100%;
    box-sizing: border-box;
    transition: background 0.2s, color 0.2s;
}

body.annonces .dap-btn-annuler:hover {
    background: #0ad37c !important;
    color: #fff !important;
}

/* Lien Fermer discret */
body.annonces .dap-lien-fermer {
    display: block;
    text-align: center;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    color: #333 !important;
    text-decoration: none !important;
    margin-top: 6px;
    padding: 4px 0;
}

body.annonces .dap-lien-fermer:hover {
    color: #0ad37c !important;
    text-decoration: underline !important;
}

/* Mobile */
@media (max-width: 520px) {
    body.annonces #desabo-annonces-popup {
        width: 86vw;
        max-width: 86vw;
    }
    body.annonces .dap-header {
        text-align: center !important;
        padding: 16px 40px 13px 16px !important;
    }
    body.annonces .dap-body {
        margin: 8px 8px 8px !important;
        padding: 16px 14px 16px !important;
    }
    body.annonces .dap-question {
        margin: 8px 0 14px;
    }
    body.annonces .dap-boutons {
        margin-top: 12px;
        gap: 8px;
    }
}
/* Agrandissement picto icodoc - alignement avec les autres pictos du menu */
body.fr_FR .menu_principal ul li.page_icodoc a span,
body.fr_FR .menu_principal ul li.page_icodoc a:hover span,
body.fr_FR .menu_principal ul li.page_icodoc a.active span,
body.en_GB .menu_principal ul li.page_icodoc a span,
body.en_GB .menu_principal ul li.page_icodoc a:hover span,
body.en_GB .menu_principal ul li.page_icodoc a.active span {
  background-size: auto 18px;
  width: 80px;
}
/* Ajustement largeur SVG "Classifieds" menu en_GB */
body.en_GB .menu_principal ul li.page_annonces a span,
body.en_GB .menu_principal ul li.page_annonces a:hover span,
body.en_GB .menu_principal ul li.page_annonces a.active span {
  background-size: auto 11px;
  width: 82px;
}
/* Neutralisation overrides icodoc et classifieds sur mobile (burger) */
@media screen and (max-width: 767px) {
  body.fr_FR .menu_principal ul li.page_icodoc a span,
  body.fr_FR .menu_principal ul li.page_icodoc a:hover span,
  body.en_GB .menu_principal ul li.page_icodoc a span,
  body.en_GB .menu_principal ul li.page_icodoc a:hover span {
    background-size: 52px auto !important;
    width: 60px !important;
  }
  body.fr_FR .menu_principal ul li.page_icodoc a.active span,
  body.en_GB .menu_principal ul li.page_icodoc a.active span {
    background-size: 52px auto !important;
    width: 60px !important;
  }
  body.en_GB .menu_principal ul li.page_annonces a span {
    background-size: auto 9px !important;
    width: 65px !important;
  }
  body.en_GB .menu_principal ul li.page_annonces a:hover span,
  body.en_GB .menu_principal ul li.page_annonces a.active span {
    background-size: auto 11px !important;
    width: 65px !important;
  }
}
/* ============================================================
   Coach mark et tooltip Docadoc — système réutilisable
   ------------------------------------------------------------
   Utilisation : un <div class="docadoc-coachmark theme-clair">
                 ou <div class="docadoc-coachmark theme-sombre">
   contenant <span class="docadoc-coachmark-fleche"></span>
   et <span class="docadoc-coachmark-texte">...</span>
   Le positionnement (top/left) est fait dynamiquement en JS.
   ============================================================ */

/* --- Structure commune (tronc) --- */
.docadoc-coachmark {
    display: none;
    position: fixed;
    z-index: 1000;
    border-radius: 8px;
    padding: 16px 18px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    font-family: 'Karla', Verdana, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    font-weight: normal;
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
    box-sizing: border-box;
    pointer-events: none;
    border-width: 2px;
    border-style: solid;
}
.docadoc-coachmark.coachmark-visible {
    display: block;
    opacity: 1;
}
.docadoc-coachmark .docadoc-coachmark-texte {
    display: block;
}
.docadoc-coachmark .docadoc-coachmark-fleche {
    position: absolute;
    width: 0;
    height: 0;
    top: -10px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

/* --- Variante CLAIRE : fond gris clair, texte anthracite --- */
.docadoc-coachmark.theme-clair {
    background: #F8F9FA;
    color: #2C3E50;
    border-color: #FF6600;
}
.docadoc-coachmark.theme-clair .docadoc-coachmark-fleche {
    border-bottom: 10px solid #FF6600;
}

/* --- Variante SOMBRE : fond noir, texte blanc (pour migration future) --- */
.docadoc-coachmark.theme-sombre {
    background: #1f1f1f;
    color: #ffffff;
    border-color: #FF6600;
}
.docadoc-coachmark.theme-sombre .docadoc-coachmark-fleche {
    border-bottom: 10px solid #FF6600;
}

/* --- Adaptation mobile : largeur 90% de l'écran, padding ajusté --- */
@media (max-width: 767px) {
    .docadoc-coachmark {
        left: 5%;
        right: 5%;
        width: 90%;
        max-width: 90%;
        padding: 16px 16px;
    }
}

/* --- Adaptation desktop : largeur fixe (top/left calculés en JS) --- */
@media (min-width: 768px) {
    .docadoc-coachmark {
        width: 380px;
        max-width: 380px;
    }
}

/* ============================================================
   FORUM — Pièces jointes compactes (discussion.php / balise.php)
   ------------------------------------------------------------
   Généré par ThreadFichiersMiseEnForme::miseEnFormeIcodocCompact()
   Migré ici depuis l'injection PHP inline (CSS 100% statique).
   ============================================================ */
:root{--pjc-size:120px;--pjc-gap:10px;}
.pj-compact-container{margin:4px 0 16px;}
.pj-compact-wrap{display:flex;align-items:center;justify-content:center;}
.pj-compact-track-outer{overflow:hidden;flex-shrink:0;}
.pj-compact-track{display:flex;gap:var(--pjc-gap);transition:transform .28s ease;will-change:transform;}
.pj-compact-item{flex:0 0 var(--pjc-size);width:var(--pjc-size);position:relative;}
/* Image JPG */
.pj-compact-item img{
    width:var(--pjc-size) !important;height:var(--pjc-size) !important;
    object-fit:cover;display:block;}
/* Icône fichier non-image */
.pj-compact-item .lienpj>i:not(.icon-superpose):not(.lienpj_video):not(.lienpj_hover){
    width:var(--pjc-size) !important;height:var(--pjc-size) !important;
    display:flex !important;align-items:center;justify-content:center;
    font-size:calc(var(--pjc-size) * 0.45) !important;
    background:#e8e8e8;color:#444;box-sizing:border-box;}
/* Masquer pictos superposés d'origine (PDF/vidéo natifs IcOdoc) */
.pj-compact-item .icon-superpose,
.pj-compact-item .lienpj_video,
.pj-compact-item .lienpj_hover{display:none !important;}
.pj-compact-item .lienpj_menu{display:none !important;}
.pj-compact-link{display:block;line-height:0;}
.pj-compact-link .lienpj{display:block;line-height:0;}
/* Barre rouge collée */
.pj-compact-barre{height:3px;background:#CC0000;margin-top:0;}
/* Chevrons rouges (desktop uniquement) */
.pj-compact-btn{flex:0 0 auto;background:none;border:none;padding:4px 8px;cursor:pointer;
    color:#CC0000;font-size:20px;line-height:1;display:flex;align-items:center;}
.pj-compact-btn:hover{color:#FF6600;}
.pj-compact-nonav .pj-compact-btn{visibility:hidden;pointer-events:none;}
/* Points dynamiques */
.pj-compact-dots{display:flex;align-items:center;justify-content:center;
    gap:4px;margin-top:7px;min-height:12px;}
.pj-compact-dot{border-radius:50%;background:#ccc;
    transition:width .2s ease,height .2s ease,background .2s ease;
    flex-shrink:0;}
.pj-compact-dot.active{background:#CC0000;}
.pj-compact-dot.sz-active{width:8px;height:8px;}
.pj-compact-dot.sz-adj   {width:6px;height:6px;}
.pj-compact-dot.sz-small {width:5px;height:5px;}
.pj-compact-dot.sz-xs    {width:4px;height:4px;}
/* Tablette portrait / iPhone paysage */
@media(max-width:960px) and (min-width:601px){
  :root{--pjc-size:90px;}
}
/* Mobile */
@media(max-width:600px){
  :root{--pjc-size:90px;}
  .pj-compact-btn{display:none !important;}
  .pj-compact-item{display:block !important;}
  .pj-compact-track-outer{overflow:hidden;}
}
/* Pictos overlay PDF / video : visibles partout (desktop ET mobile)
   Utilise les icônes natives de la police docadoc-icon (icon-pdf-cadre-n,
   icon-play-cadre-n) pour respecter la charte graphique existante. */
.pj-type-pdf,.pj-type-video{ position:relative; }
.pj-type-pdf:before,.pj-type-video:before{
    font-family:'docadoc-icon' !important;
    speak:never;
    font-style:normal;
    font-weight:normal;
    font-variant:normal;
    text-transform:none;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    position:absolute;
    pointer-events:none;
    z-index:2;
    line-height:1;
}
.pj-type-pdf:before{
    content:"\e679"; /* icon-pdf */
    top:6px;left:6px;
    width:26px;height:26px;
    background-color:#cccccc;
    color:#000;
    font-size:24px;
    line-height:26px;
    text-align:center;
}
.pj-type-video:before{
    content:"\e67c"; /* icon-play-cadre-n */
    top:50%;left:50%;
    margin:-24px 0 0 -24px;
    font-size:48px;
    color:rgba(220,220,220,0.85);
    text-shadow:0 1px 4px rgba(0,0,0,0.4);
}

/* Aperçu HD au survol (desktop uniquement — n'a pas de sens au toucher) */
@media(hover:hover){
  #pj-preview-tooltip{
      position:fixed;z-index:10001;display:none;
      padding:4px;background:#fff;border:1px solid #ccc;
      box-shadow:0 4px 16px rgba(0,0,0,0.25);
      pointer-events:none;border-radius:2px;}
  #pj-preview-tooltip img{
      display:block;max-width:480px;max-height:480px;
      width:auto;height:auto;}
}
@media(hover:none){
  #pj-preview-tooltip{display:none !important;}
}