/*
|--------------------------------------------------------------------------
| v4.11.0 §D — L'ACCENT DE L'ESPACE, ET RIEN D'ÉCRIT EN DUR
|--------------------------------------------------------------------------
|
| La maquette montre l'instance CCISTTA — marine et or. Ces deux couleurs
| n'apparaissent NULLE PART ici, et c'est tout l'enjeu : le socle sert
| plusieurs sociétés et, chez chacune, plusieurs clients. La couleur vient
| donc de l'espace courant (`client_dashboards.couleur_primaire`), injectée
| au rendu dans `--espace-primaire`, avec repli sur la charte de
| l'installation — jamais sur une couleur de marque.
|
| ⚠️ CE FICHIER EST IMPORTÉ PAR LES DEUX FEUILLES qui rendent la vue du
| client : `espace-client.css` (page de lecture, aperçu) et le thème Filament
| (panneau `client`). Les mêmes partiels sont compilés des deux côtés ; s'ils
| n'avaient pas les mêmes utilitaires, la page publique et l'espace connecté
| se mettraient à diverger au premier correctif — exactement ce que le
| partage des vues cherche à éviter.
|
| On passe par des classes plutôt que par des valeurs arbitraires Tailwind
| parce qu'un `color-mix()` ne s'exprime pas en utilitaire : les fonds
| discrets (8 %) et les filets (35 %) en ont besoin, en clair comme en sombre.
*/

/* Le repli vit ici aussi : une vue rendue sans variable reste lisible. */
:root {
    --espace-primaire: #2563eb;
}

.ec-accent {
    color: var(--espace-primaire);
}

.ec-accent-bg {
    background-color: var(--espace-primaire);
}

/* Le fond discret d'un onglet actif ou d'une carte mise en avant. */
.ec-accent-doux {
    background-color: color-mix(in srgb, var(--espace-primaire) 8%, transparent);
}

.ec-accent-bord {
    border-color: color-mix(in srgb, var(--espace-primaire) 35%, transparent);
}

/* Le filet vertical qui marque l'item actif de la barre latérale. */
.ec-accent-filet {
    box-shadow: inset 3px 0 0 var(--espace-primaire);
}

/* Le texte posé SUR l'aplat d'accent : blanc ou ardoise selon la luminance,
   calculé par le navigateur — aucune charte n'a besoin d'être devinée. */
.ec-sur-accent {
    color: white;
}

@supports (color: color-contrast(black vs white, black)) {
    .ec-sur-accent {
        color: color-contrast(var(--espace-primaire) vs white, #0f172a);
    }
}

/* L'anneau de progression des tuiles : la part parcourue, en degrés. */
.ec-anneau {
    background: conic-gradient(var(--espace-primaire) calc(var(--ec-part, 0) * 1%), transparent 0);
}

/*
| Le mouvement : discret, et coupé net quand le système le demande.
| La feuille « Plus » de la barre du bas est un <details> — pas de framework
| JS sur la page de lecture, donc pas de transition Alpine possible.
*/
@keyframes ec-feuille {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-feuille-modules][open] > [data-feuille-panneau] {
    animation: ec-feuille 0.16s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    [data-feuille-modules][open] > [data-feuille-panneau] {
        animation: none;
    }
}

/* Le marqueur par défaut d'un <details> n'a rien à faire dans une barre d'onglets. */
[data-feuille-modules] > summary {
    list-style: none;
    cursor: pointer;
}

[data-feuille-modules] > summary::-webkit-details-marker,
[data-feuille-modules] > summary::marker {
    display: none;
    content: '';
}

/*
|--------------------------------------------------------------------------
| v4.16.1 §D2 — LA GESTION D'ESPACE, CONFORTABLE AU POUCE
|--------------------------------------------------------------------------
|
| La fiche d'un espace (`filament.espace-client.fiche` + `panneaux`) avait
| déjà sa barre basse (v4.7.0) et son tiroir en feuille (v4.9.0). Ce bloc
| tient ce qui débordait encore sur un téléphone : un tableau plus large que
| l'écran, un visuel qui dépasse, un mot trop long, un tiroir dont le pied
| passe sous la barre basse. Rien ici ne touche le bureau : tout vit sous une
| requête de média, et le tiroir garde sa forme au-delà de 640 px.
|
| Importé par les DEUX feuilles (thème du panneau, page publique) : les
| partiels `espace-client/**` sont rendus des deux côtés. La fiche porte
| `data-fiche-espace` ; le tiroir porte `data-tiroir` — les règles sont
| ancrées à ces deux attributs, jamais à une classe Tailwind.
*/

[data-fiche-espace] {
    overflow-wrap: anywhere;
}

[data-fiche-espace] img,
[data-fiche-espace] video,
[data-fiche-espace] canvas,
[data-tiroir] img,
[data-tiroir] video,
[data-tiroir] canvas {
    max-width: 100%;
    height: auto;
}

/* Un tableau ne fait jamais défiler la page : il défile dans son propre cadre. */
[data-fiche-espace] table,
[data-tiroir] table {
    max-width: 100%;
}

@media (max-width: 767px) {
    [data-fiche-espace] table,
    [data-tiroir] table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Un bloc de code ou un lien brut ne forcent pas non plus une largeur. */
    [data-fiche-espace] pre,
    [data-tiroir] pre {
        max-width: 100%;
        overflow-x: auto;
    }

    /* Le tiroir : quasi plein écran, avec le pied au-dessus de la barre basse et de la zone
       sûre. Les grilles de champs s'empilent (elles le font déjà sous 640 px par Tailwind ;
       on couvre les 640–767 px, où la barre basse est encore là et deux colonnes trop serrées). */
    [data-tiroir] {
        max-height: 92svh;
    }

    [data-tiroir] .grid {
        grid-template-columns: minmax(0, 1fr);
    }

    [data-tiroir] .grid > * {
        grid-column: auto / auto;
        min-width: 0;
    }

    /* iOS zoome sur un champ dont la police fait moins de 16 px : on l'en dispense. */
    [data-tiroir] input:not([type='checkbox']):not([type='radio']):not([type='file']),
    [data-tiroir] select,
    [data-tiroir] textarea {
        font-size: 16px;
    }

    /* Les boutons d'action d'un panneau : pleine largeur, empilés, atteignables au pouce. */
    [data-tiroir] .fi-section > .fi-section-content-ctn .fi-btn,
    [data-tiroir] .fi-section .mt-4.flex.flex-wrap.gap-2 > .fi-btn {
        min-height: 2.75rem;
    }

    /* Les rangées d'onglets internes (vues Publications, Commandes) défilent au lieu de
       s'empiler sur quatre lignes. */
    [data-fiche-espace] [data-vues] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    [data-fiche-espace] [data-vues]::-webkit-scrollbar {
        display: none;
    }

    [data-fiche-espace] [data-vues] > * {
        flex: 0 0 auto;
    }
}