/* ===========================================================================
   Boot loader — overlay plein écran + spinner + écran d'erreur critique
   Affiché uniquement sur cold cache (appLoaderShow). var(--Color*) + fallbacks.
   =========================================================================== */

/* ----- Overlay plein écran ----- */

#app-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
}

/* Spinner — anneau tournant via border-top coloré */
.app-loader__spinner {
    width: 48px;
    height: 48px;
    border: 5px solid rgba(0, 0, 0, 0.08);
    border-top-color: var(--Color3, #0981bc);
    border-radius: 50%;
    animation: app-loader-spin 0.75s linear infinite;
}

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

/* ----- Écran d'erreur critique ----- */

#app-boot-error {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 24px;
}

.app-boot-error__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 360px;
    text-align: center;
}

.app-boot-error__icon {
    width: 52px;
    height: 52px;
    color: var(--Color5, #e15154);
}

.app-boot-error__msg {
    font-family: 'DM Sans', sans-serif;
    font-size: 1em;
    color: #444;
    margin: 0;
    line-height: 1.5;
}

.app-boot-error__btn {
    padding: 11px 28px;
    background: var(--Color2);
    color: var(--dark_text_color, #ffffff);
    border: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.95em;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
    transition: opacity 0.2s;
}

.app-boot-error__btn:hover {
    opacity: 0.88;
}

/* ----- Skeleton base (utilisé par les phases suivantes) ----- */

.app-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: app-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
}

@keyframes app-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ----- Skeleton — grille de cartes (points-vente) ----- */

.app-skeleton--card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.app-skeleton--card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.app-skeleton--card .sk-title {
    height: 20px;
    width: 70%;
    margin-bottom: 16px;
}

.app-skeleton--card .sk-line {
    height: 14px;
    margin-bottom: 10px;
}

.app-skeleton--card .sk-line--md { width: 60%; }
.app-skeleton--card .sk-line--sm { width: 40%; }

.app-skeleton--card .sk-btn {
    height: 40px;
    border-radius: 25px;
    margin-top: 20px;
}

/* ----- Responsive ----- */

@media only screen and (max-width: 767px) {
    .app-loader__spinner {
        width: 40px;
        height: 40px;
        border-width: 4px;
    }

    .app-boot-error__inner {
        gap: 16px;
    }

    .app-boot-error__btn {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .app-loader__spinner {
        width: 44px;
        height: 44px;
    }
}

/* ===========================================================================
   CGDV/CGU — texte libre de la fiche établissement (page /cgdv + popup)
   Le champ source arrive parfois en texte brut ; mis en forme lisible via
   cgdvFormatContent() (lib/views/cgdv-view.js).
   =========================================================================== */

.cgdv-content {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    text-align: left;
}

.cgdv-content p {
    margin: 0 0 1em;
}

.cgdv-content strong {
    color: var(--Color4);
}

.cgdv-content img {
    max-width: 100%;
}

/* ── Contact page ───────────────────────────────────────────────── */

/* Layout : form left / company info right */
.ct-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

/* Short fields: 2 columns on desktop */
.ct-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

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

.ct-form-title {
    color: var(--Color4);
    margin-bottom: 24px;
    font-size: 1.4em;
}

/* Focus ring on all form inputs */
.form-input:focus {
    outline: none;
    border-color: var(--Color3);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--Color3) 15%, transparent);
}

.ct-required {
    color: var(--Color3);
    margin-left: 2px;
}

/* Submit button centered */
.ct-submit-wrap {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

/* Inline feedback */
.ct-feedback {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.95em;
    font-weight: 500;
}

.ct-feedback--success {
    background: color-mix(in srgb, var(--Color6) 12%, white);
    color: var(--Color6);
    border: 1px solid color-mix(in srgb, var(--Color6) 30%, white);
}

.ct-feedback--error {
    background: color-mix(in srgb, var(--Color5) 12%, white);
    color: var(--Color5);
    border: 1px solid color-mix(in srgb, var(--Color5) 30%, white);
}

/* Company info sidebar */
.ct-company-sidebar {
    background: rgba(255, 255, 255, 0.9);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.ct-company-name {
    color: var(--Color4);
    font-size: 1.3em;
    margin: 0 0 16px 0;
}

.ct-company-hours {
    color: #555;
    font-size: 0.9em;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}

.ct-company-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 0.9em;
}

.ct-company-detail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #555;
}

.ct-company-detail-item a {
    color: var(--Color3);
    text-decoration: none;
}

.ct-company-detail-item a:hover {
    text-decoration: underline;
}

/* Cartes 2 canaux de contact */
.ct-channels-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 8px;
}
.ct-channel-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.ct-channel-card h3 {
    color: var(--Color4);
    margin: 0 0 8px;
    font-size: 1.1em;
}
.ct-channel-card p {
    color: #888;
    margin: 0 0 12px;
    font-size: 0.9em;
    line-height: 1.5;
}
.ct-channel-brand {
    color: var(--bright_text_color) !important;
    margin-bottom: 6px !important;
}
.ct-channel-card a {
    display: block;
    color: var(--Color3);
    text-decoration: none;
    margin-top: 4px;
    font-size: 0.95em;
}
.ct-channel-card a:hover {
    text-decoration: underline;
}
@media (max-width: 767px) {
    .ct-channels-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
 * dashboard-pages.css
 * Styles for the Dashboard Pages CMS view (admin-only).
 * Class prefix: dm-pages-*
 * ============================================================================ */

.dm-pages-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 24px;
    padding: 24px;
    align-items: start;
}

.dm-pages-tree {
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    padding: 12px;
}

.dm-pages-editor {
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    padding: 20px;
    min-height: 400px;
}

/* Tree */
.dm-pages-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

/* Bouton icône (engrenage réglages) */
.dm-pages-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 25px;
    background: transparent;
    color: var(--Color3);
    border: 1.5px solid var(--Color3);
    cursor: pointer;
}
.dm-pages-icon-btn:hover {
    background: color-mix(in srgb, var(--Color3) 10%, white);
}
.dm-pages-icon-btn .icon {
    width: 16px;
    height: 16px;
}

/* Vue « Réglages des pages » (panneau droit) */
.dm-pages-settings-header {
    margin-bottom: 16px;
}
.dm-pages-settings-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--Color4);
    margin: 0;
}
.dm-pages-settings-title .icon {
    width: 22px;
    height: 22px;
}
.dm-pages-settings-intro,
.dm-pages-settings-empty {
    color: #666;
    font-size: .9em;
    margin: 0 0 16px;
}
.dm-pages-settings-group {
    margin-bottom: 20px;
}
.dm-pages-settings-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.dm-pages-settings-group-title {
    color: var(--Color4);
    border-left: 4px solid var(--Color3);
    padding-left: 10px;
    margin: 0;
    font-size: 1em;
}
.dm-pages-settings-ident {
    font-family: monospace;
    background: color-mix(in srgb, var(--Color3) 10%, white);
    color: var(--Color4);
    padding: 1px 6px;
    border-radius: 4px;
}
.dm-pages-settings-preview {
    flex: 0 0 auto;
    white-space: nowrap;
}
.dm-pages-settings-item {
    list-style: none;
    margin-bottom: 8px;
}
.dm-pages-settings-badge-wrap {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dm-pages-group {
    margin-bottom: 16px;
}

.dm-pages-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #2c3e50;
    padding: 6px 4px;
    border-bottom: 1px solid #eee;
}

.dm-pages-group-meta {
    margin-left: auto;
    font-size: 11px;
    color: #999;
    font-weight: 400;
}

.dm-pages-tabs {
    list-style: none;
    padding: 0;
    margin: 6px 0 0 0;
}

.dm-pages-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: grab;
    background: #fafbfc;
    margin-bottom: 4px;
    touch-action: pan-y;
}

.dm-pages-row:hover {
    background: #eef3f7;
}

.dm-pages-homepage-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 6px;
    background: #eef3fc;
    border: 1px solid #c5d8f8;
    margin-bottom: 14px;
    cursor: default;
}

.dm-pages-homepage-row:hover {
    background: #dde9fa;
}

.dm-pages-row-root {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 4px;
    background: #f0f4f8;
    margin-bottom: 4px;
    font-style: italic;
    cursor: default;
}

.dm-pages-row-root:hover {
    background: #e6ecf2;
}

.dm-pages-root-icon {
    color: #888;
    user-select: none;
    font-size: 15px;
    flex-shrink: 0;
}

.dm-pages-row-dragging {
    opacity: 0.4;
}

.dm-pages-row--disabled {
    border-left: 3px solid #ffc107;
    padding-left: 7px;
    opacity: 0.65;
}

.dm-pages-row--disabled .dm-pages-row-label {
    color: #888;
}

.dm-pages-handle {
    cursor: grab;
    color: #999;
    user-select: none;
}

.dm-pages-row-label {
    flex: 1;
    font-size: 14px;
    color: #333;
}

.dm-pages-row-actions {
    display: flex;
    gap: 4px;
}

.dm-pages-badge {
    display: inline-block;
    background: #e1e4e8;
    color: #555;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    text-transform: uppercase;
}

.dm-pages-badge-warn {
    background: #fff3cd;
    color: #856404;
}

.dm-pages-badge-inherited {
    background: #e8f0fe;
    color: #1a56db;
}

.dm-pages-badge-ok {
    background: #e3f3ea;
    color: #1e7d46;
}

/* Icône composite : dossier + œil barré pour la section "Pages cachées" */
.dm-pages-icon-hidden {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 1em;
    height: 1em;
}

.dm-pages-icon-hidden .icon-folder {
    width: 1em;
    height: 1em;
}

.dm-pages-icon-hidden .icon-eye-slash {
    position: absolute;
    bottom: -3px;
    right: -5px;
    width: 0.65em;
    height: 0.65em;
    color: var(--Color5);
    background: #fff;
    border-radius: 50%;
    padding: 1px;
}

.dm-pages-bloc-inherited {
    opacity: 0.7;
    background: #f8f9fa;
    border-style: dashed;
}

/* Encadré composant dynamique (rendu JS, hors webcontents) — lecture seule,
   non draggable, distinct des blocs CMS et des blocs hérités. */
.dm-pages-bloc-dynamic {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #eef4fb;
    border: 1px dashed #7ea8d8;
    border-radius: 6px;
    margin-bottom: 8px;
    align-items: center;
}

.dm-pages-bloc-dynamic-icon {
    font-size: 18px;
    line-height: 1;
    color: #3b6ea5;
    flex: 0 0 auto;
}

.dm-pages-bloc-dynamic-desc {
    font-size: 12px;
    color: #4a5b6e;
    margin-top: 2px;
}

.dm-pages-bloc-dynamic-cond {
    font-size: 11px;
    color: #7a869a;
    font-style: italic;
    margin-top: 2px;
}

.dm-pages-badge-dynamic {
    background: #d6e4f5;
    color: #2c5a8c;
}

/* Section « Pages d'autres sites » — hors périmètre du site courant, lecture seule */
.dm-pages-group-outscope {
    opacity: 0.85;
}

.dm-pages-group-outscope .dm-pages-group-label {
    color: #6a737d;
}

.dm-pages-row--readonly {
    background: #f8f9fa;
    border-style: dashed;
}

.dm-pages-handle--static {
    cursor: default;
    color: #c0c4c8;
}

/* Buttons */
.dm-pages-btn {
    display: inline-block;
    background: #f6f8fa;
    border: 1px solid #d1d5da;
    color: #24292e;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
    vertical-align: middle;
    box-sizing: border-box;
}

.dm-pages-btn:hover {
    background: #e1e4e8;
}

.dm-pages-btn-primary {
    background: var(--Color1, #74c5c3);
    border-color: var(--Color1, #74c5c3);
    color: #fff;
}

.dm-pages-btn-primary:hover {
    background: var(--Color2, #1fa8b0);
    border-color: var(--Color2, #1fa8b0);
}

.dm-pages-btn-edit {
    background: #fff;
    color: var(--Color1, #74c5c3);
    border-color: #e1e4e8;
}

.dm-pages-btn-edit:hover {
    background: #f0fafa;
    border-color: var(--Color1, #74c5c3);
}

.dm-pages-btn-danger {
    background: #fff;
    color: var(--Color5, #e15154);
    border-color: #e1e4e8;
}

.dm-pages-btn-danger:hover {
    background: #fdecea;
    border-color: var(--Color5, #e15154);
}

.dm-pages-btn-sm {
    padding: 4px 8px;
    font-size: 12px;
}

/* Editor form */
.dm-pages-blocs-section h3 {
    margin: 0 0 16px 0;
    color: #2c3e50;
}

/* En-tête toujours visible */
.dm-pages-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.dm-pages-config-header h3 {
    margin: 0;
    color: #2c3e50;
}

.dm-pages-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.dm-pages-preview-link {
    background: #fff;
    border: 1px solid #2c5aa0;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #2c5aa0;
    text-decoration: none;
    white-space: nowrap;
}

.dm-pages-preview-link:hover {
    background: #f0f5ff;
}

.dm-pages-toggle-btn {
    flex-shrink: 0;
    background: #f6f8fa;
    border: 1px solid #d1d5da;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
    color: #555;
    cursor: pointer;
}

.dm-pages-toggle-btn:hover {
    background: #e1e4e8;
}

/* Zone escamotable */
.dm-pages-config-body.dm-pages-config-collapsed {
    display: none;
}

/* Disposition 2 colonnes : config | traductions — se replie automatiquement sous 560px */
.dm-pages-two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    align-items: start;
    margin-bottom: 16px;
}

.dm-pages-col-keys-title {
    margin: 0 0 6px 0;
    font-size: 14px;
    color: #2c3e50;
}

.dm-pages-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.dm-pages-flags-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}

.dm-pages-flags-row input[type="number"] {
    width: 80px;
}

.dm-pages-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dm-pages-field-inline {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.dm-pages-label {
    font-size: 12px;
    color: #555;
    font-weight: 600;
}

.dm-pages-field input[type="text"],
.dm-pages-field input[type="number"],
.dm-pages-field select {
    padding: 6px 10px;
    border: 1px solid #d1d5da;
    border-radius: 4px;
    font-size: 14px;
}

.dm-pages-help {
    font-size: 11px;
    color: #777;
    display: block;
}

.dm-pages-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.dm-pages-radio {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid #d1d5da;
    border-radius: 4px;
    background: #f6f8fa;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.dm-pages-radio:has(input:checked) {
    background: var(--Color1, #74c5c3);
    border-color: var(--Color1, #74c5c3);
    color: #fff;
}

.dm-pages-radio:not(:has(input:checked)):hover {
    background: #e1e4e8;
}

.dm-pages-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Switch toggle (Activée / Public) */
.dm-pages-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.dm-pages-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.dm-pages-switch-slider {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: 20px;
    transition: background 0.2s;
    cursor: pointer;
}

.dm-pages-switch-slider::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.dm-pages-switch input:checked + .dm-pages-switch-slider {
    background: var(--Color3, #4caf50);
}

.dm-pages-switch input:checked + .dm-pages-switch-slider::before {
    transform: translateX(16px);
}

.dm-pages-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.dm-pages-actions-right {
    display: flex;
    gap: 8px;
}

.dm-pages-delete-link {
    color: #999;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

.dm-pages-delete-link:hover {
    color: var(--Color5, #e15154);
}

.dm-pages-inherited-notice {
    color: #888;
    font-size: 12px;
    font-style: italic;
}

/* Blocs section */
.dm-pages-blocs-section {
    margin-top: 32px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.dm-pages-blocs-toolbar {
    margin-bottom: 12px;
}

.dm-pages-blocs {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dm-pages-bloc-child-wrapper {
    padding-left: 24px;
    position: relative;
    margin-top: -4px;
    margin-bottom: 8px;
}
.dm-pages-bloc-child-wrapper::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    border-left: 2px solid var(--Color3);
    opacity: 0.25;
}
.dm-pages-bloc-child-wrapper .dm-pages-bloc-card {
    background: #f4f6fa;
    border-color: #d0d7e3;
}

.dm-pages-add-child-btn {
    white-space: nowrap;
    font-size: 12px;
    opacity: 0.75;
    border: 1px dashed currentColor !important;
    background: transparent !important;
    color: var(--Color3) !important;
}
.dm-pages-add-child-btn:hover {
    opacity: 1;
}

.dm-pages-bloc-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #fafbfc;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    margin-bottom: 8px;
    align-items: center;
}

.dm-pages-bloc-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Vignette icône (option json_options 'icon') — affichée en plus de la photo
   si les deux sont configurées, jamais à la place l'une de l'autre. */
.dm-pages-bloc-thumb-icon {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dm-pages-bloc-thumb-icon .icon {
    width: 28px;
    height: 28px;
    color: var(--Color3);
    fill: var(--Color3);
}

.dm-pages-bloc-info {
    flex: 1;
}

.dm-pages-bloc-title {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
}

.dm-pages-bloc-meta {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

.dm-pages-bloc-handle {
    cursor: grab;
}

.dm-pages-bloc-actions {
    display: flex;
    gap: 4px;
}

.dm-pages-lang-coverage {
    margin-top: 4px;
    display: flex;
    gap: 4px;
}

/* Same code as the editor language tabs: grey = empty, green = filled */
.dm-pages-lang-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    background: #f6f8fa;
    color: #9aa5b1;
}

.dm-pages-lang-badge.ok {
    background: #e3f3ea;
    color: #1e7d46;
}

/* Modal */
.dm-pages-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dm-pages-modal {
    background: #fff;
    border-radius: 8px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.dm-pages-modal-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    gap: 8px;
}

.dm-pages-modal-header-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dm-pages-modal-header h3 {
    margin: 0;
    font-size: 18px;
}

.dm-pages-modal-identifier {
    margin: 0;
    font-size: 12px;
    color: #999;
    font-family: monospace;
    letter-spacing: 0.02em;
}

.dm-pages-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #888;
    line-height: 1;
}

.dm-pages-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.dm-pages-modal-footer {
    padding: 12px 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.dm-pages-lang-tabs {
    display: flex;
    flex-wrap: wrap; /* many languages wrap onto multiple rows instead of overflowing the modal */
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid #ddd;
    margin: 16px 0 0 0;
}

/* Auto-translate button — pushed to the far right of the tab row */
.dm-pages-lang-translate {
    margin-left: auto;
    margin-bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #d1d5da;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #2c5aa0;
    cursor: pointer;
}

.dm-pages-lang-translate:hover:not([disabled]) {
    background: #f0f5ff;
    border-color: #2c5aa0;
}

.dm-pages-lang-translate[disabled] {
    color: #aab2bd;
    border-color: #e1e4e8;
    background: #f6f8fa;
    cursor: not-allowed;
}

.dm-pages-lang-translate-icon {
    font-size: 14px;
    line-height: 1;
}

/* Language picker shown when clicking « Traduire » */
.dm-pages-translate-picker {
    border: 1px solid #d1d5da;
    border-radius: 6px;
    background: #fff;
    padding: 12px 14px;
    margin: 8px 0 0 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.dm-pages-translate-head {
    font-size: 13px;
    font-weight: 600;
    color: #24292e;
    margin-bottom: 8px;
}

.dm-pages-translate-pick {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 4px 0;
    cursor: pointer;
}

.dm-pages-translate-hint {
    color: #9aa5b1;
    font-size: 12px;
}

.dm-pages-translate-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* AI alt-text generator button (next to the image picker) */
.dm-bloc-alt-generate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
}

.dm-bloc-alt-generate[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dm-pages-lang-tab {
    background: #f6f8fa;
    border: 1px solid #d1d5da;
    border-bottom: none;
    padding: 5px 12px;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    font-size: 12px;
    font-weight: 600;
    /* Default (empty) state — muted so filled tabs stand out */
    color: #9aa5b1;
}

/* Filled = has title/content → green background tint */
.dm-pages-lang-tab.dm-filled {
    background: #e3f3ea;
    border-color: #bfe3cd;
    color: #1e7d46;
}

/* Active (currently edited) overrides the fill tint with the lifted white look */
.dm-pages-lang-tab.active {
    background: #fff;
    color: #2c5aa0;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
}

.dm-pages-lang-panels {
    border: 1px solid #ddd;
    border-top: none;
    padding: 16px;
    background: #fff;
}

.dm-pages-lang-panel {
    display: none;
}

.dm-pages-lang-panel.active {
    display: block;
}

.dm-pages-photo-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dm-pages-photo-wrap img {
    max-width: 120px;
    max-height: 120px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.dm-bloc-editor-loading {
    padding: 40px;
    text-align: center;
    color: #888;
}

.dm-bloc-secondary {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dm-bloc-meta-grid {
    grid-template-columns: 120px 1fr;
}

.dm-bloc-title-field {
    margin-bottom: 4px;
}

.dm-bloc-content-section {
    margin-top: 16px;
    border-top: 1px solid #eee;
    padding-top: 12px;
}

.dm-bloc-content-label {
    display: block;
    margin-bottom: 8px;
}

/* Options d'affichage (JsonOptions) — section repliable, partagée blocs + pages */
.dm-opt {
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    overflow: hidden;
}

.dm-opt-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: #f6f8fa;
    border: none;
    border-bottom: 1px solid transparent;
    font-size: 13px;
    font-weight: 700;
    color: #24292e;
    cursor: pointer;
    text-align: left;
}

.dm-opt-toggle[aria-expanded="true"] {
    border-bottom-color: #e1e4e8;
}

.dm-opt-caret {
    font-size: 11px;
    color: #888;
}

.dm-opt-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dm-opt-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.dm-opt-label {
    flex: 0 0 200px;
    font-size: 13px;
    color: #444;
}

.dm-opt-input {
    flex: 1 1 auto;
    padding: 6px 10px;
    border: 1px solid #d1d5da;
    border-radius: 4px;
    font-size: 13px;
    box-sizing: border-box;
    min-width: 0;
}

/* Option booléenne (clé is_*) — switch on/off */
.dm-opt-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
    flex: 0 0 auto;
}

.dm-opt-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.dm-opt-slider {
    position: absolute;
    inset: 0;
    background: #c4c8cd;
    border-radius: 22px;
    cursor: pointer;
    transition: background 0.2s;
}

.dm-opt-slider::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.dm-opt-switch input:checked + .dm-opt-slider {
    background: var(--Color1, #74c5c3);
}

.dm-opt-switch input:checked + .dm-opt-slider::before {
    transform: translateX(20px);
}

.dm-opt-switch input:focus-visible + .dm-opt-slider {
    box-shadow: 0 0 0 2px rgba(116, 197, 195, 0.5);
}

.dm-opt-free {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dm-opt-free-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.dm-opt-free-key {
    flex: 0 0 200px;
    padding: 6px 10px;
    border: 1px solid #d1d5da;
    border-radius: 4px;
    font-size: 13px;
    box-sizing: border-box;
    min-width: 0;
}

.dm-opt-free-val {
    flex: 1 1 auto;
    padding: 6px 10px;
    border: 1px solid #d1d5da;
    border-radius: 4px;
    font-size: 13px;
    box-sizing: border-box;
    min-width: 0;
}

.dm-opt-free-del {
    flex: 0 0 auto;
    padding: 4px 10px;
    line-height: 1;
    font-size: 16px;
}

.dm-opt-add {
    align-self: flex-start;
}

/* Option radio — boutons visuels avec picto (ex : alignement du texte) */
.dm-opt-radio {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.dm-opt-radio-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    border: 1px solid #d1d5da;
    border-radius: 4px;
    background: white;
    color: #555;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.dm-opt-radio-btn:hover {
    border-color: var(--Color1, #74c5c3);
    color: var(--Color1, #74c5c3);
}

.dm-opt-radio-btn--active {
    border-color: var(--Color3, #0981bc);
    background: color-mix(in srgb, var(--Color3, #0981bc) 12%, white);
    color: var(--Color3, #0981bc);
}

/* Champ icône — inline dans .dm-opt-row */
.dm-opt-icon-field {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
}

.dm-opt-icon-preview {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d1d5da;
    border-radius: 4px;
    background: #f6f8fa;
    color: var(--Color4);
    flex: 0 0 34px;
}

.dm-opt-icon-preview .icon {
    width: 18px;
    height: 18px;
}

.dm-opt-icon-empty {
    color: #aaa;
    font-size: 12px;
}

/* Picker (appendé à body, position absolute) */
.dm-opt-icon-picker {
    position: absolute;
    z-index: 99999;
    background: #fff;
    border: 1px solid #d1d5da;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    padding: 10px;
    max-height: 280px;
    overflow-y: auto;
}

.dm-opt-icon-grid {
    display: grid;
    grid-template-columns: repeat(8, 36px);
    gap: 4px;
}

.dm-opt-icon-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    color: var(--Color4);
    padding: 0;
    transition: background 0.2s;
}

.dm-opt-icon-item:hover,
.dm-opt-icon-item.dm-opt-icon-item--selected {
    background: color-mix(in srgb, var(--Color3) 15%, white);
    border-color: var(--Color3);
}

.dm-opt-icon-item .icon {
    width: 18px;
    height: 18px;
}

/* ── Token multi tag-input (block_class / section_class) ─────────────── */

.dm-opt-token-multi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dm-opt-token-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
}

.dm-opt-token-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: color-mix(in srgb, var(--Color3) 12%, white);
    border: 1px solid var(--Color3);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 0.82em;
    white-space: nowrap;
}

.dm-opt-token-tag--raw {
    background: #f0f0f0;
    border-color: #bbb;
    color: #888;
    cursor: default;
}

.dm-opt-token-tag-rm {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--Color3);
    font-size: 1em;
    line-height: 1;
    padding: 0;
}

.dm-opt-token-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: var(--z-index-dropdown, 100);
    max-height: 240px;
    overflow-y: auto;
}

.dm-opt-token-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    cursor: pointer;
}
.dm-opt-token-item:hover {
    background: color-mix(in srgb, var(--Color3) 8%, white);
}
.dm-opt-token-item strong {
    font-size: 0.88em;
    flex-shrink: 0;
}
.dm-opt-token-item span {
    color: #aaa;
    font-size: 0.78em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── class-input : champ texte + mega-menu (*_class / block_class / section_class) ── */

.dm-opt-row:has(.dm-opt-class-field) {
    align-items: flex-start;
}

.dm-opt-class-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

.dm-opt-class-input-row {
    display: flex;
    gap: 6px;
    align-items: stretch;
}
.dm-opt-class-input-row .dm-opt-input {
    flex: 1 1 auto;
}

.dm-opt-megamenu-toggle {
    background: none;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.84em;
    cursor: pointer;
    color: var(--Color3);
    transition: background 0.12s;
    white-space: nowrap;
    flex-shrink: 0;
}
.dm-opt-megamenu-toggle:hover {
    background: color-mix(in srgb, var(--Color3) 8%, white);
    border-color: var(--Color3);
}

.dm-opt-megamenu-empty {
    font-size: 0.84em;
    color: #aaa;
    padding: 6px 2px;
    font-style: italic;
}

.dm-opt-megamenu-panel {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 12px 14px;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dm-opt-megamenu-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dm-opt-megamenu-group-title {
    font-size: 0.76em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #999;
    padding-bottom: 4px;
    border-bottom: 1px solid #e8e8e8;
}

.dm-opt-megamenu-sub-label {
    font-size: 0.74em;
    color: #bbb;
    margin-top: 2px;
}

.dm-opt-megamenu-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dm-opt-megamenu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: white;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 5px 7px;
    cursor: pointer;
    min-width: 46px;
    transition: border-color 0.12s, background 0.12s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.dm-opt-megamenu-item:hover {
    border-color: color-mix(in srgb, var(--Color3) 40%, transparent);
    background: color-mix(in srgb, var(--Color3) 5%, white);
}
.dm-opt-megamenu-item--active {
    border-color: var(--Color3) !important;
    background: color-mix(in srgb, var(--Color3) 10%, white) !important;
}

.dm-opt-megamenu-swatch {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.10);
    flex-shrink: 0;
}

.dm-opt-megamenu-label {
    font-size: 0.70em;
    font-weight: 600;
    color: #777;
    text-align: center;
    line-height: 1;
}

/* Layout tokens — wider pill, no swatch */
.dm-opt-megamenu-item--layout {
    flex-direction: row;
    min-width: unset;
    padding: 6px 10px;
    gap: 0;
}
.dm-opt-megamenu-item--layout .dm-opt-megamenu-label {
    font-size: 0.80em;
    font-weight: 500;
    color: #444;
    text-align: left;
    white-space: nowrap;
}

/* ── layout-group : bouton unique pour plusieurs options de mise en page ── */
.dm-opt-row:has(.dm-opt-layout-group) { align-items: flex-start; }
.dm-opt-layout-group { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.dm-opt-layout-panel { border: 1px solid #eee; border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; background: #fafafa; }
.dm-opt-layout-panel.dm-opt-layout-panel-linked { margin: 2px 0 6px 0; }
.dm-opt-layout-section { display: flex; flex-direction: column; gap: 6px; }
.dm-opt-layout-section-label { font-size: 0.78em; font-weight: 600; color: #aaa; text-transform: uppercase; letter-spacing: 0.05em; }
.dm-opt-layout-choices { display: flex; flex-wrap: wrap; gap: 5px; }
.dm-opt-layout-btn { background: white; border: 1px solid #ddd; border-radius: 6px; padding: 5px 10px; font-size: 0.84em; cursor: pointer; color: var(--Color4); transition: background 0.12s, border-color 0.12s; }
.dm-opt-layout-btn:hover { background: color-mix(in srgb, var(--Color3) 8%, white); border-color: var(--Color3); }
.dm-opt-layout-btn--active { background: var(--Color3); color: white; border-color: var(--Color3); }
.dm-opt-layout-btn--active:hover { opacity: 0.9; }

@media (max-width: 600px) {
    .dm-opt-row,
    .dm-opt-free-row {
        flex-wrap: wrap;
    }
    .dm-opt-label,
    .dm-opt-free-key {
        flex-basis: 100%;
    }
}

/* Translation key rows (auto-generated keys) */
.dm-pages-keys-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.dm-pages-key-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
}

.dm-pages-key-label {
    min-width: 110px;
    font-size: 12px;
    color: #777;
    flex-shrink: 0;
    cursor: help;
    border-bottom: 1px dotted #bbb;
    white-space: nowrap;
}

.dm-pages-key-fr-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #d1d5da;
    border-radius: 4px;
    font-size: 14px;
    min-width: 0;
}

.dm-pages-key-fr-input:focus {
    outline: none;
    border-color: var(--Color1, #74c5c3);
}

.dm-pages-key-count-badge {
    display: inline-block;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 10px;
    background: #f5f5f5;
    color: #888;
    flex-shrink: 0;
    min-width: 20px;
    text-align: center;
}

.dm-pages-key-count-badge[data-count]:not([data-count="0"]):not([data-count=""]) {
    background: #e8f5e9;
    color: #2e7d32;
}

.dm-pages-keys-note {
    color: #888;
    font-size: 12px;
    display: block;
    margin-bottom: 0;
}

/* ============================================================================
 * Onglet « Doublons hérités » — arbitrage webcontents parent/enfant
 * Classes dm-pages-conflict-*
 * ============================================================================ */

/* Conteneur principal du pane */
.dm-pages-conflict-pane {
    padding: 4px 0;
}

/* Titre de section (legacy / hérités) */
.dm-pages-conflict-section-title {
    margin: 20px 0 10px;
    font-size: 15px;
    color: var(--Color4);
}
.dm-pages-conflict-section-title:first-of-type {
    margin-top: 8px;
}

/* Carte de doublon legacy — liseré d'accent pour la distinguer */
.dm-pages-conflict-card--legacy {
    border-left: 4px solid var(--Color3);
}

/* Carte de conflit */
.dm-pages-conflict-card {
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* Ligne identifiant en haut de la carte */
.dm-pages-conflict-identifier {
    margin-bottom: 12px;
}

/* Grille comparatif deux colonnes (parent vs enfant) */
.dm-pages-conflict-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    align-items: start;
}

/* Colonne générique */
.dm-pages-conflict-col {
    border-radius: 6px;
    padding: 12px;
    background: #f8f9fa;
    border: 1px solid #e1e4e8;
}

/* Colonne « Version du réseau (hérité) » — teinte Color1 */
.dm-pages-conflict-col--network {
    background: color-mix(in srgb, var(--Color1) 8%, white);
    border-color: color-mix(in srgb, var(--Color1) 30%, white);
}

/* Colonne « Ma version (propre) » — teinte Color3 */
.dm-pages-conflict-col--local {
    background: color-mix(in srgb, var(--Color3) 6%, white);
    border-color: color-mix(in srgb, var(--Color3) 25%, white);
}

/* Libellé de colonne (en-tête) */
.dm-pages-conflict-col-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #666;
    margin-bottom: 8px;
}

.dm-pages-conflict-col--network .dm-pages-conflict-col-label {
    color: var(--Color2);
}

.dm-pages-conflict-col--local .dm-pages-conflict-col-label {
    color: var(--Color3);
}

/* Rang affiché */
.dm-pages-conflict-rank {
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
}

/* Titre du bloc */
.dm-pages-conflict-title {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    margin-bottom: 4px;
}

/* Extrait du contenu */
.dm-pages-conflict-excerpt {
    font-size: 12px;
    color: #666;
    line-height: 1.45;
    margin-bottom: 8px;
}

/* Wrapper d'un bloc enfant (il peut y en avoir plusieurs) */
.dm-pages-conflict-child {
    padding-top: 8px;
}

.dm-pages-conflict-child + .dm-pages-conflict-child {
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid #e1e4e8;
}

/* Groupe de boutons d'arbitrage */
.dm-pages-conflict-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
}

/* Bouton d'action — pill conforme components */
.dm-pages-conflict-btn {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 25px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    border: 2px solid transparent;
    line-height: 1.3;
    transition: opacity 0.2s;
}

/* Variante « Garder ma version » — couleur primaire Color3 (outline) */
.dm-pages-conflict-btn--child {
    background: transparent;
    color: var(--Color3);
    border-color: var(--Color3);
}

.dm-pages-conflict-btn--child:hover:not(.a_disabled) {
    background: color-mix(in srgb, var(--Color3) 10%, white);
}

/* Variante « Garder la version du réseau » — danger Color5 (outline) */
.dm-pages-conflict-btn--network {
    background: transparent;
    color: var(--Color5);
    border-color: var(--Color5);
}

.dm-pages-conflict-btn--network:hover {
    background: color-mix(in srgb, var(--Color5) 10%, white);
}

/* État désactivé — réalignement impossible (rang cible occupé) */
.dm-pages-conflict-btn.a_disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

/* Avertissement rang déjà occupé */
.dm-pages-conflict-warning {
    font-size: 11px;
    color: var(--Color5);
    font-style: italic;
    flex-basis: 100%;
}

/* Message d'erreur API (injecté programmatiquement) */
.dm-pages-conflict-api-error {
    background: color-mix(in srgb, var(--Color5) 12%, white);
    border: 1px solid color-mix(in srgb, var(--Color5) 35%, transparent);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--Color5);
    margin-top: 12px;
}

/* États vides — modificateurs de dm-pages-settings-empty */
.dm-pages-conflict-empty--unavailable {
    font-style: italic;
}

.dm-pages-conflict-empty--none {
    color: var(--Color6);
}

/* ─── Quill toolbar — bouton variables calculées ─── */
.ql-toolbar .ql-wcvInsert {
    font-size: 12px;
    font-weight: 700;
    font-family: monospace;
    padding: 0 5px;
    line-height: 1;
}

.ql-toolbar .ql-wcvInsert::before {
    content: "{}";
}

/* ─── Menu de sélection de variables calculées ─── */
.dm-wcv-menu {
    position: fixed;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px 0;
}

.dm-wcv-menu-item {
    padding: 8px 14px;
    font-size: 13px;
    color: var(--Color4);
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.dm-wcv-menu-item:hover {
    background: color-mix(in srgb, var(--Color3) 10%, white);
    color: var(--Color3);
}

.dm-wcv-menu-item--disabled {
    color: #888;
    cursor: default;
    font-style: italic;
}

.dm-wcv-menu-item--disabled:hover {
    background: transparent;
    color: #888;
}

/* Mobile */
@media (max-width: 767px) {
    .dm-pages-layout {
        grid-template-columns: 1fr;
        padding: 12px;
    }
    /* Sur mobile : bloc d'édition au-dessus de la liste des pages */
    .dm-pages-editor {
        order: -1;
        min-height: 0;
    }
    .dm-pages-tree {
        order: 0;
    }
    .dm-pages-modal {
        max-height: 95vh;
    }
    .dm-pages-grid {
        grid-template-columns: 1fr;
    }
    .dm-pages-flags-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* Dashboard — Traductions matrix view (dm-tm-*) */

.dm-tm-root {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---------- Toolbar ---------- */

.dm-tm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f7f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
}

.dm-tm-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.dm-tm-toolbar-right {
    margin-left: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dm-tm-btn-translate {
    padding: 6px 14px;
    background: #2980b9;
    color: #fff;
    border: 1px solid #2471a3;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.dm-tm-btn-translate:hover:not(:disabled) {
    background: #1f6691;
}

.dm-tm-btn-translate:disabled {
    background: #a0bdd1;
    border-color: #a0bdd1;
    cursor: default;
}

.dm-tm-btn-translate-running {
    background: #7f8c8d;
    border-color: #7f8c8d;
    font-variant-numeric: tabular-nums;
    min-width: 90px;
    text-align: center;
}

.dm-tm-btn-cancel {
    padding: 6px 12px;
    background: #fff;
    color: #c0392b;
    border: 1px solid #c0392b;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.dm-tm-btn-cancel:hover {
    background: #fdf0ef;
}

.dm-tm-counters {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 4px;
    border-top: 1px dashed #e1e4e8;
    font-size: 13px;
    color: #555;
}

.dm-tm-counter,
.dm-tm-counter-lang {
    display: inline-block;
}

.dm-tm-counter strong,
.dm-tm-counter-lang strong {
    color: #222;
}

.dm-tm-btn {
    padding: 6px 12px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.dm-tm-btn-primary {
    background: #2c3e50;
    color: #fff;
    border-color: #2c3e50;
}

.dm-tm-btn-primary:hover {
    background: #1e2b37;
}

.dm-tm-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #444;
    cursor: pointer;
}

.dm-tm-search {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    min-width: 240px;
}

.dm-tm-search:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, .2);
}

/* ---------- Table ---------- */

.dm-tm-table-wrap {
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    overflow: auto;
    max-height: 70vh;
    background: #fff;
}

.dm-tm-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

.dm-tm-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f0f2f5;
    border-bottom: 2px solid #d1d5da;
    text-align: left;
    padding: 10px 12px;
    font-weight: 600;
    color: #222;
}

.dm-tm-table .dm-tm-th-id {
    position: sticky;
    left: 0;
    z-index: 4; /* above lang headers in corner */
    min-width: 220px;
    background: #f0f2f5;
}

.dm-tm-table .dm-tm-th-lang {
    min-width: 220px;
}

.dm-tm-table tbody .dm-tm-th-row {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fafbfc;
    border-right: 1px solid #e1e4e8;
    padding: 8px 12px;
    font-weight: 500;
    color: #333;
    text-align: left;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm-tm-table .dm-tm-td {
    padding: 4px 6px;
    border-bottom: 1px solid #eef0f2;
    vertical-align: middle;
}

.dm-tm-cell-missing {
    background: #fff3cd;
}

.dm-tm-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 3px;
    font-size: 14px;
    color: #222;
    box-sizing: border-box;
}

.dm-tm-input:hover {
    border-color: #d1d5da;
    background: #fff;
}

.dm-tm-input:focus {
    outline: none;
    border-color: #3498db;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, .2);
}

.dm-tm-empty-row {
    padding: 24px;
    text-align: center;
    color: #888;
}

/* ---------- Site languages header ---------- */

.dm-tm-site-langs {
    font-size: 13px;
    color: #555;
    padding: 6px 4px 0 4px;
}

.dm-tm-site-langs strong {
    color: #222;
}

/* ---------- Per-row language chips ---------- */

.dm-tm-chips {
    display: inline-flex;
    gap: 4px;
    margin-left: 8px;
    vertical-align: middle;
}

.dm-tm-chip {
    display: inline-block;
    font-size: 11px;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 3px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    white-space: nowrap;
}

.dm-tm-chip-ok {
    background: #27ae60;
}

.dm-tm-chip-missing {
    background: #c0392b;
}

.dm-tm-chip-na {
    background: #999;
}

.dm-tm-id-label {
    font-weight: 500;
    color: #333;
}

/* ---------- Orphan rows ---------- */

.dm-tm-row-orphan .dm-tm-th-row,
.dm-tm-row-orphan .dm-tm-td {
    background: #f4f5f7;
    opacity: 0.85;
}

.dm-tm-row-orphan .dm-tm-id-label {
    color: #777;
    text-decoration: line-through;
}

.dm-tm-badge-orphan {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 3px;
    background: #e1e4e8;
    color: #555;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dm-tm-btn-trash {
    margin-left: 6px;
    background: transparent;
    border: none;
    color: #c0392b;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 13px;
    border-radius: 3px;
}

.dm-tm-btn-trash:hover {
    background: #fdecea;
}

/* ---------- Mobile (table legacy) ---------- */

@media (max-width: 768px) {
    .dm-tm-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .dm-tm-toolbar-right {
        margin-left: 0;
    }
    .dm-tm-search {
        width: 100%;
        min-width: 0;
    }
    .dm-tm-table-wrap {
        max-height: 60vh;
    }
    .dm-tm-table .dm-tm-th-id,
    .dm-tm-table .dm-tm-th-lang {
        min-width: 160px;
    }
}

/* ---------- Language filter pills ---------- */

.dm-tm-lang-filter {
    flex: 1 1 100%;
    display: flex;
    overflow-x: auto;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px dashed #e1e4e8;
    -webkit-overflow-scrolling: touch;
}

.dm-tm-pill {
    flex-shrink: 0;
    padding: 4px 10px;
    border: 1px solid #d1d5da;
    border-radius: 12px;
    background: #fff;
    color: #444;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.4;
}

.dm-tm-pill:hover {
    background: #f0f2f5;
    border-color: #bcc0c6;
}

.dm-tm-pill-active {
    background: #2980b9;
    border-color: #2471a3;
    color: #fff;
}

.dm-tm-pill-active:hover {
    background: #1f6691;
}

/* ---------- List view ---------- */

.dm-tm-list-host {
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.dm-tm-list-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #eef0f2;
    min-height: 44px;
}

.dm-tm-list-row:last-child {
    border-bottom: none;
}

.dm-tm-list-row:hover {
    background: #f8f9fa;
}

.dm-tm-list-id {
    font-weight: 600;
    font-size: 13px;
    color: #222;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 180px;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-tm-list-fr {
    font-size: 13px;
    color: #777;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 0;
    min-width: 0;
}

/* chips dans l'éditeur uniquement — plus de chips scrollables en liste */

.dm-tm-coverage {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.dm-tm-coverage-total {
    font-weight: 400;
    opacity: 0.75;
}

.dm-tm-coverage-ok {
    background: #d4edda;
    color: #155724;
}

.dm-tm-coverage-partial {
    background: #fff3cd;
    color: #856404;
}

.dm-tm-coverage-low {
    background: #f8d7da;
    color: #721c24;
}

.dm-tm-list-actions {
    flex-shrink: 0;
    margin-left: auto;
}

.dm-tm-btn-sm {
    padding: 4px 10px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dm-tm-btn-sm:hover {
    background: #f0f2f5;
}

.dm-tm-btn-secondary {
    background: #fff;
    color: #444;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dm-tm-btn-secondary:hover {
    background: #f0f2f5;
}

/* ---------- Editor view ---------- */

.dm-tm-editor {
    padding: 20px 0 8px 0;
    max-width: 680px;
}

.dm-tm-editor-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.dm-tm-editor-title {
    font-size: 15px;
    font-weight: 700;
    color: #222;
    word-break: break-all;
}

.dm-tm-editor-fr {
    background: #f7f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 20px;
}

.dm-tm-editor-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.dm-tm-editor-fr-text {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}

.dm-tm-editor-field {
    margin-bottom: 10px;
}

.dm-tm-editor-field-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.dm-tm-editor-lang-label {
    font-size: 12px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.dm-tm-editor-textarea {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    color: #222;
    box-sizing: border-box;
    resize: vertical;
}

.dm-tm-editor-textarea:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, .2);
}

.dm-tm-editor-auto-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #777;
    cursor: pointer;
    margin-left: auto;
    flex-shrink: 0;
}

.dm-tm-editor-actions {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e1e4e8;
}

.dm-tm-inherited-note {
    background: #e8f0fe;
    color: #1a56db;
    border: 1px solid #c3d5fc;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    margin-bottom: 16px;
}

/* ---------- Mobile (list + editor) ---------- */

@media (max-width: 600px) {
    .dm-tm-list-row {
        flex-wrap: wrap;
        gap: 6px;
    }
    .dm-tm-list-fr {
        display: none;
    }
    .dm-tm-list-id {
        min-width: 0;
        max-width: 100%;
    }
    .dm-tm-list-row .dm-tm-chips {
        max-width: 100%;
        flex: 1 1 100%;
    }
    .dm-tm-list-actions {
        margin-left: 0;
        flex: 1 1 100%;
    }
    .dm-tm-editor {
        max-width: 100%;
    }
    .dm-tm-editor-textarea {
        min-height: 80px;
    }
}

/* ============================================================
   dashboard.css — Styles dashboard worker (vanilla Bootstrap replacement)
   Chargé via css/**\/*.css par gulp bundle:css
   ============================================================ */

/* ------------------------------------------------------------
   0. DASHBOARD SHELL — hauteur minimale pour éviter l'effondrement
   ------------------------------------------------------------ */
#Dashboard.page-container,
#Dashboard .page-container {
    min-height: 60vh;
}

.dashboard-wrapper {
    min-height: 50vh;
    padding: 20px;
}

.dashboard-entreprise-selector {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-entreprise-selector select {
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 14px;
}

.dashboard-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.dashboard-nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.dashboard-nav-item:hover {
    background: #e9ecef;
    color: #333;
    text-decoration: none;
}

.dashboard-nav-item.active {
    background: var(--Color1, #74c5c3);
    color: white;
}

.dashboard-nav-item.active:hover {
    opacity: 0.9;
}

.dashboard-error-state {
    display: flex;
    align-items: flex-start;
    min-height: 50vh;
}

/* ------------------------------------------------------------
   1. LAYOUT — Panel cards
   ------------------------------------------------------------ */
.dm-panel {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    margin-bottom: 16px;
}

.dm-panel-header {
    padding: 10px 15px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    font-weight: 600;
}

.dm-panel-body {
    padding: 15px;
    min-height: 20px;
}

.dm-panel-footer {
    padding: 10px 15px;
    background: #f5f5f5;
    border-top: 1px solid #ddd;
}

/* ------------------------------------------------------------
   2. GRID
   ------------------------------------------------------------ */
.dm-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -7px;
}

.dm-col-2 {
    flex: 0 0 16.66%;
    max-width: 16.66%;
    padding: 0 7px;
    box-sizing: border-box;
}

.dm-col-4 {
    flex: 0 0 33.33%;
    max-width: 33.33%;
    padding: 0 7px;
    box-sizing: border-box;
}

.dm-col-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 7px;
    box-sizing: border-box;
}

.dm-col-8 {
    flex: 0 0 66.66%;
    max-width: 66.66%;
    padding: 0 7px;
    box-sizing: border-box;
}

/* ------------------------------------------------------------
   3. FORMULAIRES
   ------------------------------------------------------------ */
.dm-input {
    display: block;
    width: 100%;
    padding: 6px 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    line-height: 1.42857;
}

.dm-input:focus {
    outline: none;
    border-color: #66afe9;
    box-shadow: 0 0 0 2px rgba(102, 175, 233, 0.3);
}

.dm-input-group {
    display: inline-flex;
    align-items: stretch;
    width: 100%;
}

.dm-input-group .dm-input {
    flex: 1;
    border-radius: 4px 0 0 4px;
}

.dm-input-group-btn {
    display: flex;
    align-items: center;
}

.dm-input-group-btn button,
.dm-input-group-btn .btn {
    border-radius: 0 4px 4px 0;
}

/* ------------------------------------------------------------
   4. BOUTONS — uniquement les absents de multivitrines.css
   .btn-primary est déjà défini dans multivitrines.css, ne pas dupliquer
   ------------------------------------------------------------ */

/* .btn base — absent de multivitrines.css */
.btn {
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #e8e8e8;
    color: #333;
    text-decoration: none;
    box-sizing: border-box;
}
.btn:hover {
    opacity: 0.85;
}

/* .btn-sm absent de multivitrines.css */
.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

/* .btn-success absent de multivitrines.css */
.btn-success {
    background-color: #5cb85c;
    color: #fff;
    border: 1px solid #4cae4c;
    border-radius: 4px;
    cursor: pointer;
}

.btn-success:hover {
    background-color: #449d44;
    border-color: #398439;
}

/* Groupe de boutons — toujours ajouté */
.dm-btn-group {
    display: inline-flex;
    gap: 4px;
}

/* ------------------------------------------------------------
   5. ALERTES
   ------------------------------------------------------------ */
.dm-alert {
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.dm-alert-danger {
    background: #f2dede;
    color: #a94442;
    border: 1px solid #ebccd1;
}

.dm-alert-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* ------------------------------------------------------------
   6. ELEMENTS UI
   ------------------------------------------------------------ */

/* Info box */
.dm-info-box {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 10px;
    text-align: center;
}

/* Description list en grille */
.dm-dl {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 4px 12px;
    margin: 0;
}

.dm-dl dt {
    font-weight: bold;
}

.dm-dl dd {
    margin: 0;
}

/* Badges */
.dm-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
}

.dm-badge-success {
    background-color: #28a745;
}

.dm-badge-warning {
    background-color: #ffc107;
    color: #333;
}

.dm-badge-info {
    background-color: #17a2b8;
}

.dm-badge-danger {
    background-color: #dc3545;
}

.dm-badge-default {
    background-color: #6c757d;
}

/* Légende point coloré */
.dm-legend-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    vertical-align: middle;
}

/* Liste sans puce */
.dm-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dm-list-item {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
}

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

/* Texte atténué */
.dm-muted {
    color: #6c757d;
}

/* ------------------------------------------------------------
   7. TABS
   ------------------------------------------------------------ */
.dm-tabs {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 -1px 0;
    border-bottom: 1px solid #ddd;
}

.dm-tabs li {
    margin-right: 2px;
}

.dm-tabs li a {
    display: block;
    padding: 8px 14px;
    text-decoration: none;
    color: #555;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
}

.dm-tabs li.active a {
    background: #fff;
    border-color: #ddd #ddd #fff;
    color: #333;
}

.dm-tabs li a:hover {
    background: #f5f5f5;
    color: #333;
}

.dm-tab-content {
    padding-top: 15px;
}

.dm-tabpane {
    display: none;
}

.dm-tabpane.active {
    display: block;
}

/* ------------------------------------------------------------
   8. MODAL — compléments uniquement (base dans multivitrines.css)
   ------------------------------------------------------------ */

/* Largeur étendue pour la modal locker */
#lockerModal .modal-dialog {
    max-width: 900px;
}

/* Z-index surélevé pour la modal de confirmation */
#confirmModal {
    z-index: 1060;
}

#confirmModal .modal-dialog {
    max-width: 400px;
}

/* Header / footer des modales dashboard */
.modal-header {
    padding: 12px 16px;
    justify-content: space-between;
    align-items: center;
}
.modal-header .modal-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    order: 0;
}
.modal-footer {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Bouton fermeture générique */
.dm-modal-close {
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    color: inherit;
    order: 1;
    padding: 0 4px;
}

/* ------------------------------------------------------------
   9. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .dm-col-2,
    .dm-col-4,
    .dm-col-6,
    .dm-col-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #machineInfoPanel {
        display: none !important;
    }

    .dashboard-nav-label {
        display: none;
    }
}

/* ===========================================================================
   FAQ — accordéon (bloc dynamique)
   Couleurs de marque (var(--Color*)) plutôt que du noir, cartes délimitées.
   =========================================================================== */

/* Titre du bloc dynamique FAQ */
.faq-section-title {
    text-align: center;
    color: var(--Color4);
    margin: 0 0 20px;
}

/* Filtres de catégorie — collés à la liste pour qu'on comprenne le lien */
.faq-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 820px;
    margin: 0 auto 28px;
}

/* Accordéon contraint en largeur et aligné à gauche (lisibilité) */
.faq-category {
    max-width: 820px;
    margin: 0 auto;
    text-align: left;
}

/* Carte question/réponse — bord neutre au repos, accent de marque à l'ouverture */
.faq-item {
    background: white;
    margin-bottom: 14px;
    border-radius: 12px;
    cursor: pointer;
    border: 1px solid #e6e6e6;
    border-left: 4px solid var(--Color3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.faq-item:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border-color: color-mix(in srgb, var(--Color3) 30%, #e6e6e6);
    border-left-color: var(--Color3);
}

/* Item ouvert — même fond que cols-with-background + accent latéral de marque */
.faq-item--open {
    background: color-mix(in srgb, var(--Color1) 10%, white);
    border-left-color: var(--Color3);
}

.faq-question {
    padding: 22px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.faq-question h5 {
    margin: 0;
    flex: 1;
    color: var(--Color4);
    font-size: 0.95em;
    font-weight: 600;
}

/* Toggle +/× dessiné en CSS (deux barres), couleur de marque.
   Fermé = + ; ouvert = × (rotation 45° des deux barres). */
.faq-toggle {
    position: relative;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.faq-toggle::before,
.faq-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--Color3);
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

/* Barre verticale → forme le + */
.faq-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* Item ouvert → croix (×) */
.faq-item--open .faq-toggle::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.faq-item--open .faq-toggle::after {
    transform: translate(-50%, -50%) rotate(135deg);
}

/* Zone de réponse — max-height pilotée en JS (accordéon) */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer__inner {
    padding: 0 24px 22px;
    color: #555;
    line-height: 1.7;
}

/* ============================================================================
 * fidelity.css
 * Styles for the Fidelity view — housing registration for rental owners.
 * Class prefix: fid-*
 * ============================================================================ */

/* ------------------------------------------------------------------
   Page wrapper
   ------------------------------------------------------------------ */
.fid-page {
    max-width: 780px;
    margin: 0 auto;
    padding: 32px 16px;
    box-sizing: border-box;
}

.fid-title {
    font-size: 1.6em;
    font-weight: 700;
    color: var(--Color4);
    margin: 0 0 8px 0;
}

.fid-subtitle {
    font-size: 0.95em;
    color: #666;
    margin: 0 0 28px 0;
    line-height: 1.5;
}

/* ------------------------------------------------------------------
   Count step
   ------------------------------------------------------------------ */
.fid-count-block {
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.fid-count-block.fid-hidden {
    display: none;
}

.fid-count-label {
    font-size: 0.9em;
    font-weight: 600;
    color: #444;
    display: block;
    margin-bottom: 6px;
}

.fid-count-input {
    width: 100px;
    padding: 10px 12px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-size: 1em;
    color: #333;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.fid-count-input:focus {
    border-color: var(--Color3);
}

/* ------------------------------------------------------------------
   Housing cards
   ------------------------------------------------------------------ */
.fid-housing {
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 10px;
    padding: 20px 20px 16px;
    margin-bottom: 16px;
    transition: opacity 0.3s, max-height 0.3s;
    overflow: hidden;
}

.fid-housing.removing {
    opacity: 0;
    max-height: 0;
    padding: 0;
    margin: 0;
    border: none;
}

.fid-housing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.fid-housing-title {
    font-size: 1em;
    font-weight: 700;
    color: var(--Color4);
}

.fid-remove-btn {
    background: none;
    border: 1px solid var(--Color5, #e15154);
    color: var(--Color5, #e15154);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.82em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.fid-remove-btn:hover {
    background: var(--Color5, #e15154);
    color: #fff;
}

/* ------------------------------------------------------------------
   Form grid inside a housing card
   ------------------------------------------------------------------ */
.fid-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 560px) {
    .fid-form-grid {
        grid-template-columns: 1fr;
    }
}

.fid-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fid-field.fid-full {
    grid-column: 1 / -1;
}

.fid-field-label {
    font-size: 0.82em;
    font-weight: 600;
    color: #555;
}

.fid-input,
.fid-select {
    padding: 9px 12px;
    border: 1.5px solid #ddd;
    border-radius: 7px;
    font-size: 0.95em;
    color: #333;
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    width: 100%;
}

.fid-input:focus,
.fid-select:focus {
    border-color: var(--Color3);
}

.fid-input:invalid {
    border-color: color-mix(in srgb, var(--Color5) 35%, white);
}

/* ------------------------------------------------------------------
   Action bar (bottom buttons)
   ------------------------------------------------------------------ */
.fid-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
    align-items: center;
}

.fid-add-btn {
    background: none;
    border: 1.5px solid var(--Color3);
    color: var(--Color3);
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: none;
}

.fid-add-btn.fid-visible {
    display: inline-block;
}

.fid-add-btn:hover {
    background: var(--Color3);
    color: #fff;
}

.fid-submit-btn {
    background: var(--Color2);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px 28px;
    font-size: 0.95em;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
    display: none;
}

.fid-submit-btn.fid-visible {
    display: inline-block;
}

.fid-submit-btn:hover {
    opacity: 0.88;
}

/* ------------------------------------------------------------------
   Inline error zone
   ------------------------------------------------------------------ */
.fid-error-zone {
    color: var(--Color5, #e15154);
    background: color-mix(in srgb, var(--Color5, #e15154) 10%, white);
    border: 1px solid color-mix(in srgb, var(--Color5, #e15154) 30%, white);
    border-radius: 7px;
    padding: 10px 16px;
    margin-bottom: 16px;
    font-size: 0.9em;
    font-weight: 500;
    display: none;
}

.fid-error-zone.fid-visible {
    display: block;
}

/* ------------------------------------------------------------------
   Discount popup overlay
   ------------------------------------------------------------------ */
.fid-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}

.fid-popup {
    background: #fff;
    border-radius: 14px;
    padding: 36px 32px 28px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
    box-sizing: border-box;
}

.fid-popup-icon {
    font-size: 2.4em;
    margin-bottom: 12px;
}

.fid-popup-title {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--Color4);
    margin: 0 0 10px 0;
}

.fid-popup-discount {
    font-size: 2.2em;
    font-weight: 800;
    color: var(--Color2);
    margin: 8px 0 16px;
}

.fid-popup-text {
    font-size: 0.92em;
    color: #666;
    margin: 0 0 24px;
    line-height: 1.5;
}

.fid-popup-close-btn {
    background: var(--Color2);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 32px;
    font-size: 0.95em;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}

.fid-popup-close-btn:hover {
    opacity: 0.88;
}

svg.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
    overflow: visible;
}
@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.fa-spin svg.icon,
svg.icon.fa-spin {
    animation: fa-spin 1s linear infinite;
}

/**
 * Styles pour le Sélecteur de Langue Dropdown
 * Compatible avec les thèmes clair/sombre
 */

/* ============================================================
 * TEMPORAIRE — masquage du sélecteur de langue
 * Le temps que le contenu soit validé et les traductions
 * disponibles. À RETIRER une fois les langues prêtes.
 * ============================================================ */
.language-selector,
.language-selector-container,
[data-language-selector] {
    display: none !important;
}

/* Variables CSS pour thèmes */
:root {
    --lang-selector-bg: #ffffff;
    --lang-selector-border: #e1e5e9;
    --lang-selector-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --lang-selector-hover: #f8f9fa;
    --lang-selector-active: #e3f2fd;
    --lang-selector-text: #333333;
    --lang-selector-text-secondary: #666666;
    --lang-selector-radius: 8px;
    --lang-selector-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    --lang-selector-focus: #2196F3;
    --lang-selector-check: #4CAF50;
}

/* Thème sombre */
[data-theme="dark"] {
    --lang-selector-bg: #2d3748;
    --lang-selector-border: #4a5568;
    --lang-selector-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --lang-selector-hover: #374151;
    --lang-selector-active: #1e3a8a;
    --lang-selector-text: #ffffff;
    --lang-selector-text-secondary: #cbd5e0;
    --lang-selector-focus: #60a5fa;
}

/* Conteneur principal */
.language-selector {
    position: relative;
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    user-select: none;
    background: transparent;
}

/* Bouton déclencheur */
.language-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: var(--lang-selector-radius);
    color: var(--lang-selector-text);
    cursor: pointer;
    transition: var(--lang-selector-transition);
    font-size: 20px;
    line-height: 1;
}

.language-trigger:hover {
    background: rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.language-trigger:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.language-trigger:active {
    transform: translateY(1px);
}

.language-trigger::after {
    content: '▾';
    font-size: 0.7em;
    margin-left: 2px;
    opacity: 0.75;
    line-height: 1;
}

/* Drapeau dans le déclencheur */
.language-trigger .flag {
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 2px;
}

/* Menu déroulant */
.language-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--lang-selector-bg);
    border: 1px solid var(--lang-selector-border);
    border-radius: var(--lang-selector-radius);
    box-shadow: var(--lang-selector-shadow);
    list-style: none;
    padding: 4px 0;
    margin: 4px 0 0 0;
    z-index: 10000;
    min-width: 60px;
    
    /* États fermé par défaut */
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: var(--lang-selector-transition);
}

/* État ouvert */
.language-selector[data-state="open"] .language-dropdown {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* Options de langue */
.language-option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    position: relative;
    color: var(--lang-selector-text);
    border: none;
    outline: none;
}

.language-option:hover,
.language-option.focused {
    background: rgba(0, 0, 0, 0.05);
}

.language-option.active {
    background: rgba(0, 0, 0, 0.1);
}

.language-option.focused {
    background: rgba(0, 0, 0, 0.05);
}

.language-option.active.focused {
    background: rgba(0, 0, 0, 0.1);
}

/* Drapeaux dans les options */
.language-option .flag {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
}

/* Responsive Design */
@media (max-width: 767px) {
    .language-dropdown {
        position: fixed;
        top: auto;
        left: 10px;
        right: 10px;
        bottom: 10px;
        max-height: 60vh;
        overflow-y: auto;
        border-radius: 12px;
    }

    .language-option {
        padding: 16px;
    }

    .language-option .flag {
        width: 24px;
        height: 18px;
    }

    .language-trigger {
        width: 50px;
        height: 50px;
    }

    .language-trigger .flag {
        width: 28px;
        height: 21px;
    }

    .language-selector[data-state="open"]::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 999;
    }
}

@media (max-width: 480px) {
    .language-dropdown {
        left: 5px;
        right: 5px;
        bottom: 5px;
    }
}

/* Animations avancées */
@media (prefers-reduced-motion: no-preference) {
    .language-option {
        transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .language-option:hover {
        transform: translateX(2px);
    }
    
    .language-dropdown {
        animation: slideIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    @keyframes slideIn {
        from {
            transform: translateY(-10px) scale(0.95);
            opacity: 0;
        }
        to {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
    }
}

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    .language-selector,
    .language-trigger,
    .language-dropdown,
    .language-option {
        transition: none;
        animation: none;
    }
    
    .language-trigger .arrow {
        transition: none;
    }
}

/* États de focus pour l'accessibilité */
.language-selector:focus-within .language-trigger {
    border-color: var(--lang-selector-focus);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

/* Masquer le focus par défaut sur les options */
.language-option:focus {
    outline: none;
}

/* Focus visible pour la navigation clavier */
.keyboard-navigation .language-option.focused {
    outline: 2px solid var(--lang-selector-focus);
    outline-offset: -2px;
}

/* Indicateur de langue active plus visible */
.language-option.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--lang-selector-focus);
    border-radius: 0 2px 2px 0;
}

/* Styles pour les thèmes contrastés */
@media (prefers-contrast: high) {
    :root {
        --lang-selector-border: #000000;
        --lang-selector-text: #000000;
        --lang-selector-bg: #ffffff;
    }
    
    [data-theme="dark"] {
        --lang-selector-border: #ffffff;
        --lang-selector-text: #ffffff;
        --lang-selector-bg: #000000;
    }
    
    .language-trigger {
        border-width: 2px;
    }
    
    .language-option.active {
        border: 2px solid var(--lang-selector-focus);
    }
}

/* Styles d'impression */
@media print {
    .language-selector {
        display: none;
    }
}

/* Support pour les écrans de faible résolution */
@media (-webkit-min-device-pixel-ratio: 1) and (max-resolution: 96dpi) {
    .language-trigger .flag,
    .language-option .flag {
        font-size: 14px;
    }
}

/* Personnalisation des scrollbars sur mobile */
.language-dropdown {
    scrollbar-width: thin;
    scrollbar-color: var(--lang-selector-border) transparent;
}

.language-dropdown::-webkit-scrollbar {
    width: 4px;
}

.language-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.language-dropdown::-webkit-scrollbar-thumb {
    background: var(--lang-selector-border);
    border-radius: 2px;
}

.language-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--lang-selector-text-secondary);
}

/* Classes utilitaires */
.language-selector--compact .language-trigger {
    padding: 4px 8px;
    min-width: 50px;
}

.language-selector--compact .language-trigger .code {
    display: none;
}

.language-selector--large .language-trigger {
    padding: 12px 16px;
    font-size: 16px;
}

.language-selector--large .language-option {
    padding: 12px 16px;
    font-size: 16px;
}

/* Support pour les préférences de couleur */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --lang-selector-bg: #2d3748;
        --lang-selector-border: #4a5568;
        --lang-selector-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        --lang-selector-hover: #374151;
        --lang-selector-active: #1e3a8a;
        --lang-selector-text: #ffffff;
        --lang-selector-text-secondary: #cbd5e0;
    }
}
/* Login form view (SPA mode) — prefix: lf- */

/* -------------------------------------------------------
   Card wrapper — Log_Form en vue SPA (pas en overlay .show)
   ------------------------------------------------------- */
#Log_Form:not(.show) {
    width: 90%;
    max-width: 560px;
    margin: 24px auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    padding: 28px 28px;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    #Log_Form:not(.show) {
        width: 95%;
        padding: 20px 16px;
    }
}

/* PhoneBlock width — override multivitrines.css margin/width for SPA */
#Log_Form:not(.show) #PhoneBlock {
    width: 100%;
    margin: 0;
}

/* En mode SPA, PhoneInstruct est redondant avec le .lf-intro */
#Log_Form:not(.show) #PhoneInstruct {
    display: none;
}

/* PhoneDisplay (format convivial du téléphone) redondant avec la valeur dans l'input */
#Log_Form:not(.show) #PhoneDisplay {
    display: none !important;
}

/* Code OTP — pleine largeur */
#Log_Form:not(.show) #Code {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-size: 1em;
    background: white;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    color: #333;
    outline: none;
    margin: 0 0 12px 0;
    transition: border-color 0.2s;
    min-width: 0;
}

#Log_Form:not(.show) #Code:focus {
    border-color: var(--Color3);
}

/* GetPhoneBlock — select + input en ligne (DS grouped) */
#Log_Form:not(.show) #GetPhoneBlock {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: transparent;
    border-radius: 0;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    max-width: none;
    gap: 0;
}

#Log_Form:not(.show) #CountryCode {
    flex-shrink: 0;
    max-width: 175px;
    width: auto;
    height: 44px;
    padding: 0 28px 0 10px;
    font-size: 1em;
    background-color: #f5f5f5;
    border: 1.5px solid #ddd;
    border-right: none;
    border-radius: 8px 0 0 8px;
    box-sizing: border-box;
    color: #333;
    outline: none;
    margin: 0;
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    cursor: pointer;
}

#Log_Form:not(.show) #Phone {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    font-size: 1em;
    background: white;
    border: 1.5px solid #ddd;
    border-left: none;
    border-radius: 0 8px 8px 0;
    box-sizing: border-box;
    color: #333;
    outline: none;
    margin: 0;
    transition: border-color 0.2s;
}

#Log_Form:not(.show) #GetPhoneBlock:focus-within #CountryCode,
#Log_Form:not(.show) #GetPhoneBlock:focus-within #Phone {
    border-color: var(--Color3);
}

/* Input code + icône œil en suffixe */
.lf-input-eye-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 0;
}

.lf-input-eye-wrap #Code {
    width: 100%;
    padding-right: 40px;
}

.lf-eye-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
    font-size: 1em;
    float: none;
    margin: 0;
}

/* ValidatePhone / ValidateCode — pleine largeur, override margin:10px de .Button */
#Log_Form:not(.show) #ValidatePhone,
#Log_Form:not(.show) #ValidateCode {
    width: 100%;
    justify-content: center;
    margin: 16px 0 4px;
    box-sizing: border-box;
}


/* Texte explicatif au-dessus des champs */
.lf-intro {
    text-align: center;
    color: #666;
    font-size: 0.9em;
    margin: 0 0 16px;
    line-height: 1.5;
}

/* "Je n'ai pas encore de compte" */
.login-alt-action {
    text-align: center;
    font-size: 0.9em;
    margin-top: 12px;
    margin-bottom: 0;
    color: #666;
}

.login-alt-action a {
    color: var(--Color3);
    text-decoration: underline;
    cursor: pointer;
}

.login-alt-action a:hover {
    color: var(--Color4);
}

/* CodeBlock spacing */
#Log_Form:not(.show) #CodeBlock {
    margin-top: 0;
}

/* "Mot de passe oublié" link — aligné à droite, sous le champ code */
#Log_Form:not(.show) #ForgottenPwd {
    display: block;
    text-align: right;
    margin: 4px 0 12px;
    font-size: 0.8em;
    color: var(--Color3);
    cursor: pointer;
    text-decoration: underline;
}


/* Toggle "Se souvenir de moi" */
.lf-remember-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 4px;
    cursor: pointer;
    user-select: none;
}

.lf-remember-label {
    font-size: 0.88em;
    color: #555;
}

.lf-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.lf-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.lf-toggle-slider {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: 22px;
    transition: background 0.2s;
    cursor: pointer;
}

.lf-toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.lf-toggle input:checked + .lf-toggle-slider {
    background: var(--Color3, #4caf50);
}

.lf-toggle input:checked + .lf-toggle-slider::before {
    transform: translateX(18px);
}

/* Intro text avec badge Obligatoire en mode inscription */
body.register-mode .lf-intro {
    font-weight: 600;
    color: #444;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

/* #Messagerie — display:flex appliqué en JS dans initMessagerie() après NavMainMenu */
#Messagerie {
  flex: 1;
  overflow: hidden;
}
/* flex:1 au lieu de height:100% — height:100% ne marche pas sur enfant de min-height */
#Messagerie .page-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Conteneur global — flex row, remplit la hauteur du page-container */
.mg-app {
  display: flex;
  flex: 1;
  overflow: hidden;
  font-family: 'DM Sans', sans-serif;
  background: white;
}

/* ── Sidebar ──────────────────────────────── */
.mg-sidebar {
  width: 260px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
  border-right: 1px solid #e0e0e0;
  transition: width 0.2s ease, min-width 0.2s ease, opacity 0.15s;
  overflow: hidden;
}
.mg-app.mg-collapsed .mg-sidebar {
  width: 0;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
}
.mg-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px 12px;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}
.mg-sidebar-title {
  font-size: 13px;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
}
.mg-new-btn {
  display: block;
  margin: 10px 10px 6px;
  padding: 9px 14px;
  background: var(--Color3);
  color: white;
  border: none;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  flex-shrink: 0;
}
.mg-new-btn:hover { opacity: 0.88; }
#mg-conv-list { flex: 1; overflow-y: auto; padding: 6px; }
.mg-conv-card {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 2px;
  transition: background 0.12s;
  color: #333;
}
.mg-conv-card:hover { background: #e8e8e8; }
.mg-conv-card.active { background: var(--Color1); color: white; }
.mg-conv-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; }
.mg-conv-preview { font-size: 11px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-conv-card.active .mg-conv-name { color: white; }
.mg-conv-card.active .mg-conv-preview { color: rgba(255,255,255,0.75); }
.mg-conv-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 10px; color: #aaa; }
.mg-conv-card.active .mg-conv-meta { color: rgba(255,255,255,0.55); }
.mg-conv-count { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
.mg-conv-count .icon { width: 11px; height: 11px; }
.mg-conv-dates { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-conv-read-badge { flex-shrink: 0; padding: 1px 5px; border-radius: 4px; font-size: 9px; font-weight: 600; }
.mg-conv-read-badge--lu { background: color-mix(in srgb, var(--Color6) 18%, transparent); color: var(--Color6); }
.mg-conv-read-badge--unread { background: color-mix(in srgb, var(--Color5) 14%, transparent); color: var(--Color5); }
.mg-conv-card.active .mg-conv-read-badge--lu { background: rgba(255,255,255,0.2); color: rgba(255,255,255,0.9); }
.mg-conv-card.active .mg-conv-read-badge--unread { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85); }
.mg-pastille { display: inline-block; min-width: 17px; height: 17px; border-radius: 9px; background: var(--Color3); color: white; font-size: 10px; text-align: center; line-height: 17px; padding: 0 4px; margin-left: 5px; }

/* ── Zone principale ──────────────────────── */
.mg-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* Header */
.mg-main-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid #e8e8e8;
  background: white;
  flex-shrink: 0;
}
.mg-conv-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tout masqué jusqu'à conv active */
.mg-svc-switch {
  display: flex;
  background: #f0f0f0;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
#mg-composer { display: none; }
.mg-conv-active #mg-composer { display: block; }
#mg-quick-actions { display: none; }
.mg-conv-active #mg-quick-actions { display: flex; }

/* Service switch — pills */
.mg-svc-btn {
  padding: 5px 14px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s, box-shadow 0.12s;
  white-space: nowrap;
}
.mg-svc-btn.active {
  background: white;
  color: var(--Color3);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* Icon buttons */
.mg-icon-btn {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: #888;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.1s, color 0.1s;
}
.mg-icon-btn:hover { background: #f0f0f0; color: #333; }
.mg-icon-btn .icon { width: 18px; height: 18px; }
#mg-open-sidebar { display: none; }
.mg-app.mg-collapsed #mg-open-sidebar { display: flex; }

/* Messages */
.mg-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mg-welcome {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 15px;
  text-align: center;
}
.mg-bubble { max-width: 66%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; }
.mg-bubble.mine { align-self: flex-end; background: var(--Color1); color: white; border-bottom-right-radius: 4px; }
.mg-bubble.theirs { align-self: flex-start; background: #f0f0f0; color: #333; border-bottom-left-radius: 4px; }
.mg-thumb { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; display: block; margin-top: 6px; cursor: zoom-in; transition: opacity 0.15s; }
.mg-thumb:hover { opacity: 0.85; }
.mg-file-card { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 7px 10px; background: rgba(255,255,255,0.18); border-radius: 8px; min-width: 0; }
.mg-bubble.theirs .mg-file-card { background: rgba(0,0,0,0.07); }
.mg-file-card > .icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.8; }
.mg-file-name { font-size: 12px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mg-file-dl { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: inherit; opacity: 0.75; text-decoration: none; flex-shrink: 0; white-space: nowrap; }
.mg-file-dl:hover { opacity: 1; }
.mg-file-dl > .icon { width: 12px; height: 12px; }
.mg-bubble a { color: inherit; text-decoration: underline; }
.mg-empty { padding: 32px; text-align: center; color: #aaa; font-size: 13px; }

/* Composer */
.mg-composer {
  padding: 12px 20px 20px;
  background: white;
  flex-shrink: 0;
}
.mg-composer-inner {
  max-width: 720px;
  margin: 0 auto;
  background: #f7f7f7;
  border: 1.5px solid #e0e0e0;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mg-composer-inner:focus-within {
  border-color: var(--Color3);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--Color3) 14%, transparent);
}
#mg-textarea {
  border: none;
  background: transparent;
  padding: 12px 16px 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  resize: none;
  outline: none;
  min-height: 44px;
  max-height: 140px;
  overflow-y: auto;
  line-height: 1.5;
}
.mg-composer-btns {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 4px 8px 8px;
  gap: 4px;
}
.mg-send-btn {
  background: var(--Color3);
  color: white;
  border: none;
  border-radius: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.12s;
  flex-shrink: 0;
}
.mg-send-btn:hover { opacity: 0.85; }
.mg-send-btn .icon { width: 16px; height: 16px; }

/* Quick actions — toujours visibles sous les messages (ou sous le composer) */
.mg-quick-actions {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 20px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mg-conv-active .mg-quick-actions { padding-top: 0; }
.mg-qa-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.5px solid #e0e0e0;
  border-radius: 20px;
  background: white;
  color: #555;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.mg-qa-btn:hover { border-color: var(--Color3); color: var(--Color3); background: color-mix(in srgb, var(--Color3) 6%, white); }
.mg-qa-btn .icon { width: 15px; height: 15px; flex-shrink: 0; }
.mg-qa-call { color: var(--Color6); border-color: color-mix(in srgb, var(--Color6) 40%, white); }
.mg-qa-call:hover { background: color-mix(in srgb, var(--Color6) 8%, white); border-color: var(--Color6); color: var(--Color6); }

/* Mobile */
@media only screen and (max-width: 767px) {
  .mg-app { position: relative; }
  .mg-sidebar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    z-index: 20;
    box-shadow: 2px 0 10px rgba(0,0,0,0.12);
  }
  #mg-open-sidebar { display: flex; }
  .mg-app.mg-collapsed .mg-sidebar { width: 0; min-width: 0; opacity: 0; pointer-events: none; }
  .mg-bubble { max-width: 85%; }
  .mg-composer { padding: 10px 12px 14px; }
  .mg-messages { padding: 16px 12px 10px; }
}

/* DEPRECATED — fichier vide, conservé pour compatibilité Gulp (glob css) */

/* Variables personnalisables */
:root {
    --Color1: #74c5c3;
    --Color2: #1fa8b0;
    --Color3: #0981bc;
    --Color4: #254e89;
    --Color5: #e15154;
    --Color6: #017c47;
    --dark_text_color: #b9ddea;
    --bright_text_color: #025c84;
    --background_color: #cccccc;
    --Color-subscribe: #89e975;
    --Color-valid-input: #b0ffa0;

    /* Arrondi boutons — arrondi léger (maquette Construction_Page1_Site.jpg), plus pilule */
    --radius-button: 12px;
    /* Arrondi images de contenu (colonnes, cartes) — plus subtil que les boutons */
    --radius-image: 8px;

    /* Composant : menu déroulant (cf. aidd_docs/design-system/dropdown-menu.md) */
    --menu-bg: #ffffff;
    --menu-text: #333333;
    --menu-hover-bg: #f5f5f5;
    --menu-divider: #e9ecef;
}

/* Règles communes portrait et landscape */
#ModalBox {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


#SelResa,
#SelDate {
    width: -webkit-fill-available;
    max-width: 500px;
}

@media only screen and (orientation: portrait) {
    .SelectDuration {
        font-size: large;
        line-height: 1.5;
    }
}

@media only screen and (orientation: landscape) {
    .QRContentBlockAction {
        max-width: 500px;
    }
}

body {
    font-family: 'DM Sans', sans-serif;
    background-color: white;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

input:-internal-autofill-selected {
    background-color: white !important;
}

.OtherFlags {
    display: inline-block;
    width: 12%;
    max-width: 80px;
    aspect-ratio: 1.5;
    border-radius: 3px;
    background-size: cover;
    margin: 5px;
}

.Header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-height: 10%;
    height: 10%;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    color: var(--dark_text_color);
    background-color: var(--Color4);
    margin: 0px;
    padding: 1vh 0;
    text-align: left;
    flex-direction: row;
}

.Header span,
.Header select {
    font-weight: bold;
    display: flex;
    font-size: inherit;
    padding: 15px;
    border-radius: 15px;
    color: var(--bright_text_color);
    background: white;
    margin: 10px;
    max-width: 60%;
    justify-content: center;
    width: -webkit-fill-available;
}

.Header a {
    max-width: 10%;
    padding: 14px;
    margin: 10px;
    color: white;
}

.Header img {
    min-height: 50%;
    max-width: 20%;
    max-height: 100%;
    border-radius: 5px;
    background-color: white;
}

.SpaceIcon {
    padding-left: 10px;
    padding-right: 10px;
}

#FAQBtn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: var(--Color3);
    padding: 15px;
    border-radius: 20px;
    font-size: larger;
    font-weight: bold;
    z-index: 10;
}

.FAQTicket {
    display: flex;
    flex-direction: column;
    background: white;
    padding: 10px;
    width: 90%;
    margin-right: 2.5%;
    margin-left: 2.5%;
    margin-top: 10px;
    border-radius: 15px;
}

#ConvContext {
    /*padding: 5px;*/
    gap: 5px;
    display: flex;
    flex-direction: column;
    /*font-size: small;*/
    margin-right: 10px;
}

#MsgMailTo,
#MsgPhoneTo,
#MsgConvName {
    color: var(--bright_text_color);
    padding: 0px;
    margin: 0;
    width: -webkit-fill-available;
    max-width: max-content;
}

#MessagesBubblesList,
#ConversationList {
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
    position: absolute;
    left: 0px;
    top: 12%;
    width: 100%;
    overflow-y: scroll;
    max-height: 80%;
    /*border-radius: 10px;*/
}

#ConversationList {
    max-height: 88%;
}

#NavConv {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.tabs {
    top: 12%;
}

.tabs li {
    float: left;
    display: block;
    width: -webkit-fill-available;
    text-align: center;
    background: var(--Color3);
    padding: 8px;
    font-weight: bold;
    color: white;
    font-size: large;
}

.tabs li.active {
    background: color-mix(in srgb, var(--Color3) 80%, white 20%);
}

.ButtonNavMessagerie {
    color: white;
    background: var(--Color3);
    padding: 8px;
    border: none;
    border-radius: 10px;
    width: 30%;
}

.GroupConv {
    position: relative;
    display: flex;
    flex-direction: column;
    background: white;
    padding: 10px;
    width: 90%;
    margin-right: 2.5%;
    margin-left: 2.5%;
    margin-top: 10px;
    border-radius: 15px;
}

.GroupConv #Service {
    font-weight: bold;
}

.GroupConv .EntrepName {
    font-weight: bold;
    display: flex;
    /*align-self: start;*/
    font-size: x-large;
    flex-direction: row;
    align-items: center;
}

.GroupConv div.EntrepName img {
    max-width: 10%;
    /*border-radius: 50%;*/
    margin-right: 10px;
}

.GroupConv #UnreadPastille {
    display: none;
    color: white;
    background: var(--Color5);
    border: none;
    border-radius: 50%;
    padding: 2px;
    width: fit-content;
    min-width: 1.2em;
    height: 1.2em;
    text-align: center;
    position: absolute;
    right: 0.5em;
    top: 0.5em;
}

.Bubble {
    padding: 15px;
    text-align: left;
    /*	line-break: strict;*/
    display: inline-block;
}

.Bubble a {
    line-break: anywhere;
}

.Bubble img {
    border-radius: 2px;
}

.TeamToUser {
    margin-left: 100px;
    padding: 10px;
    text-align: right;
}

.TeamToUser .Bubble {
    border-radius: 20px 20px 0px 20px;
    background-color: var(--Color4);
    color: var(--dark_text_color);
}

.TeamToUser .Bubble a:link,
.TeamToUser .Bubble a:visited {
    color: var(--dark_text_color);
    opacity: 0.6;
}

.UserToTeam {
    margin-right: 100px;
    padding: 10px;
    text-align: left;
}

.UserToTeam .Bubble {
    border-radius: 20px 20px 20px 0px;
    background-color: var(--Color1);
    color: var(--bright_text_color);
}

.UserToTeam .Bubble a:link,
.UserToTeam .Bubble a:visited {
    color: var(--bright_text_color);
    opacity: 0.6;
}

.Time {
    font-size: 0.6em;
}

#MessagesFooter {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    /*min-height: 100px;*/
    height: 6%;
    color: grey;
    margin: 0px;
    padding: 1%;
    text-align: left;
}

#Text {
    position: absolute;
    left: 10px;
    bottom: 10px;
    right: 100px;
    font-size: 1em;
    border-radius: 10px;
    padding-left: 60px;
    padding-top: 10px;
    padding-right: 10px;
    border: none;
    resize: none;
    min-height: 30px;
}

#Send {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: var(--dark_text_color);
    background-color: var(--Color2);
    border-radius: 40px;
    padding: 10px;
    font-size: 1.5em;
    border: none;
}

#File {
    position: absolute;
    bottom: 25px;
    left: 25px;
    color: grey;
}

#CguWrap,
#MapWrap {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 100%;
    overflow-y: scroll;
}

#gMap {
    position: absolute;
    left: 0px;
    top: 90px;
    width: 100%;
    height: 100%;
}

#CguImg {
    position: absolute;
    left: 0px;
    top: 90px;
    width: 100%;
}

#HdCaption {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #fff;
    font-size: 1.4em;
    font-weight: 600;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
    z-index: 1;
    display: none;
}

#ModalWrap {
    width: 100%;
}

#ModalShadow {
    position: relative;
    width: 100%;
}

#ModalBox {
    color: var(--bright_text_color);
    text-align: center;
    background-color: white;
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#LogoWrap {
    height: 50px;
}


#Chevron1,
#Chevron2 {
    height: 50px;
}

#Logo {
    height: 50px;
    max-height: 50px;
    max-width: 100%;
    transition: height var(--motion-duration-base, 0.2s) ease, max-height var(--motion-duration-base, 0.2s) ease;
}

#main-header.header-compact #Logo {
    height: 34px;
    max-height: 34px;
}

#Flags img {
    display: inline-block;
    width: 12%;
    max-width: 80px;
    aspect-ratio: 1.5;
    border-radius: 3px;
    background-size: cover;
    margin: 5px;
}

#Code,
#Email,
#Name,
#CodeImg,
#PromoCode {
    /* #ModalBox 0[type=text],*/
    font-size: 1em;
    border-radius: 15px;
    padding: 10px;
    border: none;
    margin: 10px;
    text-align: center;
    width: 90%;
}

#Code {
    width: auto;
}

#ForgottenPwd {
    text-decoration: underline;
    color: var(--Color3);
}

#CodeImg {
    /* width: auto; */
    max-width: 100%;
}

#PhoneBlock {
    width: 90%;
    margin-left: 5%;
    margin-top: 10px;
}

#CodeBlock {
    margin-top: 20px;
}

#GetPhoneBlock {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    margin-top: 10px;
    width: 100%;
    max-width: none;
    gap: 0;
}

#CGUBlock {
    display: flex;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1rem 0 0 0;
}

#ErrorPhoneMsg {
    padding: 10px 0 10px 0;
}

#SubBlock,
#UnknownPhoneBlock {
    flex-direction: column;
    align-items: center;
}


.captcha-section {
    width: 90%;
    max-width: 320px;
    margin: 12px auto;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#CaptchaTxt {
    font-size: 0.8em;
    font-weight: 600;
    color: var(--Color4);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 8px 12px 6px;
}

.captcha-section img {
    width: 100%;
    height: auto;
    display: block;
    border-top: 1px solid #e0e0e0;
}

.captcha-section .loader {
    width: 40px;
    height: 40px;
    margin: 20px auto;
    align-self: center;
}

.captcha-section #CodeImg {
    width: calc(100% - 24px);
    margin: 8px 12px;
    border-radius: 6px;
    background: white;
    border: 1px solid #ddd;
    padding: 8px 10px;
    font-size: 0.95em;
    text-align: left;
}


.Checkbox {
    margin: 10px;
    display: flex;
    flex-wrap: wrap;
    transform: scale(1.3, 1.3);
    max-height: 50%;
    min-height: 1.25rem;
    min-width: 1.25rem;
}

#CGU {
    display: inline-flex;
    flex-wrap: wrap;
}

#CGUtxt,
#SMStxt {
    width: -webkit-fill-available;
}

#ValidateCGU,
#ValidateSMS,
#ConfirmLocker {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: justify;
    gap: 1rem;
    width: 100%;
}

#ConfirmLocker {
    background-color: var(--Color1);
    border-radius: 10px;
    width: -webkit-fill-available;
}

#ConfirmLockerTxt {
    text-decoration: underline;
    line-height: 1.5;
}

#ValidateCode {
    margin-top: 20px;
}

#WishSubscribe,
#SubscribeValid {
    background: var(--Color-subscribe) !important;
}

#Phone,
#PrefixPhone {
    flex: 1;
    font-size: 1em;
    padding: 10px 14px;
    background: white;
    border: 1.5px solid #ddd;
    border-left: none;
    border-radius: 0 8px 8px 0;
    min-width: 0;
    box-sizing: border-box;
}

input.green-background {
    background-color: color-mix(in srgb, var(--Color6) 12%, white) !important;
    border-color: var(--Color6) !important;
    background-image: none !important;
}

#PrefixPhone {
    width: 10%;
}

#LoginError {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#CountryCode {
    font-size: 1em;
    padding: 10px 28px 10px 10px;
    border: 1.5px solid #ddd;
    border-right: none;
    border-radius: 8px 0 0 8px;
    background-color: #f5f5f5;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    cursor: pointer;
    flex-shrink: 0;
    max-width: 175px;
    width: auto;
}

#GetPhoneBlock:focus-within #CountryCode,
#GetPhoneBlock:focus-within #Phone {
    border-color: var(--Color3);
}

/* -------------------------------------------------------
   DS — Select + Input groupés (composant global)
   ------------------------------------------------------- */
.ds-input-split {
    display: flex;
    align-items: stretch;
    max-width: 320px;
    margin-bottom: 12px;
}

.ds-input-split-select {
    flex-shrink: 0;
    padding: 10px 28px 10px 12px;
    border: 1.5px solid #ddd;
    border-right: none;
    border-radius: 8px 0 0 8px;
    font-size: 14px;
    background-color: #f5f5f5;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    cursor: pointer;
    outline: none;
    color: #333;
}

.ds-input-split-field {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 1.5px solid #ddd;
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    outline: none;
}

.ds-input-split:focus-within .ds-input-split-select,
.ds-input-split:focus-within .ds-input-split-field {
    border-color: var(--Color3);
}

#ValidatePhone {
    width: fit-content;
    padding: 10px 20px;
}

.Button {
    color: white;
    background: var(--Color2);
    border-radius: var(--radius-button);
    padding: 10px 20px;
    border: none;
    margin: 10px;
    width: 40%;
    display: inline-block;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    opacity: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: opacity 0.2s;
}

.Button:disabled,
.Button.a_disabled {
    pointer-events: none;
    opacity: 0.45;
    cursor: not-allowed;
}

a:hover,
.Button:hover {
    cursor: pointer;
}

.noClick {
    pointer-events: none;
    z-index: 0;
}

.noClickCGU {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Désactiver tous les clics */
    background-color: rgba(0, 0, 0, 0.5);
    /* Optionnel pour visuellement bloquer l'accès */
    z-index: 999;
}

.clickable {
    z-index: 1000;
    pointer-events: all;
}

.blink-smooth {
    animation: blinkColor 2s infinite ease-in-out;
}

.GroupBtn {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 8px;
}

.GroupBtn .Button {
    width: auto;
    flex: 1 1 40%;
    min-width: 120px;
    max-width: 200px;
    margin: 4px;
    white-space: nowrap;
    text-align: center;
}

#ValidateResa,
#ReturnSelDate,
#ValidDate,
#Backtestphone,
#SubscribeValid,
#ValidCbBlock,
#ReturnResa {
    align-items: center;
    align-self: center;
    justify-content: center;
    font-weight: bold;
}

#ValidCbBlock {
    position: relative;
    z-index: 100;
}

#ResaRecap {
    display: flex;
    align-items: self-start;
    flex-direction: column;
    background-color: color-mix(in srgb, var(--Color6) 20%, transparent);
    color: var(--bright_text_color);
    border: none;
    border-radius: 10px;
    text-align: start;
    margin-bottom: 10px;
    padding: 10px;
    width: -webkit-fill-available;
    line-height: 1.5;
    gap: 10px;
}

#ResaRecapTitle {
    font-weight: bold;
    text-decoration: underline;
}

#RecapLocker {
    display: flex;
    flex-direction: column;
    width: -webkit-fill-available;
    gap: 5px;
}

#RecapLocker span {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.visualizeBtn {
    text-decoration: underline;
    color: color-mix(in srgb, var(--bright_text_color) 80%, black 20%);
    font-weight: bold;
}

#ResaKeyBlock {
    display: flex;
    flex-direction: column;
}

#ValidateCB,
#ValidateSub {
    background: transparent;
    border: none;
    color: var(--bright_text_color);
    font-weight: bold;
    font-size: 1rem;
}

#ValidateCB {
    position: sticky;
    z-index: 90;
    pointer-events: none;
}

#BtnFalseCodeAction {
    display: flex;
    flex-direction: row;
}

#PhoneDisplay {
    font-size: 0.8em;
    margin: 10px;
}


#HelpMenuContent {
    flex-direction: column;
    align-items: start;
    padding: 5px 20px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.5);
    font-size: 1.2rem;
    text-align: left;
}

#HelpMenuContent p {
    font-weight: normal;
}

#HelpMenuContent p i {
    padding: 10px;
    background-color: var(--Color3);
    border-radius: 10px;
    color: var(--dark_text_color);
}

.Instruct {
    font-weight: bold;
    font-size: large;
}

#DateMsgError,
#LoginError,
#ErrorEmail,
#ErrorName,
#ResaErrorLocker,
#InstructLockerCheck {
    /*color: var(--Color5);*/
    /*le rouge est moche*/
    color: var(--Color5);
    width: 100%;
}

#Welcome {
    font-size: 1.25rem;
    margin: 0.5rem 0;
}

/* ── Footer ── */
#ModalFooter {
    margin-top: auto;
    background: var(--Color2);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.82em;
}

#ModalFooter a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.88);
}

#ModalFooter a:hover {
    opacity: 0.65;
    text-decoration: underline;
}

/* Grille unique — 3 colonnes : marque | localisation+carte | contact */
.footer-full-grid {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 40px 0 28px;
    justify-content: center;
}

.footer-brand-col {
    flex: 0 0 25%;
    padding-right: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Séparateur gauche sur cols info (évite un border orphelin sur la col marque) */
.footer-info-cols {
    flex: 0 0 75%;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0;
}

.footer-loc-col {
    padding: 0 32px 24px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-contact-col {
    padding: 0 0 24px 32px;
}

.footer-logo-wrap {
    display: block;
    margin-bottom: 20px;
}

.footer-logo {
    display: block;
    max-height: 44px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.footer-links-label {
    font-weight: 700;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 10px;
    opacity: 0.55;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-links a {
    white-space: nowrap;
    font-size: 0.95em;
    opacity: 0.85;
}

.footer-info-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 1em;
    font-weight: 700;
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.footer-loc-col .footer-info-heading,
.footer-contact-col .footer-info-heading {
    justify-content: center;
}

.footer-info-heading .icon {
    width: 14px;
    height: 14px;
    fill: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.footer-info-addr {
    margin: 0 0 14px;
    line-height: 1.5;
    opacity: 0.75;
}

/* Carte interactive (Google Maps JS API — lib/maps-helper.js renderStaticMap, même SDK que points-vente) */
.footer-map {
    width: 100%;
    height: 160px;
    border-radius: 8px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

/* Repli si pas de geo ou si le SDK échoue à charger */
.footer-map-fallback-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 160px;
    border-radius: 8px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    text-decoration: none;
    transition: background var(--motion-duration-base);
}

.footer-map-fallback-link:hover {
    background: rgba(255, 255, 255, 0.12);
}

.footer-map-fallback-link--hidden {
    display: none;
}

.footer-map-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
}

.footer-map-fallback .icon {
    width: 28px;
    height: 28px;
    fill: rgba(255, 255, 255, 0.5);
}

.footer-map-fallback span {
    font-size: 0.88em;
    font-weight: 600;
}

.btn-secondary.footer-itinerary-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: 0.85em;
    border-color: color-mix(in srgb, var(--dark_text_color) 45%, transparent);
    color: var(--dark_text_color);
}

.btn-secondary.footer-itinerary-btn:hover {
    background: color-mix(in srgb, var(--dark_text_color) 10%, transparent);
}

/* Canaux contact */
.footer-contact-channel {
    padding: 22px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-contact-channel:first-of-type {
    padding-top: 0;
}

.footer-contact-channel:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

h5.footer-channel-label {
    font-weight: 700;
    margin: 0 0 14px;
    padding: 0;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    opacity: 0.55;
    text-align: left;
}

.footer-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    text-align: left;
}

.footer-contact-row .icon {
    width: 13px;
    height: 13px;
    margin-top: 3px;
    fill: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.footer-contact-row a {
    font-size: 0.94em;
}

.footer-machine-desc {
    width: 100%;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.5;
    font-size: 0.9em;
    opacity: 0.6;
    text-align: left;
}

.footer-machine-desc:empty {
    display: none;
}

.footer-meta {
    padding-bottom: 16px;
    opacity: 0.45;
    font-size: 0.9em;
    text-align: center;
}

.footer-meta:empty {
    display: none;
}

/* Responsive */
@media (max-width: 767px) {
    .footer-full-grid {
        flex-direction: column;
        gap: 0;
        padding: 28px 0 16px;
    }

    .footer-brand-col {
        max-width: none;
        padding-right: 0;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        margin-bottom: 20px;
    }

    .footer-info-cols {
        grid-template-columns: 1fr;
        gap: 20px;
        width: 100%;
    }

    .footer-loc-col,
    .footer-contact-col {
        padding: 0;
        border: none;
    }
}

/* Login form overlay — .show class added by requireLogin() */
#Log_Form.show {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
    overflow-y: auto;
}

#MyBooking,
#MyLockers,
#MyTransacMach,
#MyResa,
#divBlockConsigne,
#divBlockLocation {
    display: flex;
    flex-direction: column;
    width: 100%;
}


.Form {
    width: 100%;
    background: var(--dark_text_color);
    color: var(--bright_text_color);
    flex-direction: column;
    align-self: center;
    align-items: center;
    text-align: center;
    border: none;
    padding-top: 5px;
    position: relative;
}

.Title {
    /*width:100%;
	text-decoration: solid;
	text-decoration: underline;
	font-weight: bolder;
	font-size: larger;
	color: var(--bright_text_color);*/
    font-weight: bold;
    font-size: larger;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 5px;
}

.mapsbtn {
    background: var(--Color2);
    align-self: flex-start;
    margin-top: 0px;
    margin-right: 5px;
    margin-left: 5px;
    padding: 5px;
    border-radius: 5px;
}

.SingleBook,
.SingleTransac,
.SingleLocker {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-self: center;
    align-items: center;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 10px;
    padding-top: 5px;
    border: none;
    border-radius: 10px;
    background: color-mix(in srgb, var(--Color4) 80%, black 20%);
    color: var(--dark_text_color);
}

#PwdInput {
    width: 20%;
}

.SingleTransac #DescInput {
    width: 90%;
    margin: 0 2%;
    height: auto;
    min-height: 50px;
    max-height: 300px;
    overflow: hidden;
    resize: vertical;
    padding: 2%;
    border: none;
    border-radius: 10px;
}

#BtnDescValid {
    width: 40%;
    align-self: center;
}

.SingleTransac div.divmoney span,
.SingleTransac div.divmoney a {
    width: auto;
}

.AllocatedUser {
    /*display: flex;*/
    flex-direction: column;
    width: 96%;
    margin: 2%;
    background-color: color-mix(in srgb, var(--Color1) 80%, var(--Color3) 10%);
    padding: 10px 0;
    position: relative;
    border-radius: 10px;
    text-align: start;
}

#AllocatedUsertxt {
    padding: 5px;
}

#selectLang,
#selectLangSponso {
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 30px;
    padding-left: 10px;
}

.BtnMyResa {
    display: flex;
    text-align: center;
    position: relative;
    /* margin-top: 5px;
	margin-bottom: 5px; */
    min-width: 5%;
    width: auto;
    padding: 10px;
    max-width: 90%;
    border: none;
    border-radius: 10px;
    color: black;
    background: var(--Color2);
    justify-content: space-evenly;
    box-shadow: 1px -1px 3px 0px rgba(0, 0, 0, 0.5);
}

#BtnPwdValid {
    margin: 0;
    align-self: flex-start;
    display: inline;
    width: 25%;
    color: var(--bright_text_color);
}

#BtnMajTraveller {
    position: absolute;
    top: 5px;
    right: 10px;
}

.section-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin: 12px 0 8px;
    color: var(--dark_text_color);
}

.list-scrollable {
    max-height: 200px;
    overflow-y: auto;
}

#MyResaActions {
    margin-top: 20px;
}

#SuppAllocUser {
    position: absolute;
    right: 10px;
    bottom: 5px;
    background: var(--Color5);
}

#CancelBook {
    background-color: var(--Color5);
}

.SingleTransac #InfoTraveller.ShowInfoUser {
    display: flex;
    gap: 5px;
    padding: 5px;
}

.SingleTransac #InfoTraveller.HideInfoUser {
    display: none;
}

#cellLocation {
    flex-direction: row;
    align-content: space-around;
}

#DescText {
    padding-right: 15px;
}

.infoLock {
    padding: 5px;
    background: var(--Color1);
    color: var(--Color4);
    padding-bottom: 5px;
    border-radius: 10px;
    width: -webkit-fill-available;
    text-align: start;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.infoLock > * {
    min-height: 1.5rem;
}

.infoLock .row {
    display: flex;
    flex-direction: row;
    width: -webkit-fill-available;
    padding: 0 5px;
    border-radius: 10px;
    text-align: start;
    align-items: center;
    color: var(--bright_text_color);
    justify-content: space-between;
}

.SingleBook .infoLock {
    padding: 0;
}

#infoLock #booktransac {
    display: flex;
    flex-direction: column;
    background-color: color-mix(in srgb, var(--Color1) 80%, var(--Color3) 10%);
    width: 98%;
    padding: 1%;
    gap: 10px;
}

#booktransac #bookamount {
    align-self: end;
    justify-content: flex-end;
    font-weight: bold;
    font-size: small;
}

#DateLock {
    justify-content: center;
    margin: 0;
    background: var(--Color3);
}

.SingleBook #LocaBookMach {
    display: flex;
    width: -webkit-fill-available;
    text-align: center;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px 5px 10px;
}

.formAllocateLocker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px;
}

.formAllocateLocker > * {
    width: -webkit-fill-available;
}

.inputAllocateLocker {
    border: none;
    padding: 10px;
    border-radius: 10px;
    width: -webkit-fill-available;
}

.SingleTransac .FormHide {
    display: none;
}

.LocationInvalide {
    display: flex;
    flex-direction: column;
    text-align: justify;
    padding: 0 5px;
}

#ActionTransac {
    padding: 0;
    background: none;
    color: var(--dark_text_color);
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
}

.SingleBook span.CancelStatus {
    width: 20%;
    background-color: grey;
    color: white;
}

#ResaOnline {
    flex-direction: column;
    width: 100%;
}

#ResaLocker,
#WrapStripe {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    position: relative;
    justify-content: center;
    width: -webkit-fill-available;
    border-radius: 20px;
    align-items: center;
}

#confirmresa {
    z-index: 0;
}

#ResaLocker {
    background-color: color-mix(in srgb, var(--Color1) 80%, transparent 30%);
}

#ResaLocker select,
#SelectNetwork {
    padding: 5px;
    border-radius: 10px;
    width: -webkit-fill-available;
    border: none;
    max-width: 60%;
}

#SelectDateInstruct,
#SelectMachineInstruct,
#SelectLockerInstruct,
#card_info_title {
    font-weight: bold;
    width: -webkit-fill-available;
}

#SelectDateInstruct,
#SelectMachineInstruct,
#SelectLockerInstruct {
    text-decoration: underline;
}

#SelectMachineInstruct {
    margin: 10px 0;
}

#SliceSelector {
    margin-left: 1rem;
    margin-right: 1rem;
}

#InfoNonLinearBook {
    display: none;
    flex-direction: column;
    font-size: smaller;
    margin: 5px 0 5px 0;
}

#SelResa,
#SelDate {
    display: flex;
    /*flex-direction: row;*/
    justify-content: space-around;
    padding-bottom: 5px;
    align-items: center;
    flex-wrap: wrap;
    /*max-width: -webkit-fill-available;*/
}

#SelResa {
    padding-top: 10px;
    padding-bottom: 20px;
}

#SelDate {
    flex-direction: column;
}

#MachineSchedules {
    display: inline-block;
    margin: 10px 0;
    line-height: 1.5;
}

#SchedulesTitle {
    font-weight: bold;
}

#MachineOpen {
    margin-right: 20px;
}

#ConfirmLockerBlock {
    flex-direction: column;
}

#DateFrom,
#DateTo {
    width: -webkit-fill-available;
    margin: 0.5rem 0;
}

.SelectDuration {
    max-width: 40%;
    margin: 2px;
    padding: 5px;
    border-radius: 10px;
    border: none;
    width: -webkit-fill-available;
}

#DateFrom #HourStart,
#DateTo #HourEnd,
#DateFrom #MinuteStart,
#DateTo #MinuteEnd {
    max-width: 15%;
    width: -webkit-fill-available;
    margin: 2px;
    padding: 5px;
    font-size: large;
    line-height: 1.5;
}

#MinBookTimeInfo {
    display: none;
    color: var(--Color5);
    font-weight: bold;
}

.LockerViewBack {
    /*float:right; */
    width: 200px;
    height: 250px;
    margin: 0px;
    background-image: url(../img/LockerAccessVision.png);
    background-image: image-set(url(../img/LockerAccessVision.webp) type("image/webp"), url(../img/LockerAccessVision.png) type("image/png"));
    background-repeat: no-repeat;
    text-align: right;
    padding: 0px;
}

.LockerInView {
    background-color: var(--Color1);
    display: block;
    border: 1px solid black;
    position: relative;
    right: 0px;
    bottom: 2px;
    float: right;
}

#PmrBlock {
    display: flex;
    justify-content: center;
    align-items: center;
}

#CustomerRecharge {
    background: var(--Color1);
    width: -webkit-fill-available;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    font-weight: bold;
    align-items: center;
}

#RechargeAmount {
    /*width: 70%;*/
    padding: 8px;
    border-radius: 10px;
    background-color: whitesmoke;
    align-items: center;
    align-self: center;
    font-size: large;
    font-weight: bold;
}

#inputRechargeAmount {
    background-color: whitesmoke;
    width: auto;
    border: none;
    outline: none;
    /* Supprime la bordure ajoutée au focus */
    box-shadow: none;
    /* Supprime les ombres éventuelles */
    font-size: large;
    font-weight: bold;
    text-align: end;
}

#StripeInfoBlock {
    background: var(--Color1);
    width: -webkit-fill-available;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    margin: 20px 0;
}

#StripeLinkIssueBlock {
    margin: 15px 0;
    font-weight: bold;
}

#payment_form {
    width: -webkit-fill-available;
}

#card_name,
#card_element {
    width: -webkit-fill-available;
    padding: 8px;
    border-radius: 10px;
    background-color: whitesmoke;
}

#ButtonStripeForm,
#BtnNavResa {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

/* ── Profil page ── */

/* ProfileForm — apply DS styles to inputs/buttons generated by account.js (no class injected) */
#ProfileForm input[type="text"],
#ProfileForm input[type="number"],
#ProfileForm input[type="email"] {
    display: block;
    width: 100%;
    max-width: 480px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    font-family: 'DM Sans', sans-serif;
    outline: none;
    box-sizing: border-box;
    margin-bottom: 12px;
    transition: border-color 0.15s;
}

#ProfileForm input[type="text"]:focus,
#ProfileForm input[type="number"]:focus,
#ProfileForm input[type="email"]:focus {
    border-color: var(--Color3);
}

#ProfileForm button[id="saveProfile"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--Color2);
    color: white;
    border: none;
    border-radius: var(--radius-button);
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    transition: opacity 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

#ProfileForm button[id="saveProfile"]:hover {
    opacity: 0.88;
}


.prf-section-title {
    color: var(--Color4);
    border-left: 4px solid var(--Color3);
    padding-left: 14px;
    margin-bottom: 24px;
}

.prf-section-title--center {
    border-left: none;
    padding-left: 0;
    text-align: center;
}

/* Center the alt section content */
.content-section--alt .prf-account-desc,
.content-section--alt .prf-account-block {
    margin-left: auto;
    margin-right: auto;
}

.prf-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

#ProfilInfo.prf-info-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.prf-form-panel {
    background: color-mix(in srgb, var(--Color3) 8%, white);
    border: 1px solid color-mix(in srgb, var(--Color3) 20%, transparent);
    border-radius: 12px;
    padding: 24px;
}

/* Hint shown by default; hidden by JS when form has content */
.prf-form-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 16px;
    color: color-mix(in srgb, var(--Color3) 70%, #666);
    text-align: center;
    min-height: 100px;
}

.prf-form-hint .icon {
    width: 32px;
    height: 32px;
    opacity: 0.5;
}

.prf-form-hint p {
    margin: 0;
    font-size: 0.9em;
    line-height: 1.5;
}

.prf-field-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    min-height: 52px;
}

.prf-field-row:last-child {
    border-bottom: none;
}

.prf-label,
#YouAre,
#NumberIs,
#PwdIs,
#EmailIs,
#AmountIs {
    min-width: 120px;
    width: 30%;
    font-weight: 600;
    color: var(--Color4);
    font-size: 0.9em;
    flex-shrink: 0;
}

.prf-value,
#ProfilName,
#YourNumber,
#YourPwd,
#YourEmail {
    flex: 1;
    color: #333;
}

.edit-btn {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 50%;
    color: var(--Color3);
    transition: background 0.15s;
}

.edit-btn:hover {
    background: color-mix(in srgb, var(--Color3) 12%, transparent);
}

/* Virtual account section */
.prf-account-desc {
    color: var(--background_color);
    font-size: 0.95em;
    line-height: 1.6;
    max-width: 500px;
    margin-bottom: 24px;
    text-align: center;
}

.prf-account-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 400px;
}

.prf-account-balance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: white;
    border-radius: 12px;
    padding: 16px 32px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.prf-balance-value,
#YourAmount {
    font-size: 1.6em;
    font-weight: 700;
    color: var(--Color3);
}

.prf-recharge-btn,
#GoRecharge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
}

@media only screen and (max-width: 767px) {
    .prf-layout {
        grid-template-columns: 1fr;
    }

    .prf-label,
    #YouAre,
    #NumberIs,
    #PwdIs,
    #EmailIs,
    #AmountIs {
        min-width: 80px;
        width: 28%;
        font-size: 0.8em;
    }
}

#TblLocker,
#WrapLocker {
    display: inline-table;
    vertical-align: middle;
    width: 100%;
    border-collapse: separate;
    border-spacing: 5px;
    margin-top: 10px;
}

#WrapLocker tr {
    flex-wrap: wrap;
    width: 90%;
}

#WrapLocker th {
    width: 20%;
    max-width: 100px;
}

#WrapLocker select {
    border: none;
    border-radius: 5px;
}

#Profil {
    /* Fond/bords supprimés — la vue utilise désormais page-container + sections DS */
}

#ProfileForm {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px;
    position: relative;
}

#ProfileForm input {
    font-size: 1em;
    border-radius: 10px;
    padding: 5px 10px;
    border: none;
    margin: 5px;
    text-align: left;
    width: auto;
}

#cancelLink {
    position: absolute;
    right: -2rem;
    top: 0.2rem;
}

#saveProfile {
    border-radius: 10px;
    padding: 5px;
    border: none;
    margin: 5px;
}

#InfoReseau {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    font-size: larger;
    font-weight: bold;
    margin-bottom: 20px;
}

.NetworkEnt {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background-color: color-mix(in srgb, var(--Color1) 80%, white 20%);
    padding: 10px;
    font-size: larger;
    font-weight: bold;
    margin: 10px 0 10px 0;
}

.NetworkEnt a {
    color: var(--bright_text_color);
}

/* Responsive container (Tailwind breakpoints) */
/* Breakpoints de largeur de contenu (≠ breakpoints de layout 768/1200px).
   Ces max-width limitent la largeur lisible du contenu dans les sections.
   Utilisé dans info-section, cta-section, points-vente, faq, contact. */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .container { max-width: 640px; }
}
@media (min-width: 768px) {
    .container { max-width: 768px; }
}
@media (min-width: 1024px) {
    .container { max-width: 1024px; }
}
@media (min-width: 1280px) {
    .container { max-width: 1280px; }
}
@media (min-width: 1536px) {
    .container { max-width: 1536px; }
}

/* Page containers */
.page-container {
    width: 100%;
    padding: 0;
    margin: 0 auto;
}

.view-render-error {
    padding: 40px 20px;
    text-align: center;
    color: var(--Color5);
    font-size: 0.95em;
}

.view-render-error p:first-child {
    font-size: 1.1em;
    margin-bottom: 8px;
}

.content-section {
    width: 100%;
    margin-bottom: 0;
    background: white;
    padding: clamp(32px, 6vh, 72px) 0;
    min-height: 30vh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-section--alt {
    background: color-mix(in srgb, var(--Color1) 6%, white);
}

/* ── Webcontent style tokens — background-color-N + accent-color-N ─────── */

/* .soft — fond teinté léger (color-mix 10%) */
.content-section.background-color-1.soft { background: color-mix(in srgb, var(--Color1) 10%, white); }
.content-section.background-color-2.soft { background: color-mix(in srgb, var(--Color2) 10%, white); }
.content-section.background-color-3.soft { background: color-mix(in srgb, var(--Color3) 10%, white); }
.content-section.background-color-4.soft { background: color-mix(in srgb, var(--Color4) 10%, white); }
.content-section.background-color-5.soft { background: color-mix(in srgb, var(--Color5) 10%, white); }
.content-section.background-color-6.soft { background: color-mix(in srgb, var(--Color6) 10%, white); }

/* .plain — fond plein couleur sombre → dark_text_color (clair, comme le nav)
   .soft — fond teinté clair → bright_text_color (sombre)
   !important requis pour surcharger les styles inline de l'éditeur Quill */
.content-section.background-color-1.plain { background: var(--Color1); color: var(--dark_text_color); }
.content-section.background-color-1.plain h2,
.content-section.background-color-1.plain h3 { color: var(--dark_text_color) !important; }
.content-section.background-color-1.plain .wc-section-body { color: var(--dark_text_color) !important; }

.content-section.background-color-2.plain { background: var(--Color2); color: var(--dark_text_color); }
.content-section.background-color-2.plain h2,
.content-section.background-color-2.plain h3 { color: var(--dark_text_color) !important; }
.content-section.background-color-2.plain .wc-section-body { color: var(--dark_text_color) !important; }

.content-section.background-color-3.plain { background: var(--Color3); color: var(--dark_text_color); }
.content-section.background-color-3.plain h2,
.content-section.background-color-3.plain h3 { color: var(--dark_text_color) !important; }
.content-section.background-color-3.plain .wc-section-body { color: var(--dark_text_color) !important; }

.content-section.background-color-4.plain { background: var(--Color4); color: var(--dark_text_color); }
.content-section.background-color-4.plain h2,
.content-section.background-color-4.plain h3 { color: var(--dark_text_color) !important; }
.content-section.background-color-4.plain .wc-section-body { color: var(--dark_text_color) !important; }

.content-section.background-color-5.plain { background: var(--Color5); color: var(--dark_text_color); }
.content-section.background-color-5.plain h2,
.content-section.background-color-5.plain h3 { color: var(--dark_text_color) !important; }
.content-section.background-color-5.plain .wc-section-body { color: var(--dark_text_color) !important; }

.content-section.background-color-6.plain { background: var(--Color6); color: var(--dark_text_color); }
.content-section.background-color-6.plain h2,
.content-section.background-color-6.plain h3 { color: var(--dark_text_color) !important; }
.content-section.background-color-6.plain .wc-section-body { color: var(--dark_text_color) !important; }

/* background-color-N — injecte --wct-section-bg-color (fond icônes) */
.content-section.background-color-1 { --wct-section-bg-color: var(--Color1); }
.content-section.background-color-2 { --wct-section-bg-color: var(--Color2); }
.content-section.background-color-3 { --wct-section-bg-color: var(--Color3); }
.content-section.background-color-4 { --wct-section-bg-color: var(--Color4); }
.content-section.background-color-5 { --wct-section-bg-color: var(--Color5); }
.content-section.background-color-6 { --wct-section-bg-color: var(--Color6); }
/* Fonds neutres de l'entreprise (couleurs de texte) — --wct-section-fg-color porte
   la couleur de texte appairée pour garder le contraste, quelle que soit l'opacité. */
.content-section.background-color-dark   { --wct-section-bg-color: var(--dark_text_color); --wct-section-fg-color: var(--bright_text_color); }
.content-section.background-color-bright { --wct-section-bg-color: var(--bright_text_color); --wct-section-fg-color: var(--dark_text_color); }

/* accent-color-N — injecte --wct-section-accent sur la section */
.content-section.accent-color-1 { --wct-section-accent: var(--Color1); }
.content-section.accent-color-2 { --wct-section-accent: var(--Color2); }
.content-section.accent-color-3 { --wct-section-accent: var(--Color3); }
.content-section.accent-color-4 { --wct-section-accent: var(--Color4); }
.content-section.accent-color-5 { --wct-section-accent: var(--Color5); }
.content-section.accent-color-6 { --wct-section-accent: var(--Color6); }

/* Police (token font-*) — pose --wc-font (catalogue fermé, polices chargées via
   Google Fonts dans index.html). Appliquée à l'élément qui porte le token :
   titre <h2>/<h3> (title_class) ou corps .wc-section-body (content_class). Les
   enfants héritent. (Hero : règles équivalentes dans wc-templates.css.) */
.font-playfair  { --wc-font: 'Playfair Display', Georgia, serif; }
.font-dmsans    { --wc-font: 'DM Sans', sans-serif; }
.font-cormorant { --wc-font: 'Cormorant', Georgia, serif; }
.font-mulish    { --wc-font: 'Mulish', sans-serif; }
.content-section h2[class*="font-"],
.content-section h3[class*="font-"],
.content-section .wc-section-body[class*="font-"] { font-family: var(--wc-font); }

/* ── Opacité du fond (paliers) ─────────────────────────────────────────────
   Remplace le binaire soft/plain : background-color-N pose --wct-section-bg-color,
   background-opacity-M applique l'intensité (color-mix sur blanc).
   Fonds clairs (≤50%) → texte par défaut ; fonds soutenus (≥75%) → texte clair.
   (soft/plain restent gérés ci-dessus pour le contenu legacy.) */
.content-section.background-opacity-10  { background: color-mix(in srgb, var(--wct-section-bg-color, var(--Color1)) 10%, white); }
.content-section.background-opacity-25  { background: color-mix(in srgb, var(--wct-section-bg-color, var(--Color1)) 25%, white); }
.content-section.background-opacity-50  { background: color-mix(in srgb, var(--wct-section-bg-color, var(--Color1)) 50%, white); }
.content-section.background-opacity-75  { background: color-mix(in srgb, var(--wct-section-bg-color, var(--Color1)) 75%, white); }
.content-section.background-opacity-90  { background: color-mix(in srgb, var(--wct-section-bg-color, var(--Color1)) 90%, white); }
/* Couleur sans palier d'opacité = fond plein (solide), hors legacy soft/plain. */
.content-section[class*="background-color-"]:not(.soft):not(.plain):not([class*="background-opacity-"]) {
    background: var(--wct-section-bg-color, var(--Color1));
}

/* Fonds soutenus (≥75%) et solide → texte « clair » : --wct-section-fg-color (couleur
   appairée au fond), fallback --dark_text_color pour les couleurs de marque. !important
   pour surcharger Quill. Sur un fond neutre pâle (background-color-dark), fg = bright_text_color
   (sombre) → contraste correct. */
.content-section.background-opacity-75,
.content-section.background-opacity-90,
.content-section[class*="background-color-"]:not(.soft):not(.plain):not([class*="background-opacity-"]) { color: var(--wct-section-fg-color, var(--dark_text_color)); }
.content-section.background-opacity-75 h2,
.content-section.background-opacity-75 h3,
.content-section.background-opacity-90 h2,
.content-section.background-opacity-90 h3,
.content-section[class*="background-color-"]:not(.soft):not(.plain):not([class*="background-opacity-"]) h2,
.content-section[class*="background-color-"]:not(.soft):not(.plain):not([class*="background-opacity-"]) h3 { color: var(--wct-section-fg-color, var(--dark_text_color)) !important; }
.content-section.background-opacity-75 .wc-section-body,
.content-section.background-opacity-90 .wc-section-body,
.content-section[class*="background-color-"]:not(.soft):not(.plain):not([class*="background-opacity-"]) .wc-section-body { color: var(--wct-section-fg-color, var(--dark_text_color)) !important; }

/* Icônes SVG et boutons quand un accent est déclaré sur la section
   — titres (h2/h3, .wct-col__title) exclus : ils ont leur propre style via block_class */
.content-section.accent-color-1 .icon,
.content-section.accent-color-2 .icon,
.content-section.accent-color-3 .icon,
.content-section.accent-color-4 .icon,
.content-section.accent-color-5 .icon,
.content-section.accent-color-6 .icon { fill: var(--wct-section-accent); }

.content-section.accent-color-1 .Button,
.content-section.accent-color-2 .Button,
.content-section.accent-color-3 .Button,
.content-section.accent-color-4 .Button,
.content-section.accent-color-5 .Button,
.content-section.accent-color-6 .Button { background: var(--wct-section-accent); }

/* Classe utilitaire pour les corps de blocs (remplace l'inline style) */
.wc-section-body { line-height: 1.7; color: var(--bright_text_color); }

/* ── Fin style tokens ───────────────────────────────────────────────────── */

/* Webcontent layout B — blocs centrés numérotés */
.wc-b-container {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    gap: 24px;
    align-items: flex-start;
    text-align: left;
}

.wc-b-num {
    font-size: 3.5em;
    font-weight: 900;
    line-height: 0.9;
    color: var(--wct-section-accent, var(--Color1));
    opacity: 0.25;
    flex-shrink: 0;
    user-select: none;
    margin-top: 6px;
}

/* Webcontent layout A — texte + image alternés */
.wc-a-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.wc-a-grid--reverse .wc-a-text { order: 2; }
.wc-a-grid--reverse .wc-a-image { order: 1; }

.wc-a-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: block;
}

/* Images insérées en ligne dans le corps de contenu (éditeur Quill) :
   jamais de débordement hors du conteneur. La règle .wc-a-image img,
   plus spécifique, garde son width:100% pour les blocs layout A. */
.content-section img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .wc-a-grid,
    .wc-a-grid--reverse {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .wc-a-grid .wc-a-image,
    .wc-a-grid--reverse .wc-a-image { order: 0; }
    .wc-a-grid .wc-a-text,
    .wc-a-grid--reverse .wc-a-text { order: 1; }
}

/* Webcontent bloc standard — icône latérale (tokens block_class wc-icon-left /
   wc-icon-right + option `icon`). L'icône s'affiche en badge média à côté du texte. */
.wc-icon-grid {
    display: flex;
    align-items: center;
    gap: 40px;
}
.wc-icon-grid--right { flex-direction: row-reverse; }

.wc-icon-media {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--wct-section-bg-color, var(--Color1)) 18%, white);
    border-radius: 24px;
}
.wc-icon-media .icon {
    width: 60px;
    height: 60px;
    /* Paths du sprite en fill="currentColor" → `color` pilote la teinte. */
    color: var(--wct-section-accent, var(--Color3));
    fill: var(--wct-section-accent, var(--Color3));
}
.wc-icon-text { flex: 1; min-width: 0; }

/* Fond plein (plain) → badge translucide blanc + icône blanche pour rester lisible. */
.content-section.plain .wc-icon-media {
    background: color-mix(in srgb, white 18%, transparent);
}
.content-section.plain .wc-icon-media .icon {
    color: white;
    fill: white;
}

@media (max-width: 767px) {
    .wc-icon-grid,
    .wc-icon-grid--right {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .wc-icon-media { width: 88px; height: 88px; }
    .wc-icon-media .icon { width: 44px; height: 44px; }
}

/* Webcontent layout C — cards */
.wc-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.wc-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 28px;
}

/* Liens dans le contenu CMS (Quill HTML) — couleur de marque */
.wc-b-container a,
.wc-a-text a,
.wc-card a,
.wc-col a,
.content-section a:not([class]) {
    color: var(--Color3);
    text-decoration: underline;
}
.wc-b-container a:hover,
.wc-a-text a:hover,
.wc-card a:hover,
.wc-col a:hover,
.content-section a:not([class]):hover {
    color: var(--Color4);
}

/* Production view — grille villes avec photos */
.prod-cities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.prod-city-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.prod-city-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.prod-city-header {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid color-mix(in srgb, var(--Color3) 15%, transparent);
}

.prod-city-name {
    margin: 0 0 4px;
    font-size: 1.05em;
    color: var(--Color4);
    font-weight: 700;
}

.prod-city-count {
    font-size: 0.82em;
    color: var(--Color3);
    font-weight: 600;
}

.prod-machine-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.prod-machine-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.prod-machine-photo {
    width: 56px;
    height: 42px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.prod-machine-photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--Color1) 10%, white);
    color: var(--Color3);
}

.prod-machine-name {
    font-size: 0.88em;
    color: var(--bright_text_color);
    line-height: 1.3;
    text-align: left;
}

.wc-card h3 {
    margin: 0 0 12px;
}

.content-section h2,
.content-section h3 {
    color: var(--Color4);
    font-weight: 700;
    margin: 0 0 20px;
}

.content-section h2 {
    font-size: 2em;
}

/* Barre d'accent à gauche du titre — opt-in via block_class "wc-title-bar"
   (ajoutée sur le <h2> par les renderers), plus appliquée par défaut. */
.content-section h2.wc-title-bar {
    border-left: 4px solid var(--wct-section-accent, var(--Color3));
    padding-left: 14px;
}

/* Casse du titre — opt-in via block_class "wc-title-upper" / "wc-title-caps" */
.content-section h2.wc-title-upper {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.content-section h2.wc-title-caps {
    text-transform: capitalize;
}

/* Titre encadré de traits décoratifs en couleur d'accent — opt-in via
   block_class "wc-title-flanked" (style « — NOS SERVICES — »). */
.content-section h2.wc-title-flanked {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
}
.content-section h2.wc-title-flanked::before,
.content-section h2.wc-title-flanked::after {
    content: "";
    flex: 0 0 40px;
    height: 2px;
    background: var(--wct-section-accent, var(--Color3));
}

.content-section h3 {
    font-size: 1.5em;
}

.content-section p {
    color: var(--bright_text_color);
    line-height: 1.7;
    font-size: 1.05rem;
}

.content-section ul,
.content-section ol {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.content-section ul li,
.content-section ol li {
    position: relative;
    margin-bottom: 10px;
    color: var(--bright_text_color);
    line-height: 1.6;
}
/* ul : puce absolue → garde le padding-left pour l'espace */
.content-section ul li {
    padding-left: 38px;
}
/* ol : circle en puce absolue (comme ul) — surtout PAS display:flex sur le li,
   sinon chaque <strong>/nœud texte du contenu CMS devient un flex-item et la
   ligne explose en colonnes (cas multi-gras). text-align:left force l'item à
   gauche pour que le cercle reste accolé au début du texte. */
.content-section ol li {
    padding-left: 38px;
    text-align: left;
}

/* Surcharge pour fonds sombres .plain → texte clair */
.content-section.plain p,
.content-section.plain li { color: var(--dark_text_color) !important; }

/* Puce colorée pour ul */
.content-section ul li::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--Color1);
}

/* Numéro cerclé pour ol */
.content-section ol {
    counter-reset: wc-ol;
}

.content-section ol li {
    counter-increment: wc-ol;
}

.content-section ol li::before {
    content: counter(wc-ol);
    /* Puce absolue accolée au début de la 1re ligne — n'altère pas le flux
       inline du contenu (gras, liens) contrairement à un li en flexbox. */
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--Color1);
    color: white;
    font-size: 0.8em;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sous-listes */
.content-section ul ul,
.content-section ol ol,
.content-section ul ol,
.content-section ol ul {
    margin: 8px 0 0 0;
}

.content-section ul ul li::before {
    width: 6px;
    height: 6px;
    top: 9px;
    left: 10px;
    background: transparent;
    border: 2px solid var(--Color1);
}

/* Desktop : listes CMS centrées à 60% pour éviter que le texte s'étale
   sur toute la largeur du container (mobile : pleine largeur naturellement). */
@media only screen and (min-width: 1200px) {
    .content-section ul,
    .content-section ol {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Liste de marques groupe — annule les puces CMS */
.nw-group-list li {
    padding-left: 0;
    margin-bottom: 0;
}
.nw-group-list li::before {
    display: none;
}

.hero-section {
    text-align: center;
    width: 100%;
    margin-bottom: 0;
    padding: 60px 0;
    background: var(--Color2);
    border-radius: 0;
    color: white;
}

.hero-section h1 {
    font-size: 3em;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-section p {
    font-size: 1.2em;
    margin-bottom: 40px;
    opacity: 0.92;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.hero-btn {
    padding: 14px 36px;
    font-size: 1.1em;
    background: white;
    color: var(--Color3);
    border: none;
    border-radius: var(--radius-button);
    cursor: pointer;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: opacity 0.2s;
}

.hero-btn:hover {
    opacity: 0.9;
}

.cta-section {
    text-align: center;
    padding: 64px 20px;
    background: var(--Color4);
    border-radius: 0;
    color: white;
}

.cta-section h2 {
    color: white;
    font-weight: 700;
    margin-bottom: 12px;
}

.cta-section p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin-bottom: 28px;
}

.cta-section .btn-cta-ghost {
    display: inline-block;
    background: white;
    color: var(--Color3);
    border: none;
    border-radius: var(--radius-button);
    padding: 14px 36px;
    font-size: 1.05em;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    transition: opacity 0.2s;
    text-decoration: none;
}

.cta-section .btn-cta-ghost:hover {
    opacity: 0.88;
}

/* Page headers */
.page-header {
    text-align: center;
    width: 100%;
    margin-bottom: 0;
    padding: 60px 0;
    background: var(--Color4);
    color: white;
}

.page-header h1 {
    font-size: 3em;
    color: white;
    margin-bottom: 15px;
}

.page-header p {
    font-size: 1.2em;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: 0 auto;
}

/* Hero header pour pages intérieures (image de fond + titre) */
.page-header-hero {
    position: relative;
    width: 100%;
    min-height: 35vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: var(--hero-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    color: white;
    overflow: hidden;
}

.page-header-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
}

.page-header-hero-content {
    position: relative;
    z-index: 1;
    padding: 60px 0;
}

.page-header-hero-content h1 {
    font-size: 3em;
    color: white;
    margin: 0 0 15px 0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.page-header-hero-content p {
    font-size: 1.2em;
    color: rgba(255, 255, 255, 0.95);
    max-width: 600px;
    margin: 0 auto;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.page-header-hero + .content-section,
.page-header-hero + .container,
.page-header-hero + div {
    margin-top: 0;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .page-header-hero {
        min-height: 20vh;
    }
}

/* Section spacing */
.section-small {
    margin-bottom: 20px;
}
.section-medium {
    margin-bottom: 30px;
}
.section-large {
    margin-bottom: 50px;
}
.section-xlarge {
    margin-bottom: 60px;
}

/* Text spacing */
.text-spacing h1,
.text-spacing h2,
.text-spacing h3 {
    margin-bottom: 15px;
}
.text-spacing p {
    margin-bottom: 15px;
    line-height: 1.6;
}

/* Form sections */
.form-section {
    background: rgba(255, 255, 255, 0.9);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 500;
}

.form-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1em;
}

/* Button styles */
.btn-primary {
    background: var(--Color2);
    color: white;
    border: none;
    border-radius: var(--radius-button);
    padding: 14px 32px;
    font-size: 1.05em;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, box-shadow 0.2s;
    font-family: 'DM Sans', sans-serif;
}

.btn-primary:hover {
    opacity: 0.9;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--Color3) 35%, transparent);
}

.btn-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-secondary {
    background: transparent;
    color: var(--Color3);
    border: 2px solid var(--Color3);
    border-radius: var(--radius-button);
    padding: 12px 30px;
    font-size: 1.05em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    font-family: 'DM Sans', sans-serif;
}

.btn-secondary:hover {
    background: color-mix(in srgb, var(--Color3) 8%, transparent);
    color: var(--Color3);
}

.btn-secondary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Info sections */
.info-section {
    width: 100%;
    margin-bottom: 0;
    padding: 60px 0;
    background: var(--Color2);
    border-radius: 0;
    color: white;
    text-align: center;
}

.info-section h2 {
    color: white;
    font-weight: 700;
    margin-bottom: 12px;
}

.info-section p {
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Cards */
.card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Grid layouts */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
.grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.NetworkEnt a:hover {
    color: var(--Color5);
    /* Couleur du lien au survol de la souris */
    text-decoration: underline;
    /* Ajoute ou modifie la décoration au survol */
}

.NetworkEnt img {
    width: 40%;
    align-self: center;
}

#WrapLocker .td,
#WrapLocker .th {
    flex-wrap: wrap;
    width: 15%;
    text-align: center;
}

.fa-solid.IconeLock {
    border-radius: 50%;
    background: white;
    padding: 2px;
}

/*css modal pop up*/
/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.open-modal {
    font-weight: bold;
    padding: 0.75rem 1.75rem;
    margin-bottom: 1rem;
    border-radius: 5px;
}

/* MODAL
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: none;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.35s ease-in, opacity 0.35s ease-in;
}

.modal.is-visible {
    visibility: visible;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.3);
}

.modal-dialog {
    background: white;
    position: relative;
    max-width: 800px;
    max-height: 80vh;
    border-radius: 5px;
    overflow: auto;
    cursor: default;
    /*box-shadow: 0px 0px 500px 1px lightgrey;*/
}

.modal-content {
    max-height: -webkit-fill-available;
    overflow-y: auto;
    color: var(--Color4);
}

.modal-content span,
.modal-content p,
.modal-content div {
    color: inherit;
}

.modal-dialog > * {
    padding: 1rem;
    flex-direction: column;
}

.CloseCross {
    align-self: flex-end;
}

.modal-header,
.modal-footer {
    flex-direction: row;
    background: var(--Color2);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: end;
}

.modal-header .close-modal {
    font-size: 1.5rem;
}

.modal p + p {
    margin-top: 1rem;
}

.divloader {
    width: 212px;
    height: 212px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader {
    /*position: absolute;*/
    left: 20%;
    top: 25%;
    z-index: 1;
    width: 150px;
    height: 150px;
    margin: 10px;
    border-radius: 50%;
    animation: spin 2s linear infinite;
    background: linear-gradient(var(--Color1), var(--Color4));
    -webkit-mask: radial-gradient(
        farthest-side,
        transparent calc(100% - 25px),
        black 100%
    );
    mask: radial-gradient(
        farthest-side,
        transparent calc(100% - 25px),
        black 100%
    );
}

.rotate {
    animation: rotateforth 0.2s linear;
    transform: rotate(180deg);
}

@keyframes rotateforth {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(180deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*                                                       */
/*-------------STYLE DU BOUTON TOGGLE GLISSANY-----------*/
/*                                                       */
#toggleWrap.toggle-wrapper {
    display: flex;
    align-items: center;
    color: var(--dark_text_color);
}

#toggle.toggle {
    position: relative;
    width: 60px;
    height: 30px;
    background-color: #ccc;
    border-radius: 30px;
    transition: background-color 0.3s;
    cursor: pointer;
    border-style: solid;
    box-shadow: 0.5px -0.5px 3px 0px rgba(0, 0, 0, 0.5);
}

#toggleCircle.toggle-circle {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background-color: white;
    border-radius: 50%;
    transition: left 0.3s;
}

#toggle.toggle.actif {
    background-color: var(--active_color, var(--Color1));
}

#toggle.toggle.actif .toggle-circle {
    left: 33px;
}

#toggleWrap.rebill {
    width: fit-content;
}

/*------------------------------------------------ */

/* ANIMATIONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-animation] .modal-dialog {
    opacity: 0;
    transition: opacity 0.5s var(--bounceEasing), transform 0.5s var(--bounceEasing);
}

[data-animation].is-visible .modal-dialog {
    opacity: 1;
    transition-delay: 0.2s;
}

[data-animation="slideInOutDown"] .modal-dialog {
    transform: translateY(100%);
}

[data-animation="slideInOutTop"] .modal-dialog {
    transform: translateY(-100%);
}

[data-animation="slideInOutLeft"] .modal-dialog {
    transform: translateX(-100%);
}

[data-animation="slideInOutRight"] .modal-dialog {
    transform: translateX(100%);
}

[data-animation="zoomInOut"] .modal-dialog {
    transform: scale(0.2);
}

[data-animation="rotateInOutDown"] .modal-dialog {
    transform-origin: top left;
    transform: rotate(-1turn);
}

[data-animation="mixInAnimations"].is-visible .modal-dialog {
    animation: mixInAnimations 2s 0.2s linear forwards;
}

[data-animation="slideInOutDown"].is-visible .modal-dialog,
[data-animation="slideInOutTop"].is-visible .modal-dialog,
[data-animation="slideInOutLeft"].is-visible .modal-dialog,
[data-animation="slideInOutRight"].is-visible .modal-dialog,
[data-animation="zoomInOut"].is-visible .modal-dialog,
[data-animation="rotateInOutDown"].is-visible .modal-dialog {
    transform: none;
}

@keyframes blinkColor {
    0%,
    100% {
        color: var(--bright_text_color);
    }

    /* Rouge vif */
    50% {
        color: var(--Color5);
    }

    /* Noir ou couleur neutre */
}

@keyframes mixInAnimations {
    0% {
        transform: translateX(-100%);
    }

    10% {
        transform: translateX(0);
    }

    20% {
        transform: rotate(20deg);
    }

    30% {
        transform: rotate(-20deg);
    }

    40% {
        transform: rotate(15deg);
    }

    50% {
        transform: rotate(-15deg);
    }

    60% {
        transform: rotate(10deg);
    }

    70% {
        transform: rotate(-10deg);
    }

    80% {
        transform: rotate(5deg);
    }

    90% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* ============================================================
   Composant : menu déroulant (Design System)
   Spec : aidd_docs/design-system/dropdown-menu.md
   Usage : .dropdown-menu (conteneur) + .dropdown-item (lien) +
           .dropdown-divider (séparateur) + .user-greeting (header).
   ============================================================ */

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--menu-bg, #ffffff);
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 1000;
    padding: 8px 0;
    margin-top: 4px;
}

.user-greeting {
    padding: 12px 16px 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--menu-text, #333333);
    border-bottom: 1px solid var(--menu-divider, #e9ecef);
    margin-bottom: 4px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: var(--menu-text, #333333);
    text-decoration: none;
    transition: background-color 0.2s ease;
    font-size: 14px;
    white-space: nowrap;
}

.dropdown-item:hover {
    background-color: var(--menu-hover-bg, #f5f5f5);
    color: var(--menu-text, #333333);
}

.dropdown-divider {
    height: 1px;
    background-color: var(--menu-divider, #e9ecef);
    margin: 4px 0;
}

.dropdown-item i {
    width: 16px;
    font-size: 14px;
}

#user-menu-btn {
    transition: background-color 0.2s ease, border-radius 0.2s ease;
}

#main-header #user-menu-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

#user-icon {
    transition: color 0.3s ease;
}

#user-icon.connected {
    color: var(--Color4);
    opacity: 1;
}

#user-icon.disconnected {
    color: var(--Color4);
    opacity: 0.55;
}

/* Styles pour le burger menu */
#burger-menu-btn {
    transition: background-color 0.2s ease, border-radius 0.2s ease;
}

#main-header #burger-menu-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

#burger-menu-btn i {
    transition: color 0.3s ease;
}

/* ============================================================
   UNIFIED HEADER
   ============================================================ */

#main-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid #eee;
    gap: 15px;
    position: sticky;
    top: 0;
    z-index: 500;
    transition: padding var(--motion-duration-base, 0.2s) ease, box-shadow var(--motion-duration-base, 0.2s) ease;
}

#main-header.header-compact {
    padding: 8px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

#main-header #LogoWrap {
    flex-shrink: 0;
    height: 60px;
    display: flex;
    align-items: center;
    transition: height var(--motion-duration-base, 0.2s) ease;
}

#main-header.header-compact #LogoWrap {
    height: 40px;
}

#main-header #LogoWrap a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

#main-header #Chevron1,
#main-header #Chevron2 {
    filter: none;
}

#main-header #burger-menu-btn,
#main-header #user-menu-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--Color4);
    font-size: 18px;
}

#main-header #burger-menu-btn:hover,
#main-header #user-menu-btn:hover {
    opacity: 0.8;
}

/* Language selector dans le header blanc — annule les styles conçus pour fond sombre */
#main-header .language-trigger {
    color: var(--Color4);
}

#main-header .language-trigger:hover,
#main-header .language-trigger:focus {
    background: rgba(0, 0, 0, 0.05);
    box-shadow: none;
}

#main-header .language-selector:focus-within .language-trigger {
    box-shadow: none;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Nav links inside header */
#DynamicMenu {
    display: none;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

/* Menu dynamique mobile : pleine largeur, position fixed sous le header (top positionné par JS, scoped mobile) */
@media only screen and (max-width: 767px) {
    #DynamicMenu-mobile.dropdown-menu {
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        min-width: 0;
        border-radius: 0 0 8px 8px;
        z-index: 9999;
        max-height: 80vh;
        overflow-y: auto;
    }
}

/* Nav link styles */
#DynamicMenu a {
    color: var(--Color4);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: color 0.2s ease;
    white-space: nowrap;
}

#DynamicMenu a:hover {
    color: var(--Color3);
}

/* CTA "Réserver" — aplat Color2 (marron), texte blanc */
#DynamicMenu a.menu-cta {
    background: var(--Color2);
    color: white;
    border: none;
    border-radius: var(--radius-button);
    padding: 10px 24px;
    font-weight: 600;
    margin-left: 10px;
    transition: opacity 0.2s ease;
}

#DynamicMenu a.menu-cta:hover {
    color: white;
    opacity: 0.85;
}

/* Tablet: burger + dropdown multi-colonnes (768–1199px) */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    #DynamicMenu {
        display: none !important;
    }

    #burger-menu-btn {
        display: block !important;
    }

    #user-menu-btn {
        display: inline-flex;
    }

    #mobile-flags {
        display: inline-flex;
    }

    /* Dropdown pleine largeur comme en mobile */
    #DynamicMenu-mobile.dropdown-menu {
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        min-width: 0;
        border-radius: 0 0 8px 8px;
        z-index: 9999;
        max-height: 80vh;
        overflow-y: auto;
    }

}

/* Desktop: show nav, hide burger */
@media only screen and (min-width: 1200px) {
    #DynamicMenu {
        display: flex;
    }

    #burger-menu-btn {
        display: none !important;
    }

    #user-menu-btn {
        display: inline-flex;
    }

    #mobile-flags {
        display: inline-flex;
    }
}

/* Mobile: hide nav, show burger */
@media only screen and (max-width: 767px) {
    #DynamicMenu {
        display: none !important;
    }

    #main-header {
        padding: 8px 12px;
    }

    #main-header #LogoWrap {
        height: 30px;
    }

    #main-header #LogoWrap img {
        max-height: 30px;
        width: auto;
    }

    /* Le logo mobile (30px) est déjà plus petit que les tailles "compact" desktop
       (40px / 34px) : sans cet override, la classe .header-compact au scroll
       l'agrandirait au lieu de le réduire. On fige donc la taille mobile. */
    #main-header.header-compact #LogoWrap {
        height: 30px;
    }

    #main-header.header-compact #Logo {
        height: 30px;
        max-height: 30px;
    }
}

/* Mobile dropdown menu — fond Color4, liens blancs */
#DynamicMenu-mobile.dropdown-menu {
    background: var(--Color4);
    border: none;
}

/* Un seul et même style de ligne pour les pages (dm-tab) et les liens compte
   (dropdown-item, ex. Tableau de bord, Support, Mes réservations) — pas de
   raison qu'un menu se lise différemment de l'autre dans le même burger. */
#DynamicMenu-mobile a.dm-tab,
#DynamicMenu-mobile .dropdown-item {
    color: white;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 2px 8px;
    border-radius: var(--radius-image);
    text-decoration: none;
    font-size: 0.95em;
    font-weight: 500;
    background: transparent;
    transition: background 0.15s;
}

#DynamicMenu-mobile a.dm-tab:hover,
#DynamicMenu-mobile .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.12);
    color: white;
}

#DynamicMenu-mobile a.dm-tab .icon,
#DynamicMenu-mobile .dropdown-item .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.85;
}

#DynamicMenu-mobile a.dm-tab.active {
    background: rgba(255, 255, 255, 0.12);
    font-weight: 700;
}

/* Espacement doux entre groupes — plus de ligne dure par item, cf. .dropdown-divider
   pour la seule vraie rupture de sens (pages publiques ↔ liens compte). */
#DynamicMenu-mobile .dm-mobile-group {
    padding: 2px 0;
}

#DynamicMenu-mobile .dropdown-divider {
    background-color: rgba(255, 255, 255, 0.15);
    margin: 8px 16px;
}

#DynamicMenu-mobile .dm-group-label {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 24px 2px;
}

/* CTA mobile — aplat Color2 (marron), même famille que .dm-tab.button (ligne ~4397) */
#DynamicMenu-mobile a.menu-cta {
    background: var(--Color2);
    color: white;
    border: none;
    border-radius: var(--radius-button);
    margin: 8px;
    padding: 12px 16px;
    text-align: center;
    font-weight: 600;
}

#DynamicMenu-mobile a.menu-cta:hover {
    opacity: 0.85;
    color: white;
}

/* Styles pour les contenus de pages */
#Home,
#PointsVente,
#Forfaits,
#Reserver,
#FAQ,
#Contact,
#Profil {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Responsive pour mobile */
@media only screen and (max-width: 767px) {
    /* Contenus avec marges supprimées en mobile */
    #Home,
    #PointsVente,
    #Forfaits,
    #Reserver,
    #FAQ,
    #Contact,
    #Profil {
        margin: 0;
        padding: 0;
    }

    #HdCaption {
        font-size: 1em;
        bottom: 12px;
        left: 12px;
    }
} /* Test live reload */

/* ===== Utility classes (extracted from JS inline styles) ===== */
body.scroll-locked {
    overflow: hidden;
}

.opacity-dim {
    opacity: 0.2;
}

.opacity-half {
    opacity: 0.5;
}

.notification-slide-in {
    transform: translateX(0);
}

.notification-slide-out {
    transform: translateX(100%);
}

#Flags {
    text-align: right;
}

#Flags.flags-expanded {
    text-align: center;
}

/* ===== Pricing Cards (vue voyageurs) ===== */
.pv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.pv-card {
    border-radius: 15px;
    padding: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pv-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.pv-card-header {
    padding: 24px 24px 16px;
    text-align: center;
}

.pv-card-mode {
    font-size: 2em;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.pv-card-subtitle {
    font-size: 0.95em;
    font-weight: 600;
    margin-top: 4px;
    letter-spacing: 0.05em;
}

.pv-card-prices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    border-top: 1px solid;
    border-bottom: 1px solid;
}

.pv-card-price-col {
    text-align: center;
    padding: 20px 12px;
}

.pv-card-price-col:first-child {
    border-right: 1px solid;
    border-color: inherit;
}

.pv-card-amount {
    font-size: 2.4em;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 6px;
}

.pv-card-period {
    font-size: 0.9em;
    font-weight: 600;
}

.pv-card-period-en {
    font-size: 0.8em;
    opacity: 0.6;
    font-style: italic;
}

.pv-card-footer {
    padding: 12px 24px;
    font-size: 0.85em;
    font-weight: 600;
    text-align: center;
    border-top: 1px solid;
}

.pv-entity-label {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--Color4);
    border-left: 4px solid var(--Color3);
    padding-left: 14px;
    margin: 0 0 20px;
}

/* Carrousel entités (réseau multi-sites, ≥2 entités visibles) — cf. pv-entity-carousel
   dans pricing-view.js. Barre préc/suiv au-dessus des slides (pas de flèches en
   overlay : les slides sont des cartes tarifs opaques de hauteur variable, pas
   des images full-bleed comme .wct-diaporama). */
.pv-entity-carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

.pv-entity-slide {
    display: none;
}

.pv-entity-slide--active {
    display: block;
}

.pv-entity-arrow {
    background: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    color: var(--Color4);
    transition: opacity 0.2s;
}

.pv-entity-arrow:hover {
    opacity: 0.8;
}

.pv-entity-arrow .icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.pv-entity-carousel-counter {
    color: #888;
    font-size: 0.9em;
    min-width: 48px;
    text-align: center;
}

/* Sous-table par mode (Consigne / Location / Booking) */
.pv-mode-block {
    padding: 8px 0 0;
}

.pv-mode-block + .pv-mode-block {
    margin-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.pv-mode-title {
    font-size: 1.05em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 14px 24px 4px;
}

/* Scroll horizontal en mobile : un mode peut avoir jusqu'à 6 colonnes de durée */
.pv-table-scroll {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Colonne « Durée » figée pendant le scroll horizontal des tailles */
.pv-size-th-sticky,
.pv-dur-name {
    position: sticky;
    left: 0;
    z-index: 1;
}

/* Tableau prix réel par taille de casier */
.pv-size-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: inherit;
}

.pv-size-table th,
.pv-size-table td {
    padding: 12px 16px;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.pv-size-table tbody tr:last-child td {
    border-bottom: none;
}

.pv-size-th {
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pv-size-th-en {
    display: block;
    font-size: 0.78em;
    font-weight: 400;
    font-style: italic;
    opacity: 0.6;
    text-transform: none;
    letter-spacing: 0;
}

.pv-size-name {
    text-align: center;
    font-weight: 700;
    font-size: 1.05em;
}

.pv-size-dims {
    color: #999;
    font-weight: 400;
    font-size: 0.8em;
    white-space: nowrap;
}

/* Dimensions sous le nom de taille dans l'en-tête (table transposée).
   Pas de nowrap : "45×60×90 cm" doit pouvoir passer à la ligne avant "cm"
   plutôt que de déborder hors de sa colonne et se faire tronquer par
   pv-table-scroll (cf. bug tarifs mobile tronqués mi-chiffre). */
.pv-size-th-dims {
    display: block;
    margin-top: 2px;
    color: #999;
    font-weight: 400;
    font-size: 0.78em;
    text-transform: none;
    letter-spacing: 0;
}

/* Première colonne = libellé de durée (en-tête de ligne, table transposée) */
.pv-dur-name {
    text-align: left;
    font-weight: 700;
    font-size: 0.95em;
    white-space: nowrap;
}

.pv-size-price {
    font-weight: 800;
    font-size: 1.15em;
    white-space: nowrap;
}

@media only screen and (max-width: 480px) {
    .pv-grid {
        grid-template-columns: 1fr;
    }

    .pv-card-amount {
        font-size: 2em;
    }

    .pv-size-table th,
    .pv-size-table td {
        padding: 10px 6px;
    }

    .pv-size-price {
        font-size: 1.05em;
    }

    .pv-size-th-dims {
        font-size: 0.72em;
    }

    .pv-mode-title {
        padding: 12px 12px 4px;
        font-size: 1em;
    }
}

/* Dashboard Machines canvas */
.canvas-nav-band {
    position: absolute;
    top: 0;
    width: 8%;
    height: 100%;
    z-index: 10;
    display: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 18px;
    transition: color 0.2s ease, opacity 0.2s ease;
}
.canvas-nav-left {
    left: 0;
    background: linear-gradient(to left, transparent, rgba(200,200,200,0.6));
}
.canvas-nav-right {
    right: 0;
    background: linear-gradient(to right, transparent, rgba(200,200,200,0.6));
}
.canvas-nav-band:hover {
    background: rgba(255,255,255,0.9);
    color: #000;
}

@media (max-width: 768px) {
    .page-header-hero {
        height: auto;
        min-height: 0;
    }
}

/* =============================================
   DS Utility Classes — tabs, status dots, stat cards
   ============================================= */

.ds-tab-active {
    padding: 10px 20px;
    border: 2px solid var(--Color3);
    background: var(--Color3);
    color: white;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 500;
    font-family: 'DM Sans', sans-serif;
}

.ds-tab-inactive {
    padding: 10px 20px;
    border: 2px solid var(--Color3);
    background: transparent;
    color: var(--Color3);
    border-radius: 25px;
    cursor: pointer;
    font-weight: 500;
    font-family: 'DM Sans', sans-serif;
}

.ds-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}

.ds-status-online  { background: var(--Color6); }
.ds-status-offline { background: var(--Color5); }

.ds-card-stat {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    margin-bottom: 20px;
}

/* ===== QrCodeContent view ===== */

.qrc-card {
    width: 90%;
    max-width: 480px;
    margin: 24px auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    padding: 28px 28px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

@media (max-width: 480px) {
    .qrc-card {
        width: 95%;
        padding: 20px 16px;
    }
}

.qrc-greeting {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--bright_text_color);
    margin-bottom: 20px;
    text-align: center;
}

.qrc-qr-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
}

#QrCodeImage {
    display: flex;
    width: 220px;
    height: 220px;
    background: white !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    border-radius: 8px;
    border: 1.5px solid #eee;
    color-scheme: only light;
    forced-color-adjust: none;
}

#QrCodeImage canvas,
#QrCodeImage img {
    background: white !important;
    filter: invert(0) !important;
    padding: 8px !important;
    max-width: 100%;
    max-height: 100%;
}

.qrc-label {
    font-size: 0.9em;
    color: var(--background_color);
    text-align: center;
    margin: 0 0 4px;
    line-height: 1.5;
}

.qrc-label-bis {
    font-size: 0.85em;
    color: var(--background_color);
    text-align: center;
    margin: 0;
    line-height: 1.4;
}

#RedirectResa.Button {
    width: 100%;
    justify-content: center;
    margin: 4px 0 16px;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.qrc-divider {
    width: 100%;
    height: 1px;
    background: #f0f0f0;
    margin: 4px 0 12px;
}

#QRIssueBlock,
#NetworkBlock {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 8px;
    border: none;
    background: none;
    padding: 0;
    border-radius: 0;
}

#QRIssueBlock a,
.qrc-issue-link {
    font-size: 0.88em;
    color: var(--Color3);
    text-decoration: underline;
    cursor: pointer;
    text-align: center;
}

#InstructQRIssue {
    font-size: 0.85em;
    color: var(--bright_text_color);
    line-height: 1.5;
    margin-top: 6px;
    text-align: center;
    cursor: pointer;
}

#NetworkBlock select {
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1.5px solid #ddd;
    font-size: 0.9em;
}

#SponsorBlock {
    width: 100%;
    margin-top: 8px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--Color1) 15%, white 85%);
    padding: 16px 14px;
    box-sizing: border-box;
    border: 1.5px solid color-mix(in srgb, var(--Color1) 35%, white 65%);
    text-align: center;
}

#SponsorInfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.qrc-sponsor-icon {
    font-size: 1.8em;
    color: var(--Color4);
    margin-bottom: 2px;
}

.qrc-sponsor-title {
    font-size: 1em;
    font-weight: 700;
    color: var(--bright_text_color);
    margin: 0;
}

.qrc-sponsor-sub {
    font-size: 0.82em;
    color: var(--background_color);
    margin: 0 0 4px;
    line-height: 1.4;
}

.qrc-sponsor-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.qrc-sponsor-btn.Button {
    width: 100%;
    margin: 4px 0 0;
    justify-content: center;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    box-sizing: border-box;
}

.qrc-sponsor-skip {
    font-size: 0.8em;
    color: #aaa;
    cursor: pointer;
    text-decoration: underline;
}

#SponsorCondition {
    font-size: 0.82em;
    color: var(--Color4);
    line-height: 1.4;
    text-align: center;
    display: block;
    margin-bottom: 4px;
}

#FormSponsor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

#FormSponsor input,
#selectPrefixSponso {
    font-size: 0.9em;
    border-radius: 8px;
    padding: 8px 10px;
    border: 1.5px solid #ddd;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    outline: none;
}

#FormSponsor input:focus,
#selectPrefixSponso:focus {
    border-color: var(--Color3);
}

#CityZipcode,
#SponsoPrefixLang {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

#SponsorFormBtn {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
    margin-top: 14px;
}

#BtnSponsoCancel {
    display: none;
}

#SponsorFormBtn .Button {
    width: auto;
    margin: 0;
    padding: 8px 16px;
    font-size: 0.9em;
}

/* MenuManager — grouped tabs nav */
#DynamicMenu .dm-group {
    position: relative;
    display: inline-flex;
    align-items: center;
}
#DynamicMenu .dm-group-label {
    font-size: 14px;
    font-weight: 500;
    /* Header is white (flat) — nav text must be dark (cf. #DynamicMenu a = Color4). */
    color: var(--Color4);
    padding: 8px 12px;
    cursor: default;
    white-space: nowrap;
}
#DynamicMenu .dm-group-label::after {
    content: ' ▾';
    font-size: 10px;
    opacity: 0.6;
}
#DynamicMenu .dm-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    flex-direction: column;
    background: var(--Color1);
    min-width: 180px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    padding: 4px 0;
}
#DynamicMenu .dm-group:hover .dm-dropdown {
    display: flex;
}
#DynamicMenu .dm-tab {
    padding: 4px 8px;
}
#DynamicMenu .dm-dropdown .dm-tab {
    display: block;
    padding: 10px 16px;
    white-space: nowrap;
}
#DynamicMenu .dm-tab.active {
    color: var(--Color3);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--Color3);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
/* Variante bouton pill — utiliser class "button" dans les options de page */
#DynamicMenu .dm-tab.button {
    background: var(--Color2);
    color: white;
    border-radius: var(--radius-button);
    padding: 8px 20px;
    font-weight: 600;
    margin-left: 8px;
    transition: opacity 0.2s ease;
    text-decoration: none;
}
#DynamicMenu .dm-tab.button:hover,
#DynamicMenu .dm-tab.button.active {
    color: white;
    opacity: 0.85;
    text-decoration: none;
    font-weight: 600;
}
#DynamicMenu-mobile a.dm-tab.button {
    background: var(--Color2);
    color: white;
    border-radius: var(--radius-button);
    margin: 8px;
    font-weight: 600;
    justify-content: center;
}
#DynamicMenu-mobile a.dm-tab.button:hover {
    background: var(--Color2);
    opacity: 0.85;
}
/* Mobile paysage + tablette (480–1199px) : grille 2 colonnes propre (row-major).
   CSS Grid plutôt que `columns` (masonry) — columns remplit une colonne entière
   avant de passer à la suivante et désaligne les lignes entre elles ; grid range
   les items ligne par ligne, alignés, comme dans le reste du panneau unifié
   (pages ET liens compte — cf. règle de non-distinction ci-dessus). */
@media only screen and (min-width: 480px) and (max-width: 1199px) {
    #DynamicMenu-mobile-public,
    #mobile-worker-section,
    #mobile-auth-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 8px;
    }
    /* Le séparateur doit courir sur toute la largeur, pas dans une seule colonne. */
    #mobile-worker-section .dropdown-divider,
    #mobile-auth-section .dropdown-divider {
        grid-column: 1 / -1;
    }
}

#DynamicMenu-mobile-public .dm-mobile-group {
    break-inside: avoid;
}
#DynamicMenu-mobile-public .dm-group-label {
    display: block;
    font-size: 0.7em;
    color: var(--menu-text, #333333);
    opacity: 0.5;
    padding: 14px 16px 4px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    pointer-events: none;
}
#DynamicMenu-mobile-public .dm-tab {
    display: block;
    padding: 7px 16px 7px 24px;
    color: var(--menu-text, #333333);
    text-align: left;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s ease;
}
#DynamicMenu-mobile-public .dm-tab:hover {
    background-color: var(--menu-hover-bg, #f5f5f5);
}
#DynamicMenu-mobile-public .dm-tab.active {
    color: var(--Color3);
    font-weight: 700;
}

/* ============================================================================
   i18n progressive loading — first-visit skeleton
   Hide nav links until MenuManager rendered the menu for the first time.
   Body class added in initProject() when localStorage.menuPagesV2 is absent;
   removed by MenuManager._finishRender() after the first render.
   ============================================================================ */
.sl-loading #DynamicMenu,
.sl-loading #DynamicMenu-mobile-public,
.sl-loading .main-nav {
    visibility: hidden;
}

/* ============================================================
   DS UTILITY COMPONENTS — extracted from JS views
   ============================================================ */

/* Status dot — machine online/offline */
.ds-status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
    flex-shrink: 0;
}
.ds-status-dot--online  { background: var(--Color6); }
.ds-status-dot--offline { background: var(--Color5); }

/* FAQ / filter tabs */
.ds-tab-active {
    background: var(--Color3);
    color: white;
    border: 2px solid var(--Color3);
    border-radius: 25px;
    padding: 10px 24px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: opacity 0.2s;
}
.ds-tab-inactive {
    background: transparent;
    color: var(--Color3);
    border: 2px solid var(--Color3);
    border-radius: 25px;
    padding: 10px 24px;
    font-weight: 500;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: background 0.2s, color 0.2s;
}
.ds-tab-inactive:hover {
    background: color-mix(in srgb, var(--Color3) 8%, transparent);
}

/* Mini stats cards */
.ds-card-stat {
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    text-align: center;
    min-width: 100px;
}
.ds-card-stat__value {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--Color3);
}
.ds-card-stat__label {
    font-size: 0.85em;
    color: var(--background_color);
    margin-top: 2px;
}

/* ─── ResaOnline — stepper & booking card (stepper sur fond blanc) ───────── */

.ro-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: 0 auto 32px;
    gap: 0;
    max-width: 400px;
}
.ro-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
}
.ro-step::before {
    content: '';
    position: absolute;
    top: 18px;
    left: -50%;
    right: 50%;
    height: 2px;
    background: #ddd;
    transform: translateY(-50%);
}
.ro-step:first-child::before { display: none; }
.ro-step--done::before,
.ro-step--active::before { background: var(--Color3); }

.ro-step-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    border: 2px solid #ddd;
    color: #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.88em;
    position: relative;
    z-index: 1;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.ro-step--active .ro-step-dot {
    background: var(--Color3);
    border-color: var(--Color3);
    color: white;
}
.ro-step--done .ro-step-dot {
    background: color-mix(in srgb, var(--Color3) 15%, white);
    border-color: var(--Color3);
    color: var(--Color3);
}
.ro-step-label {
    font-size: 0.75em;
    margin-top: 8px;
    color: #aaa;
    text-align: center;
    white-space: nowrap;
}
.ro-step--active .ro-step-label {
    color: var(--Color4);
    font-weight: 600;
}
.ro-step--done .ro-step-label {
    color: var(--Color3);
}

.ro-booking-card {
    width: 100%;
    padding: 0;
    overflow: hidden;
}
.ro-booking-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: start;
}
.ro-booking-machine {
    padding: 28px 28px 28px 28px;
    border-right: 1px solid #eee;
}
.ro-booking-machine h2 {
    margin-bottom: 16px;
    font-size: 1.05em;
    font-weight: 600;
    border-left: none !important;
    padding-left: 0 !important;
    text-decoration: none !important;
}
.ro-booking-dates {
    padding: 28px 28px 0 32px;
}
.ro-booking-dates h2 {
    margin-bottom: 16px;
    font-size: 1.05em;
    font-weight: 600;
    border-left: none !important;
    padding-left: 0 !important;
    text-decoration: none !important;
}
.ro-booking-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 20px 28px;
    border-top: 1px solid #eee;
    gap: 12px;
}
/* Select machine + bouton carte intégré */
.ro-machine-select-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.ro-map-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid #ddd;
    color: var(--Color3);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.ro-map-icon-btn:hover {
    border-color: var(--Color3);
    background: color-mix(in srgb, var(--Color3) 8%, white);
}
/* Bloc horaires — une phrase reformatée par JS */
.ro-schedules {
    margin: 0 0 18px;
    font-size: 0.85em;
    color: var(--background_color);
}
/* Masquer les spans originaux que la webapp peuple (dInline les ferait réapparaître sans !important) */
#SchedulesTitle, #MachineOpen, #MachineClose { display: none !important; }
.ro-sched-display { font-style: italic; }
/* Bloc réservations actives en tête de ResaOnline */
.ro-active-resa {
    padding: 14px 20px;
    border-left: 4px solid var(--Color3);
    background: color-mix(in srgb, var(--Color3) 6%, white);
}
.ro-active-resa-title {
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--Color3);
    margin: 0 0 10px;
}
.ro-active-resa-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ro-active-resa-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88em;
    flex-wrap: wrap;
}
.ro-active-resa-machine {
    font-weight: 600;
    color: var(--Color4);
}
.ro-active-resa-sep { color: #ccc; }
.ro-active-resa-detail { color: var(--bright_text_color); }
.ro-active-resa-date {
    font-size: 0.85em;
    color: var(--background_color);
    margin-left: auto;
    white-space: nowrap;
}
/* Fiche machine unique — remplace le sélecteur quand MachineList.length === 1 */
.ro-machine-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 0 16px;
}
.ro-machine-thumb {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
}
.ro-machine-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ro-machine-name {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--Color4);
}
.ro-machine-address {
    color: var(--bright_text_color);
    font-size: 0.9em;
}
.ro-machine-maps-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.85em;
    text-decoration: none;
    align-self: flex-start;
}
@media only screen and (max-width: 767px) {
    .ro-machine-card { flex-direction: column; }
    .ro-machine-thumb { width: 100%; height: 180px; }
}
/* Mini-carte machines dans le formulaire de réservation */
#ro-mini-map {
    width: 100%;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
}
/* Ligne date + heure */
.ro-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.ro-date-label {
    min-width: 26px;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--bright_text_color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ro-input-date,
.ro-select-time,
.ro-select {
    font-family: inherit;
    font-size: 0.9em;
    height: 38px;
    line-height: 38px;
    padding: 0 10px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    background: white;
    color: #333;
    appearance: auto;
}
.ro-input-date { flex: 1; min-width: 130px; }
.ro-select-time { width: 68px; flex-shrink: 0; }
.ro-input-date:focus,
.ro-select-time:focus,
.ro-select:focus { border-color: var(--Color3); outline: none; }
/* Message disponibilité — informatif, pas alarmant */
.ro-date-msg {
    display: block;
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 500;
    background: color-mix(in srgb, var(--Color3) 6%, white);
    color: var(--bright_text_color);
    border-left: 3px solid var(--Color3);
}
.ro-hint {
    display: block;
    font-size: 0.8em;
    color: var(--background_color);
    margin-top: 6px;
}

@media (max-width: 767px) {
    .ro-stepper { max-width: 100%; }
    .ro-step-label { font-size: 0.7em; }
    .ro-booking-grid { grid-template-columns: 1fr; }
    .ro-booking-machine { border-right: none; border-bottom: 1px solid #eee; padding-bottom: 20px; }
    .ro-booking-dates { padding-left: 28px; padding-top: 20px; }
    .ro-booking-actions { justify-content: stretch; }
    .ro-booking-actions .Button { width: 100%; justify-content: center; }
    .ro-input-date { min-width: 100px; }
}

/* Registration form view — prefix: reg- */

/* -------------------------------------------------------
   formInput — classe partagée des champs texte du formulaire
   ------------------------------------------------------- */
.formInput {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-size: 1em;
    background: white;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    color: #333;
    outline: none;
    transition: border-color 0.2s;
}

.formInput:focus {
    border-color: var(--Color3);
}

.formInput::placeholder {
    color: #aaa;
}

/* -------------------------------------------------------
   RegFormColumns — wrapper visible en login et register
   ------------------------------------------------------- */
#RegFormColumns {
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
}

/* Carte unique conteneur — toujours présente */
.reg-main-card {
    width: 90%;
    max-width: 560px;
    margin: 0 auto;
    padding: 28px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 480px) {
    .reg-main-card {
        width: 95%;
        padding: 20px 16px;
    }
}

/* -------------------------------------------------------
   Texte introductif
   ------------------------------------------------------- */
.reg-intro {
    margin: 0 0 20px;
    color: #555;
    font-size: 0.95em;
    line-height: 1.6;
    text-align: center;
}

/* -------------------------------------------------------
   Row 1 : colonne unique en mode register
   ------------------------------------------------------- */
.reg-fields-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}



/* -------------------------------------------------------
   #Log_Form — neutralise la card de login.css quand dans .reg-main-card
   ------------------------------------------------------- */
.reg-main-card #Log_Form:not(.show) {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .reg-main-card #Log_Form:not(.show) {
        width: 100%;
        padding: 0;
    }
}

/* -------------------------------------------------------
   #RegFieldsCard — colonne droite en register
   ------------------------------------------------------- */
#RegFieldsCard {
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    gap: 16px;
}

/* -------------------------------------------------------
   Séparateur entre les deux rows (visible uniquement en register)
   ------------------------------------------------------- */
.reg-section-sep {
    display: none;
}

body.register-mode .reg-section-sep {
    display: block;
    width: 100%;
    height: 1px;
    background: #e8e8e8;
    margin: 8px 0;
}

/* -------------------------------------------------------
   #SubBlock — bloc vérification pleine largeur sous les colonnes
   ------------------------------------------------------- */
body.register-mode #SubBlock {
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    box-sizing: border-box;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

/* -------------------------------------------------------
   Field group — error above input
   ------------------------------------------------------- */
.reg-field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

/* Required / Optional badges */
.reg-field-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.reg-field-label {
    font-size: 0.85em;
    font-weight: 600;
    color: #555;
}

.reg-optional-badge {
    font-size: 0.75em;
    font-weight: 500;
    color: #888;
    background: #f0f0f0;
    border-radius: 4px;
    padding: 1px 6px;
}

.reg-required-badge {
    font-size: 0.75em;
    font-weight: 600;
    color: var(--Color3);
    background: color-mix(in srgb, var(--Color3) 12%, transparent);
    border-radius: 4px;
    padding: 1px 6px;
}

/* -------------------------------------------------------
   Override multivitrines.css — #Name/#Email/#CodeImg/#PromoCode
   ont border:none, text-align:center, border-radius:15px qui écrasent
   .formInput. On force le style design system.
   ------------------------------------------------------- */
body.register-mode #RegFieldsCard #Name,
body.register-mode #RegFieldsCard #Email,
body.register-mode #SubBlock #CodeImg,
body.register-mode #SubBlock #PromoCode {
    border: 1.5px solid #ddd;
    border-radius: 8px;
    text-align: left;
    padding: 10px 14px;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    min-width: 0;
    background: white;
    color: #333;
    font-size: 1em;
    outline: none;
    transition: border-color 0.2s;
}

body.register-mode #RegFieldsCard #Name:focus,
body.register-mode #RegFieldsCard #Email:focus,
body.register-mode #SubBlock #CodeImg:focus {
    border-color: var(--Color3);
}

/* Hide input min-width override from #SubBlock global rule */
#SubBlock .formInput,
#RegFieldsCard input[type="text"] {
    min-width: 0;
}

/* -------------------------------------------------------
   Error messages
   ------------------------------------------------------- */
.reg-error {
    color: var(--Color5, #e53e3e);
    font-size: 0.85em;
    font-weight: 500;
    padding: 0;
}

/* -------------------------------------------------------
   Captcha — remplit la zone du SubBlock
   ------------------------------------------------------- */
body.register-mode #SubBlock .captcha-section {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* -------------------------------------------------------
   CGU / SMS blocks — toggle switch
   ------------------------------------------------------- */
#CGUBlock,
#AcceptSMSBlock {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#ValidateCGU,
#ValidateSMS {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: 12px;
    cursor: pointer;
    font-size: 0.9em;
    color: #444;
    line-height: 1.5;
}

.reg-toggle-wrap {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    margin-top: 2px;
}

/* Hidden real checkbox — override min-width from #SubBlock input */
#SubBlock .reg-toggle-input {
    position: absolute;
    opacity: 0;
    min-width: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.reg-toggle-track {
    display: inline-block;
    width: 44px;
    height: 24px;
    background: #ccc;
    border-radius: 12px;
    position: relative;
    transition: background 0.2s;
    cursor: pointer;
    flex-shrink: 0;
}

.reg-toggle-track::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: left 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.reg-toggle-input:checked + .reg-toggle-track {
    background: var(--Color3);
}

.reg-toggle-input:checked + .reg-toggle-track::after {
    left: 22px;
}

/* -------------------------------------------------------
   Bouton S'inscrire
   ------------------------------------------------------- */
#SubBlock #SubscribeValid {
    background: var(--Color2) !important;
    width: 100%;
    justify-content: center;
    margin: 4px 0;
    box-sizing: border-box;
}

/* -------------------------------------------------------
   Phone input group — select indicatif + champ téléphone
   Spécificité (2,1,1) > login.css (2,1,0) — charge après alphabétiquement
   ------------------------------------------------------- */
body.register-mode #Log_Form #GetPhoneBlock {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin-top: 0;
}

body.register-mode #Log_Form #CountryCode {
    flex-shrink: 0;
    width: auto;
    max-width: 175px;
    height: 44px;
    margin: 0;
    border-right: none;
    border-radius: 8px 0 0 8px;
}

body.register-mode #Log_Form #Phone {
    flex: 1;
    min-width: 0;
    height: 44px;
    margin: 0;
    border-radius: 0 8px 8px 0;
}

body.register-mode #Log_Form #GetPhoneBlock:focus-within #CountryCode,
body.register-mode #Log_Form #GetPhoneBlock:focus-within #Phone {
    border-color: var(--Color3);
}

/* "J'ai déjà un compte" — lien texte sous le bouton */
.reg-back-link {
    display: block;
    text-align: center;
    margin-top: 4px;
    font-size: 0.9em;
    color: var(--Color3);
    cursor: pointer;
    text-decoration: underline;
}

.reg-back-link:hover {
    color: var(--Color4);
}

/* -------------------------------------------------------
   Cacher .login-alt-action (lien "Créer un compte") en register
   ------------------------------------------------------- */
body.register-mode #PhoneBlock .login-alt-action {
    display: none;
}

/* -------------------------------------------------------
   Cacher le bouton Suivant en register (formulaire séparé)
   ------------------------------------------------------- */
body.register-mode #ValidatePhone {
    display: none !important;
}

/* -------------------------------------------------------
   .lf-intro — paragraphe d'intro inséré par initLoginForm
   En register il contient "Numéro de téléphone Obligatoire"
   ------------------------------------------------------- */
.lf-intro {
    margin: 0 0 12px 0;
    font-size: 0.85em;
    font-weight: 600;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.register-mode .lf-intro {
    font-size: 0.85em;
}

/* Masquer le doublon PhoneInstruct en register (label déjà dans .lf-intro) */
body.register-mode #PhoneInstruct {
    display: none;
}

/* -------------------------------------------------------
   Couleur des liens CGU / SMS dans les toggles
   ------------------------------------------------------- */
#CGUtxt a,
#SMStxt a {
    color: var(--Color3);
    text-decoration: underline;
    cursor: pointer;
}

#CGUtxt a:hover,
#SMStxt a:hover {
    color: var(--Color4);
}


/* Réserver view — préfixe rv-* */

/* --- Section heatmap trafic --- */
.rv-heatmap-section { padding: 32px 0 24px; }

.rv-heatmap-title {
    font-size: 1.1em;
    color: var(--Color4);
    margin: 0 0 6px;
}

.rv-heatmap-hint {
    font-size: 0.88em;
    color: #888;
    margin: 0 0 14px;
}

.rv-heatmap-wrap { overflow-x: auto; max-width: 420px; margin: 0 auto; }

.rv-heatmap-table {
    border-collapse: separate;
    border-spacing: 6px;
    width: 100%;
    table-layout: fixed;
}

.rv-heatmap-table th {
    font-size: 0.78em;
    color: #666;
    font-weight: 500;
    padding: 0 4px 6px;
    text-align: center;
}

.rv-hm-day {
    width: 15%;
    font-size: 0.82em;
    color: #555;
    padding-right: 8px;
    white-space: nowrap;
}

.rv-hm-cell {
    width: auto;
    aspect-ratio: 1.4;
    border-radius: 4px;
    border: 1px solid #ddd;
}

/* Échelle heatmap séquentielle (data-viz, pas du chrome de marque) */
.rv-hm-none  { background: #eee; }
.rv-hm-low   { background: #a8d8a8; } /* color-lint-disable-line */
.rv-hm-mid   { background: #f0c060; } /* color-lint-disable-line */
.rv-hm-high  { background: #e88040; } /* color-lint-disable-line */
.rv-hm-peak  { background: #d94040; } /* color-lint-disable-line */

.rv-heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 0.82em;
    color: #666;
}

.rv-hm-legend-item {
    display: inline-block;
    width: 18px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

.sp-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.sp-client-list {
    width: 280px;
    min-width: 280px;
    flex-shrink: 0;
    overflow-y: auto;
    background: white;
    border-right: 1px solid #e0e0e0;
    color: #333;
}

.sp-client-card {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}

.sp-client-card:hover {
    background: #f5f5f5;
}

.sp-client-card.active {
    background: var(--Color3, #0981bc);
    color: white;
}

.sp-client-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sp-client-preview {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: #888;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-client-card.active .sp-client-preview {
    color: rgba(255, 255, 255, 0.75);
}

.sp-pastille {
    display: inline-block;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--Color5, #e15154);
    color: white;
    font-size: 11px;
    font-family: 'DM Sans', sans-serif;
    text-align: center;
    line-height: 18px;
    padding: 0 4px;
}

.sp-conversation {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fafafa;
    min-height: 0;
}

.sp-empty {
    padding: 16px;
    color: #999;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    text-align: center;
}

.sp-no-conv-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #ccc;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
}
.sp-no-conv-placeholder .icon { width: 40px; height: 40px; }

/* Switch service — poussé à droite sans titre */
#sp-svc-switch { margin-left: auto; }

/* Badge service Support / Sales */
.sp-svc-badge {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    vertical-align: middle;
    margin-right: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sp-svc-badge--support {
    background: color-mix(in srgb, var(--Color3) 12%, white);
    color: var(--Color3);
    border: 1px solid color-mix(in srgb, var(--Color3) 30%, white);
}
.sp-svc-badge--sales {
    background: color-mix(in srgb, var(--Color6) 12%, white);
    color: var(--Color6);
    border: 1px solid color-mix(in srgb, var(--Color6) 30%, white);
}
.sp-client-card.active .sp-svc-badge {
    background: rgba(255,255,255,0.2);
    color: white;
    border-color: rgba(255,255,255,0.3);
}

/* Loader 3 points */
.sp-loader { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 24px 16px; }
.sp-loader-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--Color3); opacity: 0.3; animation: spDotPulse 1.2s ease-in-out infinite; }
.sp-loader-dot:nth-child(2) { animation-delay: 0.2s; }
.sp-loader-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes spDotPulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }
.sp-loader-wrap { align-items: center; justify-content: center; }

/* Accordéon entreprise */
.sp-ent-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #aaa;
    background: none;
    border: none;
    border-top: 1px solid #eee;
    cursor: pointer;
    text-align: left;
    transition: color 0.15s, background 0.15s;
}
.sp-ent-header:first-child { border-top: none; }
.sp-ent-header:hover { color: var(--Color3); background: #f9f9f9; }
.sp-ent-name { flex: 1; }
.sp-ent-badge {
    display: inline-block;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--Color5);
    color: white;
    font-size: 10px;
    font-family: 'DM Sans', sans-serif;
    text-align: center;
    line-height: 16px;
    flex-shrink: 0;
}
.sp-ent-arrow { flex-shrink: 0; transition: transform 0.2s; }
.sp-ent-arrow .icon { width: 12px; height: 12px; }
.sp-ent-header .sp-ent-arrow { transform: rotate(-90deg); }
.sp-ent-header.open .sp-ent-arrow { transform: rotate(0deg); }
.sp-ent-body { display: none; }
.sp-ent-body.open { display: block; }

/* Archive (conversations lues) */
.sp-archive-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: #bbb;
    background: none;
    border: none;
    border-top: 1px solid #f0f0f0;
    cursor: pointer;
    text-align: left;
    transition: color 0.15s;
}
.sp-archive-toggle:hover { color: var(--Color3); }
.sp-archive-toggle .icon { width: 13px; height: 13px; opacity: 0.7; flex-shrink: 0; }
.sp-archive-toggle span:not(.sp-arc-arrow) { flex: 1; }
.sp-arc-arrow { flex-shrink: 0; transition: transform 0.2s; }
.sp-arc-arrow .icon { width: 11px; height: 11px; }
.sp-archive-toggle.open .sp-arc-arrow { transform: rotate(180deg); }
.sp-archived { display: none; }
.sp-archived.open { display: block; }

.sp-bubble {
    max-width: 70%;
    padding: 8px 12px;
    border-radius: 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
}

.sp-bubble.client {
    align-self: flex-start;
    background: #efefef;
    color: #333;
    border-bottom-left-radius: 2px;
}

.sp-bubble.worker {
    align-self: flex-end;
    background: var(--Color3, #0981bc);
    color: white;
    border-bottom-right-radius: 2px;
}

.sp-read-mark {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    opacity: 0.6;
    cursor: default;
}

.sp-form {
    border-top: 1px solid #e0e0e0;
    background: white;
    flex-shrink: 0;
}

/* Textarea composer — même look que #mg-textarea (sans bordure, intégré dans mg-composer-inner) */
.sp-composer-ta {
    border: none;
    background: transparent;
    padding: 12px 16px 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    resize: none;
    outline: none;
    min-height: 44px;
    max-height: 140px;
    overflow-y: auto;
    line-height: 1.5;
    width: 100%;
    box-sizing: border-box;
    color: #333;
    display: block;
}
.sp-composer-ta:disabled { opacity: 0.45; }

/* Bouton IA dans quick-actions — désactivé pendant la génération */
#sp-ai-btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.sp-ai-hint {
    font-style: italic;
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

/* Worker section */
.spw-section {
    padding: 24px;
    max-width: 700px;
}

.spw-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--Color4, #254e89);
    border-left: 4px solid var(--Color3, #0981bc);
    padding-left: 10px;
    margin: 0 0 16px;
}

.spw-identity-block,
.spw-jwt-block {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    margin-bottom: 20px;
}

.spw-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
}

.spw-th {
    text-align: left;
    padding: 8px 12px 8px 0;
    color: #666;
    font-weight: 600;
    width: 120px;
    white-space: nowrap;
}

.spw-td {
    padding: 8px 0;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
    word-break: break-all;
}

.spw-copy-btn {
    flex-shrink: 0;
    padding: 3px 10px;
    font-size: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    color: #555;
    transition: background 0.15s;
}

.spw-copy-btn:hover {
    background: color-mix(in srgb, var(--Color3, #0981bc) 10%, white);
    border-color: var(--Color3, #0981bc);
}

.spw-warning {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: var(--Color5, #e15154);
    margin: 0 0 16px;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--Color5, #e15154) 10%, white);
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--Color5, #e15154) 30%, white);
}

.spw-alert {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: var(--Color5, #e15154);
    padding: 8px 12px;
    background: color-mix(in srgb, var(--Color5, #e15154) 10%, white);
    border-radius: 6px;
    margin: 8px 0 0;
}

.spw-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.spw-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.spw-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #666;
}

.spw-expires {
    font-weight: 400;
    color: #999;
}

.spw-tokens {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.spw-token-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.spw-token-line {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.spw-token-area {
    flex: 1;
    font-family: monospace;
    font-size: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px;
    resize: none;
    color: #333;
    background: #f9f9f9;
    word-break: break-all;
}

/* User & Company lookup sections */
.spu-section,
.spc-section {
    padding: 24px;
    max-width: 800px;
}

.spu-search-row {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.spu-search-row .ds-field-input {
    flex: 1;
}

.spu-state {
    padding: 12px 16px;
    border-radius: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    margin-top: 12px;
}

.spu-state--error {
    color: var(--Color5, #e15154);
    background: color-mix(in srgb, var(--Color5, #e15154) 10%, white);
    border: 1px solid color-mix(in srgb, var(--Color5, #e15154) 30%, white);
}

.spu-state--empty {
    color: #888;
    background: #f5f5f5;
}

.spu-result-block {
    margin-top: 8px;
}

.spu-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--Color4, #254e89);
    border-left: 3px solid var(--Color3, #0981bc);
    padding-left: 8px;
    margin: 20px 0 10px;
}

.spu-identity-card {
    background: white;
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.spu-field-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #f5f5f5;
}

.spu-field-row:last-child {
    border-bottom: none;
}

.spu-field-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    width: 80px;
    flex-shrink: 0;
}

.spu-field-value {
    flex: 1;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: #333;
    word-break: break-all;
}

.spu-customer-card {
    background: white;
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    margin-bottom: 16px;
}

.spu-customer-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.spu-customer-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.spu-badge {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.spu-badge--ent {
    background: color-mix(in srgb, var(--Color3, #0981bc) 12%, white);
    color: var(--Color3, #0981bc);
    border: 1px solid color-mix(in srgb, var(--Color3, #0981bc) 30%, white);
}

.spu-badge--cgdv {
    background: color-mix(in srgb, var(--Color6, #27ae60) 12%, white);
    color: var(--Color6, #27ae60);
    border: 1px solid color-mix(in srgb, var(--Color6, #27ae60) 30%, white);
}

.spu-badge--error {
    background: color-mix(in srgb, var(--Color5, #e15154) 12%, white);
    color: var(--Color5, #e15154);
    border: 1px solid color-mix(in srgb, var(--Color5, #e15154) 30%, white);
}

.spu-notif-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #888;
    margin: 12px 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.spu-notif-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
}

.spu-notif-table th {
    text-align: left;
    padding: 4px 8px;
    background: #f5f5f5;
    color: #666;
    font-weight: 600;
    border-bottom: 1px solid #eee;
}

.spu-notif-table td {
    padding: 4px 8px;
    border-bottom: 1px solid #f5f5f5;
    color: #333;
}

.spu-more {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: #aaa;
    margin: 4px 0 0;
    font-style: italic;
}

/* Company-specific */
.spc-machine-card {
    background: white;
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    margin-bottom: 16px;
}

.spc-machine-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.spc-machine-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.spc-machine-login {
    font-family: monospace;
    font-size: 12px;
    color: #999;
}

.spc-uuid {
    flex: 1;
    font-family: monospace;
    font-size: 12px;
    color: #666;
    word-break: break-all;
}

.spc-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
}

.spc-mode-badge {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    background: #ddd;
    color: #888;
}

.spc-mode-badge--on {
    background: color-mix(in srgb, var(--Color6, #27ae60) 15%, white);
    color: var(--Color6, #27ae60);
    border: 1px solid color-mix(in srgb, var(--Color6, #27ae60) 35%, white);
}

.spc-toggle-btn {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    padding: 4px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    color: var(--Color3, #0981bc);
    margin-bottom: 8px;
    transition: background 0.15s;
}

.spc-toggle-btn:hover {
    background: color-mix(in srgb, var(--Color3, #0981bc) 8%, white);
}

.spc-lockers {
    overflow-x: auto;
}

/* Support Panel Shell — navigation 4 sections */
#Support {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#Support .page-container {
    flex: 1;
    min-height: 0;
    display: flex;
    /* flex-direction géré par .sp-shell (column en base, row ≥1200px) —
       ne PAS forcer column ici : sélecteur #id+classe écraserait .sp-shell */
    overflow: hidden;
}

.sp-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sp-sections {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 56px; /* mobile: compense la nav fixe du bas */
}

.sp-section {
    display: none;
}

.sp-section.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.sp-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: white;
    border-top: 1px solid #e0e0e0;
    z-index: 1000;
}

.sp-nav-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    color: #999;
    transition: color 0.15s;
}

.sp-nav-item:hover,
.sp-nav-item.active {
    color: var(--Color3, #0981bc);
}

.sp-nav-item svg,
.sp-nav-item .icon {
    width: 22px;
    height: 22px;
}

@media (max-width: 767px) {
    .sp-layout {
        flex-direction: column;
    }

    .sp-client-list {
        width: 100%;
        min-width: 0;
        max-height: 200px;
        flex-shrink: 0;
    }
}

@media only screen and (min-width: 1200px) {
    .sp-shell {
        flex-direction: row;
    }

    .sp-sections {
        padding-bottom: 0;
    }

    .sp-nav {
        position: static;
        flex-direction: column;
        width: 56px;
        flex-shrink: 0;
        align-self: stretch; /* remplit toute la hauteur du shell */
        border-top: none;
        border-right: 1px solid #e0e0e0;
        align-items: stretch;
        justify-content: flex-start;
        padding-top: 8px;
        z-index: auto;
    }

    .sp-nav-item {
        flex: 0 0 48px;
        width: 100%;
    }
}

/* ============================================================================
   wc-templates.css — Styles pour les templates de blocs webcontent composés
   (diaporama, témoignages, kpi)
   Utilise uniquement var(--Color*) pour les couleurs de marque.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Diaporama — full-bleed, légende + points en overlay sur le slide
   --------------------------------------------------------------------------- */
.wct-diaporama-section {
    padding: 0;
}

.wct-diaporama {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    background: #f5f5f5;
    width: 100%;
    min-height: 320px;
}

.wct-slides {
    position: relative;
    width: 100%;
    min-height: 320px;
}

.wct-slide {
    display: none;
    width: 100%;
    position: relative;
}

.wct-slide--active {
    display: block;
}

.wct-slide__img {
    width: 100%;
    height: clamp(320px, 56vh, 560px);
    overflow: hidden;
}

/* Légende = titre + contenu superposés sur l'image, alignés dans le conteneur.
   L'image reste full-width ; le texte est contraint à .container (disposition
   « hero classique »). Scrim dégradé pour la lisibilité. */
.wct-slide__caption {
    position: absolute;
    inset: 0;
    color: white;
    /* Double scrim : pondéré à GAUCHE (où le texte aligné à gauche vit, lisible
       quelle que soit la hauteur sur image claire) + léger voile bas (dots). */
    background:
        linear-gradient(to right, rgba(0,0,0,0.72), rgba(0,0,0,0.25) 48%, rgba(0,0,0,0) 72%),
        linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0) 38%);
    /* Overlay décoratif : ne doit jamais intercepter les clics (flèches/dots). */
    pointer-events: none;
}

/* Bloc texte centré verticalement : la mise en page ne contient que les zones
   réellement remplies (titre / contenu / bouton), et le bloc est centré → un
   titre seul descend au centre, l'absence de bouton répartit l'espace, sans
   trou en haut. left/right:0 + max-width hérité de .container → centré, texte à
   gauche. Responsive : le centrage s'adapte à toute hauteur de slide. */
.wct-slide__caption-inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
}

/* Couleur forcée en blanc : la légende est sur image, le texte doit rester clair.
   Sélecteurs scopés sous .wct-slide__caption pour battre `.content-section h2`
   (var(--Color4)) et `.content-section p` (#444) qui sinon teintent le texte. */
.wct-slide__caption .wct-slide__title {
    color: white;
    font-size: clamp(1.6em, 3.2vw, 2.6em);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 12px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.55);
}

.wct-slide__caption .wct-slide__body,
.wct-slide__caption .wct-slide__body p {
    color: white;
    font-size: 1.05em;
    line-height: 1.6;
    max-width: 560px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    margin: 0;
}

/* Lien simple (dans un <p>) : blanc souligné, lisible sur image. */
.wct-slide__caption .wct-slide__body p a {
    color: white;
    text-decoration: underline;
}

/* La légende est pointer-events:none (laisse passer les clics vers les flèches).
   Mais TOUS ses liens doivent rester cliquables — y compris ceux dans un <p>. */
.wct-slide__caption a {
    pointer-events: auto;
}

/* Lien « CTA » → bouton pilule : enfant direct du contenu (hors <p>).
   Un lien dans un <p> reste un lien souligné. Scopé sous .wct-slide__caption
   pour battre la règle de lien souligné ci-dessus. */
.wct-slide__caption .wct-slide__body > a {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 22px;
    background: var(--Color2);
    color: white;
    border-radius: var(--radius-button);
    font-weight: 600;
    text-decoration: none;
    text-shadow: none;
    box-shadow: var(--shadow-button, 0 2px 8px rgba(0,0,0,0.25));
    pointer-events: auto;
    transition: opacity 0.2s;
}

.wct-slide__caption .wct-slide__body > a:hover {
    opacity: 0.9;
}

/* Flèches navigation */
.wct-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: var(--Color3);
    color: white;
    border: none;
    border-radius: 25px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.wct-arrow:hover {
    opacity: 1;
}

.wct-arrow--prev {
    left: 12px;
}

.wct-arrow--next {
    right: 12px;
}

.wct-arrow .icon {
    width: 20px;
    height: 20px;
    fill: white;
}

/* Points indicateurs — overlay bas-centre, sur le slide */
.wct-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    z-index: 11;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 0;
    background: transparent;
}

.wct-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}

.wct-dot--active {
    background: white;
}

/* ---------------------------------------------------------------------------
   Témoignages
   --------------------------------------------------------------------------- */
.wct-temoignages {
    margin-top: 24px;
    align-items: stretch;
}

.wct-temo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border-radius: 12px;
    background: white;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    border: 1px solid #eee;
    transition: box-shadow 0.2s, transform 0.2s;
}

.wct-temo:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.wct-temo__stars {
    color: var(--wct-section-accent, var(--Color3));
    font-size: 1.1em;
    letter-spacing: 2px;
    line-height: 1;
}

.wct-temo__text {
    line-height: 1.65;
    color: var(--bright_text_color);
    font-style: italic;
    font-size: 0.95em;
    margin: 0;
}

.wct-temo__text p {
    margin: 0;
}

.wct-temo__author {
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
}

.wct-temo__name {
    display: block;
    font-size: 0.9em;
    font-weight: 700;
    color: var(--Color4);
}

.wct-temo__role {
    display: block;
    font-size: 0.8em;
    color: #888;
    margin-top: 2px;
}

/* Carousel temoignages (> 3 items) — reprend le layout wct-diaporama */
.wct-temoignages--carousel {
    position: relative;
    overflow: hidden;
    margin-top: 24px;
}
.wct-temoignages--carousel .wct-slide { display: none; }
.wct-temoignages--carousel .wct-slide--active { display: block; }
.wct-temoignages--carousel .wct-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-button, 0 2px 8px rgba(0,0,0,0.2));
    color: var(--Color4);
}
.wct-temoignages--carousel .wct-arrow--prev { left: -8px; }
.wct-temoignages--carousel .wct-arrow--next { right: -8px; }
.wct-temoignages--empty {
    text-align: center;
    padding: 32px;
    color: #888;
    font-style: italic;
}
.wct-temoignages--empty a {
    color: var(--Color3);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   KPI
   --------------------------------------------------------------------------- */
.wct-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
    text-align: center;
    margin-top: 24px;
}

.wct-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
}

.wct-kpi__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 4px;
}

.wct-kpi__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Icône d'enfant (option icon), alternative à la photo — même box, même logique
   que .wct-col__icon (voir Colonnes) : paths en fill="currentColor", `color` pilote la teinte. */
.wct-kpi__icon .icon {
    width: 100%;
    height: 100%;
    color: var(--wct-section-accent, var(--Color3));
    fill: var(--wct-section-accent, var(--Color3));
}

.wct-kpi__value {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--wct-section-accent, var(--Color3));
    line-height: 1.1;
}

.wct-kpi__label {
    color: var(--background_color);
    font-size: 0.9em;
    line-height: 1.4;
}

/* ---------------------------------------------------------------------------
   Colonnes
   --------------------------------------------------------------------------- */
.wct-columns-grid {
    display: grid;
    gap: 32px 48px; /* row-gap 32px / column-gap 48px — plus d'air horizontal entre colonnes */
    margin-top: 24px;
}

.wct-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wct-col__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-image);
}

.wct-col__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Format d'image des colonnes (photo_class, catalogue « Format de l'image »)
   Défaut (aucun token) = paysage 16/9 rogné, cf. .wct-col__img ci-dessus. */

/* Portrait rogné : cadre vertical 3/4, image remplie (recadrée au centre). */
.wct-col__img.wc-photo-portrait { aspect-ratio: 3 / 4; }

/* Portrait entier : cadre vertical 3/4, image complète — ni rognée ni déformée.
   object-fit: contain ; le letterbox laisse voir le fond de section (transparent). */
.wct-col__img.wc-photo-portrait-contain { aspect-ratio: 3 / 4; }
.wct-col__img.wc-photo-portrait-contain img { object-fit: contain; }

/* Ratio naturel : la hauteur suit les proportions réelles de l'image ; aucun
   cadre imposé, aucun rognage, aucune déformation (colonnes de hauteurs libres). */
.wct-col__img.wc-photo-natural { aspect-ratio: auto; }
.wct-col__img.wc-photo-natural img { height: auto; object-fit: contain; }

.wct-col__title {
    font-size: 1.05em;
    font-weight: 600;
    color: var(--Color4);
    margin: 0;
}

.wct-col__text {
    color: var(--bright_text_color);
    font-size: 0.88em;
    line-height: 1.6;
    margin: 0;
}

/* Le contenu CMS contient des <p>/<hX>/<ul> : rythme vertical harmonisé pour
   que l'espacement soit cohérent quelle que soit la balise. Les marges externes
   (premier/dernier enfant) sont neutralisées → l'écart icône→titre→texte est
   piloté par le gap du .wct-col (sinon la marge du premier bloc colle le titre
   à l'icône). */
.wct-col__text h2,
.wct-col__text h3,
.wct-col__text h4,
.wct-col__text h5,
.wct-col__text h6 {
    margin: 1.2em 0 0.4em;
    line-height: 1.3;
}
.wct-col__text p,
.wct-col__text ul,
.wct-col__text ol {
    margin: 0 0 0.8em;
}
.wct-col__text > :first-child { margin-top: 0; }
.wct-col__text > :last-child { margin-bottom: 0; }

/* Lien « CTA » dans une colonne → bouton pilule.
   Deux cas : enfant direct (rare) ou lien seul contenu de son <p> — marqué
   wct-cta-link par _internalizeLinks() (lib/views/_wc-templates.js), car
   :only-child ignore les nœuds texte et confondrait un lien en fin de phrase
   avec un lien réellement isolé. */
.wct-col__text > a,
.wct-col__text p > a.wct-cta-link {
    display: inline-block;
    margin-top: 8px;
    padding: 10px 22px;
    background: var(--wct-section-accent, var(--Color2));
    color: white !important;
    border-radius: var(--radius-button);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-button, 0 2px 8px rgba(0,0,0,0.25));
    transition: opacity 0.2s;
}
.wct-col__text > a:hover,
.wct-col__text p > a.wct-cta-link:hover {
    opacity: 0.9;
}

/* Bloc parent avec wct-plain-links (block_class CMS) → liens inline, pas bouton pilule. */
.wct-plain-links .wct-col__text > a,
.wct-plain-links .wct-col__text p > a.wct-cta-link {
    display: inline;
    margin-top: 0;
    padding: 0;
    background: none;
    color: var(--Color3) !important;
    border-radius: 0;
    font-weight: inherit;
    text-decoration: underline;
    box-shadow: none;
}
.wct-plain-links .wct-col__text > a:hover,
.wct-plain-links .wct-col__text p > a.wct-cta-link:hover {
    opacity: 0.8;
}

/* Lien URL brute (texte = URL) → jamais un bouton pilule, toujours un lien souligné. */
.wct-col__text p > a.wct-raw-url {
    display: inline;
    margin-top: 0;
    padding: 0;
    background: none;
    color: var(--Color3) !important;
    border-radius: 0;
    font-weight: inherit;
    text-decoration: underline;
    box-shadow: none;
}
.wct-col__text p > a.wct-raw-url:hover {
    opacity: 1;
    text-decoration: none;
}

/* .plain (fond plein sombre) → dark_text_color (clair, comme le nav)
   .soft (fond teinté clair) → bright_text_color (sombre)
   !important requis pour battre les styles inline Quill et les déclarations explicites */
.content-section.plain .wct-col__title,
.content-section.plain .wct-col__text { color: var(--dark_text_color) !important; }
.content-section.soft .wct-col__title,
.content-section.soft .wct-col__text { color: var(--bright_text_color) !important; }
/* Modèle opacité — fonds soutenus (≥75%) et solide → texte de colonne appairé (fg) */
.content-section.background-opacity-75 .wct-col__title,
.content-section.background-opacity-75 .wct-col__text,
.content-section.background-opacity-90 .wct-col__title,
.content-section.background-opacity-90 .wct-col__text,
.content-section[class*="background-color-"]:not(.soft):not(.plain):not([class*="background-opacity-"]) .wct-col__title,
.content-section[class*="background-color-"]:not(.soft):not(.plain):not([class*="background-opacity-"]) .wct-col__text { color: var(--wct-section-fg-color, var(--dark_text_color)) !important; }

/* Icône d'item (option icon de l'enfant), alternative à la photo.
   Badge centré, carré à bords arrondis (border-radius:50% pour un rond),
   sur fond de couleur de marque teinté. */
.wct-col__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--wct-section-bg-color, var(--Color1)) 20%, white);
    border-radius: 16px;
}

.wct-col__icon .icon {
    width: 32px;
    height: 32px;
    /* Les paths du sprite sont en fill="currentColor" → c'est `color` qui pilote
       la teinte, pas `fill` (un fill hérité ne bat pas l'attribut du <path>). */
    color: var(--wct-section-accent, var(--Color3));
    fill: var(--wct-section-accent, var(--Color3));
}

/* Position du visuel (image ou icône) relative au titre.
   Défaut : visuel au-dessus du titre. */
.wct-col__img,
.wct-col__icon { order: 1; }
.wct-col__title { order: 2; }
.wct-col__text { order: 3; }

/* block_class = cols-icon-bare → icône sans fond teinté (pictogramme nu, agrandi).
   Le carré teinté est affiché par défaut ; ce token le retire (opt-out). */
.wct-columns-grid.cols-icon-bare .wct-col__icon {
    background: transparent;
    border-radius: 0;
}
.wct-columns-grid.cols-icon-bare .wct-col__icon .icon {
    width: 40px;
    height: 40px;
}

/* block_class = wct-img-below sur le parent → visuel sous le titre */
.wct-columns-grid.wct-img-below .wct-col__title { order: 1; }
.wct-columns-grid.wct-img-below .wct-col__img,
.wct-columns-grid.wct-img-below .wct-col__icon { order: 2; }

/* block_class = cols-with-background → chaque colonne devient une carte au fond
   teinté d'une couleur de marque. Teinte douce via color-mix (alpha sur blanc),
   même principe que .wct-col__icon.
   Couleur unique : changer --wct-col-tint pour tester une autre des 6 Color* ou
   --dark_text_color / --bright_text_color. */
.wct-columns-grid.cols-with-background {
    --wct-col-tint: var(--Color1);
    gap: 24px;
}
.wct-columns-grid.cols-with-background .wct-col {
    background: color-mix(in srgb, var(--wct-col-tint) 10%, white);
    border: 1px solid color-mix(in srgb, var(--wct-col-tint) 22%, transparent);
    border-radius: 12px;
    padding: 24px;
}

/* Même option « Colonnes avec fond » (cols-with-background) appliquée aux KPI :
   chaque chiffre-clé devient une carte au fond teinté. */
.wct-kpi-grid.cols-with-background {
    --wct-col-tint: var(--Color1);
}
.wct-kpi-grid.cols-with-background .wct-kpi {
    background: color-mix(in srgb, var(--wct-col-tint) 10%, white);
    border: 1px solid color-mix(in srgb, var(--wct-col-tint) 22%, transparent);
    border-radius: 12px;
}

/* ---------------------------------------------------------------------------
   Stepper — étapes séquentielles (badge numéroté + ligne de liaison)
   --------------------------------------------------------------------------- */
/* Rangées partagées via subgrid : chaque étape (.wct-step) est un sous-grid de
   4 rangées de .wct-stepper-grid — la hauteur de chaque rangée s'aligne sur le
   contenu le plus grand parmi toutes les étapes, donc badge/image/titre/texte
   démarrent tous à la même position verticale d'une étape à l'autre, quelle
   que soit la longueur du texte des autres étapes (retour utilisateur). Chaque
   élément reçoit son numéro de rangée en inline style depuis renderStepper()
   (dépend de step_image_position), sauf la ligne de liaison ci-dessous dont la
   rangée est fixe par variante (ne dépend pas du contenu d'une étape donnée). */
.wct-stepper-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    gap: 0;               /* pas de gap : la ligne de liaison reste continue */
    margin-top: 32px;
}
.wct-step {
    grid-row: 1 / span 4;
    display: grid;
    grid-template-rows: subgrid;
    position: relative;
    text-align: center;
    padding: 0 16px;
}
/* Ligne horizontale au niveau du centre du badge (cachée par le badge plein) —
   partage la rangée du badge : rangée 2 par défaut (image au-dessus des
   chiffres), rangée 1 pour les 3 autres variantes (chiffres toujours en tête). */
.wct-step::before {
    content: '';
    grid-row: 2;
    align-self: center;
    height: 2px;
    background: color-mix(in srgb, var(--wct-section-accent, var(--Color3)) 40%, transparent);
    z-index: 0;
}
.wct-stepper-grid.wct-step-img-after-number .wct-step::before,
.wct-stepper-grid.wct-step-img-after-title .wct-step::before,
.wct-stepper-grid.wct-step-img-after-content .wct-step::before { grid-row: 1; }
.wct-step:first-child::before { margin-left: 50%; }   /* pas de ligne avant la 1re étape */
.wct-step:last-child::before  { margin-right: 50%; }  /* ni après la dernière */
.wct-step__num {
    position: relative;
    z-index: 1;
    justify-self: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--wct-section-accent, var(--Color3));
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.3em;
    margin-bottom: 24px;
}
.wct-step__num .icon { width: 22px; height: 22px; color: white; fill: white; }
/* Image optionnelle par étape (c.photo dans le CMS) */
.wct-step__img {
    width: 100%;
    max-width: 160px;
    height: 120px;
    object-fit: contain;
    margin: 0 auto 12px;
    display: block;
}
@media (max-width: 767px) {
    .wct-step__img { max-width: 120px; height: 90px; }
}
/* Icône optionnelle par étape (option icon de l'enfant), alternative à la
   photo — occupe la même rangée/position qu'elle. Même principe visuel que
   .wct-col__icon (carré teinté, icône colorée à l'accent) ; jamais les deux
   en même temps (priorité gérée dans renderStepper). */
.wct-step__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--wct-section-bg-color, var(--Color1)) 20%, white);
    border-radius: 16px;
    /* La rangée subgrid partagée avec les photos peut être plus haute qu'un
       picto (taille fixe) — centrer verticalement plutôt que rester en haut. */
    align-self: center;
}
.wct-step__icon .icon {
    width: 32px;
    height: 32px;
    color: var(--wct-section-accent, var(--Color3));
    fill: var(--wct-section-accent, var(--Color3));
}
/* block_class = step-icon-bare → icône sans fond teinté (pictogramme nu,
   agrandi), même toggle que cols-icon-bare pour les colonnes. */
.wct-stepper-grid.step-icon-bare .wct-step__icon {
    background: transparent;
    border-radius: 0;
}
.wct-stepper-grid.step-icon-bare .wct-step__icon .icon {
    width: 40px;
    height: 40px;
}
.wct-step__title {
    color: var(--Color4);
    margin: 0 0 8px;
    font-size: 1.05em;
}
.wct-step__text {
    color: var(--bright_text_color);
    font-size: 0.95em;
    line-height: 1.55;
}
/* Contraste sur fonds soutenus (≥75%) / solide — texte appairé, comme les colonnes */
.content-section.background-opacity-75 .wct-step__title,
.content-section.background-opacity-75 .wct-step__text,
.content-section.background-opacity-90 .wct-step__title,
.content-section.background-opacity-90 .wct-step__text,
.content-section[class*="background-color-"]:not(.soft):not(.plain):not([class*="background-opacity-"]) .wct-step__title,
.content-section[class*="background-color-"]:not(.soft):not(.plain):not([class*="background-opacity-"]) .wct-step__text { color: var(--wct-section-fg-color, var(--dark_text_color)) !important; }

/* Style des chiffres (step_number_style) — alternatives au rond plein par défaut */
.wct-stepper-grid.wct-step-num-outline .wct-step__num {
    background: transparent;
    border: 2px solid var(--wct-section-accent, var(--Color3));
    color: var(--wct-section-accent, var(--Color3));
}
.wct-stepper-grid.wct-step-num-square .wct-step__num {
    border-radius: var(--radius-image);
}
.wct-stepper-grid.wct-step-num-plain .wct-step__num {
    width: auto;
    height: auto;
    background: transparent;
    color: var(--wct-section-accent, var(--Color3));
    font-size: 1.8em;
    margin-bottom: 8px;
}
/* Chiffre seul, sans cercle : la ligne de liaison n'a plus de repère visuel
   (elle était pensée pour relier les badges ronds) — on la retire. */
.wct-stepper-grid.wct-step-num-plain .wct-step::before { display: none; }

/* Position de l'image (step_image_position) — l'ordre DOM (et donc les rangées
   inline posées par renderStepper()) porte déjà la disposition ; seul le cas
   « après le contenu » a besoin d'un ajustement de marge : l'image est alors
   la dernière du groupe, il lui faut un espace au-dessus (et non en dessous,
   qui ne sépare plus rien). */
.wct-stepper-grid.wct-step-img-after-content .wct-step__img,
.wct-stepper-grid.wct-step-img-after-content .wct-step__icon { margin: 12px auto 0; }

/* Forme de l'image (photo_class de l'étape, catalogue « Format de l'image »
   groupe photoshape) — recadrage/forme, remplace le "contain" par défaut. */
.wct-step__img.wc-photo-cover { object-fit: cover; }
.wct-step__img.wc-photo-rounded { object-fit: cover; border-radius: var(--radius-image); }
.wct-step__img.wc-photo-circle {
    object-fit: cover;
    border-radius: 50%;
    width: 120px;
    max-width: 120px;
    height: 120px;
}

/* Hauteur relative de l'image (groupe photoheight) — override la hauteur fixe
   par défaut (120px, cf. .wct-step__img). */
.wct-step__img.wc-photo-h-sm { height: 80px; }
.wct-step__img.wc-photo-h-lg { height: 160px; }
/* Hauteur complète : remplit la rangée subgrid partagée avec les autres
   étapes (donc la hauteur réelle de l'image la plus haute du groupe), plutôt
   qu'une valeur fixe — n'a d'effet que grâce à l'alignement subgrid ci-dessus. */
.wct-step__img.wc-photo-h-full { height: 100%; }

/* Marge autour de l'image (groupe photospace) — override la marge par défaut
   (0 auto 12px, cf. .wct-step__img). */
.wct-step__img.wc-photo-m-none { margin: 0 auto; }
.wct-step__img.wc-photo-m-loose { margin: 0 auto 28px; }

/* ---------------------------------------------------------------------------
   Diaporama — en-tête au-dessus du carousel (contenu du parent)
   --------------------------------------------------------------------------- */
/* Alignement partagé — utilisé sur .wct-diaporama-header et .wct-parent-content */
.wct-align-left    { text-align: left; }
.wct-align-center  { text-align: center; }
.wct-align-right   { text-align: right; }
.wct-align-justify { text-align: justify; }

/* Réalignement de l'icône selon l'alignement de la colonne.
   Par défaut .wct-col__icon a margin: 0 auto (centré) — override left/right. */
.wct-col.wct-align-left  .wct-col__icon { margin-left: 0; }
.wct-col.wct-align-right .wct-col__icon { margin-left: auto; margin-right: 0; }

.wct-diaporama-header {
    padding: 48px 0 32px;
    text-align: center; /* défaut si aucune classe wct-align-* */
}

.wct-diapo-body {
    color: var(--bright_text_color);
    font-size: 1em;
    line-height: 1.7;
    max-width: 720px;
}

/* Centrage du bloc texte selon l'alignement choisi */
.wct-diaporama-header.wct-align-center .wct-diapo-body { margin: 0 auto; }
.wct-diaporama-header.wct-align-right .wct-diapo-body  { margin: 0 0 0 auto; }

.wct-diapo-body p,
.wct-diapo-body ul,
.wct-diapo-body ol { margin: 0 0 0.8em; }
.wct-diapo-body > :first-child { margin-top: 0; }
.wct-diapo-body > :last-child { margin-bottom: 0; }

.wct-diapo-body > a,
.wct-diapo-body p > a.wct-cta-link {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 22px;
    background: var(--Color2);
    color: white !important;
    border-radius: var(--radius-button);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-button, 0 2px 8px rgba(0,0,0,0.25));
    transition: opacity 0.2s;
}
.wct-diapo-body > a:hover,
.wct-diapo-body p > a.wct-cta-link:hover { opacity: 0.9; }

.wct-diapo-body p > a.wct-raw-url {
    display: inline;
    margin-top: 0;
    padding: 0;
    background: none;
    color: var(--Color3) !important;
    border-radius: 0;
    font-weight: inherit;
    text-decoration: underline;
    box-shadow: none;
}
.wct-diapo-body p > a.wct-raw-url:hover { opacity: 1; text-decoration: none; }

/* ---------------------------------------------------------------------------
   Colonnes — contenu du parent (body) avant ou après la grille
   --------------------------------------------------------------------------- */
.wct-parent-content {
    color: var(--bright_text_color);
    font-size: 0.95em;
    line-height: 1.7;
}

.wct-parent-content--before { margin: 8px 0 0; }
.wct-parent-content--after  { margin: 24px 0 0; }

.wct-parent-content p,
.wct-parent-content ul,
.wct-parent-content ol { margin: 0 0 0.8em; }
.wct-parent-content > :first-child { margin-top: 0; }
.wct-parent-content > :last-child { margin-bottom: 0; }

.wct-parent-content > a,
.wct-parent-content p > a.wct-cta-link {
    display: inline-block;
    margin-top: 8px;
    padding: 10px 22px;
    background: var(--Color2);
    color: white !important;
    border-radius: var(--radius-button);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-button, 0 2px 8px rgba(0,0,0,0.25));
    transition: opacity 0.2s;
}
.wct-parent-content > a:hover,
.wct-parent-content p > a.wct-cta-link:hover { opacity: 0.9; }

.wct-parent-content p > a.wct-raw-url {
    display: inline;
    margin-top: 0;
    padding: 0;
    background: none;
    color: var(--Color3) !important;
    border-radius: 0;
    font-weight: inherit;
    text-decoration: underline;
    box-shadow: none;
}
.wct-parent-content p > a.wct-raw-url:hover { opacity: 1; text-decoration: none; }

.content-section.plain .wct-parent-content { color: var(--dark_text_color) !important; }
.content-section.soft .wct-parent-content  { color: var(--bright_text_color) !important; }
.content-section.background-opacity-75 .wct-parent-content,
.content-section.background-opacity-90 .wct-parent-content,
.content-section[class*="background-color-"]:not(.soft):not(.plain):not([class*="background-opacity-"]) .wct-parent-content { color: var(--wct-section-fg-color, var(--dark_text_color)) !important; }

/* ---------------------------------------------------------------------------
   Image overlay hero — .wct-hero-overlay
   Bloc de base (sans enfant) : photo pleine largeur + contenu en overlay gauche
   ou droite. Champs : content_title, content, photo + json_options.
   --------------------------------------------------------------------------- */
.wct-hero-overlay {
    position: relative;
    min-height: clamp(400px, 60vh, 640px);
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0;
}

.wct-hero-overlay__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* Scrim gauche → droite (texte à gauche par défaut) */
.wct-hero-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(0,0,0,0.72), rgba(0,0,0,0.25) 48%, rgba(0,0,0,0) 72%),
        linear-gradient(to top,   rgba(0,0,0,0.35), rgba(0,0,0,0) 40%);
    z-index: 1;
    pointer-events: none;
}

/* Variante texte à droite */
.wct-hero-overlay--right::before {
    background:
        linear-gradient(to left,  rgba(0,0,0,0.72), rgba(0,0,0,0.25) 48%, rgba(0,0,0,0) 72%),
        linear-gradient(to top,   rgba(0,0,0,0.35), rgba(0,0,0,0) 40%);
}

/* Contrôles discrets fond vidéo (lecture/pause + son) — bas-droite, au-dessus
   du scrim (::before, z-index: 1). */
.wct-hero-overlay__controls {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    gap: 8px;
}

.wct-hero-overlay__ctrl {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--Color4) 55%, transparent);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity var(--motion-duration-base);
}

.wct-hero-overlay__ctrl:hover,
.wct-hero-overlay__ctrl:focus-visible {
    opacity: 1;
}

.wct-hero-overlay__ctrl .icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.wct-hero-overlay > .container {
    position: relative;
    z-index: 2;
    padding-top: 64px;
    padding-bottom: 64px;
    /* Gouttière gauche réduite : le contenu n'est plus contraint par le
       centrage du .container (sinon ~120px de marge sur grand écran). */
    max-width: none;
    padding-left: clamp(20px, 4vw, 64px);
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.wct-hero-overlay--right > .container {
    align-items: flex-end;
    padding-left: 1rem;
    padding-right: clamp(20px, 4vw, 64px);
}

/* La barre de features (blocs enfants) partage la même gouttière que le contenu,
   sinon son .container reste centré et se désaligne du titre/texte. */
.wct-hero-overlay__features-bar > .container {
    max-width: none;
    padding-left: clamp(20px, 4vw, 64px);
}
.wct-hero-overlay--right .wct-hero-overlay__features-bar > .container {
    padding-left: 1rem;
    padding-right: clamp(20px, 4vw, 64px);
}

.wct-hero-overlay__content {
    max-width: 560px;
    color: white;
}
/* Quand une shape est présente, le contenu suit la largeur (bornée) du panneau
   pour rester dans la découpe et coller la forme au texte sur tous les écrans.
   --wct-hero-content-w est la source de vérité : la shape (plus bas) dérive sa
   largeur de cette même variable, au lieu d'un plancher fixe indépendant du
   texte — sinon sur tablette la shape reste large alors que le texte a déjà
   rétréci, et mange inutilement de la place sur l'image. */
.wct-hero-overlay--shape-diagonal {
    /* 46vw = largeur panneau, -110px (découpe diagonale + gouttière) */
    --wct-hero-content-w: min(440px, calc(46vw - 110px));
}
.wct-hero-overlay--shape-rounded {
    /* Pas de découpe, on retranche surtout la gouttière gauche */
    --wct-hero-content-w: min(460px, calc(46vw - 90px));
}
.wct-hero-overlay--shape-curve {
    /* L'apex de l'ellipse (~88% de la largeur) doit rester à droite du texte */
    --wct-hero-content-w: min(440px, calc(50vw - 110px));
}
.wct-hero-overlay[class*="--shape-"] .wct-hero-overlay__content {
    max-width: var(--wct-hero-content-w);
}

.wct-hero-overlay h1,
.wct-hero-overlay h2,
.wct-hero-overlay h3 {
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.wct-hero-overlay__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}
/* Token font-* porté par le titre (title_class) ou le corps (content_class) du hero.
   Le titre force Playfair / le corps DM Sans par défaut : on surcharge quand une
   police est sélectionnée. --wc-font est posée par .font-* (multivitrines.css). */
.wct-hero-overlay__title[class*="font-"],
.wct-hero-overlay__body[class*="font-"] { font-family: var(--wc-font); }
/* Gras Markdown (**…**) dans le titre → coloré avec l'accent (accent-color-N),
   défaut --Color3 ; le reste du titre reste blanc sur le fond sombre. */
.wct-hero-overlay__title strong {
    color: var(--wct-section-accent, var(--Color3));
}

/* Baseline sous le titre — couleur d'accent ; icône « à gauche » devant. */
.wct-hero-overlay__baseline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -6px 0 22px;
    color: var(--wct-section-accent, var(--Color3));
    font-weight: 600;
    font-size: 1.05em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.wct-hero-overlay__baseline-icon { display: inline-flex; }
.wct-hero-overlay__baseline-icon .icon {
    width: 1.1em;
    height: 1.1em;
    color: var(--wct-section-accent, var(--Color3));
    fill: var(--wct-section-accent, var(--Color3));
}
/* Icône « à droite » → devant le label du CTA (hérite du blanc du bouton). */
.wct-hero-overlay__cta-icon {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 8px;
}
.wct-hero-overlay__cta-icon .icon {
    width: 1.1em;
    height: 1.1em;
    color: currentColor;
    fill: currentColor;
}

.wct-hero-overlay__body {
    color: white;
    margin-bottom: 28px;
    line-height: 1.65;
    opacity: 0.92;
}

/* Neutraliser les couleurs inline injectées par l'éditeur Quill (color:rgb(0,0,0), etc.)
   qui rendraient le texte illisible sur le fond sombre de la section. */
.wct-hero-overlay__body * { color: inherit !important; background-color: transparent !important; }

.wct-hero-overlay__body p:last-child { margin-bottom: 0; }

.wct-hero-overlay__cta {
    /* inline-flex centré : padding symétrique + icône (cta-icon) alignée au texte.
       width/margin remis à zéro pour neutraliser .Button (width:40%, margin:10px). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 0;
    background: var(--wct-section-accent, var(--Color2));
    color: white !important;
    padding: 12px 28px;
    border-radius: var(--radius-button);
    text-decoration: none !important;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    box-shadow: var(--shadow-button);
    transition: opacity var(--motion-duration-base, 0.2s);
}

.wct-hero-overlay__cta:hover { opacity: 0.88; }

/* Section avec features : réserve de l'espace en bas pour la barre absolue */
.wct-hero-overlay--has-features {
    padding-bottom: 96px;
}

/* Barre de features — positionnée en absolu au bas de la section */
.wct-hero-overlay__features-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

/* Features (enfants) — bandeau de pictos en bas */
.wct-hero-overlay__features {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px 36px;
    padding-bottom: 28px;
}
.wct-hero-overlay--right .wct-hero-overlay__features {
    justify-content: flex-end;
}
.wct-hero-overlay__feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: white;
}
.wct-hero-overlay__feature-icon {
    display: inline-flex;
    flex-shrink: 0;
}
.wct-hero-overlay__feature-icon .icon {
    width: 26px;
    height: 26px;
    /* Couleur modifiable via token accent-color-N (block_class de l'enfant) ;
       défaut blanc pour rester lisible sur l'image sombre. */
    color: var(--wct-section-accent, #fff);
    fill: var(--wct-section-accent, #fff);
}
.wct-hero-overlay__feature-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.wct-hero-overlay__feature-title {
    font-weight: 700;
    font-size: 0.95em;
}
.wct-hero-overlay__feature-desc {
    font-size: 0.85em;
    opacity: 0.88;
}
.wct-hero-overlay__feature-desc p { margin: 0; }

/* Forme entre le texte et l'image — panneau teinté derrière le contenu, à bord façonné.
   Activée par overlay_shape (diagonal | curve | rounded). z-index 1 : sur l'image (0),
   sous le contenu (2). Le scrim ::before est atténué quand une shape est présente. */
.wct-hero-overlay__shape {
    position: absolute;
    inset: 0 auto 0 0;
    /* Largeur dérivée de --wct-hero-content-w (posée par la classe --shape-*),
       pas d'un plancher fixe : la forme suit le texte à tout viewport ≥ 768px
       au lieu de rester large quand le texte a déjà rétréci sur tablette. */
    width: calc(var(--wct-hero-content-w, 330px) + 110px);
    z-index: 1;
    background: color-mix(in srgb, var(--wct-hero-shape, var(--Color4)) 82%, transparent);
    pointer-events: none;
}
.wct-hero-overlay--right .wct-hero-overlay__shape {
    inset: 0 0 0 auto;
}
.wct-hero-overlay[class*="--shape-"]::before {
    background: linear-gradient(to top, rgba(0,0,0,0.30), rgba(0,0,0,0) 45%);
}
.wct-hero-overlay--shape-diagonal .wct-hero-overlay__shape {
    /* +130px = gouttière + marge de la découpe diagonale (90px) */
    width: calc(var(--wct-hero-content-w) + 130px);
    clip-path: polygon(0 0, 100% 0, calc(100% - 90px) 100%, 0 100%);
}
.wct-hero-overlay--shape-diagonal.wct-hero-overlay--right .wct-hero-overlay__shape {
    clip-path: polygon(90px 0, 100% 0, 100% 100%, 0 100%);
}
.wct-hero-overlay--shape-curve .wct-hero-overlay__shape {
    /* L'ellipse ne couvre que 88% de la largeur de sa boîte : on élargit la
       boîte d'autant pour que le bord visible (l'apex) reste collé au texte. */
    width: calc((var(--wct-hero-content-w) + 110px) / 0.88);
    clip-path: ellipse(88% 135% at 0% 50%);
}
.wct-hero-overlay--shape-curve.wct-hero-overlay--right .wct-hero-overlay__shape {
    clip-path: ellipse(88% 135% at 100% 50%);
}
.wct-hero-overlay--shape-rounded .wct-hero-overlay__shape {
    width: calc(var(--wct-hero-content-w) + 90px);
    border-radius: 0 32px 32px 0;
}
.wct-hero-overlay--shape-rounded.wct-hero-overlay--right .wct-hero-overlay__shape {
    border-radius: 32px 0 0 32px;
}

/* Tokens de style du hero — les règles .content-section.* (multivitrines.css)
   ne ciblent pas le hero (classe .wct-hero-overlay), on les rebranche ici.
   accent-color-N  → --wct-section-accent : icônes des features + bouton CTA.
   background-color-N → --wct-hero-shape : couleur du panneau (shape) derrière le texte.
   soft/plain → opacité de la shape (teintée translucide ↔ pleine). */
.wct-hero-overlay.accent-color-1 { --wct-section-accent: var(--Color1); }
.wct-hero-overlay.accent-color-2 { --wct-section-accent: var(--Color2); }
.wct-hero-overlay.accent-color-3 { --wct-section-accent: var(--Color3); }
.wct-hero-overlay.accent-color-4 { --wct-section-accent: var(--Color4); }
.wct-hero-overlay.accent-color-5 { --wct-section-accent: var(--Color5); }
.wct-hero-overlay.accent-color-6 { --wct-section-accent: var(--Color6); }

.wct-hero-overlay.background-color-1 { --wct-hero-shape: var(--Color1); }
.wct-hero-overlay.background-color-2 { --wct-hero-shape: var(--Color2); }
.wct-hero-overlay.background-color-3 { --wct-hero-shape: var(--Color3); }
.wct-hero-overlay.background-color-4 { --wct-hero-shape: var(--Color4); }
.wct-hero-overlay.background-color-5 { --wct-hero-shape: var(--Color5); }
.wct-hero-overlay.background-color-6 { --wct-hero-shape: var(--Color6); }
.wct-hero-overlay.background-color-dark   { --wct-hero-shape: var(--dark_text_color); }
.wct-hero-overlay.background-color-bright { --wct-hero-shape: var(--bright_text_color); }

.wct-hero-overlay.soft  .wct-hero-overlay__shape { background: color-mix(in srgb, var(--wct-hero-shape, var(--Color4)) 58%, transparent); }
.wct-hero-overlay.plain .wct-hero-overlay__shape { background: var(--wct-hero-shape, var(--Color4)); }
/* Modèle opacité (paliers) — le panneau du hero est posé sur l'image : alpha sur transparent. */
.wct-hero-overlay.background-opacity-10  .wct-hero-overlay__shape { background: color-mix(in srgb, var(--wct-hero-shape, var(--Color4)) 10%, transparent); }
.wct-hero-overlay.background-opacity-25  .wct-hero-overlay__shape { background: color-mix(in srgb, var(--wct-hero-shape, var(--Color4)) 25%, transparent); }
.wct-hero-overlay.background-opacity-50  .wct-hero-overlay__shape { background: color-mix(in srgb, var(--wct-hero-shape, var(--Color4)) 50%, transparent); }
.wct-hero-overlay.background-opacity-75  .wct-hero-overlay__shape { background: color-mix(in srgb, var(--wct-hero-shape, var(--Color4)) 75%, transparent); }
.wct-hero-overlay.background-opacity-90  .wct-hero-overlay__shape { background: color-mix(in srgb, var(--wct-hero-shape, var(--Color4)) 90%, transparent); }
/* Couleur sans palier = panneau plein (solide), hors legacy soft/plain. */
.wct-hero-overlay[class*="background-color-"]:not(.soft):not(.plain):not([class*="background-opacity-"]) .wct-hero-overlay__shape { background: var(--wct-hero-shape, var(--Color4)); }

/* ---------------------------------------------------------------------------
   Responsive — mobile (≤767px)
   --------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    /* Diaporama : flèches masquées si vue trop étroite — navigation via dots */
    .wct-arrow {
        width: 36px;
        height: 36px;
    }

    .wct-slide__img {
        height: 360px;
    }

    /* Légende mobile : centrage conservé, titre/corps réduits */
    .wct-slide__title {
        font-size: 1.5em;
        margin-bottom: 8px;
    }

    .wct-slide__body {
        font-size: 0.95em;
    }

    .wct-slide__body > a,
    .wct-col__text > a,
    .wct-col__text p > a:only-child,
    .wct-diapo-body > a,
    .wct-diapo-body p > a:only-child,
    .wct-parent-content > a,
    .wct-parent-content p > a:only-child {
        margin-top: 6px;
        padding: 8px 18px;
    }

    .wct-col__text p > a.wct-raw-url,
    .wct-diapo-body p > a.wct-raw-url,
    .wct-parent-content p > a.wct-raw-url {
        margin-top: 0;
        padding: 0;
    }

    /* Témoignages : 1 colonne sur mobile (auto-fit + minmax se charge seul,
       mais on force au cas où minmax(300px) déborde) */
    .wct-temoignages.grid-3 {
        grid-template-columns: 1fr;
    }

    /* KPI : 1 colonne sur mobile, légère marge latérale pour ne pas coller aux bords */
    .wct-kpi-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0 16px;
    }

    .wct-kpi__value {
        font-size: 2em;
    }

    /* Colonnes : 1 colonne sur mobile — override le style inline repeat(N,1fr),
       légère marge latérale pour éviter que les cartes ne touchent les bords,
       align-items: start pour que chaque carte garde sa hauteur naturelle
       (pas d'étirement stretch entre cartes de contenus inégaux) */
    .wct-columns-grid {
        grid-template-columns: 1fr !important;
        padding: 0 16px;
        align-items: start;
    }

    /* Stepper : étapes empilées sur mobile, ligne de liaison retirée. Le
       subgrid desktop n'a de sens qu'entre étapes côte à côte — ici une seule
       colonne, donc .wct-step revient à un flux vertical simple ; l'ordre DOM
       (déjà correct par variante, posé par renderStepper()) suffit. */
    .wct-stepper-grid {
        grid-template-columns: 1fr !important;
        grid-auto-flow: row;
        gap: 28px;
    }
    .wct-step {
        grid-row: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .wct-step::before { display: none; }

    /* Hero overlay : sur mobile on quitte le calque photo+scrim pour un flux
       normal empilé — bloc texte (fond uni), puis features, puis photo en
       dessous (image de fond → <img> normal, plus de position absolute). */
    .wct-hero-overlay {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: auto;
        padding: 0;
    }
    .wct-hero-overlay::before {
        display: none;
    }
    /* Shape (panneau couleur derrière le texte) retirée : c'est désormais le
       bloc .container qui porte ce fond, plus de calque à positionner. */
    .wct-hero-overlay__shape {
        display: none;
    }
    .wct-hero-overlay > .container,
    .wct-hero-overlay--right > .container {
        order: 1;
        align-self: auto;
        align-items: flex-start;
        max-width: none;
        width: 100%;
        padding: 32px 20px 28px;
        background: var(--wct-hero-shape, rgba(0,0,0,0.85));
    }
    /* Le texte doit occuper toute la largeur du bloc — la largeur bornée par
       shape (desktop, panneau diagonal/curve/rounded) ne s'applique plus.
       Sélecteur avec [class*="--shape-"] requis pour égaler la spécificité
       de la règle desktop (ligne ~854) : sans lui, .wct-hero-overlay--shape-X
       .wct-hero-overlay__content (2 classes) perd contre .wct-hero-overlay
       [class*="--shape-"] .wct-hero-overlay__content (2 classes + 1 attribut)
       malgré l'ordre du media query — le titre restait écrasé à ~46vw-110px. */
    .wct-hero-overlay__content,
    .wct-hero-overlay[class*="--shape-"] .wct-hero-overlay__content {
        max-width: 100%;
        width: 100%;
    }
    /* Bouton CTA centré, indépendamment de l'alignement du texte au-dessus. */
    .wct-hero-overlay__cta {
        align-self: center;
    }
    /* Bandeau de features : même fond que le texte, juste en dessous, avant la photo. */
    .wct-hero-overlay__features-bar {
        position: static;
        order: 2;
        background: var(--wct-hero-shape, rgba(0,0,0,0.85));
    }
    .wct-hero-overlay__features-bar > .container,
    .wct-hero-overlay--right .wct-hero-overlay__features-bar > .container {
        max-width: none;
        padding: 0 20px 28px;
    }
    .wct-hero-overlay--has-features {
        padding-bottom: 0;
    }
    .wct-hero-overlay__features,
    .wct-hero-overlay--right .wct-hero-overlay__features {
        gap: 12px 24px;
        margin-top: 0;
        padding-top: 0;
        justify-content: flex-start;
    }
    /* Photo : dernier bloc, en flux normal, plus en fond derrière le texte. */
    .wct-hero-overlay__bg {
        position: static;
        order: 3;
        width: 100%;
        height: clamp(220px, 60vw, 340px);
    }
}

/* ---------------------------------------------------------------------------
   Tablette (768–1199px) — Colonnes / KPI / Stepper : 2 colonnes quel que soit
   le nombre configuré (repeat(N,1fr) posé en inline par renderColumns()/
   renderStepper()), pour éviter le tassement à N colonnes serrées observé
   entre 768 et 1200px (retour utilisateur, blocs "Comment je m'identifie ?"
   et "Vos bagages en toute sécurité").
   --------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .wct-columns-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .wct-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Stepper : le subgrid desktop (grid-auto-flow: column) aligne les rangées
       d'une seule ligne d'étapes — sur 2 colonnes il y a plusieurs lignes, donc
       plus de synchronisation possible ; on repasse chaque étape en flux
       vertical simple, comme sur mobile, mais en grille 2 colonnes. */
    .wct-stepper-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-flow: row;
        row-gap: 28px;
    }
    .wct-step {
        grid-row: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .wct-step::before {
        display: none;
    }
}