/* ============================================================
   RR Files — feuille de style principale.
   Toutes les couleurs viennent des variables injectées par
   App\Support\Theme (pilotées depuis /admin/settings).
   ============================================================ */

* { box-sizing: border-box; }

body {
    background: var(--rr-bg);
    color: var(--rr-text);
    font-family: var(--rr-font);
    font-size: .875rem;
    line-height: 1.55;
    min-height: 100vh;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Discipline typographique
   ------------------------
   Un outil technique se lit, il ne s'exclame pas. Trois règles :
   1. Aucun titre au-dessus de 600 — le 700/800 généralisé est le premier
      marqueur du « dashboard généré ». La hiérarchie vient de la TAILLE et
      de l'ESPACE, pas de la graisse.
   2. Interlettrage négatif sur les grandes tailles : au-delà de 20px, Inter
      a besoin d'être resserré pour ne pas paraître dilaté.
   3. Tous les chiffres en chasse fixe tabulaire. Références, puissances,
      prix, dates : c'est la matière première du métier, elle doit
      s'aligner en colonne et ne jamais danser d'une ligne à l'autre. */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -.011em;
    color: var(--rr-text);
}
h1, h2 { letter-spacing: -.021em; }

.rr-num, .rr-mono, .rr-table td.rr-num, .rr-stat-value, .rr-metric-value {
    font-family: var(--rr-font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'zero' 1;
}

/* Sur-titre : remplace la plupart des en-têtes de cartes à icône. */
.rr-eyebrow {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .085em;
    color: var(--rr-faint);
}

a { color: var(--rr-primary); text-decoration: none; }
a:hover { color: var(--rr-primary-hover); }

/* ---------- Structure ---------- */
.rr-shell { display: flex; min-height: 100vh; }

.rr-sidebar {
    width: 248px;
    flex-shrink: 0;
    background: var(--rr-surface);
    border-right: 1px solid var(--rr-border);
    padding: 20px 14px;
    position: fixed;
    inset: 0 auto 0 0;
    overflow-y: auto;
    z-index: 1030;
}

.rr-main {
    flex: 1;
    margin-left: 248px;
    padding: 22px 28px 60px;
    min-width: 0;
}

@media (max-width: 991.98px) {
    .rr-sidebar { transform: translateX(-100%); transition: transform .22s ease; }
    .rr-sidebar.open { transform: translateX(0); }
    .rr-main { margin-left: 0; padding: 16px 14px 60px; }
}

.rr-brand {
    display: flex; align-items: center; gap: 10px;
    font-weight: 600; font-size: 1.15rem; color: var(--rr-text);
    padding: 4px 8px 18px;
}
.rr-brand img { max-height: 38px; max-width: 160px; }
.rr-brand .rr-brand-mark {
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--rr-primary); color: var(--rr-on-primary);
    display: grid; place-items: center; font-size: .95rem;
}

.rr-nav-label {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--rr-muted); padding: 16px 10px 6px; font-weight: 600;
}

.rr-nav-link {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; border-radius: 9px;
    color: var(--rr-muted); font-size: .9rem; font-weight: 500;
    transition: background .15s, color .15s;
}
.rr-nav-link:hover { background: var(--rr-surface-2); color: var(--rr-text); }
.rr-nav-link.active { background: var(--rr-primary-soft); color: var(--rr-primary); font-weight: 600; }
.rr-nav-link i { font-size: 1.05rem; width: 20px; text-align: center; }
.rr-nav-link .rr-count { margin-left: auto; }

/* ---------- Topbar ---------- */
.rr-topbar {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 22px; flex-wrap: wrap;
}
.rr-topbar h1 { font-size: 1.35rem; font-weight: 600; margin: 0; }
.rr-topbar .rr-spacer { flex: 1; }

.rr-credits {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 14px; border-radius: 999px;
    background: var(--rr-primary-soft);
    color: var(--rr-primary); font-weight: 600; font-size: .86rem;
}

/* ---------- Cartes : hiérarchie d'élévation ----------
   Le défaut d'origine : TOUT était une carte bordée au même niveau, donc
   plus rien ne ressortait. Trois niveaux désormais :
     · niveau 0  .rr-section — pas de conteneur, un simple filet de titre.
                 C'est le défaut : la plupart des blocs n'ont pas besoin
                 d'une boîte pour exister.
     · niveau 1  .rr-card    — surface + filet. Pour les tableaux et les
                 groupes de champs.
     · niveau 2  .rr-drop    — la zone de dépôt, et elle seule. Un seul
                 élément a le droit d'être l'élément le plus saillant. */
.rr-card {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius);
    padding: 20px 22px;
    margin-bottom: 18px;
}
.rr-card-header {
    display: flex; align-items: center; gap: 9px;
    font-weight: 600; font-size: .9375rem;
    letter-spacing: -.008em;
    margin: -2px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rr-border);
}
/* L'icône d'en-tête ne porte plus la couleur de marque : répétée sur
   chaque carte, elle transformait l'accent en bruit de fond. */
.rr-card-header i { color: var(--rr-faint); font-size: .95em; }
.rr-card-header .rr-header-extra { margin-left: auto; font-weight: 400; }

/* Niveau 0 : section sans conteneur. */
.rr-section { margin-bottom: 26px; }
.rr-section > .rr-section-head {
    display: flex; align-items: baseline; gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--rr-border);
}
.rr-section > .rr-section-head h2 { font-size: .9375rem; font-weight: 600; margin: 0; }
.rr-section > .rr-section-head .rr-section-link { margin-left: auto; font-size: .8125rem; }

/* ---------- Métriques ----------
   Anciennement quatre boîtes bordées à valeur 1.85rem/800 : quatre blocs
   qui criaient aussi fort que l'action principale. Elles deviennent une
   bande unique, séparée par des filets verticaux — un bandeau de mesure
   d'instrument, pas quatre affiches. */
.rr-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius);
    overflow: hidden;
    margin-bottom: 18px;
}
.rr-metric {
    padding: 14px 18px;
    border-left: 1px solid var(--rr-border);
    min-width: 0;
}
.rr-metric:first-child { border-left: 0; }
.rr-metric-label {
    font-size: .6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .085em; color: var(--rr-faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rr-metric-value {
    font-size: 1.5rem; font-weight: 500; line-height: 1.2;
    margin-top: 3px; letter-spacing: -.02em;
}
.rr-metric-hint { font-size: .75rem; color: var(--rr-muted); margin-top: 1px; }
/* Une seule métrique peut être mise en avant, et uniquement quand elle
   appelle une action (des fichiers à télécharger). Sinon : rien. */
.rr-metric.live .rr-metric-value { color: var(--rr-primary); }
.rr-metric.live .rr-metric-label { color: var(--rr-primary); opacity: .85; }

@media (max-width: 575.98px) {
    .rr-metrics { grid-template-columns: repeat(2, 1fr); }
    .rr-metric:nth-child(odd) { border-left: 0; }
    .rr-metric:nth-child(n+3) { border-top: 1px solid var(--rr-border); }
}

/* Compatibilité : anciens appels statTile() encore en place ailleurs. */
.rr-stat {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius);
    padding: 15px 18px;
    height: 100%;
}
.rr-stat .rr-stat-label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .085em; color: var(--rr-faint); font-weight: 600; }
.rr-stat .rr-stat-value { font-size: 1.5rem; font-weight: 500; line-height: 1.2; margin-top: 3px; letter-spacing: -.02em; }
.rr-stat .rr-stat-hint  { font-size: .75rem; color: var(--rr-muted); margin-top: 1px; }
.rr-stat.accent {
    /* Meme raison que .rr-revision : pas de filet lateral epais. La mise
       en avant passe par la teinte du chiffre, pas par un bord. */
    border-color: color-mix(in srgb, var(--rr-primary) 35%, transparent);
}
.rr-stat.accent .rr-stat-value { color: var(--rr-primary); }

/* ---------- Tables ---------- */
.rr-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.rr-table th {
    text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--rr-muted); font-weight: 600;
    padding: 10px 12px; border-bottom: 1px solid var(--rr-border); white-space: nowrap;
}
.rr-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--rr-border);
    vertical-align: middle;
    color: var(--rr-text);
}
/* La dernière ligne n'a pas besoin d'un filet : il double le bord de la carte. */
.rr-table tbody tr:last-child td { border-bottom: 0; }
.rr-table tbody tr { transition: background .12s; }
.rr-table tbody tr:hover { background: var(--rr-hover); }
/* Les colonnes secondaires (véhicule, date) reculent d'un cran pour que
   la référence et le statut portent la lecture. */
.rr-table .rr-td-sub { color: var(--rr-muted); font-size: .8125rem; }
.rr-table-wrap { overflow-x: auto; }
.rr-mono { font-size: .8125rem; }

/* ---------- Formulaires ---------- */
.form-control, .form-select {
    background: var(--rr-bg);
    border: 1px solid var(--rr-border);
    color: var(--rr-text);
    border-radius: 9px;
    padding: 9px 12px;
}
.form-control:focus, .form-select:focus {
    background: var(--rr-bg);
    color: var(--rr-text);
    border-color: var(--rr-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rr-primary) 30%, transparent);
}
/* Suffixe d'unité (€ / cr.) accolé aux champs de prix : Bootstrap le laisse
   sur fond clair, invisible en thème sombre. */
.input-group-text {
    background: var(--rr-surface-2);
    border: 1px solid var(--rr-border);
    color: var(--rr-muted);
    font-size: .8rem;
    font-weight: 600;
}

/* ------------------------------------------------------------------
   Composants Bootstrap livrés « thème clair » : tout ce qui garde un
   fond blanc ou une icône noire devient illisible sur fond sombre.
   Chaque règle ci-dessous en reprend un avec les variables du thème.
   ------------------------------------------------------------------ */

/* Flèche des <select> : le SVG Bootstrap est dessiné en gris foncé.
   La règle générale .form-select utilise le raccourci `background:` qui
   remet repeat/position/size à leurs valeurs par défaut — on les refixe
   ici, sinon le chevron se répète sur toute la largeur du champ. */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a3b3c9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
}

/* Croix de fermeture (modales, alertes) : noire par défaut. */
.btn-close {
    filter: invert(1) grayscale(100%) brightness(1.6);
}
.alert .btn-close { filter: none; }   /* les alertes restent claires, croix noire lisible */

/* Pagination. */
.pagination .page-link {
    background: var(--rr-surface);
    border-color: var(--rr-border);
    color: var(--rr-text);
}
.pagination .page-link:hover {
    background: var(--rr-surface-2);
    border-color: var(--rr-border);
    color: var(--rr-primary);
}
.pagination .page-item.active .page-link {
    background: var(--rr-primary);
    border-color: var(--rr-primary);
    color: var(--rr-on-primary);
}
.pagination .page-item.disabled .page-link {
    background: var(--rr-surface);
    border-color: var(--rr-border);
    color: var(--rr-muted);
}

/* Bouton « Parcourir » des champs fichier. */
.form-control::file-selector-button {
    background: var(--rr-surface-2);
    color: var(--rr-text);
    border: 0;
    border-right: 1px solid var(--rr-border);
}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background: var(--rr-primary-soft);
}

/* Champs désactivés / lecture seule. */
.form-control:disabled, .form-control[readonly], .form-select:disabled {
    background: var(--rr-surface-2);
    color: var(--rr-muted);
    opacity: 1;
}

/* Pictos natifs des champs date/heure (noirs par défaut). */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(.8);
}

/* Onglets pills : libellé inactif hérité du bleu lien Bootstrap. */
.nav-pills .nav-link { color: var(--rr-muted); }
.nav-pills .nav-link:hover { color: var(--rr-text); }
.nav-pills .nav-link.active { background: var(--rr-primary); color: var(--rr-on-primary); }

/* Accordéon / list-group au cas où. */
.list-group-item {
    background: var(--rr-surface);
    border-color: var(--rr-border);
    color: var(--rr-text);
}

/* Cases et interrupteurs : alignés sur la couleur primaire du thème
   plutôt que le bleu Bootstrap. */
.form-check-input {
    background-color: var(--rr-surface-2);
    border-color: var(--rr-border);
}
.form-check-input:checked {
    background-color: var(--rr-primary);
    border-color: var(--rr-primary);
}
.form-check-input:focus {
    border-color: var(--rr-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rr-primary) 30%, transparent);
}

.form-label { font-size: .8rem; font-weight: 600; color: var(--rr-muted); margin-bottom: 5px; }
.form-text { color: var(--rr-muted); font-size: .78rem; }

.btn-primary {
    background: var(--rr-primary); border-color: var(--rr-primary);
    font-weight: 600; border-radius: 9px;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--rr-primary-hover); border-color: var(--rr-primary-hover);
}
.btn-outline-primary { color: var(--rr-primary); border-color: var(--rr-primary); border-radius: 9px; }
.btn-outline-primary:hover { background: var(--rr-primary); border-color: var(--rr-primary); }

/* ---------- Sélecteur d'options de tuning ---------- */
.rr-option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.rr-option {
    position: relative;
    border: 1px solid var(--rr-border);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.rr-option:hover { border-color: var(--rr-primary); }
.rr-option input { position: absolute; opacity: 0; pointer-events: none; }
.rr-option.selected { border-color: var(--rr-primary); background: var(--rr-primary-soft); }
.rr-option .rr-option-name { font-weight: 600; font-size: .88rem; display: flex; align-items: center; gap: 7px; }
.rr-option .rr-option-price { font-size: .78rem; color: var(--rr-muted); margin-top: 3px; }
.rr-option .rr-option-free { color: var(--rr-success); font-weight: 600; }

.rr-stage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.rr-stage {
    border: 1px solid var(--rr-border); border-radius: var(--rr-radius);
    padding: 16px; cursor: pointer; text-align: center; transition: all .15s;
}
.rr-stage:hover { border-color: var(--rr-primary); }
.rr-stage.selected { border-color: var(--rr-primary); background: var(--rr-primary-soft); }
.rr-stage input { position: absolute; opacity: 0; pointer-events: none; }
.rr-stage .rr-stage-name { font-weight: 600; font-size: 1rem; }
.rr-stage .rr-stage-price { color: var(--rr-primary); font-weight: 600; margin-top: 6px; }
.rr-stage .rr-stage-desc { font-size: .76rem; color: var(--rr-muted); margin-top: 6px; }

/* ---------- Zone de dépôt de fichier ---------- */
.rr-dropzone {
    border: 2px dashed var(--rr-border); border-radius: var(--rr-radius);
    padding: 30px 20px; text-align: center; cursor: pointer; transition: all .15s;
}
.rr-dropzone:hover { border-color: var(--rr-primary); }
/* Même signal que sur le tableau de bord : tiretée -> pleine. */
.rr-dropzone.dragover {
    border-style: solid;
    border-color: var(--rr-primary);
    background: var(--rr-primary-soft);
}
.rr-dropzone i { font-size: 1.6rem; color: var(--rr-faint); transition: color .16s; }
.rr-dropzone:hover i, .rr-dropzone.dragover i { color: var(--rr-primary); }
.rr-dropzone.has-file { border-style: solid; border-color: var(--rr-success); }
.rr-dropzone.has-file i { color: var(--rr-success); }

/* ---------- Récapitulatif prix ---------- */
.rr-summary { position: sticky; top: 20px; }
.rr-summary-line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .87rem; }
.rr-summary-total {
    display: flex; justify-content: space-between; gap: 12px;
    padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--rr-border);
    font-weight: 600; font-size: 1.05rem;
}
.rr-summary-total span:last-child { color: var(--rr-primary); }

/* ---------- Timeline ---------- */
.rr-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.rr-timeline::before {
    content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px;
    width: 2px; background: var(--rr-border);
}
.rr-timeline li { position: relative; padding: 0 0 18px 32px; }
.rr-timeline li::before {
    content: ''; position: absolute; left: 4px; top: 5px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--rr-surface); border: 2px solid var(--rr-primary);
}
.rr-timeline .rr-tl-time { font-size: .74rem; color: var(--rr-muted); }
.rr-timeline .rr-tl-body { font-size: .88rem; margin-top: 2px; }

/* ---------- Barre d'enregistrement unique du catalogue ---------- */
.rr-savebar {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius);
    padding: 12px 18px;
    margin-bottom: 20px;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .18);
}

/* ---------- Flux financier (facturé − reversé = gagné) ---------- */
.rr-flow { display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }

.rr-flow-item {
    flex: 1 1 230px;
    min-width: 0;
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius);
    padding: 18px 20px;
}
.rr-flow-item.total {
    border-color: var(--rr-primary);
    background: var(--rr-primary-soft);
}
.rr-flow-op {
    display: flex; align-items: center; flex: 0 0 auto;
    font-size: 1.5rem; font-weight: 600; color: var(--rr-muted);
}
.rr-flow-label {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--rr-muted); font-weight: 600;
}
.rr-flow-value { font-size: 1.9rem; font-weight: 600; line-height: 1.1; margin-top: 6px; }
.rr-flow-item.total .rr-flow-value { color: var(--rr-primary); }
.rr-flow-hint { font-size: .78rem; color: var(--rr-muted); margin-top: 8px; line-height: 1.5; }
.rr-flow-hint span { display: block; }

@media (max-width: 767.98px) {
    .rr-flow-op { display: none; }
    .rr-flow-value { font-size: 1.6rem; }
}

/* ---------- Graphiques ----------
   Chart.js en maintainAspectRatio:false calcule sa taille d'après le parent.
   Ce parent DOIT avoir une hauteur explicite, sinon canvas et conteneur se
   nourrissent mutuellement et la page s'allonge sans fin. */
.rr-chart {
    position: relative;
    width: 100%;
    min-width: 0;
}
.rr-chart > canvas { display: block; }
.rr-chart-lg { height: 300px; }
.rr-chart-sm { height: 220px; }

@media (max-width: 767.98px) {
    .rr-chart-lg { height: 240px; }
    .rr-chart-sm { height: 200px; }
}

/* ---------- Dashboard client : bienvenue, actions, simulateur ---------- */
/* ---------- Accueil ----------
   Le dégradé diagonal teinté de primaire est supprimé : c'était le « glow »
   décoratif, il n'apportait aucune information et datait la page. Le
   bandeau devient un simple bloc de titre, sans conteneur ni fond. */
.rr-welcome {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px;
    padding: 2px 0 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--rr-border);
}
.rr-welcome h2 {
    font-size: 1.375rem; font-weight: 600; margin: 0;
    letter-spacing: -.021em;
}
.rr-welcome p { color: var(--rr-muted); margin: 0; font-size: .8125rem; }
.rr-welcome .rr-welcome-meta { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* ---------- Zone de dépôt (action principale) ----------
   Un seul élément de la page a le droit d'être le plus saillant. C'est
   celui-ci. Bordure tiretée = affordance universelle du dépôt de fichier,
   sans avoir besoin de l'expliquer. */
.rr-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; text-align: center;
    min-height: 176px;
    padding: 28px 24px;
    background: var(--rr-surface);
    border: 1.5px dashed var(--rr-border-strong);
    border-radius: var(--rr-radius);
    color: var(--rr-text);
    cursor: pointer;
    transition: border-color .16s, background .16s;
}
.rr-drop:hover { border-color: var(--rr-primary); color: var(--rr-text); }
/* État de survol d'un fichier : la bordure devient pleine. Le passage de
   tiretée à pleine est un signal fort et lisible même en vision réduite,
   là où un simple changement de teinte passerait inaperçu. */
.rr-drop.is-over {
    border-style: solid;
    border-color: var(--rr-primary);
    background: var(--rr-primary-soft);
}
.rr-drop-mark {
    font-size: 1.6rem; line-height: 1;
    color: var(--rr-faint);
    margin-bottom: 4px;
    transition: color .16s;
}
.rr-drop:hover .rr-drop-mark, .rr-drop.is-over .rr-drop-mark { color: var(--rr-primary); }
.rr-drop-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.012em; }
.rr-drop-sub { font-size: .8125rem; color: var(--rr-muted); max-width: 46ch; }
.rr-drop-ext {
    font-family: var(--rr-font-mono);
    font-size: .6875rem;
    color: var(--rr-faint);
    letter-spacing: .02em;
    margin-top: 6px;
}
.rr-drop-busy { font-size: .8125rem; color: var(--rr-primary); }

/* ---------- Liens secondaires ----------
   Anciennement .rr-action-card avec pastille colorée 42px. Les trois
   pastilles (primaire, secondaire, accent) mettaient trois couleurs de
   marque côte à côte : c'est ce qui produisait l'effet « site de clown ».
   Elles deviennent des lignes sobres, sans aplat de couleur. */
.rr-action-card {
    display: flex; align-items: center; gap: 12px;
    background: transparent;
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius-sm);
    padding: 13px 15px;
    color: var(--rr-text);
    height: 100%;
    transition: border-color .15s, background .15s;
}
.rr-action-card:hover { border-color: var(--rr-border-strong); background: var(--rr-hover); color: var(--rr-text); }
.rr-action-icon {
    flex-shrink: 0;
    width: auto; height: auto; border-radius: 0;
    display: block; font-size: 1.05rem; margin: 0;
    background: none; color: var(--rr-faint);
}
.rr-action-card.alt .rr-action-icon,
.rr-action-card.alt2 .rr-action-icon { background: none; color: var(--rr-faint); }
.rr-action-card .rr-action-title { font-weight: 600; font-size: .875rem; margin-bottom: 1px; }
.rr-action-card .rr-action-desc { font-size: .75rem; color: var(--rr-muted); line-height: 1.4; }

.rr-sim-stages { display: flex; flex-wrap: wrap; gap: 8px; }
.rr-sim-stage {
    border: 1px solid var(--rr-border);
    background: var(--rr-bg);
    color: var(--rr-text);
    border-radius: 9px;
    padding: 6px 14px;
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.rr-sim-stage:hover { border-color: var(--rr-primary); }
.rr-sim-stage.active { background: var(--rr-primary); border-color: var(--rr-primary); color: var(--rr-on-primary); }

/* ---------- Cartes de thèmes prédéfinis ---------- */
.rr-preset {
    background: var(--rr-bg);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius);
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color .15s, transform .1s;
    color: var(--rr-text);
    height: 100%;
}
.rr-preset:hover { border-color: var(--rr-primary); transform: translateY(-1px); }
.rr-preset-active { border-color: var(--rr-primary); background: var(--rr-primary-soft); }

/* ---------- Boutons ----------
   Bootstrap fixe lui-meme la couleur de texte de ses boutons (#fff) : le
   token --rr-on-primary, calcule par contraste, ne l atteignait pas. Sur le
   cuivre, cela donnait 3,33:1 — sous le seuil, et sur le bouton le plus
   utilise du panel. */
.btn-primary {
    --bs-btn-bg: var(--rr-primary);
    --bs-btn-border-color: var(--rr-primary);
    --bs-btn-color: var(--rr-on-primary);
    --bs-btn-hover-bg: var(--rr-primary-hover);
    --bs-btn-hover-border-color: var(--rr-primary-hover);
    --bs-btn-hover-color: var(--rr-on-primary);
    --bs-btn-active-bg: var(--rr-primary-hover);
    --bs-btn-active-border-color: var(--rr-primary-hover);
    --bs-btn-active-color: var(--rr-on-primary);
    --bs-btn-disabled-bg: var(--rr-primary);
    --bs-btn-disabled-border-color: var(--rr-primary);
    --bs-btn-disabled-color: var(--rr-on-primary);
}
.btn-outline-primary {
    /* Encre derivee plutot que teinte brute : sur une palette claire choisie
       par le revendeur, la teinte pleine tombe sous 4,5:1. */
    --bs-btn-color: var(--rr-primary-ink);
    color: var(--rr-primary-ink);
    --bs-btn-border-color: var(--rr-primary);
    --bs-btn-hover-bg: var(--rr-primary);
    --bs-btn-hover-border-color: var(--rr-primary);
    --bs-btn-hover-color: var(--rr-on-primary);
    --bs-btn-active-bg: var(--rr-primary);
    --bs-btn-active-border-color: var(--rr-primary);
    --bs-btn-active-color: var(--rr-on-primary);
}

/* ---------- Badges d'état ----------
   Les badges Bootstrap (.bg-success, .bg-warning text-dark…) sont des
   aplats pleins très saturés : sur fond sombre ils sautent au visage plus
   fort que le contenu qu'ils qualifient, et « Traité » criait aussi fort
   que « Rejeté ». Ici : fond tramé à 15 % de la teinte, texte à la teinte
   pleine, et une pastille de 6 px qui porte la couleur. Le badge se lit
   d'abord comme du texte, la couleur n'est qu'un second niveau.

   La pastille sert aussi de sécurité daltonisme : forme + position
   restent identiques, mais le libellé reste toujours explicite en toutes
   lettres — la couleur n'est jamais le seul porteur d'information. */
.rr-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px 3px 8px;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.45;
    white-space: nowrap;
    border: 1px solid transparent;
}
.rr-badge::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.rr-badge-ok      { color: var(--rr-success-ink); background: var(--rr-success-soft); border-color: var(--rr-success-soft); }
.rr-badge-wait    { color: var(--rr-warning-ink); background: var(--rr-warning-soft); border-color: var(--rr-warning-soft); }
.rr-badge-run     { color: var(--rr-info-ink);    background: var(--rr-info-soft);    border-color: var(--rr-info-soft); }
.rr-badge-out     { color: var(--rr-primary-ink); background: var(--rr-primary-soft); border-color: var(--rr-primary-soft); }
.rr-badge-ko      { color: var(--rr-danger-ink);  background: var(--rr-danger-soft);  border-color: var(--rr-danger-soft); }
.rr-badge-neutral { color: var(--rr-muted);   background: var(--rr-hover);        border-color: var(--rr-border); }

/* Les .badge.bg-* de Bootstrap restent dispersés dans une trentaine
   d'appels (catalogue, facturation, journaux…). Plutôt que de réécrire
   chaque site d'appel — et de rater les suivants — on redéfinit les
   classes elles-mêmes : elles adoptent le même traitement tramé que
   .rr-badge. Un aplat saturé ne peut plus réapparaître nulle part. */
.badge {
    font-weight: 500;
    font-size: .75rem;
    padding: 3px 9px;
    border-radius: 6px;
    border: 1px solid transparent;
}
.badge.bg-success   { color: var(--rr-success-ink) !important; background: var(--rr-success-soft) !important; }
.badge.bg-warning   { color: var(--rr-warning-ink) !important; background: var(--rr-warning-soft) !important; }
.badge.bg-danger    { color: var(--rr-danger-ink)  !important; background: var(--rr-danger-soft)  !important; }
.badge.bg-info      { color: var(--rr-info-ink)    !important; background: var(--rr-info-soft)    !important; }
.badge.bg-primary   { color: var(--rr-primary-ink) !important; background: var(--rr-primary-soft) !important; }
.badge.bg-secondary { color: var(--rr-muted)   !important; background: var(--rr-hover) !important; border-color: var(--rr-border); }
/* .text-dark accompagnait les aplats clairs (bg-warning, bg-info) pour
   rendre le texte lisible dessus. Sur fond tramé il produit du noir sur
   sombre : neutralisé. */
.badge.text-dark { color: inherit !important; }

/* ---------- Compteurs ----------
   Un compteur n'est pas un badge d'état : il ne qualifie pas un objet, il
   signale une quantité qui attend une action. Il garde donc un aplat plein
   là où les états passent en tramé.

   Il n'utilise plus .badge ni les utilitaires de position de Bootstrap.
   Raison : ces utilitaires portent !important, donc toute correction de
   géométrie depuis la feuille du thème se transformait en surenchère de
   !important. Un composant autonome coûte moins cher à maintenir qu'une
   bataille de spécificité.

   Cuivre plutôt que rouge : « 8 fichiers vous attendent » n'est pas une
   erreur. Le rouge reste réservé aux échecs réels. */
.rr-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--rr-primary);
    color: var(--rr-on-primary);
    font-family: var(--rr-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: .6875rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

/* Superposé au bouton cloche. Le halo à la couleur du fond détache la
   pastille du bouton qu'elle mord : sans lui, elle se lit comme une bavure
   sur la bordure. Le décalage reste faible (5 px) pour que la pastille ne
   remonte pas vers le bord haut de la page. */
.rr-bell { position: relative; overflow: visible; }
.rr-bell .rr-count {
    position: absolute;
    top: -5px; right: -5px;
    box-shadow: 0 0 0 2px var(--rr-bg);
    pointer-events: none;
}

/* En fin de ligne de navigation : aligné dans le flux, pas de halo. */
.rr-count-inline { margin-left: auto; }

/* Variante sans pastille, pour les métadonnées (horaires, rôle…). */
.rr-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 6px;
    font-size: .75rem; font-weight: 500;
    color: var(--rr-muted); background: var(--rr-hover);
    border: 1px solid var(--rr-border);
}

/* ---------- Puce à bascule ----------
   Une case à cocher qui doit se lire d'un coup d'œil dans une ligne dense :
   l'état est porté par le fond, pas par un carré de 13 px. */
.rr-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 6px;
    font-size: .75rem; font-weight: 500; cursor: pointer;
    color: var(--rr-muted); background: var(--rr-hover);
    border: 1px solid var(--rr-border);
    white-space: nowrap;
    transition: color .12s, background .12s, border-color .12s;
}
.rr-chip:hover { border-color: var(--rr-border-strong); }
.rr-chip.on {
    color: var(--rr-primary);
    background: var(--rr-primary-soft);
    border-color: var(--rr-primary-soft);
}
.rr-chip input { accent-color: var(--rr-primary); margin: 0; }
/* Le côté concerné (vente / achat) est écrit dans la puce : deux puces au
   libellé identique côte à côte seraient indiscernables. */
.rr-chip-side {
    font-family: var(--rr-font-mono);
    font-size: .625rem; text-transform: uppercase; letter-spacing: .06em;
    opacity: .7;
}
/* La puce d'achat emprunte la teinte « partenaire » pour se distinguer au
   premier regard de celle qui pilote la facturation client. */
.rr-chip-loja.on {
    color: var(--rr-secondary);
    background: color-mix(in srgb, var(--rr-secondary) 14%, transparent);
    border-color: color-mix(in srgb, var(--rr-secondary) 14%, transparent);
}
.rr-chip-loja input { accent-color: var(--rr-secondary); }

/* ---------- Grille tarifaire ----------
   Densité de tableur : lignes courtes, champs sans bordure au repos, filet
   de séparation seul. Un formulaire de 90 lignes avec 90 encadrés visibles
   devient un mur ; ici la structure vient des filets, et le champ ne se
   dessine qu'au survol ou au focus — là où le regard est déjà. */
.rr-grid-toolbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    padding-bottom: 14px; margin-bottom: 2px;
}

.rr-grid-wrap {
    overflow: auto;
    max-height: calc(100vh - 340px);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius-sm);
}

.rr-grid { font-size: .8125rem; }

/* L'en-tête reste lisible après 40 lignes de défilement. */
.rr-grid thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--rr-surface-2);
    padding: 9px 12px;
    border-bottom: 1px solid var(--rr-border);
}
.rr-th-sub {
    display: block; font-weight: 400; text-transform: none;
    letter-spacing: 0; font-size: .6875rem; color: var(--rr-faint);
}

.rr-grid td { padding: 4px 12px; }
.rr-grid-name { font-weight: 500; }

/* En-tête de catégorie : repère de section, pas une ligne de données. */
.rr-grid-group td {
    position: sticky; top: 38px; z-index: 1;
    background: var(--rr-bg);
    font-family: var(--rr-font-mono);
    font-size: .6875rem; text-transform: uppercase; letter-spacing: .085em;
    color: var(--rr-faint);
    padding: 12px 12px 6px;
    border-bottom: 1px solid var(--rr-border);
}

.rr-grid-row.inactive .rr-grid-name { color: var(--rr-faint); }
/* Une marge négative se voit à la ligne entière, pas au seul chiffre :
   en défilement rapide, un fond teinté accroche là où un texte rouge de
   12 px passe inaperçu. */
.rr-grid-row.loss { background: var(--rr-danger-soft); }
.rr-grid-row.loss .rr-grid-margin,
.rr-grid-row.loss .rr-grid-pct { color: var(--rr-danger); font-weight: 500; }

/* Champs discrets au repos. */
.rr-grid .input-group-sm > .form-control {
    background: transparent;
    border-color: transparent;
    padding: 4px 8px;
    text-align: right;
}
.rr-grid .input-group-sm > .form-control:hover { border-color: var(--rr-border); }
.rr-grid .input-group-sm > .form-control:focus {
    background: var(--rr-bg);
    border-color: var(--rr-primary);
    box-shadow: var(--rr-ring);
}
.rr-grid .input-group-sm > .input-group-text {
    background: transparent; border-color: transparent;
    color: var(--rr-faint); padding: 4px 6px 4px 0;
}
.rr-grid-locked {
    display: block; text-align: right; padding: 4px 6px 4px 0;
    color: var(--rr-muted);
}

.rr-grid-margin, .rr-grid-pct { white-space: nowrap; }

@media (max-width: 767.98px) {
    .rr-grid-wrap { max-height: none; }
    .rr-grid-pct { display: none; }
    .rr-grid thead th:last-child { display: none; }
}

/* ---------- Parcours de depot en quatre temps ----------
   Le formulaire monolithe demandait au client de tout savoir avant de
   pouvoir commencer. Chaque etape est desormais repondable avec ce qu il a
   sous les yeux a cet instant : le fichier, puis la voiture, puis le choix,
   puis la verification. */
.rr-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--rr-border);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius);
    overflow: hidden;
    margin-bottom: 18px;
}
.rr-step-tab {
    display: flex; align-items: center; gap: 11px;
    background: var(--rr-surface);
    border: 0; text-align: left;
    padding: 13px 16px;
    color: var(--rr-muted);
    font: inherit; font-size: .8125rem;
    cursor: pointer;
    transition: background .14s, color .14s;
    min-width: 0;
}
.rr-step-tab:disabled { cursor: default; opacity: .55; }
.rr-step-tab:not(:disabled):hover { background: var(--rr-hover); color: var(--rr-text); }
.rr-step-tab:focus-visible { outline: none; box-shadow: inset var(--rr-ring); }

/* Le numero porte l etat : a faire, faite, en cours. Un chiffre change de
   fond, jamais de taille — sinon la barre tressaute a chaque etape. */
.rr-step-n {
    flex-shrink: 0;
    width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--rr-font-mono); font-size: .6875rem; font-weight: 500;
    background: var(--rr-hover); color: var(--rr-faint);
    border: 1px solid var(--rr-border);
    transition: background .14s, color .14s, border-color .14s;
}
.rr-step-txt { display: flex; flex-direction: column; min-width: 0; }
.rr-step-title { font-weight: 600; color: inherit; }
.rr-step-sub {
    font-size: .6875rem; color: var(--rr-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.rr-step-tab[aria-current="step"] { background: var(--rr-primary-soft); color: var(--rr-text); }
.rr-step-tab[aria-current="step"] .rr-step-n {
    background: var(--rr-primary); color: var(--rr-on-primary); border-color: var(--rr-primary);
}
.rr-step-tab.done .rr-step-n {
    background: var(--rr-success-soft); color: var(--rr-success);
    border-color: var(--rr-success-soft);
}

@media (max-width: 767.98px) {
    .rr-steps { grid-template-columns: repeat(4, 1fr); }
    .rr-step-tab { padding: 11px 8px; justify-content: center; }
    .rr-step-txt { display: none; }
}

.rr-panel:focus { outline: none; }

/* La zone de depot signale son manque sans crier : la bordure passe a la
   teinte d avertissement, le message se lit sous elle. */
.rr-dropzone.is-missing { border-color: var(--rr-warning); border-style: solid; }
.rr-step-msg {
    font-size: .8125rem; color: var(--rr-warning);
    margin-top: 8px; min-height: 1.2em;
}
.rr-step-msg:empty { margin-top: 0; min-height: 0; }

/* Barre persistante : le total suit le client d une etape a l autre, donc
   il ne decouvre jamais le prix au dernier ecran. */
.rr-stepbar {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; align-items: center; gap: 12px;
    padding: 13px 18px;
    margin-top: 18px;
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius);
    box-shadow: 0 -6px 22px -12px rgba(0, 0, 0, .55);
}
.rr-stepbar-total { display: flex; align-items: baseline; gap: 9px; margin-right: auto; min-width: 0; }
.rr-stepbar-label {
    font-size: .6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .085em; color: var(--rr-faint);
}
.rr-stepbar-value {
    font-family: var(--rr-font-mono); font-variant-numeric: tabular-nums;
    font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em;
}
.rr-stepbar-cr { font-size: .8125rem; color: var(--rr-muted); }

/* Le simulateur de gains, remonte dans l etape Preparation : il repond
   desormais a la question posee juste au-dessus au lieu d illustrer. */
.rr-prep-gains {
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid var(--rr-border);
}

/* Le recapitulatif n est plus une colonne laterale mais l etape finale :
   il occupe la largeur et se lit comme une facture. */
.rr-recap { max-width: 620px; }
.rr-recap .rr-summary { position: static; }

/* ---------- File de travail ----------
   L ancienneté est la seule donnee decisionnelle de la carte : le vehicule et
   la prestation servent a reconnaitre, pas a decider. La hierarchie
   typographique suit cet ordre, pas l ordre du formulaire. */
.rr-queue {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}
@media (max-width: 991.98px) { .rr-queue { grid-template-columns: 1fr; } }

.rr-qcol {
    background: var(--rr-surface);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius);
    padding: 14px;
    min-width: 0;
}
/* Une seule colonne appelle une action immediate : elle seule porte la
   couleur de marque. */
.rr-qcol.primary { border-color: var(--rr-primary); }

.rr-qhead {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--rr-border);
}
.rr-qhead h2 { font-size: .9375rem; font-weight: 600; margin: 0; letter-spacing: -.008em; }
.rr-qcount {
    grid-row: 1 / span 2;
    align-self: center;
    font-family: var(--rr-font-mono); font-variant-numeric: tabular-nums;
    font-size: 1.375rem; font-weight: 500; line-height: 1;
    color: var(--rr-faint);
}
.rr-qcol.primary .rr-qcount { color: var(--rr-primary); }
.rr-qhint { grid-column: 1; font-size: .6875rem; color: var(--rr-muted); margin: 0; }

.rr-qbody { display: flex; flex-direction: column; gap: 9px; }
.rr-qempty { font-size: .8125rem; color: var(--rr-muted); margin: 6px 0; }

.rr-qcard {
    background: var(--rr-bg);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius-sm);
    padding: 12px 13px;
    display: flex; flex-direction: column; gap: 3px;
}
.rr-qcard.late { border-color: color-mix(in srgb, var(--rr-danger) 40%, transparent); }

.rr-qref {
    font-family: var(--rr-font-mono); font-size: .6875rem;
    color: var(--rr-primary); text-decoration: none;
}
.rr-qref:hover { text-decoration: underline; }
.rr-qveh { font-size: .875rem; font-weight: 600; margin: 0; letter-spacing: -.008em; }
.rr-qmeta { font-size: .75rem; color: var(--rr-muted); margin: 0; }
.rr-qprep { font-size: .75rem; color: var(--rr-muted); margin: 0 0 3px; }
.rr-qopts { display: block; }

.rr-qfoot {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 5px 0 9px;
}
.rr-qage {
    font-family: var(--rr-font-mono); font-variant-numeric: tabular-nums;
    font-size: .6875rem; color: var(--rr-muted);
}
.rr-qcard.late .rr-qage { color: var(--rr-danger); font-weight: 500; }

/* La carte devient sa propre zone de depot : le fichier revient la ou il est
   parti. Continuite spatiale — le geste n a pas besoin d etre explique. */
.rr-qdrop {
    margin-top: 7px;
    padding: 9px;
    border: 1.5px dashed var(--rr-border-strong);
    border-radius: var(--rr-radius-sm);
    text-align: center;
    cursor: pointer;
    transition: border-color .16s, background .16s, color .16s;
}
.rr-qdrop-label { font-size: .6875rem; color: var(--rr-muted); }
.rr-qdrop:hover { border-color: var(--rr-primary); }
.rr-qdrop:hover .rr-qdrop-label { color: var(--rr-primary); }
.rr-qdrop.over {
    border-style: solid; border-color: var(--rr-primary);
    background: var(--rr-primary-soft);
}
.rr-qdrop.over .rr-qdrop-label { color: var(--rr-primary); }
.rr-qdrop.busy { border-style: solid; border-color: var(--rr-success); }
.rr-qdrop.busy .rr-qdrop-label { color: var(--rr-success); }

/* ---------- Envoi partenaire non abouti ----------
   Une alerte rouge pleine largeur avec un message de cURL dedans dit au
   revendeur qu il a un probleme, jamais quoi en faire. Ce bloc porte les
   trois seules choses utiles : ce qui s est passe, ou en est le fichier, et
   le bouton qui reprend l envoi. */
.rr-lojafail {
    background: var(--rr-danger-soft);
    border: 1px solid color-mix(in srgb, var(--rr-danger) 30%, transparent);
    border-radius: var(--rr-radius-sm);
    padding: 14px 18px;
    margin-bottom: 18px;
}
.rr-lojafail-head {
    font-size: .6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .085em; color: var(--rr-danger-ink); margin-bottom: 6px;
}
.rr-lojafail p { margin: 0; font-size: .875rem; max-width: 70ch; }
.rr-lojafail-warn { margin-top: 8px !important; color: var(--rr-warning-ink); }
.rr-lojafail summary { cursor: pointer; }
.rr-lojafail code {
    font-family: var(--rr-font-mono); color: var(--rr-muted);
    word-break: break-all;
}

/* ---------- Motif de retouche ----------
   Ce que le client reproche au fichier est la premiere chose a lire quand il
   revient. Un filet de 2px et un fond tramé suffisent : c est une information
   urgente, pas une alerte d erreur : la couleur reste celle de l attente, et
   c est le sur-titre qui la porte. Pas de filet lateral epais — un bord
   colore de 2px sur une carte est le tic visuel le plus reconnaissable des
   interfaces generees, et le detecteur le releve a juste titre. */
.rr-revision {
    background: var(--rr-warning-soft);
    border: 1px solid color-mix(in srgb, var(--rr-warning) 30%, transparent);
    border-radius: var(--rr-radius-sm);
    padding: 14px 18px;
    margin-bottom: 18px;
}
.rr-revision-head {
    font-size: .6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .085em; color: var(--rr-warning); margin-bottom: 6px;
}
.rr-revision p { margin: 0; font-size: .875rem; max-width: 70ch; }

/* Rappel : --rr-faint tient 3:1 (seuil non-textuel) et se reserve aux
   icones, sur-titres et ornements. Tout texte porteur d information prend
   --rr-muted, qui tient 4.5:1. Mesure sur la palette Atelier : faint
   3,12:1, muted 5,97:1 sur une carte. */

/* ---------- Cibles tactiles ----------
   Les .btn-sm de Bootstrap font 31 px de haut : correct a la souris, sous le
   seuil des 44 px des le doigt. La file de travail est precisement l ecran
   qu on consulte au telephone, une main dans le moteur.

   On cible le POINTEUR, pas la largeur : une tablette large reste tactile, et
   un portable etroit reste a la souris. Elargir a tous les petits ecrans
   aurait grossi l interface la ou ce n etait pas necessaire. */
@media (pointer: coarse) {
    .btn, .btn-sm,
    .rr-step-tab,
    .rr-qdrop,
    .form-control, .form-select {
        min-height: 44px;
    }
    .btn-sm { padding-top: .5rem; padding-bottom: .5rem; }

    /* Un champ de grille tarifaire reste dense : c est un tableur, il se
       remplit au clavier. Seule sa hauteur de frappe augmente. */
    .rr-grid .input-group-sm > .form-control { min-height: 40px; }

    /* Espacement minimal entre deux cibles voisines. */
    .rr-qcard .btn + .rr-qdrop { margin-top: 10px; }
}

/* ---------- Bandeau de retard ----------
   Le nombre porte l alerte, pas une icone : c est la seule donnee que le
   revendeur lit vraiment en arrivant. Teinte d attente et non d erreur — un
   fichier en retard n est pas une panne, c est une file qui deborde. */
.rr-late {
    display: flex; align-items: center; gap: 16px;
    background: var(--rr-warning-soft);
    border: 1px solid color-mix(in srgb, var(--rr-warning) 30%, transparent);
    border-radius: var(--rr-radius);
    padding: 14px 18px;
    margin-bottom: 16px;
}
.rr-late-count {
    font-family: var(--rr-font-mono); font-variant-numeric: tabular-nums;
    font-size: 1.75rem; font-weight: 500; line-height: 1;
    color: var(--rr-warning-ink);
    flex-shrink: 0;
}
.rr-late strong { font-size: .9375rem; }
.rr-late p { margin: 2px 0 0; font-size: .8125rem; color: var(--rr-muted); max-width: 70ch; }

/* ---------- Mode d emploi du cron ----------
   Deux commandes a copier, pas un paragraphe a dechiffrer. Le libelle
   au-dessus de chaque ligne dit dans quel cas elle s applique. */
.rr-cron-howto {
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--rr-border);
}
.rr-cron-label {
    font-size: .6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .085em; color: var(--rr-faint);
    margin: 10px 0 5px;
}
.rr-cron-label:first-child { margin-top: 0; }
.rr-cron-howto code {
    display: block;
    background: var(--rr-bg);
    border: 1px solid var(--rr-border);
    border-radius: var(--rr-radius-sm);
    padding: 9px 11px;
    font-size: .75rem;
    color: var(--rr-muted);
    overflow-x: auto;
    white-space: nowrap;
}

/* Equivalent euro sous un prix en credits (grille des tarifs, admin).
   Un ancrage, pas une donnee editable : plus petit, en retrait, aligne sur
   le champ qu'il commente. */
.rr-grid-eq {
    font-family: var(--rr-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: .6875rem;
    color: var(--rr-muted);
    text-align: right;
    padding: 2px 6px 0 0;
}

/* Rangees de l'editeur de packs : une grille, memes colonnes pour toutes
   les lignes — l'oeil compare des packs, pas des formulaires. */
.rr-packrow {
    display: grid;
    grid-template-columns: minmax(140px, 2fr) 110px 130px 90px 44px auto;
    gap: 10px;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--rr-border);
}
.rr-packrow:last-child { border-bottom: 0; }
.rr-packrow-new { padding-top: 12px; }
@media (max-width: 767.98px) {
    .rr-packrow { grid-template-columns: 1fr 1fr; }
    .rr-packrow > * { grid-column: auto; }
}

/* ---------- Divers ---------- */
.rr-empty { text-align: center; padding: 46px 20px; color: var(--rr-muted); }
.rr-empty i { font-size: 2.4rem; display: block; margin-bottom: 12px; opacity: .5; }

.modal-content { background: var(--rr-surface); color: var(--rr-text); border: 1px solid var(--rr-border); border-radius: var(--rr-radius); }
.modal-header, .modal-footer { border-color: var(--rr-border); }
.dropdown-menu { background: var(--rr-surface); border: 1px solid var(--rr-border); }
.dropdown-item { color: var(--rr-text); }
.dropdown-item:hover { background: var(--rr-surface-2); color: var(--rr-text); }
.text-muted { color: var(--rr-muted) !important; }
.alert { border-radius: 10px; }

/* ---------- Authentification : ecran scinde ----------
   La premiere image que voit le client d'un revendeur : sa marque, sur le
   fond qu'il a choisi. Le formulaire vit a droite, sobre — c'est une porte,
   pas une page de vente. */
.rr-auth {
    display: grid;
    grid-template-columns: minmax(340px, 5fr) 7fr;
    min-height: 100dvh;
}
.rr-auth-side {
    position: relative;
    display: flex;
    background: var(--rr-surface) center / cover no-repeat;
    border-right: 1px solid var(--rr-border);
}
/* Sur une image de fond, un voile assoit le logo et l'accroche. Mesure sur
   l'image reelle impossible ici : le voile garantit le plancher quel que
   soit le visuel televerse. */
.rr-auth.has-bg .rr-auth-side::after {
    content: '';
    position: absolute; inset: 0;
    background: color-mix(in srgb, var(--rr-bg) 45%, transparent);
}
.rr-auth-side-in {
    position: relative; z-index: 1;
    margin: auto;
    text-align: center;
    padding: 44px 32px;
}
.rr-auth-logo { max-width: 240px; max-height: 110px; }
.rr-auth-mark {
    width: 56px; height: 56px; border-radius: 14px;
    display: grid; place-items: center;
    background: var(--rr-primary); color: var(--rr-on-primary);
    font-size: 1.5rem;
    margin: 0 auto 14px;
}
.rr-auth-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -.018em; }
.rr-auth.has-bg .rr-auth-name,
.rr-auth.has-bg .rr-auth-tagline { text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.rr-auth-tagline {
    color: var(--rr-muted);
    font-size: .875rem;
    margin: 10px 0 0;
}
.rr-auth.has-bg .rr-auth-tagline { color: var(--rr-text); opacity: .85; }

.rr-auth-main {
    display: flex; align-items: center; justify-content: center;
    padding: 44px 24px;
    overflow-y: auto;
}
.rr-auth-card { width: 100%; max-width: 400px; }
.rr-auth-head { margin-bottom: 24px; }
.rr-auth-head h1 {
    font-size: 1.5rem; font-weight: 600; letter-spacing: -.021em;
    margin: 0 0 6px;
}
.rr-auth-head p { color: var(--rr-muted); font-size: .875rem; margin: 0; }
.rr-auth-alt {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid var(--rr-primary);
    border-radius: 999px;
    color: var(--rr-primary-ink);
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
    transition: background .14s, color .14s;
}
.rr-auth-alt:hover { background: var(--rr-primary); color: var(--rr-on-primary); }
.rr-auth-lblrow {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.rr-auth-lblrow a { font-size: .78125rem; color: var(--rr-muted); text-decoration: underline; text-underline-offset: 2px; }
.rr-auth-lblrow a:hover { color: var(--rr-text); }
.rr-auth-card .form-control { padding: 11px 13px; }

@media (max-width: 899.98px) {
    .rr-auth { display: block; }
    .rr-auth-side {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--rr-border);
    }
    .rr-auth-side-in { padding: 22px 18px; }
    .rr-auth-logo { max-height: 56px; }
    .rr-auth-mark { width: 40px; height: 40px; font-size: 1.1rem; margin-bottom: 8px; }
    .rr-auth-main { padding: 28px 18px 44px; }
}