:root {
    /* Azulejo Nocturne — palette validée par contraste WCAG AA (voir CLAUDE.md §13) */
    --prazo-ink: #0F2129;          /* fond sombre (header, footer, hero, pages "vitrine") */
    --prazo-ink-2: #152E38;        /* panneau légèrement plus clair sur fond ink (cartes) */
    --prazo-tile: #1C4D67;         /* bleu azulejo — remplace l'ancien teal, sert de couleur de marque */
    --prazo-tile-soft: #EAF1F2;
    --prazo-plaster: #EDE4D2;      /* texte clair sur fond sombre */
    --prazo-plaster-dim: #C9BFA9;  /* texte secondaire sur fond sombre */
    --prazo-gold: #C79A4B;         /* accent hairline / eyebrow / lien sur fond sombre (contraste 6.4:1 sur ink) */
    --prazo-terracotta: #9C4329;   /* texte/liens/fond de bouton — volontairement plus foncé que la maquette
                                       pour rester lisible (AA) en texte sur blanc ET en fond de bouton avec
                                       texte clair. Ne jamais l'éclaircir sans revérifier le contraste. */
    --prazo-terracotta-dark: #7A3420;
    --prazo-terracotta-bright: #C1573A; /* décoratif UNIQUEMENT : gros titres, icônes, traits — jamais comme
                                            couleur de texte de taille normale (contraste insuffisant). */
    --prazo-terracotta-soft: #FBEAE4;
    --prazo-muted: #5C7078;
    --prazo-border: #e4e9e9;
    --prazo-bg-soft: #F2EEE6;
    --prazo-shadow: 0 1px 3px rgba(19, 48, 56, 0.06), 0 8px 24px rgba(19, 48, 56, 0.06);
    --prazo-shadow-hover: 0 4px 10px rgba(19, 48, 56, 0.08), 0 16px 32px rgba(19, 48, 56, 0.10);
    --prazo-radius: 14px;
    --prazo-radius-lg: 22px;
    --prazo-container: 1080px;

    /* alias rétro-compatibles (composants existants écrits avant le rebrand) */
    --prazo-teal: var(--prazo-tile);
    --prazo-teal-dark: var(--prazo-ink);
    --prazo-teal-soft: var(--prazo-tile-soft);
}

* { box-sizing: border-box; }

html {
    background: #ffffff;
    color-scheme: light;
    /* Les blocs plein-largeur (.hero/.dark-page, technique 100vw) peuvent déborder de la largeur
       réelle du viewport quand une scrollbar verticale est présente — masqué ici en plus de body
       pour empêcher tout micro-débordement horizontal, quel que soit l'élément scrollable retenu
       par le navigateur. */
    overflow-x: hidden;
    /* Piège #19 (mobile) : sans ceci, Chrome/Samsung Internet sur Android appliquent leur propre
       algorithme de "font boosting" qui agrandit automatiquement le texte jugé trop petit pour être
       lisible — invisible sur un émulateur desktop (qui ne reproduit pas ce comportement), mais
       repéré sur un vrai téléphone : le sélecteur de langue FR/PT du header, agrandi par ce mécanisme,
       chevauchait le bouton "Essai gratuit" alors que les deux ont un espacement confortable à taille
       de police déclarée. Fige le texte à sa taille CSS exacte sur tous les appareils.
       Voir aussi https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    color: var(--prazo-tile);
    background: #ffffff;
    margin: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* Colonne pleine hauteur (header/main/footer) — nécessaire pour que .app-shell (sidebar cliente,
       §56) puisse s'étirer jusqu'au footer même quand le contenu de la page est court (ex. tableau de
       bord juste après inscription, une seule carte "Bienvenue"). Sans ça, .app-shell n'a que la
       hauteur intrinsèque de son propre contenu à disposition. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4 {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
    text-wrap: balance;
}

h1 { font-size: clamp(32px, 5vw, 48px); }
h2 { font-size: clamp(24px, 3.4vw, 32px); }
h3 { font-size: 20px; font-weight: 600; }

p { margin: 0 0 16px; }

a {
    color: var(--prazo-terracotta);
    text-decoration: none;
}

a:hover {
    color: var(--prazo-terracotta-dark);
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--prazo-terracotta-bright);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    background: var(--prazo-ink);
    color: var(--prazo-plaster);
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    z-index: 200;
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 12px;
    color: var(--prazo-plaster);
}

.muted { color: var(--prazo-muted); }
.text-sm { font-size: 14px; }
.text-lg { font-size: 18px; }
.mono { font-family: ui-monospace, 'SF Mono', Consolas, 'Cascadia Mono', monospace; font-variant-numeric: tabular-nums; }

/* --- Layout ------------------------------------------------------------ */

.container {
    max-width: var(--prazo-container);
    margin: 0 auto;
    padding: 0 24px;
}

/* Constrainte par défaut pour TOUTES les pages (pas de classe à ajouter page par page) — les blocs
   plein-largeur (.hero, .dark-page) s'en échappent volontairement via la technique 100vw ci-dessous. */
main {
    max-width: var(--prazo-container);
    margin: 0 auto;
    padding: 48px 24px;
    width: 100%;
}

/* Sur les pages avec sidebar cliente (.app-shell, §56) uniquement : <main> grandit pour occuper tout
   l'espace vertical restant entre le header et le footer, afin que .app-shell (voir plus bas) puisse
   ensuite s'étirer jusqu'en bas. Scope volontairement limité à ces pages (:has déjà utilisé au §59
   pour .grid-3:has(.stat-tile)) — les pages courtes du site public gardent leur hauteur naturelle. */
main:has(.app-shell) {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.section { padding: 64px 0; }
.section-sm { padding: 40px 0; }
.section-alt { background: var(--prazo-bg-soft); }

/* --- Pages "vitrine" en thème sombre (Azulejo Nocturne) -----------------------
   Enveloppe à poser autour du contenu d'une page publique pour lui donner le traitement
   sombre plein-largeur. Inscription/Connexion en font partie (parcours d'entrée, pas
   l'usage de l'app) ; les pages APRÈS connexion (tableau de bord, coffre, back-office,
   onboarding) restent volontairement en thème clair fonctionnel — non enveloppées. */
.dark-page {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: -48px;
    padding: 0 0 72px;
    background: var(--prazo-ink);
    color: var(--prazo-plaster);
}

.dark-page > .container { padding-top: 48px; }
.dark-page h1, .dark-page h2, .dark-page h3 { color: var(--prazo-plaster); }
.dark-page .muted { color: var(--prazo-plaster-dim); }
.dark-page .eyebrow { color: var(--prazo-gold); }
.dark-page a { color: var(--prazo-gold); }
.dark-page a:hover { color: #E0BC72; }
.dark-page a.btn, .dark-page a.btn-primary { color: #ffffff; }

.dark-page .card {
    background: var(--prazo-ink-2);
    border-color: rgba(199, 154, 75, 0.25);
    color: var(--prazo-plaster);
    box-shadow: none;
}

.dark-page .card:hover, .dark-page a.card:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }

.dark-page .card-icon { background: rgba(199, 154, 75, 0.16); color: var(--prazo-gold); }

.dark-page .badge {
    background: rgba(199, 154, 75, 0.14);
    color: var(--prazo-plaster);
    border: 1px solid rgba(199, 154, 75, 0.35);
}

.dark-page .btn-outline {
    color: var(--prazo-plaster);
    border-color: rgba(237, 228, 212, 0.35);
}

.dark-page .btn-outline:hover { background: rgba(237, 228, 212, 0.08); color: var(--prazo-plaster); }

/* Erreurs/validation lisibles sur fond sombre (le rouge par défaut, pensé pour fond blanc,
   tombe sous le seuil de contraste AA sur ink) — voir CLAUDE.md piège #14 sur ce même sujet. */
.dark-page .validation-message,
.dark-page .form-erreur { color: #FF8A80; }

/* --- Carte d'authentification (Inscription/Connexion) --------------------------
   Centre la carte verticalement dans la page sombre plutôt que de laisser un formulaire
   étroit flotter dans un grand vide — c'est ce vide qui donnait l'impression de page cassée. */
.auth-shell {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px 0;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--prazo-ink-2);
    border: 1px solid rgba(199, 154, 75, 0.25);
    border-radius: var(--prazo-radius-lg);
    padding: 40px;
}

.auth-card h1 { font-size: 26px; margin-bottom: 8px; }
.auth-card .lede { color: var(--prazo-plaster-dim); font-size: 14px; margin-bottom: 24px; }
.auth-card form > div { margin-bottom: 18px; }
.auth-card label { color: var(--prazo-plaster-dim); display: block; margin-bottom: 6px; }
.auth-card input, .auth-card select { width: 100%; }
.auth-card button[type=submit] { width: 100%; margin-top: 4px; }
.auth-card .validation-message { display: block; font-size: 13px; margin-top: 4px; }
.auth-card p:last-child { margin-bottom: 0; }

@media (max-width: 480px) {
    .auth-card { padding: 28px; }
}

.dark-page hr.gold-rule {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--prazo-gold), transparent);
    margin: 0;
}

.dark-page input, .dark-page select, .dark-page textarea {
    background: var(--prazo-ink-2);
    border-color: rgba(199, 154, 75, 0.3);
    color: var(--prazo-plaster);
}

.dark-page label { color: var(--prazo-plaster-dim); }

/* motif azulejo — losanges dorés en trame diagonale, purement décoratif (CSS, aucune image) */
.tile-field {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(45deg, transparent 48%, rgba(199, 154, 75, 0.16) 49%, rgba(199, 154, 75, 0.16) 51%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, rgba(199, 154, 75, 0.16) 49%, rgba(199, 154, 75, 0.16) 51%, transparent 52%);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, black, transparent 85%);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 85%);
    pointer-events: none;
}

/* --- Boutons ------------------------------------------------------------ */

.btn, button, input[type=submit] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    padding: 12px 22px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-primary, button, input[type=submit] {
    background: var(--prazo-terracotta);
    color: #ffffff;
}

.btn-primary:hover, button:hover, input[type=submit]:hover {
    background: var(--prazo-terracotta-dark);
    color: #ffffff;
}

.btn-dark {
    background: var(--prazo-ink);
    color: #ffffff;
}

.btn-dark:hover { background: #081217; color: #ffffff; }

.btn-outline {
    background: transparent;
    color: var(--prazo-tile);
    border: 1.5px solid var(--prazo-border);
}

.btn-outline:hover {
    background: var(--prazo-tile-soft);
    color: var(--prazo-tile);
}

.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn-block { width: 100%; }

/* --- Cartes ------------------------------------------------------------ */

.card {
    display: block;
    border: 1px solid var(--prazo-border);
    border-radius: var(--prazo-radius);
    padding: 24px;
    background: #ffffff;
    color: inherit;
    box-shadow: var(--prazo-shadow);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

a.card:hover, .card.card-hover:hover {
    box-shadow: var(--prazo-shadow-hover);
    transform: translateY(-2px);
}

.card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--prazo-terracotta-soft);
    color: var(--prazo-terracotta);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
}

.card-icon svg {
    width: 22px;
    height: 22px;
}

.icon-inline {
    width: 15px;
    height: 15px;
    vertical-align: -2px;
    margin-right: 5px;
    flex-shrink: 0;
}

/* --- Badge / eyebrow ---------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--prazo-tile-soft);
    color: var(--prazo-tile);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
}

.eyebrow {
    color: var(--prazo-terracotta);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    display: block;
}

/* --- Grilles ------------------------------------------------------------ */

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 860px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

    /* Exception : une grille de .stat-tile (chiffre + libellé, contenu minimal) reste lisible en 2
       colonnes même à 375px — contrairement aux cartes tarifs/fonctionnalités (grid-3/grid-4 ailleurs)
       qui ont besoin de la pleine largeur pour leurs listes de fonctionnalités. Repéré en revoyant le
       mobile (15/07) : 3-4 tuiles empilées en pleine largeur imposaient un défilement inutile avant
       d'atteindre le contenu réel de la page. */
    .grid-3:has(.stat-tile), .grid-4:has(.stat-tile) { grid-template-columns: repeat(2, 1fr); }
}

/* --- Back-office (admin) ------------------------------------------------ */

.admin-nav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--prazo-border);
}

.admin-nav a {
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--prazo-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.admin-nav a:hover { color: var(--prazo-tile); }

.admin-nav a.active {
    color: var(--prazo-tile);
    border-bottom-color: var(--prazo-tile);
}

.stat-tile {
    border: 1px solid var(--prazo-border);
    border-radius: var(--prazo-radius);
    padding: 18px 20px;
    background: #ffffff;
    box-shadow: var(--prazo-shadow);
}

.stat-tile .n {
    font-size: 30px;
    font-weight: 700;
    color: var(--prazo-ink);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.stat-tile .l {
    font-size: 13px;
    color: var(--prazo-muted);
    margin-top: 4px;
}

.stat-tile.stat-warning .n { color: #b26a00; }
.stat-tile.stat-danger .n { color: #b00020; }

.admin-section { margin-top: 36px; }
.admin-section h2 { font-size: 17px; margin-bottom: 14px; }

.data-table-wrap {
    border: 1px solid var(--prazo-border);
    border-radius: var(--prazo-radius);
    overflow: hidden;
    background: #ffffff;
    box-shadow: var(--prazo-shadow);
}

.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }

.data-table th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--prazo-muted);
    background: var(--prazo-bg-soft);
    padding: 11px 16px;
    font-weight: 700;
}

.data-table td { padding: 12px 16px; border-top: 1px solid var(--prazo-border); vertical-align: middle; }
.data-table tbody tr:hover { background: var(--prazo-bg-soft); }
.data-table tbody tr.row-dimmed { opacity: 0.5; }

.badge-success { background: #e3f2e5; color: #2e7d32; }
.badge-warning { background: #fff3e0; color: #b26a00; }
.badge-danger { background: #fdeceb; color: #b00020; }
.badge-neutral { background: var(--prazo-bg-soft); color: var(--prazo-muted); }

/* --- Barre de progression (quota coffre-fort, checklist succession...) -- */
.progress-bar { height: 8px; border-radius: 999px; background: var(--prazo-bg-soft); overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--prazo-tile); border-radius: 999px; transition: width 0.3s ease; }
.progress-bar-fill.progress-danger { background: #b00020; }

/* --- Espace client (sidebar persistante, §56) --------------------------- */
/* Avant : chaque page (Tableau de bord, Coffre, Famille…) répétait ses propres liens de retour en texte
   inline, dupliqués deux fois dans TableauDeBord.razor lui-même — aucun repère constant d'où on se
   trouve. <main> contraint déjà la largeur (voir plus haut), .app-shell n'a donc qu'à répartir sidebar +
   contenu à l'intérieur, sans réappliquer de max-width. */

.app-shell {
    display: flex;
    /* stretch (au lieu de flex-start) : la sidebar prend la même hauteur que .app-content — combiné à
       main:has(.app-shell){flex:1} ci-dessus, elle va donc jusqu'au footer même sur une page courte
       (ex. tableau de bord juste après inscription), au lieu de s'arrêter à la hauteur de ses propres
       liens de nav. Demandé par Carlos (15/07) : "mets dans tout l'hauteur le menu". */
    align-items: stretch;
    flex: 1;
    gap: 32px;
}

.app-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--prazo-ink);
    border-radius: var(--prazo-radius-lg);
    padding: 18px 12px;
    position: sticky;
    top: 24px;
}

.app-sidebar-foyer {
    padding: 6px 10px 14px;
    border-bottom: 1px solid rgba(237, 228, 212, 0.14);
    margin-bottom: 10px;
}

.app-sidebar-foyer .nom {
    font-weight: 600;
    color: var(--prazo-plaster);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-sidebar-plan {
    margin-top: 6px;
    background: rgba(237, 228, 212, 0.12);
    color: var(--prazo-gold);
}

.app-sidebar-nav { display: flex; flex-direction: column; gap: 2px; }

.app-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--prazo-plaster-dim);
    font-size: 14px;
    font-weight: 500;
}

.app-sidebar-nav a svg { width: 18px; height: 18px; flex-shrink: 0; }
.app-sidebar-nav a:hover { background: rgba(237, 228, 212, 0.08); color: var(--prazo-plaster); }
.app-sidebar-nav a.active { background: var(--prazo-tile); color: #ffffff; }

.app-sidebar-divider { height: 1px; background: rgba(237, 228, 212, 0.14); margin: 10px 8px; }

.app-sidebar-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(237, 228, 212, 0.14); }
.app-sidebar-foot button { width: 100%; font-size: 13px; padding: 8px 12px; background: transparent; color: var(--prazo-plaster-dim); border: 1.5px solid rgba(237, 228, 212, 0.25); }
.app-sidebar-foot button:hover { background: rgba(237, 228, 212, 0.08); color: var(--prazo-plaster); }

/* width:100% + overflow-x:hidden nécessaires EN PLUS de min-width:0 — repéré en revérifiant le mobile
   (15/07, §59) : sans eux, un <table> large (ex. colonnes Email/Rôle/Membre depuis de /famille)
   forçait .app-content à s'élargir au-delà de .app-shell malgré min-width:0 (min-width:0 ne joue son
   rôle de plancher automatique que sur l'axe PRINCIPAL du flex — ici l'axe transversal en
   flex-direction:column sur mobile, gouverné par align-items:stretch, qui peut être débordé par le
   contenu sans qu'un simple min-width:0 le corrige). Résultat avant correctif : html/body étant en
   overflow-x:hidden (règle globale), le débordement était silencieusement ROGNÉ plutôt que rendu
   scrollable via la règle "table { overflow-x:auto }" — la colonne "Membre depuis" devenait
   inaccessible, pas juste décalée, sans aucun indice visuel (pas de barre de défilement visible). */
.app-content { flex: 1; min-width: 0; width: 100%; overflow-x: hidden; }

@media (max-width: 900px) {
    /* flex-wrap produisait des rangées inégales (texte de longueur variable → 1, 2 ou 3 par rangée,
       aspect "en escalier" repéré par Carlos) — une grille 2 colonnes garantit un alignement régulier
       quelle que soit la longueur du libellé. Icône au-dessus du libellé (plutôt qu'à côté) pour que
       chaque tuile reste compacte et carrée, moins de défilement avant d'atteindre le contenu. */
    .app-shell { flex-direction: column; gap: 16px; }
    .app-sidebar { width: 100%; position: static; padding: 14px 10px; }
    .app-sidebar-foyer { text-align: center; }
    .app-sidebar-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .app-sidebar-nav a { flex-direction: column; gap: 4px; padding: 10px 6px; font-size: 12.5px; text-align: center; }
    .app-sidebar-nav a svg { width: 20px; height: 20px; }
    .app-sidebar-divider { display: none; }
}

@media (min-width: 861px) and (max-width: 1000px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* --- Tables (coffre, famille, back-office) ------------------------------- */
/* Trouvé lors de l'audit responsive du 09/07 : un <table> sans wrapper déborde silencieusement du
   viewport sur mobile (overflow-x:hidden sur html/body le rogne, jamais scrollable — le lien
   "Télécharger" du coffre-fort par ex. tombait hors écran, totalement inatteignable). Règle globale
   plutôt qu'un correctif page par page : n'importe quel <table>, présent ou futur, devient un bloc
   scrollable horizontalement dès qu'il dépasse — jamais la page entière qui déborde. */
table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* --- Tarifs ------------------------------------------------------------ */

.plan-card { display: flex; flex-direction: column; }
.plan-card.plan-featured { border-color: var(--prazo-gold); box-shadow: 0 0 0 1px var(--prazo-gold); }
.plan-card .plan-badge {
    align-self: flex-start;
    background: var(--prazo-gold);
    color: var(--prazo-ink);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.plan-card .plan-price { font-family: 'Fraunces', Georgia, serif; font-size: 34px; font-weight: 600; margin: 8px 0 0; }
.plan-card .plan-price small { font-size: 14px; font-weight: 400; }
.plan-card .plan-period { font-size: 13px; margin-bottom: 20px; }
.plan-card ul { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.plan-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin-bottom: 10px; }
.plan-card li::before {
    content: "";
    width: 6px;
    height: 10px;
    margin-top: 4px;
    flex-shrink: 0;
    border-right: 2px solid var(--prazo-gold);
    border-bottom: 2px solid var(--prazo-gold);
    transform: rotate(45deg);
}
.plan-card li.plan-non-inclus { opacity: 0.45; }
.plan-card li.plan-non-inclus::before {
    width: 10px;
    height: 0;
    margin-top: 8px;
    border-right: none;
    border-bottom: 2px solid var(--prazo-muted);
    transform: none;
}

/* --- Ledger : bandeau d'échéances réelles (motif signature Azulejo Nocturne) --- */

.ledger-panel {
    border: 1px solid rgba(199, 154, 75, 0.3);
    border-radius: var(--prazo-radius);
    padding: 36px;
}

.dates-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 28px; }

.date-cell { border-left: 1px solid rgba(199, 154, 75, 0.3); padding-left: 16px; }
.date-cell .d { font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 21px; color: var(--prazo-gold); font-variant-numeric: tabular-nums; }
.date-cell .l { font-size: 13px; color: var(--prazo-plaster-dim); margin-top: 6px; }

@media (max-width: 820px) { .dates-strip { grid-template-columns: repeat(2, 1fr); } }

/* --- Header ------------------------------------------------------------ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(15, 33, 41, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(199, 154, 75, 0.25);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.site-nav a {
    color: var(--prazo-plaster);
    font-weight: 500;
    font-size: 15px;
    opacity: 0.9;
}

.site-nav a:hover { opacity: 1; color: var(--prazo-gold); }

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.lang-switch a {
    color: var(--prazo-plaster-dim);
}

.lang-switch a:hover {
    color: var(--prazo-gold);
}

.header-actions .btn-outline {
    color: var(--prazo-plaster);
    border-color: rgba(237, 228, 212, 0.35);
}

.header-actions .btn-outline:hover { background: rgba(237, 228, 212, 0.08); color: var(--prazo-plaster); }

.menu-toggle-checkbox { display: none; }

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 6px;
}

.hamburger span {
    width: 24px;
    height: 2px;
    background: var(--prazo-plaster);
    border-radius: 2px;
}

@media (max-width: 780px) {
    .site-nav {
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        background: var(--prazo-ink);
        border-bottom: 1px solid rgba(199, 154, 75, 0.25);
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 12px 24px 20px;
        display: none;
    }

    .site-nav a { padding: 10px 0; width: 100%; }

    .hamburger { display: flex; }
    .header-login-link { display: none; }

    .menu-toggle-checkbox:checked ~ .site-nav {
        display: flex;
    }
}

/* --- Hero ------------------------------------------------------------ */

/* Casse la contrainte de largeur de <main> pour un fond plein-largeur — technique standard :
   100vw + décalage négatif de moitié, sans avoir à sortir la hero de <main> dans le markup. */
.hero {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: -48px;
    padding: 88px 24px 64px;
    background: var(--prazo-ink);
    color: var(--prazo-plaster);
    overflow: hidden;
}

/* Nichée dans .dark-page (déjà plein-largeur elle-même) : neutralise le double décrochage 100vw,
   le fond ink est déjà celui du parent. */
.dark-page .hero {
    width: auto;
    left: auto;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    background: transparent;
}

.hero-inner {
    position: relative;
    max-width: var(--prazo-container);
    margin: 0 auto;
}

.hero h1 { color: var(--prazo-plaster); }
.hero h1 em { font-style: italic; color: var(--prazo-gold); }

.hero-lede {
    font-size: 19px;
    color: var(--prazo-plaster-dim);
    max-width: 560px;
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.hero .btn-outline { color: var(--prazo-plaster); border-color: rgba(237, 228, 212, 0.35); }
.hero .btn-outline:hover { background: rgba(237, 228, 212, 0.08); color: var(--prazo-plaster); }

/* --- CTA banner ------------------------------------------------------------ */

.cta-banner {
    background: var(--prazo-ink);
    border: 1px solid rgba(199, 154, 75, 0.3);
    color: var(--prazo-plaster);
    border-radius: var(--prazo-radius-lg);
    padding: 48px;
    text-align: center;
}

.cta-banner h2, .cta-banner p { color: var(--prazo-plaster); }
.cta-banner .muted { color: var(--prazo-plaster-dim); }

/* --- Footer ------------------------------------------------------------ */

.site-footer {
    border-top: 1px solid rgba(199, 154, 75, 0.25);
    background: var(--prazo-ink);
    color: var(--prazo-plaster-dim);
    padding: 48px 0 32px;
    margin-top: 64px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 32px;
}

@media (max-width: 780px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* h2 (pas h4) : le footer est son propre landmark, repartir à h2 évite tout saut de niveau de titre
   quel que soit le nombre de sous-titres déjà utilisés dans le contenu de la page. */
.footer-grid h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--prazo-gold);
    margin-bottom: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}

.footer-grid a {
    display: block;
    color: var(--prazo-plaster-dim);
    font-size: 14px;
    padding: 4px 0;
}

.footer-grid a:hover { color: var(--prazo-plaster); }

.footer-bottom {
    border-top: 1px solid rgba(199, 154, 75, 0.2);
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: var(--prazo-plaster-dim);
}

.footer-bottom a { color: var(--prazo-plaster-dim); text-decoration: underline; text-decoration-color: rgba(199, 154, 75, 0.4); }
.footer-bottom a:hover { color: var(--prazo-plaster); }

/* --- Formulaires ------------------------------------------------------------ */

input[type=text], input[type=email], input[type=password], input[type=number], input:not([type]), select, textarea {
    font-family: inherit;
    border: 1px solid var(--prazo-border);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--prazo-tile);
    background: #ffffff;
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--prazo-terracotta-bright);
    outline-offset: 1px;
}

label {
    font-size: 13px;
    font-weight: 600;
    color: var(--prazo-tile);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}