/* ── Theme: Light Slate ─────────────────────────────────────────────────────
   Fond blanc, texte slate, accent indigo.
   Propre, professionnel, enterprise-ready.
──────────────────────────────────────────────────────────────────────────── */
:root {
    --bg:             #f8fafc;
    --surface:        #ffffff;
    --surface-2:      #f1f5f9;
    --accent:         #4f46e5;
    --accent-light:   #6366f1;
    --accent-soft:    rgba(79, 70, 229, 0.07);
    --accent-border:  rgba(79, 70, 229, 0.2);
    --text:           #0f172a;
    --muted:          #475569;
    --subtle:         #94a3b8;
    --border:         rgba(15, 23, 42, 0.08);
    --border-strong:  rgba(15, 23, 42, 0.14);
    --radius:         12px;
    --radius-lg:      16px;
    --radius-xl:      24px;
    --shadow:         0 2px 12px rgba(15, 23, 42, 0.07);
    --shadow-lg:      0 8px 40px rgba(15, 23, 42, 0.11);
    --font-main:      system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono:      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; scroll-behavior: smooth; }

body {
    font-family: var(--font-main);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

.page {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px 80px;
}

/* ── Header ── */

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    gap: 16px;
}

.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-img { height: 36px; width: auto; }

.logo-text strong {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    display: block;
}

.logo-text span {
    font-size: 0.78rem;
    color: var(--muted);
    display: block;
    margin-top: -1px;
}

nav { display: flex; align-items: center; gap: 2px; }

nav a {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--muted);
    transition: color 0.15s, background 0.15s;
}

nav a:hover {
    color: var(--text);
    background: rgba(15, 23, 42, 0.05);
}

.nav-lang { font-size: 13px; margin-left: 4px; color: var(--subtle); }

.nav-cta {
    margin-left: 8px;
    padding: 8px 16px !important;
    background: var(--accent) !important;
    color: white !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600;
    transition: background 0.15s !important;
}
.nav-cta:hover { background: #4338ca !important; color: white !important; }

/* ── Hero ── */

.hero {
    padding: 72px 0 64px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 64px;
    align-items: center;
}

.hero-left { display: flex; flex-direction: column; gap: 24px; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 13px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    font-size: 13px;
    color: var(--muted);
    width: fit-content;
}

.badge-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(79, 70, 229, 0.5);
    flex-shrink: 0;
}

.hero h1 {
    font-size: clamp(36px, 5vw, 52px);
    line-height: 1.08;
    letter-spacing: -0.04em;
    font-weight: 800;
}

.hero h1 .accent {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle { font-size: 17px; color: var(--muted); line-height: 1.65; max-width: 460px; }

.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    background: var(--accent);
    color: white;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 16px rgba(79, 70, 229, 0.3);
    border: none;
}
.btn-primary:hover { background: #4338ca; box-shadow: 0 4px 20px rgba(79, 70, 229, 0.4); }
.btn-primary:disabled,
.btn-primary:disabled:hover {
    background: var(--muted);
    cursor: not-allowed;
    box-shadow: none;
}

.btn-primary .sub {
    font-size: 12px; opacity: 0.75; font-weight: 400;
    padding-left: 10px; border-left: 1px solid rgba(255,255,255,0.3);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 20px;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--muted);
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.btn-ghost:hover { border-color: rgba(15,23,42,0.28); color: var(--text); }
.btn-ghost strong { color: var(--text); }

.hero-note { font-size: 13px; color: var(--subtle); }

.clients-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.clients-strip > span:first-child { color: var(--subtle); margin-right: 2px; }

.client-chip {
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12px;
}

/* ── Flow card ── */

.flow-card {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: var(--shadow-lg);
}

.flow-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--subtle);
}

.flow-steps { display: flex; flex-direction: column; gap: 0; }

.flow-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    border-radius: var(--radius);
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.flow-step-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.flow-step-icon.active { background: var(--accent); border-color: var(--accent); }

.flow-step-body strong { font-size: 14px; font-weight: 600; display: block; margin-bottom: 3px; }
.flow-step-body span { font-size: 13px; color: var(--muted); line-height: 1.45; }

.flow-connector {
    width: 1px; height: 14px;
    background: var(--border-strong);
    margin-left: 29px;
}

.flow-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    font-size: 13px;
    color: var(--muted);
}

.flow-footer-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

.challenge-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

.pill {
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--accent-border);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12px;
}

/* ── Divider ── */

.divider { height: 1px; background: var(--border); margin-bottom: 56px; }

/* ── Sections ── */

section { margin-bottom: 56px; }

section h1,
section h2 {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 10px;
}

section > p {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.65;
    margin-bottom: 28px;
}

/* ── Section grid ── */

.section-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.item {
    padding: 20px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.item:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }

.item-icon { font-size: 22px; margin-bottom: 2px; }
.item strong { font-size: 15px; font-weight: 600; }
.item span { font-size: 14px; color: var(--muted); line-height: 1.55; }

.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent-border);
    margin-bottom: 2px;
    width: fit-content;
}

.tag small { text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px; opacity: 0.8; }

/* ── Pricing ── */

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 8px;
}

.price-card {
    padding: 22px 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* ── Buttons anchored to bottom of each pricing card ── */
.price-card > a.btn-primary,
.price-card > button.btn-primary {
    margin-top: auto;
    padding-top: 16px;
}

.price-card.highlight {
    border-color: rgba(79, 70, 229, 0.35);
    background: linear-gradient(160deg, rgba(79,70,229,0.06), rgba(79,70,229,0.02));
    box-shadow: 0 0 32px rgba(79, 70, 229, 0.1);
}

.price-title { font-weight: 700; font-size: 15px; }

.price-value {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 4px 0 2px;
}

.price-note {
    font-size: 12px;
    color: var(--muted);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.price-bullet { font-size: 13px; color: var(--muted); }
.price-bullet-hightlight { font-size: 13px; color: var(--text); font-weight: 600; }

.promise {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    font-size: 14px;
    color: var(--muted);
    line-height: 1.55;
}
.promise strong { color: var(--text); }

/* ── Timeline / Roadmap ── */

.timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 8px;
}

.timeline-step {
    padding: 20px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
}

.timeline-step .stage {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
    margin-bottom: 8px;
}

.timeline-step strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.timeline-step p { font-size: 14px; color: var(--muted); line-height: 1.55; }

/* ── FAQ ── */

.faq { display: flex; flex-direction: column; }

.faq-item { padding: 20px 0; border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }

.faq-item h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.faq-item p { font-size: 15px; color: var(--muted); line-height: 1.65; }

.faq-item code {
    font-family: var(--font-mono);
    font-size: 13px;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    color: var(--accent);
}

/* ── Contact ── */

.contact-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.contact-chip {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--muted);
}

.contact-chip code { font-family: var(--font-mono); font-size: 13px; color: var(--text); }

/* ── Headings inside sections ── */

section h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    margin-top: 0;
    color: var(--text);
}

/* ── Footer ── */

footer {
    padding: 24px 0 8px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--subtle);
    flex-wrap: wrap;
    gap: 8px;
}

footer strong { color: var(--muted); }

/* ── Sticky header ── */

@media (min-width: 801px) {
    header {
        position: sticky;
        top: 0;
        z-index: 100;
        background: rgba(248, 250, 252, 0.92);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--border);
        margin: 0 -24px;
        padding: 14px 24px;
    }
}

/* ── Responsive ── */

@media (max-width: 800px) {
    header {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 0;
        gap: 10px;
    }

    nav { flex-wrap: wrap; gap: 2px; }
    nav a { font-size: 13px; padding: 5px 8px; }

    .hero {
        grid-template-columns: 1fr;
        padding: 40px 0 32px;
        gap: 32px;
    }

    .section-grid { grid-template-columns: repeat(2, 1fr); }
    .timeline { grid-template-columns: 1fr; }

    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    section h1,
    section h2 { font-size: 24px; }
    section > p { font-size: 15px; }
}

@media (max-width: 480px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .section-grid { grid-template-columns: 1fr; }
}

.btn-disabled,
.nav-cta-disabled {
    cursor: not-allowed;
    opacity: 0.55;
    pointer-events: none;
    box-shadow: none;
    text-decoration: none;
}

/* ── Popup de renommage Certeasy → Hortval ──────────────────────────────────
   <dialog> natif : fermé par défaut (display:none tant que showModal() n'a pas
   été appelé), Esc et piège à focus gratuits. Le lien permanent du footer
   ("Anciennement Certeasy") reste la voie de secours quand la popup a été
   fermée. Retrait complet du bloc : RENAME_NOTICE_ENABLED=false dans build.sh.
──────────────────────────────────────────────────────────────────────────── */

.rename-notice {
    /* Un <dialog> modal est centré par la feuille de style du navigateur avec
       `position:fixed; inset:0; margin:auto`. Le reset `* { margin: 0 }` de cette
       feuille écrase ce `margin:auto` (l'origine auteur gagne sur l'origine UA) et
       colle la popup en haut à gauche. À reposer explicitement, donc. */
    margin: auto;
    max-width: 480px;
    width: calc(100% - 32px);
    padding: 28px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}

.rename-notice::backdrop { background: rgba(15, 23, 42, 0.45); }

.rename-notice h2 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
    margin-bottom: 14px;
}

.rename-notice p {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.65;
    margin-bottom: 22px;
}

/* Action principale à gauche, fermeture à droite. `space-between` plutôt qu'un
   `margin-left:auto` sur le bouton : il n'y a que deux éléments, et l'intention se
   lit dans la règle. */
.rename-notice-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* ---------------------------------------------------------------------------
   .legal-doc — fragments contractuels produits par tools/convert-license.sh
   ---------------------------------------------------------------------------
   pandoc sort du HTML sémantique nu : <h1>, <h2>, <table>, <code>, <blockquote>.
   Sans règles, un <table> retombe sur le rendu par défaut du navigateur — ni
   bordure, ni gouttière, colonnes écrasées — alors que le PDF, lui, hérite du
   style de LaTeX. D'où l'écart de qualité entre les deux sorties d'un même .md.

   Le fragment est inliné dans une page qui porte DÉJÀ son propre <h2> de titre :
   les niveaux sont donc décalés d'un cran ici (h1 = titre du contrat, h2 =
   article), et c'est voulu — on ne retouche pas la sortie de pandoc.
   ------------------------------------------------------------------------- */

.legal-doc h1 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
}

.legal-doc h1 + p em,
.legal-doc > p:first-of-type em {
    color: var(--muted);
}

.legal-doc h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 32px 0 10px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.legal-doc h1 + h2,
.legal-doc h2:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 20px;
}

.legal-doc p,
.legal-doc li {
    font-size: 14.5px;
    line-height: 1.7;
}

.legal-doc p {
    margin: 0 0 12px;
}

.legal-doc ul {
    margin: 0 0 12px;
    padding-left: 22px;
}

.legal-doc li {
    margin-bottom: 6px;
}

.legal-doc code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
}

.legal-doc blockquote {
    margin: 0 0 18px;
    padding: 12px 16px;
    border-left: 3px solid var(--accent);
    background: var(--bg);
    font-size: 14px;
    line-height: 1.55;
}

.legal-doc blockquote p:last-child {
    margin-bottom: 0;
}

/* Le trait qui précède la ligne d'identification de l'Éditeur, en pied de
   contrat. Plus marqué qu'un séparateur d'article, pour qu'on voie que le
   corps du texte est terminé. */
.legal-doc hr {
    border: none;
    border-top: 1px solid var(--border-strong);
    margin: 32px 0 18px;
}

/* Tableaux — rôles, cookies, périmètres. `display:block` + `overflow-x:auto`
   les rend défilables sur mobile plutôt que de faire déborder la page ; sur
   écran large la largeur 100 % reprend le dessus. */
.legal-doc table {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 18px;
    font-size: 14px;
}

.legal-doc thead th {
    text-align: left;
    font-weight: 600;
    color: var(--muted);
    background: var(--bg);
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-strong);
    white-space: nowrap;
}

.legal-doc tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    line-height: 1.55;
}

.legal-doc tbody tr:last-child td {
    border-bottom: none;
}

.legal-doc tbody td:first-child {
    white-space: nowrap;
}

/* ── Popin de lecture des CGU/CGV ───────────────────────────────────────────
   On demande d'accepter un contrat AVANT d'avoir une session, sur la page de
   confirmation. Le lien vers le texte suffirait juridiquement, mais partir dans
   un onglet puis revenir est un chemin qu'on abandonne : la popin met le texte
   devant la case sans rien perdre du formulaire en cours.

   Le corps réutilise .legal-doc — c'est le même fragment pandoc que sur le
   site, servi ici par le binaire depuis son embed. Pas de style propre au
   portail : les deux rendus doivent rester le même document.
──────────────────────────────────────────────────────────────────────────── */

#legal-box {
    /* Même piège que .rename-notice ci-dessus : le reset `* { margin: 0 }` de
       cette feuille écrase le `margin:auto` par lequel le navigateur centre un
       <dialog> modal, et la popin se colle en haut à gauche. */
    margin: auto;
    width: min(52rem, calc(100% - 32px));
    max-height: min(84vh, 900px);
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* Le <dialog> fermé est déjà display:none via la feuille du navigateur ; on ne
   redéclare que l'état ouvert, dont on a besoin en flex pour que le corps
   défile SOUS un en-tête qui, lui, reste en place. */
#legal-box[open] {
    display: flex;
    flex-direction: column;
}

#legal-box::backdrop {
    background: rgba(15, 23, 42, 0.45);
}

#legal-box-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

#legal-box-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    /* Le titre cède la place avant les commandes : sur un écran étroit, mieux
       vaut un titre tronqué qu'un bouton de fermeture hors cadre. */
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bascule de langue. Les deux versions font foi — la française prévaut en cas
   de litige, mais c'est bien le lecteur anglophone qui doit pouvoir lire ce
   qu'il accepte. Ouvrir l'une sans pouvoir atteindre l'autre revenait à
   choisir sa langue à sa place. */
#legal-box-langs {
    display: flex;
    flex-shrink: 0;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    overflow: hidden;
}

.legal-box-lang {
    padding: 5px 12px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--muted);
    background: var(--surface);
    border: 0;
    cursor: pointer;
}

.legal-box-lang + .legal-box-lang {
    border-left: 1px solid var(--border-strong);
}

.legal-box-lang:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.legal-box-lang[aria-pressed="true"] {
    background: var(--accent);
    color: #fff;
}

#legal-box-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px 28px;
}

/* Page autonome servie sur /portal/legal/… — ce que voit un lecteur sans JS,
   ou qui ouvre le lien dans un onglet volontairement. */
.legal-page {
    max-width: 52rem;
    margin: 0 auto;
    padding: 40px 24px 64px;
}

/* Bascule de langue de la page autonome — le pendant sans JavaScript de celle
   de la popin. Les deux versions sont publiées et les deux entrent dans
   l'empreinte : n'en rendre qu'une atteignable choisirait la langue à la place
   du lecteur. */
.legal-page-langs {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-bottom: 24px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.legal-page-langs a,
.legal-page-langs span {
    padding: 5px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    text-decoration: none;
    color: var(--muted);
}

.legal-page-langs a:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.legal-page-langs [aria-current="page"] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ── Case d'acceptation d'un contrat ────────────────────────────────────────
   Le libellé porte le lien vers le texte, et ce lien doit SE VOIR : une case
   qui engage juridiquement à côté d'un lien de la même couleur que la phrase
   revient à faire accepter sans donner à lire. C'était le cas — les liens
   héritaient du gris de .text-muted.
──────────────────────────────────────────────────────────────────────────── */

.legal-consent {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.legal-consent input[type="checkbox"] {
    flex-shrink: 0;
    cursor: pointer;
}

/* Le libellé ne dit QUE ce qui est accepté, et prend la place restante pour
   pousser le bouton de lecture en bout de ligne. */
.legal-consent > span {
    flex: 1;
    min-width: 12rem;
}

/* « Read » est un contrôle à part entière, pas un mot souligné au milieu d'une
   phrase. Un lien inline dans un libellé de case se voit à peine — et une case
   qui engage juridiquement sans qu'on repère par où lire revient à faire
   accepter à l'aveugle.

   Il vit DANS le <label> : la spec HTML exclut le contenu interactif du
   transfert d'activation, donc le cliquer ouvre le document sans cocher. */
.legal-read {
    flex-shrink: 0;
    padding: 4px 12px;
    border: 1px solid var(--accent-border);
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.legal-read:hover {
    background: var(--accent);
    color: #fff;
}

/* Mention d'information — pas une acceptation. La sortir du libellé est ce qui
   ramène celui-ci à une ligne : on n'accepte pas une politique de
   confidentialité, on en est informé. */
.legal-notice {
    margin: 0 0 16px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
    text-align: left;
}

.legal-notice a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* ── Popin de dialogue (confirmation, saisie) ───────────────────────────────
   Remplace confirm() et prompt(), qui ont trois défauts ici : le navigateur
   peut les SUPPRIMER (« empêcher cette page d'ouvrir d'autres boîtes de
   dialogue »), leur rendu n'a rien à voir avec le portail, et prompt() n'offre
   aucun contrôle sur le champ — ni type, ni longueur, ni autocomplétion, ce qui
   compte pour un code à six chiffres.
──────────────────────────────────────────────────────────────────────────── */

.portal-dialog {
    /* Même piège que .rename-notice et #legal-box : le reset `* { margin: 0 }`
       de cette feuille écrase le `margin:auto` par lequel le navigateur centre
       un <dialog> modal. */
    margin: auto;
    width: min(26rem, calc(100% - 32px));
    padding: 1.5rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}

.portal-dialog::backdrop { background: rgba(15, 23, 42, .45); }

.portal-dialog h3 {
    font-size: 1rem;
    font-weight: 650;
    margin-bottom: .5rem;
}

.portal-dialog p {
    font-size: .875rem;
    line-height: 1.55;
    color: var(--muted);
    margin-bottom: 1rem;
}

/* Le champ hérite du style des formulaires du portail (layout.html) : le
   redéclarer ici produisait un champ ressemblant à ceux du portail sans être
   le même — padding différent, et aucune des règles de focus. */
.portal-dialog input {
    margin-bottom: 1rem;
}

/* Le bouton d'annulation À GAUCHE et l'action à droite : l'action destructrice
   ne doit pas se trouver sous le pouce par défaut. */
.portal-dialog-actions {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}