/* Coque Etrebil : bandeau du haut, barre des modules, panneau, tiroir du téléphone, palette et fenêtre des retours.
   Couleurs et police de la charte (etrebil-charte.css, chargée avant) : tout passe par ses jetons « --etre-* », avec une
   valeur de secours pour une page qui l'aurait oubliée. Préfixe « ec- » partout : rien ici ne touche aux classes des
   produits, ni à Bootstrap, ni à MudBlazor. */

:root {
    --ec-entete: var(--etre-violet, #4B37A1);
    --ec-entete-texte: var(--etre-grege-clair, #F6F3EE);
    --ec-rail: var(--etre-encre, #221C3A);
    --ec-rail-texte: #AFA8C2;
    --ec-surface: var(--etre-surface, #fff);
    --ec-surface-2: var(--etre-grege-clair, #F6F3EE);
    --ec-fond: var(--etre-fond, #F6F3EE);
    --ec-bord: var(--etre-bordure, #E4DDD3);
    --ec-texte: var(--etre-texte, #221C3A);
    --ec-texte-2: var(--etre-texte-secondaire, #5C5670);
    --ec-texte-3: #6C667F;
    --ec-primaire: var(--etre-primaire, #4B37A1);
    --ec-primaire-pale: var(--etre-violet-clair, #ECE8F7);
    --ec-accent: var(--etre-turquoise, #87D2D0);
    --ec-anis: var(--etre-anis, #D0D770);
    --ec-voile: rgba(22, 18, 43, .45);
    --ec-ombre: 0 10px 30px rgba(34, 28, 58, .18);
    --ec-rayon: 6px;
    --ec-h-entete: 48px;
    --ec-l-rail: 72px;
    --ec-l-panneau: 264px;
    --ec-police: var(--etre-police, "Inter", "Segoe UI", system-ui, sans-serif);
    --ec-police-cartouche: var(--etre-police-cartouche, "Courier New", Courier, monospace);
}

[data-bs-theme="dark"], [data-etre-theme="sombre"] {
    --ec-entete: var(--etre-violet-fonce, #3A2A82);
    --ec-rail: #0E0B1E;
    --ec-surface-2: #2A2349;
    --ec-texte-3: #9A93AF;
    --ec-voile: rgba(8, 6, 18, .6);
    --ec-ombre: 0 10px 30px rgba(0, 0, 0, .5);
}

/* ------------------------------------------------------------------ Charpente */
/* La coque occupe la fenêtre ; seul le contenu défile (et le panneau, s'il est long). */
html:has(.ec-app), html:has(.ec-app) body { height: 100%; margin: 0; }
html:has(.ec-app) body { overflow: hidden; background: var(--ec-fond); }

.ec-app {
    display: grid;
    grid-template-rows: var(--ec-h-entete) minmax(0, 1fr) auto;
    height: 100vh;
    height: 100dvh;
    font-family: var(--ec-police);
    color: var(--ec-texte);
    background: var(--ec-fond);
}

.ec-app button, .ec-app input, .ec-app textarea { font-family: inherit; }
.ec-app [hidden] { display: none !important; }

.ec-saut { position: absolute; left: -9999px; top: 0; z-index: 100; padding: .5rem 1rem; background: var(--ec-surface); color: var(--ec-primaire); }
.ec-saut:focus { left: .5rem; top: .5rem; }

.ec-corps { display: flex; min-height: 0; position: relative; }

.ec-contenu { flex: 1 1 auto; min-width: 0; overflow: auto; outline: none; -webkit-overflow-scrolling: touch; }

.ec-espaceur { flex: 1 1 auto; }

/* ------------------------------------------------------------------ Bandeau */
.ec-entete {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: 0 .6rem 0 .75rem;
    background: var(--ec-entete);
    color: var(--ec-entete-texte);
    min-width: 0;
    position: relative;
    z-index: 30;
}

.ec-logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: inherit; margin-right: .35rem; flex: none; }
.ec-logo-etre {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .32em .42em .28em .54em;
    border-radius: 2px;
    background: var(--ec-anis);
    color: var(--etre-nuit, #16122B);
    font-family: var(--ec-police-cartouche);
    font-size: .9rem; font-weight: 700; line-height: 1; letter-spacing: .12em;
    user-select: none;
}
.ec-logo-app { font-weight: 650; font-size: 1.02rem; letter-spacing: -.01em; white-space: nowrap; }
.ec-logo:hover .ec-logo-etre { background: #DDE38F; }
.ec-logo:focus-visible { outline: 2px solid var(--ec-anis); outline-offset: 3px; border-radius: 3px; }
/* Hors du bandeau (pages de connexion) : sur fond clair, le cartouche passe au violet et le nom à l'encre. */
.ec-logo--clair { color: var(--ec-texte); font-family: var(--ec-police); }
.ec-logo--clair .ec-logo-etre { background: var(--etre-violet, #4B37A1); color: var(--etre-grege, #E4DDD3); }
.ec-logo--clair:hover .ec-logo-etre { background: var(--etre-violet-fonce, #3A2A82); }
.ec-logo--clair:focus-visible { outline-color: var(--ec-primaire); }

.ec-etiquette { font-size: .7rem; font-weight: 600; padding: .12rem .45rem; border-radius: 999px; background: rgba(255, 255, 255, .14); white-space: nowrap; }

.ec-bouton, .ec-recherche, .ec-selecteur, .ec-menu-bouton, .ec-personne {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--ec-entete-texte);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--ec-rayon);
    font-size: .8125rem;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
}
.ec-bouton { justify-content: center; width: 34px; height: 34px; padding: 0; font-size: 1rem; }
.ec-bouton:hover, .ec-menu-bouton:hover, .ec-personne:hover, .ec-menu-bouton[aria-expanded="true"], .ec-personne[aria-expanded="true"] { background: rgba(255, 255, 255, .14); color: var(--ec-entete-texte); }
.ec-entete :focus-visible { outline: 2px solid var(--ec-anis); outline-offset: 1px; }

.ec-selecteur { height: 32px; max-width: 20rem; padding: 0 .6rem; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
.ec-selecteur:hover, .ec-selecteur[aria-expanded="true"] { background: rgba(255, 255, 255, .16); }
.ec-selecteur-nom { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ec-chevron { font-size: .7rem; opacity: .8; }

.ec-menus { display: flex; align-items: center; gap: .1rem; min-width: 0; }
.ec-menu-bouton { height: 32px; padding: 0 .6rem; }
.ec-menus-compact { display: none; }

.ec-recherche { height: 32px; padding: 0 .55rem 0 .65rem; min-width: 15rem; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); }
.ec-recherche:hover { background: rgba(255, 255, 255, .18); }
.ec-recherche-invite { flex: 1 1 auto; text-align: left; opacity: .9; overflow: hidden; text-overflow: ellipsis; max-width: 16rem; }
.ec-touche, .ec-app kbd { font-family: var(--ec-police); font-size: .68rem; padding: .12rem .32rem; border-radius: 4px; background: rgba(255, 255, 255, .16); color: inherit; border: 0; box-shadow: none; }

.ec-personne { height: 40px; padding: 0 .45rem 0 .25rem; gap: .5rem; }
.ec-personne-texte { display: flex; flex-direction: column; align-items: flex-start; gap: .12rem; min-width: 0; max-width: 13rem; }
.ec-personne-nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ec-personne-org { font-size: .7rem; opacity: .78; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.ec-si-sombre { display: none; }
[data-bs-theme="dark"] .ec-si-sombre, [data-etre-theme="sombre"] .ec-si-sombre { display: inline; }
[data-bs-theme="dark"] .ec-si-clair, [data-etre-theme="sombre"] .ec-si-clair { display: none; }

/* ------------------------------------------------------------------ Pastille de la personne */
.ec-avatar {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
    background: var(--etre-lilas, #BC9ECB); color: var(--etre-encre, #221C3A);
    font-size: .72rem; font-weight: 700; letter-spacing: .02em;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}
.ec-avatar--grand { width: 48px; height: 48px; font-size: 1rem; box-shadow: none; }
.ec-avatar-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ Menus déroulants */
.ec-deroulant { position: relative; display: inline-flex; min-width: 0; }
.ec-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
    min-width: 230px; max-width: min(360px, calc(100vw - 1rem));
    padding: .35rem;
    background: var(--ec-surface); color: var(--ec-texte);
    border: 1px solid var(--ec-bord); border-radius: 8px; box-shadow: var(--ec-ombre);
    font-size: .84rem;
}
.ec-menu--droite, .ec-menu--retourne { left: auto; right: 0; }
.ec-sous-menu { display: flex; }
.ec-sous-menu > .ec-menu { top: -.4rem; left: calc(100% + 4px); }
.ec-sous-menu > .ec-menu.ec-menu--retourne { left: auto; right: calc(100% + 4px); }

.ec-menu-element {
    display: flex; align-items: center; gap: .6rem; width: 100%;
    padding: .45rem .6rem; border: 0; border-radius: 5px;
    background: none; color: var(--ec-texte); text-align: left; text-decoration: none;
    font-size: .84rem; line-height: 1.25; cursor: pointer;
}
.ec-menu-element:hover, .ec-menu-element:focus-visible { background: var(--ec-primaire-pale); color: var(--ec-texte); outline: none; }
.ec-menu-element:disabled { opacity: .45; cursor: default; background: none; }
.ec-menu-element > .bi:first-child { width: 1.1rem; text-align: center; color: var(--ec-texte-2); }
.ec-menu-element.ec-courant { font-weight: 600; }
.ec-menu-libelle { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ec-menu-detail { font-size: .72rem; color: var(--ec-texte-2); font-weight: 400; }
.ec-menu-coche { color: var(--ec-primaire); }
.ec-menu-externe { font-size: .7rem; color: var(--ec-texte-3); }
.ec-raccourci { margin-left: auto; color: var(--ec-texte-3); background: var(--ec-surface-2) !important; }
.ec-menu-titre { padding: .45rem .6rem .25rem; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ec-texte-3); }
.ec-menu-trait { margin: .3rem .2rem; border: 0; border-top: 1px solid var(--ec-bord); opacity: 1; }
.ec-menu-vide { display: block; padding: .5rem .6rem; color: var(--ec-texte-3); font-size: .8rem; }
.ec-menu-defilant { max-height: min(60vh, 420px); overflow-y: auto; }
.ec-menu-filtre, .ec-panneau-filtre { display: flex; align-items: center; gap: .4rem; margin: .2rem .2rem .35rem; padding: 0 .55rem; border: 1px solid var(--ec-bord); border-radius: 6px; background: var(--ec-surface); color: var(--ec-texte-2); }
.ec-menu-filtre input, .ec-panneau-filtre input { flex: 1 1 auto; min-width: 0; height: 30px; border: 0; outline: none; background: none; color: var(--ec-texte); font-size: .82rem; }
.ec-menu-filtre:focus-within, .ec-panneau-filtre:focus-within { border-color: var(--ec-primaire); box-shadow: 0 0 0 3px var(--etre-focus, rgba(75, 55, 161, .35)); }
.ec-menu form { margin: 0; }

.ec-carte-personne { display: flex; align-items: center; gap: .75rem; padding: .55rem .6rem .45rem; }
.ec-carte-texte { min-width: 0; }
.ec-carte-nom { font-weight: 650; font-size: .92rem; }
.ec-carte-detail { font-size: .75rem; color: var(--ec-texte-2); overflow: hidden; text-overflow: ellipsis; }

.ec-tel-seul { display: none; }

/* ------------------------------------------------------------------ Barre des modules */
.ec-navigation { display: flex; min-height: 0; flex: none; }

.ec-rail {
    display: flex; flex-direction: column; align-items: stretch; gap: .1rem;
    width: var(--ec-l-rail); flex: 0 0 var(--ec-l-rail);
    padding: .35rem 0;
    background: var(--ec-rail);
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: none;
}
.ec-rail::-webkit-scrollbar { display: none; }

.ec-module {
    display: flex; flex-direction: column; align-items: center; gap: .15rem;
    padding: .5rem .15rem .45rem;
    color: var(--ec-rail-texte);
    background: none; border: 0; border-left: 3px solid transparent;
    text-decoration: none; text-align: center;
    font-size: .64rem; line-height: 1.15;
    cursor: pointer; touch-action: manipulation;
}
.ec-module .bi { font-size: 1.25rem; line-height: 1; }
.ec-module span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 .1rem; }
.ec-module:hover { color: var(--etre-grege, #E4DDD3); background: rgba(255, 255, 255, .05); }
.ec-module.ec-actif { color: #fff; border-left-color: var(--ec-accent); background: rgba(135, 210, 208, .14); }
.ec-module:focus-visible { outline: 2px solid var(--ec-accent); outline-offset: -2px; }
.ec-bascule-panneau { flex: none; padding: .6rem .15rem; }
.ec-module { position: relative; }
.ec-compteur-module {
    position: absolute; top: .3rem; left: calc(50% + .45rem);
    min-width: 1.05rem; height: 1.05rem; padding: 0 .28rem; box-sizing: border-box;
    border-radius: 999px; background: var(--ec-anis); color: var(--etre-nuit, #16122B);
    font-size: .6rem; font-weight: 700; line-height: 1.05rem; text-align: center;
    max-width: none !important; overflow: visible !important;
}
.ec-si-deploye { display: inline; }
.ec-si-replie { display: none; }
[data-ec-panneau="replie"] .ec-si-deploye { display: none; }
[data-ec-panneau="replie"] .ec-si-replie { display: inline; }

/* ------------------------------------------------------------------ Panneau déployé */
.ec-panneaux { display: flex; width: var(--ec-l-panneau); flex: 0 0 var(--ec-l-panneau); min-height: 0; background: var(--ec-surface); border-right: 1px solid var(--ec-bord); }
.ec-panneaux:not([data-ec-actif]), .ec-panneaux[data-ec-actif=""] { display: none; }
[data-ec-panneau="replie"] .ec-panneaux { display: none; }

.ec-panneau { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.ec-panneau-vue { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.ec-panneau-contexte { overflow: auto; }

.ec-onglets { display: flex; gap: .15rem; padding: .3rem .5rem 0; border-bottom: 1px solid var(--ec-bord); }
.ec-onglet { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .6rem; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ec-texte-2); font-size: .82rem; cursor: pointer; }
.ec-onglet.ec-actif { color: var(--ec-primaire); border-bottom-color: var(--ec-primaire); font-weight: 600; }

.ec-panneau-titre { display: flex; align-items: center; gap: .3rem; padding: .7rem .5rem .45rem .85rem; }
.ec-panneau-titre a { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: .5rem; color: var(--ec-texte); font-weight: 650; font-size: .95rem; text-decoration: none; }
.ec-panneau-titre a:hover { color: var(--ec-primaire); }
.ec-panneau-titre .bi { color: var(--ec-primaire); }
.ec-bouton-discret { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 5px; background: none; color: var(--ec-texte-3); cursor: pointer; }
.ec-bouton-discret:hover { background: var(--ec-surface-2); color: var(--ec-texte); }

.ec-panneau-filtre { margin: .1rem .6rem .4rem; }
.ec-panneau-liste { flex: 1 1 auto; overflow-y: auto; padding: 0 .4rem .8rem; }
.ec-groupe-titre { padding: .8rem .45rem .3rem; font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ec-texte-3); }
.ec-panneau-vide { padding: 1rem .5rem; color: var(--ec-texte-3); font-size: .82rem; }

.ec-entree {
    display: flex; align-items: center; gap: .6rem;
    padding: .38rem .5rem; border-radius: 5px;
    color: var(--ec-texte); text-decoration: none;
    font-size: .855rem; line-height: 1.25;
}
.ec-entree:hover { background: var(--ec-surface-2); color: var(--ec-texte); }
.ec-entree.ec-actif, .ec-entree[aria-current="page"] { background: var(--ec-primaire-pale); color: var(--ec-primaire); font-weight: 600; }
.ec-entree:focus-visible, .ec-entree-libelle:focus-visible { outline: 2px solid var(--ec-primaire); outline-offset: -2px; }
.ec-entree-icone { flex: none; width: 1.05rem; text-align: center; font-size: .95rem; color: var(--ec-texte-2); }
.ec-entree-libelle { flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; }
.ec-entree-info { font-size: .7rem; color: var(--ec-texte-3); }
.ec-entree--titre { font-size: .75rem; font-weight: 600; color: var(--ec-texte-2); }
.ec-niveau-2 { padding-left: 1.6rem; }
.ec-niveau-3 { padding-left: 2.6rem; }
.ec-niveau-4 { padding-left: 3.4rem; }
.ec-branche > summary { list-style: none; cursor: pointer; }
.ec-branche > summary::-webkit-details-marker { display: none; }
.ec-branche-chevron { font-size: .7rem; color: var(--ec-texte-3); transition: transform .15s; }
.ec-branche[open] > summary .ec-branche-chevron { transform: rotate(90deg); }
.ec-branche > .ec-entree, .ec-branche > .ec-branche > summary { position: relative; }

.ec-menus-tiroir { display: none; }

/* ------------------------------------------------------------------ Barre d'état */
.ec-statut { display: flex; align-items: center; gap: 1rem; height: 26px; padding: 0 .75rem; font-size: .72rem; background: var(--ec-surface-2); border-top: 1px solid var(--ec-bord); color: var(--ec-texte-2); white-space: nowrap; overflow: hidden; }

/* ------------------------------------------------------------------ Palette et fenêtres */
.ec-fenetre-fond { position: fixed; inset: 0; z-index: 80; background: var(--ec-voile); }

.ec-palette, .ec-fenetre {
    position: fixed; z-index: 81; left: 50%; transform: translateX(-50%);
    width: min(640px, calc(100vw - 1.5rem));
    background: var(--ec-surface); color: var(--ec-texte);
    border: 1px solid var(--ec-bord); border-radius: 12px; box-shadow: var(--ec-ombre);
    font-family: var(--ec-police);
    display: flex; flex-direction: column;
}
.ec-palette input, .ec-fenetre textarea, .ec-fenetre input, .ec-fenetre button { font-family: inherit; }
.ec-palette { top: 12vh; max-height: 70vh; }
.ec-palette-saisie { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-bottom: 1px solid var(--ec-bord); color: var(--ec-texte-2); }
.ec-palette-saisie input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: none; color: var(--ec-texte); font-size: 1rem; }
.ec-palette-saisie kbd, .ec-palette-pied kbd { background: var(--ec-surface-2); color: var(--ec-texte-2); }
.ec-palette-resultats { overflow-y: auto; padding: .35rem; }
.ec-palette-groupe { padding: .55rem .6rem .25rem; font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ec-texte-3); }
.ec-palette-resultat { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; font-family: inherit; display: flex; align-items: baseline; gap: .65rem; padding: .5rem .65rem; border-radius: 6px; color: var(--ec-texte); text-decoration: none; font-size: .88rem; }
.ec-palette-resultat .bi { color: var(--ec-texte-2); }
.ec-palette-resultat.ec-choisi { background: var(--ec-primaire-pale); }
.ec-palette-resultat.ec-choisi .bi { color: var(--ec-primaire); }
.ec-palette-titre { flex: 0 1 auto; font-weight: 550; }
.ec-palette-detail { flex: 1 1 auto; font-size: .76rem; color: var(--ec-texte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.ec-palette-etat { padding: 1rem .7rem; color: var(--ec-texte-3); font-size: .85rem; display: flex; align-items: center; gap: .5rem; }
.ec-palette-tout { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; padding: .55rem .65rem; border-top: 1px solid var(--ec-bord); color: var(--ec-primaire); text-decoration: none; font-size: .85rem; }
.ec-palette-pied { display: flex; gap: 1rem; padding: .45rem .9rem; border-top: 1px solid var(--ec-bord); font-size: .72rem; color: var(--ec-texte-3); }

.ec-fenetre { top: 10vh; max-height: 80vh; }
.ec-fenetre-tete { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem .5rem 1.1rem; }
.ec-fenetre-tete h2 { margin: 0; font-size: 1.05rem; font-weight: 650; display: flex; gap: .5rem; align-items: center; }
.ec-fenetre-tete h2 .bi { color: var(--ec-primaire); }
.ec-fenetre-corps { padding: .3rem 1.1rem .8rem; overflow-y: auto; display: flex; flex-direction: column; gap: .85rem; }
.ec-fenetre-pied { display: flex; justify-content: flex-end; gap: .5rem; padding: .75rem 1.1rem; border-top: 1px solid var(--ec-bord); }

.ec-types { display: flex; flex-wrap: wrap; gap: .4rem; border: 0; margin: 0; padding: 0; }
.ec-types legend { width: 100%; margin-bottom: .4rem; font-size: .82rem; font-weight: 600; float: none; padding: 0; }
.ec-type { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border: 1px solid var(--ec-bord); border-radius: 999px; font-size: .82rem; cursor: pointer; user-select: none; }
.ec-type input { position: absolute; opacity: 0; pointer-events: none; }
.ec-type.ec-actif { border-color: var(--ec-primaire); background: var(--ec-primaire-pale); color: var(--ec-primaire); font-weight: 600; }
.ec-type:focus-within { outline: 2px solid var(--ec-primaire); outline-offset: 1px; }
.ec-champ { display: flex; flex-direction: column; gap: .35rem; font-size: .82rem; font-weight: 600; }
.ec-champ textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 7rem; padding: .55rem .65rem; border: 1px solid var(--etre-grege-fonce, #CFC6B8); border-radius: 6px; background: var(--ec-surface); color: var(--ec-texte); font-size: .88rem; font-weight: 400; line-height: 1.45; }
.ec-champ textarea:focus { outline: none; border-color: var(--ec-primaire); box-shadow: 0 0 0 3px var(--etre-focus, rgba(75, 55, 161, .35)); }
.ec-compteur { align-self: flex-end; font-size: .7rem; font-weight: 400; color: var(--ec-texte-3); }
.ec-case { display: flex; align-items: center; gap: .5rem; font-size: .84rem; }
.ec-discret { margin: 0; font-size: .75rem; color: var(--ec-texte-2); line-height: 1.45; }
.ec-discret code { font-size: .72rem; color: var(--ec-texte); }
.ec-erreur { margin: 0; color: #B42318; font-size: .84rem; }
.ec-retour-merci { align-items: center; text-align: center; padding: 1.2rem 1.5rem; }
.ec-retour-merci > .bi { font-size: 2.4rem; color: var(--etre-turquoise-fonce, #2E8E8B); }
.ec-retour-merci p { margin: 0; }

.ec-bt { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .95rem; border-radius: 6px; border: 1px solid var(--etre-grege-fonce, #CFC6B8); background: var(--ec-surface); color: var(--ec-texte); font-size: .85rem; cursor: pointer; }
.ec-bt:hover { background: var(--ec-surface-2); }
.ec-bt--primaire { background: var(--ec-primaire); border-color: var(--ec-primaire); color: var(--etre-primaire-texte, #fff); font-weight: 600; }
.ec-bt--primaire:hover { background: var(--etre-primaire-survol, #3A2A82); }
.ec-bt:disabled { opacity: .5; cursor: default; }

.ec-rouage { display: inline-block; width: .9rem; height: .9rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ec-tourne .7s linear infinite; }
@keyframes ec-tourne { to { transform: rotate(360deg); } }

.ec-voile { display: none; }

/* ------------------------------------------------------------------ Écrans moyens : le bandeau se resserre */
@media (max-width: 1199.98px) {
    .ec-recherche { min-width: 0; }
    .ec-recherche-invite, .ec-recherche .ec-touche { display: none; }
    .ec-personne-texte, .ec-personne .ec-chevron { display: none; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .ec-menus { display: none; }
    .ec-menus-compact { display: inline-flex; }
}

@media (max-width: 991.98px) {
    .ec-selecteur { max-width: 11rem; }
    .ec-logo-app { display: none; }
}

/* ------------------------------------------------------------------ Téléphone : tiroir */
@media (max-width: 767.98px) {
    .ec-entete { gap: .2rem; padding: 0 max(.35rem, env(safe-area-inset-right)) 0 max(.35rem, env(safe-area-inset-left)); }
    .ec-tel { display: inline-flex; }
    .ec-sauf-tel { display: none !important; }
    .ec-tel-seul { display: flex; }
    .ec-menus, .ec-menus-compact { display: none !important; }
    .ec-logo-app { display: inline; font-size: .95rem; }
    .ec-selecteur { max-width: 40vw; }
    .ec-etiquette { display: none; }

    .ec-navigation {
        position: absolute; z-index: 40; top: 0; bottom: 0; left: 0;
        width: min(340px, 88vw);
        flex-wrap: wrap; align-content: flex-start;
        background: var(--ec-surface);
        box-shadow: var(--ec-ombre);
        transform: translateX(-105%);
        transition: transform .2s ease;
        overflow-y: auto;
    }
    .ec-tiroir-ouvert .ec-navigation { transform: none; }
    /* Écran sans panneau (Usage, Stockage…) : le tiroir se réduit à la barre des modules, sans bande vide à côté. */
    .ec-navigation:not(:has(.ec-panneaux[data-ec-actif]:not([data-ec-actif=""]))) { width: auto; }
    .ec-rail { height: auto; min-height: 100%; }
    .ec-panneaux { flex: 1 1 0; width: auto; border-right: 0; min-height: 100%; }
    [data-ec-panneau="replie"] .ec-panneaux { display: flex; }
    .ec-panneaux:not([data-ec-actif]), .ec-panneaux[data-ec-actif=""] { display: none; }
    .ec-module.ec-choisi { color: #fff; background: rgba(255, 255, 255, .08); }
    .ec-entree { padding: .6rem .5rem; font-size: .92rem; }
    .ec-menus-tiroir { display: block; width: 100%; border-top: 1px solid var(--ec-bord); padding: .3rem .4rem 1rem; background: var(--ec-surface); }
    .ec-menus-tiroir summary { padding: .6rem .5rem; font-weight: 600; cursor: pointer; }
    .ec-menus-tiroir .ec-deroulant { display: block; }
    .ec-menus-tiroir .ec-menu { position: static; box-shadow: none; border: 0; padding: 0 0 0 .6rem; min-width: 0; }
    .ec-menus-tiroir .ec-menu[hidden] { display: none !important; }

    .ec-voile { position: absolute; inset: 0; z-index: 35; border: 0; background: var(--ec-voile); }
    .ec-tiroir-ouvert .ec-voile { display: block; }

    .ec-menu { position: fixed; top: calc(var(--ec-h-entete) + 4px); left: .5rem; right: .5rem; max-width: none; }
    .ec-sous-menu > .ec-menu { position: static; margin-left: .8rem; box-shadow: none; border: 0; }
    .ec-palette, .ec-fenetre { top: .75rem; max-height: calc(100dvh - 1.5rem); }
}
@media (min-width: 768px) {
    .ec-tel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ec-navigation, .ec-branche-chevron { transition: none; }
    .ec-rouage { animation-duration: 2s; }
}

@media (forced-colors: active) {
    .ec-module.ec-actif, .ec-entree.ec-actif { outline: 2px solid Highlight; }
    .ec-logo-etre { border: 1px solid CanvasText; }
}

@media print {
    .ec-entete, .ec-navigation, .ec-statut, .ec-voile { display: none !important; }
    .ec-app { display: block; height: auto; }
    html:has(.ec-app) body { overflow: visible; }
    .ec-contenu { overflow: visible; }
}