/**
 * FICHE-PAIE.FR - Espace client - Feuille de styles
 *
 * @copyright 2025-2026 Purple Telecom EURL
 * @license   Proprietary - All Rights Reserved
 * @author    Fabien HIRIART <contact@polygonlab.ai>
 * @link      https://fiche-paie.fr
 *
 * Emplacement : /var/www/fiche-paie.fr/public/espace-client/assets/espace-client.css
 * Permissions : 0644
 *
 * Lot 1 (15/10/2026) — socle visuel et navigation.
 * Réécrite à partir de la feuille de la maquette validée
 * (docs/maquettes/espace-client/ec.css) : mêmes classes, mêmes valeurs,
 * mêmes points de rupture (1200, 992, 768, 576 px). Écarts voulus :
 *   - toutes les règles sont portées par le conteneur .ec-app : le header du
 *     site, la fenêtre SSO et la fenêtre de vérification du mobile partagent
 *     des noms de classes (.btn, .btn-primary…) et restent intacts ;
 *   - les couleurs viennent de /design-system/tokens.css (#ffffff devient
 *     var(--gp-blanc), valeur identique) ; seules les transparences de la
 *     maquette (ombres, voiles) restent en rgba, faute de jeton dédié ;
 *   - les six dérivés --ec-* sont déclarés dans tokens.css (section
 *     « Espace client »), pas ici ;
 *   - la représentation du header du site n'est pas reprise (header
 *     conservé tel quel) ; aucun appel à Google Fonts (polices
 *     auto-hébergées de /css/fonts.css) ;
 *   - section « Adaptations de production » en fin de fichier (menu
 *     collant, barre d'onglets fixe, feuille du bas, page de connexion).
 * Lot 2 (15/10/2026) : section « Lot 2 » en fin de fichier (carte « À
 * faire », calendrier de paie en liste ordonnée, conventions suivies,
 * filtres de « Mes bulletins », mise à disposition du PDF, bloc
 * « Vérification du numéro ») ; règles de l'histogramme retirées.
 * Lot 3 (15/10/2026) : section « Lot 3 » en fin de fichier (héros du mois :
 * variantes sans feuillet et « terminés », anneau de focus sur fond marine,
 * choix des salariés en carte ou en feuille du bas).
 * Ordre de chargement : tokens.css, fonts.css, feuilles du site, puis
 * cette feuille.
 */

/* ---------- Base (portée par .ec-app) ---------- */
body.ec-body {
    background: var(--gp-fond-pale);
}
.ec-app {
    color: var(--gp-bleu-marine);
    font-family: var(--gp-font-corps);
    font-size: 16px;
    line-height: 1.55;
}
.ec-app *,
.ec-app *::before,
.ec-app *::after {
    box-sizing: border-box;
}
.ec-app h1,
.ec-app h2,
.ec-app h3,
.ec-app p {
    margin: 0;
}
.ec-app h1,
.ec-app h2,
.ec-app h3 {
    font-family: var(--gp-font-titres);
    color: var(--gp-bleu-marine);
    letter-spacing: -.01em;
}
.ec-app a {
    color: var(--gp-bleu-primaire);
}
.ec-app button,
.ec-app input,
.ec-app select {
    font: inherit;
    color: inherit;
}
.ec-app :focus-visible {
    outline: none;
    box-shadow: var(--ec-focus);
}
/* L'attribut hidden l'emporte toujours sur le display des composants
   (.alert, .ec-sheet-root…) */
.ec-app [hidden] {
    display: none !important;
}

/* ---------- Utilitaires et icônes ---------- */
.ec-app .num {
    font-variant-numeric: tabular-nums;
}
.ec-app .sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
.ec-app .i {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ec-app .i-sm {
    width: 16px;
    height: 16px;
}
.ec-app .i-lg {
    width: 24px;
    height: 24px;
}

/* ---------- Avatar et bouton d'icône (repris du bloc « header » de la maquette) ---------- */
.ec-app .icon-btn {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    border-radius: 50%;
    color: var(--gp-bleu-marine);
    cursor: pointer;
}
.ec-app .icon-btn:hover {
    background: var(--gp-gris-clair);
}
.ec-app .avatar {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gp-bleu-marine);
    color: var(--gp-blanc);
    font-family: var(--gp-font-titres);
    font-weight: 700;
    font-size: 13px;
    flex: none;
}
.ec-app .avatar-lg {
    width: 44px;
    height: 44px;
    font-size: 15px;
}

/* ---------- Menu du compte ---------- */
.ec-app .acc-menu {
    width: 320px;
    background: var(--gp-blanc);
    border: 1px solid var(--gp-bordure);
    border-radius: var(--gp-radius-xl);
    box-shadow: var(--gp-ombre-carte);
    padding: 8px;
}
.ec-app .acc-menu__id {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
}
.ec-app .acc-menu__name {
    font-weight: 600;
    font-size: 15px;
}
.ec-app .acc-menu__mail {
    font-size: 13px;
    color: var(--gp-gris);
}
.ec-app .acc-menu__sep {
    height: 1px;
    background: var(--gp-bordure);
    margin: 6px 4px;
}
.ec-app .acc-menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--gp-radius-md);
    color: var(--gp-bleu-marine);
    text-decoration: none;
    font-size: 15px;
}
.ec-app .acc-menu__item:hover {
    background: var(--gp-gris-clair);
}
.ec-app .acc-menu__item--main {
    background: var(--gp-pastille);
    color: var(--gp-bleu-primaire);
    font-weight: 700;
}
.ec-app .acc-menu__meta {
    margin-left: auto;
    font-size: 13px;
    color: var(--gp-gris);
    font-variant-numeric: tabular-nums;
}
.ec-app .acc-menu__text {
    font-size: 14px;
    color: var(--gp-gris);
    padding: 4px 12px 10px;
}

/* ---------- Mise en page de l'espace client ---------- */
.ec-app .ec-shell {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 32px 24px 96px;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
    flex: 1;
}
.ec-app .ec-rail {
    flex: 0 0 248px;
    min-width: 0;
}
.ec-app .ec-main {
    flex: 999 1 560px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.ec-app .ec-rail__card {
    background: var(--gp-blanc);
    border: 1px solid var(--gp-bordure);
    border-radius: var(--gp-radius-xl);
    padding: 12px;
    box-shadow: var(--gp-ombre-header-defile);
}
.ec-app .ec-id {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px 8px 16px;
    border-bottom: 1px solid var(--gp-bordure);
    margin-bottom: 4px;
}
.ec-app .ec-id__name {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
}
.ec-app .ec-id__mail {
    font-size: 13px;
    color: var(--gp-gris);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}
.ec-app .tag-admin {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--gp-bleu-marine);
    color: var(--gp-blanc);
}
.ec-app .ec-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ec-app .ec-nav__title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gp-gris);
    padding: 14px 12px 6px;
}
.ec-app .ec-nav__item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--gp-radius-lg);
    color: var(--gp-bleu-marine);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}
.ec-app .ec-nav__item:hover {
    background: var(--gp-gris-clair);
}
.ec-app .ec-nav__item[aria-current="page"] {
    background: var(--gp-pastille);
    color: var(--gp-bleu-primaire);
    font-weight: 700;
}
.ec-app .ec-nav__item[aria-current="page"] .i {
    stroke-width: 2.4;
}
.ec-app .count {
    margin-left: auto;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--gp-gris-clair);
    color: var(--gp-bleu-marine);
    font-size: 12px;
    font-weight: 700;
    display: inline-grid;
    place-items: center;
    font-variant-numeric: tabular-nums;
}
.ec-app .count--attente {
    background: var(--gp-jaune-pale);
    color: var(--gp-jaune-texte);
    box-shadow: inset 0 0 0 1px var(--gp-jaune-bordure);
}

/* ---------- Barre d'onglets mobile ---------- */
.ec-app .ec-tabbar {
    display: none;
}
.ec-app .tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    min-height: 56px;
    font-size: 12px;
    font-weight: 500;
    color: var(--gp-gris);
    text-decoration: none;
    border-radius: 12px;
}
.ec-app .tab__ico {
    width: 52px;
    height: 30px;
    border-radius: 999px;
    display: grid;
    place-items: center;
}
.ec-app .tab[aria-current="page"] {
    color: var(--gp-bleu-primaire);
    font-weight: 700;
}
.ec-app .tab[aria-current="page"] .tab__ico {
    background: var(--gp-pastille);
}
.ec-app .tab[aria-current="page"] .i {
    stroke-width: 2.4;
}
.ec-app .tab__badge {
    position: absolute;
    top: 2px;
    left: calc(50% + 8px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--gp-jaune-texte);
    color: var(--gp-blanc);
    font-size: 12px;
    font-weight: 700;
    display: grid;
    place-items: center;
    line-height: 1;
}

/* ---------- Typographie de page ---------- */
.ec-app .page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}
.ec-app .eyebrow {
    font-size: 14px;
    color: var(--gp-gris);
    font-weight: 500;
    margin-bottom: 4px;
}
.ec-app .h1 {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.15;
}
.ec-app .h2 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}
.ec-app .h3 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}
.ec-app .lead {
    color: var(--gp-gris);
    font-size: 16px;
    margin-top: 6px;
    max-width: 640px;
}
.ec-app .muted {
    color: var(--gp-gris);
}
.ec-app .small {
    font-size: 14px;
}
.ec-app .xs {
    font-size: 13px;
}
.ec-app .strong {
    font-weight: 700;
}

/* ---------- Cartes ---------- */
.ec-app .card {
    background: var(--gp-blanc);
    border: 1px solid var(--gp-bordure);
    border-radius: var(--gp-radius-xl);
    box-shadow: var(--gp-ombre-header-defile);
}
.ec-app .card-pad {
    padding: 24px;
}
.ec-app .card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--gp-bordure);
}
.ec-app .card-foot {
    padding: 14px 24px;
    border-top: 1px solid var(--gp-bordure);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.ec-app .link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 15px;
    color: var(--gp-bleu-primaire);
    text-decoration: none;
}
.ec-app .link:hover {
    text-decoration: underline;
}

/* ---------- Boutons ---------- */
.ec-app .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--gp-font-corps);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background .3s ease,transform .3s ease;
}
.ec-app .btn:hover {
    transform: translateY(-1px);
}
.ec-app .btn-primary {
    background: var(--gp-bleu-primaire);
    color: var(--gp-blanc);
}
.ec-app .btn-primary:hover {
    background: var(--gp-bleu-marine);
}
.ec-app .btn-secondary {
    background: var(--gp-blanc);
    color: var(--gp-bleu-primaire);
    border-color: rgba(29,69,140,.32);
}
.ec-app .btn-secondary:hover {
    background: var(--gp-pastille);
}
.ec-app .btn-ghost {
    background: transparent;
    color: var(--gp-bleu-primaire);
}
.ec-app .btn-ghost:hover {
    background: var(--gp-pastille);
}
.ec-app .btn-light {
    background: var(--gp-blanc);
    color: var(--gp-bleu-marine);
}
.ec-app .btn-outline-light {
    background: transparent;
    color: var(--gp-blanc);
    border-color: rgba(255,255,255,.5);
}
.ec-app .btn-sm {
    min-height: 36px;
    padding: 0 14px;
    font-size: 14px;
}
.ec-app .btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}
.ec-app .btn-block {
    width: 100%;
}

/* ---------- Badges de statut (icône + libellé, jamais la couleur seule) ---------- */
.ec-app .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px 0 8px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.ec-app .badge .i {
    width: 16px;
    height: 16px;
    stroke-width: 2.2;
}
.ec-app .badge-paye {
    background: var(--gp-success-pale);
    color: var(--gp-bleu-marine);
}
.ec-app .badge-paye .i {
    color: var(--gp-bleu-primaire);
}
.ec-app .badge-attente {
    background: var(--gp-jaune-pale);
    color: var(--gp-jaune-texte);
    box-shadow: inset 0 0 0 1px var(--gp-jaune-bordure);
}
.ec-app .badge-verif {
    background: var(--gp-pastille);
    color: var(--gp-bleu-primaire);
    box-shadow: inset 0 0 0 1px var(--ec-info-bordure);
}
.ec-app .badge-new {
    background: var(--gp-bleu-marine);
    color: var(--gp-blanc);
}
.ec-app .badge-neutre {
    background: var(--gp-gris-clair);
    color: var(--gp-bleu-marine);
}

/* ---------- Alertes ---------- */
.ec-app .alert {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-radius: var(--gp-radius-lg);
    border: 1px solid;
}
.ec-app .alert__icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}
.ec-app .alert__body {
    flex: 1 1 260px;
    min-width: 0;
}
.ec-app .alert__title {
    font-weight: 700;
    font-size: 15px;
}
.ec-app .alert__text {
    font-size: 14px;
    margin-top: 2px;
}
.ec-app .alert__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-self: center;
}
.ec-app .alert-attente {
    background: var(--gp-jaune-pale);
    border-color: var(--gp-jaune-bordure);
    color: var(--gp-jaune-texte);
}
.ec-app .alert-attente .alert__icon {
    background: var(--gp-blanc);
    color: var(--gp-jaune-texte);
}
.ec-app .alert-info {
    background: var(--gp-pastille);
    border-color: var(--ec-info-bordure);
    color: var(--gp-bleu-marine);
}
.ec-app .alert-info .alert__icon {
    background: var(--gp-blanc);
    color: var(--gp-bleu-primaire);
}
.ec-app .alert-succes {
    background: var(--gp-success-pale);
    border-color: var(--ec-success-bordure);
    color: var(--gp-bleu-marine);
}
.ec-app .alert-succes .alert__icon {
    background: var(--gp-blanc);
    color: var(--gp-bleu-primaire);
}
.ec-app .alert-erreur {
    background: var(--ec-error-pale);
    border-color: var(--ec-error-bordure);
    color: var(--gp-bleu-marine);
}
.ec-app .alert-erreur .alert__icon {
    background: var(--gp-blanc);
    color: var(--gp-error);
}

/* ---------- Bloc du mois (héros) ---------- */
.ec-app .hero {
    position: relative;
    overflow: hidden;
    background: var(--gp-bleu-marine);
    color: var(--gp-blanc);
    border-radius: var(--gp-radius-xl);
    padding: 32px 36px;
    display: grid;
    grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
    gap: 32px;
    align-items: center;
    box-shadow: var(--gp-ombre-carte);
}
.ec-app .hero__blob {
    position: absolute;
    right: -70px;
    top: -110px;
    width: 320px;
    height: 320px;
    border-radius: 46% 54% 60% 40% / 50% 42% 58% 50%;
    background: var(--gp-orange);
    opacity: .14;
    pointer-events: none;
}
.ec-app .hero__content {
    position: relative;
    z-index: 1;
}
.ec-app .hero__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    font-size: 13px;
    font-weight: 600;
    color: var(--gp-blanc);
}
.ec-app .hero__title {
    font-family: var(--gp-font-titres);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.22;
    color: var(--gp-blanc);
    margin-top: 14px;
}
.ec-app .surligne {
    background: linear-gradient(transparent 60%,var(--ec-surligneur) 60%,var(--ec-surligneur) 92%,transparent 92%);
    padding: 0 3px;
}
.ec-app .hero__text {
    color: rgba(255,255,255,.85);
    font-size: 15px;
    margin-top: 10px;
    max-width: 540px;
}
.ec-app .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}
.ec-app .hero__aside {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ec-app .caveat {
    font-family: var(--gp-font-signature);
    font-size: 26px;
    font-weight: 600;
    color: var(--gp-turquoise);
    line-height: 1;
}
.ec-app .paper {
    width: 100%;
    max-width: 300px;
    background: var(--gp-blanc);
    color: var(--gp-bleu-marine);
    border-radius: var(--gp-radius-lg);
    padding: 18px 18px 16px;
    box-shadow: var(--gp-ombre-bulletin);
    transform: rotate(1.5deg);
    margin-top: 10px;
}
.ec-app .paper__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gp-gris);
}
.ec-app .paper__who {
    font-weight: 700;
    font-size: 15px;
    margin-top: 8px;
}
.ec-app .paper__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--gp-bordure);
    font-size: 13px;
    color: var(--gp-gris);
}
.ec-app .paper__row b {
    color: var(--gp-bleu-marine);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ec-app .paper__net {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--gp-radius-md);
    background: var(--gp-pastille);
    font-weight: 700;
    font-size: 14px;
}
.ec-app .paper__net strong {
    font-family: var(--gp-font-titres);
    font-size: 20px;
    color: var(--gp-bleu-primaire);
    font-variant-numeric: tabular-nums;
}

/* ---------- Indicateurs ---------- */
.ec-app .kpis {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;
}
.ec-app .kpi {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ec-app .kpi__top {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gp-gris);
}
.ec-app .kpi__ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--gp-pastille);
    color: var(--gp-bleu-primaire);
    display: grid;
    place-items: center;
    flex: none;
}
.ec-app .kpi__value {
    font-family: var(--gp-font-titres);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    margin-top: 6px;
}
.ec-app .kpi__value small {
    font-size: 16px;
    font-weight: 600;
    color: var(--gp-gris);
}
.ec-app .kpi__meta {
    font-size: 13px;
    color: var(--gp-gris);
    display: flex;
    align-items: center;
    gap: 6px;
}
.ec-app .kpi__meta--warn {
    color: var(--gp-jaune-texte);
    font-weight: 600;
}

/* ---------- À faire ---------- */
.ec-app .todo {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ec-app .todo li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-top: 1px solid var(--gp-bordure);
}
.ec-app .todo li:first-child {
    border-top: 0;
}
.ec-app .todo__ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex: none;
}
.ec-app .todo__ico--attente {
    background: var(--gp-jaune-pale);
    color: var(--gp-jaune-texte);
    box-shadow: inset 0 0 0 1px var(--gp-jaune-bordure);
}
.ec-app .todo__ico--info {
    background: var(--gp-pastille);
    color: var(--gp-bleu-primaire);
}
.ec-app .todo__txt {
    flex: 1;
    min-width: 0;
}
.ec-app .todo__title {
    font-weight: 600;
    font-size: 15px;
}
.ec-app .todo__sub {
    font-size: 14px;
    color: var(--gp-gris);
}

/* ---------- Rangées souples ---------- */
.ec-app .row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: stretch;
}
.ec-app .col-wide {
    flex: 2 1 480px;
    min-width: 0;
}
.ec-app .col-narrow {
    flex: 1 1 300px;
    min-width: 0;
}

/* ---------- Calendrier de paie ---------- */
.ec-app .paycal {
    display: grid;
    grid-template-columns: repeat(12,minmax(0,1fr));
    gap: 8px;
    padding: 22px 24px 8px;
}
.ec-app .pm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--gp-gris);
    font-weight: 500;
}
.ec-app .pm__cell {
    position: relative;
    width: 100%;
    max-width: 52px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-family: var(--gp-font-titres);
    font-weight: 800;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}
.ec-app .pm--paye .pm__cell {
    background: var(--gp-bleu-primaire);
    color: var(--gp-blanc);
}
.ec-app .pm--mixte .pm__cell {
    background: var(--gp-jaune-pale);
    color: var(--gp-jaune-texte);
    box-shadow: inset 0 0 0 2px var(--gp-jaune-bordure);
}
.ec-app .pm--vide .pm__cell {
    border: 1.5px dashed var(--gp-bleu-moyen);
    color: var(--gp-gris);
}
.ec-app .pm--courant .pm__cell {
    background: var(--gp-blanc);
    color: var(--gp-bleu-marine);
    box-shadow: 0 0 0 3px var(--gp-turquoise);
}
.ec-app .pm--courant {
    color: var(--gp-bleu-marine);
    font-weight: 700;
}
.ec-app .pm--futur .pm__cell {
    background: var(--gp-gris-clair);
    color: var(--gp-gris);
}
.ec-app .pm__flag {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gp-jaune-texte);
    color: var(--gp-blanc);
    display: grid;
    place-items: center;
    border: 2px solid var(--gp-blanc);
}
.ec-app .pm__flag .i {
    width: 12px;
    height: 12px;
    stroke-width: 2.6;
}
.ec-app .legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 14px 24px 20px;
    font-size: 13px;
    color: var(--gp-gris);
}
.ec-app .legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ec-app .lg {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-block;
    flex: none;
}
.ec-app .lg-paye {
    background: var(--gp-bleu-primaire);
}
.ec-app .lg-mixte {
    background: var(--gp-jaune-pale);
    box-shadow: inset 0 0 0 2px var(--gp-jaune-bordure);
}
.ec-app .lg-vide {
    border: 1.5px dashed var(--gp-bleu-moyen);
}
.ec-app .lg-courant {
    background: var(--gp-blanc);
    box-shadow: 0 0 0 2px var(--gp-turquoise);
}

/* ---------- Liste de bulletins ---------- */
.ec-app .blist {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ec-app .blist li {
    display: grid;
    grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) 150px 130px 150px;
    gap: 16px;
    align-items: center;
    padding: 14px 24px;
    border-top: 1px solid var(--gp-bordure);
}
.ec-app .blist li:first-child {
    border-top: 0;
}
.ec-app .b-period {
    font-weight: 600;
}
.ec-app .b-who {
    color: var(--gp-gris);
    font-size: 14px;
}
.ec-app .b-net {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ec-app .b-net small {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--gp-gris);
}
.ec-app .b-act {
    display: flex;
    justify-content: flex-end;
}

/* ---------- Tableau ---------- */
.ec-app .table-wrap {
    overflow-x: auto;
}
.ec-app .bt {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}
.ec-app .bt th {
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--gp-gris);
    padding: 12px 16px;
    border-bottom: 1px solid var(--gp-bordure);
    white-space: nowrap;
}
.ec-app .bt td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--gp-bordure);
    vertical-align: middle;
}
.ec-app .bt th:first-child,
.ec-app .bt td:first-child {
    padding-left: 24px;
}
.ec-app .bt th:last-child,
.ec-app .bt td:last-child {
    padding-right: 24px;
}
.ec-app .bt tbody tr:hover td {
    background: var(--gp-fond-pale);
}
.ec-app .bt .grp td {
    background: var(--gp-gris-clair);
    font-family: var(--gp-font-titres);
    font-weight: 700;
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--gp-bleu-marine);
}
.ec-app .bt .r {
    text-align: right;
}
.ec-app .who {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}
.ec-app .who .avatar {
    width: 30px;
    height: 30px;
    font-size: 12px;
    background: var(--gp-pastille);
    color: var(--gp-bleu-primaire);
}
.ec-app .actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}
.ec-app .icon-act {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--gp-bordure);
    background: var(--gp-blanc);
    color: var(--gp-bleu-primaire);
    cursor: pointer;
    text-decoration: none;
}
.ec-app .icon-act:hover {
    background: var(--gp-pastille);
}

/* ---------- Barre d'outils et champs ---------- */
.ec-app .toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--gp-bordure);
}
.ec-app .field {
    position: relative;
    flex: 1 1 280px;
    min-width: 0;
}
.ec-app .field .i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gp-gris);
}
.ec-app .input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 44px;
    border: 1px solid var(--gp-bordure);
    border-radius: var(--gp-radius-lg);
    background: var(--gp-blanc);
    font-size: 15px;
    color: var(--gp-bleu-marine);
}
.ec-app .input::placeholder {
    color: var(--gp-gris);
}
.ec-app .input-plain {
    padding-left: 14px;
}
.ec-app .select-wrap {
    position: relative;
    display: inline-block;
}
.ec-app .select {
    height: 44px;
    padding: 0 40px 0 14px;
    border: 1px solid var(--gp-bordure);
    border-radius: var(--gp-radius-lg);
    background: var(--gp-blanc);
    font-size: 15px;
    color: var(--gp-bleu-marine);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.ec-app .select-wrap .i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--gp-gris);
}
.ec-app .lbl {
    font-size: 13px;
    font-weight: 600;
    color: var(--gp-bleu-marine);
    display: block;
    margin-bottom: 6px;
}
.ec-app .seg {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--gp-gris-clair);
}
.ec-app .seg__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    color: var(--gp-bleu-marine);
    cursor: pointer;
    white-space: nowrap;
}
.ec-app .seg__btn[aria-pressed="true"] {
    background: var(--gp-blanc);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(16,23,40,.14);
    color: var(--gp-bleu-primaire);
}
.ec-app .seg__n {
    font-size: 12px;
    color: var(--gp-gris);
    font-variant-numeric: tabular-nums;
}
.ec-app .pager {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- Crédits ---------- */
.ec-app .solde__value {
    font-family: var(--gp-font-titres);
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.ec-app .solde__value small {
    font-size: 18px;
    font-weight: 600;
    color: var(--gp-gris);
}
.ec-app .lots {
    display: flex;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    gap: 3px;
    background: var(--gp-gris-clair);
    margin-top: 18px;
}
.ec-app .lot {
    height: 100%;
}
.ec-app .lot--bientot {
    background: repeating-linear-gradient(135deg,var(--gp-jaune-bordure) 0 6px,var(--gp-jaune-pale) 6px 10px);
}
.ec-app .lot--ok {
    background: var(--gp-bleu-primaire);
}
.ec-app .lot-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ec-app .lot-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.ec-app .lot-list .lg {
    width: 16px;
    height: 16px;
}
.ec-app .lg-bientot {
    background: repeating-linear-gradient(135deg,var(--gp-jaune-bordure) 0 4px,var(--gp-jaune-pale) 4px 7px);
}
.ec-app .packs {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px;
}
.ec-app .pack {
    position: relative;
    padding: 24px;
    border: 1px solid var(--gp-bordure);
    border-radius: var(--gp-radius-xl);
    background: var(--gp-blanc);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ec-app .pack--best {
    border: 2px solid var(--gp-bleu-primaire);
    box-shadow: var(--gp-ombre-carte);
}
.ec-app .pack__flag {
    position: absolute;
    top: -13px;
    left: 20px;
    height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--gp-bleu-primaire);
    color: var(--gp-blanc);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ec-app .pack__name {
    font-family: var(--gp-font-titres);
    font-weight: 700;
    font-size: 17px;
}
.ec-app .pack__price {
    font-family: var(--gp-font-titres);
    font-weight: 800;
    font-size: 36px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.ec-app .pack__price small {
    font-size: 15px;
    font-weight: 600;
    color: var(--gp-gris);
}
.ec-app .pack__unit {
    font-size: 14px;
    color: var(--gp-gris);
}
.ec-app .pack__list {
    list-style: none;
    margin: 6px 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}
.ec-app .pack__list li {
    display: flex;
    gap: 8px;
    align-items: center;
}
.ec-app .pack__list .i {
    width: 16px;
    height: 16px;
    color: var(--gp-bleu-primaire);
    stroke-width: 2.2;
}
.ec-app .mv-plus {
    color: var(--gp-bleu-primaire);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ec-app .mv-moins {
    color: var(--gp-bleu-marine);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------- Interrupteur ---------- */
.ec-app .switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    min-height: 44px;
}
.ec-app .switch input {
    -webkit-appearance: none;
    appearance: none;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: var(--gp-bordure);
    position: relative;
    margin: 0;
    cursor: pointer;
    transition: background .3s ease;
    flex: none;
}
.ec-app .switch input::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gp-blanc);
    box-shadow: 0 1px 2px rgba(16,23,40,.25);
    transition: transform .3s ease;
}
.ec-app .switch input:checked {
    background: var(--gp-bleu-primaire);
}
.ec-app .switch input:checked::after {
    transform: translateX(18px);
}

/* ---------- Conventions ---------- */
.ec-app .conv {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    padding: 20px 24px;
    border-top: 1px solid var(--gp-bordure);
}
.ec-app .conv:first-child {
    border-top: 0;
}
.ec-app .conv__ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--gp-pastille);
    color: var(--gp-bleu-primaire);
    display: grid;
    place-items: center;
    flex: none;
}
.ec-app .conv__main {
    flex: 1 1 260px;
    min-width: 0;
}
.ec-app .conv__name {
    font-weight: 700;
    font-size: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.ec-app .conv__meta {
    font-size: 14px;
    color: var(--gp-gris);
    margin-top: 2px;
}
.ec-app .conv__acts {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ec-app .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ec-app .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 8px 0 16px;
    border: 1px solid var(--gp-bordure);
    border-radius: 999px;
    background: var(--gp-blanc);
    font-size: 14px;
    font-weight: 500;
}
.ec-app .chip .btn {
    min-height: 32px;
    padding: 0 12px;
    font-size: 13px;
}

/* ---------- Squelettes de chargement ---------- */
.ec-app .skel {
    display: block;
    border-radius: 8px;
    background: var(--gp-gris-clair);
    animation: ec-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes ec-pulse {
    from { opacity: 1; }
    to { opacity: .45; }
}

/* ---------- État vide ---------- */
.ec-app .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 44px 24px;
}
.ec-app .empty__art {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    background: var(--gp-pastille);
    color: var(--gp-bleu-primaire);
    display: grid;
    place-items: center;
}
.ec-app .empty__art .i {
    width: 40px;
    height: 40px;
    stroke-width: 1.5;
}
.ec-app .empty__text {
    max-width: 460px;
    color: var(--gp-gris);
    font-size: 15px;
}

/* ---------- Code de vérification ---------- */
.ec-app .otp {
    display: flex;
    gap: 8px;
}
.ec-app .otp input {
    width: 46px;
    height: 56px;
    text-align: center;
    font-family: var(--gp-font-titres);
    font-size: 22px;
    font-weight: 800;
    border: 1px solid var(--gp-bordure);
    border-radius: var(--gp-radius-lg);
    color: var(--gp-bleu-marine);
    background: var(--gp-blanc);
    padding: 0;
}

/* ---------- Feuille mobile (bas d'écran) ---------- */
.ec-app .sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(30,55,96,.45);
}
.ec-app .sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gp-blanc);
    border-radius: 22px 22px 0 0;
    padding: 10px 20px 28px;
    box-shadow: 0 -12px 40px rgba(30,55,96,.18);
}
.ec-app .sheet__grip {
    width: 40px;
    height: 5px;
    border-radius: 999px;
    background: var(--gp-bordure);
    margin: 0 auto 14px;
}

/* ---------- Points de rupture : 1200 / 992 / 768 / 576 (design system) ---------- */
@media (max-width: 1199px) {
    .ec-app .blist li {
        grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) 140px 120px 130px;
    }
}
@media (max-width: 767px) {
    .ec-app .ec-shell {
        padding: 20px 16px 24px;
        gap: 20px;
    }
    .ec-app .ec-rail {
        display: none;
    }
    .ec-app .ec-tabbar {
        display: flex;
        position: sticky;
        bottom: 0;
        z-index: 200;
        width: 100%;
        background: rgba(255,255,255,.94);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        border-top: 1px solid var(--gp-header-filet);
        padding: 6px 6px 10px;
    }
    .ec-app .h1 {
        font-size: 26px;
    }
    .ec-app .page-head .btn {
        width: 100%;
    }
    .ec-app .hero {
        grid-template-columns: 1fr;
        padding: 24px 22px;
    }
    .ec-app .hero__aside {
        display: none;
    }
    .ec-app .hero__title {
        font-size: 23px;
    }
    .ec-app .hero__actions .btn {
        width: 100%;
    }
    .ec-app .hero__actions .btn,
    .ec-app .page-head .btn,
    .ec-app .alert__actions .btn {
        white-space: normal;
        text-align: center;
        line-height: 1.3;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .ec-app .todo__txt {
        flex: 1 1 calc(100% - 56px);
    }
    .ec-app .kpis {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 12px;
    }
    .ec-app .kpis .kpi:first-child {
        grid-column: 1 / -1;
    }
    .ec-app .kpi {
        padding: 16px;
    }
    .ec-app .kpi__value {
        font-size: 28px;
    }
    .ec-app .paycal {
        grid-template-columns: repeat(6,minmax(0,1fr));
        padding: 18px 16px 6px;
    }
    .ec-app .legend {
        padding: 12px 16px 18px;
    }
    .ec-app .todo li {
        flex-wrap: wrap;
        padding: 16px;
    }
    .ec-app .todo li .btn {
        margin-left: 56px;
    }
    .ec-app .card-head {
        padding: 16px;
    }
    .ec-app .card-foot {
        padding: 12px 16px;
    }
    .ec-app .card-pad {
        padding: 18px;
    }
    .ec-app .blist li {
        grid-template-columns: minmax(0,1fr) auto;
        padding: 14px 16px;
        gap: 6px 12px;
    }
    .ec-app .blist .b-period {
        grid-column: 1;
        grid-row: 1;
    }
    .ec-app .blist .b-statut {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }
    .ec-app .blist .b-who {
        grid-column: 1;
        grid-row: 2;
    }
    .ec-app .blist .b-net {
        grid-column: 2;
        grid-row: 2;
    }
    .ec-app .blist .b-act {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-content: flex-start;
    }
    .ec-app .toolbar {
        padding: 16px;
    }
    .ec-app .bt thead {
        display: none;
    }
    .ec-app .bt,
    .ec-app .bt tbody {
        display: block;
        width: 100%;
    }
    .ec-app .bt tr {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        gap: 8px 12px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--gp-bordure);
    }
    .ec-app .bt td {
        padding: 0 !important;
        border: 0;
        background: none !important;
    }
    .ec-app .bt tr.grp {
        padding: 0;
        border: 0;
    }
    .ec-app .bt tr.grp td {
        grid-column: 1 / -1;
        padding: 10px 16px !important;
        background: var(--gp-gris-clair) !important;
    }
    .ec-app .bt .c-sal {
        grid-column: 1;
        grid-row: 1;
    }
    .ec-app .bt .c-statut {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }
    .ec-app .bt .c-date {
        grid-column: 1;
        grid-row: 2;
        color: var(--gp-gris);
        font-size: 14px;
    }
    .ec-app .bt .c-net {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
    }
    .ec-app .bt .c-act {
        grid-column: 1 / -1;
        grid-row: 3;
    }
    .ec-app .bt .c-act .actions {
        justify-content: flex-start;
    }
    .ec-app .bt .c-mv {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
    }
    .ec-app .bt .c-op {
        grid-column: 1;
        grid-row: 1;
    }
    .ec-app .bt .c-solde {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
        color: var(--gp-gris);
        font-size: 14px;
    }
    .ec-app .packs {
        grid-template-columns: 1fr;
    }
    .ec-app .solde__value {
        font-size: 48px;
    }
    .ec-app .conv {
        padding: 18px 16px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ec-app .skel {
        animation: none;
    }
    .ec-app .btn,
    .ec-app .switch input,
    .ec-app .switch input::after {
        transition: none;
    }
    .ec-app .btn:hover {
        transform: none;
    }
}

/* =========================================================
   ADAPTATIONS DE PRODUCTION (hors feuille de la maquette)
   ========================================================= */

/* ---------- Menu latéral collant ----------
   L'espace client est en flux normal sous le header du site, dont la
   hauteur varie (79 px, puis 131 à 147 px de 769 à 1199 px) : aucune
   hauteur écrite en dur. --fp-header-h est mesurée en continu par
   espace-client.js (ResizeObserver posé sur le header). */
.ec-app .ec-rail {
    position: sticky;
    top: calc(var(--fp-header-h, 0px) + 24px);
}

/* ---------- Accessibilité ---------- */
/* Texte réservé aux lecteurs d'écran (compteurs, libellés de colonnes) */
.ec-app .ec-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Lien d'évitement, premier élément de la page (hors .ec-app) */
.ec-skip {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: var(--z-tooltip);
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--gp-bleu-primaire);
    color: var(--gp-blanc);
    font-family: var(--gp-font-corps);
    font-weight: 600;
    text-decoration: none;
}
.ec-skip:focus {
    top: 16px;
    outline: none;
    box-shadow: var(--ec-focus);
}
/* Conteneur de défilement des tableaux positionné : les textes .ec-sr
   (position absolue) restent découpés par lui et n'élargissent pas la page */
.ec-app .table-wrap {
    position: relative;
}
/* Anneau de focus prioritaire : aucune ombre de composant ne le masque */
.ec-app .seg__btn[aria-pressed="true"]:focus-visible {
    box-shadow: var(--ec-focus);
}

/* ---------- Photo SSO dans la pastille d'avatar ---------- */
.ec-app img.avatar {
    object-fit: cover;
    background: var(--gp-gris-clair);
}

/* ---------- Zone d'alertes commune (sous le titre de chaque page) ---------- */
.ec-app .ec-alertes {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---------- Espacements et mentions de la page « Mes crédits » ---------- */
.ec-app .ec-mt {
    margin-top: 16px;
}
.ec-app .ec-securise {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
}
.ec-app .ec-ref {
    display: block;
}

/* ---------- Groupe de boutons des états vides ---------- */
.ec-app .ec-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
}

/* ---------- Onglet « Plus » : bouton natif remis à zéro ---------- */
.ec-app button.tab {
    border: 0;
    background: none;
    cursor: pointer;
}
.ec-app .tab[aria-expanded="true"] {
    color: var(--gp-bleu-primaire);
    font-weight: 700;
}
.ec-app .tab[aria-expanded="true"] .tab__ico {
    background: var(--gp-pastille);
}

/* ---------- Feuille du bas : conteneur fixe plein écran ----------
   Les règles .sheet-backdrop et .sheet de la maquette (positionnées en
   absolu) s'appliquent dans ce conteneur fixe. */
.ec-app .ec-sheet-root {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
}
.ec-app .ec-sheet-root[hidden] {
    display: none;
}
.ec-app .sheet {
    max-height: 85vh;
    overflow-y: auto;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}
.ec-app .ec-sheet__fermer {
    position: absolute;
    top: 6px;
    right: 8px;
}

/* ---------- Lots de crédits : segments proportionnels ----------
   flex-grow (nombre de crédits du lot) est posé en ligne par la vue. */
.ec-app .lot {
    flex: 1 1 0;
}
.ec-app .lot-list .badge {
    margin-left: auto;
}

/* ---------- Page « Connexion requise » ---------- */
.ec-app.ec-connexion {
    display: flex;
    justify-content: center;
    padding: 64px 16px 96px;
}
.ec-app .ec-connexion__carte {
    width: 100%;
    max-width: 440px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    box-shadow: var(--gp-ombre-carte);
}
.ec-app .ec-connexion__ico {
    width: 56px;
    height: 56px;
    margin-bottom: 4px;
    border-radius: var(--gp-radius-lg);
    background: var(--gp-pastille);
    color: var(--gp-bleu-primaire);
    display: grid;
    place-items: center;
}
.ec-app .ec-connexion__liste {
    list-style: none;
    margin: 8px 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    font-size: 14px;
}
.ec-app .ec-connexion__liste li {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ec-app .ec-connexion__puce {
    width: 28px;
    height: 28px;
    border-radius: var(--gp-radius-md);
    background: var(--gp-pastille);
    color: var(--gp-bleu-primaire);
    display: grid;
    place-items: center;
    flex: none;
}

/* ---------- Points de rupture : adaptations ---------- */
@media (max-width: 991px) {
    /* De 768 à 991 px, le menu latéral et le contenu restent côte à côte :
       sans cela, le contenu passerait sous le menu collant. */
    .ec-app .ec-main {
        flex-basis: 400px;
    }
    .ec-app .kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ec-app .kpis .kpi:first-child {
        grid-column: 1 / -1;
    }
    .ec-app .packs {
        grid-template-columns: 1fr;
    }
    .ec-app .blist li {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 12px;
    }
    .ec-app .blist .b-period {
        grid-column: 1;
        grid-row: 1;
    }
    .ec-app .blist .b-statut {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }
    .ec-app .blist .b-who {
        grid-column: 1;
        grid-row: 2;
    }
    .ec-app .blist .b-net {
        grid-column: 2;
        grid-row: 2;
    }
    .ec-app .blist .b-act {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-content: flex-start;
    }
}
@media (max-width: 767px) {
    /* Barre d'onglets fixe en bas en production, au-dessus de la zone de
       sécurité ; le contenu réserve sa hauteur (mesurée par espace-client.js). */
    .ec-app .ec-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }
    .ec-app .ec-shell {
        padding-bottom: calc(24px + var(--ec-tabbar-h, 72px));
    }
    .ec-app.ec-connexion {
        padding: 32px 16px 48px;
    }
    .ec-app .ec-connexion__carte {
        padding: 24px 18px;
    }
}

/* =========================================================
   LOT 2 (15/10/2026) — fonctions V1
   Règles nouvelles, portées par .ec-app, jetons --gp-* / --ec-* ; les
   transparences reprennent celles de la maquette (voile et ombre de la
   feuille du bas).
   ========================================================= */

/* ---------- Titre de carte avec compteur (« À faire 2 ») ---------- */
.ec-app .ec-titre-compte {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ec-app .ec-titre-compte .count {
    margin-left: 0;
}

/* ---------- Onglet « Plus » quand la rubrique active est dans la feuille ---------- */
.ec-app .tab--courant {
    color: var(--gp-bleu-primaire);
    font-weight: 700;
}
.ec-app .tab--courant .tab__ico {
    background: var(--gp-pastille);
}

/* ---------- Calendrier de paie : liste ordonnée de 12 cases ---------- */
.ec-app ol.paycal {
    list-style: none;
    margin: 0;
}
.ec-app .pm__lien {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 44px;
    border-radius: var(--gp-radius-lg);
    color: inherit;
    text-decoration: none;
}
.ec-app a.pm__lien:hover .pm__nom {
    text-decoration: underline;
}
.ec-app a.pm__lien:hover .pm__cell {
    transform: translateY(-1px);
}
.ec-app .pm__cell {
    transition: transform .3s ease;
}
.ec-app .ec-annee {
    display: flex;
    align-items: center;
    gap: 2px;
}
.ec-app .ec-annee__valeur {
    min-width: 48px;
    text-align: center;
    font-family: var(--gp-font-titres);
    font-weight: 700;
    font-size: 16px;
}
.ec-app .icon-btn[disabled] {
    color: var(--gp-gris);
    opacity: .45;
    cursor: default;
}
.ec-app .icon-btn[disabled]:hover {
    background: none;
}
.ec-app .legend .lg {
    font-style: normal;
}

/* ---------- Carte « Conventions suivies » et listes de conventions ---------- */
.ec-app .ec-conv-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ec-app .ec-carte-conv .conv {
    flex-wrap: nowrap;
    gap: 14px;
    padding: 16px 24px;
}
.ec-app .ec-carte-conv .conv__main {
    flex: 1 1 auto;
}
.ec-app .ec-conv-pied {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
}
/* Tableau de bord : calendrier et conventions de même hauteur côte à côte */
.ec-app .ec-calendrier,
.ec-app .ec-carte-conv {
    height: 100%;
}
.ec-app .ec-conv-form {
    display: inline-flex;
    margin: 0;
}

/* ---------- Page « Conventions suivies » ---------- */
.ec-app .ec-suivre {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}
.ec-app .ec-resultats {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--gp-bordure);
}
.ec-app .ec-resultats .conv {
    padding: 14px 0;
}
.ec-app .ec-resultats .conv:first-child {
    border-top: 0;
}
.ec-app .ec-chips {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}
/* Bouton de pastille : 32 px à l'œil (maquette), zone de clic portée à 44 px */
.ec-app .chip .btn {
    position: relative;
}
.ec-app .chip .btn::after {
    content: "";
    position: absolute;
    inset: -6px -4px;
}
.ec-app .ec-plus-conv {
    margin-top: 12px;
}
.ec-app .ec-plus-conv summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    cursor: pointer;
}

/* ---------- Mes bulletins : barre d'outils et filtre de période ----------
   Listes « salarié » et « année » et bouton « Filtrer » groupés : ils
   passent ensemble à la ligne quand la place manque. */
.ec-app .ec-outils-filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.ec-app .toolbar .select-wrap {
    flex: 0 1 auto;
}
.ec-app .ec-filtre-actif {
    padding: 14px 24px 0;
}
.ec-app .ec-filtre-actif .chip {
    gap: 8px;
}

/* ---------- Mise à disposition du PDF (30 jours après le paiement) ---------- */
.ec-app .ec-dispo {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--gp-gris);
    text-align: right;
    white-space: nowrap;
}
.ec-app .blist .b-act {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.ec-app .blist .b-act .ec-dispo {
    margin-top: 0;
    white-space: normal;
}

/* ---------- Bloc « Vérification du numéro » (Mes crédits) ----------
   768 px et plus : carte en place sous la zone d'alertes. Moins de 768 px :
   feuille du bas (classe ec-verif--feuille posée par verification-mobile.js). */
.ec-app .ec-verif__carte {
    scroll-margin-top: calc(var(--fp-header-h, 0px) + 16px);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ec-app .ec-verif__fond,
.ec-app .ec-verif__grip {
    display: none;
}
.ec-app .ec-verif__tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -10px -10px -6px 0;
}
.ec-app .ec-verif__etape {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 560px;
}
.ec-app .ec-verif__ligne {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ec-app .ec-verif__ligne .input {
    flex: 1 1 180px;
    min-width: 0;
}
.ec-app .ec-verif__champ {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.ec-app .ec-verif__champ legend {
    padding: 0;
}
.ec-app .ec-verif__erreur {
    padding-left: 10px;
    border-left: 3px solid var(--gp-error);
    font-size: 14px;
    font-weight: 600;
    color: var(--gp-bleu-marine);
}
.ec-app .ec-verif__decompte--fin {
    color: var(--gp-jaune-texte);
    font-weight: 600;
}
.ec-app .ec-verif__liens {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ec-app .otp input.ec-otp-erreur {
    border-color: var(--gp-error);
    box-shadow: inset 0 0 0 1px var(--gp-error);
}
.ec-app .otp input[disabled] {
    background: var(--gp-gris-clair);
}
.ec-app .ec-verif--feuille {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
}
.ec-app .ec-verif--feuille .ec-verif__fond {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(30,55,96,.45);
}
.ec-app .ec-verif--feuille .ec-verif__carte {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 90vh;
    overflow-y: auto;
    border: 0;
    border-radius: 22px 22px 0 0;
    padding: 10px 20px calc(28px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -12px 40px rgba(30,55,96,.18);
}
.ec-app .ec-verif--feuille .ec-verif__grip {
    display: block;
    margin-bottom: 4px;
}
.ec-app .ec-verif--feuille .ec-verif__tete {
    margin-top: 0;
}

/* ---------- Points de rupture du lot 2 ---------- */
@media (max-width: 991px) {
    /* De 768 à 991 px, contenu étroit à côté du menu : calendrier sur deux
       rangées et actions de « À faire » sous leur texte, comme sur mobile */
    .ec-app .paycal {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        padding: 18px 16px 6px;
    }
    .ec-app .todo li {
        flex-wrap: wrap;
    }
    .ec-app .todo__txt {
        flex: 1 1 calc(100% - 56px);
    }
    .ec-app .todo li .btn {
        margin-left: 56px;
    }
    .ec-app .blist .b-act {
        align-items: flex-start;
    }
    .ec-app .blist .b-act .ec-dispo {
        text-align: left;
    }
}
@media (max-width: 767px) {
    .ec-app .ec-filtre-actif {
        padding: 12px 16px 0;
    }
    .ec-app .ec-outils-filtres {
        flex: 1 1 100%;
    }
    .ec-app .toolbar .select-wrap {
        flex: 1 1 140px;
    }
    .ec-app .toolbar .select {
        width: 100%;
    }
    .ec-app .toolbar .seg {
        flex: 1 1 100%;
        overflow-x: auto;
    }
    .ec-app .bt .c-act .ec-dispo {
        text-align: left;
    }
    .ec-app .ec-carte-conv .conv {
        padding: 14px 16px;
    }
    .ec-app .conv__acts {
        width: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ec-app .pm__cell {
        transition: none;
    }
    .ec-app a.pm__lien:hover .pm__cell {
        transform: none;
    }
}

/* =========================================================
   LOT 3 (15/10/2026) — « Préparer le bulletin du mois à partir du dernier »
   Règles nouvelles, portées par .ec-app, jetons --gp-* / --ec-* ; aucune
   couleur nouvelle écrite en dur. Seules exceptions, conformes au README de
   l'espace client (§10 : seules les transparences de la maquette, ombres et
   voiles, restent en rgba) : le voile et l'ombre de la feuille du bas,
   recopiés du bloc « Vérification du numéro » du lot 2 (maquette ec.css,
   .sheet-backdrop et .sheet). Les règles .hero*, .paper*, .caveat,
   .btn-light et .btn-outline-light viennent du lot 1.
   ========================================================= */

/* ---------- Héros du mois : règles du site neutralisées ----------
   La feuille du site (/css/style.css, chargée avant celle-ci) déclare aussi
   .hero pour le bandeau des pages publiques : centrage du texte, hauteur
   minimale de 500 px, voile ::before posé au-dessus de la forme orange,
   paragraphes à 90 % d'opacité. Dans l'espace client, le héros suit la
   maquette (ec.css) : ces règles sont remises à zéro. */
.ec-app .hero {
    min-height: 0;
    text-align: left;
    justify-content: normal;
}
.ec-app .hero::before {
    content: none;
}
.ec-app .hero p {
    position: static;
    z-index: auto;
    opacity: 1;
}

/* ---------- Héros du mois : variantes ---------- */
/* Sans feuillet (données du dernier bulletin illisibles) et mois complet :
   une seule colonne */
.ec-app .hero--sans-feuillet,
.ec-app .hero--termine {
    grid-template-columns: minmax(0, 1fr);
}
.ec-app .hero--termine {
    padding-top: 28px;
    padding-bottom: 28px;
}
.ec-app .hero--termine .hero__actions {
    margin-top: 18px;
}
/* Anneau de focus sur fond marine : filet marine puis anneau blanc (le bleu
   d'action de --ec-focus ne se distingue pas du fond) */
.ec-app .hero :focus-visible {
    box-shadow: 0 0 0 2px var(--gp-bleu-marine), 0 0 0 4px var(--gp-blanc);
}
.ec-app .hero .btn-light:hover {
    background: var(--gp-pastille);
}

/* ---------- Héros du mois : mot surligné du titre ----------
   Texte blanc à 4,5:1 au moins à toutes les largeurs, y compris quand le mot
   passe sur la forme orange (800 et 390 px) : le surligneur du lot 1
   (--ec-surligneur, turquoise à 55 %) ne donnait que 4,17:1 sur le marine et
   3,85:1 sur la forme orange. Même bande que la maquette (60 % à 92 % de la
   hauteur du mot, débord de 3 px du padding), dessinée par un pseudo-élément
   en --gp-turquoise à 42 % d'opacité, DERRIÈRE le texte (contexte
   d'empilement propre au mot) : 5,26:1 sur le marine, 4,76:1 sur la forme
   orange (mesures aux pixels). tokens.css reste inchangé. */
.ec-app .hero .surligne {
    position: relative;
    z-index: 0;
    background: none;
}
.ec-app .hero .surligne::before {
    content: "";
    position: absolute;
    top: 60%;
    bottom: 8%;
    left: 0;
    right: 0;
    z-index: -1;
    background: var(--gp-turquoise);
    opacity: .42;
    pointer-events: none;
}

/* ---------- Choix des salariés à préparer ----------
   768 px et plus : carte en place sous le héros. Moins de 768 px : feuille
   du bas (classe ec-heros-choix--feuille posée par heros-du-mois.js). */
.ec-app .ec-heros-choix__carte {
    position: relative;
    scroll-margin-top: calc(var(--fp-header-h, 0px) + 16px);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ec-app .ec-heros-choix__fond,
.ec-app .ec-heros-choix__grip {
    display: none;
}
.ec-app .ec-heros-choix__tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    margin: -10px -10px -4px 0;
}
.ec-app .ec-heros-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ec-app .ec-heros-liste li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 12px 0;
    border-top: 1px solid var(--gp-bordure);
}
.ec-app .ec-heros-liste__nom {
    flex: 1 1 220px;
    min-width: 0;
    font-weight: 600;
    font-size: 15px;
}
.ec-app .ec-heros-choix--feuille {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
}
.ec-app .ec-heros-choix--feuille .ec-heros-choix__fond {
    display: block;
    position: absolute;
    inset: 0;
    /* Voile de la maquette (.sheet-backdrop), comme au lot 2 : rgba admis (README §10) */
    background: rgba(30,55,96,.45);
}
.ec-app .ec-heros-choix--feuille .ec-heros-choix__carte {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 90vh;
    overflow-y: auto;
    border: 0;
    border-radius: 22px 22px 0 0;
    padding: 10px 20px calc(28px + env(safe-area-inset-bottom, 0px));
    /* Ombre de la maquette (.sheet), comme au lot 2 : rgba admis (README §10) */
    box-shadow: 0 -12px 40px rgba(30,55,96,.18);
}
.ec-app .ec-heros-choix--feuille .ec-heros-choix__grip {
    display: block;
    margin-bottom: 4px;
}
.ec-app .ec-heros-choix--feuille .ec-heros-choix__tete {
    margin-top: 0;
}

/* ---------- Points de rupture du lot 3 ---------- */
@media (max-width: 991px) {
    /* De 768 à 991 px, contenu étroit à côté du menu (470 à 660 px) : une
       seule colonne, feuillet sous les boutons (sinon ses montants sont
       coupés), boutons sur plusieurs lignes au besoin, comme sur mobile */
    .ec-app .hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 28px;
    }
    .ec-app .hero__actions .btn {
        white-space: normal;
        text-align: center;
        line-height: 1.3;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}
@media (max-width: 767px) {
    .ec-app .hero {
        padding: 24px 22px;
    }
    .ec-app .ec-heros-liste .btn {
        flex: 1 1 100%;
    }
}

/* ---------- Lot 6 : filtre de l'historique des crédits ---------- */
/* Planche « Mes crédits » : sélecteur « Toutes les opérations » dans l'en-tête
   de la carte, à la hauteur des petits boutons (36 px) ; bouton « Filtrer »
   (formulaire GET, sans JavaScript, comme les filtres de « Mes bulletins »). */
.ec-app .ec-historique-filtre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.ec-app .ec-historique-filtre .select {
    height: 36px;
    font-size: 14px;
    border-radius: var(--gp-radius-lg);
}
@media (max-width: 767px) {
    /* Cibles tactiles de 44 px sous 768 px */
    .ec-app .ec-historique-filtre .select,
    .ec-app .ec-historique-filtre .btn-sm {
        min-height: 44px;
        height: 44px;
    }
}

/* ==========================================================================
   LOT 31 (19/10/2026) — brouillons supprimables (maquette validée du 19/10/2026)
   Corbeille des lignes « En attente », mentions « Ancienne version (jj/mm) »
   et « Déjà payé pour ce mois » sous le statut, fenêtre centrée « Supprimer
   ce brouillon ? » (et sa carte sans JavaScript). Couleurs : jetons de la
   section 8 de tokens.css (--ec-danger*, --ec-success-texte).
   ========================================================================== */

/* ---------- Mentions sous le statut ---------- */
.ec-app .ec-mention {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--gp-gris);
}
.ec-app .ec-mention .i {
    width: 13px;
    height: 13px;
    flex: none;
    stroke-width: 2;
}
.ec-app .ec-mention--ancienne {
    color: var(--gp-jaune-texte);
}
.ec-app .ec-mention--paye {
    color: var(--ec-success-texte);
}
.ec-app .b-statut {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

/* ---------- Corbeille (à droite de « Finaliser », jamais sur un bulletin payé) ---------- */
.ec-app .icon-act--corbeille {
    border-radius: 50%;
    color: var(--gp-gris);
}
.ec-app .icon-act--corbeille:hover,
.ec-app .icon-act--corbeille:focus-visible {
    background: var(--ec-danger-pale);
    border-color: var(--ec-danger-bordure);
    color: var(--ec-danger);
}
.ec-app .btn-danger {
    background: var(--ec-danger);
    color: var(--gp-blanc);
}
.ec-app .btn-danger:hover {
    background: var(--ec-danger-fonce);
}
.ec-app .btn-danger[disabled] {
    opacity: .6;
}

/* ---------- Fenêtre centrée « Supprimer ce brouillon ? » ---------- */
.ec-app .ec-modale-root {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ec-app .ec-modale-root[hidden] {
    display: none;
}
.ec-app .ec-modale-fond {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, .45);
}
.ec-app .ec-modale {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--gp-blanc);
    border-radius: 16px;
    padding: 22px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.ec-app .ec-modale:focus {
    outline: none;
}
.ec-app .ec-modale__icone {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ec-danger-pale);
    color: var(--ec-danger);
    margin-bottom: 10px;
}
.ec-app .ec-modale__icone .i {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}
.ec-app .ec-modale__titre {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 6px;
}
.ec-app .ec-modale__texte {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--gp-gris);
    margin: 0 0 16px;
}
.ec-app .ec-modale__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.ec-app .ec-modale__actions .btn {
    border-radius: 10px;
}

/* ---------- Confirmation sans JavaScript : même contenu, en carte dans la page ---------- */
.ec-app .ec-confirmation {
    margin-top: 0;
}
.ec-app .ec-modale--carte {
    width: auto;
    box-shadow: none;
    border-radius: var(--gp-radius-xl);
}

@media (max-width: 767px) {
    .ec-app .bt .c-statut .ec-mention,
    .ec-app .blist .b-statut {
        align-items: flex-end;
        text-align: right;
    }
    .ec-app .ec-modale {
        padding: 20px 16px;
    }
    .ec-app .ec-modale__actions .btn {
        flex: 1 1 120px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ec-app .ec-modale-root,
    .ec-app .icon-act--corbeille {
        transition: none;
    }
}