@charset "ISO-8859-1";
/* =========================================================================
   PTAConnexion.css - Page de connexion PME-Pleiades
   Refonte AGS-SOFT Design System, variante 1c
   (bandeau sombre + carte chevauchante + CTA orange).

   A deployer dans : <racine>/<strNomCharte>/FStyles/PTAConnexion.css
   Consommee par   : PTAConnexion.jsp

   Cette feuille remplace integralement l'ancienne PTAConnexion.css.
   Les selecteurs de la page sont prefixes "pta" pour eviter toute
   collision avec les autres feuilles de la charte.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700&family=Inter:wght@400;500&display=swap');

/* -------------------------------------------------------------------------
   1. Facteur d'echelle global
   Toutes les dimensions de la page sont exprimees en multiples de --ui.
   A 1, on obtient exactement les valeurs de la maquette. Au-dela de 1440px
   de large, l'interface grandit par paliers pour rester lisible sur les
   ecrans 2K et plus, sans jamais changer les proportions.

   Note : sous Windows, un ecran 2K affiche en general a 125% ou 150%
   presente respectivement 2048 ou 1707 pixels CSS, d'ou ces seuils.
   ------------------------------------------------------------------------- */
:root { --ui: 1; }

@media (min-width: 1440px) { :root { --ui: 1.15; } }
@media (min-width: 1800px) { :root { --ui: 1.30; } }
@media (min-width: 2300px) { :root { --ui: 1.45; } }

/* -------------------------------------------------------------------------
   2. Tokens du design system AGS-SOFT
   Seuls les tokens reellement utilises par cet ecran sont repris ici.
   Reference complete : design-system/tokens/*.css du dossier de handoff.
   ------------------------------------------------------------------------- */
:root {
	/* Palette */
	--blue-100: #E1EFF7;
	--blue-400: #4DA1D3;
	--blue-600: #0179C0;
	--blue-700: #01639D;

	--gray-50:  #F8FAFC;
	--gray-100: #F1F5F9;
	--gray-200: #E2E8F0;
	--gray-400: #94A3B8;
	--gray-700: #334155;
	--gray-900: #0F172A;

	--cta:      #FF7A59;
	--cta-dark: #DB694D;
	--danger:   #DC2626;

	/* Roles */
	--color-brand:       var(--blue-600);
	--color-brand-hover: var(--blue-700);
	--color-cta:         var(--cta);
	--color-cta-hover:   var(--cta-dark);
	--color-cta-text:    var(--gray-900);

	--text-heading:   var(--gray-900);
	--text-body:      var(--gray-700);
	--surface-page:   var(--gray-50);
	--surface-card:   #FFFFFF;
	--surface-sunken: var(--gray-100);
	--border-default: var(--gray-200);
	--focus-ring:     var(--blue-100);

	/* Familles */
	--font-display: 'Plus Jakarta Sans', 'Segoe UI', Tahoma, sans-serif;
	--font-body:    'Inter', 'Segoe UI', Tahoma, Arial, sans-serif;

	/* Echelle typographique (valeurs de maquette x --ui) */
	--text-xs:   calc(12.5px * var(--ui));
	--text-sm:   calc(14px   * var(--ui));
	--text-base: calc(16px   * var(--ui));
	--text-lg:   calc(18px   * var(--ui));

	/* Rayons (valeurs de maquette x --ui) */
	--radius-md:   calc(12px * var(--ui));
	--radius-lg:   calc(14px * var(--ui));
	--radius-pill: 999px;

	/* Effets et mouvement */
	--shadow-focus: 0 0 0 3px var(--focus-ring);
	--duration-fast: 120ms;
	--ease-standard: cubic-bezier(.4, 0, .2, 1);

	/* ---- Dimensions de mise en page (valeurs de maquette x --ui) ---- */
	--header-h:    calc(190px * var(--ui));
	--header-padY: calc(28px  * var(--ui));
	--header-padX: calc(40px  * var(--ui));
	--logo-ags-h:  calc(26px  * var(--ui));

	--dial-size: calc(520px  * var(--ui));
	--dial-top:  calc(-210px * var(--ui));

	--card-w:     calc(430px * var(--ui));
	--card-side:  auto;
	--card-pull:  calc(-90px * var(--ui));
	--card-padT:  calc(34px  * var(--ui));
	--card-padX:  calc(38px  * var(--ui));
	--card-padB:  calc(30px  * var(--ui));
	--card-gap:   calc(24px  * var(--ui));
	--logo-pme-w: calc(176px * var(--ui));

	--label-gap:  calc(6px  * var(--ui));
	--field-padY: calc(10px * var(--ui));
	--field-padX: calc(14px * var(--ui));
	--btn-padY:   calc(14px * var(--ui));
	--btn-padX:   calc(28px * var(--ui));
}

/* -------------------------------------------------------------------------
   3. Base
   ------------------------------------------------------------------------- */
* { box-sizing: border-box; }

body.bodyConnexion {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	background: var(--surface-page);
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--text-body);
	-webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------------------------
   4. Bandeau d'en-tete + motif de cadran
   ------------------------------------------------------------------------- */
.ptaHeader {
	position: relative;
	height: var(--header-h);
	background: var(--gray-900);
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	padding: var(--header-padY) var(--header-padX);
}

/* Wordmark AGS-SOFT : hauteur fixe, largeur libre (ne jamais l'etirer). */
.ptaHeader__logo {
	position: relative;
	height: var(--logo-ags-h);
	width: auto;
	opacity: .85;
	border: 0;
}

/* Cadran : anneau de 60 graduations radiales, evide en son centre,
   debordant vers le haut du bandeau. Purement decoratif. */
.ptaDial {
	position: absolute;
	border-radius: 50%;
	color: var(--blue-400);
	width: var(--dial-size);
	height: var(--dial-size);
	left: 50%;
	top: var(--dial-top);
	transform: translateX(-50%);
	opacity: .35;
	background: repeating-conic-gradient(from 0deg, currentColor 0deg .55deg, transparent .55deg 6deg);
	-webkit-mask: radial-gradient(circle, transparent 0 62%, #000 62% 100%);
	        mask: radial-gradient(circle, transparent 0 62%, #000 62% 100%);
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   5. Carte de connexion
   Aucune marge basse : la maquette prevoit que la page tienne dans la
   fenetre, sans defilement. Un padding ici ferait apparaitre une barre de
   defilement, qui retrecit la zone utile et decale la carte.
   ------------------------------------------------------------------------- */
.ptaMain {
	display: block;
}

.ptaCard {
	position: relative;
	width: var(--card-w);
	margin: var(--card-pull) var(--card-side) 0;
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	padding: var(--card-padT) var(--card-padX) var(--card-padB);
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
	/* Pas d'ombre : la charte AGS-SOFT est une marque a cartes bordees. */
}

/* 176px (et non les 180px du handoff) : cette valeur avait ete mesuree sur le
   PNG d'origine, qui portait 8px de vide transparent sur son bord droit. Le
   SVG etant recadre au plus juste, 176px reproduisent exactement la taille du
   logo telle qu'elle apparait dans la maquette. */
.ptaCard__logo {
	width: var(--logo-pme-w);
	height: auto;
	display: block;
	margin: 0 auto;
	border: 0;
}

.ptaRule {
	height: 1px;
	background: var(--border-default);
}

/* -------------------------------------------------------------------------
   6. Message d'erreur d'authentification (MESSAGE_PAGE)
   ------------------------------------------------------------------------- */
.ptaError {
	font-size: var(--text-xs);
	line-height: 1.45;
	color: var(--danger);
	margin: 0;
}

/* MESSAGE_PAGE peut contenir du balisage historique (<b>, <font>...) :
   on le neutralise pour rester conforme a la maquette. */
.ptaError b,
.ptaError strong,
.ptaError font {
	font-weight: 500;
	color: inherit;
	font-size: inherit;
}

.ptaError a {
	color: var(--danger);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   7. Champs de formulaire
   ------------------------------------------------------------------------- */
.ptaField {
	display: block;
	font-size: var(--text-sm);
	color: var(--text-body);
}

.ptaField__label {
	display: block;
	margin-bottom: var(--label-gap);
	font-weight: 500;
}

.ptaField__input {
	width: 100%;
	padding: var(--field-padY) var(--field-padX);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 400;
	color: var(--text-heading);
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	outline: none;
	transition: border-color var(--duration-fast) var(--ease-standard),
	            box-shadow  var(--duration-fast) var(--ease-standard);
}

.ptaField__input:focus {
	border-color: var(--color-brand);
	box-shadow: var(--shadow-focus);
}

/* Etat erreur : ajouter la classe "is-error" sur l'input. */
.ptaField__input.is-error {
	border-color: var(--danger);
}

.ptaField__input.is-error:focus {
	box-shadow: 0 0 0 3px rgba(220, 38, 38, .15);
}

/* Etat verrouille pendant l'authentification.
   On utilise readonly (et non disabled) pour que les valeurs soient
   bien postees ; le rendu visuel est celui de l'etat desactive. */
.ptaField__input:disabled,
.ptaField__input[readonly] {
	background: var(--surface-sunken);
	color: var(--gray-400);
	cursor: not-allowed;
}

/* -------------------------------------------------------------------------
   8. Bouton primaire "Se connecter"
   L'orange CTA est reserve a l'action primaire : ne pas le reutiliser.
   ------------------------------------------------------------------------- */
.ptaSubmit {
	display: block;
	width: 100%;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-lg);
	line-height: 1.2;
	padding: var(--btn-padY) var(--btn-padX);
	background: var(--color-cta);
	color: var(--color-cta-text);
	border: none;
	border-radius: var(--radius-pill);
	cursor: pointer;
	-webkit-appearance: none;
	        appearance: none;
	transition: background var(--duration-fast) var(--ease-standard);
}

.ptaSubmit:hover:not(:disabled) {
	background: var(--color-cta-hover);
}

/* Anneau de focus conserve sur le bouton (accessibilite clavier). */
.ptaSubmit:focus-visible {
	outline: 2px solid var(--gray-900);
	outline-offset: 2px;
}

.ptaSubmit:disabled {
	background: var(--gray-200);
	color: var(--gray-400);
	cursor: not-allowed;
}

/* -------------------------------------------------------------------------
   9. Mobile - point de rupture a 640px
   Valeurs fixes : sur mobile l'echelle reste a 1.
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
	:root {
		--header-h:    150px;
		--header-padY: 22px;
		--header-padX: 24px;
		--logo-ags-h:  22px;

		--dial-size: 380px;
		--dial-top:  -170px;

		--card-w:     auto;
		--card-side:  16px;
		--card-pull:  -62px;
		--card-padT:  24px;
		--card-padX:  24px;
		--card-padB:  24px;
		--card-gap:   20px;
		--logo-pme-w: 147px;
	}
}

/* -------------------------------------------------------------------------
   10. Preferences utilisateur
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ptaField__input,
	.ptaSubmit { transition: none; }
}