/*
Thème Waplanner — socle CSS maison : base/normalize, boutons, formulaires,
input-group, badge, progress, nav/tabs/pills, navbar, dropdown, modale,
popover, close, utilitaires, notifications (thème Noty maison).

Le balisage de l'appli emploie les noms de classes de Bootstrap 3 (btn,
modal, popover…), dont ce fichier tient le rôle ; les comportements JS
correspondants sont dans js/src/utils/wpBehaviors.js. Le périmètre couvert
est celui dont l'appli dépend, pas tout Bootstrap.

Design plat, palette contemporaine, police système, radius élargis, ombres
douces. Les MÉTRIQUES (hauteurs de contrôle, paddings) sont calées sur les
layouts de l'appli : les modifier déplace les écrans, pas seulement leur
habillage.
*/

:root {
    /* Typo */
    --wp-font-family: system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --wp-font-size: 14px;
    --wp-font-size-sm: 12px;
    --wp-line-height: 1.42857143;

    /* Palette générale (les couleurs d'identité — sélection jaune,
       bleu de survol #8FC7E3 de la grille — restent dans waplanner.css) */
    --wp-text: #1f2937;
    --wp-text-input: #1f2937;
    --wp-text-muted: #6b7280;
    --wp-surface: #fff;
    --wp-border: #d1d5db;
    --wp-border-light: #e5e7eb;
    --wp-link: #2563eb;
    --wp-link-hover: #1e40af;
    --wp-hover-bg: #f3f4f6;
    --wp-focus-ring: rgba(37, 99, 235, 0.25);

    /* Palette d'états (plate : hover/active = déclinaisons plus sombres) */
    --wp-primary: #2563eb;
    --wp-primary-hover: #1d4ed8;
    --wp-primary-active: #1e40af;
    --wp-success: #16a34a;
    --wp-success-hover: #15803d;
    --wp-success-active: #166534;
    --wp-info: #0891b2;
    --wp-info-hover: #0e7490;
    --wp-info-active: #155e75;
    --wp-warning: #d97706;
    --wp-warning-hover: #b45309;
    --wp-warning-active: #92400e;
    --wp-danger: #dc2626;
    --wp-danger-hover: #b91c1c;
    --wp-danger-active: #991b1b;
 
    /* Rouge de marque (img/logo-waplanner.svg) : réservé aux accents identitaires
       (ex: barre de progression du chargement post-login, bouton .btn-brand du
       login), distinct du rouge "danger" ci-dessus. */
    --wp-brand: #c73626;
    --wp-brand-hover: #a52d1f;
    --wp-brand-active: #8a2519;
    /* Accent du calendrier interne (css/datepickerTheme.css) : sélection en
       rouge, voulue distincte du primaire bleu ; même teinte que danger mais
       variable à part — ajuster ici ne doit pas toucher les états d'erreur */
    --wp-datepicker-accent: #dc2626;

    /* Ombres */
    --wp-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --wp-shadow-md: 0 10px 15px -3px rgba(16, 24, 40, 0.12), 0 4px 6px -4px rgba(16, 24, 40, 0.08);
    --wp-shadow-lg: 0 20px 25px -5px rgba(16, 24, 40, 0.15), 0 8px 10px -6px rgba(16, 24, 40, 0.1);

    /* Métriques */
    --wp-radius: 6px;
    --wp-radius-sm: 4px;
    --wp-radius-lg: 10px;
    --wp-control-height: 34px;
    --wp-control-height-sm: 30px;
    --wp-control-padding-y: 6px;
    --wp-control-padding-x: 12px;

    /* Plans (jQuery UI est au-dessus, à 9999 — cf. waplanner.css) */
    --wp-z-dropdown: 1000;
    --wp-z-modal-backdrop: 1040;
    --wp-z-modal: 1050;
    --wp-z-popover: 1060;
}

/*
Base (normalize + defaults dont le balisage de l'appli dépend)
---------------------------------------------------------------
*/

* {
    box-sizing: border-box;
}
*:before,
*:after {
    box-sizing: border-box;
}

html {
    font-size: 10px;
    font-family: sans-serif;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--wp-font-family);
    font-size: var(--wp-font-size);
    line-height: var(--wp-line-height);
    color: var(--wp-text);
    background-color: var(--wp-surface);
}

input,
button,
select,
textarea {
    margin: 0;
    font: inherit;
    color: inherit;
}
button {
    overflow: visible;
    text-transform: none;
    -webkit-appearance: button;
    cursor: pointer;
}
input[type="radio"],
input[type="checkbox"] {
    margin: 4px 0 0;
    line-height: normal;
}
textarea {
    overflow: auto;
}

a {
    color: var(--wp-link);
    text-decoration: none;
    background-color: transparent;
}
a:hover,
a:focus {
    color: var(--wp-link-hover);
    text-decoration: underline;
}
/* Pas d'outline au clic (il cadrerait de noir les onglets de formulaire) ;
   au clavier seulement, anneau doux comme .btn:focus-visible */
a:focus {
    outline: 0;
}
a:focus-visible {
    outline: 3px solid var(--wp-focus-ring);
    outline-offset: -1px;
}

img {
    border: 0;
    vertical-align: middle;
}

b,
strong {
    font-weight: 700;
}
small,
.small {
    font-size: 85%;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}
h1 { font-size: 36px; margin-top: 20px; margin-bottom: 10px; }
h2 { font-size: 30px; margin-top: 20px; margin-bottom: 10px; }
h3 { font-size: 24px; margin-top: 20px; margin-bottom: 10px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

p {
    margin: 0 0 10px;
}

ul,
ol {
    margin-top: 0;
    margin-bottom: 10px;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

table {
    background-color: transparent;
    border-spacing: 0;
    border-collapse: collapse;
}
td,
th {
    padding: 0;
}
th {
    text-align: left;
}

hr {
    height: 0;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid var(--wp-hover-bg);
}

/* Sections de formulaire (fieldPanel) */
fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}
legend {
    display: block;
    width: 100%;
    padding: 0 0 6px;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
    line-height: inherit;
    color: var(--wp-text);
    border: 0;
    border-bottom: 1px solid var(--wp-border-light);
}

/*
Utilitaires
-----------
*/

.pull-right { float: right !important; }
.pull-left { float: left !important; }
.hide { display: none !important; }
.show { display: block !important; }
.hidden { display: none !important; }
.invisible { visibility: hidden; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.fade {
    opacity: 0;
    transition: opacity 0.15s linear;
}
.fade.in {
    opacity: 1;
}

.close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: var(--wp-text-muted);
    opacity: 0.7;
}
.close:hover,
.close:focus {
    color: var(--wp-text);
    text-decoration: none;
    cursor: pointer;
    opacity: 1;
}
button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
}

/*
Formulaires
-----------
*/

.form-control {
    display: block;
    width: 100%;
    height: var(--wp-control-height);
    padding: var(--wp-control-padding-y) var(--wp-control-padding-x);
    font-size: var(--wp-font-size);
    line-height: var(--wp-line-height);
    color: var(--wp-text-input);
    background-color: var(--wp-surface);
    background-image: none;
    border: 1px solid var(--wp-border);
    border-radius: var(--wp-radius);
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.form-control:focus {
    border-color: var(--wp-primary);
    outline: 0;
    box-shadow: 0 0 0 3px var(--wp-focus-ring);
}
.form-control::placeholder {
    color: #9ca3af;
    opacity: 1;
}
.form-control[disabled],
.form-control[readonly] {
    background-color: var(--wp-hover-bg);
    opacity: 1;
}
.form-control[disabled] {
    cursor: not-allowed;
}
textarea.form-control,
select[multiple].form-control {
    height: auto;
}

.input-sm {
    height: var(--wp-control-height-sm);
    padding: 5px 10px;
    font-size: var(--wp-font-size-sm);
    line-height: 1.5;
    border-radius: var(--wp-radius-sm);
}

/* .form-inline : contrôles en ligne (panel.js), desktop seulement */
@media (min-width: 768px) {
    .form-inline .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }
    .form-inline .input-group {
        display: inline-table;
        vertical-align: middle;
    }
    .form-inline .input-group .form-control {
        width: auto;
    }
}

.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}
.input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}
.input-group .form-control:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group .form-control:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group-btn {
    position: relative;
    display: table-cell;
    width: 1%;
    font-size: 0;
    white-space: nowrap;
    vertical-align: middle;
}
.input-group-btn > .btn {
    position: relative;
}
.input-group-btn:first-child > .btn {
    margin-right: -1px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group-btn:last-child > .btn {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}


/* Conteneur du menu principal (seul rescapé du système de grille) */
.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.container-fluid:before,
.container-fluid:after {
    display: table;
    content: " ";
}
.container-fluid:after {
    clear: both;
}

/*
Boutons
-------
*/

.btn {
    display: inline-block;
    padding: var(--wp-control-padding-y) var(--wp-control-padding-x);
    margin-bottom: 0;
    font-size: var(--wp-font-size);
    font-weight: 400;
    line-height: var(--wp-line-height);
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    background-image: none;
    border: 1px solid transparent;
    border-radius: var(--wp-radius);
    box-shadow: var(--wp-shadow-sm);
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.btn:hover,
.btn:focus {
    text-decoration: none;
}
.btn:focus {
    outline: 0;
}
.btn:focus-visible {
    box-shadow: 0 0 0 3px var(--wp-focus-ring);
}
.btn:active,
.btn.active {
    background-image: none;
    outline: 0;
    box-shadow: none;
}
.btn.disabled,
.btn[disabled] {
    cursor: not-allowed;
    opacity: 0.55;
    box-shadow: none;
}

.btn-default {
    color: var(--wp-text);
    background-color: var(--wp-surface);
    border-color: var(--wp-border);
}
.btn-default:hover,
.btn-default:focus {
    color: var(--wp-text);
    background-color: #f9fafb;
    border-color: var(--wp-border);
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    color: var(--wp-text);
    background-color: var(--wp-hover-bg);
    background-image: none;
    border-color: var(--wp-border);
}
.btn-default:active:hover,
.btn-default.active:hover,
.btn-default:active:focus,
.btn-default.active:focus {
    color: var(--wp-text);
    background-color: #e5e7eb;
    border-color: #9ca3af;
}

.btn-primary {
    color: #fff;
    background-color: var(--wp-primary);
    border-color: transparent;
}
.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    background-color: var(--wp-primary-hover);
    border-color: transparent;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    color: #fff;
    background-color: var(--wp-primary-active);
    background-image: none;
    border-color: transparent;
}
.btn-primary:active:hover,
.btn-primary.active:hover,
.btn-primary:active:focus,
.btn-primary.active:focus {
    color: #fff;
    background-color: var(--wp-primary-active);
    border-color: transparent;
}

.btn-success {
    color: #fff;
    background-color: var(--wp-success);
    border-color: transparent;
}
.btn-success:hover,
.btn-success:focus {
    color: #fff;
    background-color: var(--wp-success-hover);
    border-color: transparent;
}
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
    color: #fff;
    background-color: var(--wp-success-active);
    background-image: none;
    border-color: transparent;
}
.btn-success:active:hover,
.btn-success.active:hover,
.btn-success:active:focus,
.btn-success.active:focus {
    color: #fff;
    background-color: var(--wp-success-active);
    border-color: transparent;
}

.btn-info {
    color: #fff;
    background-color: var(--wp-info);
    border-color: transparent;
}
.btn-info:hover,
.btn-info:focus {
    color: #fff;
    background-color: var(--wp-info-hover);
    border-color: transparent;
}
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
    color: #fff;
    background-color: var(--wp-info-active);
    background-image: none;
    border-color: transparent;
}
.btn-info:active:hover,
.btn-info.active:hover,
.btn-info:active:focus,
.btn-info.active:focus {
    color: #fff;
    background-color: var(--wp-info-active);
    border-color: transparent;
}

.btn-warning {
    color: #fff;
    background-color: var(--wp-warning);
    border-color: transparent;
}
.btn-warning:hover,
.btn-warning:focus {
    color: #fff;
    background-color: var(--wp-warning-hover);
    border-color: transparent;
}
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
    color: #fff;
    background-color: var(--wp-warning-active);
    background-image: none;
    border-color: transparent;
}
.btn-warning:active:hover,
.btn-warning.active:hover,
.btn-warning:active:focus,
.btn-warning.active:focus {
    color: #fff;
    background-color: var(--wp-warning-active);
    border-color: transparent;
}

.btn-danger {
    color: #fff;
    background-color: var(--wp-danger);
    border-color: transparent;
}
.btn-danger:hover,
.btn-danger:focus {
    color: #fff;
    background-color: var(--wp-danger-hover);
    border-color: transparent;
}
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
    color: #fff;
    background-color: var(--wp-danger-active);
    background-image: none;
    border-color: transparent;
}
.btn-danger:active:hover,
.btn-danger.active:hover,
.btn-danger:active:focus,
.btn-danger.active:focus {
    color: #fff;
    background-color: var(--wp-danger-active);
    border-color: transparent;
}

.btn-brand {
    color: #fff;
    background-color: var(--wp-brand);
    border-color: transparent;
}
.btn-brand:hover,
.btn-brand:focus {
    color: #fff;
    background-color: var(--wp-brand-hover);
    border-color: transparent;
}
.btn-brand:active,
.btn-brand.active,
.open > .dropdown-toggle.btn-brand {
    color: #fff;
    background-color: var(--wp-brand-active);
    background-image: none;
    border-color: transparent;
}
.btn-brand:active:hover,
.btn-brand.active:hover,
.btn-brand:active:focus,
.btn-brand.active:focus {
    color: #fff;
    background-color: var(--wp-brand-active);
    border-color: transparent;
}

.btn-sm {
    padding: 5px 10px;
    font-size: var(--wp-font-size-sm);
    line-height: 1.5;
    border-radius: var(--wp-radius-sm);
}
.btn-xs {
    padding: 1px 5px;
    font-size: var(--wp-font-size-sm);
    line-height: 1.5;
    border-radius: var(--wp-radius-sm);
}

.btn-group {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.btn-group > .btn {
    position: relative;
    float: left;
}
.btn-group .btn + .btn {
    margin-left: -1px;
}
.btn-group > .btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}
.btn-group > .btn:first-child:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}



/*
Badge (compteur « N éléments ») et labels
-----------------------------------------
*/

.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 8px;
    font-size: var(--wp-font-size-sm);
    font-weight: 600;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: var(--wp-text-muted);
    border-radius: 999px;
}

.label {
    display: inline;
    padding: 0.2em 0.6em 0.3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
}
.label-default {
    background-color: var(--wp-text-muted);
}
.label-danger {
    background-color: var(--wp-danger);
}

/*
Progress (imports)
------------------
*/

.progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: var(--wp-hover-bg);
    border-radius: 999px;
}
.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: var(--wp-font-size-sm);
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: var(--wp-primary);
    border-radius: 999px;
    transition: width 0.6s ease;
}
.progress-bar-striped {
    background-image: linear-gradient(45deg,
        rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%,
        rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%,
        transparent 75%, transparent);
    background-size: 40px 40px;
}
.progress-bar.active {
    animation: wp-progress-bar-stripes 2s linear infinite;
}
@keyframes wp-progress-bar-stripes {
    from { background-position: 40px 0; }
    to { background-position: 0 0; }
}

/*
Nav (base commune tabs / pills / navbar-nav)
--------------------------------------------
*/

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.nav:before,
.nav:after {
    display: table;
    content: " ";
}
.nav:after {
    clear: both;
}
.nav > li {
    position: relative;
    display: block;
}
.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
    text-decoration: none;
    background-color: var(--wp-hover-bg);
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
    background-color: var(--wp-hover-bg);
    border-color: var(--wp-link);
}

.nav-tabs {
    border-bottom: 1px solid var(--wp-border-light);
}
.nav-tabs > li {
    float: left;
    margin-bottom: -1px;
}
.nav-tabs > li > a {
    margin-right: 2px;
    line-height: var(--wp-line-height);
    color: var(--wp-text-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}
.nav-tabs > li > a:hover {
    color: var(--wp-text);
    background-color: transparent;
    border-bottom-color: var(--wp-border);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--wp-primary);
    font-weight: 500;
    cursor: default;
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid var(--wp-primary);
}

.nav-pills > li {
    float: left;
}
.nav-pills > li > a {
    border-radius: var(--wp-radius);
}
.nav-pills > li + li {
    margin-left: 2px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    color: #fff;
    font-weight: 500;
    background-color: var(--wp-primary);
}

/*
Navbar (menu principal — desktop uniquement, cf. en-tête du fichier)
--------------------------------------------------------------------
*/

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    background-color: var(--wp-surface);
    border: 0;
    border-bottom: 1px solid var(--wp-border-light);
}
.navbar:before,
.navbar:after {
    display: table;
    content: " ";
}
.navbar:after {
    clear: both;
}
.navbar-brand {
    display: flex;
    align-items: center;
    float: left;
    height: 50px;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
}
.navbar-brand:hover,
.navbar-brand:focus {
    text-decoration: none;
}
.navbar-brand > img {
    display: block;
}
.navbar-nav {
    float: left;
    margin: 0;
}
.navbar-nav > li {
    float: left;
}
.navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 20px;
}
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
    margin-left: -15px;
}
.navbar-nav > li > .dropdown-menu {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}


/*
Dropdown (piloté par WP.behaviors : .open sur le parent)
--------------------------------------------------------
*/

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.dropdown {
    position: relative;
}
.dropdown-toggle:focus {
    outline: 0;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--wp-z-dropdown);
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: var(--wp-font-size);
    text-align: left;
    list-style: none;
    background-color: var(--wp-surface);
    background-clip: padding-box;
    border: 1px solid var(--wp-border-light);
    border-radius: 8px;
    box-shadow: var(--wp-shadow-md);
}
.dropdown-menu .divider {
    height: 1px;
    margin: 6px 0;
    overflow: hidden;
    background-color: var(--wp-border-light);
}
.dropdown-menu > li > a {
    display: block;
    padding: 5px 20px;
    clear: both;
    font-weight: 400;
    line-height: var(--wp-line-height);
    color: var(--wp-text);
    white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: var(--wp-text);
    text-decoration: none;
    background-color: var(--wp-hover-bg);
}
.open > .dropdown-menu {
    display: block;
}
.open > a {
    outline: 0;
}
.dropdown-menu-right {
    right: 0;
    left: auto;
}
.dropdown-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 990;
}

/*
Modale (pilotée par WP.behaviors : .in, .modal-open, backdrop)
--------------------------------------------------------------
*/

.modal-open {
    overflow: hidden;
}
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--wp-z-modal);
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}
.modal.fade .modal-dialog {
    transform: translate(0, -25%);
    transition: transform 0.3s ease-out;
}
.modal.in .modal-dialog {
    transform: translate(0, 0);
}
.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}
.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}
.modal-content {
    position: relative;
    background-color: var(--wp-surface);
    background-clip: padding-box;
    border: 0;
    border-radius: var(--wp-radius-lg);
    outline: 0;
    box-shadow: var(--wp-shadow-lg);
}
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--wp-z-modal-backdrop);
    background-color: #0f172a;
}
.modal-backdrop.fade {
    opacity: 0;
}
.modal-backdrop.in {
    opacity: 0.5;
}
.modal-header {
    padding: 15px;
    border-bottom: 1px solid var(--wp-border-light);
}
.modal-header:before,
.modal-header:after {
    display: table;
    content: " ";
}
.modal-header:after {
    clear: both;
}
.modal-header .close {
    margin-top: -2px;
}
.modal-title {
    margin: 0;
    font-weight: 600;
    line-height: var(--wp-line-height);
}
.modal-body {
    position: relative;
    padding: 15px;
}
.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid var(--wp-border-light);
}
.modal-footer:before,
.modal-footer:after {
    display: table;
    content: " ";
}
.modal-footer:after {
    clear: both;
}
.modal-footer .btn + .btn {
    margin-bottom: 0;
    margin-left: 5px;
}
@media (min-width: 768px) {
    .modal-dialog {
        width: 600px;
        margin: 30px auto;
    }
    .modal-content {
        box-shadow: var(--wp-shadow-lg);
    }
}

/*
Popover (piloté par WP.behaviors ; max-width élargi dans waplanner.css)
-----------------------------------------------------------------------
*/

.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--wp-z-popover);
    display: none;
    max-width: 276px;
    padding: 1px;
    font-family: var(--wp-font-family);
    font-size: var(--wp-font-size);
    font-style: normal;
    font-weight: 400;
    line-height: var(--wp-line-height);
    text-align: left;
    text-decoration: none;
    white-space: normal;
    word-break: normal;
    word-spacing: normal;
    letter-spacing: normal;
    background-color: var(--wp-surface);
    background-clip: padding-box;
    border: 1px solid var(--wp-border-light);
    border-radius: var(--wp-radius-lg);
    box-shadow: var(--wp-shadow-md);
}
.popover.top { margin-top: -10px; }
.popover.right { margin-left: 10px; }
.popover.bottom { margin-top: 10px; }
.popover.left { margin-left: -10px; }

.popover-title {
    padding: 8px 14px;
    margin: 0;
    font-size: var(--wp-font-size);
    font-weight: 600;
    background-color: #f9fafb;
    border-bottom: 1px solid var(--wp-border-light);
    border-radius: 9px 9px 0 0;
}
.popover-content {
    padding: 9px 14px;
}

.popover > .arrow,
.popover > .arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
.popover > .arrow {
    border-width: 11px;
}
.popover > .arrow:after {
    content: "";
    border-width: 10px;
}
.popover.top > .arrow {
    bottom: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-color: rgba(31, 41, 55, 0.12);
    border-bottom-width: 0;
}
.popover.top > .arrow:after {
    bottom: 1px;
    margin-left: -10px;
    content: " ";
    border-top-color: var(--wp-surface);
    border-bottom-width: 0;
}
.popover.right > .arrow {
    top: 50%;
    left: -11px;
    margin-top: -11px;
    border-right-color: rgba(31, 41, 55, 0.12);
    border-left-width: 0;
}
.popover.right > .arrow:after {
    bottom: -10px;
    left: 1px;
    content: " ";
    border-right-color: var(--wp-surface);
    border-left-width: 0;
}
.popover.bottom > .arrow {
    top: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-width: 0;
    border-bottom-color: rgba(31, 41, 55, 0.12);
}
.popover.bottom > .arrow:after {
    top: 1px;
    margin-left: -10px;
    content: " ";
    border-top-width: 0;
    border-bottom-color: var(--wp-surface);
}
.popover.left > .arrow {
    top: 50%;
    right: -11px;
    margin-top: -11px;
    border-right-width: 0;
    border-left-color: rgba(31, 41, 55, 0.12);
}
.popover.left > .arrow:after {
    right: 1px;
    bottom: -10px;
    content: " ";
    border-right-width: 0;
    border-left-color: var(--wp-surface);
}

/*
Notifications — thème Noty « waplanner », appliqué par
utilities.fireNotification et le shim noty V2. Ici et pas dans
waplanner.css : theme.css est aussi chargé par les pages ext/ et le
layoutEditor. La mécanique (positionnement des couches, animations,
affichage de la barre de progression) reste dans js/lib/noty/noty.css ;
le toast est cliquable en entier pour se fermer (closeWith par défaut),
la croix n'est qu'un indice visuel.
*/
.noty_theme__waplanner.noty_bar {
    --wp-noty-accent: var(--wp-info);
    --wp-noty-icon: "\f05a"; /* fa-circle-info */
    position: relative;
    margin-bottom: 10px;
    font-family: var(--wp-font-family);
    font-size: var(--wp-font-size);
    line-height: var(--wp-line-height);
    color: var(--wp-text);
    cursor: pointer;
    background-color: var(--wp-surface);
    border: 1px solid var(--wp-border-light);
    border-left: 4px solid var(--wp-noty-accent);
    border-radius: var(--wp-radius-lg);
    box-shadow: var(--wp-shadow-lg);
}
.noty_theme__waplanner.noty_type__success {
    --wp-noty-accent: var(--wp-success);
    --wp-noty-icon: "\f058"; /* fa-circle-check */
}
.noty_theme__waplanner.noty_type__warning {
    --wp-noty-accent: var(--wp-warning);
    --wp-noty-icon: "\f071"; /* fa-triangle-exclamation */
}
.noty_theme__waplanner.noty_type__error {
    --wp-noty-accent: var(--wp-danger);
    --wp-noty-icon: "\f06a"; /* fa-circle-exclamation */
}
.noty_theme__waplanner.noty_bar::before {
    position: absolute;
    top: 14px;
    left: 15px;
    font-family: "Font Awesome 7 Free";
    font-size: 16px;
    font-weight: 900;
    color: var(--wp-noty-accent);
    content: var(--wp-noty-icon);
}
.noty_theme__waplanner.noty_bar::after {
    position: absolute;
    top: 12px;
    right: 12px;
    font-family: "Font Awesome 7 Free";
    font-size: 12px;
    font-weight: 900;
    color: var(--wp-text-muted);
    content: "\f00d"; /* fa-xmark */
    opacity: 0.5;
}
.noty_theme__waplanner.noty_bar:hover::after {
    opacity: 1;
}
.noty_theme__waplanner .noty_body {
    padding: 12px 34px 12px 44px;
    overflow-wrap: break-word;
}
.noty_theme__waplanner .noty_body p {
    margin: 0;
}
.noty_theme__waplanner .noty_body p + p {
    margin-top: 6px;
}
/* 4 classes : passer devant la règle générique de noty.css (3 classes,
   chargée APRÈS dans index.html), qui grise la barre à 20 % */
.noty_theme__waplanner.noty_has_timeout.noty_has_progressbar .noty_progressbar {
    height: 3px;
    background-color: var(--wp-noty-accent);
    opacity: 0.35;
}