@charset "UTF-8";
/* CSS applicatif historique (ex-fin d'argon-dashboard.css). Gele : nouveau CSS dans la feuille du module. Sera decoupe par module (phase 5). */
/* width */

::-webkit-scrollbar {
  width: 8px;
  height: 5px;
}

/* Track */

::-webkit-scrollbar-track {
  background: var(--mv-gray-100);
  border-radius: 4px;
  margin-left: 30px;
  margin-right: 30px;
}

/* Handle */

::-webkit-scrollbar-thumb {
  background: #c2c2c2;
  border-radius: 8px;
}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.audioPreview {
  width: 100%;
  background-color: var(--mv-gray-50);
  border: none;
  outline: none;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.audioPreview::-webkit-media-controls-panel {
  background-color: var(--mv-gray-50);
}

.audioPreview::-webkit-media-controls-play-button,
.audioPreview::-webkit-media-controls-volume-slider-container,
.audioPreview::-webkit-media-controls-mute-button,
.audioPreview::-webkit-media-controls-timeline-container,
.audioPreview::-webkit-media-controls-current-time-display,
.audioPreview::-webkit-media-controls-time-remaining-display {
  color: var(--mv-gray-800);
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  text-align: start;
}
::-moz-placeholder { /* Firefox 19+ */
  text-align: start;
}
:-ms-input-placeholder { /* IE 10+ */
  text-align: start;
}
:-moz-placeholder { /* Firefox 18- */
  text-align: start;
}

.habillageButton {
    background-color: lightgray;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 10px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    border-radius: 50%;
}

.conversation-navigation {
    height : calc(89dvh - 200px);
    overflow-y: scroll;
}


.message {
    margin-bottom: 15px;
}

.message.sent {
    text-align: right;
    line-height:1;
}

.message.sent p{
    margin-bottom: 0px;
    font-size: 12px;
}

.message-date {
    text-align: right;
    font-style: italic;
    font-size : 10px;
    margin-top : 0px;
}

.message-params {
    font-size: 8px;
    color: var(--mv-gray-500);
    display: block;
    margin-top: 2px;
}

.cartouche-envoyee{
    background-color: var(--mv-gray-100);
    padding : 10px 15px 10px 15px;
    border-radius : 20px;
}

.a_propos_p {
    font-size: 10px;
}

.btnglow {
    border: none;
    outline: none;
    color: #FFF;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 12px;
}
.btnglow::after {
    content: "";
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--mv-primary);
    left: 0;
    top: 0;
    border-radius: 1.2rem;
}
/* glow */
.btnglow::before {
    content: "";
    background: linear-gradient(
        45deg,
        rgba(255, 0, 0, 0.5), rgba(255, 115, 0, 0.5), rgba(255, 251, 0, 0.5), rgba(72, 255, 0, 0.5),
        rgba(0, 255, 213, 0.5), rgba(0, 43, 255, 0.5), rgba(255, 0, 200, 0.5), rgba(255, 0, 0, 0.5)
        );
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 600%;
    z-index: -1;
    width: calc(100% + 8px);
    height:  calc(100% + 8px);
    filter: blur(14px);
    animation: glowing 20s linear infinite;
    transition: opacity .3s ease-in-out;
    border-radius: 1.2rem;
    opacity: 1; /* Always visible */
}

@keyframes glowing {
    0% {background-position: 0 0;}
    50% {background-position: 400% 0;}
    100% {background-position: 0 0;}
}

/* hover */
.btnglow:hover::before {
    opacity: 1; /* Always visible */
}

.btnglow:active:after {
    background: transparent;
}

.btnglow:active {
    color: #000;
    font-weight: bold;
}

.summary {
    font-style: italic;
    font-size: 0.8em;
    display: block;
}

.btn-outline-bleu {
    --bs-btn-color: var(--mv-primary-hover);
    --bs-btn-border-color: var(--mv-primary-hover);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--mv-primary-hover);
    --bs-btn-hover-border-color: var(--mv-primary-hover);
    --bs-btn-focus-shadow-rgb: 94,114,228;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--mv-primary-hover);
    --bs-btn-active-border-color: var(--mv-primary-hover);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--mv-primary-hover);
    --bs-btn-disabled-bg: transparent;
    --bs-gradient: none
}

.btn-outline-gris {
    --bs-btn-color: var(--mv-text-muted);
    --bs-btn-border-color: var(--mv-text-muted);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--mv-text-muted);
    --bs-btn-hover-border-color: var(--mv-text-muted);
    --bs-btn-focus-shadow-rgb: 94,114,228;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--mv-text-muted);
    --bs-btn-active-border-color: var(--mv-text-muted);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--mv-text-muted);
    --bs-btn-disabled-bg: transparent;
    --bs-gradient: none
}

.btn-outline-rouge {
    --bs-btn-color: var(--mv-danger);
    --bs-btn-border-color: var(--mv-danger);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--mv-danger);
    --bs-btn-hover-border-color: var(--mv-danger);
    --bs-btn-focus-shadow-rgb: 94,114,228;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--mv-danger);
    --bs-btn-active-border-color: var(--mv-danger);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--mv-danger);
    --bs-btn-disabled-bg: transparent;
    --bs-gradient: none
}

.btn-outline-orange {
    --bs-btn-color: var(--mv-warning);
    --bs-btn-border-color: var(--mv-warning);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--mv-warning);
    --bs-btn-hover-border-color: var(--mv-warning);
    --bs-btn-focus-shadow-rgb: 94,114,228;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--mv-warning);
    --bs-btn-active-border-color: var(--mv-warning);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--mv-warning);
    --bs-btn-disabled-bg: transparent;
    --bs-gradient: none
}

.btn-outline-vert {
    --bs-btn-color: #8BA577;
    --bs-btn-border-color: #8BA577;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #8BA577;
    --bs-btn-hover-border-color: #8BA577;
    --bs-btn-focus-shadow-rgb: 94,114,228;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #8BA577;
    --bs-btn-active-border-color: #8BA577;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #8BA577;
    --bs-btn-disabled-bg: transparent;
    --bs-gradient: none
}

.input-container {
    background: #ffffff;
    border-radius: 15px;
    border-style: solid;
    border-color: var(--mv-text-muted);
    border-width: 1px;
    padding: 15px 20px 10px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    z-index : 2;
    width : 100%;
  }

  .menu-toggle {
    cursor: pointer;
  }

  .tools-dropdown {
    margin: -15px 0 0 0;
    background: var(--mv-gray-100);
    border-radius: 0px 0px 15px 15px;
    padding: 25px 15px 15px 15px;
    display: none;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    z-index : 1;
  }

  .tools-dropdown.show {
    display: block;
  }

  .form-check-label {
    cursor: pointer;
  }

  .input-group-text {
    background-color: white;
    /* border: none; */
  }

  .upload-label input[type="file"] {
    display: none;
  }

  .tool-buttons {
    display: flex;
    gap: 0.5rem;
  }

  .btn-input {
    color : var(--mv-text-muted);
  }

  .btn-maiven-intelligence {
    margin-bottom : 0px;
  }


  
.slide-down {
    animation: slideDown 0.3s ease-in-out;
}

.tools-dropdown .form-check {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom : 0px;
}

.tools-dropdown .form-check-input {
    margin-left: 10px; /* Adjust the spacing between the checkbox and the label */
}

.form-check-label {
    margin-bottom: 0px; /* Remove the default margin */
}

.card.selected {
    border-color: blue;
    border-width : 2px;
}

.card.selected .card-title,
.card.selected .text-sm {
    color: blue;
}

.span-file{
    color : black;
    background-color: var(--mv-gray-100);
    padding : 10px;
    border-radius : 20px;
    font-size : 10px;
    font-weight : 600;
}

.file-extension{
    padding : 5px;
    margin-right : 5px;
    border-radius : 20px;
    font-size : 10px;
    font-weight : 900;
}

.thumb{
    height : 36px;
    width  : 36px;
    object-fit: cover;
    border-radius : 15px;
    padding : 5px;
}

.span-file-img{
    color : black;
    background-color: var(--mv-gray-100);
    border-radius : 20px;
    padding: 5px;
}

.PPTX {
    background-color: var(--mv-warning); /* Couleur pour les fichiers PPTX */
}

.DOCX {
    background-color: #2196F3; /* Couleur pour les fichiers DOCX */
}

.PDF {
    background-color: #F44336; /* Couleur pour les fichiers PDF */
}

.XLSX {
    background-color: #4CAF50; /* Couleur pour les fichiers XLSX */
}

.TXT {
    background-color: #9E9E9E; /* Couleur pour les fichiers TXT */
}

#espace-travail{
    height: 400px;
    max-height: 50vh;
}

/* Limiter la hauteur de l'éditeur TinyMCE */
.tox-tinymce {
    max-height: 50vh !important;
}

.info-item{
    border-radius: 1rem 1rem 0 0;
    padding: 10px;
    padding-bottom: 40px;
    margin-bottom: -40px;
    background-color: #fff;
}

.titre-item{
    padding-left : 20px;
}

.item-editor-main-header {
    min-height: 170px;
}

.item-parent-visits-panel {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 1 auto;
    gap: 0.45rem;
    max-width: 34%;
    min-width: 0;
    margin-left: auto;
    padding: 0;
    color: var(--mv-text);
    background: transparent;
    border: 0;
}

.item-parent-visits-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #8a97ad;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.item-parent-visits-label i {
    color: #8a97ad;
    font-size: 0.7rem;
}

.item-parent-visits-list {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    flex-wrap: wrap;
    min-width: 0;
}

.item-parent-visit-chip {
    display: inline-flex;
    align-items: center;
    max-width: 12rem;
    min-height: 0;
    padding: 0.12rem 0.35rem;
    border: 1px solid var(--mv-gray-100);
    border-radius: 6px;
    color: var(--mv-text);
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.item-parent-visit-chip:hover,
.item-parent-visit-chip:focus {
    color: var(--mv-text-heading);
    background: #fff;
    border-color: #dbe3ff;
    box-shadow: none;
    text-decoration: none;
    outline: 0;
}

@media (max-width: 575.98px) {
    .item-editor-main-header {
        align-items: flex-start !important;
        flex-direction: column;
        min-height: 0;
    }

    .item-parent-visits-panel {
        align-items: flex-start;
        max-width: 100%;
        min-width: 0;
        width: 100%;
        margin-left: 0;
        gap: 0.4rem;
    }

    .item-parent-visits-list {
        justify-content: flex-start;
        width: 100%;
    }

    .item-parent-visit-chip {
        max-width: 100%;
    }
}

.iphone{
    width: 390px;
    height: 844px;
    background: #000;
    border-radius: 60px;
    padding: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    position: relative;
}

.screen{
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 45px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.accordion-visite{
    background-color : transparent;
}

.accordion-visite:not(.collapsed){
    background-color : transparent;
}

.card-audioguide{
    border-radius: 18px;
    border: 1px solid var(--mv-gray-200);
    box-shadow: none;
    background: #ffffff;
}

.studiopro-launch-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    font-size: 0.73rem;
    font-weight: 700;
    padding: 0 12px;
    border-radius: 999px;
    border: none;
    color: #fff;
    background: linear-gradient(135deg, #0b63ce 0%, #0ea5e9 52%, #14b8a6 100%);
    box-shadow: 0 4px 12px rgba(14, 116, 230, 0.26);
    transition: box-shadow 0.16s ease, filter 0.16s ease;
}

.studiopro-launch-btn:hover{
    color: #fff;
    filter: brightness(1.02);
    box-shadow: 0 6px 14px rgba(14, 116, 230, 0.3);
}

.studiopro-launch-btn:focus-visible{
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
}

.studiopro-launch-btn__badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 16px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #fef08a;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}


.btn-white-sm {
    background: #ffffff;
    border-radius: 20px;
    padding: 10px;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 10px;
    box-shadow: 0px 4px 16px 0px rgba(50, 50, 93, 0.05);
    font-size : 10px;
    font-weight : 600;
}

.btn-magic-sm {
    color : white;
    background: linear-gradient(
        -82.62deg,
        rgba(13, 239, 255, 1) 0%,
        rgba(0, 157, 255, 1) 100%
    );
    padding: 10px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 10px;
    box-shadow: 0px 4px 16px 0px rgba(50, 50, 93, 0.05);
    font-size : 10px;
    font-weight : 600;
}

.btn-magic {
    color : white;
    background: linear-gradient(
        -82.62deg,
        rgba(13, 239, 255, 1) 0%,
        rgba(0, 157, 255, 1) 100%
    );
    flex-shrink: 0;
    box-shadow: 0px 4px 16px 0px rgba(50, 50, 93, 0.05);
}

.btn-magic:hover{
    color :  white;
}

.btn-blue-sm {
    color : white;
    background: var(
        --blue,
        linear-gradient(
        -43.61deg,
        rgba(15, 22, 191, 1) 0%,
        rgba(26, 112, 232, 1) 100%
        )
    );
    padding: 10px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 10px;
    box-shadow: 0px 4px 16px 0px rgba(50, 50, 93, 0.05);
    font-size : 10px;
    font-weight : 600;
}

.collapseIntroductionWaveformTime{
    margin-top: auto;
    margin-bottom: auto;
}

.editable-text {
    border: none;
    outline: none;
}

.editable-text:focus {
    border: none;
    outline: none;
}

.audio-bar {
    width: 5px;
    border-radius: 5px;
    background-color: #007bff;
    margin: 0 3px;
    display: inline-block;
}

.audio-player {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.recording-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.audio-visualizer{
    height: 100px;
    padding : 20px;
}

.note{
    height: 79dvh; 
    overflow-y: scroll;
}

.input-creation-visite{
    border-radius : 40px;
    height : 40px;
}

.text-info-small{
    color: #000000;
    text-align: center;
    font-size: 10px;
    line-height: 12px;
    font-weight: 300;
    text-wrap: balance;
}

/* .textarea-description-creation-visite{
    border-radius: 20px;
} */

.input-titre-etape{
    border: none; 
    background: transparent; 
    font-size: 1.25rem; 
    font-weight: 600; 
    line-height: 1.2; 
    color: inherit;
}

.textarea-description-etape{
    border: none; 
    resize: none; 
    background: transparent; 
    width: 100%;
    color: inherit;
    font-size: 12px;
    overflow-y: auto;
    resize: none; 
    min-height: 25px; 
    max-height: 200px;
}


.voir-plus-card{
    background-color: var(--mv-text-muted);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0px 4px 16px 0px rgba(103, 116, 142, 0.05);
    height: 200px; 
    min-width: 100px;
}

.voir-plus-card a{
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.4px;
    font-weight: 700;
}

.card-dashboard{
    height: 200px; 
    min-width: 300px;
    max-width: 300px;
}

.text-card-dashboard{
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-table-liste{
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


.editable-construction-text {
    overflow-y: auto;
    max-height: 300px;
    padding: 20px;
}

.editable-redaction-text {
    overflow-y: auto;
    max-height: 300px;
    padding: 20px;
}

.editable-audioguide-text {
    overflow-y: auto;
    max-height: 300px;
    padding: 20px;
}

.editable-construction-text h1 {
  font-size: 1.5rem;
}

.editable-construction-text h2 {
  font-size: 1.25rem;
}

.editable-construction-text h3 {
  font-size: 0.875rem;
}

.editable-construction-text h4 {
  font-size: 0.75rem;
}

.editable-construction-text h5 {
  font-size: 0.625rem;
}

.editable-construction-text h6 {
  font-size: 0.5rem;
}

.editable-construction-text:focus {
    border: 30px;
    outline: none;
}

.badge-visite-en-cours {
    font-size : 9px;
    margin-left: 5px;
    margin-right: 5px;
}

/* Étape importée : look gris + champs verrouillés */
.etape-dupliquee .card           { background:var(--mv-gray-50); opacity:.7; }
.etape-dupliquee .input-titre-etape,
.etape-dupliquee .textarea-description-etape,
.etape-dupliquee .editable-construction-text,
.etape-dupliquee .editable-redaction-text,
.etape-dupliquee .editable-audioguide-text {
pointer-events:none;         
background:var(--mv-gray-50);
color:var(--mv-gray-500);
}
.etape-dupliquee .dropdown-toggle { display:none; } /* plus de menu édition */


#viewerContentBody h1 {font-size: 1.5rem; margin-top: 10px;}
#viewerContentBody h2 {font-size: 1.4rem; margin-top: 10px;}
#viewerContentBody h3 {font-size: 1.3rem; margin-top: 10px;}
#viewerContentBody h4 {font-size: 1.2rem; margin-top: 10px;}
#viewerContentBody h5 {font-size: 1.1rem; margin-top: 10px;}
#viewerContentBody h6 {font-size: 1rem; margin-top: 10px;}
#viewerContentBody p { font-size: 12px; line-height: 1;}
#viewerContentBody li { font-size: 10px; line-height: 1;}
#viewerContentBody td,
#viewerContentBody th { font-size: 0.9rem; }
#viewerContentBody table { font-size: 0.9rem; }

.rapportCreationContent h1 {font-size: 1.5rem; margin-top: 10px;}
.rapportCreationContent h2 {font-size: 1.4rem; margin-top: 10px;}
.rapportCreationContent h3 {font-size: 1.3rem; margin-top: 10px;}
.rapportCreationContent h4 {font-size: 1.2rem; margin-top: 10px;}
.rapportCreationContent h5 {font-size: 1.1rem; margin-top: 10px;}
.rapportCreationContent h6 {font-size: 1rem; margin-top: 10px;}

/* Grisé pour les éléments en cours de construction */
.card-wkp {
  opacity: 0.6;
}

#bibliothequeCollapse{
    border-radius: 1rem;
    background-color: var(--mv-gray-50)!important;
    padding: 2rem;
}

/* Dictionary modal styles - Force visibility */
#pronunciationDictionaryModal {
    z-index: 1060 !important;
}

#pronunciationDictionaryModal.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1060 !important;
}

#pronunciationDictionaryModal .modal-dialog {
    z-index: 1061 !important;
    position: relative;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#pronunciationDictionaryModal.show .modal-dialog {
    display: block !important;
    margin: 1.75rem auto;
    z-index: 1061 !important;
    transform: none !important;
}

#pronunciationDictionaryModal .modal-content {
    z-index: 1062 !important;
    position: relative;
    background-color: #fff !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#pronunciationDictionaryModal.show .modal-content {
    display: flex !important;
    flex-direction: column;
    background-color: #fff !important;
}

#pronunciationDictionaryModal .dictionary-entry {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid var(--mv-gray-200);
    transition: background-color 0.15s ease;
}

#pronunciationDictionaryModal .dictionary-entry:hover {
    background-color: var(--mv-gray-50);
}

#pronunciationDictionaryModal .dictionary-entry:last-child {
    border-bottom: none;
}

#pronunciationDictionaryModal .dictionary-entry-text {
    flex: 1;
}

#pronunciationDictionaryModal .dictionary-entry-original {
    font-weight: 600;
    color: var(--mv-text-heading);
}

#pronunciationDictionaryModal .dictionary-entry-arrow {
    color: #8898aa;
    margin: 0 10px;
}

#pronunciationDictionaryModal .dictionary-entry-pronunciation {
    color: #6c5ce7;
    font-style: italic;
}

#pronunciationDictionaryModal .dictionary-entry-actions {
    display: flex;
    gap: 5px;
}

#pronunciationDictionaryModal .dictionary-entry-actions .btn {
    padding: 3px 8px;
    font-size: 12px;
}

#pronunciationDictionaryModal .dictionary-scope-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 8px;
}

#pronunciationDictionaryModal .dictionary-scope-badge.scope-global {
    background-color: #17a2b8;
    color: #fff;
}

#pronunciationDictionaryModal .dictionary-scope-badge.scope-project {
    background-color: var(--mv-gray-500);
    color: #fff;
}

/* Add/Edit form in dictionary */
#pronunciationDictionaryModal .dictionary-add-form {
    background-color: var(--mv-gray-50);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

#pronunciationDictionaryModal .dictionary-entries-list {
    max-height: 400px;
    overflow-y: auto;
}

#pronunciationDictionaryModal .dictionary-empty-state {
    text-align: center;
    padding: 30px;
    color: #8898aa;
}

#pronunciationDictionaryModal .dictionary-empty-state i {
    font-size: 48px;
    margin-bottom: 15px;
}

/* Inline add form button */
#dictAddEntryForm {
    background-color: var(--mv-gray-50);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid var(--mv-gray-200);
}

#dictAddEntryForm.d-none {
    display: none !important;
}

#dictAddEntryForm .form-control {
    border-radius: 6px;
}

#dictAddEntryForm .btn-sm {
    padding: 6px 12px;
}

/* Audio cache indicator badge */
.dict-preview-btn {
    position: relative;
}

.dict-preview-btn .badge {
    pointer-events: none;
}

/* =============================================
   END PRONUNCIATION MARKS
   ============================================= */

.input-secondes{
    border-top: 1px solid var(--mv-gray-300) !important;
    border-bottom: 1px solid var(--mv-gray-300) !important;
    background: #fff !important;
    min-width: 0;
    box-shadow: none;
}

.text-loading{
    font-size: x-small;
    margin-bottom: 10px;
    font-weight: 600;
}

.cartouche-agent-loading{
    background-color: #ffffff;
    padding : 10px 15px 10px 15px;
    border-radius : 20px;
}
/* Markdown rendering in intelligence chat */
.agent-markdown h1 { font-size: 1.25rem; }
.agent-markdown h2 { font-size: 1.15rem; }
.agent-markdown h3 { font-size: 1.05rem; }
.agent-markdown h4 { font-size: 1rem; }
.agent-markdown h5 { font-size: 0.95rem; }
.agent-markdown h6 { font-size: 0.9rem; }
.agent-markdown p { font-size: 12px; line-height: 1;}
.agent-markdown li { font-size: 10px; line-height: 1;}
.agent-markdown td,
.agent-markdown th { font-size: 0.9rem; }
.agent-markdown table { font-size: 0.9rem; }

.source-badge {
font-size: 0.75rem;
margin-right: 0.25rem;
}

/* show save note button on hover */
.save-note-btn {
display: none;
}

.message.received:hover > .save-note-btn {
display: inline-flex;
}

.block-card{
max-width: 80px;
min-width: 50px;
}

#blockTab {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: .5rem;
}
.block-card {
border: 1px solid #ccc;
border-radius: 4px;
padding: .5rem;
text-align: center;
cursor: grab;
background-color: #fff;
}
.block-card svg {
width: 24px;
height: 24px;
pointer-events: none;
color: var(--bs-primary);
stroke: var(--bs-primary);
}
.block-card small {
font-size: .75rem;
display: block;
pointer-events: none;
}

#pagePreview {
border: 1px solid #ddd;
height: 70vh;
width: 100%;
}

/* ------------------------------
   Global styles
------------------------------ */
.border-end:last-child {
  border-right: none !important;
}

#contenu {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.form-control:focus,
.form-select:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(0, 85, 255, 0.25);
}

/* ------------------------------
   Galerie de médias
------------------------------ */
.media-item,
.asset-item,
.press-release-item {
  position: relative;
  border-radius: 0.375rem;
  overflow: hidden;
  transition: all 0.2s ease;
  background: white;
  border: 1px solid var(--mv-gray-200);
  cursor: pointer;
}

.media-item:hover,
.asset-item:hover,
.press-release-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-color: #007bff;
}

.media-actions {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.media-item:hover .media-actions,
.asset-item:hover .media-actions,
.press-release-item:hover .media-actions {
  opacity: 1;
}

.media-actions .btn {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 3px;
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.media-type-badge {
  position: absolute;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 2px 6px;
  font-size: 0.75rem;
  border-radius: 4px;
}

.media-item .media-type-badge {
  bottom: 4px;
  left: 4px;
}

.asset-item .media-type-badge,
.press-release-item .media-type-badge {
  top: 5px;
  left: 5px;
}

.media-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: white;
  text-align: center;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-item .media-name {
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  padding: 8px 4px 4px;
}

.asset-item .media-name,
.press-release-item .media-name {
  background: rgba(0,0,0,0.7);
  padding: 4px;
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.media-add-zone,
.asset-add-zone,
.press-release-add-zone {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mv-gray-50);
  border: 2px dashed var(--mv-gray-300);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.media-add-zone:hover,
.asset-add-zone:hover,
.press-release-add-zone:hover {
  border-color: #007bff;
  background: var(--mv-primary-50);
  color: #007bff;
}

.media-gallery-sortable {
  min-height: 80px;
}

.sortable-ghost { opacity: 0.5; }
.sortable-chosen { transform: scale(1.05); }

#mediaGallery .col-6,
#mediaGallery .col-md-4,
#mediaGallery .col-lg-3 {
  transition: all 0.3s ease;
}

/* ------------------------------
   Modale bibliothèque de médias
------------------------------ */
.media-library-item,
.asset-library-item,
.press-release-library-item {
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
  border-radius: 0.375rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

.media-library-item:hover,
.asset-library-item:hover,
.press-release-library-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-color: #007bff;
}

.media-library-item.selected,
.asset-library-item.selected,
.press-release-library-item.selected {
  border-color: #28a745;
  background-color: rgba(40, 167, 69, 0.1);
}

.media-library-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  flex-direction: row;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.media-library-item:hover .media-library-actions {
  opacity: 1;
}

.media-library-actions .btn {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 3px;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ------------------------------
   Sélection dans modales
------------------------------ */
.library-item {
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  animation: fadeInUp 0.3s ease forwards;
  opacity: 0;
}

.library-item:hover {
  border-color: var(--mv-gray-300);
  transform: translateY(-2px);
}

.library-item.selected {
  border-color: var(--mv-primary);
  background-color: rgba(0, 85, 255, 0.1);
}

.library-item.selected::after {
  content: '✓';
  position: absolute;
  top: 5px;
  right: 5px;
  background: var(--mv-primary);
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.75rem;
}

.selection-indicator {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #28a745;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.asset-library-item.selected .selection-indicator,
.press-release-library-item.selected .selection-indicator {
  opacity: 1;
}

/* ------------------------------
   Divers
------------------------------ */
.badge { font-size: 0.75em; }

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
}

/* Auto-save indicator */
.auto-save-indicator {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1070;
  min-width: 200px;
  text-align: center;
  border-radius: 20px;
  font-size: 0.875rem;
  transition: all 0.3s ease;
}

.auto-save-indicator.hidden { opacity: 0; transform: translateX(-50%) translateY(-10px); }
.auto-save-indicator.saving { background: #fff3cd; border: 1px solid #ffeaa7; color: #856404; opacity: 1; }
.auto-save-indicator.saved { background: #d1edff; border: 1px solid #0c5460; color: #0c5460; opacity: 1; }
.auto-save-indicator.error { background: #f8d7da; border: 1px solid #dc3545; color: #721c24; opacity: 1; }

/* Save indicator - Modern card style */
.save-indicator {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1070;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  margin: 10px 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.3s ease;
  animation: slideDown 0.3s ease;
  border: 1px solid transparent;
}

.save-indicator .save-icon {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
}

.save-indicator .save-text {
  white-space: nowrap;
}

/* États du save-indicator */
.save-indicator.saving {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: #667eea;
}

.save-indicator.saved {
  background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
  color: #155724;
  border-color: #84fab0;
}

.save-indicator.error {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  color: #721c24;
  border-color: #fa709a;
}

/* Animations */
@keyframes fadeInScale {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

/* ===== STYLES INTEGRATION FROM TEMPLATES ===== */

/* === ITEM EDITOR STYLES === */

/* Item Image Card Styles */
.item-image-card {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid var(--mv-gray-200);
}

.item-image-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  border-color: var(--mv-primary);
}

.item-image-preview {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.item-image-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.item-image-actions {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.item-image-card:hover .item-image-actions {
  opacity: 1;
}

.item-image-change-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  background: rgba(255,255,255,0.9) !important;
  border: none !important;
}

.item-image-change-btn:hover {
  background: white !important;
  transform: scale(1.1);
}

/* Image Library Styles */
.images-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

/* === ASSETS GALLERY STYLES (MARKETING) === */

/* Assets Gallery */
.assets-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

.video-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: rgba(0,0,0,0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
}

/* === COMMON SHARED STYLES === */

/* Add Icon Styles */
.add-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0, 85, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 24px;
  color: var(--mv-primary);
  transition: all 0.3s ease;
}

.asset-add-card:hover .add-icon,
.image-add-card:hover .add-icon {
  background: rgba(255,255,255,0.2);
  color: white;
}

.add-text {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--mv-text-heading);
}

.asset-add-card:hover .add-text,
.image-add-card:hover .add-text {
  color: white;
}

.add-description {
  font-size: 14px;
  color: var(--mv-text);
  margin: 0;
}

.asset-add-card:hover .add-description,
.image-add-card:hover .add-description {
  color: rgba(255,255,255,0.8);
}

/* Modal Header Primary Gradient */
.modal-header.bg-gradient-primary {
  background: linear-gradient(135deg, var(--mv-primary) 0%, #825ee4 100%) !important;
}

/* Assets Library Grid */
.assets-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

/* Loading Placeholder */
.loading-placeholder {
  grid-column: 1 / -1;
}

/* Text Truncate */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Upload Zone */
.upload-zone.drag-over {
  border-color: var(--mv-primary) !important;
  background-color: var(--mv-primary-50) !important;
}

/* === RESPONSIVE STYLES === */

/* Tablet and smaller */
@media (max-width: 768px) {
  .images-library-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
  }

  .assets-gallery {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .images-library-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .assets-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .assets-library-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Animations pour le toast de succès */
@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* ========================================
   🤖 ÉDITEUR D'IMAGE - RETOUCHE IA
   ======================================== */

/* ✨ Prévisualisation des images de référence - Design amélioré */
#aiReferencePreview {
  min-height: 30px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 0;
}

#aiReferencePreview .reference-img-preview {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--mv-gray-200);
  background: #ffffff;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  cursor: pointer;
}

#aiReferencePreview .reference-img-preview:hover {
  border-color: var(--mv-primary);
  box-shadow: 0 4px 14px rgba(0, 85, 255, 0.25);
  transform: translateY(-3px) scale(1.02);
}

#aiReferencePreview .reference-img-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

#aiReferencePreview .reference-img-preview:hover img {
  transform: scale(1.08);
}

#aiReferencePreview .reference-img-preview .remove-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(220, 53, 69, 0.95);
  color: white;
  border: 2px solid white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  padding: 0;
  opacity: 0;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  z-index: 10;
}

#aiReferencePreview .reference-img-preview:hover .remove-btn {
  opacity: 1;
}

#aiReferencePreview .reference-img-preview .remove-btn:hover {
  background: rgba(220, 53, 69, 1);
  transform: scale(1.15);
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

#aiReferencePreview .reference-img-preview .remove-btn:active {
  transform: scale(0.9);
}

/* 🎨 Badge spécial pour les images du canvas */
#aiReferencePreview .reference-img-preview.canvas-image {
  border-color: rgba(0, 85, 255, 0.5);
  background: linear-gradient(135deg, var(--mv-gray-50) 0%, #ffffff 100%);
}

#aiReferencePreview .reference-img-preview.canvas-image:hover {
  border-color: var(--mv-primary);
  box-shadow: 0 4px 16px rgba(0, 85, 255, 0.35);
}

/* ☁️ Badge spécial pour les images uploadées */
#aiReferencePreview .reference-img-preview.uploaded-image {
  border-color: rgba(23, 162, 184, 0.3);
}

#aiReferencePreview .reference-img-preview.uploaded-image:hover {
  border-color: #17a2b8;
  box-shadow: 0 4px 14px rgba(23, 162, 184, 0.25);
}

/* ========================================
   🔒 ÉDITEUR PHOTO - VERROUILLAGE CALQUES
   ======================================== */

/* Bouton de verrouillage actif */
.layer-lock.btn-warning {
  background-color: var(--mv-warning);
  border-color: var(--mv-warning);
  color: #fff;
}

.layer-lock.btn-warning:hover {
  background-color: #fa5228;
  border-color: #fa5228;
  transform: scale(1.05);
}

.layer-lock.btn-outline-secondary {
  transition: all 0.2s ease;
}

.layer-lock.btn-outline-secondary:hover {
  transform: scale(1.05);
}

/* Icône de cadenas */
.layer-lock i {
  transition: all 0.2s ease;
}

.layer-item:has(.layer-lock.btn-warning):hover {
  animation: mai-lock-shake 0.3s ease;
}

/* Indicateur visuel sur les calques verrouillés */
.layer-item:has(.layer-lock.btn-warning) {
  opacity: 0.8;
  background-color: rgba(251, 99, 64, 0.05) !important;
}

.layer-item:has(.layer-lock.btn-warning):hover {
  opacity: 1;
}

/* ========================================
   📐 ÉDITEUR PHOTO - MODE DE SCALE
   ======================================== */

/* Sélecteur de mode de scale */
#scaleModeSelect {
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

#scaleModeSelect:focus {
  border-color: var(--mv-primary);
  box-shadow: 0 0 0 0.2rem rgba(0, 85, 255, 0.25);
}

/* Options du sélecteur */
#scaleModeSelect option {
  padding: 0.5rem;
}

#scaleModeSelect:focus,
#scaleModeSelect.mai-changing {
  animation: mai-scale-change 0.3s ease;
}

/* ========================================
   🎨 ÉDITEUR PHOTO - AMÉLIORATIONS UI
   ======================================== */

/* Amélioration des groupes de boutons dans les calques */
.layer-item .btn-group {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.layer-item .btn-group button {
  transition: all 0.15s ease;
}

.layer-item .btn-group button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.layer-item .btn-group button:active {
  transform: translateY(0);
}

/* Icônes de calques avec couleurs */
.layer-item i.fa-image {
  color: var(--mv-info);
}

.layer-item i.fa-font {
  color: var(--mv-primary);
}

.layer-item i.fa-square,
.layer-item i.fa-circle {
  color: var(--mv-success);
}

.layer-item i.fa-minus {
  color: var(--mv-text-muted);
}

.layer-item.bg-primary i {
  color: var(--mv-primary) !important;
}

/* Smooth transitions pour tous les éléments interactifs */
.layer-item,
.layer-lock,
#scaleModeSelect,
.mai-scale-mode-container {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation d'apparition */
@keyframes fadeInTemplate {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* État de chargement */
#template-composition-gallery .spinner-border {
  width: 3rem;
  height: 3rem;
  border-width: 0.3rem;
}

/* Message "aucun template" */
#no-templates-message {
  padding: 3rem 1rem;
  font-size: 1.1rem;
}

/* Bouton de création */
#btn-create-from-template {
  min-width: 250px;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}

#btn-create-from-template:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#btn-create-from-template:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 85, 255, 0.3);
}

/* Filtres */
#filter-platform,
#filter-format {
  border-radius: 8px;
  border: 1px solid var(--mv-gray-200);
  transition: all 0.2s ease;
}

#filter-platform:focus,
#filter-format:focus {
  border-color: var(--bs-primary, var(--mv-primary));
  box-shadow: 0 0 0 3px rgba(0, 85, 255, 0.1);
}


/* Indicateur de sauvegarde - Style alerte moderne */
.save-indicator {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  font-weight: 600;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  min-width: 200px;
  opacity: 1;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s ease;
  animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.save-indicator.saving {
  background: linear-gradient(135deg, var(--mv-primary) 0%, #825ee4 100%);
  color: white;
  box-shadow: 0 10px 40px rgba(0, 85, 255, 0.35);
}

.save-indicator.saved {
  background: linear-gradient(135deg, var(--mv-success) 0%, #2dcecc 100%);
  color: white;
  box-shadow: 0 10px 40px rgba(45, 206, 137, 0.45);
  animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1), successPulse 0.6s ease;
}

.save-indicator.saved .save-icon i {
  animation: checkBounce 0.5s ease;
}

.save-indicator.error {
  background: linear-gradient(135deg, var(--mv-danger) 0%, #f56036 100%);
  color: white;
  box-shadow: 0 10px 40px rgba(245, 54, 92, 0.45);
  animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1), shake 0.5s ease;
}

@keyframes successPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes checkBounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3) rotate(10deg);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

.save-indicator .save-icon {
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.save-indicator .save-text {
  white-space: nowrap;
  letter-spacing: 0.3px;
}

@keyframes slideInRight {
  from {
    transform: translateX(120%) translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .save-indicator {
    top: 10px;
    right: 10px;
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* === STYLES POUR LA CARD D'IMAGE ITEM === */

.item-image-card {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid var(--mv-gray-200);
}

.item-image-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  border-color: var(--mv-primary);
}

.item-image-preview {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.item-image-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.item-image-actions {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.item-image-card:hover .item-image-actions {
  opacity: 1;
}

.item-image-change-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  background: rgba(255,255,255,0.9) !important;
  border: none !important;
}

.item-image-change-btn:hover {
  background: white !important;
  transform: scale(1.1);
}

/* === STYLES POUR LA MODAL IMAGE LIBRARY === */

.modal-header.bg-gradient-primary {
  background: linear-gradient(135deg, var(--mv-primary) 0%, #825ee4 100%) !important;
}

.images-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

.loading-placeholder {
  grid-column: 1 / -1;
}

/* Upload zone styles */
.upload-zone.drag-over {
  border-color: var(--mv-primary) !important;
  background-color: var(--mv-primary-50) !important;
}

/* Responsive */
@media (max-width: 768px) {
  .images-library-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
  }
}

@media (max-width: 576px) {
  .images-library-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================ */
/* Modal Reformulation de l'audioguide          */
/* ============================================ */
#reformulateAudioguideModal .modal-content { border-radius: 18px; overflow: hidden; border: none; box-shadow: 0 8px 40px rgba(0,0,0,0.12); }
#reformulateAudioguideModal .reformulate-preset { border: 1.5px solid var(--mv-gray-200); border-radius: 20px; font-size: 0.78rem; padding: 4px 13px; color: #4b5563; background: #fff; transition: all 0.15s ease; line-height: 1.4; }
#reformulateAudioguideModal .reformulate-preset:hover { border-color: var(--mv-primary); color: var(--mv-primary); background: var(--mv-primary-50); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0, 85, 255,0.12); }
#reformulateAudioguideModal .reformulate-result { max-height: 260px; overflow-y: auto; background: var(--mv-gray-50); border: 1.5px solid var(--mv-gray-100); border-radius: 12px; padding: 13px 15px; line-height: 1.65; font-size: 0.9rem; color: var(--mv-gray-800); white-space: pre-wrap; }
#reformulateAudioguideModal .diff-col { flex: 1; border-radius: 10px; padding: 10px 12px; font-size: 0.83rem; line-height: 1.6; max-height: 190px; overflow-y: auto; }
#reformulateAudioguideModal .diff-removed { background: #fde8e8; text-decoration: line-through; color: #b91c1c; border-radius: 3px; padding: 0 2px; }
#reformulateAudioguideModal .diff-added { background: #dcfce7; color: #15803d; border-radius: 3px; padding: 0 2px; }
#reformulateResultArea { animation: reformulateFadeIn 0.25s ease; }
#reformulateAudioguideModal .modal-footer { border-top: 1px solid var(--mv-gray-100); background: var(--mv-gray-50); }

.add-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0, 85, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 24px;
  color: var(--mv-primary);
  transition: all 0.3s ease;
}

.add-text {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--mv-text-heading);
}

.add-description {
  font-size: 14px;
  color: var(--mv-text);
  margin: 0;
}
/* === Tableau de bord entreprise (Maiven) === */
.dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-bottom: 2rem;
}

.dashboard-hero {
  display: grid;
  gap: 1.5rem;
}

.card-chatmi .card-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mi-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.mi-input-field {
  flex: 1 1 240px;
  min-height: 3rem;
}

.mi-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.mi-actions .upload-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0;
}

.mi-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mi-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.mi-tool-option {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.dashboard-kpis {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.kpi-card {
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
}

.kpi-label {
  font-size: 0.9rem;
  color: var(--bs-secondary-color);
}

.kpi-value {
  font-size: 2rem;
  font-weight: 600;
  color: var(--bs-primary);
}

.modules-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.module-card {
  text-decoration: none;
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: inherit;
}

.module-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 1.5rem -1rem rgba(33, 37, 41, 0.35);
}

.module-label {
  font-size: 0.95rem;
  color: var(--bs-secondary-color);
}

.module-value {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--bs-primary);
}

.module-link {
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
}

.quick-actions {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.quick-actions .qa-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
  min-height: 120px;
  padding: 1rem 1.25rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  background-color: var(--bs-body-bg, #fff);
  color: inherit;
  text-align: left;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quick-actions .qa-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 1.5rem -1rem rgba(33, 37, 41, 0.35);
}

.quick-actions .qa-tile:focus {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.quick-actions button.qa-tile {
  background-color: var(--bs-body-bg, #fff);
}

.qa-title {
  font-weight: 600;
  font-size: 1rem;
}

.qa-subtitle {
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
}

.dashboard-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.section-link {
  font-size: 0.9rem;
  font-weight: 500;
}

.cards-scroll-x {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  scroll-snap-type: x proximity;
}

.cards-scroll-x::-webkit-scrollbar {
  height: 8px;
}

.cards-scroll-x::-webkit-scrollbar-thumb {
  background-color: rgba(33, 37, 41, 0.2);
  border-radius: 999px;
}

.card-visit,
.card-item,
.card-print {
  min-width: 260px;
  scroll-snap-align: start;
  border-radius: 1rem;
  border: 1px solid var(--bs-border-color);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-visit:hover,
.card-item:hover,
.card-print:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 1.5rem -1rem rgba(33, 37, 41, 0.35);
}

.visit-thumb,
.item-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 0.75rem;
  margin: 1rem;
  flex-shrink: 0;
}

.visit-body,
.item-body {
  padding: 1rem 1.25rem 1.5rem 1.25rem;
}

.visit-title,
.item-title,
.campaign-title,
.print-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.visit-desc,
.item-desc {
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
  margin-bottom: 0.75rem;
}

.lang-flag {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 3px;
}

.badge-wip {
  background-color: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-primary);
  font-size: 0.75rem;
  margin-bottom: 0.35rem;
}

.cards-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card-document-preview,
.card-workspace,
.card-page {
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-document-preview:hover,
.card-workspace:hover,
.card-page:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 1.5rem -1rem rgba(33, 37, 41, 0.35);
}

.doc-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(var(--bs-primary-rgb), 0.12);
  color: var(--bs-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.doc-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.doc-desc {
  min-height: 3.75rem;
  color: var(--bs-secondary-color);
}

.doc-date,
.campaign-meta,
.workspace-date,
.page-meta,
.print-meta {
  color: var(--bs-secondary-color);
}

.campaign-link {
  font-size: 0.85rem;
  color: var(--bs-primary);
}

.workspace-desc {
  font-size: 0.9rem;
  color: var(--bs-secondary-color);
  min-height: 3.5rem;
}

.page-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.dashboard-map {
  height: 340px;
  border-radius: 1rem;
  overflow: hidden;
}

.dashboard-modal-top {
  z-index: 1065;
}

.dashboard-document-card {
  cursor: pointer;
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-document-card.selected {
  border-color: var(--bs-primary);
  box-shadow: 0 0.75rem 1.5rem -1rem rgba(33, 37, 41, 0.3);
}

.document-icon {
  font-size: 1.5rem;
  color: var(--bs-primary);
}

.modal-list-thumb {
  width: 60px;
  height: 50px;
  object-fit: cover;
}

.empty-state {
  padding: 1rem 1.25rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: 1rem;
  color: var(--bs-secondary-color);
  font-size: 0.95rem;
}

.dashboard-hero.hero-banner {
  position: relative;
  display: grid;
  gap: 2rem;
  padding: 2.5rem;
  border-radius: 1rem;
  color: #fff;
  overflow: hidden;
}

.dashboard-hero.hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.1), rgba(79, 70, 229, 0.5));
  pointer-events: none;
}

.dashboard-hero.hero-banner > * {
  position: relative;
  z-index: 1;
}


.hero-copy {
  display: flex;
  flex-direction: column;
  padding-right: 2rem;
  padding-left: 2rem;
  gap: 1.5rem;
  width: 100%;
  max-width: 100%;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hero-copy h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 700;
}

.hero-text {
  margin: 0;
  text-wrap: balance;
  max-width: 400px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
}

.hero-metrics {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.hero-metric {
  padding: 1rem 1.25rem;
  border-radius: 1.4rem;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  color: #fff;
}

.metric-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
}

.metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.9rem;
  background: rgba(15, 23, 42, 0.28);
}

.metric-icon svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.metric-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
}

.metric-value {
  display: block;
  font-size: 2rem;
  font-weight: 700;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-btn {
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
}

.hero-btn.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.hero-chat.card {
  position: relative;
  background: rgba(15, 25, 55, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.6rem;
  color: #fff;
  backdrop-filter: blur(10px);
}

.hero-chat-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.hero-chat-subtitle {
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
}

.hero-mi-input {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 0.35rem 0.35rem 0.35rem 0.75rem;
}

.hero-mi-input input {
  background: transparent;
  color: #fff;
  border: none;
}

.hero-mi-input input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.hero-mi-input .form-control:focus {
  box-shadow: none;
}

.hero-send {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.1rem;
  border-radius: 0.9rem;
}

.hero-chat-buttons {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.action-strip {
  margin: 2.5rem 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.action-track {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  width: 100%;
}

.action-track .action-pill {
  flex: 1 1 160px;
  text-align: center;
}

.action-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.action-pill:hover,
.action-pill:focus {
  transform: translateY(-2px);
  box-shadow: 0 0.75rem 1.25rem -1rem rgba(33, 37, 41, 0.3);
}

.action-pill-alt {
  align-self: flex-start;
  background: rgba(var(--bs-primary-rgb), 0.08);
  border-color: rgba(var(--bs-primary-rgb), 0.2);
  color: var(--bs-primary);
}

.action-track-secondary {
  padding-top: 0.25rem;
}

@media (max-width: 576px) {
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .action-track .action-pill {
    flex: 1 1 100%;
  }
}

.sub-nav-list {
  padding-left: 3rem;
  margin: 0 0 1.25rem;
}

.sub-nav-list .nav-item + .nav-item {
  margin-top: 0.35rem;
}

.sub-nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
  padding: 0.35rem 0;
}

.sub-nav-link .sub-nav-bullet {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--bs-secondary);
  display: inline-block;
  flex-shrink: 0;
}

.sub-nav-link:hover {
  color: var(--bs-primary);
}

.sub-nav-link.active {
  color: var(--bs-primary);
  font-weight: 600;
}

.sub-nav-link.active .sub-nav-bullet {
  background: var(--bs-primary);
}

.collapse-arrow {
  color: var(--bs-secondary);
  transition: transform 0.2s ease, color 0.2s ease;
}

.nav-link.active .collapse-arrow {
  color: var(--bs-primary);
}

.nav-link[aria-expanded="true"] .collapse-arrow {
  transform: rotate(90deg);
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dotPulse {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Hero chat container - Dashboard */
.hero-chat {
  flex: 1;
  max-width: 100%;
  min-width: 400px;
}

@media (max-width: 1200px) {
  .hero-chat {
    max-width: 100%;
    min-width: 100%;
    margin-top: 24px;
  }
}

.modal-backdrop {
  z-index: 9998 !important;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
  }
}

/* ========================================
   FIN DU STYLE CHAT
   ======================================== */

/* ========================================
   DASHBOARD STYLES
   ======================================== */

.dashboard-container {
  width: 100%;
  padding: 0;
  margin: 0;
}

/* Hero Banner - Pleine largeur */
.dashboard-hero.hero-banner {
  width: 100%;
  margin: 0;
  padding: 40px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Action Strip */
.action-strip {
  padding: 40px 20px;
  background: var(--mv-gray-50);
}

.action-track {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
}

.action-track-secondary {
  margin-top: 12px;
}

.action-pill {
  padding: 12px 24px;
  border-radius: 50px;
  background: white;
  border: 1px solid var(--mv-gray-300);
  color: var(--mv-text-heading);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.action-pill:hover {
  background: var(--mv-primary);
  color: white;
  border-color: var(--mv-primary);
  transform: translateY(-2px);
}

.action-pill-alt {
  background: var(--mv-gray-200);
}

.action-pill-alt:hover {
  background: var(--mv-text-heading);
  color: white;
  border-color: var(--mv-text-heading);
}

.badge-wip {
  background: #fff8ed;
  color: var(--mv-warning);
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 600;
}

/* ========================================
   STYLES NAVIGATION ACCORDÉON SIDEBAR
   ======================================== */

/* Homogénéisation des marges pour tous les items */
.nav-accordion-item,
.nav-item-simple {
  margin-bottom: 0.25rem;
}

/* Style pour les headers d'accordéon */
.nav-accordion-header {
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0.5rem;
  margin: 0 .5rem;
  padding: 0.5rem 0.75rem;
  min-height: 42px;
}

.nav-accordion-header:hover {
  background-color: rgba(0, 85, 255, 0.05);
}

.nav-accordion-header.active {
  background-color: rgba(0, 85, 255, 0.1);
}

.nav-accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-decoration: none;
  color: inherit;
  padding: 0;
}

.nav-accordion-arrow {
  transition: transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.nav-accordion-arrow.collapsed {
  transform: rotate(0deg);
}

.nav-accordion-arrow.expanded {
  transform: rotate(180deg);
}

.nav-accordion-body {
  padding-left: 2.5rem;
  overflow: hidden;
}

.nav-accordion-body .nav-link {
  padding: 0.5rem 0.75rem;
  font-size: 14px;
  margin: 0.15rem 0;
  border-radius: 0.5rem;
}

.nav-accordion-body .nav-link:hover {
  background-color: rgba(0, 85, 255, 0.05);
}

.nav-accordion-body .nav-link.active {
  background-color: rgba(0, 85, 255, 0.1);
  color: var(--bs-primary);
  font-weight: 500;
}

#sidenav-main.sidenav-enterprise {
  max-height: calc(100vh - 2rem);
  overflow: hidden !important;
}

#sidenav-main.sidenav-enterprise .sidenav-header,
#sidenav-main.sidenav-enterprise > .horizontal,
#sidenav-main.sidenav-enterprise .sidenav-mini-footer {
  flex-shrink: 0;
}

body:not(.g-sidenav-mini) #sidenav-main.sidenav-enterprise .sidenav-scroll-area,
.g-sidenav-mini #sidenav-main.sidenav-enterprise:hover .sidenav-scroll-area {
  flex: 1 1 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
}

body:not(.g-sidenav-mini) #sidenav-main.sidenav-enterprise .nav-accordion-header.active,
body:not(.g-sidenav-mini) #sidenav-main.sidenav-enterprise .nav-accordion-header:has(+ .nav-accordion-collapse.show),
.g-sidenav-mini #sidenav-main.sidenav-enterprise:hover .nav-accordion-header.active,
.g-sidenav-mini #sidenav-main.sidenav-enterprise:hover .nav-accordion-header:has(+ .nav-accordion-collapse.show) {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

body:not(.g-sidenav-mini) #sidenav-main.sidenav-enterprise .nav-accordion-collapse.show .nav-accordion-body,
.g-sidenav-mini #sidenav-main.sidenav-enterprise:hover .nav-accordion-collapse.show .nav-accordion-body {
  padding: 0.25rem 0.75rem 0.35rem 3rem;
}

body:not(.g-sidenav-mini) #sidenav-main.sidenav-enterprise .nav-accordion-collapse.show .nav-accordion-body .nav-link,
.g-sidenav-mini #sidenav-main.sidenav-enterprise:hover .nav-accordion-collapse.show .nav-accordion-body .nav-link {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

body:not(.g-sidenav-mini) #sidenav-main.sidenav-enterprise .sidenav-mini-footer,
.g-sidenav-mini #sidenav-main.sidenav-enterprise:hover .sidenav-mini-footer {
  padding: 0.75rem 1.25rem 1rem !important;
}

body:not(.g-sidenav-mini) #sidenav-main.sidenav-enterprise .sidenav-mini-btn,
.g-sidenav-mini #sidenav-main.sidenav-enterprise:hover .sidenav-mini-btn {
  min-height: 36px;
  padding: 0.35rem 0.75rem !important;
}

#sidenav-main.sidenav-enterprise .nav-accordion-item,
#sidenav-main.sidenav-enterprise .nav-item-simple {
  width: 100%;
  margin-bottom: 0 !important;
}

#sidenav-main.sidenav-enterprise .sidenav-scroll-area,
#sidenav-main.sidenav-enterprise .navbar-nav {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

#sidenav-main.sidenav-enterprise .navbar-nav {
  gap: 0.25rem;
}

#sidenav-main.sidenav-enterprise .nav-accordion-header {
  width: calc(100% - 1.25rem);
  margin: 0 0.625rem !important;
  padding: 0 !important;
  min-height: 0 !important;
}

#sidenav-main.sidenav-enterprise .nav-item-simple .nav-link,
#sidenav-main.sidenav-enterprise .nav-accordion-toggle {
  width: calc(100% - 1.25rem);
  min-height: 42px;
  margin: 0 0.625rem !important;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
}

#sidenav-main.sidenav-enterprise .nav-accordion-header .nav-accordion-toggle {
  width: 100%;
  margin: 0 !important;
}

#sidenav-main.sidenav-enterprise .nav-accordion-toggle > .d-flex,
#sidenav-main.sidenav-enterprise .nav-item-simple .nav-link {
  min-width: 0;
}

#sidenav-main.sidenav-enterprise .navbar-nav .nav-link .icon.icon-shape.icon-md,
#sidenav-main.sidenav-enterprise .nav-accordion-toggle .icon.icon-shape.icon-md {
  flex: 0 0 1.75rem !important;
  padding: 0 !important;
}

#sidenav-main.sidenav-enterprise .icon.icon-shape.icon-md svg {
  display: block;
  flex: 0 0 20px;
}

#sidenav-main.sidenav-enterprise .nav-lock-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

#sidenav-main.sidenav-enterprise .nav-item-simple > .nav-link,
#sidenav-main.sidenav-enterprise .nav-accordion-toggle {
  padding-right: 0.875rem !important;
  padding-left: 0.875rem !important;
}

body:not(.g-sidenav-mini) #sidenav-main.sidenav-enterprise .nav-accordion-header.active,
body:not(.g-sidenav-mini) #sidenav-main.sidenav-enterprise .nav-accordion-header:has(+ .nav-accordion-collapse.show),
.g-sidenav-mini #sidenav-main.sidenav-enterprise:hover .nav-accordion-header.active,
.g-sidenav-mini #sidenav-main.sidenav-enterprise:hover .nav-accordion-header:has(+ .nav-accordion-collapse.show) {
  width: calc(100% - 1.25rem);
  margin: 0 0.625rem !important;
  padding: 0 !important;
}

/* Taille de texte harmonisée à 14px pour tous les liens du menu */
.nav-accordion-body .nav-link .nav-link-text,
.nav-item-simple .nav-link .nav-link-text,
.navbar-vertical .navbar-nav .nav-link,
.navbar-vertical .navbar-nav .nav-link .nav-link-text,
.nav-accordion-header .nav-link-text,
.nav-accordion-toggle .nav-link-text {
  font-size: 14px !important;
}

/* Animation pour le collapse */
.nav-accordion-collapse {
  transition: height 0.3s ease;
}

/* Style pour les items sans sous-menu - même taille que les accordéons */
.nav-item-simple .nav-link {
  transition: all 0.2s ease;
  border-radius: 0.5rem;
  margin: 0;
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem !important;
  min-height: 42px;
}

.nav-item-simple .nav-link:hover {
  background-color: rgba(0, 85, 255, 0.05);
}

.nav-item-simple .nav-link.active {
  background-color: rgba(0, 85, 255, 0.1);
}

/* ========================================
   FIN DES STYLES DASHBOARD
   ======================================== */

/* ========================================
   STYLES POUR LES PLANS
   ======================================== */

.card-plan {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 1rem;
  overflow: hidden;
}

.card-plan:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 85, 255, 0.15) !important;
}

.card-plan .card-header {
  padding: 1.25rem 1rem 0.5rem;
}

.card-plan .card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--mv-text-heading);
  line-height: 1.4;
}

.card-plan .btn-sm {
  padding: 0.375rem 0.5rem;
  transition: all 0.2s ease;
}

.card-plan .btn-outline-primary {
  border-color: rgba(0, 85, 255, 0.2);
  color: var(--mv-primary);
}

.card-plan .btn-outline-primary:hover {
  background-color: var(--mv-primary);
  border-color: var(--mv-primary);
  color: #fff;
  transform: scale(1.05);
}

.card-plan .btn-outline-danger {
  border-color: rgba(245, 54, 92, 0.2);
  color: var(--mv-danger);
}

.card-plan .btn-outline-danger:hover {
  background-color: var(--mv-danger);
  border-color: var(--mv-danger);
  color: #fff;
  transform: scale(1.05);
}

.cartes-map {
  height: 220px;
  width: 100%;
  background: linear-gradient(135deg, var(--mv-gray-50) 0%, var(--mv-gray-200) 100%);
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

/* État vide */
.card-body.text-center.py-5 svg {
  stroke-width: 1.5;
}

/* Responsive adjustments */
@media (max-width: 575.98px) {
  .card-plan .card-header {
    padding: 1rem 0.875rem 0.5rem;
  }
  
  .card-plan .card-title {
    font-size: 1rem;
  }
  
  .cartes-map {
    height: 180px;
  }
  
  .card-plan .btn-sm {
    padding: 0.25rem 0.4rem;
  }
  
  .card-plan .btn-sm svg {
    width: 14px;
    height: 14px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .cartes-map {
    height: 210px;
  }
}

@media (min-width: 1400px) {
  .cartes-map {
    height: 240px;
  }
}

/* Améliorations du header de page */
.card-header h3 {
  font-weight: 700;
  color: var(--mv-text-heading);
}

.card-header .text-muted.small {
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Amélioration du modal */
.modal-content.border-0 {
  border-radius: 1rem;
}

.modal-header.border-0 {
  padding: 1.5rem 1.5rem 0.75rem;
}

.modal-body.pt-2 {
  padding: 1rem 1.5rem;
}

.modal-footer.border-0 {
  padding: 0.75rem 1.5rem 1.5rem;
}

/* ========================================
   FIN DES STYLES POUR LES PLANS
   ======================================== */

/* ========================================
   STYLES POUR LES PRINTS
   ======================================== */

.card-print {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 1rem;
  overflow: hidden;
}

.card-print:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 85, 255, 0.15) !important;
}

.card-print .card-header {
  padding: 1.25rem 1rem 0.5rem;
}

.card-print .card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--mv-text-heading);
  line-height: 1.4;
}

.card-print .btn-sm {
  transition: all 0.2s ease;
}

.card-print .btn-outline-primary:hover,
.card-print .btn-outline-danger:hover {
  transform: scale(1.05);
}

/* Badges spécifiques aux réseaux sociaux */
.badge.text-bg-light {
  background-color: var(--mv-gray-50) !important;
  color: var(--mv-text-heading) !important;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* ========================================
   STYLES COMMUNS POUR TOUTES LES CARDS
   ======================================== */

.card-plan .btn-sm,
.card-print .btn-sm {
  padding: 0.375rem 0.625rem;
  transition: all 0.2s ease;
}

.card-plan .btn-outline-primary,
.card-print .btn-outline-primary {
  border-color: rgba(0, 85, 255, 0.2);
  color: var(--mv-primary);
}

.card-plan .btn-outline-primary:hover,
.card-print .btn-outline-primary:hover {
  background-color: var(--mv-primary);
  border-color: var(--mv-primary);
  color: #fff;
}

.card-plan .btn-outline-danger,
.card-print .btn-outline-danger {
  border-color: rgba(245, 54, 92, 0.2);
  color: var(--mv-danger);
}

.card-plan .btn-outline-danger:hover,
.card-print .btn-outline-danger:hover {
  background-color: var(--mv-danger);
  border-color: var(--mv-danger);
  color: #fff;
}

/* Responsive pour tous les types de cards */
@media (max-width: 575.98px) {
  .card-plan .card-header,
  .card-print .card-header {
    padding: 1rem 0.875rem 0.5rem;
  }
  
  .card-plan .card-title,
  .card-print .card-title {
    font-size: 1rem;
  }
  
  .card-plan .btn-sm,
  .card-print .btn-sm {
    padding: 0.25rem 0.4rem;
  }
  
  .card-plan .btn-sm svg,
  .card-print .btn-sm svg {
    width: 14px;
    height: 14px;
  }
}

/* ========================================
   STYLES POUR LES CARDS DE PAGES (APPLICATION MOBILE)
   ======================================== */

.card-page {
  transition: all 0.3s ease;
  border-radius: 1rem;
  overflow: hidden;
}

.card-page:hover {
  transform: translateY(-4px);
  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08) !important;
}

.card-page .card-header {
  background-color: #fff;
  padding: 1rem 1rem 0.75rem;
}

.card-page .card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #32325d;
  margin: 0;
}

.card-page .page-type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-page .page-type-icon svg {
  width: 20px;
  height: 20px;
}

.card-page .card-body {
  background-color: #fff;
}

.card-page .language-list {
  max-height: 300px;
  overflow-y: auto;
}

.card-page .language-item .hover-bg {
  transition: background-color 0.2s ease;
}

.card-page .language-item .hover-bg:hover {
  background-color: var(--mv-gray-50);
}

.card-page .border-bottom {
  border-color: rgba(0, 0, 0, 0.05) !important;
}

.card-page .btn-outline-secondary {
  border-color: rgba(131, 146, 171, 0.2);
  color: var(--mv-text-muted);
  padding: 0.25rem 0.5rem;
  transition: all 0.2s ease;
}

.card-page .btn-outline-secondary:hover {
  background-color: var(--mv-text-muted);
  border-color: var(--mv-text-muted);
  color: #fff;
}

.card-page .btn-outline-secondary svg {
  transition: transform 0.2s ease;
}

.card-page .btn-outline-secondary[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Responsive pour cards de pages */
@media (max-width: 575.98px) {
  .card-page .card-header {
    padding: 1rem 0.875rem 0.75rem;
  }
  
  .card-page .card-title {
    font-size: 1rem;
  }
  
  .card-page .page-type-icon svg {
    width: 18px;
    height: 18px;
  }
  
  .card-page .btn-sm {
    padding: 0.2rem 0.4rem;
  }
}

/* ========================================
   FIN DES STYLES POUR LES CARDS MARKETING
   ======================================== */

/* ========================================
   STYLES POUR LIENS ET QR CODES
   ======================================== */

/* Exemples de dégradés pour les QR Codes */
.gradient-example {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 4px;
}

.gradient-example.horizontal { 
  background: linear-gradient(to right, var(--mv-primary), var(--mv-info)); 
}

.gradient-example.vertical { 
  background: linear-gradient(to bottom, var(--mv-primary), var(--mv-info)); 
}

.gradient-example.radial { 
  background: radial-gradient(var(--mv-primary), var(--mv-info)); 
}

.gradient-example.square { 
  background: radial-gradient(circle, var(--mv-primary), var(--mv-info)); 
}

/* Cards pour liens */
.card-lien {
  transition: all 0.3s ease;
  border: 0;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.card-lien:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* Animation pour l'apparition du formulaire */
#formCol {
  animation: slideDown 0.3s ease-out;
}

/* Style pour les boutons radio avec icônes */
.btn-check:checked + .btn-outline-secondary {
  background-color: var(--mv-primary);
  border-color: var(--mv-primary);
  color: white;
}

.btn-outline-secondary:hover {
  background-color: rgba(0, 85, 255, 0.1);
  border-color: var(--mv-primary);
}

.hover-bg:hover {
  background-color: rgba(0, 85, 255, 0.05);
}

/* Text ellipsis pour descriptions */
.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: 2;
}

/* SVG avec opacité réduite */
.svg-faded {
  opacity: 0.5;
}

/* ========================================
   FIN DES STYLES LIENS ET QR CODES
   ======================================== */

/* ========================================
   FIX Z-INDEX MODALS BOOTSTRAP 5
   ======================================== */
/* Force les modals à être au-dessus des backdrops */
.modal {
    --bs-modal-zindex: 1055 !important;
    z-index: 1055 !important;
}

.modal-backdrop {
    --bs-backdrop-zindex: 1050 !important;
    z-index: 1050 !important;
}

/* Garantir que les modals visibles sont TOUJOURS au-dessus */
.modal.show {
    z-index: 1055 !important;
}

.modal-backdrop.show {
    z-index: 1050 !important;
}
/* ========================================
   FIN FIX Z-INDEX MODALS
   ======================================== */

/* ============================================
   WORKFLOW MODERNE - DESIGN SYSTEM MAIVEN UNIFIÉ
   Variables communes pour tous les workflows
   ============================================ */

:root {
  /* Couleurs principales - Identité Maiven */
  --workflow-primary: var(--mv-primary-dark);
  --workflow-primary-hover: #0d0f8a;
  --workflow-primary-light: var(--mv-primary-50);
  --workflow-secondary: #10B981;
  --workflow-secondary-dark: #059669;
  --workflow-accent: #F59E0B;
  --workflow-danger: #EF4444;
  --workflow-info: var(--mv-info);

  /* Palette de gris */
  --workflow-gray-50: var(--mv-gray-50);
  --workflow-gray-100: var(--mv-gray-100);
  --workflow-gray-200: var(--mv-gray-200);
  --workflow-gray-300: #d1d5db;
  --workflow-gray-600: #6b7280;
  --workflow-gray-700: var(--mv-gray-700);
  --workflow-gray-900: var(--mv-gray-800);

  /* Couleurs sémantiques */
  --workflow-bg: #FFFFFF;
  --workflow-border: var(--mv-gray-200);
  --workflow-text: var(--mv-gray-800);
  --workflow-text-light: #6B7280;

  /* Border radius standardisés */
  --workflow-radius-lg: 12px;
  --workflow-radius-md: 10px;
  --workflow-radius-sm: 8px;
  --workflow-radius-xs: 6px;

  /* Transitions standardisées */
  --workflow-transition: all 0.2s ease;
  --workflow-transition-slow: all 0.3s ease;

  /* Espacements */
  --workflow-spacing-xs: 0.5rem;
  --workflow-spacing-sm: 1rem;
  --workflow-spacing-md: 1.5rem;
  --workflow-spacing-lg: 2rem;

  /* Tailles des éléments */
  --workflow-step-size: 40px;
  --workflow-step-size-sm: 32px;

  /* Ombres */
  --workflow-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --workflow-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
  --workflow-shadow-lg: 0 4px 12px rgba(15, 22, 191, 0.15);

  /* Anciennes variables (rétrocompatibilité) */
  --wf-primary: var(--workflow-primary);
  --wf-primary-light: var(--workflow-primary-light);
  --wf-secondary: var(--workflow-secondary);
  --wf-accent: var(--workflow-accent);
  --wf-danger: var(--workflow-danger);
  --wf-border: var(--workflow-border);
  --wf-bg: var(--workflow-bg);
  --wf-text: var(--workflow-text);
  --wf-text-light: var(--workflow-text-light);
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Alpine.js cloak */
[x-cloak] {
  display: none !important;
}

/* Améliorations du stepper horizontal */
.transition-all {
  transition: all 0.2s ease;
}

/* Stepper buttons */
.btn-sm.rounded-circle {
  transition: all 0.3s ease;
}

.btn-sm.rounded-circle:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Liste des étapes - statuts */
#stepsList li {
  transition: all 0.2s ease;
  cursor: pointer;
}

#stepsList li:hover {
  background-color: rgba(0, 123, 255, 0.05);
}

#stepsList li[data-step-status="completed"] {
  opacity: 0.8;
}

#stepsList li[data-step-status="current"] {
  font-weight: 600;
  background-color: var(--mv-gray-50);
  border-left: 3px solid #007bff;
  padding-left: 12px !important;
}

/* Amélioration visuelle du card-body */
.card-body {
  padding: 1.5rem 2rem;
}

/* Styles spécifiques pour le mode adaptation */
.source-visit-info {
  background-color: var(--mv-primary-50);
  border-left: 4px solid #007bff;
  padding: 12px;
  margin-bottom: 20px;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .card-header .d-flex {
    width: 100%;
  }
  
  .card-header .d-flex gap-2 {
    margin-top: 1rem;
    width: 100%;
  }
}

.global-actions-box {
  background: var(--mv-gray-50);
  border: 1px solid var(--mv-gray-200);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.global-actions-box .btn {
  white-space: nowrap;
}

.progress-box {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.content-section {
  margin-bottom: 1.5rem;
}

.content-section-title {
  font-weight: 600;
  color: var(--mv-gray-800);
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.content-box {
  border-radius: 8px;
  padding: 1rem;
  max-height: 250px;
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: 0.9rem;
  border: 1px solid var(--mv-gray-200);
}

.content-box.text {
  background: var(--mv-primary-50);
  border-color: #cce5ff;
  color: var(--mv-gray-800);
}

.content-box.audio {
  background: #fffbf0;
  border-color: #ffe5cc;
  color: var(--mv-gray-800);
}

.button-group {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
}

/* Responsive step-writing */
@media (max-width: 768px) {
  .global-actions-box {
    flex-direction: column;
    align-items: stretch;
  }

  .button-group {
    flex-direction: column;
  }

  .button-group .btn {
    width: 100%;
  }
}

.form-section {
  margin-bottom: 2rem;
}

.form-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--mv-gray-700);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-section-title .badge {
  font-size: 0.7rem;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
}

.persona-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.persona-card {
  padding: 1.25rem;
  border: 2px solid var(--mv-gray-200);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: white;
}

.persona-card:hover {
  border-color: var(--mv-primary-dark);
  background: var(--mv-primary-50);
}

.persona-card.selected {
  border-color: var(--mv-primary-dark);
  background: var(--mv-primary-50);
  box-shadow: 0 0 0 3px rgba(15, 22, 191, 0.1);
}

.persona-card-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.persona-card-name {
  font-weight: 600;
  color: var(--mv-gray-800);
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
}

.persona-card-desc {
  font-size: 0.8rem;
  color: #6b7280;
}

.result-box {
  background: var(--mv-gray-50);
  border: 1px solid var(--mv-gray-200);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.result-box.success {
  background: #f0fdf4;
  border-color: #86efac;
}

.result-box-title {
  font-weight: 600;
  color: var(--mv-gray-800);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 576px) {
  .persona-selector {
    grid-template-columns: 1fr;
  }
}

.sources-box {
  background: var(--mv-gray-50);
  border: 1px solid var(--mv-gray-200);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.sources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.source-toggle {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  border: 2px solid var(--mv-gray-200);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: white;
}

.source-toggle:hover {
  border-color: #d1d5db;
  background: var(--mv-gray-50);
}

.source-toggle.source-active {
  border-color: var(--mv-primary-dark);
  background: var(--mv-primary-50);
}

.source-toggle.source-active .source-label {
  font-weight: 600;
  color: var(--mv-primary-dark);
}

.source-toggle.source-active .source-icon {
  opacity: 1;
}

.source-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.source-content {
  flex-grow: 1;
}

.source-label {
  font-weight: 500;
  color: var(--mv-gray-800);
  margin-bottom: 0.25rem;
  display: block;
  cursor: pointer;
}

.source-desc {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 0;
}

.progress-bar-wrapper {
  margin-bottom: 1rem;
}

.progress-bar-wrapper .progress {
  height: 12px;
  background: var(--mv-gray-200);
  border-radius: 6px;
}

.progress-bar-wrapper .progress-bar {
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 6px;
  transition: width 0.3s ease;
}

@media (max-width: 768px) {
  .sources-grid {
    grid-template-columns: 1fr;
  }
}

.action-buttons-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.map-section {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--mv-gray-50);
  border: 1px solid var(--mv-gray-200);
  border-radius: 10px;
}

.map-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

#map-container {
  height: 400px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.maplibregl-canvas {
  outline: none;
}

@media (max-width: 576px) {

  .action-buttons-row {
    flex-direction: column;
  }

  .action-buttons-row .btn {
    width: 100%;
  }

  .button-group {
    flex-direction: column;
  }

  .button-group .btn {
    width: 100%;
  }
}

/* ============================================
   FIN WORKFLOW CRÉATION D'ÉTAPE
   ============================================ */


/* ========================================
   ESPACE DE TRAVAIL - SOURCES MOBILISÉES
   ======================================== */

/* Container des sources */
#sources-list .source-item {
  padding: 12px 16px;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
  cursor: pointer;
}

#sources-list .source-item:hover {
  background-color: var(--mv-gray-50);
  border-left-color: #007bff;
}

#sources-list .source-item .flex-grow-1 {
  min-width: 0; /* Pour que truncate fonctionne */
}

#sources-list .source-item h6 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--mv-gray-700);
}

#sources-list .source-item .text-muted {
  font-size: 0.85rem;
}

#sources-list .source-item i.fa {
  font-size: 1.2rem;
}

/* Badge pour le type de source */
#sources-list .badge {
  font-size: 0.75rem;
  padding: 3px 8px;
}

/* Bouton supprimer */
.btn-delete-source {
  opacity: 0;
  transition: opacity 0.2s ease;
  padding: 4px 8px;
}

.source-item:hover .btn-delete-source {
  opacity: 1;
}

.btn-delete-source:hover {
  color: #dc3545 !important;
}

/* Icône "aucune source" */
#sources-list .fa-inbox {
  color: var(--mv-gray-300);
}

/* Badge de numéro de citation */
.badge-citation {
  font-size: 0.85rem;
  padding: 6px 10px;
  border-radius: 50%;
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* Boutons d'action des sources */
.source-actions {
  opacity: 0;
  transition: opacity 0.2s ease;
  gap: 4px;
}

.source-item:hover .source-actions {
  opacity: 1;
}

/* Snippet de contenu de source */
.source-snippet {
  line-height: 1.4;
  max-height: 3.2em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Barre de recherche des sources */
#search-sources {
  border-radius: 4px;
}

#search-sources:focus {
  border-color: var(--mv-primary);
  box-shadow: 0 0 0 0.2rem rgba(0, 85, 255, 0.15);
}

/* Filtres par type */
#source-type-filters .btn {
  font-size: 0.8rem;
  padding: 6px 10px;
}

#source-type-filters .btn.active {
  background-color: var(--mv-primary);
  color: white;
  border-color: var(--mv-primary);
}

#source-type-filters .btn:not(.active):hover {
  background-color: var(--mv-gray-50);
}

/* Message "aucun résultat" */
#no-search-results {
  background-color: var(--mv-gray-50);
  border-radius: 8px;
}

/* Modal d'ajout de source */
#addSourceModal .form-label {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

#addSourceModal .form-control,
#addSourceModal .form-select {
  font-size: 0.9rem;
}

/* ========================================
   TINYMCE - BARRE CONTEXTUELLE HECTOR
   ======================================== */

/* Personnalisation des boutons de la barre contextuelle */
.tox .tox-toolbar__group button[title*="Hector"] {
  border-radius: 4px;
  transition: all 0.2s ease;
}

.tox .tox-toolbar__group button[title*="Reformuler"] {
  background-color: #e3f2fd !important;
}

.tox .tox-toolbar__group button[title*="Rechercher"] {
  background-color: #fff3e0 !important;
}

.tox .tox-toolbar__group button[title*="Approfondir"] {
  background-color: #f3e5f5 !important;
}

.tox .tox-toolbar__group button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Animation de la barre contextuelle */
.tox .tox-pop__dialog {
  animation: fadeInUp 0.2s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   INDICATEUR DE SAUVEGARDE AUTOMATIQUE
   ======================================== */

#save-indicator {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

#save-indicator.saving {
  background-color: #fff3e0;
  color: #f57c00;
}

#save-indicator.saved {
  background-color: #e8f5e9;
  color: #2e7d32;
}

#save-indicator.error {
  background-color: #ffebee;
  color: #c62828;
}

#save-indicator-icon {
  font-size: 1rem;
}

/* ========================================
   RESPONSIVE - ESPACE DE TRAVAIL
   ======================================== */

@media (max-width: 991px) {
  #sources-list .source-item h6 {
    font-size: 0.9rem;
  }

  #sources-list .source-item .text-muted {
    font-size: 0.8rem;
  }
}
<style>
  .accordion-header{font-size:16px;font-weight:600;}
  .accordion-button{padding-top:.4rem;padding-bottom:.4rem;}
  .accordion-body{padding:.5rem 1rem;}
  .drop-highlight{outline:1px dashed blue;}
  [pointer]{cursor:pointer;}

  /* Panel Toggle Styles */
  .panel-column{
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
  }
  .panel-column.collapsed{
    min-width: 50px !important;
    max-width: 50px !important;
    flex: 0 0 50px !important;
  }
  .panel-column.collapsed .panel-content{
    opacity: 0;
    visibility: hidden;
  }
  .panel-toggle-btn{
    position: absolute;
    top: 10px;
    z-index: 1000;
    background: #fff;
    border: 1px solid var(--mv-gray-300);
    border-radius: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
  }
  .panel-toggle-btn:hover{
    background: var(--mv-gray-50);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }
  .panel-toggle-btn svg{
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
  }
  #leftPanel .panel-toggle-btn{
    right: 10px;
  }
  #rightPanel .panel-toggle-btn{
    left: 10px;
  }
  .panel-column.collapsed .panel-toggle-btn{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  #leftPanel.collapsed .panel-toggle-btn svg{
    transform: rotate(180deg);
  }
  #rightPanel.collapsed .panel-toggle-btn svg{
    transform: rotate(180deg);
  }

  /* Breadcrumb Navigation */
  #breadcrumb .breadcrumb-item {
    display: inline-block;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background 0.15s ease;
  }
  #breadcrumb .breadcrumb-item:hover {
    background: var(--mv-gray-300);
  }

  /* Grid button active state */
  #gridBtn.active {
    background-color: var(--mv-primary);
    color: white;
    border-color: var(--mv-primary);
  }

 
/* ========================================
   GPS Zone Editor Styles
   ======================================== */

/* Map container */
#map {
    height: calc(100vh - 250px);
    min-height: 500px;
    border-radius: 0.5rem;
}

/* Sidebar panel */
.sidebar-panel {
    height: calc(100vh - 250px);
    min-height: 500px;
    overflow-y: auto;
    background: var(--mv-gray-50);
    border-radius: 0.5rem;
    padding: 1rem;
}

/* Zone item in sidebar */
.zone-item {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.zone-item:hover {
    border-color: var(--mv-primary);
    box-shadow: 0 2px 8px rgba(0, 85, 255, 0.15);
}

.zone-item.active {
    border-color: var(--mv-primary);
    background: var(--mv-primary-50);
}

/* Etage tabs */
.etage-tab {
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: all 0.2s;
    margin-right: 0.5rem;
    background: white;
    border: 1px solid var(--mv-gray-300);
}

.etage-tab:hover {
    background: var(--mv-gray-50);
}

.etage-tab.active {
    background: var(--mv-primary);
    color: white;
    border-color: var(--mv-primary);
}

/* Draw button on map */
.btn-draw {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Audio selector dropdown */
.audio-selector {
    position: relative;
}

.audio-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--mv-gray-300);
    border-radius: 0.375rem;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: none;
}

.audio-dropdown.show {
    display: block;
}

.audio-item {
    padding: 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--mv-gray-100);
    transition: background 0.2s;
}

.audio-item:hover {
    background: var(--mv-gray-50);
}

.audio-item:last-child {
    border-bottom: none;
}

/* Mode badges */
.mode-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.mode-passive {
    background: #d4edda;
    color: #155724;
}

.mode-actif {
    background: #fff3cd;
    color: #856404;
}

/* Hide MapLibre attribution */
.maplibregl-ctrl-attrib {
    display: none;
}

.settings-editor-shell > .flex-grow-1,
.settings-editor-shell .tab-content,
.settings-editor-shell .tab-pane,
.historiz-ticket-sections,
.historiz-ticket-sections .settings-section {
    min-width: 0;
    max-width: 100%;
}

/* Logos des réseaux sociaux (état vide de la liste des posts) */
.social-network-logos {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.social-network-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    font-size: 1.35rem;
    color: #fff;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}

.social-network-logo.is-instagram { background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7); }
.social-network-logo.is-facebook { background: #1877f2; }
.social-network-logo.is-linkedin { background: #0a66c2; }
.social-network-logo.is-tiktok { background: #010101; }
.social-network-logo.is-x { background: #000; }
.social-network-logo.is-youtube { background: #ff0000; }
.social-network-logo.is-press { background: var(--mv-text-heading); }

#msGenerate.is-busy { pointer-events: none; opacity: 0.7; }

/* =========================================================================
   Studio presse — éditeur « la page est l'éditeur »
   La typographie du communiqué vient de _communique_sheet_css.html (partagée
   avec le PDF) ; ce bloc ne fait que le cadre : écran de départ, barres,
   colonnes, papier, repères de page.
   ========================================================================= */

.pe { --pe-bar-h: 52px; --pe-tool-h: 46px; --pe-border: rgba(15, 23, 42, 0.09); }

/* Zones éditables dans la feuille : discrètes, visibles au survol et au focus. */
.cp-sheet--screen [contenteditable="true"],
.cp-sheet--screen .mce-content-body { outline: none; border-radius: 2px; transition: box-shadow 0.12s ease; }
.cp-sheet--screen [data-cp-field]:hover,
.cp-sheet--screen [data-cp-field]:focus { box-shadow: 0 0 0 4px rgba(0, 85, 255, 0.07); }
.cp-sheet--screen [data-cp-field].is-empty::before { content: attr(data-placeholder); color: #b0b8c4; font-weight: 400; pointer-events: none; }
.cp-sheet--screen .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before { color: #b0b8c4; font-style: normal; }
.cp-sheet--screen [data-open-settings] { cursor: pointer; border-radius: 3px; }
.cp-sheet--screen [data-open-settings]:hover { box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.04); background: rgba(15, 23, 42, 0.015); }

/* Blocs système : rendus depuis les réglages, repérables dans la page. */
.cp-sheet--screen .cp-system { position: relative; border-radius: 3px; }
.cp-sheet--screen .cp-system:hover { box-shadow: 0 0 0 4px rgba(240, 165, 0, 0.12); }
.cp-sheet--screen .cp-system::after {
    content: "Bloc automatique · modifiable dans les réglages";
    position: absolute;
    top: -8px;
    right: 0;
    padding: 0 0.35rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 8.5px;
    color: #8a5a00;
    background: #fff4d9;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.cp-sheet--screen .cp-system:hover::after { opacity: 1; }
.cp-sheet--screen .cp-system--empty {
    display: block;
    padding: 2mm 3mm;
    border: 1px dashed rgba(138, 90, 0, 0.35);
    font-family: 'Open Sans', sans-serif;
    font-size: 8.5pt;
    color: #8a5a00;
}
.cp-sheet--screen .cp-system--empty[data-block="infos"]::before { content: "Informations pratiques — à renseigner dans les réglages (masqué dans le PDF)"; }
.cp-sheet--screen .cp-system--empty[data-block="contact"]::before { content: "Contact presse — à renseigner dans les réglages (masqué dans le PDF)"; }
.cp-sheet--screen .cp-system--empty[data-block="apropos"]::before { content: "À propos — à renseigner dans les réglages (masqué dans le PDF)"; }
.cp-sheet--screen .mce-content-body [data-mce-selected="inline-boundary"] { background: rgba(0, 85, 255, 0.08); }
.cp-sheet--screen figure.image[data-mce-selected],
.cp-sheet--screen .cp-system[data-mce-selected] { outline: 2px solid rgba(0, 85, 255, 0.5); outline-offset: 2px; }
.pe.is-exporting [data-pe-pdf],
.pe.is-exporting [data-pe-export] { opacity: 0.6; pointer-events: none; }

.ui-copy-key-col,
.ui-copy-key-cell {
    width: 220px;
    min-width: 220px;
}

.ui-copy-vars-col,
.ui-copy-vars-cell {
    width: 130px;
    min-width: 130px;
}

#langues-list {
    gap: 0.55rem;
}

#langues-list .list-group-item {
    border: 1px solid var(--mv-gray-200);
    border-radius: 0.7rem;
}

#desktop-content-form {
    border: 1px solid var(--mv-gray-100);
    border-radius: 0.75rem;
    background: var(--mv-gray-50);
}

.background-option-hidden {
    display: none !important;
}

.templates-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.templates-tools {
    width: min(300px, 100%);
}

.templates-meta {
    margin: 0.45rem 0 0.55rem;
}

.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.template-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    border: 1px solid var(--mv-gray-200);
    border-radius: 0.65rem;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
}

.template-card-active {
    border-color: var(--mv-primary);
    box-shadow: 0 6px 14px rgba(0, 85, 255, 0.15);
}

.template-card .card-img-top {
    height: 132px;
    width: 100%;
    object-fit: cover;
}

.template-card .card-body {
    padding: 0.65rem;
}

.template-card .card-title {
    font-size: 0.86rem;
    margin-bottom: 0.35rem;
    line-height: 1.3;
}

.template-card .card-text {
    font-size: 0.72rem;
    line-height: 1.35;
    min-height: 2.95rem;
    margin-bottom: 0.55rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.template-action-btn {
    width: 100%;
}

.template-card-hidden {
    display: none !important;
}

.templates-controls {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    flex-wrap: wrap;
}

.templates-controls .btn-link {
    padding-inline: 0.25rem;
}

@media (max-width: 767.98px) {

    .templates-grid {
        grid-template-columns: 1fr;
    }
}

/* Print Editor Styles */
.accordion-header {
    font-size: 16px;
    font-weight: 600;
}

.accordion-button {
    padding-top: .4rem;
    padding-bottom: .4rem;
}

.accordion-body {
    padding: .5rem 1rem;
}

.drop-highlight {
    outline: 1px dashed blue;
}

[pointer] {
    cursor: pointer;
}

#pagePreview {
    border: none;
    border-radius: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    display: block;
    min-width: 100%;
    min-height: 100%;
}

#pagePreviewWrapper {
    display: inline-block;
    position: relative;
    line-height: 0;
}

#pagePreviewContainer {
    overflow: hidden;
    line-height: normal;
    height: calc(100vh - 350px);
    min-height: 400px;
}

#bgImagePanel img.selected-bg-thumb {
    outline: 3px solid var(--mv-primary);
    border-radius: 4px;
}


/* Print Editor Styles */
.page-preview-container {
  width: 100%;
  height: calc(100vh - 250px);
  background-color: #5e72e40d; /* Light primary background */
  border: 1px solid var(--mv-gray-300);
  border-radius: 0.5rem;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#pagePreviewWrapper {
  box-shadow: 0 0 20px rgba(0,0,0,0.15);
  background-color: white;
  transition: width 0.2s ease, height 0.2s ease;
  flex-shrink: 0; /* Prevent shrinking in flex container */
}

/* ====================================
 * SYSTÈME DE GESTION DES TAGS
 * ==================================== */

.tag-autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1),
              0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
  max-height: 250px;
  overflow-y: auto;
  z-index: 1050;
  margin-top: 0.375rem;
  display: none;
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tag-autocomplete-list::-webkit-scrollbar {
  width: 0.375rem;
}

.tag-autocomplete-list::-webkit-scrollbar-track {
  background: transparent;
}

.tag-autocomplete-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
}

.tag-autocomplete-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

.tag-suggestion-item {
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  font-size: 0.875rem;
  color: var(--bs-body-color);
  position: relative;
  border-left: 3px solid transparent;
}

.tag-suggestion-item:first-child {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.tag-suggestion-item:last-child {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.tag-suggestion-item:hover {
  background-color: var(--mv-gray-50);
  border-left-color: var(--bs-primary);
  padding-left: 1rem;
  color: var(--bs-dark);
}

.tag-suggestion-item:active {
  background-color: var(--mv-gray-200);
  transform: scale(0.98);
}

.tag-suggestion-item:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}


/* Force la hauteur de TinyMCE */
#espace-travail .tox-tinymce {
  min-height: 800px !important;
  height: 800px !important;
}

#description_container .tox-tinymce {
  min-height: 800px !important;
  height: 800px !important;
}

/* Sortable Items - Drag & Drop */
.sortable-item {
  transition: all 0.3s ease;
}
.sortable-ghost {
  opacity: 0.4;
  background: var(--mv-gray-50);
}
.lucide-grip-vertical {
  cursor: grab;
}
.lucide-grip-vertical:active {
  cursor: grabbing;
}

.visite-editor-flow {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.visite-editor-flow > .card,
.visite-editor-flow > .visit-introduction-panel,
.visite-editor-flow > #sortable,
.visite-editor-flow > .d-flex {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

@media (max-width: 575.98px) {

  .titre-item > .d-flex {
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .visite-editor-flow > .card,
  .visite-editor-flow > .visit-introduction-panel,
  .visite-editor-flow > #sortable,
  .visite-editor-flow > .d-flex {
    margin-left: 0;
    margin-right: 0;
  }
}

#my_map .maplibregl-marker {
    padding: 0;
    line-height: 0;
}
/* Correction: Spinner parfaitement rond */
.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-radius: 50% !important;
}

/* ============================================================================
   EXPRESS MODE - Création rapide de visite
   ============================================================================ */

.express-section {
  background: var(--mv-gray-50);
  border-radius: 8px;
  padding: 2rem;
}

.section-title {
  color: var(--mv-text-heading);
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.express-step-card {
  background: white;
  border: 1px solid var(--mv-gray-300);
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.2s;
}

.express-step-card:hover {
  border-color: var(--mv-gray-400);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.express-step-header {
  background: var(--mv-gray-50);
  border-bottom: 1px solid var(--mv-gray-300);
  color: var(--mv-gray-600);
  padding: 0.875rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.express-step-number {
  background: var(--mv-gray-500);
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
}

.express-step-body {
  padding: 1.25rem;
}

.form-label.required::after {
  content: " *";
  color: var(--mv-danger);
}

/* Modal document picker */
.express-section .badge.bg-light {
  border: 1px solid var(--mv-gray-300);
}

.express-section .badge.bg-light .fa-times {
  opacity: 0.6;
  transition: opacity 0.2s;
}

.express-section .badge.bg-light .fa-times:hover {
  opacity: 1;
}

/* Media library cards */
.media-card {
  border: 2px solid var(--mv-gray-300);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s;
  background: white;
}

.media-card:hover {
  border-color: var(--mv-primary);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.media-card-selected {
  border-color: var(--mv-primary);
  box-shadow: 0 4px 12px rgba(0, 85, 255, 0.3);
}

.media-card-image {
  position: relative;
  overflow: hidden;
}

.media-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 85, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.media-card-body {
  padding: 0.75rem;
  background: white;
}

/* Page header responsive */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.page-header-actions .btn {
  white-space: nowrap;
}

@media (max-width: 991px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
  }
  .page-header-actions {
    justify-content: center;
    margin-top: 0.5rem;
  }
  .page-header-actions .btn {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }
  .page-header-actions .btn svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 576px) {
  .page-header-actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 0.35rem;
  }
  .page-header-actions .btn {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    line-height: 1.2;
  }
  .page-header-actions .btn svg {
    width: 12px;
    height: 12px;
    margin-right: 0.2rem !important;
  }
}

/* Pages liste - vue tableau */
.pages-list-table-wrap {
  background-color: #fff;
}

.pages-list-table thead th {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7b809a;
  background-color: var(--mv-gray-50);
  border-bottom: 1px solid var(--mv-gray-100);
}

.pages-list-table tbody td {
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  border-color: var(--mv-gray-100);
}

.pages-list-title {
  color: var(--mv-text-heading);
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}

.pages-list-title:hover {
  color: #1a73e8;
  text-decoration: underline;
}

.pages-list-row.hidden {
  display: none;
}

.pages-list-table .flag-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--mv-gray-200);
  border-radius: 50%;
  background-color: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pages-list-table .flag-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.15);
}

.pages-list-table .flag-link-sm {
  width: 32px;
  height: 32px;
}

@media (max-width: 767.98px) {
  .pages-list-table thead th:nth-child(2),
  .pages-list-table thead th:nth-child(4),
  .pages-list-table tbody td:nth-child(2),
  .pages-list-table tbody td:nth-child(4) {
    display: none;
  }
}

/* ======================================
   Batch Audioguides - État disabled
   ====================================== */

/* Carte disabled : header grisé */
.batch-audioguide-disabled .card-header {
  background-color: var(--mv-gray-50);
}

/* Carte disabled : empêcher l'interaction */
.batch-audioguide-disabled .batch-audioguide-body {
  pointer-events: none;
}

/* Carte avec audioguide existant (non disabled) : bordure verte */
.batch-audioguide-item[data-has-audioguide="true"]:not(.batch-audioguide-disabled) .card-header {
  border-left: 4px solid #28a745;
}

/* Carte sans audioguide : bordure jaune */
.batch-audioguide-item[data-has-audioguide="false"] .card-header {
  border-left: 4px solid #ffc107;
}

/* ======================================
   Vitrine - Cas client & Donnees
   ====================================== */
.section-bg-white {
  background: #ffffff;
}

.donnees-icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(8, 72, 217, 0.12) 0%, rgba(8, 105, 238, 0.08) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.donnees-icon i {
  color: var(--vitrine-primary);
}

.donnees-value {
  color: var(--mv-success);
}

/* ============================================================
   item_editor.html - Modal Hector Helper (#helpPromptModal)
   ============================================================ */
#helpPromptModal .modal-content { border-radius: 18px; overflow: hidden; border: none; box-shadow: 0 8px 40px rgba(0,0,0,0.12); }
#helpPromptModal .help-preset { border: 1.5px solid var(--mv-gray-200); border-radius: 20px; font-size: 0.78rem; padding: 4px 13px; color: #4b5563; background: #fff; transition: all 0.15s ease; line-height: 1.4; }
#helpPromptModal .help-preset:hover { border-color: var(--mv-primary); color: var(--mv-primary); background: var(--mv-primary-50); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0, 85, 255,0.12); }
#helpPromptModal .diff-col { flex: 1; border-radius: 10px; padding: 10px 12px; font-size: 0.83rem; line-height: 1.6; max-height: 190px; overflow-y: auto; }
#helpPromptModal .diff-removed { background: #fde8e8; text-decoration: line-through; color: #b91c1c; border-radius: 3px; padding: 0 2px; }
#helpPromptModal .diff-added { background: #dcfce7; color: #15803d; border-radius: 3px; padding: 0 2px; }
#helpPromptModal .proposal-nav { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: #9ca3af; }
#helpResultArea { animation: hectorFadeIn 0.25s ease; }
@keyframes hectorFadeIn { from{opacity:0;transform:translateY(3px)} to{opacity:1;transform:translateY(0)} }
#helpPromptModal .modal-footer { border-top: 1px solid var(--mv-gray-100); background: var(--mv-gray-50); }

/* ============================================================
   item_editor.html - Modal Reformulation (#reformulateAudioguideModal)
   ============================================================ */
#reformulateAudioguideModal .modal-content { border-radius: 18px; overflow: hidden; border: none; box-shadow: 0 8px 40px rgba(0,0,0,0.12); }
#reformulateAudioguideModal .reformulate-preset { border: 1.5px solid var(--mv-gray-200); border-radius: 20px; font-size: 0.78rem; padding: 4px 13px; color: #4b5563; background: #fff; transition: all 0.15s ease; line-height: 1.4; }
#reformulateAudioguideModal .reformulate-preset:hover { border-color: var(--mv-primary); color: var(--mv-primary); background: var(--mv-primary-50); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0, 85, 255,0.12); }
#reformulateAudioguideModal .reformulate-result { max-height: 260px; overflow-y: auto; background: var(--mv-gray-50); border: 1.5px solid var(--mv-gray-100); border-radius: 12px; padding: 13px 15px; line-height: 1.65; font-size: 0.9rem; color: var(--mv-gray-800); white-space: pre-wrap; }
#reformulateAudioguideModal .diff-col { flex: 1; border-radius: 10px; padding: 10px 12px; font-size: 0.83rem; line-height: 1.6; max-height: 190px; overflow-y: auto; }
#reformulateAudioguideModal .diff-removed { background: #fde8e8; text-decoration: line-through; color: #b91c1c; border-radius: 3px; padding: 0 2px; }
#reformulateAudioguideModal .diff-added { background: #dcfce7; color: #15803d; border-radius: 3px; padding: 0 2px; }
#reformulateResultArea { animation: reformulateFadeIn 0.25s ease; }
@keyframes reformulateFadeIn { from{opacity:0;transform:translateY(3px)} to{opacity:1;transform:translateY(0)} }
#reformulateAudioguideModal .modal-footer { border-top: 1px solid var(--mv-gray-100); background: var(--mv-gray-50); }

/* Bannière résumé de traduction */
.translation-summary-banner { background: linear-gradient(135deg, var(--mv-gray-50) 0%, var(--mv-gray-100) 100%); border: 1.5px solid var(--mv-gray-100); border-radius: 12px; padding: 14px 18px; }
.translation-summary-banner .summary-line { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--mv-gray-700); }
.translation-summary-banner .summary-line + .summary-line { margin-top: 8px; }
.translation-summary-banner .summary-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; flex-shrink: 0; }
.translation-summary-banner .summary-icon.icon-lang { background: var(--mv-primary-100); color: var(--mv-primary); }
.translation-summary-banner .summary-icon.icon-adapt { background: #fef3c7; color: #d97706; }

/* Cartes d'adaptation culturelle */
.adaptation-card { background: var(--mv-gray-50); border: 1.5px solid var(--mv-gray-100); border-radius: 12px; padding: 13px 15px; margin-bottom: 8px; animation: hectorFadeIn 0.25s ease; transition: border-color 0.2s; }
.adaptation-card:hover { border-color: var(--mv-gray-300); }
.adaptation-card .adaptation-field-label { font-size: 0.7rem; color: #9ca3af; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; }
.adaptation-card .adaptation-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.adaptation-card .adaptation-original { color: #9ca3af; text-decoration: line-through; font-size: 0.86rem; }
.adaptation-card .adaptation-arrow { color: var(--mv-primary); font-size: 0.8rem; flex-shrink: 0; }
.adaptation-card .adaptation-adapted { color: #111827; font-weight: 600; font-size: 0.86rem; }
.adaptation-card .adaptation-justification { color: #9ca3af; font-size: 0.78rem; margin-top: 6px; font-style: italic; line-height: 1.4; }

/* === Vitrine Home Refresh === */
.vitrine-home {
  --home-ink: var(--mv-gray-900);
  --home-ink-muted: #4a5a72;
  --home-accent: #ff6b35;
  --home-accent-dark: #e95928;
  --home-teal: #0fa3b1;
  --home-sand: #f9f4ec;
  --home-ice: var(--mv-primary-50);
  --home-card: #ffffff;
  --home-line: rgba(16, 26, 43, 0.12);
  --home-shadow: 0 24px 60px rgba(12, 20, 36, 0.18);
  font-family: "Urbanist", sans-serif;
  color: var(--home-ink);
  background: linear-gradient(180deg, #f9f4ec 0%, #ffffff 35%, var(--mv-primary-50) 100%);
}

.vitrine-home h1,
.vitrine-home h2,
.vitrine-home h3,
.vitrine-home h4 {
  font-family: "Fraunces", "Georgia", serif;
  color: var(--home-ink);
  letter-spacing: -0.02em;
}

.vitrine-home p {
  color: var(--home-ink-muted);
}

.vitrine-home section {
  padding: 4.5rem 0;
}

/* === Vitrine Solutions Tabs Showcase === */
#solutionTabsContent {
  position: relative;
  margin-top: 7rem;
}

#solutionTabsContent::before {
  content: "";
  position: absolute;
  top: 8%;
  right: -6%;
  width: 240px;
  height: 240px;
  background: url("../img/forme.c7ea9d38def9.svg") no-repeat center / contain;
  opacity: 0.035;
  transform: rotate(18deg);
  pointer-events: none;
}

#solutionTabsContent .solution-showcase {
  display: block;
  position: relative;
  z-index: 1;
}

#solutionTabsContent .tab-pane {
  max-height: none;
  overflow: visible;
}

#solutionTabsContent .solution-main-card {
  position: relative;
  border-radius: 2.2rem;
  padding: 0;
  height: 100%;
  color: #1a2f6b;
  background: var(--mv-primary-50);
  border: 1px solid rgba(32, 55, 120, 0.08);
  box-shadow: 0 26px 60px rgba(20, 35, 80, 0.12);
  overflow: hidden;
}

#solutionTabsContent .solution-main-card::after {
  content: none;
}

#solutionTabsContent .solution-main-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  align-items: center;
  position: relative;
  z-index: 1;
  height: 100%;
}

#solutionTabsContent .solution-main-copy {
  padding: 3rem 3.4rem;
  margin-right: 10px;
}

#solutionTabsContent .solution-main-title {
  color: #1c46d5;
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  margin-bottom: 0.95rem;
  line-height: 1.15;
  text-wrap: balance;
}

#solutionTabsContent .solution-main-lead {
  color: #1c46d5;
  font-size: 1.12rem;
  margin-bottom: 1.4rem;
  line-height: 1.5;
  text-wrap: balance;
}

#solutionTabsContent .solution-main-features {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.6rem;
}

#solutionTabsContent .solution-feature {
  padding-top: 0.8rem;
}

#solutionTabsContent .solution-feature:first-child {
  padding-top: 0;
  border-top: none;
}

#solutionTabsContent .solution-feature-title {
  font-size: 1.05rem;
  margin-bottom: 0.45rem;
  color: #1c46d5;
  font-weight: 600;
}

#solutionTabsContent .solution-feature p {
  margin-bottom: 0;
  color: #2a3f6b;
  font-size: 0.96rem;
  line-height: 1.5;
}

#solutionTabsContent .solution-cta {
  border-radius: 999px;
  padding: 0.75rem 1.4rem;
  font-weight: 600;
  box-shadow: 0 12px 28px rgba(28, 70, 213, 0.2);
}

/* === Vitrine: Buttons + Mobile Tabs Fix === */
.vitrine-body .btn,
.vitrine-body .nav-pills .nav-link,
.vitrine-body .solution-cta {
  border-radius: 999px;
}

.vitrine-body .solutions-tabs-nav {
  margin-bottom: 2.75rem;
}

@media (max-width: 768px) {
  .vitrine-body .solutions-tabs-nav .nav-pills {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    gap: 0.6rem;
  }

  .vitrine-body .solutions-tabs-nav .nav-link {
    background: #fff;
    border: 1px solid rgba(8, 72, 217, 0.12);
    box-shadow: 0 6px 18px rgba(15, 30, 80, 0.08);
  }

  .vitrine-body .solutions-tabs-nav .nav-link.active {
    box-shadow: 0 10px 22px rgba(8, 72, 217, 0.25);
  }
}

#solutionTabsContent .solution-main-media {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  height: 60vh;
  padding: 0;
  background: transparent;
}

#solutionTabsContent .solution-media-shell {
  width: 100%;
  max-width: 100%;
  background: transparent;
  border-radius: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  height: 100%;
  display: flex;
}

#solutionTabsContent .solution-media-frame {
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: 70vh;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
}

#solutionTabsContent .solution-media-frame:hover {
  transform: none;
  box-shadow: none;
}

#solutionTabsContent .solution-media-frame img {
  width: auto;
  height: 100%;
  max-height: 70vh;
  max-width: 100%;
  display: block;
  border-radius: 0;
}

@media (max-width: 1199.98px) {
  #solutionTabsContent .solution-main-card {
    padding: 0;
  }

  #solutionTabsContent .solution-main-body {
    grid-template-columns: minmax(0, 1fr);
  }

  #solutionTabsContent .solution-main-copy {
    padding: 2rem 2.2rem;
  }

  #solutionTabsContent .solution-main-media {
    justify-content: flex-start;
  }
}

@media (max-width: 1024px) {
  #solutionTabsContent .solution-main-media {
    display: none;
  }
}

@media (max-width: 991.98px) {
  #solutionTabsContent .solution-main-card {
    padding: 0;
  }

  #solutionTabsContent .solution-main-copy {
    padding: 1.9rem 2rem;
  }

  #solutionTabsContent .solution-main-title {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
  }

  #solutionTabsContent .solution-main-media {
    margin-top: 1rem;
  }
}

@media (max-width: 575.98px) {
  #solutionTabsContent {
    margin-top: 3.25rem;
  }

  #solutionTabsContent::before {
    width: 180px;
    height: 180px;
    top: 2%;
    right: -12%;
  }

  #solutionTabsContent .solution-main-card {
    padding: 0;
    border-radius: 1.5rem;
  }

  #solutionTabsContent .solution-main-copy {
    padding: 1.6rem 1.6rem 1.8rem;
  }

  #solutionTabsContent .solution-cta {
    width: 100%;
    justify-content: center;
  }
}

/* === RESPONSIVE BOUTONS BIBLIOTHÈQUE === */
.bibliotheque-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.bibliotheque-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.bibliotheque-actions .btn {
  white-space: nowrap;
}

/* Tablette */
@media (max-width: 991px) {
  .bibliotheque-header {
    flex-direction: column;
    align-items: stretch;
  }

  .bibliotheque-actions {
    justify-content: center;
    margin-top: 0.5rem;
  }

  .bibliotheque-actions .btn {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }

  .bibliotheque-actions .btn svg {
    width: 18px;
    height: 18px;
  }
}

/* Mobile - btn-xs style */
@media (max-width: 576px) {
  .bibliotheque-actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 0.35rem;
  }

  .bibliotheque-actions .btn {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    line-height: 1.2;
  }

  .bibliotheque-actions .btn svg {
    width: 12px;
    height: 12px;
    margin-right: 0.2rem \!important;
  }
}

/* ===================================================
   MODAL HARMONISATION — Design unifié (ref: helpPromptModal)
   =================================================== */

.modal-content {
  border-radius: 18px !important;
  overflow: hidden;
  border: none !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12) !important;
}

.modal-header {
  background: var(--mv-gray-50);
  border-bottom: 1px solid var(--mv-gray-100) !important;
  padding: 14px 18px 12px;
}

.modal-header.border-0 {
  border-bottom: 0 !important;
}

.modal-header.bg-gradient-primary {
  background: var(--mv-gray-50) !important;
}

.modal-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #111827 !important;
}

.modal .btn-close:not(.btn-close-white) {
  filter: none !important;
  opacity: 0.6 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23111827'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
}

.modal .btn-close:not(.btn-close-white):hover {
  opacity: 1 !important;
}

.modal-footer {
  background: var(--mv-gray-50);
  border-top: 1px solid var(--mv-gray-100) !important;
}

.modal-footer.border-0 {
  border-top: 0 !important;
}

.modal-footer .btn {
  border-radius: 8px;
  font-size: 0.82rem;
}

.modal-footer .btn-xs {
  border-radius: 50rem;
  font-size: 0.82rem;
}

/* ============================================================
   MAIVEN - Force tous les boutons en pills (très arrondis)
   ============================================================ */
.btn,
a.btn,
button.btn,
input[type="button"].btn,
input[type="submit"].btn,
input[type="reset"].btn {
  border-radius: 50rem !important;
}

.btn-group > .btn,
.btn-group-vertical > .btn,
.input-group > .btn,
.input-group-lg > .btn,
.input-group-sm > .btn {
  border-radius: 50rem !important;
}

/* Restaurer la jointure dans les groupes de boutons */
.btn-group > .btn:not(:first-child),
.input-group > .btn:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
/* Si le premier enfant est un <select> masqué, le premier <button> doit garder son arrondi gauche */
.btn-group > .btn:first-of-type,
.input-group > .btn:first-of-type {
  border-top-left-radius: 50rem !important;
  border-bottom-left-radius: 50rem !important;
}
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .btn:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════
   PAGE EDITOR V2  –  layout, canvas, panels, interactions
   ════════════════════════════════════════════════════════════════════ */

/* ── Three-column layout ───────────────────────────────────────────── */
.editor-left-panel,
.editor-right-panel {
  min-width: 0;
  align-self: flex-start;
}

.panel-content {
  position: sticky;
  top: 80px;          /* below fixed navbar */
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
  border: 1px solid var(--mv-gray-200);
  border-radius: .5rem;
  background: #fff;
}

.editor-center-panel {
  min-width: 0;
}

[pe-empty] {
  outline: 1px dashed #9ca3af;
  min-height: 32px;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(156, 163, 175, .1) 4px,
    rgba(156, 163, 175, .1) 8px
  );
}
.flex-1 { flex: 1; }
.flex-0 { flex: 0; }

.class-dropdown {
  position: absolute;
  z-index: 1050;
  width: calc(100% - 24px);
  max-height: 180px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
  border-radius: 6px;
}

/* ── Responsive: stack panels below lg ─────────────────────────────── */
@media (max-width: 991.98px) {
  .panel-content {
    position: static;
    max-height: none;
  }
}

/* ── Scrollbar styling (webkit) ────────────────────────────────────── */
.panel-content::-webkit-scrollbar,
#v2-structureTree::-webkit-scrollbar,
#v2-commandList::-webkit-scrollbar {
  width: 5px;
}

.panel-content::-webkit-scrollbar-track,
#v2-structureTree::-webkit-scrollbar-track,
#v2-commandList::-webkit-scrollbar-track {
  background: transparent;
}

.panel-content::-webkit-scrollbar-thumb,
#v2-structureTree::-webkit-scrollbar-thumb,
#v2-commandList::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════════
   Editor Panels — Unified Design (Maiven / Historiz #0055FF)
   Blocs, Structure, Paramètres — même charte que le panel Style
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens partagés ── */
:root {
  --pe-bg:          var(--mv-gray-100);
  --pe-surface:     #ffffff;
  --pe-surface2:    var(--mv-gray-100);
  --pe-border:      rgba(0,0,0,0.10);
  --pe-text:        #1a1f36;
  --pe-text-muted:  #8a94a8;
  --pe-accent:      var(--mv-primary);
  --pe-accent-dim:  rgba(0,85,255,0.10);
  --pe-r:           6px;
}

/* ── panel-content (conteneur des deux panneaux) ── */
.panel-content {
  background: var(--pe-bg) !important;
  border-color: var(--pe-border) !important;
}

/* ── END PAGE EDITOR V2 ─────────────────────────────────────────────── */

/* Vitrine blog detail markdown */
.vitrine-article-markdown {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--mv-gray-700);
  word-break: break-word;
}

.vitrine-article-markdown > *:last-child {
  margin-bottom: 0;
}

.vitrine-article-markdown h1,
.vitrine-article-markdown h2,
.vitrine-article-markdown h3,
.vitrine-article-markdown h4,
.vitrine-article-markdown h5,
.vitrine-article-markdown h6 {
  margin-top: 2rem;
  margin-bottom: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--mv-gray-900);
}

.vitrine-article-markdown h1 {
  font-size: clamp(1.85rem, 3.2vw, 2.3rem);
}

.vitrine-article-markdown h2 {
  font-size: clamp(1.6rem, 2.5vw, 1.95rem);
}

.vitrine-article-markdown h3 {
  font-size: clamp(1.35rem, 2vw, 1.6rem);
}

.vitrine-article-markdown h4 {
  font-size: 1.2rem;
}

.vitrine-article-markdown h5 {
  font-size: 1.08rem;
}

.vitrine-article-markdown h6 {
  font-size: 1rem;
}

.vitrine-article-markdown p {
  margin: 0 0 1.15rem;
  font-size: 1em;
  line-height: 1.75;
  color: var(--mv-gray-700);
}

.vitrine-article-markdown ul,
.vitrine-article-markdown ol {
  margin: 0 0 1.2rem;
  padding-left: 1.35rem;
}

.vitrine-article-markdown li {
  margin-bottom: 0.45rem;
  font-size: 1em;
  line-height: 1.7;
  color: var(--mv-gray-700);
}

.vitrine-article-markdown li:last-child {
  margin-bottom: 0;
}

.vitrine-article-markdown li > p {
  margin: 0.2rem 0 0.45rem;
}

.vitrine-article-markdown li > p:last-child {
  margin-bottom: 0;
}

.vitrine-article-markdown ul ul,
.vitrine-article-markdown ul ol,
.vitrine-article-markdown ol ul,
.vitrine-article-markdown ol ol {
  margin-top: 0.45rem;
  margin-bottom: 0.7rem;
}

.vitrine-article-markdown a {
  color: #10b981;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

.vitrine-article-markdown a:hover {
  color: #059669;
}

.vitrine-article-markdown blockquote {
  margin: 1.7rem 0;
  padding: 0.35rem 0 0.35rem 1.2rem;
  border-left: 4px solid #10b981;
  font-style: italic;
  color: var(--mv-gray-500);
}

.vitrine-article-markdown code {
  background: var(--mv-gray-100);
  padding: 0.14rem 0.35rem;
  border-radius: 0.25rem;
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.92em;
}

.vitrine-article-markdown pre {
  margin: 1.35rem 0 1.5rem;
  background: var(--mv-gray-800);
  color: var(--mv-gray-100);
  padding: 1rem 1.1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
}

.vitrine-article-markdown pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: inherit;
  font-size: 0.95em;
}

@media (max-width: 767.98px) {
  .vitrine-article-markdown {
    font-size: 1rem;
  }

  .vitrine-article-markdown p,
  .vitrine-article-markdown li {
    line-height: 1.7;
  }
}

/* Hotspot modal refinements */
#hotspotModal .modal-dialog {
  max-width: 1240px;
}

#hotspotModal .hotspot-modal-header {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

#hotspotModal .hotspot-modal-toolbar {
  margin-left: auto;
}

#hotspotModal #hotspotPickImageBtn,
#hotspotModal #hotspotClearImageBtn {
  min-width: 128px;
  white-space: nowrap;
}

#hotspotModal .hotspot-placement-card {
  border: 1px solid var(--mv-gray-200);
  border-radius: 0.75rem;
  background: #ffffff;
  padding: 0.75rem;
}

#hotspotModal .hotspot-placement-canvas {
  border: 1px solid var(--mv-gray-200);
  border-radius: 0.65rem;
  background: var(--mv-gray-50);
  padding: 0.5rem;
  min-height: 220px;
}

#hotspotModal .hotspot-placement-empty {
  min-height: 200px;
  border: 1px dashed #b7c4da;
  border-radius: 0.55rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.86rem;
  padding: 1rem;
  background: linear-gradient(135deg, var(--mv-gray-50) 0%, var(--mv-gray-100) 100%);
}

#hotspotModal .hotspot-placement-stage {
  position: relative;
  border-radius: 0.55rem;
  overflow: hidden;
  cursor: crosshair;
  background: var(--mv-gray-900);
}

#hotspotModal .hotspot-placement-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

#hotspotModal .hotspot-placement-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#hotspotModal .hotspot-placement-spot {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 2px solid #ffffff;
  background: rgba(0, 85, 255, 0.3);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  min-width: 20px;
  min-height: 20px;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.35);
}

#hotspotModal .hotspot-placement-spot.is-active {
  background: rgba(22, 163, 74, 0.34);
  border-color: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.28);
}

#hotspotModal #hotspotZonesContainer {
  max-height: 300px;
}

#focusModal .hotspot-placement-canvas {
  border: 1px solid var(--mv-gray-200);
  border-radius: 0.65rem;
  background: var(--mv-gray-50);
  padding: 0.5rem;
  min-height: 220px;
}

#focusModal .hotspot-placement-empty {
  min-height: 200px;
  border: 1px dashed #b7c4da;
  border-radius: 0.55rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.86rem;
  padding: 1rem;
  background: linear-gradient(135deg, var(--mv-gray-50) 0%, var(--mv-gray-100) 100%);
}

#focusModal .hotspot-placement-stage {
  position: relative;
  border-radius: 0.55rem;
  overflow: hidden;
  cursor: crosshair;
  background: var(--mv-gray-900);
}

#focusModal .hotspot-placement-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

#focusModal .hotspot-placement-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#hotspotModal .hotspot-zone-row {
  transition: box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

#hotspotModal .hotspot-zone-row.is-active {
  border-color: var(--mv-primary-200);
  background: var(--mv-gray-50);
  box-shadow: 0 0 0 1px var(--mv-primary-100) inset;
}

#hotspotModal .hotspot-zone-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(88px, 0.7fr) minmax(88px, 0.7fr) minmax(98px, 0.8fr) auto;
  gap: 0.5rem;
  align-items: end;
}

#hotspotModal .hotspot-zone-field {
  min-width: 0;
}

#hotspotModal .hotspot-zone-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

#hotspotModal .hotspot-zone-actions .btn {
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  #hotspotModal .hotspot-modal-toolbar {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }
}

@media (max-width: 767.98px) {
  #hotspotModal .hotspot-zone-grid {
    grid-template-columns: 1fr 1fr;
  }

  #hotspotModal .hotspot-zone-field--title {
    grid-column: 1 / -1;
  }

  #hotspotModal .hotspot-zone-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* ══════════════════════════════════════════════════════════════
   PRINTS LISTE — Responsive header + Template cards
   ══════════════════════════════════════════════════════════════ */

.prints-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.prints-page-header-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
}
.prints-page-header-actions .btn { white-space: nowrap; }
@media (max-width: 991px) {
  .prints-page-header { flex-direction: column; align-items: stretch; }
  .prints-page-header-actions { justify-content: center; margin-top: 0.5rem; }
  .prints-page-header-actions .btn { font-size: 0.875rem; padding: 0.5rem 0.75rem; }
  .prints-page-header-actions .btn svg { width: 18px; height: 18px; }
  .prints-page-header-actions .form-control,
  .prints-page-header-actions .form-select { font-size: 0.875rem; }
}
@media (max-width: 576px) {
  .prints-page-header-actions { flex-direction: row; flex-wrap: wrap; width: 100%; gap: 0.35rem; }
  .prints-page-header-actions .btn { font-size: 0.7rem; padding: 0.2rem 0.4rem; line-height: 1.2; }
  .prints-page-header-actions .btn svg { width: 12px; height: 12px; margin-right: 0.2rem !important; }
  .prints-page-header-actions .form-control,
  .prints-page-header-actions .form-select { font-size: 0.75rem; padding: 0.25rem 0.5rem; }
}

/* Template card (prints liste) */
.card-template { cursor: default; transition: box-shadow .15s; }
.card-template:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1) !important; }
.prints-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin-bottom: 1rem;
}
.prints-search-input { max-width: 220px; }
.prints-type-filter { max-width: 180px; }
.prints-empty-icon { opacity: 0.5; }
.prints-modal-medium { max-width: 520px; }
.prints-modal-wide { max-width: 860px; }

/* ---- Print create modal — template picker ---- */
.pr-create-dialog { max-width: 700px; }

.pr-tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
  max-height: 256px;
  overflow-y: auto;
  padding: 2px 2px 4px;
}

.pr-tpl-card {
  border: 2px solid var(--mv-gray-200);
  border-radius: 10px;
  padding: 10px 12px 8px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .12s;
  background: #fff;
  position: relative;
  user-select: none;
}
.pr-tpl-card:hover {
  border-color: var(--mv-primary);
  box-shadow: 0 4px 12px rgba(0, 85, 255, 0.13);
  transform: translateY(-1px);
}
.pr-tpl-card.selected {
  border-color: var(--mv-primary);
  background: var(--mv-primary-50);
}
.pr-tpl-icon {
  color: #aab0bb;
  margin-bottom: 6px;
}
.pr-tpl-card.selected .pr-tpl-icon { color: var(--mv-primary); }
.pr-tpl-name {
  font-size: .8rem;
  font-weight: 600;
  color: var(--mv-text-heading);
  margin-bottom: 3px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.35;
}
.pr-tpl-meta {
  font-size: .7rem;
  color: var(--mv-text-muted);
  margin-bottom: 2px;
}
.pr-tpl-col {
  font-size: .67rem;
  color: #bbc0cc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pr-tpl-check {
  display: none;
  position: absolute;
  top: 7px;
  right: 7px;
  width: 17px;
  height: 17px;
  background: var(--mv-primary);
  border-radius: 50%;
  color: #fff;
  align-items: center;
  justify-content: center;
}
.pr-tpl-card.selected .pr-tpl-check { display: flex; }

.pr-tpl-col-select { max-width: 200px; }

/* ── Collection cards ────────────────────────────────────────────────────────── */
.col-card {
  border-radius: 14px !important;
  border: 1.5px solid var(--mv-gray-100) !important;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 10px rgba(0,0,0,.04) !important;
  transition: box-shadow .18s, transform .18s, border-color .18s;
  cursor: pointer;
}
.col-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.1) !important;
  border-color: #e0e0e0 !important;
  transform: translateY(-2px);
}
.col-card-header {
  padding: 16px 16px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.col-pal-0 { background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%); }
.col-pal-1 { background: linear-gradient(135deg, #d1fae5 0%, #6ee7b7 100%); }
.col-pal-2 { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); }
.col-pal-3 { background: linear-gradient(135deg, var(--mv-primary-100) 0%, var(--mv-primary-300) 100%); }
.col-pal-4 { background: linear-gradient(135deg, #fce7f3 0%, #f9a8d4 100%); }
.col-pal-5 { background: linear-gradient(135deg, #f3e8ff 0%, #d8b4fe 100%); }
.col-card-initial {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--mv-gray-700);
  flex-shrink: 0;
}
.col-card-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.col-card-scope {
  font-size: .67rem;
  font-weight: 600;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
  border-radius: 20px;
  padding: 2px 8px;
  color: var(--mv-gray-700);
  white-space: nowrap;
}
.col-card-edit {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255,255,255,.5);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mv-gray-700);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, background .15s;
}
.col-card:hover .col-card-edit { opacity: 1; }
.col-card-edit:hover { background: rgba(255,255,255,.8); }
.col-card-body {
  padding: 12px 16px 14px;
  flex: 1;
}
.col-card-title {
  font-size: .875rem;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.col-card-desc {
  font-size: .75rem;
  color: #6b7280;
  margin-bottom: 8px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}
.col-card-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  color: #9ca3af;
  margin-bottom: 8px;
}
.col-type-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.col-type-pill {
  font-size: .67rem;
  background: var(--mv-gray-100);
  color: #6b7280;
  border-radius: 5px;
  padding: 1px 7px;
  font-weight: 500;
}

/* ── Collection detail modal ──────────────────────────────────────────────────── */
.col-detail-modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--mv-gray-100);
  background: var(--mv-gray-50);
  border-radius: 14px 14px 0 0;
}
.col-detail-modal-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.col-detail-scope-badge {
  font-size: .7rem;
  font-weight: 600;
  background: #ede9fe;
  color: #6d28d9;
  border-radius: 20px;
  padding: 2px 10px;
}
.col-detail-tpl-count {
  font-size: .75rem;
  color: #9ca3af;
}
.col-detail-desc {
  font-size: .8125rem;
  color: #6b7280;
}
@media (max-width: 576px) {
  .prints-search-input,
  .prints-type-filter { max-width: 100%; }
}

@media (min-width: 992px) {
  #print-editor-v2 .editor-center-panel {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 100px);
    max-height: calc(100vh - 100px);
    min-height: calc(100vh - 100px);
  }
}

/* =========================================================
   Pages list - AI generation modal
   ========================================================= */
.pwa-ai-preset-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.75rem;
}

.pwa-ai-preset-card {
  border: 1px solid var(--mv-gray-200);
  background: #ffffff;
  border-radius: 12px;
  text-align: left;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.pwa-ai-preset-card:hover {
  border-color: var(--mv-primary);
  box-shadow: 0 6px 18px rgba(0, 85, 255, 0.14);
  transform: translateY(-1px);
}

.pwa-ai-preset-card.is-active {
  border-color: var(--mv-primary);
  box-shadow: 0 0 0 2px rgba(0, 85, 255, 0.18);
}

.pwa-ai-preset-title {
  font-weight: 600;
  color: #111827;
}

.pwa-ai-preset-desc {
  font-size: 0.82rem;
  color: #6b7280;
  line-height: 1.35;
}

.pwa-ai-feature-check {
  border: 1px solid var(--mv-gray-200);
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  background: #ffffff;
}

.pwa-ai-progress-bar {
  width: 0%;
}

.pwa-ai-result-list {
  margin: 0;
  padding-left: 1.15rem;
}

.pwa-ai-result-list li {
  margin-bottom: 0.35rem;
}

.pages-template-thumb {
    width: 64px;
    max-width: 64px;
    min-width: 64px;
    height: 64px;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--mv-gray-200);
    background: var(--mv-gray-50);
}

.pages-template-card-row {
    gap: 0.75rem;
    flex-wrap: nowrap;
}

.pages-template-main {
    min-width: 0;
    flex: 1 1 auto;
}

.pages-template-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pages-template-actions {
    flex: 0 0 auto;
    width: auto;
    margin-left: 0.25rem;
}

.pages-template-actions .btn {
    min-width: 80px;
}

.pages-template-thumb-image {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.pages-template-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
}

@media (max-width: 575.98px) {
    .pages-template-card-row {
        gap: 0.5rem;
    }
}

#page-editor-v2 .editor-left-panel,
#page-editor-v2 .editor-right-panel {
  align-self: stretch;
}

#page-editor-v2 .panel-content {
  position: relative;
  top: 0;
  max-height: none;
  height: 100%;
  overflow-y: auto;
}

/* ==========================================================================
   visite_editor - Preset audiodescription
   ========================================================================== */

.preset-card {
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.preset-card:hover {
  border-color: var(--mv-primary) !important;
  background: var(--mv-gray-50);
}

.preset-card-icon {
  line-height: 1;
}

.preset-card-badge {
  font-size: 0.7em;
}

/* Reste ici (pas dans modules/editeurs-v2.css) : doit preceder .block-card, de meme specificite, qui l'emporte sur les cartes de la palette de blocs. */
.pe2-plan-create-trigger {
  cursor: pointer;
  border-color: var(--mv-primary-200);
  background: linear-gradient(180deg, #ffffff 0%, var(--mv-primary-50) 100%);
}
.pe2-plan-create-trigger:hover {
  border-color: #60a5fa;
  box-shadow: 0 3px 10px rgba(0, 85, 255, 0.22);
}

.panel-column  { display: flex; flex-direction: column; }
.panel-content { flex: 1; overflow-y: auto; }
.editor-right-panel .panel-content { padding-bottom: 100px; }

/* Tabs de navigation des panneaux : restent visibles en haut pendant le scroll */
@media (min-width: 992px) {
  #print-editor-v2 {
    --pe2-panel-max-height: calc(100vh - 150px);
  }
  #page-editor-v2 {
    --pe2-panel-max-height: calc(100vh - 220px);
  }

  #print-editor-v2 .editor-left-panel,
  #print-editor-v2 .editor-right-panel,
  #page-editor-v2 .editor-left-panel,
  #page-editor-v2 .editor-right-panel {
    align-self: stretch !important;
  }
}
/* Both toggles live on the center panel edges, always visible */
.editor-center-panel { position: relative; }

.block-card {
  padding: 6px 4px;
  text-align: center;
  border: 1px solid var(--mv-gray-200);
  border-radius: 6px;
  cursor: grab;
  font-size: 10px;
  background: #fff;
  transition: box-shadow .15s, border-color .15s;
  min-width: 48px;
  max-width: 68px;
}
.block-card:hover  { box-shadow: 0 2px 8px rgba(0,0,0,.12); border-color: #9ca3af; }
.block-card:active { cursor: grabbing; opacity: .7; }

[data-inject-zone] {
  position: relative;
}
[data-inject-zone]::before {
  content: attr(data-inject-zone);
  position: absolute;
  top: 2px; left: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .6;
  pointer-events: none;
}

.class-dropdown {
  position: absolute;
  z-index: 1050;
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
}
.audio-source-modal {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 20px 45px rgba(17, 24, 39, 0.12);
}

.audio-source-selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.audio-source-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.audio-source-option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #dbe2f4;
  border-radius: 12px;
  background: var(--mv-gray-50);
  cursor: pointer;
  transition: all 0.2s ease;
}

.audio-source-option-title {
  color: #25335c;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
}

.audio-source-option-desc {
  color: #6b7280;
  font-size: 0.75rem;
  line-height: 1.3;
}

.audio-source-radio:checked + .audio-source-option {
  border-color: var(--mv-primary);
  background: var(--mv-primary-50);
  box-shadow: 0 0 0 2px rgba(0, 85, 255, 0.18);
}

.audio-source-panel {
  border: 1px solid var(--mv-gray-200);
  border-radius: 12px;
  padding: 12px;
  background: #ffffff;
}

.audio-source-panel-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 180px);
  column-gap: 12px;
  row-gap: 6px;
  align-items: end;
}

.audio-source-panel-inline label:nth-of-type(1) {
  grid-column: 1;
  grid-row: 1;
}

.audio-source-panel-inline select {
  grid-column: 1;
  grid-row: 2;
}

.audio-source-panel-inline label:nth-of-type(2) {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0 !important;
}

.audio-source-panel-inline .input-group {
  grid-column: 2;
  grid-row: 2;
}

.audio-record-panel .audio-record-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.audio-record-source {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52%;
}

.audio-reference-text {
  line-height: 1.35;
  max-height: 64px;
  overflow-y: auto;
  margin-bottom: 8px;
}

.audio-record-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.audio-record-actions {
  display: inline-flex;
  gap: 8px;
}

#sourceRecordSection .audio-visualizer {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  min-height: 64px;
  max-height: 64px;
  margin: 6px 0 8px;
  padding: 7px 9px;
  border-radius: 10px;
  background: var(--mv-primary-50);
  border: 1px solid #d8deef;
  overflow: hidden;
}

#sourceRecordSection .audio-bar {
  flex: 1 1 0;
  min-width: 2px;
  max-width: 5px;
  height: 8px;
  background: linear-gradient(180deg, var(--mv-primary) 0%, var(--mv-info) 100%);
  border-radius: 10px;
  transition: height 0.08s linear;
}

#sourceRecordSection .recording-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #dde2f2;
  background: var(--mv-gray-50);
  margin-bottom: 8px;
}

#sourceRecordSection .recording-status p {
  margin: 0;
  font-weight: 600;
  min-width: 44px;
}

#sourceRecordSection .recording-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mv-gray-400);
}

#sourceRecordSection .recording-status.is-recording .recording-dot {
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  animation: recording-pulse 1.2s infinite;
}

@keyframes recording-pulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.audio-trim-panel .trim-waveform-shell {
  position: relative;
  border: 1px solid #d8deef;
  border-radius: 10px;
  background: var(--mv-primary-50);
  padding: 4px;
}

.audio-trim-panel .trim-waveform-canvas {
  width: 100%;
  height: 86px;
  display: block;
  cursor: ew-resize;
  touch-action: none;
  border-radius: 8px;
}

.audio-trim-panel .trim-waveform-canvas.is-dragging {
  cursor: grabbing;
}

#sourceTrimSection .form-range {
  accent-color: var(--mv-primary);
}

@media (max-width: 768px) {
  .audio-source-selector {
    grid-template-columns: 1fr;
  }

  .audio-source-panel-inline {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }

  .audio-source-panel-inline label:nth-of-type(1),
  .audio-source-panel-inline select,
  .audio-source-panel-inline label:nth-of-type(2),
  .audio-source-panel-inline .input-group {
    grid-column: 1;
    grid-row: auto;
  }

  .audio-source-panel-inline label:nth-of-type(2) {
    margin-bottom: 0.5rem !important;
  }

  .audio-record-toolbar {
    grid-template-columns: 1fr;
  }

  .audio-record-actions {
    width: 100%;
  }

  .audio-record-actions .btn {
    flex: 1 1 auto;
  }

  .audio-record-source {
    max-width: 100%;
  }
}

#my_map {
    border-radius: 20px;
    position: relative;
    min-height: 420px;
    height: 70vh;
}

@media (min-width: 992px) {
    #my_map {
        height: calc(100vh - 2rem);
    }
}

/* Styles pour l'éditeur d'itinéraire */
#itineraire-editor {
    --route-editor-border: var(--mv-gray-200);
    --route-editor-muted: #7b8498;
    --route-editor-title: var(--mv-text-heading);
    --route-editor-surface: var(--mv-gray-50);
}

#itineraire-editor .form-label {
    margin-bottom: 0.3rem;
    color: var(--route-editor-title);
    font-size: 0.76rem;
    font-weight: 600;
}

#itineraire-editor .form-control,
#itineraire-editor .form-select {
    min-height: 40px;
    padding: 0.48rem 0.7rem;
    color: #4a5261;
    font-size: 0.86rem;
    border-color: #d7dde7;
    border-radius: 8px;
    box-shadow: none;
}

#itineraire-editor textarea.form-control {
    min-height: 72px;
    line-height: 1.45;
    resize: vertical;
}

#itineraire-editor .form-control:focus,
#itineraire-editor .form-select:focus {
    border-color: #8798ed;
    box-shadow: 0 0 0 3px rgba(0, 85, 255, 0.12);
}

#itineraire-editor .form-text {
    margin-top: 0.3rem;
    color: var(--route-editor-muted);
    font-size: 0.69rem;
    line-height: 1.35;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.btn-edit-marker:hover {
    transform: scale(1.1);
    transition: transform 0.2s;
}

#positioner-controls {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

/* Styles pour la barre de recherche d'adresses */
#search-results-dropdown .search-result-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--mv-gray-100);
    transition: background-color 0.15s;
}

#search-results-dropdown .search-result-item:hover,
#search-results-dropdown .search-result-item.active {
    background-color: var(--mv-gray-50);
}

#search-results-dropdown .search-result-item:last-child {
    border-bottom: none;
}

#search-results-dropdown .search-result-name {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--mv-gray-900);
}

#search-results-dropdown .search-result-address {
    font-size: 0.8rem;
    color: var(--mv-gray-500);
    margin-top: 2px;
}

#search-results-dropdown .search-result-type {
    font-size: 0.7rem;
    color: var(--mv-gray-400);
    text-transform: uppercase;
}

#search-results-dropdown .search-no-results,
#search-results-dropdown .search-error {
    padding: 15px;
    text-align: center;
    color: var(--mv-gray-500);
    font-size: 0.85rem;
}

#search-results-dropdown .search-error {
    color: #dc3545;
}

#search-results-dropdown.show {
    display: block !important;
    animation: searchSlideDown 0.2s ease-out;
}

@keyframes searchSlideDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-marker {
    cursor: pointer;
}

.search-marker svg {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* ===== Plan Image Modal Refactor ===== */
#planImageModal .modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

/* Image preview container */
#planImageModal .bg-light.rounded-2 {
    background-color: var(--mv-gray-50) !important;
    border: 1px solid var(--mv-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style collapse button */
#planImageModal [data-bs-toggle="collapse"] {
    color: var(--mv-text-heading);
    transition: all 0.2s ease;
}

#planImageModal [data-bs-toggle="collapse"]:hover {
    color: #0055b3;
}

#planImageModal [data-bs-toggle="collapse"][aria-expanded="true"] {
    color: #0055b3;
}

#planImageModal [data-bs-toggle="collapse"][aria-expanded="true"] svg {
    opacity: 0.8;
}

/* Section titles */
#planImageModal label[style*="color"] {
    color: #52576f;
    font-size: 0.875rem;
}

/* Compact form controls */
#planImageModal .form-control-sm,
#planImageModal .btn-sm {
    border-radius: 6px;
}

#planImageModal .form-check {
    padding-left: 1.25rem;
}

#planImageModal .form-check-input {
    border-radius: 4px;
    border-color: var(--mv-gray-300);
}

#planImageModal .form-check-input:checked {
    background-color: #0055b3;
    border-color: #0055b3;
}
/* Textarea */
#planImageModal textarea {
    resize: vertical;
    border-radius: 6px;
    border-color: var(--mv-gray-300);
}

/* Badge counter */
#planImageModal .badge {
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
}

/* Responsive adjustments */
@media (max-width: 575px) {
    #planImageModal .modal-body {
        padding: 1rem !important;
    }

    #planImageModal .row > [class*="col-"] {
        /* Stack on mobile */
    }

    #planImageModal .btn-group {
        flex-direction: column;
    }

    #planImageModal .btn-group .btn-check + .btn {
        text-align: left;
    }
}

/* ── Plan image live preview map ── */
#planImageLiveMap { overflow: hidden; }
#planImageLiveMap .maplibregl-canvas { border-radius: 0.5rem; }
#planImageLiveMap .maplibregl-ctrl-bottom-left,
#planImageLiveMap .maplibregl-ctrl-bottom-right { display: none; }

/* Rich text modal toolbar (shared V2) */
.rte-sep {
    width: 1px;
    height: 18px;
    background: var(--mv-gray-200);
    margin: 0 4px;
    flex-shrink: 0;
}
.rte-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    border-radius: 6px;
    padding: 0 6px;
    line-height: 1;
}
.rte-btn:hover {
    border-color: var(--mv-gray-300);
    background: var(--mv-gray-50);
}
.rte-btn.rte-active,
.rte-btn.active {
    border-color: #818cf8;
    background: #ede9fe;
    color: #4338ca;
}
#imageLibraryTinymceOptions .btn,
#imageLibraryModal .modal-footer .btn,
.tinymce-image-settings-modal .btn {
    margin-bottom: 0 !important;
}

/* Galerie de formes cliquables (5 vignettes) */
.shape-gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}
.shape-gallery__item {
    border: 1px solid var(--mv-gray-200);
    border-radius: 8px;
    padding: 0.5rem;
    background: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.shape-gallery__item:hover { border-color: #c8d0e3; }
.shape-gallery__item.is-active {
    border-color: #007aff;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.15);
}
.shape-gallery__label {
    font-size: 0.65rem;
    color: #6b7280;
    text-align: center;
}

/* Onglets segmentés "Forme / Photo / SVG" */
.style-type-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-bottom: 1rem;
}
.style-type-tabs .btn-check + label {
    border-radius: 0;
    margin-bottom: 0;
}
.style-type-tabs .btn-check + label:first-of-type { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.style-type-tabs .btn-check + label:last-of-type  { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }

.stripe-payments-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, max-content);
    align-items: start;
    gap: 1rem 1.5rem;
}

.stripe-payments-heading {
    display: grid;
    gap: 0.8rem;
    min-width: 0;
}

.stripe-payments-heading .card-text {
    margin-bottom: 0 !important;
}

.stripe-account-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    width: 100%;
}

.stripe-account-copy {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    min-width: 0;
    color: var(--mv-text);
    font-size: 0.875rem;
}

.stripe-account-copy strong {
    color: #525f7f;
    font-weight: 600;
}

.stripe-account-copy code {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--mv-gray-200);
    border-radius: 999px;
    background: var(--mv-gray-50);
    color: var(--mv-text);
    font-family: inherit;
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.stripe-account-copy code:empty {
    display: none;
}

.stripe-requirements {
    display: flex;
    width: 100%;
    max-width: none;
    padding: 0.65rem 0.8rem;
    border: 1px solid #ffd79a;
    border-radius: 8px;
    background: #fff8ea;
    color: #9a5b0a;
    font-size: 0.84rem;
    line-height: 1.35;
}

.stripe-payment-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.6rem;
    width: 100%;
}

.stripe-payment-actions .btn {
    min-width: 9.5rem;
    white-space: nowrap;
}

[data-ticket-profile-form][hidden] {
    display: none !important;
}

[data-ticket-profile-form] .invalid-feedback:empty {
    display: none;
}

@media (max-width: 767.98px) {

    .historiz-ticket-billing-state .btn,
    [data-ticket-profile-toggle] {
        width: 100%;
    }
}

.stripe-feedback:empty {
    display: none;
}

@media (max-width: 768px) {
    .stripe-payments-header {
        grid-template-columns: 1fr;
    }

    .stripe-payment-actions {
        justify-content: flex-start;
        max-width: none;
    }

    .stripe-payment-actions .btn {
        min-width: 0;
        flex: 1 1 10rem;
    }

}

/* Panneau Voix de sortie en mode "stacked" (galerie au-dessus, volume au-dessous) */
.audio-source-panel-stacked {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.audio-source-panel-stacked > label {
    margin: 0;
}
/* Formulaires PWA */
.formulaire-card-icon {
  align-items: center;
  background: linear-gradient(135deg, var(--mv-primary), #089bff);
  border-radius: 0.5rem;
  color: #fff;
  display: flex;
  flex: 0 0 50px;
  font-size: 1.25rem;
  height: 50px;
  justify-content: center;
  width: 50px;
}

.formulaire-empty-icon {
  color: var(--mv-text-muted);
  display: block;
  font-size: 4rem;
  opacity: 0.55;
}

.formulaire-panel,
.form-builder-step,
.form-builder-field,
.formulaire-kpi {
  background: #fff;
  border: 1px solid var(--mv-gray-200);
  border-radius: 0.5rem;
  padding: 1rem;
}

.form-builder-step + .form-builder-step,
.form-builder-field + .form-builder-field {
  margin-top: 1rem;
}

.form-builder-step-header,
.form-builder-field-head {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.form-builder-condition summary {
  color: var(--mv-text-heading);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
}

.formulaire-html-preview {
  font-family: monospace;
  min-height: 220px;
}

.formulaire-kpi span {
  color: var(--mv-text-muted);
  display: block;
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.formulaire-kpi strong {
  color: var(--mv-text-heading);
  display: block;
  font-size: 1.5rem;
}

.formulaire-chart-container {
  height: 260px;
  min-height: 260px;
  position: relative;
  width: 100%;
}

.formulaire-chart,
.formulaire-distribution-chart {
  display: block;
  height: 100% !important;
  min-height: 0;
  width: 100% !important;
}

.formulaire-period-select {
  max-width: 140px;
}

.formulaire-stat-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.formulaire-stat-grid span {
  background: var(--mv-gray-50);
  border-radius: 0.5rem;
  color: var(--mv-text-muted);
  padding: 0.75rem;
}

.formulaire-stat-grid strong {
  color: var(--mv-text-heading);
  display: block;
  font-size: 1.1rem;
}

.tox .tox-toolbar__group .tox-tbtn.tox-tbtn--labeled {
  align-items: center;
  border-radius: 0.35rem;
  gap: 0.3rem;
  height: 34px;
  margin: 3px 2px 2px;
  padding: 0 0.45rem;
}

.tox .tox-toolbar__group .tox-tbtn.tox-tbtn--labeled .tox-icon {
  align-items: center;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  margin: 0;
  width: 24px;
}

.tox .tox-toolbar__group .tox-tbtn.tox-tbtn--labeled .tox-icon svg {
  display: block;
  height: 24px;
  width: 24px;
}

.tox .tox-toolbar__group .tox-tbtn.tox-tbtn--labeled .tox-tbtn__select-label {
  line-height: 1;
  margin: 0;
}

.tox .tox-toolbar__group .tox-tbtn.tox-tbtn--labeled .tox-tbtn__select-chevron {
  margin-left: 0.15rem;
}

.form-typeform-editor {
  display: grid;
  gap: 1rem;
  grid-template-columns: 285px minmax(0, 1fr) 360px;
  min-height: 680px;
}

.form-typeform-sidebar,
.form-typeform-preview,
.form-typeform-inspector {
  background: var(--mv-gray-50);
  border: 1px solid var(--mv-gray-200);
  border-radius: 0.5rem;
}

.form-typeform-sidebar,
.form-typeform-inspector {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 78vh;
  overflow: auto;
  padding: 1rem;
}

.form-typeform-sidebar-section {
  flex: 0 0 auto;
}

.form-typeform-sidebar-section-fill {
  min-height: 0;
}

.form-typeform-question-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.form-typeform-step {
  background: #fff;
  border: 1px solid var(--mv-gray-200);
  border-radius: 0.5rem;
  padding: 0.75rem;
}

.form-typeform-step-head {
  align-items: center;
  color: var(--mv-gray-500);
  display: flex;
  font-size: 0.75rem;
  font-weight: 700;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.form-typeform-question-btn {
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--mv-gray-200);
  border-radius: 0.5rem;
  color: var(--mv-text-heading);
  display: flex;
  gap: 0.6rem;
  margin: 0.35rem 0 0;
  padding: 0.7rem;
  text-align: left;
  width: 100%;
}

.form-typeform-question-btn span {
  color: var(--mv-text-muted);
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
}

.form-typeform-question-btn strong {
  display: block;
  font-size: 0.88rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.form-typeform-question-btn.active {
  border-color: var(--mv-primary);
  box-shadow: 0 0 0 3px rgba(0, 85, 255, 0.12);
}

.form-typeform-preview {
  align-items: stretch;
  display: flex;
  min-width: 0;
  overflow: hidden;
}

.form-typeform-preview > div {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

/* L'apercu est rendu dans une iframe isolee (Tailwind charge en local) afin
   de ne pas entrer en collision avec Bootstrap/argon sur la page admin. */
.form-typeform-preview-frame {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 600px;
  display: block;
  border: 0;
  background: transparent;
}

.form-typeform-tabs {
  background: #fff;
  border: 1px solid var(--mv-gray-200);
  border-radius: 0.5rem;
  padding: 0.25rem;
}

.form-typeform-tabs .nav-link {
  border-radius: 0.4rem;
  font-size: 0.85rem;
  padding: 0.45rem 0.75rem;
}

.form-typeform-inspector-pane {
  background: #fff;
  border: 1px solid var(--mv-gray-200);
  border-radius: 0.5rem;
  padding: 1rem;
}

.form-typeform-style-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-typeform-style-grid label {
  align-items: center;
  background: var(--mv-gray-50);
  border: 1px solid var(--mv-gray-200);
  border-radius: 0.5rem;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0.55rem;
}

.form-typeform-style-grid span {
  color: var(--mv-gray-600);
  font-size: 0.78rem;
  font-weight: 700;
}

@media (max-width: 1400px) {
  .form-typeform-editor {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .form-typeform-inspector {
    grid-column: 1 / -1;
    max-height: none;
  }
}

@media (max-width: 992px) {
  .form-typeform-editor {
    grid-template-columns: 1fr;
  }

  .form-typeform-sidebar,
  .form-typeform-inspector {
    max-height: none;
  }
}

/* === Editeur de formulaire : workflow (drag&drop, actions, etat) === */

.form-typeform-dirty-badge {
  align-self: center;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 999px;
  color: #92400e;
  font-size: 0.7rem;
  font-weight: 700;
  margin-right: 0.25rem;
  padding: 0.25rem 0.6rem;
  white-space: nowrap;
}

[data-save-btn].is-dirty {
  box-shadow: 0 0 0 3px rgba(0, 85, 255, 0.25);
}

.form-typeform-save-status {
  align-self: center;
  font-size: 0.72rem;
  font-weight: 600;
  margin-right: 0.25rem;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.form-typeform-save-status[data-state="saving"] {
  color: var(--mv-gray-500);
}

.form-typeform-save-status[data-state="saved"] {
  color: #047857;
}

.form-typeform-save-status[data-state="error"] {
  color: #b91c1c;
}

.form-typeform-hint {
  color: var(--mv-gray-400);
  cursor: help;
  font-size: 0.85em;
  margin-left: 0.2rem;
  vertical-align: baseline;
}

.form-typeform-hint:hover,
.form-typeform-hint:focus {
  color: var(--mv-primary);
  outline: none;
}

.form-typeform-step-head {
  gap: 0.4rem;
}

.form-typeform-step-title {
  flex: 1 1 auto;
}

.form-typeform-step-actions {
  display: inline-flex;
  gap: 0.15rem;
}

.form-typeform-drag-handle {
  align-items: center;
  color: var(--mv-gray-400);
  cursor: grab;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.95rem;
  padding: 0 0.15rem;
}

.form-typeform-drag-handle:active {
  cursor: grabbing;
}

.form-typeform-step-fields {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 0.5rem;
}

.form-typeform-icon-btn {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 0.35rem;
  color: var(--mv-gray-500);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.78rem;
  height: 1.6rem;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s;
  width: 1.6rem;
}

.form-typeform-icon-btn:hover:not(:disabled) {
  background: var(--mv-primary-50);
  color: var(--mv-primary);
}

.form-typeform-icon-btn.text-danger:hover:not(:disabled) {
  background: #fee2e2;
  color: #dc2626;
}

.form-typeform-icon-btn:disabled {
  cursor: default;
  opacity: 0.35;
}

/* La ligne devient la carte cliquable ; le bouton interne est transparent. */
.form-typeform-question-row {
  align-items: center;
  background: #fff;
  border: 1px solid var(--mv-gray-200);
  border-radius: 0.5rem;
  display: flex;
  gap: 0.25rem;
  padding: 0.35rem 0.45rem;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-typeform-question-row.active {
  border-color: var(--mv-primary);
  box-shadow: 0 0 0 3px rgba(0, 85, 255, 0.12);
}

.form-typeform-question-row.dragging {
  opacity: 0.45;
}

.form-typeform-question-row.drag-over-top {
  box-shadow: inset 0 3px 0 0 var(--mv-primary);
}

.form-typeform-question-row.drag-over-bottom {
  box-shadow: inset 0 -3px 0 0 var(--mv-primary);
}

.form-typeform-question-btn {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0.4rem;
  color: var(--mv-text-heading);
  cursor: pointer;
  display: flex;
  flex: 1 1 auto;
  gap: 0.5rem;
  margin: 0;
  min-width: 0;
  padding: 0.35rem 0.4rem;
  text-align: left;
}

.form-typeform-question-type {
  color: var(--mv-gray-400);
  flex: 0 0 auto;
  font-size: 0.9rem;
}

.form-typeform-question-pos {
  color: var(--mv-text-muted);
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
}

.form-typeform-question-btn strong {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Les actions sont superposees a droite (overlay) pour ne pas reserver
   d'espace tant qu'elles sont masquees : le libelle dispose ainsi de toute
   la largeur de la ligne au repos. */
.form-typeform-question-actions {
  background: #fff;
  border-radius: 0.4rem;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.1rem;
  opacity: 0;
  padding-left: 0.35rem;
  pointer-events: none;
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.15s;
}

.form-typeform-question-row:hover .form-typeform-question-actions,
.form-typeform-question-row.active .form-typeform-question-actions {
  opacity: 1;
  pointer-events: auto;
}

.form-typeform-question-row.active .form-typeform-question-actions {
  background: var(--mv-primary-50);
}

.form-typeform-step.dragging {
  opacity: 0.5;
}

.form-typeform-step.drag-over-top {
  box-shadow: inset 0 4px 0 0 var(--mv-primary);
}

.form-typeform-step.drag-over-bottom {
  box-shadow: inset 0 -4px 0 0 var(--mv-primary);
}

.form-typeform-step-fields.drag-over-zone {
  background: rgba(0, 85, 255, 0.06);
  border-radius: 0.4rem;
  outline: 2px dashed rgba(0, 85, 255, 0.35);
}

.form-typeform-empty {
  color: var(--mv-gray-400);
  font-size: 0.78rem;
  margin: 0.25rem 0;
  text-align: center;
}

.form-typeform-add {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.6rem;
  position: relative;
}

.form-typeform-add-caret {
  flex: 0 0 auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.form-typeform-add-menu {
  background: #fff;
  border: 1px solid var(--mv-gray-200);
  border-radius: 0.5rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
  display: none;
  left: 0;
  padding: 0.35rem;
  position: absolute;
  right: 0;
  top: calc(100% + 0.3rem);
  z-index: 20;
}

.form-typeform-add-menu.open {
  display: grid;
  gap: 0.1rem;
}

.form-typeform-add-menu button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0.4rem;
  color: var(--mv-text-heading);
  cursor: pointer;
  display: flex;
  font-size: 0.82rem;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  text-align: left;
  width: 100%;
}

.form-typeform-add-menu button:hover {
  background: var(--mv-primary-50);
  color: var(--mv-primary);
}

.form-typeform-add-menu button i {
  color: var(--mv-gray-400);
  width: 1rem;
}

.form-typeform-validation {
  color: #dc2626;
  font-size: 0.72rem;
  margin-top: 0.25rem;
}

.form-typeform-inspector-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.form-typeform-fatal {
  align-items: center;
  color: var(--mv-gray-500);
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
}

.form-typeform-fatal i {
  color: #f59e0b;
  font-size: 2.5rem;
}

#tinyMCEEmailSelectedImage {
  height: 48px;
  object-fit: cover;
  width: 48px;
}

.pwa-email-subscriptions-page .page-header {
  overflow: visible;
}

.pwa-email-copy-buffer {
  left: -9999px;
  opacity: 0;
  position: fixed;
  top: 0;
}

.pwa-email-filter-grid {
  align-items: end;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(140px, 1fr) minmax(135px, 1fr) minmax(145px, 1fr) minmax(150px, 1fr) minmax(145px, 1fr) minmax(135px, 1fr) minmax(120px, .9fr);
}

.pwa-email-filter-field,
.pwa-email-filter-actions {
  min-width: 0;
}

.pwa-email-filter-actions .btn {
  min-height: 42px;
  white-space: nowrap;
}

@media (max-width: 1199.98px) {
  .pwa-email-filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .pwa-email-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .pwa-email-filter-grid {
    grid-template-columns: 1fr;
  }
}

/* Compteurs de duree : temps de lecture (compte ecrit) + duree theorique audioguide */
.content-duration-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  color: #6b7280;
  background: var(--mv-gray-100);
  border-radius: 999px;
  padding: .15rem .6rem;
  line-height: 1.4;
  white-space: nowrap;
}
.content-duration-badge svg {
  width: 13px;
  height: 13px;
  opacity: .8;
}
/* Variant audioguide : meme gabarit que les .btn.btn-xs voisins de la toolbar */
.content-duration-badge--audio {
  gap: .375rem;
  font-size: .65rem;
  line-height: 1.5;
  padding: .275rem .675rem;
  border: 1px solid transparent;
}
.content-duration-badge--audio svg {
  width: 15px;
  height: 15px;
}

@keyframes historizCatalogViewInRight {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes historizCatalogViewInLeft {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes historizSuggestionCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes historizSkeletonShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

#helpPromptModal .modal-content {
  overflow: visible;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(15, 23, 42, 0.18);
}

#helpPromptModal .help-preset {
  flex: 1 1 0;
  min-width: 0;
  padding: 5px 6px;
  border: 1.5px solid var(--mv-gray-200);
  border-radius: 10px;
  color: #4b5563;
  background: #fff;
  font-size: 0.73rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.15s ease;
}

#helpPromptModal .help-preset:hover {
  border-color: var(--mv-primary);
  color: var(--mv-primary);
  background: var(--mv-primary-50);
}

#helpPromptModal #helpSourceSummary {
  color: var(--mv-gray-500);
  font-size: 0.72rem;
  font-weight: 500;
}

#helpPromptModal .hector-result-label,
#helpPromptModal .diff-heading {
  color: #9ca3af;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#helpPromptModal .proposal-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #9ca3af;
  font-size: 0.78rem;
}

#helpPromptModal .proposal-nav .btn {
  color: #9ca3af;
  line-height: 1;
}

#helpPromptModal #helpToggleDiff {
  color: #9ca3af;
  font-size: 0.75rem;
  text-decoration: none;
}

#helpPromptModal .diff-col {
  flex: 1;
  max-height: 190px;
  overflow-y: auto;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.83rem;
  line-height: 1.6;
}

#helpPromptModal .diff-col-original {
  border: 1.5px solid #fecaca;
  background: #fff5f5;
}

#helpPromptModal .diff-col-proposed {
  border: 1.5px solid #bbf7d0;
  background: #f0fdf4;
}

#helpPromptModal .diff-col-original .diff-heading {
  margin-bottom: 6px;
  color: #b91c1c;
}

#helpPromptModal .diff-col-proposed .diff-heading {
  margin-bottom: 6px;
  color: #15803d;
}

#helpPromptModal .diff-removed {
  padding: 0 2px;
  border-radius: 3px;
  color: #b91c1c;
  background: #fde8e8;
  text-decoration: line-through;
}

#helpPromptModal .diff-added {
  padding: 0 2px;
  border-radius: 3px;
  color: #15803d;
  background: #dcfce7;
}

#helpPromptModal #helpResultArea {
  animation: hector-editor-fade-in 0.25s ease;
}

#helpPromptModal .modal-footer {
  border-top: 1px solid var(--mv-gray-100);
  background: var(--mv-gray-50);
}

.toolbar-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  padding: 0;
  border: 1px solid var(--mv-gray-200);
  border-radius: 0.55rem;
  color: var(--mv-gray-500);
  background: #fff;
  line-height: 1;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.toolbar-icon-btn:hover,
.toolbar-icon-btn:focus,
.toolbar-icon-btn.is-active,
.toolbar-icon-btn[aria-expanded="true"] {
  border-color: #c8d4ff;
  color: #2f5cf6;
  background: var(--mv-gray-100);
  box-shadow: 0 4px 10px rgba(31, 41, 55, 0.06);
  outline: none;
}

.toolbar-icon-btn-primary {
  color: #fff;
  border-color: #2f5cf6;
  background: #2f5cf6;
}

.toolbar-icon-btn-primary:hover,
.toolbar-icon-btn-primary:focus {
  color: #fff;
  border-color: #2147d7;
  background: #2147d7;
}

.filter-active-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--mv-danger);
  box-shadow: 0 0 0 2px #fff;
}

.filter-panel-collapse {
  flex: 0 1 auto;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.filter-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.visits-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
  gap: 0.8rem;
  align-items: start;
}

.parcours-thumb-wrap,
.orphan-icon {
  width: 48px;
  height: 48px;
  border-radius: 0.5rem;
  flex: 0 0 48px;
  overflow: hidden;
}

.orphan-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a94a6;
  background: var(--mv-gray-100);
}

.parcours-actions .dropdown,
.list-card-action-form {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.list-card-kind {
  color: #7b8798;
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1;
}

.list-empty-state {
  grid-column: 1 / -1;
}

.btn-toggle-steps {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  border: 1px solid var(--mv-gray-200);
  border-radius: 0.48rem;
  padding: 0.36rem 0.62rem;
  color: var(--mv-gray-600);
  background: var(--mv-gray-50);
  font-size: 0.74rem;
  font-weight: 650;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.btn-toggle-steps:hover,
.btn-toggle-steps:focus,
.btn-toggle-steps[aria-expanded="true"] {
  border-color: #c8d4ff;
  color: #2f5cf6;
  background: var(--mv-primary-50);
  outline: none;
}

.btn-toggle-steps .chevron {
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}

.btn-toggle-steps[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.btn-toggle-steps .steps-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  color: var(--mv-gray-600);
  background: var(--mv-gray-200);
  font-size: 0.7rem;
  font-weight: 700;
}

.print-template-list-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 1px solid var(--mv-gray-200);
  border-radius: 0.625rem;
  margin-bottom: 0.55rem;
  background: #fff;
  box-shadow: 0 8px 18px rgba(31, 41, 55, 0.035);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.print-template-list-card:hover {
  border-color: var(--mv-gray-300);
  box-shadow: 0 10px 22px rgba(31, 41, 55, 0.06);
  transform: translateY(-1px);
}

.col-type-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.28em 0.62em;
  border-radius: 999px;
  color: #8a94a6;
  background: var(--mv-gray-100);
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1.1;
}

.steps-fullwidth-slot {
  grid-column: 1 / -1;
}

.steps-fullwidth-slot.d-none,
.parcours-steps-source[hidden] {
  display: none !important;
}

.quick-create-modal {
  border: 0;
  border-radius: 0.75rem;
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.18);
}

.quick-create-modal .modal-header {
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.35rem 0.85rem;
}

.quick-create-modal .modal-title {
  color: var(--mv-gray-800);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}

.quick-create-help {
  max-width: 28rem;
  color: var(--mv-gray-500);
  font-size: 0.82rem;
  line-height: 1.45;
}

.quick-create-modal .modal-body {
  padding-right: 1.35rem;
  padding-left: 1.35rem;
}

.quick-create-choice {
  padding: 0.95rem;
  border: 1px solid var(--mv-gray-100);
  border-radius: 0.625rem;
  background: var(--mv-gray-50);
}

.quick-create-choice .form-label {
  color: var(--mv-gray-700);
  font-size: 0.78rem;
}

.quick-create-actions {
  gap: 0.5rem;
  padding: 0.85rem 1.35rem 1.25rem;
}

@media (max-width: 991.98px) {

  .filter-panel-collapse {
    order: 3;
    flex: 1 1 100%;
  }
}

@media (max-width: 575.98px) {

  .visits-board {
    grid-template-columns: 1fr;
  }

  .toolbar-icon-btn {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .filter-actions {
    justify-content: flex-end;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Collection — Compositeur de fonds (plab-*)
   Panneau d'inspection compact a gauche, scene d'apercu a droite.
   Meme grammaire que le panneau de style de l'editeur de page (wf-*),
   reglee aux couleurs de la marque.
   ═══════════════════════════════════════════════════════════════════ */

.plab {
  --plab-surface:     #ffffff;
  --plab-bg:          var(--mv-gray-100);
  --plab-bg-soft:     var(--mv-gray-50);
  --plab-border:      var(--mv-gray-200);
  --plab-border-soft: var(--mv-gray-100);
  --plab-text:        var(--mv-gray-700);
  --plab-text-strong: #1a1f36;
  --plab-muted:       #8a94a6;
  --plab-accent:      var(--mv-primary-dark);
  --plab-accent-soft: rgba(15, 22, 191, 0.08);
  --plab-accent-ring: rgba(15, 22, 191, 0.35);
  --plab-danger:      #d92d20;
  --plab-r:           0.5rem;
  --plab-r-lg:        0.75rem;
  --plab-ctrl-h:      1.85rem;

  color: var(--plab-text);
}

.usage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--mv-gray-100);
}

.guide-filter-bar {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 18rem) auto;
  gap: .75rem;
}

@media (max-width: 767.98px) {
  .guide-filter-bar { grid-template-columns: 1fr; }
}


.visite-position-map { width: 100%; min-height: 320px; overflow: hidden; border-radius: .75rem; }
.position-search-wrap { position: relative; }
.position-search-results { position: absolute; z-index: 20; top: calc(100% + 2px); right: 0; left: 0; overflow: hidden; border: 1px solid var(--mv-gray-200); border-radius: .5rem; background: #fff; box-shadow: 0 8px 24px rgba(52, 71, 103, .14); }
.position-search-result { display: block; width: 100%; padding: .55rem .75rem; border: 0; border-bottom: 1px solid var(--mv-gray-100); color: var(--mv-text-heading); background: #fff; text-align: left; }
.position-search-result:hover { background: var(--mv-gray-50); }
.visite-position-inline .visite-position-map { min-height: 260px; }
.visite-position-inline .btn-link { font-size: .75rem; }

/* Image editor: compact creation and retouch controls. */
#aiFloatingBar { max-width: 600px; width: calc(100% - 24px); }
#aiGenerateMode, #aiRetouchMode { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 7px 10px; height: 52px; border: 1px solid var(--mv-gray-200); border-radius: 14px; background: #fff; box-shadow: 0 4px 18px #23334d1a; }
#aiGenerateMode:hover, #aiRetouchMode:hover { box-shadow: 0 4px 18px #23334d1a; }
#aiRetouchModal .modal-dialog { max-width: 640px; }
#aiRetouchModal .modal-header { padding: 12px 16px; }
#aiRetouchModal .modal-title { font-size: 16px; }
#aiRetouchModal .modal-body { padding: 16px; }
#aiRetouchModal .modal-footer { padding: 10px 16px; gap: 8px; }
#aiRetouchModal .modal-footer .btn { font-size: 12px; padding: 8px 12px; margin: 0; box-shadow: none; }
#aiRetouchCostSlot { margin-right: auto; }
#aiRetouchGenerateButtons, #aiRetouchValidateButtons { display: flex; gap: 8px; }
#aiRetouchModal #aiReferencePreview { padding: 0; }
#aiRetouchModal .reference-img-preview { width: 40px; height: 40px; border-radius: 7px; flex: 0 0 40px; box-shadow: none; }
#aiRetouchModal .reference-img-preview img { width: 100%; height: 100%; object-fit: contain; }
#aiRetouchModal .reference-img-preview .remove-btn { opacity: 1; width: 18px; height: 18px; font-size: 9px; top: 0; right: 0; }
#aiRetouchModal #aiPrompt { font-size: 13px; min-height: 64px; padding: 10px; resize: vertical; }
#aiRetouchModal #aiCustomPromptSection .mb-3 { margin-bottom: 10px !important; }
#aiRetouchModal .ai-presets-carousel { display: flex; flex-direction: column; overflow: visible; gap: 10px; padding: 0; }
#aiRetouchModal .ai-preset-section { flex: initial; min-width: 0; }
#aiRetouchModal .ai-preset-section-title { font-size: 10px; margin-bottom: 5px; }
#aiRetouchModal .ai-preset-items { display: flex; flex-wrap: wrap; gap: 5px; }
#aiRetouchModal .ai-preset-item { display: inline-flex; align-items: center; gap: 5px; width: auto; min-width: 0; padding: 6px 9px; border: 1px solid var(--mv-gray-200); border-radius: 16px; background: #fff; box-shadow: none; text-align: left; transform: none; }
#aiRetouchModal .ai-preset-item:hover, #aiRetouchModal .ai-preset-item.selected { border-color: #6972e6; background: #f0f1ff; }
#aiRetouchModal .ai-preset-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin: 0; color: #6972e6; background: transparent; box-shadow: none; font-size: 12px; }
#aiRetouchModal .ai-preset-name { font-size: 11px; line-height: 1.3; white-space: nowrap; }
#aiRetouchModal .ai-preset-selected-indicator { display: inline-block; margin: 8px 0 0; padding: 3px 8px; border-radius: 16px; background: #f0f1ff; font-size: 11px; }
#aiRetouchModal .alert { padding: 10px; font-size: 12px; margin-top: 10px; margin-bottom: 0; }
#aiFloatingBar button:focus-visible, #aiFloatingBar input:focus-visible, .mai-ai-cost summary:focus-visible, #aiRetouchModal button:focus-visible { outline: 2px solid #6972e6; outline-offset: 2px; }
#aiGenerateOptions[hidden], #aiPresetsLibrary[hidden], #aiRetouchOptions[hidden] { display: none; }
@media (max-width: 575px) {
  #aiFloatingBar { width: calc(100% - 16px); bottom: 10px; }
  #aiGenerateMode, #aiRetouchMode { gap: 4px; padding: 7px; }
  #aiRetouchModal .modal-dialog { margin: 8px; }
}
#leftToolbar .btn { display: flex; align-items: center; justify-content: center; width: 40px; min-width: 40px; height: 40px; min-height: 40px; flex-shrink: 0; padding: 0; margin: 0; border: 1px solid transparent; border-radius: 10px !important; background: transparent; color: #718096; box-shadow: none; transform: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
#leftToolbar .btn svg { width: 20px; height: 20px; flex: 0 0 20px; stroke-width: 1.75; }
#leftToolbar .btn:hover { color: var(--mv-text-heading); background: var(--mv-gray-100); border-color: transparent; box-shadow: none; transform: none; }
#leftToolbar .tool-btn.btn-primary { color: #425ce5; background: #edf0ff; border-color: #dce3ff; box-shadow: inset 3px 0 0 #5269e8; }
#leftToolbar .btn:focus-visible { outline: 2px solid #5269e8; outline-offset: -2px; }
#leftToolbar .btn:disabled { opacity: .4; cursor: default; }
#leftToolbar #toggleLeftRailBtn { height: 30px; min-height: 30px; color: #9aa5b5; border-radius: 7px; }
#leftToolbar #toggleLeftRailBtn.active { background: var(--mv-gray-100); color: #5269e8; }
#leftToolbar:not(.is-collapsed) .tool-btn, #leftToolbar:not(.is-collapsed) #deleteSelected { width: 100%; justify-content: flex-start; padding: 0 10px; gap: 10px; }
#leftToolbar:not(.is-collapsed) .tool-btn::after, #leftToolbar:not(.is-collapsed) #deleteSelected::after { content: attr(data-label); font-size: 12px; line-height: 1.2; font-weight: 500; white-space: nowrap; }
#leftToolbar #deleteSelected { color: #9a8790; }
#leftToolbar #deleteSelected:hover { color: #d23b53; background: #fff0f3; }
@media (prefers-reduced-motion: reduce) {
  #leftToolbar, #leftToolbar .btn { transition: none; }
}
#layersPanel #toggleLeftPanelBtn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #8592a6; box-shadow: none; font-size: 11px; }
#layersPanel #toggleLeftPanelBtn:hover { background: var(--mv-gray-100); color: #425ce5; }
#layersList { padding: 8px !important; }
#layersList .layer-item { min-height: 44px; padding: 5px !important; gap: 4px !important; margin-bottom: 4px !important; border: 1px solid transparent; border-radius: 9px; background: transparent; box-shadow: none; transition: background-color .15s ease; }
#layersList .layer-item:hover { background: var(--mv-gray-50); border-color: var(--mv-gray-100); transform: none; box-shadow: none; }
#layersList .layer-item.is-active { background: #edf1ff; border-color: #dae2ff; box-shadow: none; }
#layersList .layer-item-name { min-width: 0; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#layersList .btn-group { flex-shrink: 0; gap: 1px; box-shadow: none; background: transparent; border: 0; }
#layersList .layer-action-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 26px; padding: 0; margin: 0; border: 0; border-radius: 5px !important; background: transparent; box-shadow: none; color: var(--mv-gray-400); font-size: 10px; }
#layersList .layer-action-btn:hover { color: #425ce5; background: #e2e8fc; transform: none; box-shadow: none; }
#layersList .layer-lock.btn-warning { color: #b88a38; background: #fbf3e3; }
#layersList button:focus-visible, #layersPanel #toggleLeftPanelBtn:focus-visible { outline: 2px solid #5269e8; outline-offset: 1px; }

/* Image editor: properties inspector aligned with tools and layers. */
#propertiesPanel { --mai-right-border: var(--mv-gray-200); --mai-right-surface: var(--mv-gray-50); --mai-right-muted: #8592a6; color: #526079; }
#propertiesPanel #propertiesPanelSubtitle { font-size: 11px !important; line-height: 1.4; color: #8592a6 !important; margin-top: 4px !important; }
#propertiesPanel #toggleRightPanelBtn { display: flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 7px !important; background: transparent; color: #8592a6; box-shadow: none; font-size: 11px; }
#propertiesPanel #toggleRightPanelBtn:hover { background: var(--mv-gray-100); color: #425ce5; }
#propertiesPanel #propertiesContent { padding: 8px !important; --wf-bg: #fff; --wf-surface: #fff; --wf-surface2: var(--mv-gray-50); --wf-border: var(--mv-gray-200); --wf-text: #526079; --wf-text-muted: #8592a6; --wf-accent: #5269e8; --wf-accent-dim: #edf1ff; --wf-input-h: 30px; --wf-r: 7px; --wf-r-lg: 9px; }
#propertiesPanel #propertiesContent hr { margin: 8px 0; border-color: var(--mv-gray-100); opacity: 1; }
#propertiesPanel #propertiesContent .small.fw-bold { font-size: 11px !important; font-weight: 500 !important; color: #718096; margin-bottom: 4px; }
#propertiesPanel #propertiesContent .mb-3 { margin-bottom: 8px !important; }
#propertiesPanel .form-control, #propertiesPanel .form-select { border-color: var(--mv-gray-200); border-radius: 7px; background-color: var(--mv-gray-50); color: #526079; box-shadow: none; font-size: 12px; }
#propertiesPanel #propertiesContent .form-control-sm, #propertiesPanel #propertiesContent .form-select-sm { min-height: 30px; height: 30px; padding-top: 4px; padding-bottom: 4px; font-size: 12px; }
#propertiesPanel #propertiesContent textarea.form-control { height: auto; min-height: 60px; }
#propertiesPanel .form-control:focus, #propertiesPanel .form-select:focus { border-color: #9ba9ee; background-color: #fff; box-shadow: 0 0 0 2px #edf1ff; }
#propertiesPanel #propertiesContent .form-control-color { width: 32px; min-width: 32px; height: 28px; padding: 3px; }
#propertiesPanel .btn, #propertiesPanel .mai-image-fit-btn, #propertiesPanel .mai-image-mini-btn { min-height: 28px; padding: 5px 8px; border: 1px solid var(--mv-gray-200); border-radius: 7px !important; background: var(--mv-gray-50); color: #718096; font-size: 11px; font-weight: 500; box-shadow: none; transform: none; }
#propertiesPanel .btn:hover:not(:disabled), #propertiesPanel .mai-image-fit-btn:hover, #propertiesPanel .mai-image-mini-btn:hover { background: #edf1ff; color: #425ce5; border-color: #dae2ff; box-shadow: none; transform: none; }
#propertiesPanel .btn.btn-primary, #propertiesPanel .btn.active, #propertiesPanel .mai-image-fit-btn.active { background: #edf1ff; color: #425ce5; border-color: #dae2ff; box-shadow: none; }
#propertiesPanel .btn.btn-outline-danger { background: transparent; color: #b46b7a; }
#propertiesPanel .btn.btn-outline-danger:hover { background: #fff0f3; color: #d23b53; border-color: #f5d7de; }
#propertiesPanel .btn-group { gap: 3px; padding: 3px; border-radius: 8px; background: var(--mv-gray-50); box-shadow: none; }
#propertiesPanel .btn-group > .btn { border-color: transparent; margin: 0; background: transparent; }
#propertiesPanel .btn-group > .btn.btn-primary { background: #fff; border-color: #dae2ff; color: #425ce5; }
#propertiesPanel .form-range { accent-color: #5269e8; }
#propertiesPanel .form-range::-webkit-slider-thumb { background: #7185e8; }
#propertiesPanel .form-range::-moz-range-thumb { background: #7185e8; }
#propertiesPanel button:focus-visible { outline: 2px solid #5269e8; outline-offset: 1px; }
#propertiesPanel .btn:disabled { opacity: .45; }
.plan-marker-group summary:focus-visible, @media (max-width: 400px) {
  .plan-marker-mode { flex-basis: 100%; flex-wrap: wrap; }
  .plan-marker-toolbar > .btn { justify-content: center; width: 100%; margin-left: 0; }
}
.pes2-media-settings button:focus-visible, .pes2-image-preview:focus-visible, #imageLibraryModal.is-page-editor [role="button"]:focus-visible { outline: 2px solid #315bda; outline-offset: 2px; }
#imageLibraryModal.is-page-editor .modal-dialog { max-width: 880px; }
#imageLibraryModal.is-page-editor .images-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .65rem; }
#imageLibraryModal.is-page-editor .add-text { font-size: .75rem; }
#imageLibraryModal.is-page-editor .add-description { font-size: .65rem; margin: 0; }
#imageLibraryModal.is-page-editor .modal-footer .btn { font-size: .75rem; padding: .55rem .8rem; margin-bottom: 0; }

/* Directives Exp [..] dans l'editeur d'audioguide (API CSS Custom Highlight,
   ranges calcules par static/js/audioguide_exp_tags.js). */
::highlight(exp-directive) {
  color: #9333ea;
  background-color: rgba(147, 51, 234, 0.12);
}
::highlight(exp-pause) {
  color: var(--mv-gray-500);
  background-color: rgba(100, 116, 139, 0.14);
}
.exp-directives-hint {
  font-size: 0.75rem;
  color: var(--mv-text-muted);
}
/* Modale "Ameliorer l'expressivite" (audioguide Exp). */
.exp-preview-text {
  min-height: 180px;
  max-height: 320px;
  overflow-y: auto;
  padding: 1rem;
  border: 1px solid var(--mv-gray-300);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.7;
  white-space: pre-wrap;
}
.exp-preview-text-original {
  background: var(--mv-gray-50);
  color: var(--mv-text);
}
.exp-preview-text-improved {
  background: #fff;
  border-color: rgba(147, 51, 234, 0.35);
}
.exp-preview-tag {
  color: #9333ea;
  background-color: rgba(147, 51, 234, 0.12);
  border-radius: 0.25rem;
  padding: 0 0.15rem;
}
.exp-preview-emphasis {
  color: var(--mv-text-heading);
  font-weight: 700;
}
.exp-preview-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(147, 51, 234, 0.3);
  border-radius: 999px;
  color: #7e22ce;
  background: rgba(147, 51, 234, 0.06);
  font-size: 0.75rem;
}
.exp-preview-changes {
  margin-bottom: 0.75rem;
  padding-left: 1.1rem;
  color: var(--mv-text-heading);
}

/* Mediation text complexity in the item editor. */
.content-complexity-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.text-complexity-badge { border: 1px solid var(--mv-gray-200); cursor: pointer; text-align: left; flex-wrap: wrap; }
.text-complexity-badge:hover { border-color: var(--mv-gray-400); }
.text-complexity-badge:focus-visible { outline: 2px solid #4f46e5; outline-offset: 3px; }
.text-complexity-badge[data-level="1"], .text-complexity-badge[data-level="2"] { background: #edf7f2; color: #226149; }
.text-complexity-badge[data-level="3"], .text-complexity-badge[data-level="4"] { background: var(--mv-primary-50); color: #34558b; }
.text-complexity-badge[data-level="5"] { background: #f3effa; color: #684a8a; }
.text-complexity-badge[data-level="6"], .text-complexity-badge[data-level="7"] { background: #faf1e8; color: #805125; }
.text-complexity-badge-status { font-size: .7rem; font-weight: 400; }
.text-complexity-badge [hidden], .text-complexity-modal [hidden] { display: none !important; }
.text-complexity-modal .modal-body { font-size: .82rem; }
.text-complexity-summary { font-weight: 600; margin-bottom: .25rem; color: var(--mv-gray-700); }
.text-complexity-message, .text-complexity-intro, .text-complexity-date { color: var(--mv-gray-500); font-size: .78rem; }
.text-complexity-message:empty, .text-complexity-date:empty { display: none; }
.text-complexity-scale { list-style: none; padding: 0; margin: 1rem 0; }
.text-complexity-scale li { display: flex; align-items: flex-start; gap: .65rem; padding: .55rem; border: 1px solid transparent; border-radius: .5rem; }
.text-complexity-scale li.is-current { background: var(--mv-primary-50); border-color: #c7d2fe; }
.text-complexity-number { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--mv-gray-100); color: var(--mv-gray-600); font-weight: 600; }
.is-current .text-complexity-number { background: #4f46e5; color: #fff; }
.text-complexity-level-label { font-weight: 600; color: var(--mv-gray-700); }
.text-complexity-current { font-size: .68rem; color: #4338ca; margin-left: .4rem; }
.text-complexity-scale p, .text-complexity-criterion p { margin: .15rem 0 0; color: var(--mv-gray-500); font-size: .76rem; line-height: 1.45; }
.text-complexity-position { padding: .65rem .75rem; margin: .65rem 0; background: var(--mv-gray-50); border: 1px solid var(--mv-gray-200); border-radius: .5rem; }
.text-complexity-position-label { margin: 0 0 .35rem; font-weight: 600; font-size: .8rem; color: var(--mv-gray-700); }
.text-complexity-position-meter { display: block; width: 100%; height: .8rem; }
.text-complexity-position-meter::-webkit-meter-bar { background: var(--mv-gray-200); border: 0; border-radius: 999px; }
.text-complexity-position-meter::-webkit-meter-optimum-value { background: #6366f1; border-radius: 999px; }
.text-complexity-position-meter::-moz-meter-bar { background: #6366f1; border-radius: 999px; }
.text-complexity-position-ticks { display: flex; justify-content: space-between; color: var(--mv-gray-500); font-size: .68rem; margin-top: .1rem; }
.text-complexity-position-description { margin: .35rem 0 0; color: var(--mv-gray-600); font-size: .76rem; line-height: 1.45; }
.text-complexity-criteria-title { margin: 1.2rem 0 .5rem; font-size: .85rem; }
.text-complexity-criterion { padding: .5rem 0; border-top: 1px solid var(--mv-gray-200); }
.text-complexity-criterion-heading { display: flex; justify-content: space-between; gap: 1rem; font-weight: 500; color: var(--mv-gray-600); }
.text-complexity-date { margin: .8rem 0 0; }
@media (max-width: 575.98px) {
  .text-complexity-badge { max-width: 100%; }
  .text-complexity-modal .modal-body { padding: .85rem; }
  .text-complexity-modal .modal-footer { gap: .4rem; }
}

/* Level-targeted mediation rewriting. */
.text-complexity-dialog { max-width: 1040px; width: calc(100% - 2rem); margin-left: auto; margin-right: auto; }
.text-complexity-columns { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.5rem; }
.text-complexity-columns .text-complexity-criteria-title { margin-top: 1rem; }
.text-complexity-rewrite { border: 1px solid var(--mv-gray-200); border-radius: .6rem; padding: .85rem; margin-bottom: 1rem; background: var(--mv-gray-50); }
.text-complexity-rewrite h6 { font-size: .9rem; margin-bottom: .6rem; }
.text-complexity-rewrite-controls, .text-complexity-rewrite-actions { display: flex; align-items: flex-end; gap: .7rem; flex-wrap: wrap; }
.text-complexity-target { flex: 1; min-width: 180px; }
.text-complexity-target label { font-size: .75rem; margin: 0 0 .2rem; }
.text-complexity-rewrite-status { margin: .6rem 0 0; font-size: .8rem; color: var(--mv-gray-600); }
.text-complexity-rewrite-status:empty { display: none; }
.text-complexity-preview { border: 1px solid var(--mv-gray-200); border-radius: .5rem; padding: 1rem; font-size: .9rem; line-height: 1.65; overflow-wrap: anywhere; }
.text-complexity-preview img { max-width: 100%; height: auto; }
@media (max-width: 767.98px) {
  .text-complexity-dialog { width: calc(100% - 1rem); }
  .text-complexity-columns { grid-template-columns: 1fr; gap: 0; }
  .text-complexity-rewrite-controls, .text-complexity-rewrite-actions { align-items: stretch; flex-direction: column; }
}