/* ─────────────────────────────────────────────────────────────────────────────
   auth-themes.css — La page de connexion aux couleurs de chaque espace
   ─────────────────────────────────────────────────────────────────────────────
   Chargée après auth.css. N'agit que si <html data-lp-theme="…"> est posé
   (clé `layout.theme` de la page de login, réglable dans /iam) :

     dashboard    Espace personnel — « Argile & Lin » (dashboard/assets/css/ms-tokens.css)
     psychologue  Espace Pro — sarcelle sur blanc (psychologue/assets/css/psychologue.css)
     academie     Académie — encre, or et vert-de-gris (academie/assets/css/acad-kit.css)
     particulier  Offre particuliers — bleu nuit, Figtree seule (particulier/assets/css/particulier.css)
     relais       Relais (accompagnants) — blanc, prune, orange Prev&Care (relais/assets/css/relais.css)

   Sans attribut, rien ne change : les pages de sociétés gardent le thème sombre
   d'auth.css et leurs surcharges.

   PRIORITÉS — les thèmes posent les MÊMES variables qu'auth.css (--red, --bg-deep,
   --text-*, --glass-*, --input-*…) sur :root[data-lp-theme] ; les couleurs saisies
   dans /iam arrivent ensuite sur :root:root (même poids, plus tard) et gagnent,
   comme le CSS personnalisé. Les règles de structure lisent donc ces variables
   plutôt que des valeurs en dur, pour qu'une surcharge garde son effet.

   Les valeurs viennent des feuilles des espaces, au chiffre près : ne pas les
   « ajuster à l'œil » ici sans les changer là-bas.
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══ 1. Jeux de variables ══════════════════════════════════════════════════ */

/* Espace personnel — Latte, Craie, Espresso, Canelle (charte mai 2026). */
:root[data-lp-theme="dashboard"] {
    --red:           #A14836;   /* Canelle — 5,4:1 sur Latte */
    --red-dark:      #8A3B2C;
    --red-glow:      transparent;
    --red-subtle:    #F6E4DE;
    --bg-deep:       #F8F2EF;   /* Latte */
    --bg-mid:        #EEE4DF;   /* Latte creusé */
    --glass-bg:      #FFFCFA;   /* Craie */
    --glass-border:  #E3D8D2;   /* filet */
    --glass-hover:   #F6E4DE;
    --text-primary:  #1C0F0A;   /* Espresso */
    --text-secondary:#5A4A43;
    --text-muted:    #71605A;
    --input-bg:      #FFFCFA;
    --input-border:  #8F817B;   /* limite de composant, 3:1 */
    --input-focus-border: #A14836;
    --input-focus-shadow: rgba(161, 72, 54, 0.16);
    --btn-grad-start: #A14836;
    --btn-grad-end:   #A14836;
    --radius:    20px;
    --radius-sm: 12px;
    --radius-xs: 8px;

    --lp-panel-bg:    rgb(255 252 250 / .72);   /* verre du chrome flottant (--glass-bg du dashboard) */
    --lp-panel-line:  rgb(28 15 10 / .06);
    --lp-panel-ink:   #1C0F0A;
    --lp-panel-ink-2: #5A4A43;
    --lp-panel-eyebrow: #A14836;
    --lp-logo-filter: brightness(0);           /* logo sombre sur fond clair, comme l'en-tête */
    --lp-title-font:  var(--font-serif);
    --lp-title-weight: 400;
    --lp-btn-radius:  999px;
    --lp-btn-h:       48px;
    --lp-btn-weight:  600;
    --lp-on-accent:   #FFFCFA;
    --lp-shadow:      0 2px 4px rgba(28, 15, 10, .05), 0 12px 28px rgba(28, 15, 10, .10);
    --lp-err: #AE3326; --lp-err-s: #FFEBEB;
    --lp-ok:  #33493F; --lp-ok-s:  #D6EDE1;
    --lp-info:#3B6A8A; --lp-info-s:#E0EAF1;
    --lp-page-bg:
        radial-gradient(ellipse at 88% 8%, rgba(212, 133, 58, .10) 0%, transparent 46%),
        radial-gradient(ellipse at 10% 92%, rgba(161, 72, 54, .07) 0%, transparent 42%);
}

/* Espace Pro — texte et boutons #11756B, décor #1FA093, cartes blanches sur le fond mesh. */
:root[data-lp-theme="psychologue"] {
    --red:           #11756B;   /* 5,4:1 sur blanc */
    --red-dark:      #0B5A52;
    --red-glow:      transparent;
    --red-subtle:    #E1F1EE;
    --bg-deep:       #CFE9E5;
    --bg-mid:        #F4F8F7;
    --glass-bg:      #FFFFFF;
    --glass-border:  rgba(18, 35, 31, 0.11);
    --glass-hover:   #F2F7F5;
    --text-primary:  #12231F;
    --text-secondary:#34463F;
    --text-muted:    #52655E;
    --input-bg:      #FFFFFF;
    --input-border:  #7F928C;
    --input-focus-border: #11756B;
    --input-focus-shadow: rgba(31, 160, 147, 0.20);
    --btn-grad-start: #11756B;
    --btn-grad-end:   #11756B;
    --radius:    20px;
    --radius-sm: 12px;
    --radius-xs: 8px;

    --lp-panel-bg:    #0C3A34;
    --lp-panel-ink:   #FFFFFF;
    --lp-panel-ink-2: rgba(255, 255, 255, .78);
    --lp-panel-eyebrow: #8FE3D6;
    --lp-logo-filter: brightness(0) invert(1);
    --lp-title-font:  var(--font-serif);
    --lp-title-weight: 400;
    --lp-btn-radius:  12px;
    --lp-btn-h:       48px;
    --lp-btn-weight:  700;
    --lp-on-accent:   #FFFFFF;
    --lp-shadow:      0 1px 2px rgba(18, 35, 31, .04), 0 10px 30px rgba(18, 70, 62, .07);
    --lp-accent-deco: #1FA093;
    --lp-err: #A3361F; --lp-err-s: #FBEAE5;
    --lp-ok:  #1B6E4D; --lp-ok-s:  #E2F2EA;
    --lp-info:#265F88; --lp-info-s:#E5EFF7;
    /* Le fond mesh de l'espace psy (psychologue.css, body) */
    --lp-page-bg:
        radial-gradient(ellipse at 14% 20%, rgba(43, 163, 154, 0.40) 0%, transparent 46%),
        radial-gradient(ellipse at 84% 10%, rgba(74, 140, 122, 0.32) 0%, transparent 42%),
        radial-gradient(ellipse at 68% 78%, rgba(43, 163, 154, 0.28) 0%, transparent 44%),
        radial-gradient(ellipse at 22% 88%, rgba(160, 130, 210, 0.22) 0%, transparent 40%),
        radial-gradient(ellipse at 92% 52%, rgba(74, 140, 122, 0.24) 0%, transparent 38%),
        radial-gradient(ellipse at 50% 45%, rgba(180, 224, 218, 0.18) 0%, transparent 55%);
}

/* Académie — sol crème, papier, encre ; l'or décore, le vert-de-gris porte le panneau. */
:root[data-lp-theme="academie"] {
    --red:           #8A6318;   /* or lisible sur papier (AA) */
    --red-dark:      #6E4E12;
    --red-glow:      transparent;
    --red-subtle:    rgba(200, 146, 46, .13);
    --bg-deep:       #FAF6EE;
    --bg-mid:        #F3ECDF;   /* parchemin */
    --glass-bg:      #FFFDF9;   /* papier */
    --glass-border:  rgba(23, 16, 10, .11);
    --glass-hover:   rgba(200, 146, 46, .13);
    --text-primary:  #17100A;
    --text-secondary:rgba(23, 16, 10, .70);
    --text-muted:    rgba(23, 16, 10, .58);
    --input-bg:      #FFFDF9;
    --input-border:  rgba(23, 16, 10, .45);
    --input-focus-border: #C8922E;
    --input-focus-shadow: rgba(200, 146, 46, .22);
    --btn-grad-start: #17100A;  /* .ak-btn : encre */
    --btn-grad-end:   #17100A;
    --radius:    22px;
    --radius-sm: 12px;
    --radius-xs: 8px;

    --lp-panel-bg:    #24413C;  /* vert-de-gris de la coque */
    --lp-panel-ink:   #E6EFEC;
    --lp-panel-ink-2: #9DB5AE;
    --lp-panel-eyebrow: #E8B84B;
    --lp-logo-filter: none;     /* logo-dark.png : déjà clair */
    --lp-title-font:  var(--font-serif);
    --lp-title-weight: 400;
    --lp-btn-radius:  999px;
    --lp-btn-h:       48px;
    --lp-btn-weight:  600;
    --lp-on-accent:   #F7F0E2;
    --lp-shadow:      0 2px 4px rgba(23, 16, 10, .04), 0 12px 28px rgba(23, 16, 10, .09);
    --lp-accent-deco: #C8922E;
    --lp-err: #A3361F; --lp-err-s: #FBEAE5;
    --lp-ok:  #1B6E4D; --lp-ok-s:  #E2F2EA;
    --lp-info:#265F88; --lp-info-s:#E5EFF7;
    --lp-page-bg:
        radial-gradient(ellipse at 12% 16%, rgba(200, 146, 46, .20) 0%, transparent 48%),
        radial-gradient(ellipse at 88% 84%, rgba(36, 65, 60, .10) 0%, transparent 44%);
}

/* Particuliers — blanc, bleu nuit, texte presque noir ; Figtree seule, pas de serif. */
:root[data-lp-theme="particulier"] {
    --red:           #0F2744;   /* bleu nuit */
    --red-dark:      #0A1C33;
    --red-glow:      transparent;
    --red-subtle:    #EAF0F7;
    --bg-deep:       #F4F6F9;
    --bg-mid:        #F4F6F9;
    --glass-bg:      #FFFFFF;
    --glass-border:  #E4E8EE;
    --glass-hover:   #F4F6F9;
    --text-primary:  #0A1628;
    --text-secondary:#475467;
    --text-muted:    #5D6B82;
    --input-bg:      #FFFFFF;
    --input-border:  #8792A6;   /* 3:1 */
    --input-focus-border: #0F2744;
    --input-focus-shadow: rgba(91, 127, 166, .28);
    --btn-grad-start: #0F2744;
    --btn-grad-end:   #0F2744;
    --radius:    20px;
    --radius-sm: 12px;
    --radius-xs: 8px;
    --font-serif: 'Figtree', system-ui, sans-serif;

    --lp-panel-bg:    #0F2744;
    --lp-panel-ink:   #FFFFFF;
    --lp-panel-ink-2: #C9D6E6;
    --lp-panel-eyebrow: #9FB7D3;
    --lp-logo-filter: brightness(0) invert(1);
    --lp-title-font:  'Figtree', system-ui, sans-serif;
    --lp-title-weight: 650;
    --lp-btn-radius:  999px;
    --lp-btn-h:       52px;
    --lp-btn-weight:  600;
    --lp-on-accent:   #FFFFFF;
    --lp-shadow:      0 1px 2px rgba(10, 22, 40, .04), 0 8px 24px rgba(10, 22, 40, .05);
    --lp-err: #A3361F; --lp-err-s: #FBEAE5;
    --lp-ok:  #0E6B49; --lp-ok-s:  #E7F5EE;
    --lp-info:#1E3A5F; --lp-info-s:#EAF0F7;
    --lp-page-bg: none;
}

/* Relais — blanc, prune pour tout le texte et la barre latérale, orange pour l'action.
   Bouton orange à texte BLANC GRAS : décision du porteur (relais.css, 27/09/2026).
   L'orange n'écrit jamais de texte : liens et accents textuels en prune. */
:root[data-lp-theme="relais"] {
    --red:           #4F0C28;   /* prune — 14,8:1 sur blanc */
    --red-dark:      #3A0820;
    --red-glow:      transparent;
    --red-subtle:    #FFDED4;   /* pêche */
    --bg-deep:       #FFFFFF;
    --bg-mid:        #FFF4F0;
    --glass-bg:      #FFFFFF;
    --glass-border:  rgba(79, 12, 40, .12);
    --glass-hover:   rgba(79, 12, 40, .06);
    --text-primary:  #4F0C28;
    --text-secondary:rgba(79, 12, 40, .72);
    --text-muted:    rgba(79, 12, 40, .62);
    --input-bg:      #FFFFFF;
    --input-border:  rgba(79, 12, 40, .55);
    --input-focus-border: #FF6744;
    --input-focus-shadow: rgba(255, 103, 68, .22);
    --btn-grad-start: #FF6744;
    --btn-grad-end:   #FF6744;
    --radius:    14px;
    --radius-sm: 10px;
    --radius-xs: 8px;

    --lp-panel-bg:    #4F0C28;
    --lp-panel-ink:   #FFFFFF;
    --lp-panel-ink-2: rgba(255, 255, 255, .82);
    --lp-panel-eyebrow: #FFDED4;
    --lp-logo-filter: none;     /* logo-relais-blanc.png : mot blanc, bulle et « relais » orange */
    --lp-title-font:  var(--font-serif);
    --lp-title-weight: 400;
    --lp-btn-radius:  12px;
    --lp-btn-h:       48px;
    --lp-btn-weight:  800;
    --lp-on-accent:   #FFFFFF;
    --lp-shadow:      0 1px 2px rgba(79, 12, 40, .06), 0 8px 24px rgba(79, 12, 40, .06);
    --lp-accent-deco: #FF6744;
    --lp-err: #A61B1B; --lp-err-s: #FDE4E4;
    --lp-ok:  #1F7A4D; --lp-ok-s:  #E3F4EA;
    --lp-info:#4F0C28; --lp-info-s:#CEEDF7;   /* ciel : encarts d'information */
    --lp-page-bg:
        radial-gradient(ellipse at 86% 10%, rgba(192, 191, 235, .35) 0%, transparent 44%),
        radial-gradient(ellipse at 72% 92%, rgba(206, 237, 247, .55) 0%, transparent 46%);
}

/* ═══ 2. Socle clair commun aux quatre thèmes ═══════════════════════════════
   auth.css est pensé pour un fond sombre : halos cuivrés, grille de points
   blanche, reflets et ombres noires, verts et rouges pâles. On les remplace. */

html[data-lp-theme] body {
    background-color: var(--bg-deep);
    background-image: var(--lp-page-bg, none);
    background-attachment: fixed;
    background-size: cover;
    color: var(--text-primary);
}
html[data-lp-theme] body::before,
html[data-lp-theme] body::after,
html[data-lp-theme] .auth-layout::before { display: none; }

html[data-lp-theme] :focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* Panneau gauche : la barre latérale de l'espace, flottante comme dans les apps. */
@media (min-width: 861px) {   /* en dessous, auth.css passe sur une colonne sans panneau */
    html[data-lp-theme] .auth-layout { grid-template-columns: clamp(300px, 24vw, 380px) minmax(0, 1fr); }
    html[data-lp-theme] .auth-layout.no-illus { grid-template-columns: 1fr; }
}
html[data-lp-theme] .auth-panel-illus {
    margin: 16px 0 16px 16px;
    padding: 40px 36px 0;
    border: 1px solid var(--lp-panel-line, transparent);
    border-radius: 22px;
    background: var(--lp-panel-bg);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    color: var(--lp-panel-ink);
    box-shadow: var(--lp-shadow);
}
html[data-lp-theme] .panel-image-wrap { margin: 32px -36px 0; }
html[data-lp-theme] .auth-logo img { filter: var(--lp-logo-filter); max-width: 100%; height: auto; max-height: 32px; }
html[data-lp-theme] .auth-logo-text {
    font-family: var(--font-sans); font-size: 22px; font-weight: 700; color: var(--lp-panel-ink);
}
html[data-lp-theme] .panel-eyebrow { color: var(--lp-panel-eyebrow); }
html[data-lp-theme] .panel-title   { color: var(--lp-panel-ink); font-family: var(--lp-title-font); font-weight: var(--lp-title-weight); }
html[data-lp-theme] .panel-text    { color: var(--lp-panel-ink-2); }
html[data-lp-theme] .panel-image   { opacity: 1; }
/* L'éditeur riche de /iam enregistre chaque retour à la ligne du titre en paragraphe,
   suivi d'un paragraphe vide (<p><br></p>) : sans ceci, le titre se lit à double interligne. */
html[data-lp-theme] .panel-title p:empty,
html[data-lp-theme] .panel-title p:has(> br:only-child) { display: none; }

/* Carte : surface pleine, filet ténu, ombre douce (plus de verre dépoli). */
html[data-lp-theme] .auth-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--glass-border);
    box-shadow: var(--lp-shadow);
}
html[data-lp-theme] .auth-card::before { display: none; }
html[data-lp-theme] .auth-title {
    font-family: var(--lp-title-font);
    font-weight: var(--lp-title-weight);
    font-size: max(24px, 1.5vw);
    color: var(--text-primary);
}
html[data-lp-theme] .auth-subtitle { color: var(--text-secondary); }

html[data-lp-theme] .progress-step { background: transparent; }
html[data-lp-theme] .progress-step.active { background: var(--lp-accent-deco, var(--red)); box-shadow: none; }

/* Libellés : casse normale, comme les formulaires des espaces. */
html[data-lp-theme] .form-label {
    text-transform: none;
    letter-spacing: 0;
    font-size: max(14px, 0.66vw);
    color: var(--text-primary);
}
html[data-lp-theme] .form-input { height: 48px; color: var(--text-primary); }
html[data-lp-theme] .form-input::placeholder { color: var(--text-muted); opacity: .85; }
html[data-lp-theme] .form-input:focus {
    background: var(--input-bg);
    box-shadow: 0 0 0 3px var(--input-focus-shadow);
}
/* Le champ porte déjà son état (bordure + halo) : pas d'anneau en plus. */
html[data-lp-theme] .form-input:focus-visible { outline: none; }
html[data-lp-theme] .form-input.error { border-color: var(--lp-err); box-shadow: 0 0 0 3px var(--lp-err-s); }
html[data-lp-theme] select.form-input { background-color: var(--input-bg); }

/* Bouton principal : aplat de l'accent, sans reflet ni halo ni capitales. */
html[data-lp-theme] .btn-primary {
    height: var(--lp-btn-h);
    color: var(--lp-on-accent);
    background: linear-gradient(135deg, var(--btn-grad-start) 0%, var(--btn-grad-end) 100%);
    border-radius: var(--lp-btn-radius);
    font-weight: var(--lp-btn-weight);
    letter-spacing: 0;
    box-shadow: none;
}
html[data-lp-theme] .btn-primary::before { display: none; }
html[data-lp-theme] .btn-primary:hover:not(:disabled) {
    opacity: 1;
    background: var(--red-dark);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 8px 20px rgba(0, 0, 0, .10);
}
html[data-lp-theme] .btn-primary:active:not(:disabled) { box-shadow: none; }
html[data-lp-theme] .btn-pill {
    text-transform: none;
    letter-spacing: 0;
    font-weight: var(--lp-btn-weight);
    border-radius: var(--lp-btn-radius);
}
html[data-lp-theme] .btn-spinner { border-color: rgba(255, 255, 255, .35); border-top-color: var(--lp-on-accent); }
html[data-lp-theme] a.btn-lien { text-decoration: none; }

html[data-lp-theme] .btn-back:hover,
html[data-lp-theme] .forgot-password:hover { color: var(--red); }
html[data-lp-theme] .forgot-password { color: var(--text-secondary); }
html[data-lp-theme] .auth-passkey-link { color: var(--text-secondary); }
html[data-lp-theme] .auth-passkey-link:hover { color: var(--text-primary); }

html[data-lp-theme] .auth-email-badge,
html[data-lp-theme] .auth-sso-identity {
    background: var(--red-subtle);
    border-color: color-mix(in srgb, var(--red) 24%, transparent);
    color: var(--red);
}

/* Google / Microsoft : fond blanc imposé par leurs chartes ; contour aux couleurs de la page. */
html[data-lp-theme] .btn-sso {
    border-color: var(--input-border);
    border-radius: var(--lp-btn-radius);
    color: var(--text-primary);
    min-height: var(--lp-btn-h);
}
html[data-lp-theme] .btn-sso:hover { background: var(--glass-hover); box-shadow: none; }
html[data-lp-theme] .btn-sso-enterprise { color: var(--lp-on-accent); border-color: transparent; }
html[data-lp-theme] .btn-sso-enterprise:hover { background: var(--red-dark); }

/* Alertes : les teintes « retours système » de chaque charte. */
html[data-lp-theme] .auth-alert.error   { background: var(--lp-err-s);  border-color: color-mix(in srgb, var(--lp-err) 28%, transparent);  color: var(--lp-err); }
html[data-lp-theme] .auth-alert.success { background: var(--lp-ok-s);   border-color: color-mix(in srgb, var(--lp-ok) 28%, transparent);   color: var(--lp-ok); }
html[data-lp-theme] .auth-alert.info    { background: var(--lp-info-s); border-color: color-mix(in srgb, var(--lp-info) 28%, transparent); color: var(--lp-info); }

html[data-lp-theme] .strength-segment { background: var(--glass-border); box-shadow: none !important; }
html[data-lp-theme] .strength-segment.weak   { background: var(--lp-err); }
html[data-lp-theme] .strength-segment.fair   { background: #C2711C; }
html[data-lp-theme] .strength-segment.good   { background: #B08A12; }
html[data-lp-theme] .strength-segment.strong { background: var(--lp-ok); }
html[data-lp-theme] .criteria-item.met,
html[data-lp-theme] .criteria-item.met svg { color: var(--lp-ok); }
html[data-lp-theme] .code-feedback.valid   { color: var(--lp-ok); }
html[data-lp-theme] .code-feedback.invalid { color: var(--lp-err); }

/* Encadrés (CGU, code d'activation, MFA) : fond creusé au lieu du blanc à 3 %. */
html[data-lp-theme] .cgu-box,
html[data-lp-theme] .activation-hint,
html[data-lp-theme] .mfa-secret-details,
html[data-lp-theme] .mfa-qr-spinner { background: var(--bg-mid); }
html[data-lp-theme] .cgu-content { scrollbar-color: var(--glass-border) transparent; }
html[data-lp-theme] .forgot-sent-icon,
html[data-lp-theme] .mfa-icon {
    background: var(--red-subtle);
    border-color: color-mix(in srgb, var(--red) 24%, transparent);
}
html[data-lp-theme] .mfa-icon--setup { background: var(--lp-info-s); border-color: color-mix(in srgb, var(--lp-info) 24%, transparent); }
html[data-lp-theme] .mfa-icon--setup svg { color: var(--lp-info); }
html[data-lp-theme] .btn-copy { background: var(--glass-bg); }
html[data-lp-theme] .btn-copy:hover { background: var(--red-subtle); border-color: color-mix(in srgb, var(--red) 24%, transparent); }

html[data-lp-theme] .auth-card-footer {
    background: var(--bg-mid);
    color: var(--text-secondary);
    border-top-color: var(--glass-border);
}
html[data-lp-theme] .auth-card-footer p { margin: 0; }
html[data-lp-theme] .auth-footer,
html[data-lp-theme] .auth-back-link { color: var(--text-secondary); }
html[data-lp-theme] .auth-footer a { opacity: 1; }
html[data-lp-theme] .auth-back-link { opacity: 1; }
html[data-lp-theme] .auth-back-link:hover { color: var(--red); }

/* Page des particuliers : adresse sans compte → parcours. */
.auth-inconnu-texte {
    font-size: max(15px, 0.7vw);
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.auth-inconnu-texte strong { color: var(--text-primary); font-weight: 600; word-break: break-all; }

/* ═══ 3. Détails propres à chaque espace ════════════════════════════════════ */

/* Portails internes : pas de « retour au site » (le logo et l'adresse suffisent). */
html[data-lp-theme="psychologue"] .auth-back-link,
html[data-lp-theme="academie"] .auth-back-link,
html[data-lp-theme="relais"] .auth-back-link { display: none; }

/* Espace Pro : pas de panneau, le logo « mentalsense | Pro » tient lieu d'icône. */
html[data-lp-theme="psychologue"] .auth-card-icon { margin-bottom: 24px; }
html[data-lp-theme="psychologue"] .auth-card-icon img { width: auto; height: 34px; max-width: 220px; }
html[data-lp-theme="psychologue"] .auth-card-footer { background: #F4F8F7; }

/* Académie : la bulle en or, l'illustration « patients » n'a rien à faire là. */
html[data-lp-theme="academie"] .auth-card-icon {
    width: 48px; height: 48px;
    background-color: #C8922E;
    -webkit-mask: url('../img/bulle-rouge.png') center / contain no-repeat;
            mask: url('../img/bulle-rouge.png') center / contain no-repeat;
}
html[data-lp-theme="academie"] .auth-card-icon img { visibility: hidden; }
html[data-lp-theme="academie"] .panel-image-wrap { display: none; }
html[data-lp-theme="academie"] .auth-logo img { height: 34px; max-width: 100%; object-fit: contain; }
html[data-lp-theme="academie"] .btn-primary:hover:not(:disabled) { background: #241A10; }

/* Particuliers : ni serif ni bulle, et aucune image de bureau (pas d'employeur ici). */
html[data-lp-theme="particulier"] body { font-family: 'Figtree', system-ui, sans-serif; }
html[data-lp-theme="particulier"] .auth-card-icon { display: none; }
html[data-lp-theme="particulier"] .auth-card-header { padding-top: 40px; }
html[data-lp-theme="particulier"] .auth-title { letter-spacing: -.02em; }
html[data-lp-theme="particulier"] .panel-title { letter-spacing: -.02em; line-height: 1.12; }
html[data-lp-theme="particulier"] .panel-image-wrap { display: none; }
html[data-lp-theme="particulier"] .auth-card-footer a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

/* Relais : bulle orange, bouton qui s'éclaire d'orange au survol comme .rl-btn. */
html[data-lp-theme="relais"] .auth-card-icon {
    width: 48px; height: 48px;
    background-color: #FF6744;
    -webkit-mask: url('../img/bulle-rouge.png') center / contain no-repeat;
            mask: url('../img/bulle-rouge.png') center / contain no-repeat;
}
html[data-lp-theme="relais"] .auth-card-icon img { visibility: hidden; }
html[data-lp-theme="relais"] .panel-image-wrap { display: none; }
html[data-lp-theme="relais"] .btn-primary:hover:not(:disabled) {
    background: #FF6744;
    box-shadow: 0 4px 14px rgba(255, 103, 68, .35);
}
html[data-lp-theme="relais"] .progress-step.active { background: #FF6744; }

/* ═══ 4. Petits écrans ══════════════════════════════════════════════════════ */
@media (max-width: 860px) {
    html[data-lp-theme] body { background-attachment: scroll; }
    html[data-lp-theme] .auth-title { font-size: 24px; }
    html[data-lp-theme] .form-label { font-size: 14px; }
}