/* Portail client Noma — complément au framework nc- (cl26.10.29)
   Seulement ce que nc.css ne fournit pas : mise en page du portail, badges, tuiles. */

:root {
	--nc-accent: #2563eb;
	--ext-fond: #f4f6fa;
	--ext-carte: rgba(255, 255, 255, .9);
	--ext-texte: #1d1d1b;
	--ext-doux: #64748b;
	--ext-bord: #e5e9f0;
	--ext-rayon: var(--nc-rayon);
	--ext-ombre: 0 2px 4px rgba(5, 25, 70, .08), 0 14px 34px rgba(5, 25, 70, .22);
}

body.ext {
	background: #1557b8;
	color: var(--ext-texte);
	min-height: 100vh;
	margin: 0;
}

/* Fond bleuté abstrait façon Aqua (premiers Mac OS X) */
body.ext::before {
	content: ""; position: fixed; inset: 0; z-index: -1;
	background: url(../media/fond-aqua.svg) center / cover no-repeat;
}

input::-webkit-contacts-auto-fill-button {
	visibility: hidden !important;
	display: none !important;
	pointer-events: none;
	position: absolute;
	right: 0;
}

/* ---------- Connexion ---------- */
.ext-connexion {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: transparent;
}
.ext-connexion-carte {
	width: 100%;
	max-width: 420px;
	background: var(--ext-carte);
	border: 1px solid var(--ext-bord);
	border-radius: var(--nc-rayon);
	box-shadow: var(--ext-ombre);
	padding: 2rem 1.75rem 1.75rem;
	text-align: center;
	overflow: hidden;
	animation: ext-entree .45s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes ext-entree { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .ext-connexion-carte { animation: none; } }
.ext-connexion-carte .ext-logo { width: 68px; margin: 0 auto 1.1rem; display: block; }
.ext-connexion-carte h1 { font-size: 1.45rem; font-weight: 700; margin: 0 0 .35rem; }
.ext-connexion-carte .ext-sous { color: var(--ext-doux); font-size: .92rem; margin: 0 0 1.5rem; }
.ext-champ-icone { position: relative; }
.ext-champ-icone .ext-etat { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); font-size: 1.15rem; }
.ext-champ-icone .form-control { padding-right: 2.6rem; }
.ext-envoi { text-align: center; }
.ext-envoi .ext-picto { font-size: 4rem; line-height: 1; margin: .5rem 0 1rem; }

/* ---------- Boutons : classes standard nc (.btn .btn-primary .btn-light .btn-sm .btn-lg .btn-link) ----------
   Teinte du portail : dégradé gris, posé via les variables --nc-btn-* du framework (tailles et survol nc inchangés) */
.ext .btn-primary {
	--nc-btn-color: #1d1d1b;
	--nc-btn-bg: linear-gradient(180deg, #ffffff 0%, #e4e9f0 100%);
	--nc-btn-border: rgba(15, 35, 80, .18);
	--nc-btn-hover-color: #1d1d1b;
	--nc-btn-hover-bg: linear-gradient(180deg, #ffffff 0%, #d6dde8 100%);
	--nc-btn-hover-border: rgba(15, 35, 80, .28);
	--nc-btn-active-color: #1d1d1b;
	--nc-btn-active-bg: linear-gradient(180deg, #e4e9f0 0%, #d0d8e4 100%);
	--nc-btn-active-border: rgba(15, 35, 80, .28);
	box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(5, 25, 70, .18);
}
.ext .btn-light {
	--nc-btn-color: #2b2d31;
	--nc-btn-bg: linear-gradient(180deg, rgba(255, 255, 255, .85) 0%, rgba(240, 243, 247, .85) 100%);
	--nc-btn-border: rgba(15, 35, 80, .12);
	--nc-btn-hover-color: #1d1d1b;
	--nc-btn-hover-bg: linear-gradient(180deg, #ffffff 0%, #eef1f5 100%);
	--nc-btn-hover-border: rgba(15, 35, 80, .2);
	--nc-btn-active-color: #1d1d1b;
	--nc-btn-active-bg: linear-gradient(180deg, #eef1f5 0%, #e1e6ed 100%);
	--nc-btn-active-border: rgba(15, 35, 80, .2);
}
.ext .btn-link { --nc-btn-color: #2b2d31; --nc-btn-hover-color: #1d1d1b; }
/* « Envoi en cours » du formulaire de connexion (état Alpine d'origine) */
.ext .btn-success { --nc-btn-bg: linear-gradient(180deg, #34c06a 0%, #16a34a 100%); --nc-btn-border: #16a34a; animation: ext-pulse 1.2s ease-in-out infinite; }
@keyframes ext-pulse { 50% { opacity: .85; } }
.ext .nc-header-cta { background: linear-gradient(180deg, #5b5f66 0%, #2b2d31 100%); color: #fff; }

/* ---------- En-tête : logo + onglets + avatar (nc-header, nc-dropdown) ---------- */
/* pas de backdrop-filter ici : il confinerait le tiroir mobile (position fixed) à la hauteur de l'en-tête */
.ext-entete.nc-header { position: relative; top: 0; background: transparent; box-shadow: none; border-bottom: 0; color: #fff; padding: .55rem max(1rem, calc((100% - 1248px) / 2)); gap: 1.25rem; }
/* nc-header collant = z-index 50 : son tiroir (z 100) restait sous le voile (z 90, dans body) ; on remonte l'en-tête quand il est ouvert */
.ext-entete.nc-header.nc-ouvert { z-index: 95; }
.ext-entete .nc-header-logo img { height: 34px; width: auto; display: block; }
.ext-entete .nc-header-nav { justify-content: flex-start; min-width: 0; }
/* En-tête sans fond, posé sur le fond Aqua : logo, menu et burger en blanc (le tiroir mobile garde son fond blanc) */
.ext-entete .nc-header-burger { color: #fff; }
.ext-entete.nc-ouvert .nc-header-burger { color: #16181d; }

.ext-avatar {
	width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center; padding: 0;
	background: linear-gradient(180deg, #5b5f66 0%, #2b2d31 100%); color: #fff; font-weight: 700; font-size: .8rem;
	border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ext-bord);
}
.ext-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ext-avatar.ext-grand { width: 48px; height: 48px; font-size: 1rem; }
button.ext-avatar { cursor: pointer; transition: box-shadow .15s; }
button.ext-avatar:hover, .nc-dropdown.nc-ouvert button.ext-avatar { box-shadow: 0 0 0 3px rgba(43, 45, 49, .18); }
.ext-compte-menu .nc-dropdown-panneau { left: auto; right: 0; min-width: 260px; }
.ext-compte-entete { display: flex; align-items: center; gap: .75rem; padding: .5rem .7rem .75rem; margin-bottom: .35rem; border-bottom: 1px solid var(--ext-bord); }
.ext-compte-entete > div { min-width: 0; }
.ext-compte-entete .ext-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ext-compte-menu .nc-dropdown-lien { cursor: pointer; }
.ext-compte-menu .nc-dropdown-panneau a:hover { background: #f1f3f5; color: var(--ext-texte); }

/* ---------- Onglets (nc-tabs) dans l'en-tête, soulignés ---------- */
.ext-portail.nc-tabs { display: block; padding-bottom: 3rem; }
.ext-portail.nc-tabs .nc-onglets { display: flex; flex-wrap: nowrap; gap: .1rem; align-items: center; border-bottom: 0; }
.ext-portail.nc-tabs .nc-onglet {
	display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
	border-radius: 0; padding: .7rem .65rem; font-size: .9rem; color: rgba(255, 255, 255, .82);
	text-shadow: 0 1px 2px rgba(5, 25, 70, .3);
}
.ext-portail.nc-tabs .nc-onglet i { color: rgba(255, 255, 255, .7); font-size: .9em; }
.ext-portail.nc-tabs .nc-onglet:hover { color: #fff; background: none; }
.ext-portail.nc-tabs .nc-onglets .nc-onglet.nc-actif { color: #fff; font-weight: 600; background: none; }
.ext-portail.nc-tabs .nc-onglets .nc-onglet.nc-actif i { color: #fff; }
.ext-portail.nc-tabs[data-nc-indicateur="underline"] .nc-onglet::after { left: .65rem; right: .65rem; bottom: -.2rem; background: #fff; }
.ext-portail .ext-sep { flex: 0 0 1px; align-self: stretch; background: rgba(255, 255, 255, .35); margin: .55rem .45rem; }
.ext-portail .nc-onglet.ext-cache { display: none; }
.ext-portail.nc-tabs .nc-panneaux { max-width: 1280px; margin: 1.75rem auto 0; padding: 0 1rem; }
.ext-compte { background: #eef2ff; color: #3730a3; border-radius: 999px; font-size: .72rem; font-weight: 700; padding: .05rem .5rem; }

/* Tiroir mobile : onglets à la verticale */
.ext-entete.nc-mobile .nc-onglets { flex-direction: column; align-items: stretch; width: 100%; }
.ext-portail.nc-tabs .ext-entete.nc-mobile .nc-onglet { width: 100%; padding: .85rem .6rem; font-size: 1rem; border-bottom: 1px solid rgba(0, 0, 0, .06); color: #475569; text-shadow: none; }
.ext-portail.nc-tabs .ext-entete.nc-mobile .nc-onglet i { color: #94a3b8; }
.ext-portail.nc-tabs .ext-entete.nc-mobile .nc-onglets .nc-onglet.nc-actif, .ext-portail.nc-tabs .ext-entete.nc-mobile .nc-onglets .nc-onglet.nc-actif i { color: var(--ext-texte); }
.ext-portail.nc-tabs .ext-entete.nc-mobile .nc-onglet::after { display: none; }
.ext-portail.nc-tabs .ext-entete.nc-mobile .nc-onglets .nc-onglet.nc-actif { background: #f1f3f5; }
.ext-entete.nc-mobile .ext-sep { height: 1px; margin: .5rem 0; background: var(--ext-bord); }
.ext-entete.nc-mobile .nc-header-logo { margin-right: auto; }

@media (max-width: 991px) {
	.ext-portail.nc-tabs .nc-panneaux { margin-top: 1rem; }
	.ext-tuile { padding: 1rem; }
	.ext-tuile .ext-tuile-valeur { font-size: 1.5rem; }
	.ext-panneau-titre h2 { font-size: 1.3rem; }
}

/* ---------- Panneaux ---------- */
.ext-panneau-titre { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin: .25rem 0 1.25rem; }
.ext-panneau-titre h2 { font-size: 1.5rem; font-weight: 700; margin: 0; color: #fff; text-shadow: 0 1px 2px rgba(5, 25, 70, .35); }
.ext-panneau-titre p { margin: .2rem 0 0; color: rgba(255, 255, 255, .82); font-size: .92rem; }
.ext-carte, .ext-tuile { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ext-carte {
	background: var(--ext-carte); border: 1px solid var(--ext-bord); border-radius: var(--ext-rayon);
	box-shadow: var(--ext-ombre); padding: 1.35rem;
}
.ext-carte + .ext-carte { margin-top: 1rem; }
.ext-vide { text-align: center; color: var(--ext-doux); padding: 2.5rem 1rem; }
.ext-vide > i { font-size: 2.4rem; color: #cbd5e1; display: block; margin-bottom: .75rem; }
.ext-note { font-size: .85rem; color: var(--ext-doux); }

/* ---------- Tuiles d'accueil ---------- */
.ext-tuile {
	position: relative; overflow: hidden;
	display: block; text-align: left; width: 100%;
	background: var(--ext-carte); border: 1px solid var(--ext-bord); border-radius: var(--ext-rayon);
	box-shadow: var(--ext-ombre); padding: 1.2rem 1.25rem; cursor: pointer; font: inherit; color: inherit;
	min-height: 118px; display: flex; flex-direction: column; justify-content: flex-end;
}
/* Pictogramme décoratif : grand, gris très clair, sans fond ni contour, rogné par le coin haut droit de la carte */
.ext-tuile .ext-tuile-icone {
	position: absolute; top: -.9rem; right: -.7rem; z-index: 0;
	font-size: 5.5rem; line-height: 1; color: #cbd3de;
	background: none; border: 0; width: auto; height: auto; margin: 0; pointer-events: none;
	transition: transform .3s ease, color .3s ease;
}
.ext-tuile:hover .ext-tuile-icone { transform: rotate(-6deg) scale(1.05); color: #bcc5d2; }
.ext-tuile .ext-tuile-valeur, .ext-tuile .ext-tuile-libelle { position: relative; z-index: 1; }
.ext-tuile .ext-tuile-valeur { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.ext-tuile .ext-tuile-libelle { color: var(--ext-doux); font-size: .88rem; margin-top: .15rem; }
.ext-tuile .ext-tuile-mot { display: inline-block; font-size: 1.3rem; padding: .3rem 0 .2rem; }
@media (max-width: 991px) { .ext-tuile .ext-tuile-icone { font-size: 4.5rem; } }

/* Entrée en cascade des tuiles (rejouée à chaque affichage de l'onglet) */
.nc-panneau.nc-actif .ext-cascade > * { animation: ext-entree .45s cubic-bezier(.2, .7, .2, 1) both; }
.nc-panneau.nc-actif .ext-cascade > *:nth-child(2) { animation-delay: .06s; }
.nc-panneau.nc-actif .ext-cascade > *:nth-child(3) { animation-delay: .12s; }
.nc-panneau.nc-actif .ext-cascade > *:nth-child(4) { animation-delay: .18s; }
.nc-panneau.nc-actif .ext-cascade > *:nth-child(5) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .ext-cascade > * { animation: none !important; } }

/* ---------- Badges de statut / priorité ---------- */
.ext-badge {
	display: inline-flex; align-items: center; gap: .3rem;
	border-radius: 999px; padding: .15rem .6rem; font-size: .76rem; font-weight: 600; white-space: nowrap;
	background: #f1f5f9; color: #475569;
}
.ext-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
/* Couleur selon la valeur affichée (data-v) : statuts de ticket, priorités, factures */
.ext-badge[data-v="Nouveau"], .ext-badge[data-v="Normale"] { background: #eff4ff; color: #1d4ed8; }
.ext-badge[data-v="En cours"], .ext-badge[data-v="Haute"], .ext-badge[data-v="À régler"] { background: #fff7ed; color: #c2410c; }
.ext-badge[data-v="En attente client"] { background: #fefce8; color: #a16207; }
.ext-badge[data-v="Résolu"], .ext-badge[data-v="Payée"] { background: #ecfdf5; color: #047857; }
.ext-badge[data-v="Fermé"], .ext-badge[data-v="Basse"] { background: #f1f5f9; color: #64748b; }
.ext-badge[data-v="Urgente"], .ext-badge[data-v="En retard"] { background: #fef2f2; color: #b91c1c; }

/* ---------- Tableaux ---------- */
/* Liste défilante ajustée à l'écran par fit() (admin/js/layout.js) : filtre et en-têtes de colonnes restent visibles */
.ext-fit { padding-top: 0; background: #fff; }
/* nc-tableau : « .nc-tableau { display:block } » touche aussi le <table> (même classe que son conteneur),
   les lignes se calent alors sur leur contenu ; en desktop on rend au tableau son affichage normal */
@media (min-width: 641px) { .ext-carte table.nc-tableau { display: table; width: 100%; } }
.ext-fit .nc-tableau__barre { position: sticky; top: 0; z-index: 3; background: #fff; padding-top: 1.1rem; padding-bottom: .6rem; margin-bottom: 0; }
.ext-fit .nc-tableau thead th { position: sticky; top: var(--ext-haut-barre, 66px); z-index: 2; background: #fff; }
.ext-carte .nc-tableau { margin: 0; }
.ext-num { font-variant-numeric: tabular-nums; }
.ext-clic { cursor: pointer; }

/* ---------- Fil d'échanges d'un ticket ---------- */
.ext-ticket-entete { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-bottom: 1rem; }
.ext-ticket-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.ext-ticket-meta div { background: #f8fafc; border: 1px solid var(--ext-bord); border-radius: var(--nc-rayon); padding: .55rem .75rem; font-size: .88rem; }
.ext-ticket-meta span { display: block; color: var(--ext-doux); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.ext-fil { white-space: pre-wrap; word-break: break-word; font-size: .93rem; line-height: 1.55; }
.ext-message { border: 1px solid var(--ext-bord); border-radius: var(--nc-rayon); padding: .9rem 1rem; background: #fff; }
.ext-message + .ext-message { margin-top: .75rem; }
.ext-message.ext-initial { background: #f8fafc; }
.ext-message-auteur { font-size: .78rem; color: var(--ext-doux); margin-bottom: .35rem; font-weight: 600; }
.ext-message.ext-noma { background: #eff4ff; border-color: #c7d7fe; margin-left: 1.5rem; }
.ext-note-interne { background: #fffbeb; border-color: #fde68a; }

/* ---------- Modale ticket ---------- */
/* Toutes les fenêtres du portail : 60 % de la largeur d'écran (nc-modale plafonne à 560px par défaut) */
.ext-modale .nc-fenetre { width: 60vw; max-width: none; max-height: 90vh; overflow: auto; border-radius: var(--nc-rayon); padding: 1.5rem; }
@media (max-width: 991px) { .ext-modale .nc-fenetre { width: 95vw; } }
.ext-modale h3 { margin: 0 0 1rem; font-size: 1.25rem; padding-right: 2rem; }

/* ---------- Validation (forms.js : valid()) ---------- */
.valid-error { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important; }
.valid-error-text { color: #dc2626; font-size: .82rem; margin-top: .3rem; }

/* ---------- Divers ---------- */
.ext-message-absence textarea { min-height: 200px; }
.ext-champ-date { position: relative; }
.ext-champ-date i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.ext-champ-date .form-control { padding-left: 2.4rem; }
#envoi:empty, #absence-retour:empty { display: none; }
.ext-retour-ok { color: #16a34a; font-size: 1.1rem; font-weight: 600; text-align: center; margin-top: 1rem; }
.ext-liste-docs a { color: inherit; text-decoration: none; font-weight: 500; }
.ext-liste-docs a:hover { color: var(--nc-accent); }

/* Œil des champs mot de passe (fiche boîte mail) */
.ext-oeil { position: absolute; right: .6rem; bottom: .55rem; border: 0; background: none; color: #6c757d; cursor: pointer; padding: 0; line-height: 1; }

/* Boîte absente du serveur mail (D-PKSupprimé) : affichée grisée, non modifiable */
.ext-absente td { opacity: .5; }

/* Pièces jointes des tickets (cl26.10.29) */
.ext-pj { border: 1px dashed rgba(100,116,139,.45); border-radius: var(--ext-rayon); padding: .7rem .8rem; background: rgba(255,255,255,.55); transition: border-color .15s, background .15s; }
.ext-pj.ext-pj-survol { border-color: var(--nc-accent); background: rgba(37,99,235,.06); }
.ext-pj-aide { font-size: .8rem; color: #64748b; margin-left: .5rem; }
.ext-pj-liste { list-style: none; margin: 0; padding: 0; }
.ext-pj-liste:not(:empty) { margin-top: .6rem; }
.ext-pj-liste li { display: flex; align-items: center; gap: .5rem; font-size: .86rem; padding: .3rem 0; border-top: 1px solid rgba(100,116,139,.15); }
.ext-pj-liste li > i { color: #94a3b8; }
.ext-pj-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ext-pj-taille { color: #64748b; font-size: .78rem; white-space: nowrap; }
.ext-pj-retirer { border: 0; background: none; color: #94a3b8; cursor: pointer; padding: 0 .2rem; }
.ext-pj-retirer:hover { color: #dc2626; }
.ext-pj-ticket { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: var(--ext-rayon); background: rgba(241,245,249,.8); }
.ext-pj-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; margin-top: .5rem; }
.ext-pj-carte { background: #fff; border-radius: calc(var(--ext-rayon) * .7); overflow: hidden; box-shadow: 0 1px 3px rgba(15,23,42,.12); display: flex; flex-direction: column; }
.ext-pj-apercu { display: flex; align-items: center; justify-content: center; height: 96px; background: #f1f5f9; color: #94a3b8; font-size: 2.4rem; text-decoration: none; overflow: hidden; }
.ext-pj-apercu img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.ext-pj-apercu:hover img { transform: scale(1.05); }
.ext-pj-pdf { color: #dc2626; }
.ext-pj-pied { display: flex; align-items: center; gap: .4rem; padding: .35rem .5rem; font-size: .78rem; }
.ext-pj-pied span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ext-pj-pied a { color: #64748b; }
.ext-pj-pied a:hover { color: var(--nc-accent); }
.ext-pj-mini { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; flex: none; }
.ext-pj-liste .fa-file-pdf { color: #dc2626; }
/* Visionneuse PDF */
.ext-visionneuse { position: fixed; inset: 0; z-index: 9999; background: rgba(10,10,12,.88); display: flex; flex-direction: column; padding: 1rem; opacity: 0; transition: opacity .2s; }
.ext-visionneuse.ext-ouverte { opacity: 1; }
.ext-visionneuse-barre { display: flex; align-items: center; gap: .75rem; color: #fff; padding: 0 .25rem .75rem; }
.ext-visionneuse-barre > i { color: #f87171; }
.ext-visionneuse-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ext-visionneuse-bouton { border: 0; background: rgba(255,255,255,.12); color: #fff; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.ext-visionneuse-bouton:hover { background: rgba(255,255,255,.25); color: #fff; }
.ext-visionneuse-cadre { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; border: 0; border-radius: 8px; background: #fff; }

/* Mail d'origine repliable (tickets créés depuis un mail) */
details.ext-message > summary { cursor: pointer; list-style: none; }
details.ext-message > summary::-webkit-details-marker { display: none; }
details.ext-message > summary::after { content: "\25B8"; margin-left: .4rem; }
details.ext-message[open] > summary::after { content: "\25BE"; }