/* Feuille de style du portail client CarrePOS.

   Le portail est en Static SSR : sans fichier externe, ces regles repartaient
   dans chaque reponse HTML, pour chaque visiteur. Ici elles sont servies une
   fois puis mises en cache par le navigateur.

   Seule reste en ligne dans les pages la palette du commercant (couleur primaire,
   image de fond, theme clair/sombre) : elle depend des preferences en base et ne
   peut pas etre figee ici. Elle est produite par PortalThemeCss. */

/* ===== Jetons de design ===== */
:root {
    --portal-gap-x: 12px;
    --portal-gap-y: 24px;
    --portal-card-gap: 8px;
    --portal-pad: 16px;
    --portal-pad-lg: 24px;
    --portal-radius: 12px;
    --portal-modal-gap: 16px;
    --portal-modal-pad: 20px;
    --portal-modal-radius: 16px;
    --portal-modal-height: 80vh;
    --portal-fs-xs: 0.9rem;
    --portal-fs-sm: 1rem;
    --portal-fs-md: 1.125rem;
    --portal-fs-lg: 1.375rem;
    --portal-fs-xl: 1.75rem;
    --portal-fs-2xl: 2.25rem;
    --portal-lh: 1.55;
    --portal-touch: 52px;

    /* Hauteur de l'indicateur d'accueil iOS / de la barre gestuelle Android ; 0 partout ailleurs. */
    --portal-safe-bottom: env(safe-area-inset-bottom, 0px);
    --home-primary: #2563eb;
    --home-accent: #2563eb;
    --home-surface: #ffffff;
    --home-divider: #e4e4e7;
    --home-input-border: #d4d4d8;
    --home-input-bg: #fbfbfc;
    --home-text: #09090b;
    --home-text-soft: #52525b;
    --home-err: #d32f2f;
    --legal-accent: #2563eb;
    --legal-surface: #ffffff;
    --legal-divider: #e4e4e7;
    --legal-chip: #f4f4f5;
    --legal-text: #09090b;
    --legal-text-soft: #3f3f46;
}

/* ===== Socle : base du document et coquille commune a toutes les pages ===== */

/* Mobile : chaque pixel compte. La carte rejoint les bords et la modale prend tout l'écran.
   Les tailles de texte, elles, ne baissent pas — seules les tailles d'affichage
   se resserrent pour ne pas casser les lignes libellé/valeur. */
@media (max-width: 600px) {
    :root {
        --portal-gap-x: 4px;
        --portal-gap-y: 8px;
        --portal-card-gap: 0px;
        --portal-pad: 14px;
        --portal-pad-lg: 16px;
        --portal-radius: 10px;
        --portal-modal-gap: 0px;
        --portal-modal-pad: 14px;
        --portal-modal-radius: 0px;
        --portal-modal-height: 100vh;
        --portal-fs-xl: 1.5rem;
        --portal-fs-2xl: 2rem;
    }
}

/* svh mesure la hauteur barres du navigateur affichées : la modale ne passe jamais
   dessous. Isolé dans un @supports car une unité inconnue substituée par var()
   invalide la déclaration au lieu de retomber sur la précédente. */
@supports (height: 1svh) {
    :root {
        --portal-modal-height: 80svh;
    }

    @media (max-width: 600px) {
        :root {
            --portal-modal-height: 100svh;
        }
    }
}

/* Typographie de base posée une fois pour tout le portail : les pages héritent. */
main {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--portal-fs-md);
    line-height: var(--portal-lh);
    -webkit-text-size-adjust: 100%;
}

/* Focus toujours visible : première marche de l'accessibilité au clavier. */
:focus-visible {
    outline: 3px solid var(--mud-palette-primary, var(--home-accent, #2563eb));
    outline-offset: 2px;
}

.portal-container {
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
    padding: var(--portal-gap-y) var(--portal-gap-x);
    padding-bottom: calc(var(--portal-gap-y) + var(--portal-safe-bottom));
    box-sizing: border-box;
}

.portal-card {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--portal-radius);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin: var(--portal-card-gap) 0;
}

.portal-card-section {
    padding: var(--portal-pad);
}

/* Ligne « libellé / valeur » : le motif dominant du portail. flex-wrap est ce
   qui rend l'agrandissement du texte sûr — à l'étroit, la valeur passe à la
   ligne au lieu de chevaucher le libellé ou de le tronquer. */
.portal-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    padding: 7px 0;
    font-size: var(--portal-fs-sm);
}

.portal-row > :first-child {
    color: var(--mud-palette-text-secondary);
}

.portal-row > :last-child {
    margin-left: auto;
    text-align: right;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.portal-sep {
    border: 0;
    border-top: 1px dashed var(--mud-palette-divider);
    margin: 10px 0;
}

.portal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: var(--portal-touch);
    padding: 14px 24px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-contrast-text);
    font: inherit;
    font-size: var(--portal-fs-md);
    font-weight: 700;
    transition: opacity 0.2s;
}

.portal-btn:hover {
    opacity: 0.9;
}

.portal-btn:disabled {
    opacity: 0.85;
    cursor: wait;
}

/* --portal-primary-text est la couleur du commerçant déjà corrigée pour rester
   lisible sur le fond du thème : c'est elle qu'il faut sur un bouton sans
   remplissage, pas --mud-palette-primary qui peut s'y fondre. */
.portal-btn-ghost {
    width: auto;
    background: transparent;
    color: var(--portal-primary-text, var(--mud-palette-primary));
}

/* ===== Page /qr : demande de justificatif ===== */

/* .portal-container, .portal-card, .portal-row, .portal-sep, .portal-btn et
   l'échelle --portal-fs-* viennent de PortalLayout. */
.merchant-header {
    text-align: center;
    border-bottom: 1px dashed var(--mud-palette-divider);
}

.merchant-name {
    font-size: var(--portal-fs-xl);
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.merchant-meta {
    font-size: var(--portal-fs-xs);
    color: var(--mud-palette-text-secondary);
    margin: 4px 0 0 0;
}

.merchant-ticket {
    font-size: var(--portal-fs-sm);
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

/* Centre comme l'en-tete du ticket au-dessus : une ligne alignee a gauche coupait mal. */
.ticket-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 16px;
    font-size: var(--portal-fs-xs);
    color: var(--mud-palette-text-secondary);
}

.ticket-meta strong {
    color: var(--mud-palette-text-primary);
    font-weight: 700;
}

.form-title {
    font-size: var(--portal-fs-lg);
    font-weight: 800;
    text-align: center;
    margin: 18px 0 14px 0;
    color: var(--mud-palette-text-primary);
}

/* Sélecteur de type : première décision du client, donc la plus grande
   cible de la page. Les trois choix s'empilent plutôt que de se
   comprimer sous la largeur où le libellé cesserait d'être lisible. */
.segment-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.segment-btn {
    flex: 1 1 140px;
    min-height: var(--portal-touch);
    padding: 14px 10px;
    border: 2px solid var(--mud-palette-lines-inputs);
    border-radius: 10px;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: var(--portal-fs-sm);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.segment-btn.active {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-contrast-text);
    border-color: var(--mud-palette-primary);
}

.form-group {
    margin-bottom: 16px;
}

label {
    display: block;
    font-size: var(--portal-fs-sm);
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
}

.required-mark {
    color: var(--mud-palette-error);
}

.field-hint {
    font-size: var(--portal-fs-xs);
    color: var(--mud-palette-text-secondary);
    margin: 6px 0 0 0;
}

.group-title {
    font-size: var(--portal-fs-sm);
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

/* Rappel des règles sur la note de frais : informatif, il n'empêche jamais d'envoyer. */
.portal-notice {
    font-size: var(--portal-fs-xs);
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 12px 0 0 0;
}

.portal-notice p {
    margin: 0;
}

.portal-notice p + p {
    margin-top: 8px;
}

/* Refus en tete de la note de frais : la demande partira pas, ca doit se voir. */
.expense-refused {
    color: var(--mud-palette-error);
    font-weight: 700;
}

/* font-size au moins égal à 16px : en dessous, iOS zoome à la prise de focus. */
.portal-input {
    width: 100%;
    min-height: var(--portal-touch);
    padding: 13px 14px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 10px;
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    box-sizing: border-box;
    font: inherit;
    font-size: var(--portal-fs-md);
    outline: none;
    transition: border-color 0.15s;
}

.portal-input:focus {
    border-color: var(--mud-palette-primary);
}

/* Cases à cocher : 24px, et le libellé cliquable sert de zone d'appoint. */
.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.check-row-top {
    align-items: flex-start;
    margin-bottom: 0;
}

.check-row input[type="checkbox"] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--mud-palette-primary);
}

.check-row-top input[type="checkbox"] {
    margin-top: 2px;
}

.check-row label {
    margin-bottom: 0;
    font-weight: 500;
    line-height: 1.45;
    cursor: pointer;
}

.flex-row-gap {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.flex-row-gap > div {
    flex: 1 1 200px;
    min-width: 0;
}

.flex-row-center-between {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

/* La marge basse d'une case isolee compte dans le centrage d'une ligne flex :
   elle remontait la case d'environ 7px par rapport au titre voisin. */
.flex-row-center-between .check-row { margin-bottom: 0; }

.sirene-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(var(--mud-palette-text-primary-rgb), 0.05);
    transition: background-color 0.15s;
}

.sirene-item:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
}

.sirene-item-name {
    font-size: var(--portal-fs-sm);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.sirene-item-sub {
    font-size: var(--portal-fs-xs);
    color: var(--mud-palette-text-secondary);
}

.company-recap {
    margin-top: 10px;
    padding: 14px;
    border-left: 4px solid var(--mud-palette-success);
    border-radius: 8px;
    background-color: var(--mud-palette-background-grey);
}

.company-recap-name {
    font-size: var(--portal-fs-sm);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin: 0 0 4px 0;
}

.company-recap-line {
    font-size: var(--portal-fs-xs);
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

.legal-consent {
    padding: 14px;
    margin-bottom: 16px;
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.15);
    border-radius: 10px;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.03);
}

.legal-consent a {
    color: var(--portal-primary-text);
    font-weight: 700;
    text-decoration: underline;
}

.legal-proof {
    font-size: var(--portal-fs-xs);
    color: var(--mud-palette-text-secondary);
    margin: 8px 0 0 34px;
}

.form-error {
    margin: 0 0 14px 0;
    padding: 12px 14px;
    border: 1px solid rgba(var(--mud-palette-error-rgb), 0.45);
    border-radius: 10px;
    background-color: rgba(var(--mud-palette-error-rgb), 0.05);
    color: var(--mud-palette-error);
    font-size: var(--portal-fs-sm);
    line-height: 1.45;
}

/* Action finale de la page : la plus grande, et détachée du reste. */
.submit-btn {
    font-size: var(--portal-fs-lg);
    min-height: 60px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pos-ref {
    font-size: var(--portal-fs-xs);
    color: var(--mud-palette-text-secondary);
    margin: 12px 0 0 0;
}

.portal-card-error {
    max-width: 460px;
    margin: 10vh auto 0;
    border: 1px solid var(--mud-palette-divider);
    border-left: 6px solid var(--mud-palette-error);
    background-color: var(--mud-palette-surface);
    padding: var(--portal-pad-lg);
    text-align: center;
    border-radius: var(--portal-radius);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.error-icon {
    display: block;
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 12px;
    color: var(--mud-palette-error);
}

.error-title {
    font-size: var(--portal-fs-lg);
    font-weight: 800;
    color: var(--mud-palette-error);
    margin: 0 0 10px 0;
}

.error-text {
    font-size: var(--portal-fs-md);
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 22px 0;
}

.btn-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: portal-spin 0.8s linear infinite;
}

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

/* ===== Modale des textes legaux (CGU / RGPD), ouverte depuis /qr ===== */

.legal-modal-backdrop {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(9, 9, 11, 0.5) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 10000; display: flex; align-items: center; justify-content: center;
    padding: var(--portal-modal-gap) var(--portal-modal-gap) calc(var(--portal-modal-gap) + var(--portal-safe-bottom));
    animation: modal-fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.legal-modal-content {
    background-color: var(--mud-palette-surface) !important;
    border-radius: var(--portal-modal-radius) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    border-top: 4px solid var(--mud-palette-primary) !important;
    width: 100%; max-width: 560px; max-height: var(--portal-modal-height);
    display: flex; flex-direction: column;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden; transform: scale(0.96); opacity: 0;
    animation: modal-scale-up 0.25s cubic-bezier(0.34, 1.4, 0.64, 1) forwards; text-align: left;
}

.legal-modal-header {
    padding: 12px var(--portal-modal-pad); border-bottom: 1px solid var(--mud-palette-divider);
    background-color: var(--mud-palette-background-grey);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

.legal-modal-title {
    font-size: var(--portal-fs-md); font-weight: 800; margin: 0;
    color: var(--mud-palette-text-primary);
}

.legal-modal-close {
    flex-shrink: 0; width: 44px; height: 44px;
    background: transparent; border: none; cursor: pointer;
    font-size: 1.75rem; line-height: 1; color: var(--mud-palette-text-secondary);
}

/* Texte de loi : c'est le contenu le plus dense du portail, donc celui qui a
   le plus besoin d'interligne. */
.legal-modal-body {
    padding: var(--portal-modal-pad); overflow-y: auto; overscroll-behavior: contain;
    font-size: var(--portal-fs-md); line-height: 1.65;
    color: var(--mud-palette-text-secondary); white-space: pre-wrap; scrollbar-width: thin;
}

.legal-modal-body::-webkit-scrollbar { width: 6px; }

.legal-modal-body::-webkit-scrollbar-thumb { background-color: var(--mud-palette-divider); border-radius: 3px; }

.legal-modal-footer {
    padding: 10px var(--portal-modal-pad); border-top: 1px solid var(--mud-palette-divider);
    background-color: var(--mud-palette-background-grey); display: flex; justify-content: flex-end;
}

@keyframes modal-fade-in { to { background-color: rgba(9, 9, 11, 0.6) !important; } }

@keyframes modal-scale-up { to { transform: scale(1); opacity: 1; } }

.animate-fade-in { animation: fadeIn 0.3s ease-out forwards; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ===== Page /requests/status : suivi d'une demande ===== */

/* Bloc de statut : teinte et bordure dérivées de la couleur du statut, portée
   par `color` sur le conteneur — une seule classe modificatrice par état. */
.status-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 22px 14px;
    border: 1px solid;
    border-color: color-mix(in srgb, currentColor 35%, transparent);
    border-radius: var(--portal-radius);
    background-color: color-mix(in srgb, currentColor 10%, transparent);
}

.status-icon {
    font-size: 3rem;
    line-height: 1;
}

.status-title {
    font-size: var(--portal-fs-lg);
    font-weight: 800;
    margin: 0;
}

.status-help {
    font-size: var(--portal-fs-sm);
    line-height: 1.5;
    max-width: 40ch;
    margin: 0;
    color: var(--mud-palette-text-secondary);
}

.status-pending { color: var(--mud-palette-warning); }

.status-processing { color: var(--mud-palette-info); }

.status-completed { color: var(--mud-palette-success); }

.status-failed { color: var(--mud-palette-error); }

.status-blocked { color: var(--mud-palette-text-secondary); }

/* Le statut « en traitement » n'a pas d'emoji : l'icône est l'anneau lui-même. */
.status-processing .status-icon {
    width: 42px;
    height: 42px;
    border: 4px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
}

.recipient-row > :last-child {
    font-size: var(--portal-fs-md);
    overflow-wrap: anywhere;
}

.card-footer {
    display: flex;
    justify-content: center;
    padding: 8px var(--portal-pad);
    border-top: 1px solid var(--mud-palette-divider);
    background-color: rgba(var(--mud-palette-text-primary-rgb), 0.02);
}

.status-error-title {
    font-size: var(--portal-fs-lg);
    font-weight: 800;
    color: var(--mud-palette-error);
    margin: 0 0 10px 0;
}

.status-error-text {
    font-size: var(--portal-fs-md);
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 20px 0;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

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

/* ===== Page d'accueil du portail ===== */

/* Tailles tirées de l'échelle du portail (--portal-fs-*, posée par PortalLayout) :
   une seule page ne redéfinit jamais sa propre échelle. */
.home-container {
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
    padding: var(--portal-gap-y) var(--portal-gap-x);
    padding-bottom: calc(var(--portal-gap-y) + var(--portal-safe-bottom));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
}

.home-card {
    width: 100%;
    background-color: var(--home-surface);
    border: 1px solid var(--home-divider);
    border-radius: 18px;
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.28);
    padding: 34px var(--portal-pad-lg) 22px;
    box-sizing: border-box;
    text-align: center;
}

.home-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 22px; }

.home-logo { width: 72px; height: 72px; }

.home-wordmark {
    font-size: var(--portal-fs-xl); font-weight: 800; letter-spacing: -0.5px; color: var(--home-text);
}

.home-wordmark span { font-weight: 800; }

.home-plus {
    color: var(--home-accent);
    font-weight: 800;
}

.home-sub { font-size: var(--portal-fs-md); color: var(--home-text-soft); margin: 0 0 20px 0; }

/* Au moins 16px : sous ce seuil, iOS zoome à la prise de focus. */
.home-input {
    width: 100%; box-sizing: border-box; min-height: var(--portal-touch); padding: 15px 14px;
    border: 1px solid var(--home-input-border); border-radius: 12px;
    background-color: var(--home-input-bg); color: var(--home-text);
    font: inherit; font-size: var(--portal-fs-md);
    text-align: center; outline: none; transition: border-color 0.15s;
}

.home-input:focus { border-color: var(--home-accent); }

.home-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 14px; min-height: 60px; padding: 16px;
    border: none; border-radius: 12px; cursor: pointer;
    background-color: var(--home-primary); color: #ffffff;
    font: inherit; font-size: var(--portal-fs-lg); font-weight: 700;
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.25);
    transition: opacity 0.2s;
}

.home-btn:hover { opacity: 0.92; }

.home-btn:disabled { opacity: 0.85; cursor: wait; }

.home-status { min-height: 1.2em; margin: 14px 0 0 0; font-size: var(--portal-fs-sm); }

.home-status-error { color: var(--home-err); font-weight: 600; }

.home-footer {
    margin-top: 26px; padding-top: 16px;
    border-top: 1px solid var(--home-divider);
    font-size: var(--portal-fs-xs); color: var(--home-text-soft);
}

.home-footer strong { color: var(--home-text); font-weight: 700; }

.home-footer-sep { margin: 0 6px; opacity: 0.5; }

.home-footer-link { display: inline-block; padding: 6px 4px; color: var(--home-text-soft); text-decoration: underline; }

.home-footer-link:hover { color: var(--home-accent); text-decoration: underline; }

/* ===== Page des mentions legales ===== */

/* Tailles tirées de l'échelle du portail (--portal-fs-*, posée par PortalLayout) :
   une seule page ne redéfinit jamais sa propre échelle. */
.legal-container {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
    padding: 28px 14px 48px;
    box-sizing: border-box;
    color: var(--legal-text);
}

.legal-card {
    background-color: var(--legal-surface);
    border: 1px solid var(--legal-divider);
    border-radius: 16px;
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.22);
    padding: 26px 26px 30px;
    box-sizing: border-box;
}

.legal-header { margin-bottom: 18px; }

.legal-back {
    display: inline-block; margin-bottom: 12px; padding: 8px 0;
    font-size: var(--portal-fs-sm); font-weight: 700;
    color: var(--legal-accent); text-decoration: none;
}

.legal-back:hover { text-decoration: underline; }

.legal-title { font-size: var(--portal-fs-xl); font-weight: 800; margin: 0; color: var(--legal-text); }

.legal-toc {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 22px; padding-bottom: 18px;
    border-bottom: 1px solid var(--legal-divider);
}

.legal-toc a {
    font-size: var(--portal-fs-sm); font-weight: 600;
    padding: 9px 14px; border-radius: 999px;
    background-color: var(--legal-chip); color: var(--legal-text-soft);
    text-decoration: none;
}

.legal-toc a:hover { color: var(--legal-text); }

.legal-section { margin-bottom: 28px; scroll-margin-top: 16px; }

.legal-section h2 { font-size: var(--portal-fs-lg); font-weight: 800; margin: 0 0 10px 0; color: var(--legal-text); }

/* Interligne large : c'est un texte long, lu en entier ou pas du tout. */
.legal-section p { font-size: var(--portal-fs-md); line-height: 1.7; margin: 0 0 10px 0; color: var(--legal-text-soft); }

.legal-section a { color: var(--legal-accent); }

.legal-facts { margin: 6px 0 0 0; padding: 0; list-style: none; }

.legal-facts li {
    font-size: var(--portal-fs-md); line-height: 1.65; color: var(--legal-text-soft);
    padding: 5px 0 5px 18px; position: relative;
}

.legal-facts li::before { content: "•"; position: absolute; left: 2px; color: var(--legal-accent); }

.legal-facts strong { color: var(--legal-text); }

mark {
    background-color: rgba(234, 179, 8, 0.22);
    color: inherit; padding: 1px 5px; border-radius: 4px; font-weight: 600;
}


/* ===== Regles rapatriees des attributs style= ===== */

/* Coquille de page posee par PortalLayout : svh (hauteur barres affichees) plutot que
   vh, pour qu'aucun contenu ne passe sous la barre du navigateur, sans saut au scroll. */
.portal-main {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Recherche SIRENE : le conteneur est le repere de positionnement du menu deroulant. */
.sirene-search {
    position: relative;
    margin-bottom: 12px;
}

/* Champ portant un element superpose a droite (ici le spinner de recherche). */
.input-with-affix {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-affix .portal-input { padding-right: 44px; }

#sirene-spinner {
    position: absolute;
    right: 14px;
    width: 20px;
    height: 20px;
    border: 2px solid var(--mud-palette-text-disabled);
    border-top-color: var(--mud-palette-primary);
    border-radius: 50%;
    animation: portal-spin 0.6s linear infinite;
}

#sirene-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    max-height: 280px;
    overflow-y: auto;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 1000;
}

/* Code postal : largeur fixe, la ville prend le reste de la ligne. */
.field-narrow { flex: 0 0 140px; }

/* Carte d'erreur bloquante du suivi de demande. */
.card-error { border-color: var(--mud-palette-error); }

/* ===== Récapitulatif du montant (composant AmountRecap) ===== */

/* Panneau neutre plutôt que teinté : une couleur de commerçant sombre rendrait une teinte
   invisible sur fond sombre. L'accent de marque est porté par le montant lui-même. */
.amount-recap {
    margin: 12px 0 18px;
    padding: 14px var(--portal-pad);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--portal-radius);
    background-color: var(--mud-palette-background-grey);
    text-align: center;
}

/* Centre, comme l'en-tete du ticket : le montant d'abord, son etiquette dessous. L'ordre
   visuel est inverse en CSS pour que le balisage garde l'ordre de lecture « Total TTC,
   10,00 € » pour les lecteurs d'ecran. */
.amount-recap-total {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 2px;
}

.amount-recap-label {
    font-size: var(--portal-fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.amount-recap-value {
    font-size: var(--portal-fs-2xl);
    font-weight: 800;
    line-height: 1.1;
    color: var(--portal-primary-text);
}

.amount-recap-excl-tax {
    margin: 4px 0 0;
    font-size: var(--portal-fs-xs);
    color: var(--mud-palette-text-secondary);
}

.amount-recap-payments {
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--mud-palette-divider);
    font-size: var(--portal-fs-sm);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* Plusieurs reglements : une colonne de chiffres, qui reste alignee gauche / droite. */
.amount-recap-payments .portal-row {
    padding: 3px 0;
    text-align: left;
}

/* Note de langue sous un texte du commercant : a gauche du bouton Fermer. */
.legal-modal-note {
    margin-right: auto;
    align-self: center;
    font-size: var(--portal-fs-xs);
    color: var(--mud-palette-text-secondary);
}

/* ===== Personnalisation du commercant (premium) ===== */

.merchant-logo {
    display: block;
    max-width: 60%;
    max-height: 64px;
    margin: 0 auto 10px;
    object-fit: contain;
}

/* Message du commercant : sa voix, distincte des libelles du portail. Retours a la ligne
   conserves, le texte vient tel qu'il l'a saisi. */
.portal-message {
    margin: 0 0 14px;
    text-align: center;
    font-size: var(--portal-fs-sm);
    line-height: 1.5;
    white-space: pre-line;
    color: var(--mud-palette-text-secondary);
}

/* Sous le bloc de statut, le remerciement lui etait colle. */
.status-block + .portal-message { margin-top: 12px; }

.merchant-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 16px;
}

.merchant-links a {
    padding: 8px 14px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 999px;
    font-size: var(--portal-fs-xs);
    font-weight: 700;
    text-decoration: none;
    color: var(--mud-palette-text-primary);
}

/* L'avis est l'action attendue : seul lien plein. */
.merchant-links a.merchant-link-review {
    border-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-contrast-text);
}

.support-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 14px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed var(--mud-palette-divider);
    font-size: var(--portal-fs-xs);
    color: var(--mud-palette-text-secondary);
}

.support-contact span {
    flex-basis: 100%;
    text-align: center;
}

.support-contact a {
    font-weight: 700;
    color: var(--portal-primary-text);
}

/* ===== Selecteur de langue ===== */

/* Discret, au-dessus de la carte. Les valeurs de repli couvrent l'accueil, qui n'a pas
   de palette commercant. */
/* Pastille opaque : posé sur l'image de fond du commercant, le selecteur doit rester
   lisible quelle que soit la photo. Aligne a droite en bloc (margin) comme en colonne flex
   (align-self, accueil). */
.lang-switch {
    display: flex;
    width: fit-content;
    margin: 0 0 6px auto;
    align-self: flex-end;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--mud-palette-divider, var(--home-divider));
    border-radius: 8px;
    background-color: var(--mud-palette-surface, var(--home-surface));
}

.lang-switch a {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: var(--portal-fs-xs);
    font-weight: 700;
    text-decoration: none;
    color: var(--mud-palette-text-secondary, var(--home-text-soft));
}

.lang-switch a.active {
    color: var(--mud-palette-text-primary, var(--home-text));
    background-color: rgba(var(--mud-palette-text-primary-rgb, 127, 127, 127), 0.12);
}

/* ===== Preferences systeme ===== */

/* Regroupees ici : chaque page en portait sa propre copie partielle, ce qui rendait
   impossible de savoir ce qui etait reellement couvert. */
@media (prefers-reduced-motion: reduce) {
    .btn-spinner,
    #sirene-spinner,
    .animate-pulse,
    .animate-spin { animation: none; }
}

/* Theme du systeme, pour les pages sans couleur de commercant (accueil, mentions
   legales). Sur /qr et /requests/status la palette du commercant passe devant : elle
   est posee en ligne par PortalThemeCss, en !important. */
@media (prefers-color-scheme: dark) {
    :root {
        --home-primary: #3b82f6;
        --home-accent: #60a5fa;
        --home-surface: #1e1e1e;
        --home-divider: #3f3f46;
        --home-input-border: #52525b;
        --home-input-bg: #151515;
        --home-text: #fafafa;
        --home-text-soft: #a1a1aa;
        --home-err: #ef5350;
        --legal-accent: #60a5fa;
        --legal-surface: #1e1e1e;
        --legal-divider: #3f3f46;
        --legal-chip: #27272a;
        --legal-text: #fafafa;
        --legal-text-soft: #c4c4c8;
    }

    html, body { background-color: #121212; }
}

/* ===== Utilitaires ===== */

/* Bascule d'affichage du formulaire /qr. Une classe plutot qu'un style en ligne :
   le script n'ecrase plus la regle CSS de l'element, et le balisage reste lisible. */
.is-hidden { display: none !important; }