/* ═══════════════════════════════════════════════════════════════════════════ PAGE COMPTE — visiteur déconnecté (connexion / inscription / mot de passe) Surcharges : woocommerce/myaccount/form-login.php, form-lost-password.php, form-reset-password.php, lost-password-confirmation.php RÈGLES DE TENUE DE CE FICHIER 1. Tout est raciné sur .sl-acc — notre wrapper, émis par les templates. Aucun sélecteur ne part d'un parent supposé (.sl-club-guest, .woocommerce, un conteneur Elementor…) : la page peut rendre [spliff_club] ou non. 2. Aucun !important. On gagne par spécificité — les valeurs de spécificité d'Astra à battre sont notées en commentaire à chaque neutralisation. 3. Fichier autonome, hors pipeline gulp (gulpfile.js ne source que css/theme.css) → il ne sera jamais écrasé par un build. 4. Toute modification ici impose de bumper SPLIFF_SCRIPTS_VERSION (env.php) DANS LE MÊME COMMIT, sinon Cloudflare / WP Rocket servent l'ancien fichier. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Tokens (redéclarés localement : front.css n'est chargé que si la page contient [spliff_club], on ne peut pas en dépendre) ───────────────────── */ .sl-acc{ --ink:#1B1B1B; --ink-2:#51524B; --ink-3:#8A8B85; --line:#E5E5E1; --line-strong:#CFCFC9; --paper:#FFFFFF; --wash:#F9F9F9; --danger:#C0392B; --danger-bg:#FDF1EF; --danger-ink:#8E2A20; --ok:#1B7F4B; /* Bleu de marque. Contraste 3,2:1 sur blanc : conforme pour les composants d'interface (icônes, bordures, halos de focus — seuil 3:1), MAIS insuffisant pour porter du texte blanc (seuil 4,5:1). D'où son emploi ici en ACCENT d'interaction uniquement — le bouton principal reste noir. */ --accent:#5a8bff; --accent-soft:rgba(90,139,255,.18); /* Même famille de bleu, assombrie pour PORTER DU TEXTE : 5,1:1 sur blanc et 5,4:1 sous du blanc. C'est la teinte du bouton principal et du libellé de l'onglet actif — deux endroits où --accent (3,2:1) serait sous le seuil de 4,5:1 exigé pour du texte. */ --accent-strong:#3d6fe0; --radius-card:16px; --radius-field:10px; --shadow-card:0 1px 2px rgba(27,27,27,.04), 0 12px 32px -12px rgba(27,27,27,.14); --focus-ring:0 0 0 3px var(--accent-soft); --sl-font:'Syne', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width:460px; margin:0 auto; font-family:var(--sl-font); font-weight:500; color:var(--ink); text-align:left; } .sl-acc *, .sl-acc *::before, .sl-acc *::after{box-sizing:border-box} /* ── En-tête ─────────────────────────────────────────────────────────────── */ .sl-acc .sl-acc__head{text-align:center; margin-bottom:18px} .sl-acc .sl-acc__title{ margin:0 0 8px; font-family:var(--sl-font); font-size:clamp(28px,5vw,36px); font-weight:800; letter-spacing:-.02em; line-height:1.1; color:var(--ink); } .sl-acc .sl-acc__subtitle{margin:0; color:var(--ink-2); font-size:15px; font-weight:500} /* ── Carte ───────────────────────────────────────────────────────────────── */ .sl-acc .sl-acc__card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:8px 8px 0; } .sl-acc--solo .sl-acc__card{padding:8px} /* ── Onglets ─────────────────────────────────────────────────────────────── */ .sl-acc .sl-acc__tabs{ position:relative; display:grid; grid-template-columns:1fr 1fr; background:var(--wash); border-radius:12px; padding:4px; } .sl-acc .sl-acc__pill{ position:absolute; inset:4px 50% 4px 4px; background:var(--paper); border-radius:9px; box-shadow:0 1px 2px rgba(27,27,27,.10), 0 1px 6px rgba(27,27,27,.06); transition:transform .28s cubic-bezier(.4,0,.2,1); } /* La classe est posée par PHP : la pilule est au bon endroit dès la 1ʳᵉ peinture. */ .sl-acc .sl-acc__tabs--register .sl-acc__pill{transform:translateX(100%)} @media (prefers-reduced-motion:reduce){ .sl-acc .sl-acc__pill{transition:none} } .sl-acc .sl-acc__tab{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; min-height:44px; /* cible tactile */ padding:11px 8px; border-radius:9px; font-family:var(--sl-font); font-size:14px; font-weight:700; color:var(--ink-3); text-decoration:none; text-align:center; transition:color .2s ease; } .sl-acc .sl-acc__tab:hover{color:var(--ink-2); text-decoration:none} .sl-acc .sl-acc__tab.is-active, .sl-acc .sl-acc__tab[aria-selected="true"]{color:var(--accent-strong)} .sl-acc .sl-acc__tab:focus-visible{outline:2px solid var(--accent); outline-offset:2px} /* ── Panneaux ────────────────────────────────────────────────────────────── */ /* Ce conteneur ne peut pas être retiré du DOM : il porte l'attribut `hidden` (bascule des onglets), `role="tabpanel"` et `aria-labelledby`. Son padding, en revanche, est réduit au strict nécessaire — c'est lui qui creusait le vide. */ .sl-acc .sl-acc__panel{padding:14px 12px 16px} /* Explicite : une règle display: sur les descendants ne doit jamais rouvrir un panneau masqué par l'attribut natif hidden. */ .sl-acc .sl-acc__panel[hidden]{display:none} /* ═══════════════════════════════════════════════════════════════════════════ NEUTRALISATION ASTRA / WOOCOMMERCE ═══════════════════════════════════════════════════════════════════════════ */ /* Pseudo-éléments clearfix posés sur TOUS les .form-row — y compris les

injectés par le snippet CFM et par class-referral.php. Astra : .woocommerce form .form-row::before/::after (0,3,0) → ici (0,4,0). */ .sl-acc .sl-acc__form .form-row::before, .sl-acc .sl-acc__form .form-row::after{content:none; display:none} /* Astra : .woocommerce form .form-row-wide{clear:both} (0,2,0) → ici (0,3,0). */ .sl-acc .sl-acc__form .form-row{clear:none; margin:0; padding:0} /* Astra : body .woocommerce form.login / form.register {margin:2em 0} — (0,2,2). Ces 2em creusaient un vide au-dessus et au-dessous du formulaire, dans une carte qui a déjà son propre padding. Ici (0,3,1) : gagne. La bordure et le padding:20px de la même règle Astra sont conservés (l'encadré intérieur). */ .sl-acc form.woocommerce-form-login.login, .sl-acc form.woocommerce-form-register.register{margin:0} /* Astra impose une taille d'input de 15px < 921px et 14px < 544px via le CSS dynamique (class-astra-dynamic-css.php:612) sur le sélecteur `input` (0,0,1) → sous 16px, Safari iOS zoome au tap. Ici (0,3,1), sans !important : les @media n'ajoutent pas de spécificité. */ .sl-acc .sl-acc__form input.input-text, .sl-acc .sl-acc__form select, .sl-acc .sl-acc__form textarea{font-size:16px} /* L'élément d'attribution de commande n'a aucun rendu attendu. */ .sl-acc wc-order-attribution-inputs{display:none} /* ── Champs ──────────────────────────────────────────────────────────────── */ /* ⚠️ `.form-row` est indispensable dans ce sélecteur. Astra déclare `.woocommerce form .form-row label{font-size:.9em}` — même spécificité (0,3,1) que `.sl-acc .sl-acc__form label`, mais imprimée APRÈS notre feuille, donc gagnante à égalité. En passant à (0,4,1) on reprend la main sans !important. Vérifié en production : (0,3,1) → 14,4px, (0,4,1) → 11,5px. */ .sl-acc .sl-acc__form .form-row label{ display:block; margin:0 0 4px; font-family:var(--sl-font); font-size:11.5px; font-weight:700; letter-spacing:.01em; color:var(--ink); line-height:1.3; } .sl-acc .sl-acc__form .required{color:var(--danger); font-weight:700; text-decoration:none; border:0} .sl-acc .sl-acc__form .optional{color:var(--ink-3); font-weight:500; font-size:12px} /* Astra : .woocommerce form .form-row .input-text (0,3,0) → ici (0,3,1). */ .sl-acc .sl-acc__form input.input-text{ width:100%; font-family:var(--sl-font); font-weight:500; color:var(--ink); background:var(--paper); border:1px solid var(--line-strong); border-radius:var(--radius-field); padding:11px 13px; line-height:1.3; transition:border-color .15s ease, box-shadow .15s ease; } .sl-acc .sl-acc__form input.input-text::placeholder{color:var(--ink-3); font-weight:500} .sl-acc .sl-acc__form input.input-text:hover{border-color:var(--ink-3)} .sl-acc .sl-acc__form input.input-text:focus, .sl-acc .sl-acc__form input.input-text:focus-visible{ outline:0; border-color:var(--accent); box-shadow:var(--focus-ring); } .sl-acc .sl-acc__form input.input-text[aria-invalid="true"]{ border-color:var(--danger); box-shadow:0 0 0 3px rgba(192,57,43,.10); } /* Champ date : rendu cliquable et de hauteur constante sur tous les moteurs. */ .sl-acc .sl-acc__form input.input-text[type="date"]{min-height:50px} .sl-acc .sl-acc__form input.input-text[type="date"]::-webkit-calendar-picker-indicator{ opacity:.55; cursor:pointer; transform:scale(1.1); } /* Le champ code de parrainage est saisi en majuscules (parité avec le style inline posé par class-referral.php). */ .sl-acc .sl-acc__form #sl_referral_code{text-transform:uppercase; letter-spacing:.16em; font-weight:700} /* Aides et mentions. */ .sl-acc .sl-hint{ display:block; margin:4px 0 0; font-size:11.5px; font-weight:500; color:var(--ink-2); line-height:1.4; } .sl-acc .sl-hint--dob{margin:-6px 0 0} .sl-acc .sl-hint--intro{margin:0 0 18px; font-size:14px} .sl-acc .sl-legal, .sl-acc .woocommerce-privacy-policy-text{ margin:14px 0 0; font-size:12px; font-weight:500; color:var(--ink-3); line-height:1.5; text-align:center; } .sl-acc .woocommerce-privacy-policy-text p{margin:0; font-size:inherit; color:inherit; line-height:inherit} .sl-acc .sl-legal a, .sl-acc .woocommerce-privacy-policy-text a{color:var(--ink-2); text-underline-offset:2px} /* ── Mot de passe : wrapper et bouton œil (posés par woocommerce.js:118, ou par account-login.js quand l'input n'a pas la classe woocommerce-Input) ───── */ .sl-acc .sl-acc__form .password-input{position:relative; display:block; width:100%} .sl-acc .sl-acc__form .password-input input.input-text{padding-right:48px} /* ⚠️ Le CSS de WooCommerce centre ce bouton avec la propriété INDIVIDUELLE `translate: 0 -50%` (.woocommerce form .show-password-input). `translate` et `transform` sont deux propriétés distinctes qui S'ADDITIONNENT : garder les deux décalait le bouton de 2 × 50 % (38px au lieu de 19), donc au-dessus du champ. On neutralise `translate` et on garde `transform`, qui fonctionne aussi là où le CSS WooCommerce n'est pas chargé. */ .sl-acc .sl-acc__form .show-password-input{ position:absolute; top:50%; right:6px; translate:none; transform:translateY(-50%); width:38px; height:38px; display:grid; place-items:center; padding:0; margin:0; background:transparent; border:0; border-radius:8px; cursor:pointer; color:var(--ink-2); -webkit-appearance:none; appearance:none; } /* Neutralise l'icône font éventuelle du CSS WooCommerce, on fournit la nôtre. */ .sl-acc .sl-acc__form .show-password-input::after{content:none} .sl-acc .sl-acc__form .show-password-input::before{ content:""; display:block; width:19px; height:19px; background-color:currentColor; -webkit-mask:var(--eye) center / contain no-repeat; mask:var(--eye) center / contain no-repeat; } .sl-acc .sl-acc__form .show-password-input:hover{background:var(--wash); color:var(--accent)} .sl-acc .sl-acc__form .show-password-input:focus-visible{outline:2px solid var(--accent); outline-offset:1px} .sl-acc{ --eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); --eye-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.7 5.1A10.9 10.9 0 0 1 12 5c6.4 0 10 7 10 7a17.8 17.8 0 0 1-3 4M6.6 6.6A17.6 17.6 0 0 0 2 12s3.6 7 10 7a10.7 10.7 0 0 0 5.4-1.4'/%3E%3Cpath d='M14.1 14.1a3 3 0 1 1-4.2-4.2M2 2l20 20'/%3E%3C/svg%3E"); } /* .display-password est posée par woocommerce.js et par notre repli. */ .sl-acc .sl-acc__form .show-password-input.display-password::before{ -webkit-mask-image:var(--eye-off); mask-image:var(--eye-off); } /* ── Compteur de force (écran de réinitialisation uniquement) ─────────────── */ .sl-acc .woocommerce-password-strength{ margin:8px 0 0; padding:8px 12px; font-size:12.5px; font-weight:700; border-radius:8px; text-align:left; background:var(--wash); color:var(--ink-2); } .sl-acc .woocommerce-password-strength.short, .sl-acc .woocommerce-password-strength.bad{background:var(--danger-bg); color:var(--danger-ink)} .sl-acc .woocommerce-password-strength.good{background:#FFF6E5; color:#8A5A00} .sl-acc .woocommerce-password-strength.strong{background:#EAF6EF; color:var(--ok)} .sl-acc .woocommerce-password-hint{display:block; margin:6px 0 0; font-size:12px; font-weight:500; color:var(--ink-2)} /* ── Case à cocher « rester connecté » ───────────────────────────────────── */ /* Même raison que ci-dessus : ce label est dans un .form-row, il subit la règle d'Astra. On monte donc aussi à (0,4,1). */ .sl-acc .sl-acc__form .form-row label.sl-check{ display:inline-flex; align-items:center; gap:9px; margin:0; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--ink-2); } .sl-acc .sl-check span{font-weight:600} .sl-acc .sl-check__input{ flex:0 0 18px; width:18px; height:18px; margin:0; border:1.5px solid var(--line-strong); border-radius:5px; background:var(--paper) center / 11px 11px no-repeat; -webkit-appearance:none; appearance:none; cursor:pointer; transition:background-color .15s ease, border-color .15s ease; } .sl-acc .sl-check__input:checked{ background-color:var(--accent); border-color:var(--accent); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E"); } .sl-acc .sl-check__input:focus-visible{outline:2px solid var(--accent); outline-offset:2px} /* ── Boutons ─────────────────────────────────────────────────────────────── */ /* Astra impose couleurs et paddings via .woocommerce button.button (0,2,1) et consorts → ici (0,3,1). */ .sl-acc .sl-acc__form button.button{ width:100%; font-family:var(--sl-font); font-size:15px; font-weight:700; letter-spacing:.01em; color:#fff; background:var(--accent-strong); border:1px solid var(--accent-strong); border-radius:var(--radius-field); padding:15px 18px; line-height:1.2; cursor:pointer; text-transform:none; transition:transform .12s ease, opacity .15s ease; } .sl-acc .sl-acc__form button.button:hover{color:#fff; background:var(--accent-strong); opacity:.88} .sl-acc .sl-acc__form button.button:active{transform:translateY(1px)} .sl-acc .sl-acc__form button.button:focus-visible{outline:2px solid var(--accent); outline-offset:3px} /* Le compteur de force désactive le submit sous force 3 : l'état doit se voir. */ .sl-acc .sl-acc__form button.button:disabled, .sl-acc .sl-acc__form button.button[disabled]{opacity:.45; cursor:not-allowed; transform:none} /* ── Liens ───────────────────────────────────────────────────────────────── */ .sl-acc .custom-forgot-password a, .sl-acc .woocommerce-LostPassword a{ color:var(--ink); font-size:13.5px; font-weight:700; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; text-decoration-color:var(--line-strong); } /* Au survol, seul le SOULIGNEMENT passe en bleu : le texte reste noir, car #5a8bff sur blanc ne monte qu'à 3,2:1 — en dessous du seuil de 4,5:1 exigé pour du texte. */ .sl-acc .custom-forgot-password a:hover, .sl-acc .woocommerce-LostPassword a:hover{text-decoration-color:var(--accent)} .sl-acc .custom-forgot-password a{display:inline-flex; align-items:center; min-height:44px} /* cible tactile */ .sl-acc .sl-back{ display:inline-flex; align-items:center; gap:7px; min-height:44px; margin-bottom:12px; font-size:13.5px; font-weight:700; color:var(--ink-2); text-decoration:none; } .sl-acc .sl-back:hover{color:var(--ink)} .sl-acc .sl-back svg{width:15px; height:15px} .sl-acc .sl-back--footer{margin:18px 0 0} /* ── Encarts ─────────────────────────────────────────────────────────────── */ .sl-acc .custom-login-message, .sl-acc .sl-note{ margin:14px 0 0; padding:11px 13px; background:var(--wash); border:1px solid var(--line); border-radius:12px; font-size:13px; font-weight:500; color:var(--ink-2); line-height:1.55; text-align:left; } .sl-acc .custom-login-message strong, .sl-acc .sl-note strong{font-weight:700; color:var(--ink)} /* ── Notices WooCommerce ─────────────────────────────────────────────────── */ /* Le wrapper est toujours émis par woocommerce_output_all_notices, même vide. */ .sl-acc .woocommerce-notices-wrapper:empty{display:none} .sl-acc .sl-acc__notices{margin:0 0 18px} .sl-acc .sl-acc__notices .woocommerce-error, .sl-acc .sl-acc__notices .woocommerce-message, .sl-acc .sl-acc__notices .woocommerce-info{ margin:0; padding:12px 14px; border-radius:10px; list-style:none; font-size:13.5px; font-weight:600; line-height:1.5; background:var(--danger-bg); border:1px solid rgba(192,57,43,.22); color:var(--danger-ink); } .sl-acc .sl-acc__notices .woocommerce-message{ background:#EAF6EF; border-color:rgba(27,127,75,.22); color:var(--ok); } .sl-acc .sl-acc__notices .woocommerce-info{ background:var(--wash); border-color:var(--line); color:var(--ink-2); } .sl-acc .sl-acc__notices li{margin:0; padding:0; list-style:none} .sl-acc .sl-acc__notices li + li{margin-top:6px} .sl-acc .sl-acc__notices a{color:inherit; font-weight:700} /* Le bouton « Vers la boutique » des notices n'a rien à faire ici. */ .sl-acc .sl-acc__notices .button{display:none} /* ═══════════════════════════════════════════════════════════════════════════ ORDRE DES CHAMPS — CSS Grid Le HTML des hooks n'est jamais réécrit : seul l'ordre visuel est imposé. Clé primaire :has() ; clé secondaire [data-sl-row], posée par account-login.js sur les navigateurs sans :has(). Tout élément inconnu tombe en order:50, donc EN BAS — jamais en tête. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Formulaire de connexion ─────────────────────────────────────────────── */ .sl-acc .woocommerce-form-login{ display:grid; grid-template-columns:1fr 1fr; gap:11px 10px; align-items:start; } .sl-acc .woocommerce-form-login > *{grid-column:1 / -1; order:50; min-width:0} .sl-acc .woocommerce-form-login > [data-sl-row="username"]{order:1} .sl-acc .woocommerce-form-login > [data-sl-row="password"]{order:2} .sl-acc .woocommerce-form-login > [data-sl-row="remember"]{grid-column:1; order:3; align-self:center} .sl-acc .woocommerce-form-login > .custom-forgot-password, .sl-acc .woocommerce-form-login > .woocommerce-LostPassword{ grid-column:2; order:3; justify-self:end; align-self:center; text-align:right; } .sl-acc .woocommerce-form-login > [data-sl-row="submit"]{order:4; margin-top:2px} .sl-acc .woocommerce-form-login > .custom-login-message{order:5} /* ── Formulaire d'inscription ────────────────────────────────────────────── */ .sl-acc .woocommerce-form-register{ display:grid; grid-template-columns:1fr 1fr; gap:11px 10px; align-items:start; } .sl-acc .woocommerce-form-register > *{grid-column:1 / -1; order:50; min-width:0} .sl-acc .woocommerce-form-register > p:has(#reg_first_name), .sl-acc .woocommerce-form-register > [data-sl-row="first_name"]{grid-column:1; order:1} .sl-acc .woocommerce-form-register > p:has(#reg_last_name), .sl-acc .woocommerce-form-register > [data-sl-row="last_name"]{grid-column:2; order:1} .sl-acc .woocommerce-form-register > p:has(#reg_email), .sl-acc .woocommerce-form-register > [data-sl-row="email"]{order:2} .sl-acc .woocommerce-form-register > p:has(#reg_password), .sl-acc .woocommerce-form-register > [data-sl-row="password"]{order:3} .sl-acc .woocommerce-form-register > p:has(#reg_dob), .sl-acc .woocommerce-form-register > [data-sl-row="dob"]{order:4} .sl-acc .woocommerce-form-register > [data-sl-row="dob-hint"]{order:5} .sl-acc .woocommerce-form-register > [data-sl-row="extras"]{order:6} .sl-acc .woocommerce-form-register > [data-sl-row="submit"]{order:7; margin-top:2px} .sl-acc .woocommerce-form-register > [data-sl-row="legal"]{order:8} /* ── Bloc parrainage + sorties tierces (encapsulées côté PHP) ────────────── */ .sl-acc .sl-reg-extras{display:block} .sl-acc .sl-ref-toggle-input{position:absolute; opacity:0; width:1px; height:1px; margin:0} .sl-acc .sl-ref-toggle{ display:inline-flex; align-items:center; gap:7px; min-height:44px; margin:0; cursor:pointer; font-size:11px; font-weight:700; color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; text-decoration-color:var(--line-strong); } .sl-acc .sl-ref-toggle::after{ content:""; width:14px; height:14px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition:transform .2s ease; } .sl-acc .sl-ref-toggle:hover{text-decoration-color:var(--accent)} .sl-acc .sl-ref-toggle-input:focus-visible + .sl-ref-toggle{outline:2px solid var(--accent); outline-offset:2px} .sl-acc .sl-ref-toggle-input:checked + .sl-ref-toggle::after{transform:rotate(180deg)} /* Repliement 100 % CSS. Pas de !important : le