/*
 * Sillage — "Mon écrin" : connexion / création de compte / mot de passe oublié.
 * Reprend telle quelle la maquette validée (Sillage_Connexion_Creation_Compte_V1).
 *
 * Scopé sous #sillage-auth, un wrapper propre à ces 4 écrans (imbriqué dans
 * #account-page, qui lui reste inchangé) plutôt que sous #account-page
 * directement : #account-page ne redéclare pas localement --paper/--ink/
 * --bronze/etc (il ne définit que 3 tokens additionnels et hérite du
 * :root global de main.css, dont les teintes sont légèrement différentes
 * de celles imposées par cette maquette) — redéclarer ici la palette exacte
 * de la maquette sous #account-page directement aurait changé silencieusement
 * les couleurs du tableau de bord/commandes/adresses déjà livrés. #sillage-auth
 * isole ce changement aux seuls écrans de connexion.
 */

#sillage-auth {
	--paper: #eee7dc;
	--soft: #f8f3eb;
	--stone: #ddd2c2;
	--ink: #171411;
	--muted: #766b60;
	--line: #cbbdac;
	--dark: #171411;
	--dark2: #211b17;
	--tobacco: #3d5348;
	--bronze: #6f9483;
	--ivory: #f7f2e9;
	background: var(--paper);
	color: var(--ink);
}
/* main.css's bare "section{padding:clamp(82px,9.5vw,155px) 0}" would
   otherwise apply to every <section> below (.auth, .form-view, .lost). */
#sillage-auth section { padding: 0; }
#sillage-auth h1, #sillage-auth h2, #sillage-auth h3 { font-family: var(--serif); font-weight: 400; line-height: 1; margin: 0; }
#sillage-auth h1 { font-size: clamp(3.2rem, 5vw, 5.6rem); letter-spacing: -.05em; }
#sillage-auth h2 { font-size: clamp(2rem, 3.4vw, 3.6rem); letter-spacing: -.04em; }
#sillage-auth h3 { font-size: 1.3rem; }
#sillage-auth p { margin: 0; color: var(--muted); }
#sillage-auth .eyebrow { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; }
#sillage-auth .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	padding: 16px 22px; border: 1px solid currentColor; text-transform: uppercase;
	letter-spacing: .15em; font-size: .7rem; font-weight: 700; background: transparent; transition: .25s;
	min-height: 44px; cursor: pointer;
}
#sillage-auth .btn:hover { background: var(--ink); color: var(--ivory); }
/* !important: account.css's "#account-page button.btn{background:transparent}"
   (ID + element + class = higher specificity than a plain "#sillage-auth
   .btn-bronze") otherwise wins on this exact property and left the submit
   buttons transparent — a white label on the page's own pale background,
   i.e. an invisible CTA. Same fix pattern used everywhere else in this
   project for this exact class of collision. */
#sillage-auth .btn-bronze { background: var(--bronze) !important; border-color: var(--bronze) !important; color: #fff !important; }
#sillage-auth .btn-bronze:hover { background: #111 !important; border-color: #111 !important; }
#sillage-auth .required { color: var(--tobacco); text-decoration: none; }
#sillage-auth a:focus-visible,
#sillage-auth button:focus-visible,
#sillage-auth input:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

/* ---------- Split screen ---------- */
#sillage-auth .auth { min-height: calc(100vh - 90px); display: grid; grid-template-columns: 1.05fr .95fr; }
/* Bug de "décalage" mobile (voir main.css, même diagnostic) : .visual est la
   colonne grille contenant l'image ; sans min-width:0 elle peut forcer le
   débordement horizontal quand la grille passe à 1 colonne sur mobile. */
#sillage-auth .visual { position: relative; overflow: hidden; background: var(--dark); min-width: 0; }
#sillage-auth .visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* main.css's site header is "position:absolute;top:0" with no background of
   its own (color:#fff only) — it's designed to float over a dark hero, but
   the mockup's own gradient started almost transparent at the very top
   (rgba(...,.12)), which left the nav unreadable against this photo's
   brighter areas (window, glass). An extra dark stop sized to the header's
   own height (main.css ".nav{height:88px}") fixes contrast there without
   touching header.php/main.css, which are shared site-wide. */
#sillage-auth .visual:after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20, 16, 13, .68) 0, rgba(20, 16, 13, .68) 88px, rgba(20, 16, 13, .18) 200px, rgba(20, 16, 13, .12) 45%, rgba(20, 16, 13, .78) 100%);
}
#sillage-auth .visual-copy { position: absolute; z-index: 2; left: clamp(28px, 5vw, 76px); right: clamp(28px, 5vw, 76px); bottom: clamp(36px, 7vw, 90px); color: #fff; }
#sillage-auth .visual-copy .eyebrow { color: #a8c4b8; }
#sillage-auth .visual-copy p { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 2rem); line-height: 1.35; color: #efe4d8; max-width: 700px; margin-top: 22px; }
/* align-items:center (the mockup's original rule) works for the short
   login form, but the taller register form's height is close enough to
   the column's own height that centering it left only ~77px of clearance
   above — less than the site header's own 88px (position:absolute, see
   .visual:after above) — so the register tab visually started underneath
   the header instead of below it. Anchoring to the top with an explicit
   header-clearing padding-top fixes it regardless of viewport height or
   which tab's content is taller. */
#sillage-auth .auth-panel { background: var(--soft); padding: 128px clamp(42px, 6vw, 90px) clamp(42px, 6vw, 90px); display: flex; align-items: flex-start; }
#sillage-auth .auth-inner { width: 100%; max-width: 620px; margin: auto; }

/* ---------- Tabs ---------- */
#sillage-auth .tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 38px; }
#sillage-auth .tab {
	flex: 1; padding: 15px 10px; border: 0; border-bottom: 2px solid transparent; background: transparent;
	text-transform: uppercase; letter-spacing: .15em; font-size: .7rem; color: #8b7c6e; cursor: pointer; font-family: var(--sans);
}
#sillage-auth .tab.active { color: var(--ink); border-bottom-color: var(--bronze); }

/* ---------- Form views ---------- */
#sillage-auth .form-view .eyebrow { color: #4d6a5a; }
#sillage-auth .form-view h2 { margin: 10px 0 18px; }
#sillage-auth .form-view > p { max-width: 540px; margin-bottom: 28px; }
#sillage-auth .fields { display: grid; gap: 18px; }
/* Style de champ (label/input/focus/erreur) : commun à cette page et à
   Mot de passe oublié — voir main.css (jamais les deux pages en même temps,
   donc regroupé une seule fois dans le fichier chargé partout plutôt que
   dupliqué à l'identique ici et dans password-reset.css). */
#sillage-auth .password-wrap { position: relative; }
#sillage-auth .password-wrap input { padding-right: 78px; }
#sillage-auth .password-toggle {
	position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border: 0; background: transparent;
	text-transform: uppercase; letter-spacing: .11em; font-size: .62rem; color: #7c6d60; cursor: pointer; padding: 10px 4px; min-height: 44px;
}
#sillage-auth .password-toggle:hover { color: var(--ink); }
#sillage-auth .form-row { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin: 18px 0 24px; flex-wrap: wrap; }
#sillage-auth label.check,
#sillage-auth .check { display: flex; gap: 10px; align-items: center; text-transform: none; letter-spacing: 0; font-size: .86rem; color: var(--muted); margin: 0; }
#sillage-auth .check input { width: auto; }
/* "clairement identifiable" — repris en encre pleine plutôt qu'en gris
   discret, pour que ce lien se lise comme une vraie action et pas comme
   une mention secondaire. */
#sillage-auth .forgot { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-decoration: underline; }
#sillage-auth .forgot:hover { color: var(--bronze); }
#sillage-auth .auth-inner form > .btn,
#sillage-auth .auth-inner form > button.btn { width: 100%; }
#sillage-auth .divider { display: flex; align-items: center; gap: 14px; margin: 26px 0; color: #9a8b7d; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; }
#sillage-auth .divider:before,
#sillage-auth .divider:after { content: ""; height: 1px; background: var(--line); flex: 1; }
#sillage-auth .secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#sillage-auth .secondary .btn { background: transparent; width: auto; }
#sillage-auth .note { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .82rem; }
#sillage-auth .benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
#sillage-auth .benefit { border: 1px solid var(--line); padding: 18px; background: #f4eee5; }
#sillage-auth .benefit strong { font-family: var(--serif); font-weight: 400; display: block; }
#sillage-auth .benefit p { font-size: .8rem; margin-top: 6px; }

/* Defensive resets for WooCommerce's own float-based two-column field
   classes, in case a hooked plugin (anti-spam, extra fields) still uses
   them inside "woocommerce_login_form"/"woocommerce_register_form" —
   this project's fields use ".field"/".fields" instead, but third-party
   hooks are outside our control. */
#sillage-auth .form-row-first,
#sillage-auth .form-row-last { float: none; width: auto; }
#sillage-auth .woocommerce-privacy-policy-text { margin-top: 18px; font-size: .8rem; color: var(--muted); }
#sillage-auth .woocommerce-privacy-policy-text a { text-decoration: underline; }

/* ---------- Mot de passe oublié / réinitialisation ---------- */
#sillage-auth .lost { background: var(--paper); padding: 100px 0; }
#sillage-auth .lost-card { max-width: 760px; margin: auto; background: var(--soft); border: 1px solid var(--line); padding: 44px; }
#sillage-auth .lost-card p { margin: 18px 0 26px; }
#sillage-auth .lost-card .fields { margin-bottom: 4px; }
#sillage-auth .lost-card form > .btn { width: 100%; margin-top: 6px; }
#sillage-auth .lost-card .woocommerce-message,
#sillage-auth .lost-card + .btn { margin-top: 20px; }

/* ---------- Notices (no WooCommerce purple/blue/green) ---------- */
#sillage-auth .woocommerce-message,
#sillage-auth .woocommerce-error,
#sillage-auth .woocommerce-info,
#sillage-auth .woocommerce-NoticeGroup {
	background: var(--soft); border: 1px solid var(--line); color: var(--ink);
	padding: 16px 20px; margin-bottom: 20px; list-style: none; font-size: .88rem;
}
#sillage-auth .woocommerce-error li { list-style: none; margin: 0; }
#sillage-auth .woocommerce-error li + li { margin-top: 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	#sillage-auth .auth { grid-template-columns: 1fr; min-height: 0; }
	#sillage-auth .visual { min-height: 420px; }
	#sillage-auth .auth-panel { padding: 60px 30px; }
}
@media (max-width: 640px) {
	#sillage-auth .visual { min-height: 320px; }
	#sillage-auth .tabs { flex-direction: column; }
	#sillage-auth .tab { text-align: left; }
	#sillage-auth .secondary,
	#sillage-auth .benefits { grid-template-columns: 1fr; }
	#sillage-auth .form-row { align-items: flex-start; flex-direction: column; }
	#sillage-auth .lost-card { padding: 30px 22px; }
	#sillage-auth .fields { gap: 22px; }
}