/*
 * Espace pro — harmonisation avec la charte graphique 2026
 * ---------------------------------------------------------
 * Chargé juste APRÈS css/front/style-standard-refonte-2026.css (voir docs/HTML.php, typepage ESPACEPRO).
 *
 * La charte définit les composants de base (.card, .alert, .btn, .badge). Ce fichier :
 *   1. corrige les effets de bord de la charte sur Bootstrap 4 (reset global, tailles de boutons…) ;
 *   2. aligne les classes Bootstrap / legacy encore utilisées (.card-body, .table, .list-group,
 *      .btn-outline-*, .badge-primary…) sur les composants de la charte ;
 *   3. regroupe les styles propres à certaines pages (anciennes balises <style> des .tpl) ;
 *   4. fournit quelques utilitaires pour éviter le style inline.
 *
 * Les couleurs, rayons et ombres passent exclusivement par les variables de la charte.
 */

/* ==========================================================================
   1. Effets de bord de la charte
   ========================================================================== */

/* Le reset global (* { padding: 0 }) supprime le retrait des listes à puces */
ul,
ol {
    padding-left: 1.5em;
}

/* Polices : Poppins pour les titres, Segoe UI pour le reste.
   "html body" : les typos proposées aux clients (css/typo/*.css, chargées par la page Charte graphique)
   redéfinissent body { font-family } et ne doivent pas s'appliquer à l'interface de l'espace pro */
html body,
input,
select,
textarea,
button,
.form-control,
.dropdown-menu,
.tooltip,
.popover {
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.h1:not(.fa), .h2:not(.fa), .h3:not(.fa), .h4:not(.fa), .h5:not(.fa), .h6:not(.fa),
.card-title,
.subtitle,
.boardtitle,
.header-title,
.page-title,
.modal-title {
    font-family: var(--font-title);
}

/* Champ de recherche avec loupe Font Awesome dans le placeholder */
.input-search-fa {
    font-family: var(--font-body), FontAwesome;
}

/* La charte fixe la couleur des titres et paragraphes : sur fond sombre (.text-white), ils héritent */
.text-white :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p) {
    color: inherit;
}

a {
    color: var(--orange);
}

a:hover {
    color: var(--bleu-pro);
}

/* ==========================================================================
   2. Cartes — une seule apparence pour tout l'espace pro
   ========================================================================== */

.card {
    --card-padding: 30px;
    display: block;
    position: relative;
    padding: var(--card-padding);
    color: var(--bleu-nuit);
    background-clip: border-box;
}

/* Compatibilité : partiels partagés avec le front ou l'admin (pro/offre/subscriptionPartGmb.tpl…)
   qui conservent l'ancienne classe .card-box */
.card-box {
    padding: 30px;
    margin-top: 16px;
    margin-bottom: 24px;
    background-color: var(--white);
    border: 1px solid transparent;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
}

.card.card-hover {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card.card-hover:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

/* Un transform fait d'une carte le repère des éléments position:fixed : une modale incluse dans la carte
   se repositionnerait (et clignoterait) à chaque entrée/sortie du survol */
.card.card-hover:has(.modal):hover {
    transform: none;
}

/* Les sous-éléments Bootstrap n'ajoutent pas de padding : c'est la carte qui le porte */
.card > .card-body,
.card > form > .card-body {
    padding: 0;
}

.card > .card-header {
    padding: 0 0 16px;
    margin-bottom: 16px;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--bg-gris-nuage);
    border-radius: 0;
    font-family: var(--font-title);
    font-weight: 700;
    color: var(--bleu-nuit);
}

.card > .card-footer {
    padding: 16px 0 0;
    margin-top: 16px;
    background-color: transparent;
    border: 0;
    border-top: 1px solid var(--bg-gris-nuage);
}

.card > .card-img-top {
    display: block;
    width: calc(100% + 2 * var(--card-padding));
    max-width: none;
    margin: calc(-1 * var(--card-padding)) calc(-1 * var(--card-padding)) 20px;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.card-title {
    margin-bottom: 16px;
    font-family: var(--font-title);
    font-size: 13pt;
    font-weight: 700;
    line-height: var(--lh-normal);
    color: var(--bleu-nuit);
    text-transform: none;
}

.card-subtitle,
.card-text {
    color: var(--gris-moyen);
}

.card-text:last-child {
    margin-bottom: 0;
}

/* Carte dans une carte : version contour, sans ombre */
.card .card {
    --card-padding: 20px;
    margin-top: 0;
    margin-bottom: 16px;
    background-color: var(--white);
    border: 1px solid var(--bg-gris-nuage);
    border-radius: var(--radius-btn);
    box-shadow: none;
}

/* Carte cliquable en mode liste (devis, commandes) : flèche orange à droite */
.card.card-list-link {
    padding-right: calc(var(--card-padding) + 36px);
    cursor: pointer;
}

.card.card-list-link::after {
    position: absolute;
    top: 50%;
    right: var(--card-padding);
    font-family: FontAwesome;
    font-size: 16pt;
    line-height: 1;
    color: var(--orange);
    content: "\f061";
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.card.card-list-link:hover::after {
    transform: translate(6px, -50%);
}

/* Tuiles du tableau de bord (ancienne .boxboard) */
.card.boxboard {
    display: flex;
    flex-direction: row; /* Bootstrap met .card en colonne */
    flex: 1 1 auto;
    align-items: flex-start;
}

/* Tuiles d'une même ligne à hauteur égale */
[class*="col"]:has(> .card.boxboard) {
    display: flex;
    flex-direction: column;
}

.card.boxboard > .picto-icon {
    margin-top: 2px;
}

/* Rangée de tuiles du tableau de bord : toutes sur une ligne, boutons alignés en bas (desktop) */
@media (min-width: 992px) {
    .tuiles-dashboard {
        flex-wrap: nowrap;
        margin-right: -8px;
        margin-left: -8px;
    }

    .tuiles-dashboard > [class*="col"] {
        min-width: 0;
        padding-right: 8px;
        padding-left: 8px;
    }

    .tuiles-dashboard .card.boxboard {
        --card-padding: 20px;
        flex-direction: column;
        align-items: stretch;
    }

    .tuiles-dashboard .card.boxboard > .picto-icon {
        margin: 0 0 12px;
        text-align: left;
    }

    /* Le contenu occupe toute la hauteur : justify-content-between pousse le bouton en bas */
    .tuiles-dashboard .card.boxboard > div {
        flex: 1 1 auto;
        padding-left: 0 !important;
    }

    .tuiles-dashboard .card.boxboard .btn {
        padding: 8px 16px;
        margin: 0;
    }
}

/* Séparateur mobile entre tuiles, inutile maintenant que ce sont des cartes */
.line-25 {
    display: none;
}

.card.b-left,
.card.b-right {
    border-color: transparent;
}

.card.nav-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.card-deck .card {
    margin-top: 0;
}

@media (max-width: 768px) {
    .card {
        --card-padding: 20px;
    }

    .card .card {
        --card-padding: 16px;
    }
}

/* Fenêtres modales : même forme que les cartes */
.modal-content {
    background-color: var(--bg-blanc-casse);
    border: 0;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-hover);
}

.modal-header,
.modal-footer {
    border-color: var(--bg-gris-nuage);
}

/* ==========================================================================
   3. Alertes
   La classe .alert-info (bleu) devient .alert-warning (jaune pâle) dans les templates.
   .alert-danger (Bootstrap) prend l'apparence de .alert-error (charte).
   ========================================================================== */

.alert {
    display: block;
    text-align: center;
    border: 0;
}

/* Mise en page icône + contenu de la charte, centrée */
.alert:has(> .alert-icon),
.alert:has(> .alert-content) {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .d-block (Bootstrap, en !important) casserait la mise en page ; un style="display:none" inline reste prioritaire */
.alert.d-block:has(> .alert-icon) {
    display: flex !important;
}

.alert-icon {
    font-size: 16pt;
}

.alert-content {
    min-width: 0;
    text-align: center;
}

/* Alertes générées en JS ou en PHP, sans .alert-icon : icône ajoutée en CSS */
.alert:not(:has(> .alert-icon))::before {
    display: inline-block;
    margin-right: 8px;
    font-family: FontAwesome;
    font-size: 14pt;
    line-height: 1;
    vertical-align: -2px;
    content: "\f05a";
}

.alert-success:not(:has(> .alert-icon))::before {
    content: "\f058";
}

.alert-danger:not(:has(> .alert-icon))::before,
.alert-error:not(:has(> .alert-icon))::before {
    content: "\f06a";
}

.alert:empty::before {
    display: none;
}

.alert > :last-child {
    margin-bottom: 0;
}

.alert a:not(.btn),
.alert .alert-link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

/* pro/style.css colore tous les liens des alertes (.alert-info a…), boutons compris */
.alert .btn-primary,
.alert .btn-success,
.alert .btn-info,
.alert .btn-orange,
.alert .btn-primary-pro,
.alert .btn-dark,
.alert .btn-blue,
.alert .btn-pro {
    color: var(--white);
    text-decoration: none;
}

.alert .btn-secondary,
.alert .btn-outline-primary,
.alert .btn-outline-info,
.alert .btn-outline-secondary,
.alert .btn-light,
.alert .btn-ghost {
    color: var(--bleu-nuit);
    text-decoration: none;
}

.alert-danger {
    background-color: var(--error-bg);
    color: var(--error-text);
}

.alert-danger h4,
.alert-danger .alert-icon {
    color: var(--error-text);
}

.alert-dismissible {
    padding-right: 48px;
}

.alert-dismissible .close {
    padding: 12px 16px;
    color: inherit;
}

/* ==========================================================================
   4. Listes — tableaux et list-group partagent la même apparence
   ========================================================================== */

.table {
    width: 100%;
    margin-bottom: 0;
    color: var(--bleu-nuit);
    font-size: 11pt;
    background-color: transparent;
    border-collapse: separate;
    border-spacing: 0;
}

.table th,
.table td {
    padding: 14px 16px;
    vertical-align: middle;
    border: 0;
    border-bottom: 1px solid var(--bg-gris-nuage);
}

.table thead th,
.table .thead-light th,
.table .thead-dark th,
.table .thead-default th {
    font-family: var(--font-title);
    font-size: 10pt;
    font-weight: 600;
    color: var(--bleu-pro);
    background-color: var(--bg-bleu-pale);
    border: 0;
}

.table thead th:first-child {
    border-radius: var(--radius-btn) 0 0 var(--radius-btn);
}

.table thead th:last-child {
    border-radius: 0 var(--radius-btn) var(--radius-btn) 0;
}

.table thead th:only-child {
    border-radius: var(--radius-btn);
}

.table tbody tr:last-child > td,
.table tbody tr:last-child > th {
    border-bottom: 0;
}

.table tbody tr {
    transition: background-color 0.2s ease;
}

.table tbody tr:hover {
    background-color: var(--bg-blanc-casse);
}

/* Tableaux défilants en mobile : pas de césure dans les cellules */
@media (max-width: 575.98px) {
    .table-responsive-sm thead th,
    .table-responsive-sm td,
    .table-responsive thead th,
    .table-responsive td,
    .table-sm-responsive thead th,
    .table-sm-responsive td {
        white-space: nowrap;
    }
}

/* Variantes Bootstrap ramenées au modèle unique */
.table-sm th,
.table-sm td {
    padding: 8px 12px;
}

.table-bordered,
.table-bordered th,
.table-bordered td {
    border: 0;
}

.table-bordered tbody th,
.table-bordered td {
    border-bottom: 1px solid var(--bg-gris-nuage);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

.table-hover tbody tr:hover {
    background-color: var(--bg-blanc-casse);
}

/* États de ligne */
.table .table-success,
.table .table-success > td,
.table .table-success > th {
    background-color: var(--success-bg);
}

.table .table-danger,
.table .table-danger > td,
.table .table-danger > th {
    background-color: var(--error-bg);
}

.table .table-warning,
.table .table-warning > td,
.table .table-warning > th,
.table .table-info,
.table .table-info > td,
.table .table-info > th {
    background-color: var(--bg-jaune-pale);
}

.table .table-beige,
.table .table-beige > td,
.table .table-beige > th {
    background-color: var(--bg-beige);
}

.table .table-secondary,
.table .table-secondary > td,
.table .table-secondary > th,
.table .table-light,
.table .table-light > td,
.table .table-light > th {
    background-color: var(--bg-gris-nuage);
}

/* list-group : mêmes séparateurs et survol que les lignes de tableau */
.list-group {
    padding-left: 0;
    border-radius: 0;
}

.list-group-item {
    padding: 14px 16px;
    margin-bottom: 0;
    color: var(--bleu-nuit);
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--bg-gris-nuage);
    border-radius: 0;
}

.list-group-item:first-child,
.list-group-item:last-child {
    border-radius: 0;
}

.list-group-item:last-child {
    border-bottom: 0;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    color: var(--bleu-nuit);
    background-color: var(--bg-blanc-casse);
}

.list-group-item.active {
    color: var(--orange);
    background-color: var(--bg-beige);
    border-color: var(--bg-gris-nuage);
}

.list-group-flush .list-group-item {
    border-right: 0;
    border-left: 0;
}

/* Listes à puces de contenu */
.card ul:not([class]) > li::marker,
.alert ul:not([class]) > li::marker {
    color: var(--orange);
}

/* ==========================================================================
   5. Boutons — variantes Bootstrap / legacy alignées sur la charte
   ========================================================================== */

.btn {
    white-space: normal;
}

.btn:focus,
.btn.focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(238, 120, 0, 0.25);
}

/* Principal orange */
.btn-success,
.btn-info,
.btn-orange,
.btn-outline-success {
    background-color: var(--orange);
    color: var(--white);
    border: 0;
    box-shadow: var(--shadow-soft);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-orange:hover,
.btn-outline-success:hover,
.btn-outline-success:focus {
    background-color: #DE6F00;
    color: var(--white);
    box-shadow: var(--shadow-glow-orange);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: #DE6F00;
    color: var(--white);
}

/* Principal bleu pro */
.btn-dark,
.btn-blue,
.btn-pro {
    background-color: var(--bleu-nuit);
    color: var(--white);
    border: 0;
    box-shadow: var(--shadow-soft);
}

.btn-dark:hover,
.btn-blue:hover,
.btn-pro:hover {
    color: var(--white);
    box-shadow: var(--shadow-glow-bleu);
    transform: translateY(-2px);
}

/* Secondaire (contour) */
.btn-outline-primary,
.btn-outline-info,
.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-warning,
.btn-light {
    background-color: transparent;
    color: var(--bleu-nuit);
    border: 1px solid var(--gris-clair);
}

.btn-secondary:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-secondary:hover,
.btn-outline-dark:hover,
.btn-outline-warning:hover,
.btn-light:hover {
    background-color: var(--bg-blanc-casse);
    border-color: var(--orange);
    color: var(--orange);
}

.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.btn-group-toggle .btn.active {
    background-color: var(--bg-beige);
    border-color: var(--orange);
    color: var(--orange);
}

/* Danger */
.btn-danger,
.btn-outline-danger {
    background-color: var(--error-bg);
    color: var(--error-text);
    border: 1px solid transparent;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: var(--error-text);
    color: var(--white);
}

.btn-warning {
    background-color: var(--jaune-pro);
    color: var(--bleu-nuit);
    border: 0;
}

.btn-warning:hover {
    color: var(--bleu-nuit);
    box-shadow: var(--shadow-soft);
    transform: translateY(-2px);
}

/* Lien */
.btn-link {
    padding: 6px 8px;
    color: var(--orange);
    background-color: transparent;
    box-shadow: none;
}

.btn-link:hover,
.btn-link:focus {
    color: var(--bleu-pro);
    text-decoration: underline;
    box-shadow: none;
}

.btn-rounded,
.btn-secondary-rounded {
    border-radius: var(--radius-btn);
}

/* Icône à droite du libellé des CTA : glisse au survol */
.btn .btn-icon {
    margin-left: 10px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.btn:hover .btn-icon {
    transform: translateX(4px);
}

/* Icône à gauche du libellé (boutons Retour) : la flèche part vers la gauche au survol */
.btn .btn-icon.btn-icon-left {
    margin-right: 10px;
    margin-left: 0;
}

.btn:hover .btn-icon.btn-icon-left {
    transform: translateX(-4px);
}

/* Repli pour les CTA générés en PHP ou en JS, sans icône dans leur balisage */
.btn:is(.btn-primary, .btn-primary-pro, .btn-success, .btn-info, .btn-orange, .btn-secondary, .btn-outline-primary, .btn-outline-info, .btn-outline-secondary):not(.dropdown-toggle, .close, [data-dismiss], .btn-filter, .btn-link, .btn-no-icon, :has(.fa, .btn-icon, svg, img))::after {
    display: inline-block;
    margin-left: 10px;
    font-family: FontAwesome;
    font-size: 0.9em;
    line-height: 1;
    content: "\f061";
    transition: transform 0.3s ease;
}

.btn:is(.btn-primary, .btn-primary-pro, .btn-success, .btn-info, .btn-orange, .btn-secondary, .btn-outline-primary, .btn-outline-info, .btn-outline-secondary):not(.dropdown-toggle, .close, [data-dismiss], .btn-filter, .btn-link, .btn-no-icon, :has(.fa, .btn-icon, svg, img)):hover::after {
    transform: translateX(4px);
}

/* Tailles (la charte impose un padding unique qui écrase .btn-sm/.btn-lg de Bootstrap) */
.btn-sm,
.btn-group-sm > .btn {
    padding: 8px 16px;
    font-size: 10pt;
    border-radius: 12px;
}

.btn-xs {
    padding: 4px 10px;
    font-size: 9pt;
    border-radius: 10px;
}

.btn-lg,
.btn-group-lg > .btn {
    padding: 16px 32px;
    font-size: 13pt;
}

.btn-block {
    display: flex;
    width: 100%;
    margin-right: 0;
}

/* Les marges externes de la charte cassent les groupes et les champs combinés */
.btn-group > .btn,
.btn-group-vertical > .btn,
.input-group .btn,
.input-group-append .btn,
.input-group-prepend .btn,
.dropdown-toggle,
.modal-header .close,
.alert .close {
    margin-right: 0;
    margin-bottom: 0;
}

/* ==========================================================================
   6. Badges
   ========================================================================== */

.badge-primary,
.badge-warning {
    background-color: var(--bg-beige);
    color: var(--orange);
    border: 1px solid rgba(238, 120, 0, 0.25);
}

.badge-info {
    background-color: var(--bg-jaune-pale);
    color: var(--bleu-nuit);
}

.badge-secondary,
.badge-light,
.badge-dark {
    background-color: var(--bg-gris-nuage);
    color: var(--bleu-nuit);
}

.badge-danger,
.badge-error {
    background-color: var(--error-bg);
    color: var(--error-text);
}

.badge-pill {
    border-radius: var(--radius-badge);
}

/* Badges cliquables sans href (ouverture de modale) : Bootstrap leur fait hériter la couleur du parent */
a.badge-primary:not([href]):not([tabindex]),
a.badge-warning:not([href]):not([tabindex]) {
    color: var(--orange);
    cursor: pointer;
}

a.badge:hover,
a.badge:focus {
    text-decoration: none;
    filter: brightness(0.97);
}

/* Compteurs dans la navigation, boutons et onglets : pas de marge externe */
#topnav .badge,
.btn .badge,
.nav .badge,
.list-group-item .badge,
td .badge {
    margin-right: 0;
    margin-bottom: 0;
}

/* ==========================================================================
   7. Utilitaires (remplacent le style inline des templates)
   Bootstrap 4.0 ne fournit pas ces classes.
   ========================================================================== */

.text-decoration-none { text-decoration: none !important; }
.text-underline { text-decoration: underline !important; }
.text-inherit { color: inherit !important; }
.text-success-charte { color: var(--success-text) !important; }
.text-error { color: var(--error-text) !important; }

.fs-9 { font-size: 9pt !important; }
.fs-10 { font-size: 10pt !important; }
.fs-11 { font-size: 11pt !important; }
.fs-12 { font-size: 12pt !important; }
.fs-14 { font-size: 14pt !important; }
.fs-18 { font-size: 18pt !important; }
.fs-40 { font-size: 40pt !important; }

.font-weight-medium { font-weight: 500 !important; }
.fw-bold { font-weight: 700 !important; } /* classe Bootstrap 5 déjà utilisée dans certains templates */

.text-clamp-2 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cursor-pointer { cursor: pointer; }
.cursor-help { cursor: help; }
.cursor-crosshair { cursor: crosshair; }

.text-jaune-pro { color: var(--jaune-pro) !important; }
.bg-bleu-pro { background-color: var(--bleu-pro) !important; }
.bg-blanc-casse { background-color: var(--bg-blanc-casse) !important; }
.bg-beige { background-color: var(--bg-beige) !important; }
.rounded-card { border-radius: var(--radius-card) !important; }

.w-fit { width: fit-content !important; }
.h-fit { height: fit-content !important; }
.h-10vh { height: 10vh !important; }
.mw-400 { max-width: 400px; }
.mw-600 { max-width: 600px; }
.mw-700 { max-width: 700px; }
.mw-800 { max-width: 800px; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.object-fit-cover { object-fit: cover; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 16px; }
.gap-5 { gap: 32px; }

/* Vignettes d'aperçu (logos, images de réalisation, visuels d'accueil) */
.thumb-preview {
    max-width: 120px;
    max-height: 90px;
}

.icon-20 {
    width: 20px;
    height: 20px;
}

.icon-30 {
    width: 30px;
    height: 30px;
}

.icon-80 {
    width: 80px;
    height: 80px;
}

/* Petite icône blanche sur pastille orange (ex. devis sécurisé) */
.icon-round-orange {
    padding: 4px 6px;
    color: var(--white);
    background-color: var(--orange);
    border-radius: 50%;
}

/* Bandeau bleu en tête de page, chevauché par la carte qui suit (.hero-overlap) */
.hero-band {
    padding-bottom: 100px;
    background-color: var(--bleu-pro);
}

.hero-overlap {
    z-index: 2;
    margin-top: -80px;
}

/* Barre d'actions collée en bas des longs formulaires */
.sticky-actions {
    background-color: rgba(255, 255, 255, 0.8);
    border-top: 1px solid var(--gris-clair);
    backdrop-filter: blur(4px);
}

/* Séparateur de groupe de lignes dans un tableau */
.table .table-group-start {
    border-top: 2px solid var(--gris-clair);
}

.checkbox-charte {
    width: 18px;
    height: 18px;
    accent-color: var(--orange);
}

/* Pictos des pages (tableau de bord, performances, commandes…) */
.picto-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 24px;
    font-size: 18pt;
    line-height: 1;
    color: var(--bleu-pro);
    text-align: center;
}

.picto-icon.picto-sm {
    width: 20px;
    font-size: 15pt;
}

/* Pastille carrée d'icône (pages offres, parrainage) */
.icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
    color: var(--white);
    background-color: var(--orange);
    border-radius: 10px;
}

.icon-tile-grey {
    background-color: var(--gris-bleu);
}

/* Grande pastille ronde d'illustration (pages parrainage / fidélité) */
.icon-circle-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    font-size: 36pt;
    color: var(--orange);
    background-color: var(--bg-beige);
    border-radius: 50%;
}

/* Carte « bulle » posée en décalé sur un visuel (desktop) */
.card-floating-badge {
    top: -80px;
    left: 160px;
    z-index: 10;
    --card-padding: 12px 20px;
}

/* Pastille ronde numérotée (étapes) */
.step-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    color: var(--white);
    background-color: var(--orange);
    border-radius: 50%;
}

.step-circle-sm {
    width: 30px;
    height: 30px;
}

.step-circle-muted {
    color: var(--bleu-nuit);
    background-color: var(--bg-gris-nuage);
}

/* Barres de progression */
.progress {
    height: 10px;
    background-color: var(--bg-gris-nuage);
    border-radius: var(--radius-badge);
}

.progress-bar {
    background-color: var(--orange);
    border-radius: var(--radius-badge);
}

/* ==========================================================================
   8. En-tête de page commun (pro/share/titreespacepro.tpl)
   ========================================================================== */

#pageTitle.titre-page {
    position: relative;
    width: 100%;
}

#pageTitle.titre-page h1 {
    margin-right: max(5%, 44px);
    margin-left: max(5%, 44px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#pageTitle.titre-page #retourButton {
    position: absolute;
    left: 3%;
    display: inline-block;
    padding: 5px;
    font-size: 20px;
    cursor: pointer;
    background-color: transparent;
}

/* En-tête et menu principal (générés dans docs/HTML.php) */
#topnav {
    background-color: var(--bleu-nuit);
}

#topnav .logo.title,
#topnav .logo.title > span {
    color: var(--bleu-nuit) !important;
}

#topnav .navigation-menu > li .submenu li a {
    color: var(--bleu-nuit);
}

@media (min-width: 992px) {
    #topnav .navigation-menu > li .submenu {
        padding: 8px 0;
        border: 0;
        border-radius: var(--radius-btn);
        box-shadow: var(--shadow-hover);
    }
}

#topnav .navigation-menu > li .submenu li a:hover {
    color: var(--orange);
}

/* Éléments de la barre d'en-tête (hors logo) en bleu */
#topnav .logo.title span span,
#topnav .navbar-topbar .nav-link,
#topnav .navbar-topbar .nav-link strong,
#topnav .notification-list .noti-icon {
    color: var(--bleu-nuit) !important;
}

#topnav .navbar-topbar .nav-link:hover,
#topnav .navbar-topbar .nav-link:hover .noti-icon {
    color: var(--orange) !important;
}

#topnav .navbar-toggle span,
#topnav .navbar-toggle:hover span,
#topnav .navbar-toggle:focus span {
    background-color: var(--bleu-nuit);
}

/* Compteur de messages non lus */
#topnav .notification-list .badge {
    top: 14px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 8pt;
    line-height: 18px;
    color: var(--white);
    background-color: var(--orange);
    border: 0;
    justify-content: center;
}

/* ==========================================================================
   8 bis. Onglets (menus de Paramétrer le site, Description de l'entreprise…)
   Remplace les anciens .nav-tabs de Bootstrap
   ========================================================================== */

.nav-onglets {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    max-width: 100%;
    padding: 8px;
    margin: 24px 0 16px;
    overflow-x: auto;
    list-style: none;
    background-color: var(--white);
    border: 0;
    border-radius: var(--radius-btn);
    box-shadow: var(--shadow-soft);
    scrollbar-width: none;
}

.nav-onglets::-webkit-scrollbar {
    display: none;
}

/* Menu sans onglet (ex. clients sans catégorie) */
.nav-onglets:not(:has(*)) {
    display: none;
}

.nav-onglets > li {
    display: flex;
}

.nav-onglets .nav-link,
.nav-onglets > li > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    margin: 0;
    font-family: var(--font-title);
    font-size: 12pt;
    font-weight: 600;
    color: var(--gris-moyen);
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-btn);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-onglets .nav-link:hover,
.nav-onglets .nav-link:focus,
.nav-onglets > li > a:hover {
    color: var(--bleu-nuit);
    background-color: var(--bg-gris-nuage);
}

.nav-onglets .nav-link.active,
.nav-onglets .nav-item.active > .nav-link,
.nav-onglets .active > .nav-link,
.nav-onglets > li.active > a {
    color: var(--white);
    background-color: var(--bleu-nuit);
    border: 0;
}

/* Sous-onglets : soulignement orange, plus discrets */
.nav-onglets.nav-onglets-sub {
    padding: 0;
    margin-top: 0;
    background-color: transparent;
    border-bottom: 1px solid var(--bg-gris-nuage);
    border-radius: 0;
    box-shadow: none;
}

.nav-onglets.nav-onglets-sub .nav-link {
    padding: 12px 18px;
    font-size: 11pt;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.nav-onglets.nav-onglets-sub .nav-link:hover {
    background-color: transparent;
}

.nav-onglets.nav-onglets-sub .nav-link.active {
    color: var(--orange);
    background-color: transparent;
    border-bottom-color: var(--orange);
}

/* Compteurs dans les onglets (questions…) */
.nav-onglets .label,
.nav-onglets .badge {
    padding: 2px 8px;
    margin: 0;
    font-size: 8.5pt;
    color: inherit;
    background-color: rgba(128, 149, 159, 0.2);
    border-radius: var(--radius-badge);
}

/* ==========================================================================
   9. Styles propres à certaines pages (anciennes balises <style> des .tpl)
   ========================================================================== */

/* pro/realisationannuaire.tpl */
.realisation-annuaire .photo img {
    max-width: 87px;
    max-height: 65px;
}

/* pro/articleprofessionnel.tpl — fenêtre « code source » de TinyMCE */
.mce-floatpanel[aria-label="Source code"] {
    top: 50% !important;
    left: 50% !important;
    width: 80% !important;
    transform: translate(-50%, -50%);
}

/* pro/page/pagesEnCours.tpl */
.delete-button {
    color: inherit;
    cursor: pointer;
    background: none;
    border: none;
}

.delete-button:hover {
    color: var(--orange);
}

/* pro/infoprofessionnel.tpl */
.info-professionnel form tr th {
    font-size: 12pt;
}

.info-professionnel .table tr td:first-child {
    font-size: 11pt;
    font-weight: 600;
}

.info-professionnel form select {
    height: 30px;
    padding: 4px 6px;
    margin-bottom: 5px;
}

.info-professionnel form select option {
    height: 30px;
}

/* pro/progestionpropaldetaildevis.tpl — assistant IA */
.rag-chat-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 120px;
    max-height: 340px;
    padding: 12px;
    overflow-y: auto;
    background: var(--bg-gris-nuage);
    border-radius: var(--radius-btn);
}

.rag-bubble { display: flex; align-items: flex-end; gap: 6px; }
.rag-bubble.ai { justify-content: flex-start; }
.rag-bubble.user { justify-content: flex-end; }
.rag-bubble.system { justify-content: center; }

.rag-bubble-content {
    max-width: 80%;
    padding: 8px 12px;
    font-size: 10.5pt;
    line-height: 1.4;
    word-break: break-word;
    border-radius: 16px;
}

.rag-bubble.ai .rag-bubble-content { background: var(--bg-bleu-pale); border-bottom-left-radius: 4px; }
.rag-bubble.user .rag-bubble-content { background: var(--success-bg); border-bottom-right-radius: 4px; }
.rag-bubble.system .rag-bubble-content {
    font-size: 10pt;
    font-style: italic;
    color: var(--gris-moyen);
    text-align: center;
    background: transparent;
}
.rag-bubble.error .rag-bubble-content { background: var(--error-bg); color: var(--error-text); }

.rag-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    font-size: 9pt;
    border-radius: 50%;
}

.rag-avatar.ai { background: var(--bleu-pro); color: var(--white); }
.rag-avatar.user { background: var(--success-text); color: var(--white); }

.rag-loader-dots span {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 2px;
    background: var(--bleu-pro);
    border-radius: 50%;
    animation: rag-bounce 1.2s infinite;
}

.rag-loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.rag-loader-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes rag-bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* pro/cahierdescharges/index.tpl — choix du style de site */
#stylesite ul {
    list-style-type: none;
}

#stylesite li {
    display: inline-block;
}

#stylesite input[type="radio"] {
    display: none;
}

#stylesite label {
    position: relative;
    display: block;
    padding: 10px;
    margin: 10px;
    cursor: pointer;
    border: 1px solid var(--white);
}

#stylesite label::before {
    position: absolute;
    top: -10px;
    left: -10px;
    display: block;
    width: 25px;
    height: 25px;
    line-height: 22px;
    color: var(--white);
    text-align: center;
    content: " ";
    background-color: var(--white);
    border: 1px solid var(--bleu-pro);
    border-radius: 50%;
    transition-duration: 0.4s;
    transform: scale(0);
}

#stylesite label img {
    width: 10vw;
    height: auto;
    transition-duration: 0.2s;
    transform-origin: 50% 50%;
}

#stylesite :checked + label {
    border: 2px solid var(--bleu-pro);
}

#stylesite :checked + label::before {
    content: "\2713";
    background-color: var(--bleu-pro);
    transform: scale(1);
}

#stylesite :checked + label img {
    z-index: -1;
    box-shadow: 0 0 5px var(--bleu-pro);
    transform: scale(0.9);
}

/* pro/parrainage/invite.tpl */
.team-member {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
}

/* pro/mybusiness/analyse.tpl, pro/performance/details_site.tpl */
.zoom-animation {
    animation: zoomInOut 1s infinite;
}

@keyframes zoomInOut {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* pro/rdv/planifier.tpl — disponibilités du client sur la semaine */
.planning-semaine {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.planning-creneau {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 2px;
    font-size: 9pt;
    font-weight: 700;
    color: var(--orange);
    background-color: var(--bg-beige);
    border-radius: 8px;
}

.planning-creneau-vide {
    background-color: var(--bg-gris-nuage);
}

/* Champ sans bordure intégré dans une carte */
.input-ghost {
    color: var(--bleu-nuit);
    background: transparent;
    border: 0;
    outline: none;
}

/* ==========================================================================
   Messagerie (templates/front/messagerie) — ce fichier n'est chargé qu'en contexte pro :
   l'espace particulier garde css/messagerie.css seul
   ========================================================================== */

/* static : le JS de la page positionne ce bandeau avec style.top, sans effet ici */
#messagerieTitle {
    position: static;
    background-color: transparent;
    box-shadow: none;
}

#messagerieTitle h4 {
    margin: 8px max(5%, 44px) 0;
    overflow: hidden;
    font-size: clamp(24pt, 4vw, 36pt);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* div#… : css/messagerie.css est chargé après ce fichier, avec les mêmes sélecteurs d'id */
div#filterContainer {
    display: flex;
    justify-content: center;
    padding-top: 0;
    margin: 8px 0 0;
}

div#filterContainer > .btn-filter {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin-bottom: 0;
}

#contentMessagerie.messagerie-content-pro,
#contentMessagerie.messagerie-content-pro-conversation {
    padding: 0 15px;
}

/* Liste des conversations : une carte, des lignes séparées comme les autres listes */
#contentMessagerie .msg-contact {
    padding: 8px 0 !important;
    overflow: hidden;
    background-color: var(--white);
    border: 0;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-soft);
}

#contentMessagerie .discutionLine {
    position: relative;
    border-bottom: 1px solid var(--bg-gris-nuage);
}

#contentMessagerie .discutionLine:last-child {
    border-bottom: 0;
}

#contentMessagerie .msg-select-contact {
    padding: 16px 64px 16px 16px !important;
    border-bottom: 0;
    border-radius: 0;
    transition: background-color 0.2s ease;
}

#contentMessagerie .discutionLine::after {
    position: absolute;
    top: 50%;
    right: 24px;
    font-family: FontAwesome;
    font-size: 14pt;
    line-height: 1;
    color: var(--orange);
    pointer-events: none;
    content: "\f061";
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

#contentMessagerie .discutionLine:hover::after {
    transform: translate(6px, -50%);
}

/* Survol : fond blanc cassé au lieu du bloc orange de css/messagerie.css */
#contentMessagerie .discutionLine:hover a,
#contentMessagerie .discutionLine:hover h5,
#contentMessagerie .discutionLine:hover p,
#contentMessagerie .nav-pills .nav-link.active,
#contentMessagerie .nav-link.active {
    color: inherit !important;
    background-color: transparent;
}

#contentMessagerie .discutionLine:hover .msg-select-contact {
    background-color: var(--bg-blanc-casse);
}

#contentMessagerie .discutionLine:hover img[src$=".svg"]:not(.messageTypeBadge) {
    filter: none;
}

#contentMessagerie .media {
    align-items: center;
    padding-top: 0 !important;
}

#contentMessagerie .media img#avatarImage,
#contentMessagerie .avatar-container > img:first-child {
    width: 48px;
    height: 48px;
    object-fit: cover;
}

#contentMessagerie .avatar-container {
    margin-left: 0 !important;
}

#contentMessagerie .avatar-container .messageTypeBadge {
    right: 8px;
    width: 22px;
    height: 22px;
    background-color: var(--white);
    border-width: 1px;
}

#contentMessagerie .unread-count {
    top: -4px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 8pt;
    line-height: 16px;
}

#contentMessagerie .msg-contact-nom {
    margin-bottom: 2px;
    font-family: var(--font-title);
    font-size: 12pt;
    font-weight: 600;
    color: var(--bleu-nuit);
}

#contentMessagerie .msg-apercu {
    font-size: 10pt;
    color: var(--gris-moyen);
}

#contentMessagerie .msg-date {
    top: 16px;
    right: 64px;
    font-size: 9pt;
    color: var(--gris-moyen);
}

/* Fil de discussion */
#contentMessagerie #messageList {
    padding: 24px !important;
}

#contentMessagerie #messageList .mb-5 {
    margin-bottom: 32px !important;
}

#contentMessagerie .msg-container {
    max-width: 75%;
    padding: 12px 16px;
    line-height: var(--lh-normal);
    border: 0;
}

#contentMessagerie .msg-body {
    margin-left: 10px !important;
    color: var(--bleu-nuit);
    background-color: var(--bg-gris-nuage);
    border-radius: 16px 16px 16px 4px;
}

#contentMessagerie .msg-body-send {
    margin-right: 0 !important;
    color: var(--bleu-nuit);
    background-color: var(--bg-beige);
    border-radius: 16px 16px 4px 16px;
}

#contentMessagerie .msg-time-container {
    font-size: 9pt;
    color: var(--gris-moyen);
}

#contentMessagerie .automatic-message::before,
#contentMessagerie .automatic-message::after {
    display: none;
}

#contentMessagerie .auto-msg-body {
    padding: 12px 16px;
    color: var(--bleu-nuit);
    background-color: var(--bg-bleu-pale) !important;
    border-radius: var(--radius-btn);
}

/* Zone de saisie */
#contentMessagerie .input-message {
    overflow: hidden;
    background-color: var(--white);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
}

#contentMessagerie .input-message label,
#contentMessagerie .input-message button {
    margin: 0;
    border-radius: 0 !important;
}

#contentMessagerie .input-message label .fa,
#contentMessagerie .input-message button .fa {
    font-size: 16pt;
}

#contentMessagerie .input-message textarea {
    padding: 16px;
    border-radius: 0;
}

#contentMessagerie .input-message textarea:focus {
    border: 0;
}

@media (max-width: 768px) {
    #contentMessagerie .msg-select-contact {
        padding: 12px 48px 12px 12px !important;
    }

    #contentMessagerie .discutionLine::after {
        right: 16px;
    }

    #contentMessagerie .msg-date {
        position: static;
        margin: -8px 0 8px 72px;
    }

    #contentMessagerie #messageList {
        padding: 16px !important;
    }

    #contentMessagerie .msg-container {
        max-width: 85%;
    }
}

/* ==========================================================================
   Ajustements mobile
   ========================================================================== */

@media (max-width: 768px) {
    /* Titres de page : sur plusieurs lignes plutôt que tronqués */
    #pageTitle.titre-page h1,
    #messagerieTitle h4 {
        margin: 8px 40px 0;
        font-size: 15pt;
        line-height: 1.25;
        text-align: center;
        white-space: normal;
    }

    #pageTitle.titre-page #retourButton,
    #messagerieTitle #retourButton {
        left: 8px;
    }

    /* Onglets : plus compacts, la barre défile */
    .nav-onglets {
        margin-top: 16px;
    }

    .nav-onglets .nav-link,
    .nav-onglets > li > a {
        padding: 10px 16px;
        font-size: 10.5pt;
    }

    /* Filtres (devis, messagerie…) : une bande qui défile, centrée quand tout tient */
    :has(> .btn-filter) {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        scrollbar-width: none;
    }

    :has(> .btn-filter)::-webkit-scrollbar {
        display: none;
    }

    :has(> .btn-filter) > :first-child {
        margin-left: auto;
    }

    :has(> .btn-filter) > :last-child {
        margin-right: auto;
    }

    .btn-filter {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Interrupteurs (Mes services…) : la colonne col-2 est trop étroite pour le switch de 60 px */
    .row > .col-2:has(> .switch) {
        flex: 0 0 76px;
        max-width: 76px;
        padding-left: 8px;
    }

    .row:has(> .col-2 > .switch) > .col-10 {
        flex: 1 1 0;
        max-width: none;
        min-width: 0;
    }

    /* Alertes */
    .alert {
        padding: 12px 16px;
        font-size: 10.5pt;
    }

    .alert-icon {
        margin-right: 12px;
        font-size: 14pt;
    }
}

@media (max-width: 576px) {
    /* Les espacements Bootstrap de niveau 5 (48 px) écrasent le contenu sur petit écran */
    .p-5 { padding: 24px !important; }
    .px-5 { padding-right: 24px !important; padding-left: 24px !important; }
    .py-5 { padding-top: 24px !important; padding-bottom: 24px !important; }
    .pt-5 { padding-top: 24px !important; }
    .pb-5 { padding-bottom: 24px !important; }
    .my-5 { margin-top: 24px !important; margin-bottom: 24px !important; }
    .mt-5 { margin-top: 24px !important; }
    .mb-5 { margin-bottom: 24px !important; }

    .hero-band {
        padding-bottom: 80px;
    }

    .hero-overlap {
        margin-top: -64px;
    }
}

/* Description d'une demande de devis (templates/devis/detail.tpl) : 5 lignes puis « Voir plus » */
.description-text {
    margin-bottom: 8px;
    white-space: pre-line;
}

.description-text.is-clamped {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

/* Popup demande de devis : bloc « Positionnez-vous » mis en avant au-dessus du détail (pro/devis/bloc-positionnement.tpl) */
.bloc-positionnement {
    margin-bottom: 16px;
    padding: 16px;
    border: 2px solid var(--orange);
    border-radius: 12px;
    background-color: var(--bg-beige);
    text-align: center;
}

.bloc-positionnement-titre {
    margin-bottom: 8px;
    color: var(--bleu-nuit);
    font-family: var(--font-title);
    font-size: 1.1rem;
    font-weight: 700;
}

/* pro/style.css (Adminto) étire tout lien enfant direct d'un .d-flex ; pas les boutons */
.d-flex > a.btn:not(.btn-block) {
    display: inline-flex;
    width: auto;
}

/* Détail d'un devis (pro/devis/show.tpl) : pas de doublon quand le bloc Suivi propose déjà le détail */
.row:has(.carte-suivi-devis [data-target^="#devis_modal_"]) .btn-detail-demande {
    display: none;
}

/* Tableau de bord : rendez-vous à venir, une ligne par rendez-vous en desktop */
.rdv-a-venir .rdv-ligne {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    align-items: center;
}

.rdv-a-venir .rdv-quand .badge {
    margin-left: 8px;
}

.rdv-a-venir .rdv-action {
    grid-row: 1;
    grid-column: 2;
}

.rdv-a-venir .rdv-qui,
.rdv-a-venir .rdv-ou,
.rdv-a-venir .rdv-quoi {
    grid-column: 1 / -1;
}

@media (min-width: 992px) {
    .rdv-a-venir .rdv-ligne {
        grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr) auto;
    }

    .rdv-a-venir .rdv-quand .badge {
        display: table;
        margin: 4px 0 0;
    }

    .rdv-a-venir .rdv-action,
    .rdv-a-venir .rdv-qui,
    .rdv-a-venir .rdv-ou,
    .rdv-a-venir .rdv-quoi {
        grid-row: auto;
        grid-column: auto;
    }
}

/* ==========================================================================
   Calendrier (datepicker jQuery UI : propositions de rendez-vous…)
   ========================================================================== */

.ui-datepicker {
    z-index: 1060 !important; /* au-dessus des modales Bootstrap */
    width: 300px;
    padding: 16px;
    font-family: var(--font-body);
    color: var(--bleu-nuit);
    background: var(--white);
    border: 0;
    border-radius: var(--radius-card);
    box-shadow: 0 12px 30px rgba(26, 32, 44, 0.12);
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: 4px 0 12px;
    color: var(--bleu-nuit);
    background: transparent;
    border: 0;
    border-radius: 0;
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 36px;
    font-family: var(--font-title);
    font-size: 12pt;
    font-weight: 600;
    line-height: 32px;
    text-align: center;
}

/* Flèches mois précédent / suivant : icônes Font Awesome à la place des sprites jQuery UI */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 4px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: var(--bg-gris-nuage);
    border: 0;
    border-radius: 50%;
}

.ui-datepicker .ui-datepicker-prev { left: 0; }
.ui-datepicker .ui-datepicker-next { right: 0; }

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    display: none;
}

.ui-datepicker .ui-datepicker-prev::after,
.ui-datepicker .ui-datepicker-next::after {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: FontAwesome;
    font-size: 11pt;
    color: var(--bleu-nuit);
    transform: translate(-50%, -50%);
}

.ui-datepicker .ui-datepicker-prev::after { content: "\f053"; }
.ui-datepicker .ui-datepicker-next::after { content: "\f054"; }

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    top: 4px;
    background: var(--bg-beige);
    border: 0;
}

.ui-datepicker .ui-datepicker-prev-hover { left: 0; }
.ui-datepicker .ui-datepicker-next-hover { right: 0; }

.ui-datepicker .ui-datepicker-prev.ui-state-disabled,
.ui-datepicker .ui-datepicker-next.ui-state-disabled {
    opacity: 0.35;
}

.ui-datepicker table {
    margin: 0;
    font-size: 10.5pt;
    border-collapse: separate;
    border-spacing: 2px;
}

.ui-datepicker th {
    padding: 6px 0;
    font-size: 9pt;
    font-weight: 600;
    color: var(--gris-moyen);
    text-transform: uppercase;
}

.ui-datepicker td {
    padding: 0;
}

.ui-datepicker td a.ui-state-default,
.ui-datepicker td span.ui-state-default {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0;
    font-weight: 500;
    color: var(--bleu-nuit);
    text-align: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: background-color 0.15s ease;
}

.ui-datepicker td a.ui-state-default:hover,
.ui-datepicker td a.ui-state-hover {
    color: var(--orange);
    background: var(--bg-beige);
    border-color: transparent;
}

.ui-datepicker td a.ui-state-highlight {
    color: var(--orange);
    background: transparent;
    border-color: var(--orange);
}

.ui-datepicker td a.ui-state-active,
.ui-datepicker td a.ui-state-active:hover {
    font-weight: 700;
    color: var(--white);
    background: var(--orange);
    border-color: var(--orange);
}

.ui-datepicker td.ui-state-disabled span.ui-state-default,
.ui-datepicker td.ui-datepicker-unselectable span.ui-state-default {
    color: var(--gris-clair);
    background: transparent;
    opacity: 1;
}

.ui-datepicker .ui-datepicker-buttonpane {
    margin: 8px 0 0;
    padding: 8px 0 0;
    border-color: var(--bg-gris-nuage);
}

/* /pro/rdv/planifier : préférence du client et choix du type de rendez-vous */
.preference-rdv {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 10.5pt;
    color: var(--bleu-nuit);
    background-color: var(--bg-beige);
    border-radius: var(--radius-btn);
}

.preference-rdv-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    font-size: 11pt;
    color: var(--white);
    background-color: var(--orange);
    border-radius: 50%;
}

.preference-rdv-libelle {
    display: block;
    font-family: var(--font-title);
    font-size: 7.5pt;
    font-weight: 700;
    color: var(--orange);
    text-transform: uppercase;
}

.choix-rdv-groupe {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.choix-rdv {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 0;
    font-size: 10.5pt;
    cursor: pointer;
    background-color: var(--white);
    border: 2px solid var(--bg-gris-nuage);
    border-radius: var(--radius-btn);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.choix-rdv input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choix-rdv-icone {
    flex-shrink: 0;
    width: 18px;
    font-size: 12pt;
    color: var(--gris-moyen);
    text-align: center;
}

.choix-rdv .badge {
    padding: 2px 8px;
    font-size: 7.5pt;
}

.choix-rdv:hover {
    border-color: var(--gris-clair);
}

.choix-rdv:has(input:checked),
.choix-rdv-fixe {
    background-color: var(--bg-beige);
    border-color: var(--orange);
}

.choix-rdv:has(input:checked) .choix-rdv-icone,
.choix-rdv-fixe .choix-rdv-icone {
    color: var(--orange);
}

.choix-rdv:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(238, 120, 0, 0.25);
}

@media (max-width: 576px) {
    .choix-rdv-groupe {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Listes déroulantes : menu ouvert aux couleurs de la charte
   (appearance: base-select — Chrome / Edge ; les autres navigateurs gardent la liste native)
   ========================================================================== */
@supports (appearance: base-select) {
    select:not([multiple], [size]:not([size="1"])),
    select:not([multiple], [size]:not([size="1"]))::picker(select) {
        appearance: base-select;
    }

    select:not([multiple], [size]:not([size="1"])) {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        max-width: 100%;
        white-space: nowrap;
        cursor: pointer;
    }

    select:not([multiple], [size]:not([size="1"])) selectedcontent {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* La flèche du menu remplace l'image de fond de l'ancienne feuille (select.form-control) */
    select.form-control:not([multiple], [size]:not([size="1"])) {
        display: flex;
        padding-right: 14px;
        background-image: none;
    }

    select:not([multiple], [size]:not([size="1"]))::picker-icon {
        content: "\f107";
        font-family: FontAwesome;
        font-size: 12pt;
        color: var(--bleu-nuit);
        transition: transform 0.2s ease;
    }

    select:not([multiple], [size]:not([size="1"])):open::picker-icon {
        transform: rotate(180deg);
    }

    select:not([multiple], [size]:not([size="1"])):focus-visible,
    select:not([multiple], [size]:not([size="1"])):open {
        border-color: var(--bleu-pro);
        outline: none;
        box-shadow: 0 0 0 3px rgba(37, 52, 108, 0.12);
    }

    ::picker(select) {
        min-width: anchor-size(width);
        max-height: 320px;
        padding: 6px;
        margin-top: 6px;
        overflow-y: auto;
        font-family: var(--font-body);
        font-size: 11pt;
        color: var(--bleu-nuit);
        background-color: var(--white);
        border: 1px solid var(--bg-gris-nuage);
        border-radius: var(--radius-btn);
        box-shadow: var(--shadow-hover);
    }

    select option {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        color: var(--bleu-nuit);
        background-color: transparent;
        border-radius: 10px;
        cursor: pointer;
    }

    select option:hover,
    select option:focus-visible {
        background-color: var(--bg-beige);
        outline: none;
    }

    select option:checked {
        font-weight: 700;
        color: var(--orange);
        background-color: transparent;
    }

    select option:checked:hover,
    select option:checked:focus-visible {
        background-color: var(--bg-beige);
    }

    select option::checkmark {
        order: 1;
        margin-left: auto;
        color: var(--orange);
    }

    select option:disabled {
        color: var(--gris-clair);
        cursor: default;
    }

    select optgroup {
        padding-top: 6px;
        font-size: 8.5pt;
        font-weight: 700;
        color: var(--gris-moyen);
        text-transform: uppercase;
    }

    select optgroup option {
        font-size: 11pt;
        font-weight: 400;
        text-transform: none;
    }
}