/* Ajustements GestInfo sur Tabler 1.4.0 — préfixe technique dla, chargé après Tabler. */

/* ── Lisibilité des pages denses ──────────────────────────────────────────────
   Tabler pose un fond de page à peine plus gris que le blanc des cartes (#f9fafb contre #fff).
   Sur une fiche d'équipement, qui aligne dix blocs, les cartes se fondent les unes dans les autres
   et il faut relire pour savoir où l'une finit. Le fond de page recule d'un cran, et chaque carte
   a une bordure visible et une ombre courte. Le pied de carte, où se tiennent les gestes, garde un
   gris léger ; la hiérarchie entre cartes est réglée plus bas.

   Le gris plein (.dla-card-muted) reste réservé aux cartes de consultation — aperçu d'étiquette,
   historique —, celles qu'on lit sans y agir. Le blanc marque ce sur quoi on travaille. */
:root {
	--tblr-body-bg: #eceff4;
	--dla-surface-muted: #f5f7fa;
	--dla-border: #dbe0e8;
}
.page-body,
.page-wrapper {
	background-color: var(--tblr-body-bg);
}

/* Cartes : une ombre courte les détache du fond, sans la double ligne de l'ombre Tabler sous la bordure. */
.card {
	--tblr-card-box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
	border-color: var(--dla-border);
}
/* ── Hiérarchie (25/09/2026) ─────────────────────────────────────────────────
   Toutes les cartes avaient le même poids : même bandeau gris en tête, même titre. Sur une page
   dense, l'œil ne savait plus où se poser. L'en-tête redevient blanc et compact — le titre situe,
   il ne crie pas —, le pied garde le gris : c'est là que se tiennent les gestes. */
.card > .card-header {
	background-color: transparent;
	border-color: var(--dla-border);
	padding-top: .75rem;
	padding-bottom: .75rem;
	min-height: 0;
}
.card > .card-header .card-title {
	font-size: .9375rem;
	font-weight: 600;
}
.card > .card-footer {
	background-color: var(--dla-surface-muted);
	border-color: var(--dla-border);
}

/* Une donnée se lit par sa valeur, pas par son libellé : « Inès Durand » avant « Porteur ». */
.card dl.row > dt {
	font-weight: 400;
	color: var(--tblr-secondary);
}
.card dl.row > dd {
	font-weight: 500;
	color: var(--tblr-body-color);
}

/* Un geste occasionnel (ajouter un composant, consigner une intervention) se déplie à la demande :
   ouvert en permanence, il pesait autant que ce qu'on vient lire. */
.dla-fold > summary {
	list-style: none;
	cursor: pointer;
	color: var(--tblr-primary);
	font-weight: 500;
}
.dla-fold > summary::-webkit-details-marker {
	display: none;
}
.dla-fold > summary::before {
	content: "+";
	display: inline-block;
	width: 1rem;
	font-weight: 600;
}
.dla-fold[open] > summary {
	margin-bottom: .75rem;
}
.dla-fold[open] > summary::before {
	content: "−";
}

/* En-tête d'une fiche : ce qu'on regarde en premier, donc plus grand que le reste. */
.dla-hero-title {
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
}
.dla-hero-status .badge {
	font-size: .875rem;
	padding: .4em .75em;
}

/* Bandeau de garantie : la première question devant une panne. Un filet de couleur le détache. */
.dla-coverage {
	border-left-width: 4px;
}
.dla-coverage.alert-success { border-left-color: var(--tblr-success); }
.dla-coverage.alert-secondary { border-left-color: var(--tblr-secondary); }
.dla-coverage .alert-heading {
	font-size: 1.0625rem;
}

/* ── Fiche : trois réponses en tuiles ────────────────────────────────────────
   Neutres : la hiérarchie tient à la taille, à la graisse et à l'espace. La couleur ne sert qu'à
   l'état, en pastille — une application sobre se lit mieux qu'une application bariolée. */
.dla-key {
	height: 100%;
}
/* Garantie : une teinte à peine posée, qui se lit sans crier. */
.dla-key-ok {
	background-color: #f4faf5;
	border-color: #d3e9d7;
}
.dla-key-ko {
	background-color: #fcf5f5;
	border-color: #efd5d5;
}
.dla-key-ok .dla-key-divider { border-top-color: #d3e9d7; }
.dla-key-ko .dla-key-divider { border-top-color: #efd5d5; }
.dla-key > .card-body {
	padding: 1.25rem 1.375rem;
}
.dla-key-value {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: #1d273b;
}
.dla-key-value a {
	color: inherit;
}
.dla-key-value a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.dla-key-sub {
	margin-top: .25rem;
	color: var(--tblr-secondary);
}
.dla-key-divider {
	margin: 1.1rem 0 .9rem;
	border-top: 1px solid var(--dla-border);
}
/* Le numéro qu'on compose devant une panne : on le lit de loin. */
.dla-phone {
	font-size: 1.1875rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: #1d273b;
	white-space: nowrap;
}
.dla-avatar {
	background: #eef1f5;
	color: #4b5567;
	font-weight: 600;
}

/* Pastille d'état : .status-dot de Tabler, seule touche de couleur. */
.dla-key-value .status-dot,
.dla-status .status-dot {
	flex: none;
}

.dla-chip {
	display: inline-flex;
	align-items: center;
	padding: .125rem .5rem;
	border: 1px solid var(--dla-border);
	border-radius: 4px;
	background: #fff;
	font-size: .8125rem;
	color: #4b5567;
}
.dla-status {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .4rem .8rem;
	border: 1px solid var(--dla-border);
	border-radius: 999px;
	background: #fff;
	font-weight: 500;
	color: #1d273b;
}

/* ── Types de bloc : une icône grise, toujours la même, et une mise en page propre ── */
/* Titre de bloc : pastille et libellé alignés. */
.dla-block > .card-header .card-title {
	display: flex;
	align-items: center;
}
.dla-block-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	margin-right: .6rem;
	border-radius: 6px;
	background: #f1f3f6;
	color: #5d6878;
}
.dla-block-icon .ti {
	font-size: .9375rem;
}
/* Photos : une table lumineuse, où les vignettes se détachent. */
.dla-block-photos > .card-body {
	background: #eef1f5;
}
/* Sur ce fond, la zone de dépôt blanche se détache nettement. */
.dla-block-photos .dla-upload .filepond--panel-root {
	background-color: #fff;
	border: 1px dashed #b9c1cd;
}
/* Étiquette : posée sur du papier. */
.dla-block-label > .card-body {
	background-color: #fbfbfc;
	background-image: radial-gradient(#dfe3e9 .6px, transparent .6px);
	background-size: 10px 10px;
}
/* Un corps de carte teinté épouse l'arrondi de la carte : sans cela, ses coins droits débordent
   sur le bas arrondi. */
.dla-block-photos > .card-body:last-child,
.dla-block-label > .card-body:last-child {
	border-bottom-left-radius: var(--tblr-card-inner-border-radius);
	border-bottom-right-radius: var(--tblr-card-inner-border-radius);
}
/* En-têtes anthracite, points de repère dans la page : on trouve le bloc sans le chercher, sans ajouter
   de couleur. Même teinte pour l'étiquette et les photos. */
.dla-block-label.card > .card-header,
.dla-block-photos.card > .card-header {
	background-color: #1d273b;
	border-bottom-color: #1d273b;
	border-top-left-radius: var(--tblr-card-inner-border-radius);
	border-top-right-radius: var(--tblr-card-inner-border-radius);
}
.dla-block-label > .card-header .card-title,
.dla-block-photos > .card-header .card-title,
.dla-block-photos > .card-header .card-actions {
	color: #fff;
}
.dla-block-label > .card-header .dla-block-icon,
.dla-block-photos > .card-header .dla-block-icon {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}
.dla-block-label > .card-header .btn {
	--tblr-btn-color: #fff;
	--tblr-btn-border-color: rgba(255, 255, 255, .35);
	--tblr-btn-hover-color: #fff;
	--tblr-btn-hover-bg: rgba(255, 255, 255, .1);
	--tblr-btn-hover-border-color: rgba(255, 255, 255, .6);
	--tblr-btn-active-bg: rgba(255, 255, 255, .15);
	--tblr-btn-active-color: #fff;
	color: #fff;
	border-color: rgba(255, 255, 255, .35);
	background: transparent;
}
/* Notes : une citation, filet à gauche. */
.dla-block-notes > .card-body {
	border-left: 2px solid #c9d0da;
	margin: .75rem 1.25rem;
	padding: 0 0 0 .9rem;
	color: #3f4a5c;
}
/* Cartes empilées d'une colonne de détail. */
.dla-stack > * + * {
	margin-top: 1rem;
}

/* Historique : une liste qu'on parcourt, pas des cartes dans une carte. */
.dla-card-muted .timeline-event-card {
	border: 0;
	background: transparent;
	box-shadow: none;
}
.dla-card-muted .timeline-event-card > .card-body {
	padding: .25rem 0 .25rem .25rem;
}

/* Carte de consultation : grise de bout en bout, en-tête compris. */
.dla-card-muted {
	background-color: var(--dla-surface-muted);
}
.dla-card-muted > .card-header,
.dla-card-muted > .card-footer {
	background-color: transparent;
}

/* À l'impression, le papier fait le contraste : tout revient au blanc. */
@media print {
	:root {
		--tblr-body-bg: #fff;
		--dla-surface-muted: #fff;
	}
	.card,
	.dla-card-muted,
	.card > .card-header,
	.card > .card-footer {
		background-color: #fff;
	}
}

/* Tableau en pied de carte : la dernière ligne n'ajoute pas sa bordure à celle de la carte. */
.card > .table-responsive:last-child > .card-table > tbody > tr:last-child > *,
.card > .card-table:last-child > tbody > tr:last-child > *,
.card > .dla-live-results:last-child > .table-responsive:last-child > .card-table > tbody > tr:last-child > * {
	border-bottom-width: 0;
}

/* Tableau suivi d'un pied de carte (pagination) : la bordure de la dernière ligne suffit. */
.card > .table-responsive + .card-footer,
.dla-live-results > .table-responsive + .card-footer {
	border-top-width: 0;
}

/* Filtrage en direct : résultats estompés pendant le chargement. */
.dla-live-results {
	transition: opacity 0.15s ease;
}
.dla-live-loading {
	opacity: 0.5;
	pointer-events: none;
}

/* Recherche globale de la barre supérieure. */
.dla-header-search {
	max-width: 28rem;
}

/* Colonne de texte d'une carte flex : peut rétrécir sans pousser l'icône. */
.min-w-0 {
	min-width: 0;
}

/* Logo (docs/logo/INTEGRATION.md) : SVG inline, nom en currentColor, symbole en --gi-accent. */
.gi-brand {
	display: inline-flex;
	color: #fff;
	--gi-accent: #4b93e8;
}
.gi-brand svg {
	display: block;
	height: 32px;
	width: auto;
}
.gi-brand-light {
	color: #1a2433;
	--gi-accent: #206bc4;
}
.gi-brand-lg svg {
	height: 44px;
}
/* Survol : le logo garde ses couleurs (Tabler passerait le nom en couleur de lien). */
.gi-brand:hover,
.gi-brand:focus {
	color: #fff;
	text-decoration: none;
}
.gi-brand-light:hover,
.gi-brand-light:focus {
	color: #1a2433;
}

/* Textes courts centrés : lignes équilibrées, pas de mot seul sur la dernière ligne. */
.dla-balance {
	text-wrap: balance;
}

/* Commentaire interne d'une demande : fond ambré, texte lisible. */
.dla-comment-internal {
	background-color: #fff8e6;
}

/* Roadmap d'un projet : sélecteur de statut de largeur fixe, pour aligner les étapes */
.dla-step-status .form-select { width: 8.5rem; }

/* Texte saisi sur plusieurs lignes, affiché tel quel (description d'un projet) */
.dla-prewrap { white-space: pre-line; }

/* Compteurs du menu (tickets nouveaux, comptes en attente…) : en bout de ligne, alignés sur le libellé.
   Tabler place par défaut les badges des liens de navigation en pastille absolue, au coin de l'icône. */
.navbar .navbar-nav .badge.dla-nav-count {
	position: static;
	transform: none;
	margin-left: auto;
	/* Rouge Tabler (bg-red) : la couleur classique d'un compteur de choses à traiter. */
	font-weight: 600;
}

/* Application installée sur iPhone (CDC § 4.10), comme une application native : la barre d'état est
   translucide et la page passe dessous. Tout ce qui s'y trouve est bleu marine — la marge réservée
   à l'heure et à la batterie (zone sûre fournie par iOS), le fond du document pour le rebond en haut
   de page, et le menu, collé en haut au défilement : le fondu qu'iOS dessine sous sa barre se fait
   alors bleu sur bleu. Sur les côtés, la zone sûre couvre l'encoche en paysage ; ailleurs, elle vaut 0. */
.navbar-vertical { padding-top: env(safe-area-inset-top); }
.page { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
@media (display-mode: standalone) {
	/* iOS 26 teinte son fondu sous la barre d'état avec le fond du body : bleu marine, pas gris clair.
	   Le contenu garde son fond clair (.page-wrapper), qui descend jusqu'en bas de l'écran même sur une
	   page courte — sinon le bleu du fond apparaissait sous le pied de page. */
	html, body { background-color: #1d273b; }
	.page { min-height: 100vh; min-height: 100dvh; }
}
@media (display-mode: standalone) and (max-width: 991.98px) {
	/* Le fondu d'iOS déborde de quelques points sous la zone sûre : une marge en plus, pour que le
	   logo et le bouton du menu passent en dessous. Une bande bleu marine fixe tient la place de la
	   barre d'état au défilement (le menu n'est plus collé : la ligne Scanner, cloche, compte passait
	   dessous). */
	.navbar-vertical { padding-top: calc(env(safe-area-inset-top) + 14px); }
	body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: #1d273b; z-index: 1100; }
}

/* Sur téléphone et dans l'application installée — l'ordinateur n'est pas touché :
   - les codes (DLA-…, n° de série) en gras : la chasse fixe du système, SF Mono sur iPhone, est
     dessinée fine et se lit mal sur un petit écran, alors que c'est ce qu'on vient chercher ;
   - le pied de page centré, comme dans une application. */
@media (display-mode: standalone), (pointer: coarse) {
	.font-monospace { font-weight: 600; }
	.footer .container-xl { text-align: center; }
}

/* Téléphone (moins de 576 px) : une seule règle pour les actions, comme dans une application — chacune
   sur toute la largeur, les unes sous les autres, l'action principale en haut (elle est la dernière
   dans la page, à droite sur ordinateur), l'action destructrice en bas.
   - .dla-actions : un groupe d'actions posé dans le contenu (bloc « À vérifier »…) ;
   - pied de carte fait de boutons (formulaires) ; la cloche garde le sien sur une ligne ;
   - actions de page (en-tête) : sous le titre, à parts égales, avec leur libellé ;
   - fenêtre de confirmation.
   Les boutons accolés à un champ, les boutons-icônes et les petits boutons des listes ne bougent pas. */
@media (max-width: 575.98px) {
	.dla-actions,
	.card-footer.d-flex:not(.dla-bell-menu *):has(> .btn:not(.btn-icon):not(.btn-sm), > form > .btn:not(.btn-icon):not(.btn-sm)),
	.dla-dialog-actions {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: .5rem;
		width: 100%;
		margin-left: 0 !important;
	}
	.dla-actions > .btn,
	.dla-actions > form,
	.dla-actions > form > .btn,
	.card-footer.d-flex:not(.dla-bell-menu *) > .btn:not(.btn-icon):not(.btn-sm),
	.card-footer.d-flex:not(.dla-bell-menu *) > form,
	.card-footer.d-flex:not(.dla-bell-menu *) > form > .btn:not(.btn-icon):not(.btn-sm),
	.dla-dialog-actions > .btn {
		width: 100%;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	/* Actions de page : l'action principale (bouton plein) seule sur sa ligne, en premier ; les autres
	   dessous, à parts égales, leur libellé sur deux lignes plutôt que de déborder. */
	.page-header .col-auto.ms-auto { flex: 0 0 100%; max-width: 100%; }
	.page-header .btn-list { flex-wrap: wrap; }
	.page-header .btn-list > .btn { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.25; }
	.page-header .btn-list > .btn-primary { order: -1; flex-basis: 100%; }
	.page-header .btn-list > .btn .d-none.d-sm-inline { display: inline !important; }
	/* « Confier à quelqu'un » : un bouton d'action comme les autres, et sa note centrée dessous. */
	.dla-assign { text-align: center; }
	.dla-assign > .btn { width: 100%; --tblr-btn-padding-y: .5rem; --tblr-btn-padding-x: 1rem; --tblr-btn-font-size: .875rem; }
	/* Étiquette : à l'échelle réelle (38 mm), elle se perdait ; agrandie sur la largeur du bloc, centrée,
	   son texte dessous. */
	.dla-label-preview { flex-direction: column; text-align: center; }
	.dla-label-preview > .dla-label-standard { zoom: 2; }
	/* Listes (.dla-table-cards) : on garde le tableau, lu en colonnes, et on le fait glisser au doigt.
	   Chaque colonne a une largeur minimale lisible, la colonne principale (celle sans data-label : nom,
	   intitulé) davantage ; le tableau dépasse alors de l'écran et son conteneur défile en largeur.
	   (28/09/2026 : les lignes en cartes cassaient la lecture en colonnes.) */
	.dla-table-cards td, .dla-table-cards th { min-width: 8.5rem; }
	.dla-table-cards td:not([data-label]):not(.dla-card-actions):not(.dla-card-select) { min-width: 14rem; }
	.dla-table-cards td.dla-card-select, .dla-table-cards th.w-1, .dla-table-cards td.dla-card-actions { min-width: 0; }
	/* Colonne courte (un numéro de port) : pas besoin de la largeur d'une colonne de texte. */
	.dla-table-cards .dla-col-narrow { min-width: 4.5rem; }
	/* Fiche équipement : l'état à gauche, « Signaler un problème » sur toute la largeur. */
	.dla-hero-aside { width: 100%; justify-content: flex-start !important; margin-left: 0 !important; }
	.dla-hero-aside > .btn { width: 100%; margin-left: 0 !important; }
}

/* Tirer pour recharger (pull-refresh.js), à la manière d'iOS : l'indicateur d'activité natif — une roue
   de 8 rayons, sans fond — dans l'espace bleu marine que découvre le contenu en descendant. Les rayons
   apparaissent un à un pendant qu'on tire ; relâchée au seuil, la roue tourne par crans, traînée
   dégradée comme sur iPhone. */
.dla-pull {
	position: fixed;
	left: 50%;
	top: calc(env(safe-area-inset-top) + 6px);
	width: 28px;
	height: 28px;
	margin-left: -14px;
	z-index: 1090;
	opacity: 0;
	pointer-events: none;
	color: rgba(255, 255, 255, .85);
}
.dla-pull svg { width: 100%; height: 100%; display: block; }
.dla-pull line { stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; opacity: 0; }
.dla-pull.is-loading svg { animation: dla-spokes .8s steps(8) infinite; }
.dla-pull.is-loading line { opacity: var(--trail); }
@keyframes dla-spokes { to { transform: rotate(360deg); } }

/* La barre de debug de Wheels (développement) sert au poste du développeur : ni dans l'application
   installée, ni sur un écran tactile, où elle masque le bas de la page sans pouvoir se fermer. */
@media (display-mode: standalone), (pointer: coarse) {
	#wheels-debugbar { display: none !important; }
}

/* Scanner (CDC § 4.10) : l'image de la caméra, au format paysage, avec un cadre de visée discret. */
.dla-scanner-view { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--tblr-border-radius); background: #1d273b; }
.dla-scanner-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.dla-scanner-frame { position: absolute; inset: 18% 12%; border: 2px solid rgba(255, 255, 255, .8); border-radius: 12px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .25); pointer-events: none; }
.dla-scan-button { color: inherit; }
/* Téléphone : l'icône du scan à l'aplomb de celle du menu (même bord gauche, 14 px), la marge
   intérieure du bouton la décalait de 11 px. */
@media (max-width: 575.98px) {
	.dla-scan-button { padding-left: 5px; }
}
/* Le bouton de scan accolé au champ de l'accueil : l'allure de l'icône d'origine, et la main au survol. */
.dla-scan-addon { cursor: pointer; }
/* Bouton de scan accolé à un champ de code : l'allure d'un complément du champ, pas d'un bouton d'action. */
.dla-scan-field { border-color: var(--tblr-border-color); color: var(--tblr-secondary); background: var(--tblr-bg-surface); }
.dla-scan-field:hover { color: var(--tblr-primary); }
.dla-scan-addon:hover { color: var(--tblr-primary); }
/* Sur téléphone, le champ de l'accueil tient son texte : taille normale (16 px, sous laquelle l'iPhone
   zoomerait au toucher) et bouton « Ouvrir » réduit à sa flèche. */
@media (max-width: 575.98px) {
	.input-group-lg.dla-home-search > .form-control { font-size: 1rem; padding-left: .25rem; }
	.input-group-lg.dla-home-search > .input-group-text { padding-left: .75rem; padding-right: .5rem; }
}

/* La cloche (CDC § 5.8) : menu déroulant de largeur fixe, liste bornée en hauteur ; une notification
   non lue se distingue par un fond à peine teinté et un point rouge, pas par une couleur criarde. */
.dla-bell-menu { width: 24rem; max-width: calc(100vw - 2rem); }
/* Téléphone : la cloche est à gauche de l'en-tête ; sa liste prend la largeur de l'écran, marges et
   zones de sécurité comprises, sous l'en-tête (top posé par notifications.js). */
@media (max-width: 991.98px) {
	.dla-bell-menu.show {
		position: fixed;
		top: var(--dla-bell-top, 4rem);
		left: max(1rem, env(safe-area-inset-left));
		right: max(1rem, env(safe-area-inset-right));
		width: auto;
		max-width: none;
	}
	/* La flèche pointe sur la cloche, où qu'elle soit dans l'en-tête (position posée par notifications.js). */
	.dla-bell-menu.show.dropdown-menu-arrow::before {
		left: var(--dla-bell-arrow, .75rem);
		right: auto;
	}
}
.dla-bell-list { max-height: 26rem; overflow-y: auto; }
.list-group-item.dla-unread { background: var(--tblr-bg-surface-secondary); }
/* Un enfant flex qui doit pouvoir rétrécir, pour que son texte se coupe au lieu de déborder. */
.dla-min-w-0 { min-width: 0; }

/* Toutes les pastilles dans une même colonne : celle d'une entrée simple laisse la place de la flèche
   des groupes, et la flèche d'un groupe se range juste après sa pastille. */
.navbar .navbar-nav .nav-link:not(.dropdown-toggle) .badge.dla-nav-count {
	margin-right: 1.25rem;
}
.navbar .navbar-nav .nav-link.dropdown-toggle:has(.badge.dla-nav-count:not(.d-none))::after {
	margin-left: .75rem;
}
.navbar .navbar-nav .dropdown-item .badge.dla-nav-count {
	margin-right: 1.25rem;
}

/* Galerie de photos d'un équipement (CDC § 5.2) : vignettes de repérage, petites et régulières —
   la photo se regarde en grand dans la lightbox, pas dans la grille. Les colonnes ne s'étirent pas :
   quatre photos dans une colonne étroite gardent la taille qu'elles ont sur une page large. */
.dla-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(5rem, 6rem));
	gap: 0.75rem;
	justify-content: start;
}
.dla-gallery-item {
	position: relative;
	margin: 0;
}
.dla-gallery-item img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--tblr-border-radius);
	background-color: var(--dla-surface-muted);
	transition: transform 0.15s ease-in-out;
}
.dla-gallery-item a:hover img,
.dla-gallery-item a:focus img {
	transform: scale(1.04);
}

/* Retrait d'une photo : la croix mord sur le coin de la vignette pour se détacher de l'image, quelle
   que soit la photo — un coin clair avalerait un bouton discret. */
.dla-gallery-remove {
	position: absolute;
	top: -0.4rem;
	right: -0.4rem;
	line-height: 0;
}
.dla-gallery-remove .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	height: 1.4rem;
	min-width: 0;
	min-height: 0;
	aspect-ratio: 1;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background-color: var(--tblr-danger);
	color: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.dla-gallery-remove .btn:hover,
.dla-gallery-remove .btn:focus {
	background-color: #b42318;
	color: #fff;
}
.dla-gallery-remove .btn i {
	font-size: 0.8rem;
}

/* Lightbox : la photo en grand, au-dessus de la page assombrie. Écrite à la main plutôt qu'empruntée
   à une bibliothèque — il s'agit d'afficher une image, de passer à la suivante et de fermer. */
.dla-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1080;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3.5rem 1rem 4.5rem;
	background-color: rgba(15, 23, 42, 0.88);
}
.dla-lightbox[hidden] {
	display: none;
}
.dla-lightbox img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: var(--tblr-border-radius);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
.dla-lightbox-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1.25rem;
	text-align: center;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.875rem;
}
.dla-lightbox button {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.14);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}
.dla-lightbox button:hover,
.dla-lightbox button:focus-visible {
	background-color: rgba(255, 255, 255, 0.3);
	outline: none;
}
.dla-lightbox-close {
	top: 1rem;
	right: 1rem;
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1.25rem;
}
.dla-lightbox-prev,
.dla-lightbox-next {
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
	font-size: 1.5rem;
}
.dla-lightbox-prev { left: 1rem; }
.dla-lightbox-next { right: 1rem; }
.dla-lightbox-single .dla-lightbox-prev,
.dla-lightbox-single .dla-lightbox-next { display: none; }

/* Page figée derrière la lightbox : on ne fait pas défiler ce qu'on ne voit plus. */
body.dla-lightbox-open {
	overflow: hidden;
}

/* Zone d'envoi : elle ne doit pas prendre plus de place que la galerie qu'elle complète. */
.dla-upload .filepond--root {
	margin-bottom: 0;
}
.dla-upload .filepond--panel-root {
	background-color: var(--tblr-bg-surface-secondary);
	border: 1px dashed var(--tblr-border-color);
}
/* Zone de dépôt : une image, puis l'invite — on comprend ce qu'on y pose avant de lire. */
.dla-upload .filepond--drop-label {
	min-height: 6.5rem;
}
.dla-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .4rem;
}
.dla-drop .ti {
	font-size: 1.75rem;
	color: #8a94a3;
}
/* « Aucune photo » : une phrase, pas une vignette de la grille. */
.dla-gallery > p {
	grid-column: 1 / -1;
}

/* Texte d'exemple d'un champ : il montre le format attendu, il ne doit jamais se lire comme une
   valeur déjà saisie — en chasse fixe surtout, où « 192.168.1.50 » a tout d'une vraie adresse.
   Révisé le 28/09/2026 : le gris de bordure (#dde1e8) ne se lisait plus sur un téléphone. Une
   indication en texte prend un gris lisible ; un exemple en chasse fixe reste un cran plus clair,
   lisible sans passer pour une saisie. */
.form-control::placeholder,
.form-control::-webkit-input-placeholder,
textarea::placeholder {
	color: #98a1ae;
	opacity: 1;
}
.form-control.font-monospace::placeholder,
.form-control.font-monospace::-webkit-input-placeholder {
	color: #bcc3cd;
}

/* Élévation d'une baie (CDC § 4.7) : une colonne de U, du haut vers le bas, à l'image de ce qu'on a
   sous les yeux en salle. Un U occupé porte son équipement ; un U libre reste en creux, avec son
   numéro — c'est ce qu'on vient chercher quand on prépare l'arrivée d'un nouveau matériel. */
/* Miniature de la façade dans l'élévation : chaque port en pastille, à la couleur de son état. */
.dla-mini {
	flex: 0 0 auto;
	display: inline-grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--dla-mini-rows, 1), .5rem);
	gap: 2px;
	padding: 3px 5px;
	border-radius: 3px;
	background: #d7dce2;
}
.dla-mini-panel,
.dla-mini-power {
	background: #2a3038;
}
.dla-mini-port {
	display: block;
	width: .5rem;
	height: .5rem;
	border-radius: 1px;
}
.dla-mini-power .dla-mini-port {
	border-radius: 50%;
}
.dla-mini-panel .dla-port-free,
.dla-mini-power .dla-port-free {
	background: #4a5563;
}
/* ── Baie sur rails (26/09/2026) ─────────────────────────────────────────────
   Telle qu'on la voit devant elle : deux montants numérotés, l'intérieur sombre, chaque équipement
   comme une façade claire vissée entre eux, les étagères et ce qui est posé dessus. On la montre à
   quelqu'un qu'on guide à distance : il reconnaît ce qu'il a sous les yeux. */
.dla-rackframe {
	--dla-u: 1.9rem;
	display: flex;
	flex-direction: column;
	padding: .5rem 0;
	border-radius: 6px;
	background: #1c2127;
	box-shadow: inset 0 0 0 1px #0f1317;
}
.dla-rackrow {
	display: grid;
	grid-template-columns: 2rem 1fr 2rem;
	min-height: calc(var(--dla-rack-units, 1) * var(--dla-u));
}
/* Montant : le numéro du U et ses trous de fixation. */
.dla-rail {
	display: flex;
	flex-direction: column;
	background:
		radial-gradient(circle at 50% 22%, #1c2127 .12rem, transparent .13rem) 0 0 / 100% var(--dla-u),
		radial-gradient(circle at 50% 78%, #1c2127 .12rem, transparent .13rem) 0 0 / 100% var(--dla-u),
		linear-gradient(90deg, #8c96a1, #b7bfc8 45%, #9aa4ae);
}
.dla-rail span {
	flex: 0 0 var(--dla-u);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .625rem;
	font-weight: 600;
	color: #20262d;
	font-variant-numeric: tabular-nums;
}
.dla-bay {
	display: flex;
	align-items: stretch;
	padding: 1px 3px;
	min-width: 0;
}
.dla-bay-free {
	align-self: center;
	padding-left: .6rem;
	font-size: .6875rem;
	color: #5c6672;
}
/* Façade vissée : claire, pleine largeur entre les rails. */
.dla-plate {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: 0 .6rem;
	border-radius: 2px;
	background: linear-gradient(180deg, #eef0f3, #dde1e6);
	box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #c3c9d0;
	min-width: 0;
	font-size: .8125rem;
}
.dla-plate-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dla-plate-name {
	color: #4f5a67;
	margin-left: .35rem;
}
/* Étagère : ce qu'elle porte debout, puis la planche. */
.dla-shelf {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
}
.dla-shelf-items {
	flex: 1 1 auto;
	display: flex;
	align-items: flex-end;
	gap: .35rem;
	padding: .25rem .4rem 0;
	min-width: 0;
}
.dla-shelf-item {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	min-width: 5.5rem;
	max-width: 11rem;
	padding: .3rem .45rem;
	border-radius: 3px 3px 0 0;
	background: linear-gradient(180deg, #e9ecf0, #d6dbe1);
	box-shadow: inset 0 1px 0 #fff;
	color: #1d273b;
	font-size: .75rem;
	text-decoration: none;
	overflow: hidden;
}
.dla-shelf-item:hover {
	background: #fff;
	text-decoration: none;
}
.dla-shelf-rank {
	align-self: flex-start;
	min-width: 1.1rem;
	padding: 0 .3rem;
	border-radius: 999px;
	background: #1d273b;
	color: #fff;
	font-size: .625rem;
	font-weight: 700;
	text-align: center;
}
.dla-shelf-name {
	color: #4f5a67;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dla-shelf-board {
	display: flex;
	align-items: center;
	gap: .5rem;
	height: .95rem;
	padding: 0 .6rem;
	border-radius: 1px;
	background: linear-gradient(180deg, #a9b2bc, #7f8994);
	font-size: .625rem;
	color: #1c2127;
}
.dla-shelf-board a {
	color: #1c2127;
	font-weight: 600;
}
.dla-rack-action {
	flex: 0 0 auto;
	opacity: 0;
	transition: opacity 0.15s ease-in-out;
}
.dla-rack-slot:hover .dla-rack-action,
.dla-rack-action:focus-within {
	opacity: 1;
}

/* Imprimée pour descendre en local technique : tout tient, rien ne se coupe au milieu d'un U. */
@media print {
	.dla-rack-slot {
		break-inside: avoid;
	}
	.dla-rack-action {
		display: none;
	}
}

/* Façade d'un équipement à ports (CDC § 4.8) : dessinée à l'image du matériel — boîtier clair, cages
   RJ45 avec leur encoche, rangée du haut retournée comme sur un switch posé en baie. Plus le dessin
   ressemble à ce qu'on a sous les yeux, moins il faut expliquer ce qu'on attend de celui qui
   intervient. */
.dla-face {
	background: linear-gradient(180deg, #f2f3f4, #dfe2e5);
	border: 1px solid #c7ccd1;
	border-radius: 8px;
	padding: .65rem .8rem;
	display: flex;
	align-items: stretch;
	gap: .9rem;
	box-shadow: inset 0 1px 0 #fff;
	overflow-x: auto;
}
.dla-face-brand {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .2rem;
	padding-right: .85rem;
	border-right: 1px solid #cdd2d7;
	min-width: 8rem;
}
.dla-face-brand .name { font-size: .75rem; color: #3b4652; font-weight: 600; line-height: 1.2; }
.dla-bank { display: flex; gap: .7rem; align-items: center; }
.dla-quad { display: grid; grid-auto-flow: column; grid-template-rows: auto auto auto auto; gap: .06rem .18rem; }
.dla-num { font-size: .5625rem; color: #5b6672; text-align: center; font-variant-numeric: tabular-nums; line-height: 1; }
.dla-port {
	width: 1.6rem;
	height: 1.35rem;
	background: #4a5563;
	border: 0;
	border-radius: 2px;
	padding: 0;
	position: relative;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.dla-port.top { clip-path: polygon(0 0, 32% 0, 32% 26%, 68% 26%, 68% 0, 100% 0, 100% 100%, 0 100%); }
.dla-port.bottom { clip-path: polygon(0 0, 100% 0, 100% 100%, 68% 100%, 68% 74%, 32% 74%, 32% 100%, 0 100%); }
.dla-port i { display: block; width: .5rem; height: .5rem; border-radius: 1px; background: #111820; }
.dla-port-asset { background: #2f6fb5; }
.dla-port-label { background: #7a5ea8; }
.dla-port-panel { background: #0f7a6d; }
.dla-port-uplink { background: #b98218; }
.dla-port-down { background: #9a3535; }
.dla-port-free { background: #4a5563; }
.dla-port-selected { box-shadow: 0 0 0 2px var(--tblr-primary), 0 0 0 4px rgba(32, 107, 196, .35); z-index: 2; }
.dla-poe { position: absolute; top: 1px; right: 2px; width: .3rem; height: .3rem; border-radius: 50%; background: #ffd043; }
.dla-port.top .dla-poe { top: auto; bottom: 1px; }
.dla-sfpzone { display: flex; gap: .25rem; padding-left: .7rem; margin-left: .2rem; border-left: 1px solid #cdd2d7; align-items: center; }
.dla-sfpcol { display: flex; flex-direction: column; gap: .06rem; align-items: center; }
.dla-sfp {
	width: 2.1rem;
	height: 1.35rem;
	background: #343d48;
	border: 0;
	border-radius: 2px;
	color: #aeb6bf;
	font-size: .5625rem;
	cursor: pointer;
}
/* Panneau, bandeau, boîtier : une rangée de ports, le détail propre à chacun dessous. */
.dla-row { display: grid; gap: .45rem .3rem; align-items: start; }
.dla-cell { display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 1.6rem; }
.dla-jack { width: 1.35rem; height: 1.2rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 68% 100%, 68% 80%, 32% 80%, 32% 100%, 0 100%); }
.dla-jack i { width: .45rem; height: .4rem; }
.dla-outlet { font-size: .5625rem; line-height: 1; font-family: var(--tblr-font-monospace); color: #c8cfd8; white-space: nowrap; }
.dla-portname { font-size: .5625rem; line-height: 1; font-weight: 600; color: #5b6672; text-transform: uppercase; letter-spacing: .03em; }
/* Panneau de brassage : plaque sombre, comme en baie. */
.dla-face-panel { background: linear-gradient(180deg, #2f363f, #242a31); border-color: #1b2026; box-shadow: inset 0 1px 0 #3d4550; }
.dla-face-panel .dla-face-brand { border-right-color: #3d4550; }
.dla-face-panel .dla-face-brand .name { color: #e6e9ed; }
.dla-face-panel .dla-face-code { color: #9aa4b2; }
.dla-face-panel .dla-num { color: #9aa4b2; }
.dla-face-panel .dla-port-free { background: #11161b; }
.dla-face-panel .dla-jack i { background: #c9a227; }
/* Bandeau de prises : prises rondes, deux broches. */
.dla-face-power { background: linear-gradient(180deg, #2a2f35, #1f2328); border-color: #16191d; }
.dla-face-power .dla-face-brand { border-right-color: #3a4048; }
.dla-face-power .dla-face-brand .name { color: #e6e9ed; }
.dla-face-power .dla-face-code, .dla-face-power .dla-num { color: #9aa4b2; }
.dla-socket { width: 1.55rem; height: 1.55rem; border-radius: 50%; gap: .3rem; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35); }
.dla-socket i { width: .22rem; height: .22rem; border-radius: 50%; background: #0c0f12; }
.dla-face-power .dla-port-free { background: #3a4048; }
/* Boîtier (routeur, pare-feu) : boîtier clair, ports nommés au-dessus. */
.dla-face-appliance .dla-jack { width: 1.6rem; height: 1.35rem; }
.dla-face-code { color: var(--tblr-secondary); }

.dla-legend { display: flex; flex-wrap: wrap; gap: .6rem 1rem; font-size: .75rem; color: var(--tblr-secondary); margin-top: .75rem; }
.dla-legend i { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; margin-right: .3rem; vertical-align: -1px; font-style: normal; }
.dla-legend-poe { background: #ffd043; border-radius: 50% !important; }

@media print {
	.dla-face { break-inside: avoid; }
	[data-port-form] { display: none; }
}

/* Fiche d'un équipement : les cartes secondaires en colonnes qui se remplissent d'elles-mêmes. Avec
   trois colonnes de largeur fixe, un switch sans caractéristiques ni photos laissait un grand vide à
   droite pendant que la colonne du milieu s'allongeait. Ici, chaque carte se pose sous la précédente,
   dans la colonne la plus courte. */
.dla-masonry {
	columns: 3 21rem;
	column-gap: 1rem;
	/* Même respiration que l'espacement des cartes : sans cela, la grille colle au bloc du dessus. */
	margin-top: 1rem;
}
.dla-masonry > .card,
.dla-masonry > .alert {
	/* Safari n'honore `break-inside` qu'à moitié dans une grille en colonnes : il coupe la carte entre
	   deux colonnes et laisse le reste en tête de la suivante, ce qui donne une colonne décalée. Le
	   bloc en ligne, lui, est insécable pour tous les moteurs — c'est le remède connu. */
	display: inline-block;
	vertical-align: top;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	/* Ceinture : une marge haute oubliée sur une carte décalerait toute sa colonne. */
	margin-top: 0 !important;
	margin-bottom: 1rem;
	width: 100%;
}
@media (max-width: 767.98px) {
	.dla-masonry { columns: 1; }
}

/* Façade lue par VLAN (CDC § 4.9) : la couleur ne dit plus ce qui est branché mais le réseau porté.
   Un port sans VLAN reste en creux — c'est justement ce qu'on cherche du regard. */
.dla-face-vlan .dla-port,
.dla-face-vlan .dla-sfp {
	background: #4a5563;
}
.dla-face-vlan .dla-port[data-vlan="azure"] { background: #206bc4; }
.dla-face-vlan .dla-port[data-vlan="purple"] { background: #7a5ea8; }
.dla-face-vlan .dla-port[data-vlan="green"] { background: #2fb344; }
.dla-face-vlan .dla-port[data-vlan="orange"] { background: #d6702a; }
.dla-face-vlan .dla-port[data-vlan="red"] { background: #b42318; }
.dla-face-vlan .dla-port[data-vlan="secondary"] { background: #6b7280; }

.dla-legend .dla-vlan-azure { background: #206bc4; }
.dla-legend .dla-vlan-purple { background: #7a5ea8; }
.dla-legend .dla-vlan-green { background: #2fb344; }
.dla-legend .dla-vlan-orange { background: #d6702a; }
.dla-legend .dla-vlan-red { background: #b42318; }
.dla-legend .dla-vlan-secondary { background: #6b7280; }

/* VLANs taggés d'un port : des cases serrées, lues comme une suite de numéros. */
.dla-vlan-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.75rem;
}

/* ── Fenêtre de confirmation (26/09/2026) ─────────────────────────────────────
   Celle de l'application, jamais celle du navigateur : une question, une phrase d'explication, deux
   boutons. Neutre ; la couleur ne marque que la gravité — rouge pour ce qui supprime. */
.dla-dialog {
	position: fixed;
	inset: 0;
	z-index: 1080;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.dla-dialog[hidden] {
	display: none;
}
.dla-dialog-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(29, 39, 59, .45);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	animation: dla-dialog-fade .12s ease-out;
}
.dla-dialog-panel {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .25rem 1rem;
	width: min(28rem, 100%);
	padding: 1.5rem 1.5rem 1.25rem;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 20px 45px rgba(16, 24, 40, .22), 0 2px 6px rgba(16, 24, 40, .08);
	animation: dla-dialog-rise .14s ease-out;
}
.dla-dialog-icon {
	grid-row: 1 / 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: #eef1f5;
	color: #4b5567;
	font-size: 1.25rem;
}
.dla-dialog[data-tone="danger"] .dla-dialog-icon {
	background: #fbeaea;
	color: #c4312f;
}
.dla-dialog-title {
	margin: .45rem 0 .25rem;
	font-size: 1.0625rem;
	font-weight: 600;
	color: #1d273b;
}
.dla-dialog-text {
	margin: 0;
	color: var(--tblr-secondary);
}
.dla-dialog-actions {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	margin-top: 1.25rem;
}
/* « Annuler » reçoit le focus devant une suppression : un anneau le signale, sans en faire un bouton
   plein qui pèserait autant que l'action. */
.dla-dialog [data-dialog-cancel].btn:focus,
.dla-dialog [data-dialog-cancel].btn:focus-visible {
	background: transparent;
	color: #4b5567;
	box-shadow: 0 0 0 .2rem rgba(32, 107, 196, .2);
}
body.dla-dialog-open {
	overflow: hidden;
}
@keyframes dla-dialog-fade {
	from { opacity: 0; }
}
@keyframes dla-dialog-rise {
	from { opacity: 0; transform: translateY(6px) scale(.98); }
}
@media (prefers-reduced-motion: reduce) {
	.dla-dialog-backdrop,
	.dla-dialog-panel {
		animation: none;
	}
}

/* ── Onglets en tête de carte ──────────────────────────────────────────────────
   Un filet court sous tous les onglets ; l'onglet actif l'interrompt et s'ouvre sur la liste, sur le
   même blanc qu'elle. */
.card > .dla-tabs-header {
	padding-bottom: 0;
	background: var(--dla-surface-muted);
	border-bottom: 1px solid var(--dla-border);
}
/* La liste d'onglets de Tabler a son propre fond, qui recouvrait le filet de l'en-tête. */
.dla-tabs-header .card-header-tabs {
	margin-bottom: -1px;
	border-bottom: 0;
	background: transparent;
}
.dla-tabs-header .nav-link {
	/* Pile au niveau du filet : un pixel de plus, et les bords de l'onglet actif le dépassaient. */
	margin-bottom: 0;
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: 6px 6px 0 0;
	color: var(--tblr-secondary);
}
.dla-tabs-header .nav-link:hover {
	color: #1d273b;
}
.dla-tabs-header .nav-link.active {
	position: relative;
	z-index: 1;
	border-color: var(--dla-border);
	background: #fff;
	color: #1d273b;
}

/* Nouvelle version prête (pwa.js) : un bandeau en bas d'écran, au-dessus de tout, zone sûre comprise. */
.dla-update-banner {
	position: fixed;
	left: 50%;
	bottom: calc(env(safe-area-inset-bottom) + 1rem);
	transform: translateX(-50%);
	z-index: 1080;
	display: flex;
	align-items: center;
	gap: 1rem;
	width: max-content;
	max-width: calc(100vw - 2rem);
	padding: .75rem 1rem;
	border-radius: var(--tblr-border-radius-lg, 8px);
	background: #1d273b;
	color: #fff;
	box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .2);
}

/* Détail d'un port dans sa fenêtre (en dessous de 1200 px) : la carte du formulaire en occupe tout le
   corps, sans double bordure ; la croix de fermeture en haut à droite, sur l'en-tête de la carte. */
#dla-port-modal [data-port-form] { border: 0; box-shadow: none; margin: 0; }
.dla-port-modal-close { position: absolute; top: .9rem; right: 1rem; z-index: 2; }
/* Plein écran sur téléphone : la fenêtre laisse la place de la barre d'état et du bord bas de l'iPhone,
   sinon la croix passe sous l'heure et ne se touche plus. */
@media (max-width: 575.98px) {
	#dla-port-modal .modal-content { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
	#dla-port-modal .dla-port-modal-close { top: calc(env(safe-area-inset-top) + .9rem); }
}