/**
 * Auth (connexion / inscription / etc.) - mobile & encoches
 * Préfixé .weavy-auth-root pour limiter l'impact au shortcode weavy_auth.
 */

[v-cloak] { display: none !important; }

/* Login visible sans JS. Les autres ecrans attendent le montage Vue. */
.weavy-auth-root:not(.weavy-vue-ready) .weavy-auth-shell:not(.weavy-auth-shell--login) {
    display: none !important;
}

:root {
    --weavy-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --weavy-font-size-base: 15px;
    --weavy-auth-primary: #7935bc;
    --weavy-auth-primary-hover: #5f2799;
    --weavy-auth-ink: #1c244b;
    --weavy-auth-muted: #79809e;
    --weavy-auth-border: #e7e9f2;
    --weavy-auth-border-strong: #dfe2ee;
    --weavy-auth-surface: #f5f6fa;
}

.weavy-auth-root,
.weavy-auth-root * {
    font-family: var(--weavy-font-family) !important;
}

.weavy-auth-root {
    box-sizing: border-box;
}

/* Encoches + éviter que le sélecteur de langue recouvre le contenu sur petit écran */
@media (max-width: 639px) {
    .weavy-auth-root {
        padding-left: max(0.75rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
        padding-top: max(1rem, env(safe-area-inset-top, 0px)) !important;
        /* Espace pour pastille langue fixe en bas */
        padding-bottom: max(5.5rem, calc(env(safe-area-inset-bottom, 0px) + 4rem)) !important;
    }
}

@media (min-width: 640px) {
    .weavy-auth-root {
        padding-left: max(1.5rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(1.5rem, env(safe-area-inset-right, 0px)) !important;
        padding-bottom: max(2rem, env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ── Sélecteur de langue : discret ──
   Petits drapeaux ronds au-dessus des codes de deux lettres, en bas à droite,
   sans pastille ni ombre. La langue active est en violet (code et anneau du
   drapeau), les autres atténuées. Le survol suffit à signaler qu'on peut
   cliquer : ce contrôle ne doit pas concurrencer le formulaire, qui est la
   seule chose à faire sur cette page. */
.weavy-auth-root .weavy-auth-lang {
    position: fixed !important;
    z-index: 20;
    bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
    right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    display: flex;
    align-items: center;
    gap: 6px;
}
.weavy-auth-root .weavy-auth-lang__btn {
    background: none !important;
    border: none !important;
    padding: 4px 2px !important;
    font-family: var(--weavy-font-family);
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1;
    color: var(--weavy-muted-soft) !important;
    cursor: pointer;
    transition: color 0.15s;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.weavy-auth-root .weavy-auth-lang__btn:hover,
.weavy-auth-root .weavy-auth-lang__btn:focus-visible {
    color: var(--weavy-text-strong) !important;
}
.weavy-auth-root .weavy-auth-lang__btn.is-active {
    color: var(--weavy-primary) !important;
}
.weavy-auth-root .weavy-auth-lang__flag {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--weavy-border-strong);
    opacity: 0.7;
    transition: opacity 0.15s, box-shadow 0.15s;
}
.weavy-auth-root .weavy-auth-lang__flag svg {
    display: block;
    width: 100%;
    height: 100%;
}
.weavy-auth-root .weavy-auth-lang__btn:hover .weavy-auth-lang__flag,
.weavy-auth-root .weavy-auth-lang__btn:focus-visible .weavy-auth-lang__flag {
    opacity: 1;
}
.weavy-auth-root .weavy-auth-lang__btn.is-active .weavy-auth-lang__flag {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--weavy-primary);
}
/* Séparateur : un point, pas un trait, pour rester léger. */
.weavy-auth-root .weavy-auth-lang__sep {
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: var(--weavy-border-strong);
    align-self: flex-end;
    margin-bottom: 9px;
}
/* Copie sous l'en-tête d'inscription : masquée sur desktop, le sélecteur
   reste fixé en bas à droite. */
.weavy-auth-root .weavy-auth-lang--inline,
.weavy-auth-root .weavy-auth-lang--top { display: none; }

/* ── Lot D : formulaire d'inscription en 2 volets, champs plus grands ──
   La carte passe en max-w-2xl (AuthView) ; les champs gagnent en taille et
   lisibilité. Bat les utilitaires !text-[13px]/!px-4 (spécificité classe+element). */
.weavy-register-form input[type="text"],
.weavy-register-form input[type="email"],
.weavy-register-form input[type="password"],
.weavy-register-form input[type="tel"] {
    font-size: 15px !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
}
.weavy-register-form label {
    font-size: 14px !important;
}

/* ════════════════════════════════════════════════════════════════════
   REFONTE 27/07/2026 - accent violet + encre sur l'auth.
   L'auth est peinte par des utilitaires Tailwind (CDN) : on les remappe
   ici, scopés .weavy-auth-root (specificite classe+classe + !important
   > utilitaire simple), sans toucher au balisage.
   ════════════════════════════════════════════════════════════════════ */

/* Actions principales : noir -> violet. */
.weavy-auth-root .bg-black { background-color: var(--weavy-auth-primary) !important; }
.weavy-auth-root .bg-black:hover,
.weavy-auth-root .hover\:bg-gray-800:hover { background-color: var(--weavy-auth-primary-hover) !important; }
/* Le remappage ci-dessus ne touchait QUE le fond : la classe Tailwind
   `text-white` du bouton (auth/button.php, mot de passe oublie/reinitialise)
   ne correspondait a aucune regle sur cette page - donc a la couleur de texte
   par defaut du navigateur pour un <button>, sombre - texte illisible sur fond
   violet plein. Meme mecanique que le fond juste au-dessus : un utilitaire
   Tailwind non genere, remappe explicitement. */
.weavy-auth-root .text-white { color: #ffffff !important; }

/* Accents violets encore portes par du markup Tailwind residuel. */
.weavy-auth-root .text-purple-600 { color: var(--weavy-auth-primary) !important; }
.weavy-auth-root .border-purple-600 { border-color: var(--weavy-auth-primary) !important; }

/* Anneaux de focus violets (Tailwind ring => variable CSS). */
.weavy-auth-root .focus\:ring-purple-600:focus,
.weavy-auth-root .focus\:ring-purple-500:focus,
.weavy-auth-root input:focus,
.weavy-auth-root select:focus,
.weavy-auth-root textarea:focus {
    --tw-ring-color: rgba(121, 53, 188, 0.4) !important;
    border-color: var(--weavy-auth-primary) !important;
}

/* Encre + neutres : aligner sur la palette refonte. */
.weavy-auth-root .text-gray-900 { color: var(--weavy-auth-ink) !important; }
.weavy-auth-root .text-gray-600,
.weavy-auth-root .text-gray-500 { color: var(--weavy-auth-muted) !important; }
.weavy-auth-root .border-gray-300 { border-color: var(--weavy-auth-border-strong) !important; }
.weavy-auth-root .border-gray-200 { border-color: var(--weavy-auth-border) !important; }
.weavy-auth-root .bg-gray-100 { background-color: var(--weavy-auth-surface) !important; }

/* Cartes heritees encore rendues (mot de passe oublie/reinitialisation via
   auth/button.php et form.bg-white). .weavy-auth-card en est exclu : c'est un
   composant de la refonte qui porte son propre rayon (16px) plus bas. */
.weavy-auth-root form.bg-white,
.weavy-auth-root .bg-white.rounded-lg.shadow-md {
    border-radius: 14px !important;
    box-shadow: 0 18px 44px -26px rgba(28, 36, 75, 0.35) !important;
}

/* ════════════════════════════════════════════════════════════════════
   REFONTE (suite) - champs, boutons, cases, cartes de selection.
   Scopé .weavy-auth-root ; bat les utilitaires Tailwind (specificite
   classe+element+attribut, + !important). Les valeurs sont en hex direct
   de la palette (elles restent correctes meme si les tokens manquaient).
   ════════════════════════════════════════════════════════════════════ */

/* Champs de saisie : hauteur confortable 44px, rayon 10, bordure douce. */
.weavy-auth-root input[type="text"],
.weavy-auth-root input[type="email"],
.weavy-auth-root input[type="password"],
.weavy-auth-root input[type="tel"],
.weavy-auth-root input[type="number"],
.weavy-auth-root select,
.weavy-auth-root .weavy-phone-number-input {
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    padding: 11px 14px !important;
    border: 1px solid #dfe2ee !important;
    border-radius: 10px !important;
    background-color: #ffffff !important;
    color: #1c244b !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
}

.weavy-auth-root input::placeholder,
.weavy-auth-root textarea::placeholder {
    color: #a6abc2 !important;
}

/* Focus violet + halo (les utilitaires ring Tailwind sont ecrits en `!focus:`,
   invalides et non generes : le halo vient donc d'ici, en box-shadow). */
.weavy-auth-root input:focus,
.weavy-auth-root select:focus,
.weavy-auth-root textarea:focus,
.weavy-auth-root .weavy-phone-number-input:focus {
    border-color: #7935bc !important;
    box-shadow: 0 0 0 3px rgba(121, 53, 188, 0.18) !important;
    outline: none !important;
}

/* Labels : encre lisible. */
.weavy-auth-root label.block {
    color: #1c244b !important;
}

/* Bouton principal (CTA) : plein violet, rayon 10, pleine largeur, 46px. */
.weavy-auth-root .bg-black {
    border-radius: 10px !important;
    min-height: 46px !important;
    font-weight: 600 !important;
    box-shadow: 0 10px 22px -12px rgba(121, 53, 188, 0.65) !important;
    transition: background-color .18s ease, box-shadow .18s ease, transform .05s ease !important;
}
.weavy-auth-root .bg-black:active { transform: translateY(1px); }

/* Cases a cocher : accent violet + cible confortable. */
.weavy-auth-root input[type="checkbox"] {
    accent-color: #7935bc !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 5px !important;
    cursor: pointer;
}

/* Les regles de remap des anciennes cartes cliquables Tailwind
   (.bg-white.border.rounded-lg.cursor-pointer, .border-purple-600.border-2) et
   des liens a[style*="7935bc"] ont ete retirees : ce markup n'existe plus depuis
   la refonte (tuiles .weavy-tile et cartes .weavy-prod-card le remplacent). */

/* ════════════════════════════════════════════════════════════════════
   REFONTE AUTH (A1/A2/A3) - 28/07/2026
   Split-screen connexion, onboarding profil/dispositif, inscription 2 colonnes.
   Tout est scopé .weavy-auth-root. Palette de la spec (hex direct pour rester
   correct meme sans tokens). Pas de tiret cadratin.
   ════════════════════════════════════════════════════════════════════ */

/* Fond de page conforme spec (#eceef6). L'utilitaire bg-gray-100 est sur la
   racine elle-meme : selecteur classe+classe pour battre Tailwind (0,1,0). */
.weavy-auth-root.bg-gray-100 { background-color: #eceef6 !important; }

/* Enveloppes de vue centrees. */
.weavy-auth-root .weavy-auth-shell { width: 100%; margin: 0 auto; }
.weavy-auth-root .weavy-auth-shell--login { max-width: 960px; }

/* ─── Boutons ─── */
.weavy-auth-root button[type].weavy-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 50px;
    padding: 13px 22px;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    transition: background-color .18s ease, box-shadow .18s ease, transform .05s ease;
}
/* weavy-tokens.css impose white-space:nowrap sur .weavy-btn : sur ces boutons
   pleine largeur, un libelle long (ES/EN) deborderait au lieu de passer a la ligne. */
.weavy-auth-root .weavy-btn {
    white-space: normal;
}

/* !important necessaire : weavy-tokens.css declare .weavy-btn--primary
   (non scope) avec background/box-shadow en !important, qui l'emporterait
   sinon sur ces regles malgre leur specificite superieure - l'etat desactive
   et l'ombre violette ne s'appliqueraient jamais. */
.weavy-auth-root .weavy-btn--primary {
    background-color: #7935bc !important;
    background: #7935bc !important;
    color: #ffffff !important;
    box-shadow: 0 12px 26px -14px rgba(121, 53, 188, 0.75) !important;
}
.weavy-auth-root .weavy-btn--primary:hover:not(:disabled) {
    background-color: #5f2799 !important;
    background: #5f2799 !important;
}
.weavy-auth-root .weavy-btn--primary:active { transform: translateY(1px); }
.weavy-auth-root .weavy-btn--primary:disabled,
.weavy-auth-root .weavy-btn--primary[disabled] {
    background-color: #c9b3de !important;
    background: #c9b3de !important;
    box-shadow: none !important;
    cursor: not-allowed;
    transform: none;
}

/* ─── Liens d'action ─── */
.weavy-auth-root .weavy-link {
    color: #7935bc;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.weavy-auth-root .weavy-link:hover { text-decoration: underline; }
.weavy-auth-root .weavy-link.underline { text-decoration: underline; }

/* ─── Champs generiques ─── */
.weavy-auth-root .weavy-field { display: flex; flex-direction: column; gap: 8px; }
.weavy-auth-root .weavy-field__label { font-size: 13px; font-weight: 600; color: #1c244b; }
.weavy-auth-root .weavy-field__labelrow {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.weavy-auth-root .weavy-field__aux { font-size: 13px; }
.weavy-auth-root .weavy-hint { margin-top: 6px; font-size: 12px; color: #79809e; }

/* ─── Case a cocher (label + input + texte) ─── */
.weavy-auth-root .weavy-check {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; color: #1c244b; cursor: pointer; line-height: 1.4;
}
.weavy-auth-root .weavy-check input[type="checkbox"] { margin-top: 1px; flex-shrink: 0; }

/* ─── Alertes ─── */
.weavy-auth-root .weavy-alert {
    padding: 11px 13px; border-radius: 10px; font-size: 13px; line-height: 1.4;
}
.weavy-auth-root .weavy-alert--error { background: #fdecea; border: 1px solid #f3c2c2; color: #b02a37; }
.weavy-auth-root .weavy-alert--success { background: #e8f5ee; border: 1px solid #bfe6cf; color: #1f7a4d; }

/* Sortie proposee dans le bandeau d'erreur (« un compte existe deja » -> connexion).
   Elle reprend la couleur du bandeau plutot que le violet des boutons du formulaire :
   c'est une porte de sortie, pas l'action principale de la page. */
.weavy-auth-root .weavy-alert__action {
    display: inline-block;
    margin-left: 6px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.weavy-auth-root .weavy-alert__action:hover { text-decoration: none; }
.weavy-auth-root .weavy-alert__action:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 3px;
}

/* ─── Bascule "Afficher/Masquer" mot de passe ─── */
.weavy-auth-root .weavy-pwd { position: relative; }
.weavy-auth-root .weavy-pwd > input { padding-right: 52px !important; }
.weavy-auth-root .weavy-pwd__toggle {
    position: absolute; top: 50%; right: 5px; transform: translateY(-50%);
    height: 40px; width: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    color: #79809e;
    cursor: pointer; border-radius: 8px;
}
.weavy-auth-root .weavy-pwd__toggle:hover { background: #f3ebfb; color: #7935bc; }
.weavy-auth-root .weavy-pwd__icon { display: inline-flex; align-items: center; }
.weavy-auth-root .weavy-pwd__toggle .weavy-pwd__icon--hide { display: none; }
.weavy-auth-root .weavy-pwd__toggle.is-visible .weavy-pwd__icon--show { display: none; }
.weavy-auth-root .weavy-pwd__toggle.is-visible .weavy-pwd__icon--hide { display: inline-flex; }

/* ════════════ A1 - CONNEXION (split) ════════════ */
.weavy-auth-root .weavy-login-split {
    display: grid;
    grid-template-columns: 470px 1fr;
    border: 1px solid #e0e3f0;
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 18px 40px -28px rgba(28, 36, 75, 0.45);
}
/* Panneau marque */
.weavy-auth-root .weavy-login-brand {
    background: linear-gradient(165deg, #2a1147, #5b2496 55%, #7935bc);
    padding: 44px 42px;
    min-height: 620px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff;
}
.weavy-auth-root .weavy-login-brand__title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    text-align: center;
    padding-left: 30px;
    padding-right: 30px;
}
.weavy-auth-root .weavy-login-brand__mid { margin: 28px 0; }
.weavy-auth-root .weavy-login-brand__list {
    list-style: none; margin: 22px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 14px;
}
.weavy-auth-root .weavy-login-brand__list li {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: 14px; color: rgba(255, 255, 255, 0.85); line-height: 1.35;
}
.weavy-auth-root .weavy-login-brand__check {
    flex-shrink: 0;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex; align-items: center; justify-content: center;
    color: #ffffff; font-size: 11px; line-height: 1;
}
/* Formulaire */
.weavy-auth-root .weavy-login-panel {
    background: #ffffff;
    padding: 56px 60px;
    display: flex; flex-direction: column; justify-content: center;
}
.weavy-auth-root .weavy-login-form { display: flex; flex-direction: column; gap: 22px; }
.weavy-auth-root .weavy-login-form__head { display: flex; flex-direction: column; gap: 6px; }
.weavy-auth-root .weavy-login-form__title { margin: 0; font-size: 26px; font-weight: 700; color: #1c244b; }
.weavy-auth-root .weavy-login-form__sub { margin: 0; font-size: 14px; color: #5b6284; }
.weavy-auth-root .weavy-login-form__terms { margin: 0; font-size: 12px; color: #9aa0ba; line-height: 1.45; }

/* ════════════ A2 - ONBOARDING (profil / dispositif) ════════════ */
.weavy-auth-root .weavy-onb { max-width: 820px; margin: 0 auto; }
.weavy-auth-root .weavy-onb--wide { max-width: 1060px; }
.weavy-auth-root .weavy-onb-header {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: #ffffff; border: 1px solid #e7e9f2; border-radius: 16px;
    padding: 14px 22px; margin-bottom: 26px;
}
.weavy-auth-root .weavy-onb-header__aside { margin: 0; font-size: 14px; color: #5b6284; }
.weavy-auth-root .weavy-onb__body {
    display: flex; flex-direction: column; align-items: center; gap: 30px;
}
.weavy-auth-root .weavy-onb-card {
    width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.weavy-auth-root .weavy-onb-title { text-align: center; }
.weavy-auth-root .weavy-onb-title h1 { margin: 0; font-size: 30px; font-weight: 700; color: #1c244b; }
.weavy-auth-root .weavy-onb-title p { margin: 6px 0 0; font-size: 15px; color: #5b6284; }
.weavy-auth-root .weavy-onb-title__h { margin: 0; font-size: 30px; font-weight: 700; color: #1c244b; }
.weavy-auth-root .weavy-onb-title__sub { margin: 6px 0 0; font-size: 15px; color: #5b6284; }

/* ══════════ Selection d'un dispositif Weavy (commande a l'inscription) ══════════ */
@keyframes weavy-auth-spin { to { transform: rotate(360deg); } }
/* width:100% comme .weavy-onb-card / .weavy-register2 : le parent .weavy-onb__body
   est un flex centre, sans cela l'ecran de commande se retrecit a son contenu. */
.weavy-auth-root .weavy-prod { display: flex; flex-direction: column; gap: 26px; width: 100%; }
.weavy-auth-root .weavy-prod-card__selected {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid #ece2f8;
    font-size: 13px;
    font-weight: 600;
    color: #7935bc;
}
.weavy-auth-root .weavy-prod__card {
    background: #fff;
    border: 1px solid #e7e9f2;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 12px 30px -24px rgba(28, 36, 75, 0.5);
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.weavy-auth-root .weavy-prod__back { align-self: flex-start; font-size: 13px; font-weight: 600; color: #7935bc; }
.weavy-auth-root .weavy-prod__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 640px) { .weavy-auth-root .weavy-prod__grid { grid-template-columns: 1fr; } }
.weavy-auth-root .weavy-prod-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e3f0;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.weavy-auth-root .weavy-prod-card:hover { border-color: #7935bc; box-shadow: 0 10px 24px -18px rgba(28, 36, 75, 0.4); }
.weavy-auth-root .weavy-prod-card.is-selected { border: 1.5px solid #7935bc; background: #fbf8fe; }
.weavy-auth-root .weavy-prod-card__check {
    position: absolute; top: 12px; right: 12px;
    width: 22px; height: 22px; border-radius: 999px;
    background: #7935bc; color: #fff; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; z-index: 1;
}
.weavy-auth-root .weavy-prod-card__media { height: 150px; background: #f3f4f8; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.weavy-auth-root .weavy-prod-card__media img { max-height: 100%; max-width: 100%; object-fit: contain; }
.weavy-auth-root .weavy-prod-card__body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.weavy-auth-root .weavy-prod-card__name { margin: 0; font-size: 16px; font-weight: 700; color: #1c244b; }
.weavy-auth-root .weavy-prod-card__desc { font-size: 13px; line-height: 1.5; color: #5b6284; }
.weavy-auth-root .weavy-prod-card__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid #eceef6; }
.weavy-auth-root .weavy-prod-card__price-label { font-size: 12px; color: #9aa0ba; display: block; margin-bottom: 2px; }
.weavy-auth-root .weavy-prod-card__price { font-size: 22px; font-weight: 700; color: #1c244b; }
.weavy-auth-root .weavy-prod__continue {
    height: 50px; border-radius: 12px; border: none; cursor: pointer;
    background: #7935bc; color: #fff; font-size: 15px; font-weight: 700;
    transition: background-color 0.15s ease;
}
.weavy-auth-root .weavy-prod__continue:hover { background: #5f2799; }
.weavy-auth-root .weavy-prod__state { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 28px; color: #79809e; font-size: 14px; }
.weavy-auth-root .weavy-prod__spinner { width: 22px; height: 22px; border: 3px solid #eef0f6; border-top-color: #7935bc; border-radius: 50%; animation: weavy-auth-spin 1s linear infinite; }
.weavy-auth-root .weavy-prod__error { background: #fdecec; border: 1px solid #f2dcdf; color: #c0392f; border-radius: 10px; padding: 12px 14px; font-size: 13px; }

/* ══════════ Mot de passe oublie / reinitialisation (carte centree) ══════════ */
.weavy-auth-root .weavy-auth-shell--narrow { max-width: 480px; }
.weavy-auth-root .weavy-auth-narrow__head { margin-bottom: 24px; }
.weavy-auth-root .weavy-auth-card {
    background: #fff;
    border: 1px solid #e7e9f2;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 12px 30px -24px rgba(28, 36, 75, 0.5);
}
.weavy-auth-root .weavy-auth-card__title h1 { margin: 0 0 4px; font-size: 24px; font-weight: 700; color: #1c244b; letter-spacing: -0.01em; }
.weavy-auth-root .weavy-auth-cardform { display: flex; flex-direction: column; gap: 6px; }
.weavy-auth-root .weavy-auth-card__back { align-self: flex-start; font-size: 13px; font-weight: 600; color: #7935bc; margin-bottom: 8px; }
.weavy-auth-root .weavy-auth-card__desc { margin: 0 0 6px; font-size: 14px; line-height: 1.55; color: #5b6284; }
.weavy-auth-root .weavy-auth-form { display: flex; flex-direction: column; gap: 16px; }
.weavy-auth-root .weavy-auth-msg { border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.45; }
.weavy-auth-root .weavy-auth-msg--error { background: #fdecec; border: 1px solid #f2dcdf; color: #c0392f; }
.weavy-auth-root .weavy-auth-msg--success { background: #e8f6f0; border: 1px solid #cceee0; color: #0f8a5f; }
.weavy-auth-root .weavy-onb-back { color: #79809e; font-size: 13px; text-decoration: none; cursor: pointer; }
.weavy-auth-root .weavy-onb-back:hover { text-decoration: underline; }

/* Cartes de contenu */
.weavy-auth-root .weavy-card {
    background: #ffffff; border: 1px solid #e7e9f2; border-radius: 16px;
    box-shadow: 0 12px 30px -24px rgba(28, 36, 75, 0.5);
    width: 100%;
}
.weavy-auth-root .weavy-card--pad { padding: 32px; }
.weavy-auth-root .weavy-onb-card > .weavy-card { max-width: 760px; }
.weavy-auth-root .weavy-card__label { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: #1c244b; }

/* Cartes-choix (tuiles) */
.weavy-auth-root .weavy-tiles { display: grid; gap: 14px; margin-top: 14px; }
.weavy-auth-root .weavy-tiles--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.weavy-auth-root .weavy-tile {
    position: relative;
    display: flex; flex-direction: column; gap: 6px;
    text-align: left;
    background: #ffffff;
    border: 1.5px solid #e0e3f0;
    border-radius: 14px;
    padding: 18px 18px 20px;
    min-height: 44px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.weavy-auth-root .weavy-tile:hover { border-color: #7935bc; box-shadow: 0 12px 30px -22px rgba(28, 36, 75, 0.5); }
.weavy-auth-root a.weavy-tile,
.weavy-auth-root a.weavy-tile:hover,
.weavy-auth-root a.weavy-tile:focus { text-decoration: none; color: inherit; }
.weavy-auth-root .weavy-tile--sel { border-color: #7935bc; background: #fbf8fe; }
.weavy-auth-root .weavy-tile__title { font-size: 17px; font-weight: 700; color: #1c244b; }
.weavy-auth-root .weavy-tile__desc { font-size: 13px; color: #5b6284; line-height: 1.4; }
.weavy-auth-root .weavy-tile__check {
    position: absolute; top: 14px; right: 14px;
    width: 22px; height: 22px; border-radius: 50%;
    background: #7935bc; color: #ffffff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; line-height: 1;
}
/* Dans le flux, au-dessus du titre : positionné en coin, il chevauchait les
   titres longs (« I only need a Weavy Life Subscription »). */
.weavy-auth-root .weavy-tile__radio {
    flex-shrink: 0;
    margin-bottom: 4px;
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid #cfd4e5; background: #fff;
}
.weavy-auth-root .weavy-tile--radio:hover .weavy-tile__radio { border-color: #7935bc; }

/* Bloc "Continuer" */
.weavy-auth-root .weavy-continue { margin-top: 22px; }
.weavy-auth-root .weavy-continue__hint {
    margin: 10px 0 0; text-align: center; font-size: 12px; color: #9aa0ba;
}

/* ════════════ A3 - INSCRIPTION (2 colonnes + recap) ════════════ */
.weavy-auth-root .weavy-register2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
}
.weavy-auth-root .weavy-card__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-bottom: 8px;
}
.weavy-auth-root .weavy-card__title { margin: 0; font-size: 20px; font-weight: 700; color: #1c244b; }
.weavy-auth-root .weavy-link-back { font-size: 13px; white-space: nowrap; }
.weavy-auth-root .weavy-step-hint { margin: 0 0 16px; font-size: 13px; font-weight: 600; color: #5b6284; }
.weavy-auth-root .weavy-step-hint__num { font-weight: 400; color: #9aa0ba; }

/* Grille de champs 2 colonnes */
.weavy-auth-root .weavy-fgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.weavy-auth-root .weavy-fgrid__full { grid-column: 1 / -1; }
.weavy-auth-root .weavy-divider { height: 1px; background: #eceef6; margin: 4px 0; }

/* Barre de robustesse mot de passe */
.weavy-auth-root .weavy-pwbar { display: flex; gap: 6px; margin-top: 10px; }
.weavy-auth-root .weavy-pwbar__seg { flex: 1; height: 5px; border-radius: 999px; background: #e7e9f2; transition: background-color .16s ease; }
.weavy-auth-root .weavy-pwbar[data-score="1"] .weavy-pwbar__seg.is-on { background: #d9534f; }
.weavy-auth-root .weavy-pwbar[data-score="2"] .weavy-pwbar__seg.is-on { background: #e6a23c; }
.weavy-auth-root .weavy-pwbar[data-score="3"] .weavy-pwbar__seg.is-on { background: #2fa06a; }
.weavy-auth-root .weavy-pwbar[data-score="4"] .weavy-pwbar__seg.is-on { background: #1f9d63; }
.weavy-auth-root .weavy-pwbar__label { font-weight: 600; margin-right: 6px; }

/* Colonne recap */
.weavy-auth-root .weavy-recap { display: flex; flex-direction: column; gap: 14px; }
.weavy-auth-root .weavy-recap__card {
    background: #ffffff; border: 1px solid #e7e9f2; border-radius: 16px; padding: 18px;
    box-shadow: 0 12px 30px -24px rgba(28, 36, 75, 0.5);
}
.weavy-auth-root .weavy-recap__eyebrow {
    margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: #9aa0ba;
}
.weavy-auth-root .weavy-recap__row { display: flex; align-items: center; gap: 10px; }
.weavy-auth-root .weavy-recap__badge {
    flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 8px;
    background: #f3ebfb; color: #7935bc;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
}
.weavy-auth-root .weavy-recap__acct { font-size: 14px; font-weight: 700; color: #1c244b; }
.weavy-auth-root .weavy-recap__edit { margin-left: auto; font-size: 13px; }
.weavy-auth-root .weavy-recap__weavy { margin: 10px 0 0; font-size: 13px; color: #5b6284; }
.weavy-auth-root .weavy-recap__why {
    background: #fbf8fe; border: 1px solid #ece2f8; border-radius: 14px; padding: 16px;
}
.weavy-auth-root .weavy-recap__why-title { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #1c244b; }
.weavy-auth-root .weavy-recap__why-text { margin: 0; font-size: 13px; color: #5b6284; line-height: 1.5; }

/* ════════════ RESPONSIVE ════════════ */
@media (max-width: 880px) {
    /* A1 : le panneau marque passe au-dessus, hauteur reduite. */
    .weavy-auth-root .weavy-login-split { grid-template-columns: 1fr; }
    .weavy-auth-root .weavy-login-brand { min-height: auto; padding: 32px 30px; }
    .weavy-auth-root .weavy-login-brand__mid { margin: 20px 0; }
    .weavy-auth-root .weavy-login-brand__title { font-size: 26px; }
    .weavy-auth-root .weavy-login-panel { padding: 32px 28px; }

    /* A3 : recap sous le formulaire. */
    .weavy-auth-root .weavy-register2 { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    /* Masquer le panneau marque sur mobile (spec : au-dessus OU masque). */
    .weavy-auth-root .weavy-login-brand { display: none; }
    .weavy-auth-root .weavy-login-split { border-radius: 16px; }
    .weavy-auth-root .weavy-login-panel { padding: 28px 22px; }

    /* Grilles de tuiles et de champs en une colonne. */
    .weavy-auth-root .weavy-tiles--2 { grid-template-columns: 1fr; }
    .weavy-auth-root .weavy-fgrid { grid-template-columns: 1fr; }

    .weavy-auth-root .weavy-card--pad { padding: 22px; }
    .weavy-auth-root .weavy-onb-title h1 { font-size: 25px; }
    .weavy-auth-root .weavy-onb-header { padding: 12px 16px; margin-bottom: 12px; }
    .weavy-auth-root .weavy-onb-header__aside { font-size: 13px; }
    /* Inscription : le sélecteur quitte le coin fixe et suit l'en-tête. */
    .weavy-auth-root .weavy-onb .weavy-auth-lang--inline {
        display: flex;
        position: static !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: auto;
        justify-content: flex-end;
        margin: 0 4px 20px;
    }
    .weavy-auth-root .weavy-onb ~ .weavy-auth-lang:not(.weavy-auth-lang--inline) {
        display: none !important;
    }
    /* Connexion : le sélecteur est en flux, tout en haut, au-dessus du formulaire. */
    .weavy-auth-root .weavy-auth-shell--login .weavy-auth-lang--top {
        display: flex;
        position: static !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: auto;
        justify-content: flex-end;
        margin: 0 4px 16px;
    }
    .weavy-auth-root .weavy-auth-shell--login ~ .weavy-auth-lang:not(.weavy-auth-lang--top) {
        display: none !important;
    }
}