/* ================================================================ auth.css — Habillage Connexion / Inscription (refonte session-5) D'après mockup-connexion(.mobile) + mockup-inscription(.mobile) Tout est scopé sous .auth-page pour ne pas impacter le reste du site (site.css reste chargé en parallèle). Dé-silotage (chantier esthétique auth) : auth.css ne redéfinit plus ses propres tokens de fondation — il hérite désormais de site.css (chargé avant). Plus de Dancing Script ni de vert/doré désynchronisés : couleurs, polices et rayon viennent du :root central. Les accents restent bordeaux + doré muté. ================================================================ */ .auth-page { /* 🔁 RECETTE 30/07 (Thomas, pt1) — « je me retrouve dans une page qui a l'ancien esthétique ». La feuille EST chargée et .auth-page EST posée : le défaut est que cette famille de composants a été figée au 20/06 et diverge depuis du tunnel, d'où vient l'utilisateur. Ici : un gris froid en dur au lieu du crème de la marque. */ font-family:var(--ff-body); color:var(--clr-text); background:var(--c-page); font-size:14px; line-height:1.6; margin:0; /* coquille auth = 1er enfant de : pas de marge propre */ } /* Retour Poune #2 — bande blanche en haut des pages connexion/inscription. Cause : la coquille auth est l'unique enfant de ; son entête en est le premier bloc. Un margin-top hérité / collapsé (depuis la fondation site.css partagée) sur la coquille ou son entête remontait À TRAVERS le (margin:0, sans bordure/padding) et peignait une bande blanche AU-DESSUS. On neutralise explicitement la marge haute de la chaîne d'entête pour que le premier bloc soit collé en haut du viewport. NB : le bloc concerné était le bandeau encre .auth-trust ; il a été retiré du markup le 28/07 (cf. l.64-66) et c'est désormais .auth-topbar. La règle reste utile telle quelle — elle vise l'entête, pas le bandeau. Strictement scopé .auth-page → aucune incidence sur les pages normales. */ .auth-page .auth-header { margin-top:0; } /* .auth-trust retiré du sélecteur (pt2 28/07) */ /* Verrou de premier ordre : le des pages de la coquille auth (IDs uniques posés par index.php : page-login/compte_ajout/password/resetpwd/verifmail, et page-compte en visiteur déconnecté) ne réserve aucun espace haut. Empêche toute marge/padding de fondation de créer un liseré blanc avant le bandeau sombre. Scopé par ID de page auth → strictement sans effet sur les pages normales. */ #page-login, #page-compte_ajout, #page-password, #page-resetpwd, #page-verifmail, body:has(> .auth-page) { margin-top:0; padding-top:0; } /* pt11 (retours 20/07) — bande blanche SOUS le footer des pages auth. Cause : la coquille auth est courte (carte de connexion ≈ 885 px) ; sur un viewport plus haut elle s'arrête avant le bas et laisse voir le , qui est blanc, sous le footer sombre. Rien n'y était posé : ni hauteur minimale, ni fond de repli. Fix « sticky footer » standard — la coquille occupe au minimum la hauteur du viewport et le
absorbe le rab, ce qui pousse le footer en bas de l'écran. Le supplément d'espace est peint en #fafafa (fond de la coquille), pas en blanc. ⚠️ Scopé `body > .auth-page` VOLONTAIREMENT : la classe .auth-page est aussi posée sur des blocs IMBRIQUÉS qui n'ont rien d'une page (modale de connexion du panier — .cc-modal.auth-page, inc/panier.inc.php ; carte de conversion invité — .cc-convert-card.auth-page, inc/checkout_invite.inc.php). Un sélecteur `.auth-page` nu leur imposerait 100vh + flex et les casserait. */ body > .auth-page { min-height:100vh; min-height:100dvh; /* mobile : hauteur réelle, barre d'URL déduite */ display:flex; flex-direction:column; } body > .auth-page > .auth-main { flex:1 0 auto; } .auth-page *, .auth-page *::before, .auth-page *::after { box-sizing:border-box; } .auth-page a { color:inherit; text-decoration:none; cursor:pointer; } .auth-page img { max-width:100%; } .auth-container { max-width:1200px; margin:0 auto; padding:0 24px; } .auth-page .logo-img { height:46px; width:auto; display:block; } .auth-page .logo-img.is-white { filter:brightness(0) invert(1); } /* ================================================================ HEADER ALLÉGÉ ================================================================ */ .auth-header { } /* .auth-trust / .auth-trust-center / .auth-trust-phone : SUPPRIMÉS (pt2, retours Thomas 28/07). Bandeau encre « Spécialiste des vins du Rhône depuis 2003 » + téléphone, retiré du markup (index.php) en même temps que ses jumeaux .header-top et .m-promo. */ /* pt1 — filet de séparation sur le token de ligne fine du système (--c-line), comme les cartes du tunnel, au lieu du gris froid legacy --clr-border. */ .auth-topbar { background:var(--c-surface); border-bottom:1px solid var(--c-line); padding:14px 0; } .auth-topbar .auth-container { display:flex; align-items:center; gap:20px; } .auth-logo { flex-shrink:0; line-height:0; } .auth-topbar-link { margin-left:auto; font-size:13px; } .auth-topbar-link a { color:var(--clr-or-text); font-weight:700; } .auth-topbar-link a:hover { text-decoration:underline; } /* #13 — lien de bascule/retour déplacé dans le corps des cartes : topbar = logo centré seul. */ .auth-topbar .auth-container { justify-content: center; } .auth-topbar-link { display: none; } /* ================================================================ CONTINUITÉ TUNNEL (dest=panier) ================================================================ Affichée seulement quand l'utilisateur vient du panier : on rejoue le fil d'étapes du tunnel (même grammaire visuelle que .cc-steps de tunnel.css, mais autonome — auth.css n'a pas accès à body.tunnel) + un rappel « panier conservé ». Audit UX tunnel #4 (continuité auth). */ /* pt1 — le fond clair passe du legacy --clr-bg-light (#F9F5EA) à la cible --c-bg-soft (#F4EFE4). Divergence connue et documentée entre les deux strates : côte à côte avec le tunnel, deux crèmes différents se voient. */ .auth-steps { background:var(--c-bg-soft); border-bottom:1px solid var(--c-border-struct); padding:16px 0; } .auth-steps-list { display:flex; align-items:center; justify-content:center; list-style:none; margin:0; padding:0; } /* 🔁 RECETTE 30/07 (Thomas, pt1) — LE symptôme le plus visible sur sa capture : la pastille d'étape franchie était VERTE (--clr-success, #2d6635) alors que le stepper du tunnel, dont ce fil rejoue la grammaire, la rend en ENCRE avec la coche en OR (cc_tunnel_stepper → .cc-step-item.is-done .cc-step-num). Le visiteur passait donc d'un jeu de composants à un autre en un clic. Le vert du système est réservé à la ligne de confiance et aux validations, pas à la progression. Les gris en dur (#aaa, #ccc) cèdent la place aux neutres du système. */ .auth-step { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--c-text); } .auth-step.active { color:var(--clr-or-text); } .auth-step.done { color:var(--c-accent-text); } .auth-step-num { width:26px; height:26px; border-radius:50%; background:var(--c-border-strong); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; } .auth-step.active .auth-step-num { background:var(--c-ink); } .auth-step.done .auth-step-num { background:var(--c-ink); color:var(--c-accent); } .auth-step-sep { margin:0 14px; color:var(--c-border-strong); font-size:18px; } .auth-resume { background:var(--c-surface); border-bottom:1px solid var(--c-line); padding:12px 0; } .auth-resume .auth-container { display:flex; align-items:center; justify-content:center; gap:8px; font-size:13.5px; color:var(--clr-text-dark); } .auth-resume svg { color:var(--clr-or); flex-shrink:0; } .auth-resume strong { color:var(--clr-or-text); } .auth-resume-kept { color:var(--clr-success); font-weight:600; } @media (max-width:600px) { .auth-steps { padding:12px 0; } .auth-steps-list { flex-wrap:nowrap; } .auth-step { gap:5px; font-size:11px; } .auth-step span:not(.auth-step-num) { white-space:nowrap; } .auth-step-num { width:22px; height:22px; font-size:11px; } .auth-step-sep { margin:0 5px; font-size:14px; } .auth-resume .auth-container { font-size:12px; padding-left:16px; padding-right:16px; line-height:1.4; } } /* ================================================================ ENVELOPPE FORMULAIRES ================================================================ */ .auth-page .signup-wrap { padding:40px 0 60px; } /* FORMULAIRE */ .auth-page .signup-form { padding:40px 44px; display:flex; flex-direction:column; position:relative; } .auth-page .form-title { font-family:var(--ff-title); font-size:24px; font-weight:700; color:var(--clr-text-dark); line-height:1.2; margin:0; } .auth-page .form-subtitle { font-size:13.5px; color:var(--clr-text); margin-top:7px; margin-bottom:24px; } .auth-page .form-subtitle .chrono { color:var(--clr-or-text); font-weight:700; } /* Boutons sociaux */ /* box-sizing:border-box + line-height:1 (chantier hauteur réelle boutons) : sans eux, le padding 10+10 s'empile sur min-height:44 → 64px rendus au lieu de la cible 44px. Vaut pour .btn-social ET .btn-primary ci-dessous. */ .auth-page .social-btns { display:flex; flex-direction:column; gap:11px; } .auth-page .btn-social { display:flex; align-items:center; justify-content:center; gap:11px; box-sizing:border-box; line-height:1; width:100%; min-height:var(--btn-min-h); padding:var(--btn-pad-y) var(--btn-pad-x); border-radius:var(--radius-s); font-family:var(--ff-body); font-size:var(--btn-font); font-weight:var(--btn-weight); letter-spacing:var(--btn-letter); cursor:pointer; border:1.5px solid var(--clr-border); background:#fff; color:var(--clr-text-dark); transition:transform .12s, box-shadow .18s, border-color .18s; position:relative; } .auth-page .btn-social:hover { transform:translateY(-1px); box-shadow:0 6px 16px -8px rgba(0,0,0,.35); border-color:#aaa; } .auth-page .btn-social .soc-ico { width:20px; height:20px; flex-shrink:0; } .auth-page .btn-social.facebook { background:#1877F2; border-color:#1877F2; color:#fff; } .auth-page .btn-social.facebook:hover { background:#1568d8; border-color:#1568d8; } /* État désactivé « Bientôt » (OAuth pas encore branché côté serveur). padding-right réserve la place du badge .soon-badge (absolute, à droite) : sans ça le libellé centré venait le chevaucher sur écran étroit. */ .auth-page .btn-social.is-soon { cursor:not-allowed; opacity:.6; padding-right:80px; } .auth-page .btn-social.is-soon:hover { transform:none; box-shadow:none; border-color:var(--clr-border); } .auth-page .btn-social.is-soon.facebook:hover { background:#1877F2; border-color:#1877F2; } .auth-page .btn-social .soon-badge { position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:9.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; background:rgba(0,0,0,.12); color:inherit; border-radius:0; padding:3px 8px; } .auth-page .btn-social.facebook .soon-badge { background:rgba(255,255,255,.25); } .auth-page .or-divider { display:flex; align-items:center; gap:14px; margin:22px 0; color:#aaa; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:1px; } .auth-page .or-divider::before, .auth-page .or-divider::after { content:''; flex:1; height:1px; background:var(--clr-border); } /* Champs */ .auth-page .field-group { display:flex; flex-direction:column; gap:6px; margin-bottom:15px; } .auth-page .field-group label { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--clr-text-dark); display:flex; align-items:center; justify-content:space-between; } .auth-page .field-group label .forgot { color:var(--clr-or-text); font-weight:700; text-transform:none; letter-spacing:0; font-size:11.5px; } .auth-page .field-group label .forgot:hover { text-decoration:underline; } .auth-page .field-group label .opt { color:#aaa; font-weight:600; text-transform:none; letter-spacing:0; font-size:11px; } /* Lien « Mot de passe oublié » sorti du