/* ═══════════════════════════════════════════════════════
   BreVTT — auth.css
   Pages : inscription.html, connexion.html
   ═══════════════════════════════════════════════════════ */

/* ── Boutons header auth ─────────────────────────────── */
.btn_sm
{
	padding:                 7px 14px;
	font-size:               13px;
	border-radius:           var(--r_md);
	font-weight:             600;
	transition:              background .2s, color .2s, border-color .2s, transform .15s;
	white-space:             nowrap;
}

.btn_sm.active_auth
{
	box-shadow:              0 0 0 2px var(--vert_foret);
}

.btn_outline.btn_sm
{
	display:                 inline-flex;
	align-items:             center;
}

/* ── Layout principal ────────────────────────────────── */
.auth_layout
{
	min-height:              calc(100vh - var(--header_h) - 80px);
	display:                 grid;
	grid-template-columns:   1fr 1.2fr;
}

/* ── Panneau gauche (aside branding) ─────────────────── */
.auth_aside
{
	background:              var(--gris_fonce);
	position:                relative;
	overflow:                hidden;
}

.auth_aside_inner
{
	position:                relative;
	z-index:                 1;
	padding:                 var(--gap_xxl) var(--gap_xl);
	display:                 flex;
	flex-direction:          column;
	gap:                     var(--gap_lg);
	height:                  100%;
}

.auth_aside_logo
{
	font-family:             var(--font_titre);
	font-size:               32px;
	font-weight:             800;
	letter-spacing:          -0.5px;
}

.auth_aside_logo .logo_bre { color: rgba(255,255,255,.8); }
.auth_aside_logo .logo_vtt { color: var(--vert_clair); }

.auth_aside_title
{
	font-family:             var(--font_titre);
	font-size:               clamp(24px, 3vw, 36px);
	font-weight:             800;
	color:                   var(--blanc);
	letter-spacing:          -0.5px;
	line-height:             1.2;
	text-wrap:               balance;
}

.auth_aside_sub
{
	font-size:               15px;
	color:                   rgba(255,255,255,.6);
	line-height:             1.6;
	text-wrap:               pretty;
}

/* ── Liste des features ──────────────────────────────── */
.auth_features
{
	list-style:              none;
	display:                 flex;
	flex-direction:          column;
	gap:                     var(--gap_lg);
	margin-top:              var(--gap_sm);
}

.auth_features li
{
	display:                 flex;
	align-items:             flex-start;
	gap:                     var(--gap_md);
}

.auth_feat_icon
{
	font-size:               22px;
	flex-shrink:             0;
	width:                   44px;
	height:                  44px;
	display:                 flex;
	align-items:             center;
	justify-content:         center;
	background:              rgba(255,255,255,.07);
	border:                  1px solid rgba(255,255,255,.12);
	border-radius:           var(--r_md);
}

.auth_features li strong
{
	display:                 block;
	font-size:               14px;
	font-weight:             700;
	color:                   rgba(255,255,255,.9);
	margin-bottom:           2px;
}

.auth_features li p
{
	font-size:               13px;
	color:                   rgba(255,255,255,.5);
	line-height:             1.5;
}

/* ── Déco cercles ────────────────────────────────────── */
.auth_aside_deco
{
	position:                absolute;
	inset:                   0;
	pointer-events:          none;
}

.deco_circle
{
	position:                absolute;
	border-radius:           50%;
	opacity:                 .08;
}

.deco_c1
{
	width:                   400px;
	height:                  400px;
	background:              radial-gradient(circle, var(--vert_clair), transparent 70%);
	top:                     -120px;
	right:                   -120px;
}

.deco_c2
{
	width:                   300px;
	height:                  300px;
	background:              radial-gradient(circle, var(--ocre), transparent 70%);
	bottom:                  -80px;
	left:                    -60px;
}

.deco_c3
{
	width:                   200px;
	height:                  200px;
	background:              radial-gradient(circle, #a78bfa, transparent 70%);
	top:                     50%;
	left:                    50%;
	transform:               translate(-50%, -50%);
}

/* ── Panneau droit (formulaire) ──────────────────────── */
.auth_form_panel
{
	display:                 flex;
	align-items:             flex-start;
	justify-content:         center;
	padding:                 var(--gap_xxl) var(--gap_xl);
	background:              var(--blanc);
	overflow-y:              auto;
}

.auth_form_wrap
{
	width:                   100%;
	max-width:               520px;
	animation:               form_in .5s ease both;
}

@keyframes form_in
{
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── En-tête formulaire ──────────────────────────────── */
.auth_form_header
{
	margin-bottom:           var(--gap_xl);
}

.auth_form_title
{
	font-family:             var(--font_titre);
	font-size:               clamp(24px, 3vw, 32px);
	font-weight:             800;
	color:                   var(--gris_fonce);
	letter-spacing:          -0.5px;
	margin-bottom:           var(--gap_sm);
}

.auth_form_sub
{
	font-size:               14px;
	color:                   var(--gris_moyen);
}

.link_vert
{
	color:                   var(--vert_foret);
	font-weight:             600;
	text-decoration:         underline;
	transition:              color .2s;
}

.link_vert:hover { color: var(--vert_fonce); }

.link_sm { font-size: 13px; }

/* ── Sections fieldset ───────────────────────────────── */
.form_section
{
	border:                  none;
	padding:                 0;
	margin-bottom:           var(--gap_xl);
}

.form_section_legend
{
	display:                 flex;
	align-items:             center;
	gap:                     var(--gap_sm);
	font-size:               13px;
	font-weight:             700;
	color:                   var(--gris_moyen);
	text-transform:          uppercase;
	letter-spacing:          .6px;
	margin-bottom:           var(--gap_lg);
	padding-bottom:          var(--gap_sm);
	border-bottom:           1.5px solid var(--gris_bord);
	width:                   100%;
}

.legend_step
{
	display:                 inline-flex;
	align-items:             center;
	justify-content:         center;
	width:                   22px;
	height:                  22px;
	background:              var(--vert_foret);
	color:                   var(--blanc);
	border-radius:           50%;
	font-size:               11px;
	font-weight:             800;
	flex-shrink:             0;
}

/* ── Groupes et labels ───────────────────────────────── */
.form_group
{
	margin-bottom:           var(--gap_md);
	position:                relative;
}

.form_row
{
	display:                 grid;
	gap:                     var(--gap_md);
}

.form_row_2
{
	grid-template-columns:   1fr 1fr;
}

.form_row_between
{
	display:                 flex;
	align-items:             center;
	justify-content:         space-between;
	gap:                     var(--gap_md);
	margin-bottom:           var(--gap_lg);
}

.form_label
{
	display:                 block;
	font-size:               13px;
	font-weight:             600;
	color:                   var(--gris_fonce);
	margin-bottom:           6px;
}

.req  { color: var(--rouge_alerte); }
.opt  { color: var(--gris_moyen); font-weight: 400; font-size: 11px; }

/* ── Champs input ────────────────────────────────────── */
.input_wrap
{
	position:                relative;
}

.form_input
{
	width:                   100%;
	border:                  1.5px solid var(--gris_bord);
	border-radius:           var(--r_md);
	padding:                 10px 14px;
	font-size:               14px;
	font-family:             var(--font_corps);
	color:                   var(--gris_fonce);
	background:              var(--gris_clair);
	outline:                 none;
	transition:              border-color .2s, background .2s, box-shadow .2s;
	line-height:             1.5;
}

.form_input::placeholder { color: var(--gris_moyen); }

.form_input:focus
{
	border-color:            var(--vert_foret);
	background:              var(--blanc);
	box-shadow:              0 0 0 3px rgba(58,107,53,.1);
}

/* État valide */
.form_group.is_valid .form_input
{
	border-color:            var(--vert_clair);
	background:              var(--blanc);
}

/* État invalide */
.form_group.is_invalid .form_input
{
	border-color:            var(--rouge_alerte);
	background:              var(--blanc);
}

.form_group.is_invalid .form_input:focus
{
	box-shadow:              0 0 0 3px rgba(192,57,43,.1);
}

/* Icône coche valid */
.input_icon_valid
{
	position:                absolute;
	right:                   10px;
	top:                     50%;
	transform:               translateY(-50%);
	width:                   18px;
	height:                  18px;
	color:                   var(--vert_clair);
	opacity:                 0;
	transition:              opacity .2s, transform .2s;
	pointer-events:          none;
}

.input_icon_valid svg { width: 100%; height: 100%; }

.form_group.is_valid .input_icon_valid
{
	opacity:                 1;
	transform:               translateY(-50%) scale(1);
}

/* ── Bouton toggle password ──────────────────────────── */
.input_toggle_pwd
{
	position:                absolute;
	right:                   10px;
	top:                     50%;
	transform:               translateY(-50%);
	width:                   28px;
	height:                  28px;
	display:                 flex;
	align-items:             center;
	justify-content:         center;
	color:                   var(--gris_moyen);
	border-radius:           var(--r_sm);
	transition:              color .2s;
}

.input_toggle_pwd svg { width: 18px; height: 18px; }
.input_toggle_pwd:hover { color: var(--vert_foret); }

/* Quand toggle password est présent, on pousse le texte */
.input_wrap:has(.input_toggle_pwd) .form_input
{
	padding-right:           44px;
}

/* ── Textarea ────────────────────────────────────────── */
.textarea_wrap { position: relative; }

.form_textarea
{
	resize:                  vertical;
	min-height:              80px;
}

.textarea_count
{
	position:                absolute;
	bottom:                  8px;
	right:                   12px;
	font-size:               11px;
	color:                   var(--gris_moyen);
	pointer-events:          none;
	font-variant-numeric:    tabular-nums;
}

/* ── Hints et erreurs ────────────────────────────────── */
.form_hint
{
	display:                 block;
	font-size:               11px;
	color:                   var(--gris_moyen);
	margin-top:              4px;
}

.form_error
{
	display:                 block;
	font-size:               12px;
	color:                   var(--rouge_alerte);
	font-weight:             500;
	margin-top:              4px;
	min-height:              16px;
	opacity:                 0;
	transform:               translateY(-4px);
	transition:              opacity .2s, transform .2s;
}

.form_group.is_invalid .form_error
{
	opacity:                 1;
	transform:               translateY(0);
}

/* ── Jauge force mot de passe ────────────────────────── */
.pwd_strength_wrap
{
	display:                 flex;
	align-items:             center;
	gap:                     var(--gap_sm);
	margin-top:              6px;
}

.pwd_strength_bar
{
	flex:                    1;
	height:                  4px;
	background:              var(--gris_bord);
	border-radius:           2px;
	overflow:                hidden;
}

.pwd_strength_fill
{
	height:                  100%;
	border-radius:           2px;
	width:                   0%;
	transition:              width .3s ease, background .3s ease;
}

.pwd_strength_fill.force_0  { width: 0%;   background: transparent; }
.pwd_strength_fill.force_1  { width: 25%;  background: var(--rouge_alerte); }
.pwd_strength_fill.force_2  { width: 50%;  background: var(--ocre); }
.pwd_strength_fill.force_3  { width: 75%;  background: var(--ocre_clair); filter: saturate(2); }
.pwd_strength_fill.force_4  { width: 100%; background: var(--vert_foret); }

.pwd_strength_label
{
	font-size:               11px;
	font-weight:             600;
	min-width:               56px;
	text-align:              right;
	color:                   var(--gris_moyen);
	transition:              color .3s;
}

/* ── Checkboxes pratiques (chip) ─────────────────────── */
.checkbox_grid
{
	display:                 flex;
	flex-wrap:               wrap;
	gap:                     var(--gap_sm);
}

.checkbox_chip
{
	display:                 inline-flex;
	align-items:             center;
	gap:                     5px;
	padding:                 6px 14px;
	border:                  1.5px solid var(--gris_bord);
	border-radius:           100px;
	font-size:               13px;
	font-weight:             500;
	color:                   var(--gris_moyen);
	background:              var(--blanc);
	cursor:                  pointer;
	transition:              border-color .15s, color .15s, background .15s;
	user-select:             none;
}

.checkbox_chip input[type=checkbox]
{
	position:                absolute;
	opacity:                 0;
	width:                   0;
	height:                  0;
}

.checkbox_chip:has(input:checked)
{
	border-color:            var(--vert_foret);
	color:                   var(--vert_fonce);
	background:              var(--vert_pale);
}

.checkbox_chip:hover
{
	border-color:            var(--vert_clair);
	color:                   var(--vert_fonce);
}

/* ── Niveau radio ────────────────────────────────────── */
.niveau_radio_group
{
	display:                 grid;
	grid-template-columns:   repeat(4, 1fr);
	gap:                     var(--gap_sm);
}

.niveau_radio
{
	cursor:                  pointer;
}

.niveau_radio input[type=radio]
{
	position:                absolute;
	opacity:                 0;
	width:                   0;
	height:                  0;
}

.niveau_label
{
	display:                 flex;
	flex-direction:          column;
	align-items:             center;
	gap:                     6px;
	padding:                 10px var(--gap_sm);
	border:                  1.5px solid var(--gris_bord);
	border-radius:           var(--r_md);
	font-size:               12px;
	font-weight:             600;
	color:                   var(--gris_moyen);
	background:              var(--blanc);
	text-align:              center;
	transition:              border-color .15s, color .15s, background .15s;
}

.niveau_radio:has(input:checked) .niveau_label
{
	border-color:            var(--vert_foret);
	color:                   var(--vert_fonce);
	background:              var(--vert_pale);
}

.niveau_radio:hover .niveau_label
{
	border-color:            var(--vert_clair);
	color:                   var(--vert_fonce);
}

.niveau_dot
{
	width:                   10px;
	height:                  10px;
	border-radius:           50%;
}

.niveau_dot_1 { background: #66BB6A; }
.niveau_dot_2 { background: #FFA726; }
.niveau_dot_3 { background: #FF7043; }
.niveau_dot_4 { background: #B71C1C; }

/* ── CGU checkbox ────────────────────────────────────── */
.form_group_cgu
{
	margin-bottom:           var(--gap_lg);
}

.checkbox_cgu
{
	display:                 flex;
	align-items:             flex-start;
	gap:                     10px;
	cursor:                  pointer;
}

.checkbox_cgu input[type=checkbox]
{
	position:                absolute;
	opacity:                 0;
	width:                   0;
	height:                  0;
}

.cgu_check
{
	flex-shrink:             0;
	width:                   18px;
	height:                  18px;
	border:                  1.5px solid var(--gris_bord);
	border-radius:           5px;
	background:              var(--blanc);
	margin-top:              2px;
	transition:              border-color .15s, background .15s;
	position:                relative;
}

.cgu_check::after
{
	content:                 '';
	position:                absolute;
	top:                     2px;
	left:                    5px;
	width:                   5px;
	height:                  9px;
	border:                  2px solid var(--blanc);
	border-top:              none;
	border-left:             none;
	transform:               rotate(45deg) scale(0);
	transition:              transform .15s;
}

.checkbox_cgu:has(input:checked) .cgu_check
{
	background:              var(--vert_foret);
	border-color:            var(--vert_foret);
}

.checkbox_cgu:has(input:checked) .cgu_check::after
{
	transform:               rotate(45deg) scale(1);
}

.cgu_text
{
	font-size:               13px;
	color:                   var(--gris_moyen);
	line-height:             1.5;
}

/* ── Remember me ─────────────────────────────────────── */
.checkbox_remember
{
	display:                 flex;
	align-items:             center;
	gap:                     8px;
	font-size:               13px;
	color:                   var(--gris_moyen);
	cursor:                  pointer;
}

.checkbox_remember input[type=checkbox]
{
	position:                absolute;
	opacity:                 0;
	width:                   0;
	height:                  0;
}

.remember_check
{
	flex-shrink:             0;
	width:                   16px;
	height:                  16px;
	border:                  1.5px solid var(--gris_bord);
	border-radius:           4px;
	background:              var(--blanc);
	transition:              border-color .15s, background .15s;
	position:                relative;
}

.remember_check::after
{
	content:                 '';
	position:                absolute;
	top:                     1px;
	left:                    4px;
	width:                   4px;
	height:                  7px;
	border:                  2px solid var(--blanc);
	border-top:              none;
	border-left:             none;
	transform:               rotate(45deg) scale(0);
	transition:              transform .15s;
}

.checkbox_remember:has(input:checked) .remember_check
{
	background:              var(--vert_foret);
	border-color:            var(--vert_foret);
}

.checkbox_remember:has(input:checked) .remember_check::after
{
	transform:               rotate(45deg) scale(1);
}

/* ── Bouton submit ───────────────────────────────────── */
.btn_submit
{
	width:                   100%;
	display:                 flex;
	align-items:             center;
	justify-content:         center;
	gap:                     var(--gap_sm);
	background:              var(--vert_foret);
	color:                   var(--blanc);
	font-size:               15px;
	font-weight:             700;
	font-family:             var(--font_titre);
	padding:                 13px 24px;
	border-radius:           var(--r_lg);
	border:                  none;
	cursor:                  pointer;
	transition:              background .2s, transform .15s, box-shadow .2s;
	margin-bottom:           var(--gap_lg);
}

.btn_submit:hover
{
	background:              var(--vert_fonce);
	box-shadow:              0 4px 16px rgba(42,80,40,.25);
}

.btn_submit:active
{
	transform:               scale(0.98);
}

.btn_submit:disabled
{
	opacity:                 .6;
	cursor:                  not-allowed;
	transform:               none;
}

/* Spinner */
@keyframes spin
{
	to { transform: rotate(360deg); }
}

.spinner
{
	width:                   18px;
	height:                  18px;
	animation:               spin .8s linear infinite;
}

/* Bouton outline pleine largeur */
.btn_outline_full
{
	display:                 flex;
	align-items:             center;
	justify-content:         center;
	width:                   100%;
	padding:                 12px 24px;
	border:                  1.5px solid var(--gris_bord);
	border-radius:           var(--r_lg);
	font-size:               14px;
	font-weight:             600;
	color:                   var(--gris_fonce);
	background:              var(--blanc);
	transition:              border-color .2s, background .2s, color .2s;
}

.btn_outline_full:hover
{
	border-color:            var(--vert_foret);
	color:                   var(--vert_foret);
	background:              var(--vert_pale);
}

/* ── Séparateur ──────────────────────────────────────── */
.form_separator
{
	display:                 flex;
	align-items:             center;
	gap:                     var(--gap_md);
	margin-bottom:           var(--gap_lg);
	color:                   var(--gris_moyen);
	font-size:               12px;
}

.form_separator::before,
.form_separator::after
{
	content:                 '';
	flex:                    1;
	height:                  1px;
	background:              var(--gris_bord);
}

/* ── Alertes (connexion) ─────────────────────────────── */
.alert_error,
.alert_warning
{
	align-items:             flex-start;
	gap:                     var(--gap_sm);
	padding:                 12px 14px;
	border-radius:           var(--r_md);
	font-size:               13px;
	font-weight:             500;
	margin-bottom:           var(--gap_lg);
	line-height:             1.5;
	animation:               form_in .3s ease;
}

div[hidden].alert_error,
div[hidden].alert_warning
{
	display:                 none;
	
}

.alert_error svg,
.alert_warning svg
{
	width:                   18px;
	height:                  18px;
	flex-shrink:             0;
	margin-top:              1px;
}

.alert_error
{
	background:              var(--rouge_pale);
	border:                  1px solid rgba(192,57,43,.2);
	color:                   var(--rouge_alerte);
}

.alert_warning
{
	background:              var(--ocre_pale);
	border:                  1px solid rgba(193,123,47,.25);
	color:                   #7a4b10;
}

/* ── Panneau mot de passe oublié ─────────────────────── */
.forgot_panel
{
	animation:               form_in .3s ease;
}

.forgot_header
{
	display:                 flex;
	align-items:             center;
	gap:                     var(--gap_md);
	margin-bottom:           var(--gap_md);
}

.forgot_back
{
	display:                 flex;
	align-items:             center;
	gap:                     4px;
	font-size:               13px;
	font-weight:             600;
	color:                   var(--gris_moyen);
	padding:                 6px 10px 6px 6px;
	border-radius:           var(--r_sm);
	transition:              color .2s, background .2s;
}

.forgot_back svg { width: 16px; height: 16px; }
.forgot_back:hover { color: var(--vert_foret); background: var(--vert_pale); }

.forgot_title
{
	font-family:             var(--font_titre);
	font-size:               20px;
	font-weight:             800;
	color:                   var(--gris_fonce);
}

.forgot_sub
{
	font-size:               14px;
	color:                   var(--gris_moyen);
	margin-bottom:           var(--gap_md);
	line-height:             1.6;
}

.forgot_success
{
	display:                 flex;
	align-items:             center;
	gap:                     var(--gap_sm);
	padding:                 12px 14px;
	background:              var(--vert_pale);
	border:                  1px solid rgba(58,107,53,.2);
	border-radius:           var(--r_md);
	font-size:               13px;
	color:                   var(--vert_fonce);
	font-weight:             500;
	animation:               form_in .3s ease;
}

.forgot_success svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--vert_foret); }

/* ── Succès inscription ──────────────────────────────── */
.auth_success
{
	text-align:              center;
	animation:               form_in .5s ease;
	padding:                 var(--gap_xl) 0;
}

.success_icon_wrap
{
	display:                 flex;
	align-items:             center;
	justify-content:         center;
	width:                   80px;
	height:                  80px;
	background:              var(--vert_pale);
	border:                  2px solid rgba(58,107,53,.2);
	border-radius:           50%;
	margin:                  0 auto var(--gap_lg);
}

.success_icon
{
	width:                   40px;
	height:                  40px;
	color:                   var(--vert_foret);
	stroke-dasharray:        60;
	stroke-dashoffset:       60;
	animation:               draw_check .6s .2s ease forwards;
}

@keyframes draw_check
{
	to { stroke-dashoffset: 0; }
}

.success_title
{
	font-family:             var(--font_titre);
	font-size:               clamp(24px, 3vw, 32px);
	font-weight:             800;
	color:                   var(--gris_fonce);
	letter-spacing:          -.5px;
	margin-bottom:           var(--gap_md);
}

.success_sub
{
	font-size:               15px;
	color:                   var(--gris_moyen);
	line-height:             1.6;
	margin-bottom:           var(--gap_lg);
	text-wrap:               pretty;
}

.success_info_box
{
	display:                 flex;
	align-items:             flex-start;
	gap:                     var(--gap_sm);
	background:              var(--ocre_pale);
	border:                  1px solid rgba(193,123,47,.2);
	border-radius:           var(--r_md);
	padding:                 var(--gap_md);
	text-align:              left;
	margin-bottom:           var(--gap_xl);
}

.success_info_box svg
{
	width:                   18px;
	height:                  18px;
	flex-shrink:             0;
	color:                   var(--ocre);
	margin-top:              2px;
}

.success_info_box p
{
	font-size:               13px;
	color:                   #7a4b10;
	line-height:             1.5;
}

.success_actions
{
	display:                 flex;
	flex-direction:          column;
	gap:                     var(--gap_sm);
	align-items:             stretch;
}

.success_actions .btn_primary
{
	justify-content:         center;
}

.success_actions .btn_outline
{
	justify-content:         center;
}

/* ══════════════════════════════════════════ RESPONSIVE ══ */

@media (max-width: 900px)
{
	.auth_layout
	{
		grid-template-columns:   1fr;
	}

	.auth_aside
	{
		display:                 none;
	}

	.auth_form_panel
	{
		padding:                 var(--gap_xl) var(--gap_lg);
	}
}

@media (max-width: 640px)
{
	.auth_form_panel
	{
		padding:                 var(--gap_lg) var(--gap_md);
	}

	.form_row_2
	{
		grid-template-columns:   1fr;
	}

	.niveau_radio_group
	{
		grid-template-columns:   repeat(2, 1fr);
	}

	.success_actions
	{
		flex-direction:          column;
	}
}