/* ============================================================
   Reechie — shared components on top of main.css (REE-10).
   Product accent: Reechie Pro (indigo) / Reechie Perso (teal),
   set by data-product on <html>. Only variables for colours.
   ============================================================ */

/* Charte : le bleu porte les actions principales et les sélections dans les
   deux produits. Le violet et le vert ne servent pas à distinguer Pro de
   Perso — ce serait répartir les couleurs de marque au hasard : ils restent
   au logo et aux accents mesurés (états, marque). */
:root,
:root[data-product="pro"],
:root[data-product="perso"]   { --product-accent: #3478F6; --product-accent-bg: rgba(52, 120, 246, 0.12); }
:root[data-theme="dark"]      { --product-accent: #6FA0FA; --product-accent-bg: rgba(52, 120, 246, 0.22); }

/* ── Brand in the sidebar ──────────────────────────────────── */
/* Le symbole de Clo, tel quel. Les fichiers reçus n'ont pas de fond
   transparent : celui-ci a le fond #130D1D, exactement celui de la barre, donc
   il s'y fond sans rectangle visible. Rien n'a été redessiné ni déformé : le
   fichier est seulement recadré sur son dessin et réduit. */
img.sb__logo-mark { background: none; border-radius: 6px; object-fit: contain; }

/* ── Marque sur les autres pages d'accès (mot de passe oublié…) ─ */
/* La carte passe au blanc chaud #F9F8F5, le fond des fichiers du logotype :
   même raison que la barre latérale. */
.auth-box { background-color: var(--color-brand-clear); }
.auth-brand { display: flex; justify-content: center; margin-bottom: var(--space-6); }
.auth-brand img { width: 200px; height: auto; display: block; }
.auth-signature { display: flex; justify-content: center; margin-top: var(--space-5); }
.auth-signature img { width: 300px; height: auto; display: block; opacity: .9; }

/* ── Écran de connexion : panneau de marque + formulaire (REE-32) ──────────
   Deux colonnes sur ordinateur (40 / 60), une seule sur mobile, le formulaire
   en premier. Aplats, aucune ombre, aucun dégradé. Les deux fonds sont
   exactement ceux des fichiers du logo, donc les images s'y posent sans
   rectangle : #130D1D à gauche, #F9F8F5 à droite. */
body.auth-body { display: block; min-height: 100vh; background: var(--color-brand-clear); }
.auth-split { display: grid; grid-template-columns: 40fr 60fr; min-height: 100vh; }

.auth-side { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-8);
    padding: var(--space-10) clamp(var(--space-6), 4vw, var(--space-12));
    background: var(--color-brand-dark); color: var(--color-brand-clear); }
.auth-side__logo { width: clamp(180px, 60%, 260px); height: auto; display: block; }
.auth-side__signature { font-family: var(--font-family-signature); font-weight: 400;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.25; margin: 0; color: var(--color-brand-clear); }
.auth-side__rule { display: block; width: 44px; height: 3px; border-radius: 2px;
    background: var(--color-brand-blue); margin: var(--space-5) 0; }
.auth-side__pitch { margin: 0; max-width: 34ch; font-size: var(--font-size-base);
    line-height: 1.6; color: rgba(249, 248, 245, 0.72); }
.auth-side__art { display: block; width: 100%; max-width: 520px; height: auto;
    color: rgba(249, 248, 245, 0.22); margin-bottom: var(--space-6); }
.auth-side__tags { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
    list-style: none; margin: 0; padding: 0; font-size: var(--font-size-xs);
    letter-spacing: 0.08em; text-transform: uppercase; color: rgba(249, 248, 245, 0.6); }
.auth-side__tags li { display: inline-flex; align-items: center; gap: 7px; }
.auth-side__tags .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.dot--blue { background: var(--color-brand-blue); }
.dot--violet { background: #7557D9; }
.dot--green { background: #35C98B; }

.auth-main { display: flex; flex-direction: column; background: var(--color-brand-clear); }
.auth-top { display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-4) clamp(var(--space-5), 4vw, var(--space-10));
    border-bottom: 1px solid var(--color-border); }
.auth-top__logo { height: 26px; width: auto; display: block; }
.auth-form-wrap { flex: 1; display: flex; align-items: center; justify-content: center;
    padding: var(--space-10) clamp(var(--space-5), 5vw, var(--space-12)); }
/* Pas de carte : le formulaire est posé directement sur le fond clair. */
.auth-form { width: 100%; max-width: 420px; }
.auth-form h1 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin: 0 0 var(--space-2); text-align: center; }
.auth-form__sub { margin: 0 0 var(--space-8); text-align: center; color: var(--color-text-muted); }
.auth-form .form-group { margin-bottom: var(--space-5); }
.auth-form label { display: block; margin-bottom: 6px; font-weight: var(--font-weight-semibold, 600); }
.auth-form input { width: 100%; }
.auth-form__forgot { display: flex; justify-content: flex-end; margin: calc(var(--space-2) * -1) 0 var(--space-6); font-size: var(--font-size-sm); }
.auth-pw { position: relative; }
.auth-pw input { padding-right: 42px; }
.auth-pw__eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border: 0; background: none; color: var(--color-text-muted); cursor: pointer; border-radius: var(--radius-sm); }
.auth-pw__eye:hover { color: var(--color-text); background: var(--color-bg-hover); }

@media (max-width: 900px) {
    /* Une colonne : le formulaire d'abord, la marque réduite à un bandeau. */
    .auth-split { grid-template-columns: 1fr; min-height: 0; }
    .auth-main { order: 1; }
    .auth-side { order: 2; gap: var(--space-6); padding: var(--space-8) var(--space-5); }
    .auth-side__top { display: none; }          /* le logotype est déjà en haut de l'écran */
    .auth-side__signature { font-size: 1.35rem; }
    .auth-side__art { max-width: 420px; margin: 0 auto var(--space-4); }
    .auth-form-wrap { padding: var(--space-8) var(--space-5); }
}
.sb__product { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-normal); letter-spacing: 0; }
.sb__space { margin: 0 var(--space-3) var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg-muted); font-size: var(--font-size-sm); }
.sb__space-name { display: block; font-weight: var(--font-weight-semibold); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb__space-role { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.sb__space a { font-size: var(--font-size-xs); }
.sb__badge { margin-left: auto; min-width: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--product-accent); color: #fff; font-size: 10px; line-height: 18px; text-align: center; }

/* ── Page header ───────────────────────────────────────────── */
.ph h1 { font-size: 1.35rem; margin: 0 0 var(--space-1); }
.ph p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* ── Forms ─────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-all { grid-column: 1 / -1; }
@media (max-width: 720px) { .form-grid, .form-grid--3 { grid-template-columns: 1fr; } .form-grid .span-2 { grid-column: auto; } }
.form-group .req { color: var(--color-error); }
.form-group .help { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 3px; }
.form-group.has-error input, .form-group.has-error select, .form-group.has-error textarea { border-color: var(--color-error); box-shadow: 0 0 0 3px var(--color-error-bg); }
.field-error { font-size: var(--font-size-xs); color: var(--color-error-text); margin-top: 4px; }
.form-actions { display: flex; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-border); margin-top: var(--space-2); }
.form-section { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin: var(--space-4) 0 var(--space-2); grid-column: 1 / -1; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); cursor: pointer; }
.check input { width: auto; margin: 0; }
.checks { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
form.inline { display: inline; }

/* ── Tables ────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.tbl tbody tr:hover td { background: var(--color-bg-hover); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .actions { text-align: right; white-space: nowrap; }
.tbl a.row-link { color: var(--color-text); font-weight: var(--font-weight-medium); }
.tbl tfoot td { font-weight: var(--font-weight-semibold); border-top: 1px solid var(--color-border-strong); }

/* ── Detail lists ──────────────────────────────────────────── */
.kv { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: var(--space-2) var(--space-4); margin: 0; font-size: var(--font-size-sm); }
.kv dt { color: var(--color-text-muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }

/* ── Tabs ──────────────────────────────────────────────────── */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-4); overflow-x: auto; }
.tabs__item { padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs__item:hover { color: var(--color-text); }
.tabs__item.active { color: var(--color-text); border-bottom-color: var(--product-accent); font-weight: var(--font-weight-medium); }

/* ── Pills (generic variants) ──────────────────────────────── */
.pill--neutral { background: var(--color-neutral-bg); color: var(--color-neutral-text); }
.pill--info    { background: var(--color-info-bg); color: var(--color-info-text); }
.pill--success { background: var(--color-success-bg); color: var(--color-success-text); }
.pill--warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.pill--danger  { background: var(--color-error-bg); color: var(--color-error-text); }
.pill--muted   { background: var(--color-bg-muted); color: var(--color-text-light); }
.pill--accent  { background: var(--product-accent-bg); color: var(--product-accent); }

/* ── Cards (space list, dashboards) ────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.card-link { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-text); transition: border-color .15s, box-shadow .15s; }
.card-link:hover { border-color: var(--product-accent); box-shadow: var(--shadow-sm); color: var(--color-text); }
.card-link__top { display: flex; align-items: center; gap: var(--space-2); }
.card-link__icon { width: 34px; height: 34px; border-radius: var(--radius); display: grid; place-items: center; background: var(--product-accent-bg); color: var(--product-accent); }
/* Les deux vignettes du choix d'espace : seul endroit où le violet et le vert
   de marque distinguent Pro de Perso, à petite dose et une seule fois par
   écran. Ailleurs, le bleu. */
.card-link__icon--perso { background: rgba(53, 201, 139, 0.14); color: #14714A; }
.card-link__icon--pro { background: rgba(117, 87, 217, 0.12); color: #4E36A0; }
:root[data-theme="dark"] .card-link__icon--perso { color: #7FE3BA; }
:root[data-theme="dark"] .card-link__icon--pro { color: #C9BBF5; }
.card-link__name { font-weight: var(--font-weight-semibold); }
.card-link__meta { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.card-link form, .card-link button { width: 100%; }

/* ── Layout helpers ────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.stack-4 > * + * { margin-top: var(--space-4); }
.row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }

/* ─── « Aujourd'hui » (maquette, lot 5) ──────────────────────────────────────
   Ici et pas dans areas/pro_operations.css : la page d'accueil ne charge pas
   la feuille d'une aire, et ces classes appartiennent au produit, pas aux
   interventions. Le préfixe rc- est celui de ce fichier.

   « Deux colonnes (2/3 et 1/3) qui s'empilent sur petit écran. Chaque ligne a
   un nombre dans un carré de 40 px (fond sombre s'il faut agir, clair sinon),
   le libellé et un chevron. » */
.rc-today { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.rc-home { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); align-items: start; }
@media (max-width: 1000px) { .rc-home { grid-template-columns: 1fr; } }
.rc-home__main, .rc-home__side { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }

.rc-todo { list-style: none; margin: 0; padding: 0; }
.rc-todo li + li { border-top: 1px solid var(--color-border); }
.rc-todo__row {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--color-text); text-decoration: none;
}
.rc-todo__row:hover { background: var(--color-bg-muted); }
.rc-todo__n {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-bg-muted); color: var(--color-text-muted);
    font-weight: 700;
}
/* Un carré sombre veut dire « il y a quelque chose à faire ». À zéro il reste
   clair : la ligne informe sans réclamer. */
.rc-todo__n--act { background: var(--color-brand-dark); color: var(--color-brand-clear); }
.rc-todo__label { flex: 1 1 auto; font-weight: 600; }
.rc-todo__go { color: var(--color-text-light); }

/* ─── « Ma journée » (maquette, lot 5b) ──────────────────────────────────────
   « À gauche l'heure de début et l'heure de fin ; un point de 12 px à la
   couleur du statut (creux pour "Planifiée") relié par une ligne verticale ;
   une carte cliquable […] l'intervention "En cours" est mise en avant. »
   Le point prend la couleur de la pastille de l'état : une seule source de
   couleurs pour les états, celle de Status. */
.rc-day { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rc-day__item { display: grid; grid-template-columns: 52px 12px 1fr; gap: var(--space-3); position: relative; padding: var(--space-3) 0; }
.rc-day__item:not(:last-child)::after {
    content: ""; position: absolute; left: 57px; top: 28px; bottom: -4px; width: 2px;
    background: var(--color-border);
}
.rc-day__time { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.rc-day__time strong { font-size: var(--font-size-sm); }
.rc-day__time span { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.rc-day__dot { width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; background: var(--color-text-light); }
.rc-day__dot--warning { background: var(--color-warning); }
.rc-day__dot--info    { background: var(--color-info); }
.rc-day__dot--accent  { background: var(--product-accent); }
.rc-day__dot--success { background: var(--color-success); }
.rc-day__dot--danger  { background: var(--color-error); }
.rc-day__dot--neutral, .rc-day__dot--muted { background: var(--color-border-strong); }
/* Creux pour « planifiée » : prévu, pas encore commencé. */
.rc-day__dot.is-hollow { background: transparent; border: 2px solid var(--product-accent); }
.rc-day__card {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
    color: var(--color-text); text-decoration: none;
}
.rc-day__card:hover { text-decoration: underline; }
.rc-day__next { font-size: var(--font-size-sm); font-weight: 600; color: var(--product-accent); }
/* Celle qui est en cours se voit sans avoir à la chercher. */
.rc-day__item.is-running { background: var(--product-accent-bg); border-radius: var(--radius); padding-left: var(--space-2); padding-right: var(--space-2); }
.text-right { text-align: right; }
.danger-text { color: var(--color-error-text); }
.notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius); font-size: var(--font-size-sm); background: var(--color-info-bg); color: var(--color-info-text); border: 1px solid var(--color-info-border); margin-bottom: var(--space-4); }
.notice--warning { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: var(--color-warning-border); }
.notice--danger { background: var(--color-error-bg); color: var(--color-error-text); border-color: var(--color-error-border); }
.notice--success { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-border); }
.copybox { display: flex; gap: var(--space-2); align-items: center; }
.copybox input { font-family: var(--font-family-mono); font-size: var(--font-size-xs); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 130px 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); }
.timeline li:last-child { border-bottom: 0; }
.timeline time { color: var(--color-text-muted); font-size: var(--font-size-xs); }

/* ── Onboarding / space list ───────────────────────────────── */
.welcome { max-width: 920px; margin: 0 auto; }
.welcome h1 { font-size: 1.6rem; }
.reminders-list li { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); list-style: none; }