/* ============================================================
   Posthum.ai — App Styles (design system aligné sur le site front)
   ============================================================ */

/* ── POLICES (auto-hébergées, /fonts/) ──
   Plus d'appel à Google Fonts : ni @import bloquant, ni adresse IP des visiteurs
   transmise à un tiers. Fichiers woff2 de Google Fonts (licence SIL OFL 1.1),
   sous-ensembles latin et latin-ext ; polices variables, d'où les plages de graisse. */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300 400;
    font-display: swap;
    src: url("/fonts/cormorant-garamond-italic-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300 400;
    font-display: swap;
    src: url("/fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("/fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("/fonts/cormorant-garamond-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/fonts/dm-mono-300-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/fonts/dm-mono-300-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/dm-mono-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/dm-mono-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 200 400;
    font-display: swap;
    src: url("/fonts/outfit-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 200 400;
    font-display: swap;
    src: url("/fonts/outfit-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── VARIABLES (mêmes tokens que le site front) ── */
:root {
    --ink: #0a0a0f;
    --void: #050508;
    --ash: #1a1a2e;
    --mist: #9c9cb2;
    --silver: #cdcddb;
    --gold: #c9a96e;
    --gold-light: #e8d5b0;
    --white: #f2f1f7;
    --accent: #8b7fb0;

    /* Bordure de champ : 3,4 à 3,7:1 contre le fond du champ et de la carte
       (WCAG 1.4.11 — l'ancienne bordure blanche à 9 % plafonnait à 1,2:1). */
    --field-border: rgba(200, 200, 216, 0.5);

    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-mono: 'DM Mono', 'Courier New', monospace;
    --font-body: 'Outfit', system-ui, sans-serif;

    --nav-height: 64px;
    --transition-fast: 0.2s ease;
    --transition-medium: 0.35s ease;

    /* Thème sombre unique : contrôles natifs (date, select, barres de
       défilement, listes déroulantes) rendus en sombre. */
    color-scheme: dark;
}

/* ── RESET ── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 100 % = 16 px par défaut, mais respecte la taille choisie dans le navigateur */
html {
    font-size: 100%;
}

/* L'attribut `hidden` doit toujours l'emporter : sans cette règle, toute
   déclaration `display` d'auteur (flex, inline-block…) annule la règle UA. */
[hidden] {
    display: none !important;
}

/* Focus clavier visible partout (champs, boutons, liens) */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

body {
    background: var(--void);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Grain overlay (identique au site front) */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: 0.35;
    pointer-events: none;
    z-index: 9000;
}

a {
    color: var(--gold);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--gold-light);
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 300;
    line-height: 1.2;
}

/* ── Layout ── */
.container {
    max-width: 480px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    width: 100%;
}

.page-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

/* ── Card ── */
.card {
    background: rgba(26, 26, 46, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 2.5rem 2rem;
    position: relative;
}

/* Crochets dorés (esthétique Posthum) */
.card::before,
.card::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: rgba(201, 169, 110, 0.3);
    border-style: solid;
}

.card::before {
    top: -1px;
    left: -1px;
    border-width: 1px 0 0 1px;
}

.card::after {
    bottom: -1px;
    right: -1px;
    border-width: 0 1px 1px 0;
}

.card h1 {
    font-size: 1.8rem;
    color: var(--white);
    margin-bottom: 0.35rem;
}

.card .subtitle {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: var(--mist);
    text-transform: uppercase;
    margin-bottom: 2rem;
}

/* ── Form ── */
.form-group {
    margin-bottom: 1.1rem;
}

label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    color: var(--mist);
    text-transform: uppercase;
    margin-bottom: 0.45rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
.form-control {
    width: 100%;
    background: rgba(10, 10, 15, 0.85);
    border: 1px solid var(--field-border);
    color: var(--white);
    padding: 0.85rem 1rem;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 300;
    transition: border-color var(--transition-fast);
    -webkit-appearance: none;
    border-radius: 0;
}

/* Date et liste déroulante : on garde l'apparence native (sélecteur de date,
   flèche de la liste), rendue sombre grâce à `color-scheme: dark`. */
input[type="date"].form-control,
select.form-control {
    -webkit-appearance: auto;
    appearance: auto;
    cursor: pointer;
}

input:focus,
textarea:focus,
select.form-control:focus {
    border-color: var(--gold);
}

/* Indication de saisie lisible (5,8:1 sur le champ ; 1,7:1 auparavant) */
input::placeholder,
textarea::placeholder {
    color: var(--mist);
}

textarea {
    resize: vertical;
    min-height: 80px;
}

/* Deux champs côte à côte, empilés sur petit écran */
.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
    /* champs alignés en bas même si un libellé est plus haut que l'autre */
    align-items: end;
}

/* Rangée dont un champ porte une aide dessous : alignement par le haut */
.form-row-top {
    align-items: start;
}

/* Aide sous un champ, reliée par aria-describedby */
.form-help {
    font-size: 0.8rem;
    line-height: 1.5;
    margin-top: 0.4rem;
}

/* Bloc « Naissance » du profil (vérification officielle du décès) */
.profil-birth {
    border: 1px solid rgba(201, 169, 110, 0.3);
    border-radius: 8px;
    padding: 1rem 1.25rem 0.25rem;
    margin: 0 0 1.25rem;
    min-width: 0;
}

.profil-birth legend {
    padding: 0 0.4rem;
    font-family: var(--font-mono);
    color: var(--gold);
}

.profil-birth-intro {
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0 0 1rem;
}

/* Mention « (facultatif) » dans un libellé : même corps que le libellé */
label .text-muted {
    font-size: inherit;
}

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* Carte de formulaire : largeur de lecture confortable */
.form-card {
    max-width: 760px;
}

/* Titre de carte sans classe propre : un peu d'air avant le premier champ */
.card > h2:not([class]) {
    margin-bottom: 1rem;
}

/* Case à cocher + texte : le libellé n'hérite pas du style des étiquettes de champ */
.form-check {
    margin: 1rem 0;
}

.form-check label {
    font-family: var(--font-body);
    font-size: 0.9rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--silver);
}

.form-check input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    accent-color: var(--gold);
}

/* Inscription : case de consentement CGU / confidentialité */
.consent-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.consent-check input[type="checkbox"] {
    margin-top: 0.2rem;
}

.consent-check input[aria-invalid="true"] {
    outline: 2px solid rgba(232, 147, 154, 0.85);
    outline-offset: 2px;
}

/* Liens légaux (CGU, confidentialité, contact RGPD) — pages publiques */
.legal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    padding: 1rem 1.5rem 1.5rem;
    font-size: 0.8rem;
}

.legal-footer a {
    color: var(--mist);
}

.legal-footer a:hover,
.legal-footer a:focus-visible {
    color: var(--gold-light);
}

/* Profil : export des données (RGPD) — même ton que la suppression */
.account-export {
    margin-top: 2rem;
}

.account-export p {
    color: var(--silver);
    line-height: 1.6;
}

.account-export-help {
    font-size: 0.8rem;
}

.account-export-status {
    margin: 0.75rem 0;
}

.account-export-status[hidden],
.account-export-progress[hidden] {
    display: none;
}

.account-export-progress {
    display: block;
    width: 100%;
    height: 0.5rem;
    margin-top: 0.4rem;
    accent-color: var(--gold-light);
}

/* Profil : suppression du compte (RGPD) — ton sobre, séparée du formulaire */
.account-delete {
    margin-top: 2rem;
}

.account-delete p {
    color: var(--silver);
    line-height: 1.6;
}

.account-delete-list {
    margin: 0.5rem 0 1rem 1.25rem;
    color: var(--silver);
    line-height: 1.8;
}

.account-delete-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
}

.account-delete-check input[type="checkbox"] {
    margin-top: 0.15rem;
}

.account-delete-help {
    font-size: 0.8rem;
    margin-top: 0.4rem;
}

.account-delete-confirm {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(220, 80, 80, 0.35);
    border-left: 3px solid rgba(220, 80, 80, 0.6);
    background: rgba(220, 80, 80, 0.06);
}

.account-delete-confirm[hidden] {
    display: none;
}

/* Rangée de boutons en pied de formulaire */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.form-actions .btn {
    width: auto;
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 1rem 2rem;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: all var(--transition-medium);
    width: 100%;
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.btn-primary {
    background: var(--gold);
    color: var(--void);
}

.btn-primary:hover:not(:disabled) {
    background: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(201, 169, 110, 0.28);
}

.btn-secondary {
    background: transparent;
    color: var(--silver);
    border: 1px solid rgba(200, 200, 216, 0.22);
}

.btn-secondary:hover:not(:disabled) {
    border-color: rgba(200, 200, 216, 0.6);
    color: var(--white);
}

/* Bouton secondaire doré (contour) : 8,3:1 pour le texte, 3,3:1 pour le contour */
.btn-outline {
    background: transparent;
    color: var(--gold);
    border: 1px solid rgba(201, 169, 110, 0.55);
}

.btn-outline:hover:not(:disabled) {
    background: rgba(201, 169, 110, 0.08);
    border-color: var(--gold);
    color: var(--gold-light);
}

/* Petit bouton : largeur au contenu, cible tactile de 36 px minimum.
   Double classe pour l'emporter sur le padding de .btn-ghost (main.css). */
.btn.btn-sm {
    width: auto;
    min-height: 2.25rem;
    min-width: 2.25rem;
    padding: 0.5rem 1rem;
    gap: 0.4rem;
}

/* ── Alerts ── */
.alert {
    font-family: var(--font-body);
    font-size: 0.85rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    border-left: 2px solid transparent;
    line-height: 1.5;
}

.alert-error {
    background: rgba(220, 80, 80, 0.08);
    border-left-color: rgba(220, 80, 80, 0.6);
    color: #e8939a;
}

/* Erreur rattachée à un champ (showFieldError d'api.js) : message sous le champ,
   relié par aria-describedby ; bordure du champ marqué aria-invalid. */
.field-error {
    font-family: var(--font-body);
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0.35rem 0 0;
    color: #e8939a;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
.dropzone[aria-invalid="true"] {
    border-color: rgba(232, 147, 154, 0.85);
}

.alert-success {
    background: rgba(100, 200, 150, 0.08);
    border-left-color: rgba(100, 200, 150, 0.5);
    color: #8dd8b0;
}

.alert-info {
    background: rgba(201, 169, 110, 0.07);
    border-left-color: rgba(201, 169, 110, 0.4);
    color: var(--gold-light);
}

/* Encadré « à lire attentivement » : cadre doré complet + filet épais, pour
   le distinguer de .alert-info (filet seul). Texte 9,5:1, titres 9,9:1. */
.alert-warning {
    background: rgba(201, 169, 110, 0.1);
    border: 1px solid rgba(201, 169, 110, 0.35);
    border-left: 3px solid var(--gold);
    color: var(--silver);
}

.alert-warning strong {
    color: var(--gold-light);
    font-weight: 400;
}

/* Lien dans un encadré : souligné pour ne pas reposer sur la seule couleur */
.alert-link {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.alert-link:hover {
    color: var(--gold-light);
}

.alert.hidden {
    display: none;
}

/* ── BIRTH INFO BANNER ── */
.birth-info-banner {
    background: rgba(248, 113, 113, 0.08);
    border-bottom: 1px solid rgba(248, 113, 113, 0.2);
    padding: 0.75rem 2rem;
}

.birth-info-banner-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--silver);
}

.birth-info-banner svg {
    color: #f87171;
}

.birth-info-link {
    color: var(--gold);
    text-decoration: none;
    margin-left: 0.5rem;
    white-space: nowrap;
}

.birth-info-link:hover {
    text-decoration: underline;
}

/* ── NAVIGATION ── */
nav {
    height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    background: rgba(5, 5, 8, 0.97);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    position: relative;
    z-index: 100;
}

nav .brand {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: var(--gold);
    text-decoration: none;
}

nav .brand span {
    font-style: italic;
    color: var(--mist);
    font-size: 0.9em;
}

nav .nav-links a {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mist);
    margin-left: 1.5rem;
    transition: color var(--transition-fast);
}

nav .nav-links a:hover {
    color: var(--gold);
    text-decoration: none;
}

/* ── Table ── */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

th,
td {
    padding: 0.65rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

th {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mist);
    font-weight: 400;
}

tr:last-child td {
    border-bottom: none;
}

/* ── Utility ── */
.text-center {
    text-align: center;
}

.mt-1 {
    margin-top: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.mt-4 {
    margin-top: 2rem;
}

.w-full {
    width: 100%;
    justify-content: center;
}

.text-muted {
    color: var(--mist);
    font-size: 0.82rem;
}

.text-muted a {
    color: var(--gold);
    opacity: 0.8;
}

.text-muted a:hover {
    opacity: 1;
    color: var(--gold-light);
}

/* ── Spinner ── */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(201, 169, 110, 0.3);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 0.5rem;
}

.spinner.spinner--sm {
    width: 12px;
    height: 12px;
    margin-right: 0;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Préférence « réduire les animations » : on coupe les clignotements,
   rebonds, survols animés et défilements doux. Les indicateurs de chargement
   gardent une rotation lente pour rester perceptibles. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .spinner,
    .loader-ring,
    .generating-spinner,
    .quality-spinner {
        animation-duration: 1.5s !important;
        animation-iteration-count: infinite !important;
    }
}

/* ── Paiement simulé du programme testeurs (billing-simulated.html) ───────── */
.simulated-card {
    max-width: 560px;
    margin: 0 auto;
}

.simulated-notice {
    margin: 1.25rem 0;
}

.simulated-notice strong {
    display: block;
    margin-bottom: 0.35rem;
}

.simulated-recap {
    margin: 1.25rem 0;
}

.simulated-plan {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--white);
    margin: 0;
}

.simulated-price {
    font-size: 1.1rem;
    color: var(--gold-light);
    margin: 0.35rem 0;
}

.simulated-actions {
    gap: 0.75rem;
}

/* ── Styles sortis des attributs style= et des balises <style> (CSP : style-src sans 'unsafe-inline') ── */

/* Rangée de boutons centrée (404, erreur du routeur) */
.btn-row-center {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Bouton pleine largeur */
.btn-block {
    width: 100%;
}

/* Icône en tête d'un bloc flex (avertissements, encadrés) */
.icon-leading {
    flex-shrink: 0;
    margin-top: 1px;
}

.icon-leading--2px {
    margin-top: 2px;
}

/* Icône devant le libellé d'un bouton */
.icon-before-label {
    vertical-align: -2px;
    margin-right: 4px;
}

/* Aide sous un champ mot de passe (reset-password, set-password) */
.password-help {
    margin-top: 0.4rem;
}

/* Invitation d'un proche (invitation.html, invitation.js) */
.invitation-container {
    max-width: 600px;
    margin-top: 2rem;
}

.invitation-intro {
    line-height: 1.8;
    margin: 1.5rem 0;
}

.invitation-note {
    font-size: 0.85rem;
    line-height: 1.6;
}

.invitation-result-text {
    margin: 0 0 1rem 0;
}

.invitation-result-hint {
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    color: #bbb;
}

.invitation-register-btn {
    display: inline-block;
    text-decoration: none;
}

/* ── Inscription (register.html) : choix du rôle et note héritier ── */
.role-selector {
    margin-bottom: 1.5rem;
}

.role-selector-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mist);
    margin-bottom: 0.75rem;
}

.role-card {
    display: block;
    cursor: pointer;
    margin-bottom: 0.5rem;
}

.role-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.role-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.role-card:hover .role-card-inner {
    border-color: rgba(201, 169, 110, 0.3);
    background: rgba(201, 169, 110, 0.04);
}

.role-card input:checked~.role-card-inner {
    border-color: var(--gold);
    background: rgba(201, 169, 110, 0.08);
}

.role-card input:focus-visible~.role-card-inner {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.role-card-icon {
    color: var(--gold);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.role-card-text strong {
    display: block;
    font-size: 0.875rem;
    color: var(--white);
    margin-bottom: 0.2rem;
}

.role-card-text span {
    font-size: 0.75rem;
    color: var(--mist);
    line-height: 1.4;
}

.heir-info-box {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(201, 169, 110, 0.06);
    border: 1px solid rgba(201, 169, 110, 0.15);
    border-radius: 6px;
    margin-bottom: 1rem;
    color: var(--gold-light);
    font-size: 0.75rem;
}

.heir-info-box p {
    margin: 0;
    color: var(--mist);
}