/* Pricevra — phase 50 : palette violet + vert du logo V3, icônes de navigation colorées,
   statut des vérifications, transitions entre pages.
   Chargé APRÈS style.css et csp-utils.css (base.html) : ce fichier ne fait que redéfinir des jetons et
   compléter des composants existants. Retirer la ligne <link> dans base.html annule tout (retour arrière immédiat).
   CSP : aucun style en ligne, aucune ressource tierce. Contrastes vérifiés par tools/contrast_p50.py (voir README). */

/* ───────────────────────── 1. Jetons de couleur ───────────────────────── */
:root {
  color-scheme: light;
  /* Violet du logo V3 (#6c27d7, 7,22:1 sur blanc). Les jetons historiques restent valables. */
  --violet-50: #f6f2fd; --violet-100: #ede4fb; --violet-200: #d8ccfb; --violet-300: #b997f7;
  --violet-400: #9c6ce5; --violet-500: #8549df; --violet-600: #6c27d7; --violet-700: #5b21b6; --violet-800: #4c1d95; --violet-900: #351268;

  /* Vert du logo V3 (#29c19d) et sa gamme. #29c19d n'atteint que 2,28:1 sur blanc :
     il est DÉCORATIF uniquement (aplats, traits doublés d'un libellé, fonds de grande taille). */
  --jade-50: #effbf8; --jade-100: #d9f5ee; --jade-200: #a5e9d9; --jade-300: #64d8bd;
  --jade-400: #29c19d;   /* logo : décoratif seulement */
  --jade-500: #20977c;   /* graphiques, icônes, bordures porteuses de sens : 3,63:1 sur blanc (≥ 3:1, WCAG 1.4.11) */
  --jade-600: #18725d;   /* texte vert, bouton vert (texte blanc) : 5,83:1 (≥ 4,5:1, WCAG 1.4.3) */
  --jade-700: #156552;   /* survol du bouton vert : 6,96:1 */
  --jade-800: #0f5746;   /* texte sur fond vert pâle : 8,02:1 sur --jade-50 */
  --jade-900: #0c4538;

  /* Rôles (à utiliser dans le code, plutôt que les teintes) */
  --brand: var(--violet-600); --brand-hover: var(--violet-700);
  --accent: var(--jade-600); --accent-hover: var(--jade-700); --accent-ink: var(--jade-600);
  --accent-graphic: var(--jade-500); --accent-deco: var(--jade-400);
  --accent-soft: var(--jade-50); --accent-soft-2: var(--jade-100); --accent-line: var(--jade-200);
  --accent-ring: rgba(32, 151, 124, .32);

  /* Succès = vert du logo (remplace l'émeraude #047857 : contraste équivalent, teinte cohérente avec le logo) */
  --green: var(--jade-600); --green-soft: var(--jade-50); --green-line: var(--jade-200);
  --success: var(--jade-600); --success-soft: var(--jade-50); --success-line: var(--jade-200); --success-ink: var(--jade-800);

  /* Graphiques : série 1 violet, série 2 vert, puis neutres. Couleur jamais seule porteuse de sens. */
  --chart-1: var(--violet-600); --chart-2: var(--jade-500); --chart-3: #9b6008; --chart-4: #1f65d6;
  --chart-grid: var(--line); --chart-axis: var(--muted);

  /* Icônes de navigation : 1 teinte par section (fond de pastille + trait).
     Trait ≥ 4,5:1 sur sa pastille, sur blanc et sur le fond de survol (#f3f2f8). */
  --nav-dashboard: #813fe4;    --nav-dashboard-bg: #ede4fb;     /* violet  */
  --nav-opportunities: #1a7a64; --nav-opportunities-bg: #e6faf5; /* vert    */
  --nav-alerts: #9b6008;       --nav-alerts-bg: #fdf2e2;        /* ambre   */
  --nav-omnibus: #5b21b6;      --nav-omnibus-bg: #ede4fb;       /* violet  */
  --nav-intelligence: #1f65d6; --nav-intelligence-bg: #e4edfb;  /* bleu    */
  --nav-matching: #1d798b;     --nav-matching-bg: #e6f6fa;      /* cyan    */
  --nav-autopilot: #ae1cc4;    --nav-autopilot-bg: #f8e4fb;     /* fuchsia */
  --nav-billing: #c91d48;      --nav-billing-bg: #fbe4ea;       /* rose    */
  --nav-settings: #4858e5;     --nav-settings-bg: #e4e7fb;      /* indigo  */
  --nav-help: #b34d19;         --nav-help-bg: #fbece4;          /* orange  */
  --nav-readiness: #0f5c6b;    --nav-readiness-bg: #e4f4f8;     /* teal    */
  --nav-visibility: #0f5c6b;   --nav-visibility-bg: #e4f4f8;    /* teal, même paire que la préparation agents */
  --nav-benchmark: #5b21b6;    --nav-benchmark-bg: #e7f8f3;         /* violet sur fond vert pâle */
  --nav-signals: #5b21b6;      --nav-signals-bg: #ede4fb;           /* violet logo V3, même paire qu'Omnibus */

  --pv-progress: var(--jade-500);
}

/* Jetons phase 50 qui restent utiles quand <html data-theme="dark"> (palette complète : theme-dark.css). */
:root[data-theme="dark"] {
  --jade-ink-dark: #2dd2ac;                         /* 9,47:1 sur #16141f */
  --accent: #2dd2ac; --accent-ink: #2dd2ac; --accent-graphic: #2dd2ac;
  --accent-soft: #21453d; --accent-line: #2e6b5d;
  --nav-dashboard: #a779ec;    --nav-dashboard-bg: #2f2145;
  --nav-opportunities: #2dd2ac; --nav-opportunities-bg: #21453d;
  --nav-alerts: #f2960d;       --nav-alerts-bg: #453721;
  --nav-omnibus: #d4c2fa;      --nav-omnibus-bg: #2c2344;
  --nav-intelligence: #6396e9; --nav-intelligence-bg: #212f45;
  --nav-matching: #2db7d2;     --nav-matching-bg: #213f45;
  --nav-autopilot: #d763e9;    --nav-autopilot-bg: #402145;
  --nav-billing: #ea6c8b;      --nav-billing-bg: #45212a;
  --nav-settings: #7985ec;     --nav-settings-bg: #212545;
  --nav-help: #e67f4c;         --nav-help-bg: #452d21;
  --nav-readiness: #3ddec0;    --nav-readiness-bg: #1c3d36;
  --nav-visibility: #3ddec0;   --nav-visibility-bg: #1c3d36;
  --nav-benchmark: #c4b5fd;    --nav-benchmark-bg: #243830;
  --nav-signals: #d4c2fa;      --nav-signals-bg: #2c2344;
}

/* ───────────────────────── 2. Le vert dans les composants ───────────────────────── */
/* Bouton vert : actions positives secondaires (« Enregistrer », « Actualiser maintenant »). Le violet reste le CTA principal. */
.btn.accent { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(12, 69, 56, .25), inset 0 1px 0 rgba(255,255,255,.14); }
.btn.accent:hover { background: var(--accent-hover); color: #fff; }
.btn.accent:focus-visible { outline-color: var(--accent-graphic); }
/* Bouton secondaire teinté vert (contour) */
.btn.secondary.accent-outline { color: var(--jade-800); border-color: var(--jade-200); background: #fff; }
.btn.secondary.accent-outline:hover { background: var(--jade-50); border-color: var(--jade-500); color: var(--jade-800); }

/* Succès, opportunités, états positifs */
.flash.success { background: var(--success-soft); color: var(--success-ink); border-color: var(--success-line); }
.chip.drop, .chip.ok, .pill.ok { background: var(--success-soft); color: var(--success); }
.chip.margin { background: var(--jade-100); color: var(--jade-800); }
.reco li.ok .ic, .reco li.stock .ic, .reco li.opp .ic { color: var(--accent-graphic); }
.checklist li.done .tick { background: var(--accent); border-color: var(--accent); }
.meter > span { background: linear-gradient(90deg, var(--violet-400), var(--brand)); }
.meter.good > span { background: linear-gradient(90deg, var(--jade-400), var(--jade-500)); }
.dot-s.ok { background: var(--accent-graphic); }
.stat .label .ic { color: var(--brand); }
.stat .value.green, .t-green { color: var(--success); }
.opp-card:has(.chip.margin) { border-left-color: var(--accent-graphic); }   /* « Marge possible » = opportunité positive */
.plan.current { border-color: var(--accent-graphic); }
.empty-icon.positive { background: var(--accent-soft); color: var(--accent); }
.channel .chip.live { background: var(--success-soft); color: var(--success); }

/* Graphiques du tableau de bord : baisses en vert du logo, hausses hachurées (motif conservé = pas seulement la couleur) */
.bars .b .d, .legend i.lg-d { background: var(--accent-graphic); }
/* Historique de prix (SVG) : trait violet, point final vert */
.hc-last { stroke: var(--brand); fill: var(--jade-400); }

/* Accueil : dégradé du titre violet → vert (texte de grande taille : ≥ 3:1 requis, mesuré 7,22:1 et 3,63:1) */
.hero .grad { background: linear-gradient(90deg, var(--violet-600) 0%, var(--violet-500) 45%, var(--jade-500) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (forced-colors: active) { .hero .grad { background: none; color: CanvasText; } }
.hero::before { background: radial-gradient(600px 300px at 50% 10%, rgba(108, 39, 215, .14), transparent 70%), radial-gradient(420px 240px at 82% 42%, rgba(41, 193, 157, .14), transparent 70%); }
.feature:nth-child(2) .feature-icon { background: var(--accent-soft); color: var(--accent); }
.trust-item svg { color: var(--accent-graphic); }
.plan ul li::before { background-color: var(--jade-50); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8l3 3 5-5' stroke='%2318725d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.honest li .ic { color: var(--accent-graphic); }

/* ───────────────────────── 3. Icônes colorées de la barre latérale ───────────────────────── */
.side-link .ic-tile { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none;
  background: var(--tile-bg, var(--soft)); color: var(--tile-fg, var(--muted)); transition: background .12s, color .12s; }
.side-link .ic-tile .ic { color: inherit; width: 17px; height: 17px; stroke-width: 1.9; }
.side-link[data-section="dashboard"]     { --tile-fg: var(--nav-dashboard);     --tile-bg: var(--nav-dashboard-bg); }
.side-link[data-section="opportunities"] { --tile-fg: var(--nav-opportunities); --tile-bg: var(--nav-opportunities-bg); }
.side-link[data-section="alerts"]        { --tile-fg: var(--nav-alerts);        --tile-bg: var(--nav-alerts-bg); }
.side-link[data-section="omnibus"]       { --tile-fg: var(--nav-omnibus);       --tile-bg: var(--nav-omnibus-bg); }
.side-link[data-section="intelligence"]  { --tile-fg: var(--nav-intelligence);  --tile-bg: var(--nav-intelligence-bg); }
.side-link[data-section="matching"]      { --tile-fg: var(--nav-matching);      --tile-bg: var(--nav-matching-bg); }
.side-link[data-section="autopilot"]     { --tile-fg: var(--nav-autopilot);     --tile-bg: var(--nav-autopilot-bg); }
.side-link[data-section="billing"]       { --tile-fg: var(--nav-billing);       --tile-bg: var(--nav-billing-bg); }
.side-link[data-section="settings"]      { --tile-fg: var(--nav-settings);      --tile-bg: var(--nav-settings-bg); }
.side-link[data-section="help"]          { --tile-fg: var(--nav-help);          --tile-bg: var(--nav-help-bg); }
.side-link[data-section="readiness"]     { --tile-fg: var(--nav-readiness);     --tile-bg: var(--nav-readiness-bg); }
.side-link[data-section="visibility"]    { --tile-fg: var(--nav-visibility);    --tile-bg: var(--nav-visibility-bg); }
.side-link[data-section="benchmark"]     { --tile-fg: var(--nav-benchmark);     --tile-bg: var(--nav-benchmark-bg); }
.side-link[data-section="signals"]       { --tile-fg: var(--nav-signals);       --tile-bg: var(--nav-signals-bg); }
/* Page active : pastille pleine (icône blanche sur la teinte : ≥ 5,05:1), libellé et repère restent violets */
.side-link.active .ic-tile { background: var(--tile-fg); color: #fff; }
.side-link.active .ic-tile .ic { color: #fff; }
.side-link { padding-block: 6px; }
@media (forced-colors: active) { .side-link .ic-tile { background: none; color: LinkText; } .side-link.active .ic-tile { color: Highlight; } }

/* ───────────────────────── 4. Statut des vérifications (remplace « Vérifier tous les prix ») ───────────────────────── */
.check-status { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card); box-shadow: var(--shadow-xs); min-width: 0; max-width: 100%; }
.check-status .cs-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--muted-2); }
.check-status[data-state="fresh"] .cs-dot { background: var(--accent-graphic); box-shadow: 0 0 0 3px var(--jade-100); }
.check-status[data-state="stale"] .cs-dot { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.check-status[data-state="paused"] .cs-dot { background: var(--red); }
.check-status[data-state="running"] .cs-dot { background: var(--brand); animation: cs-pulse 1.2s var(--ease) infinite; }
.check-status .cs-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.check-status .cs-title { font-size: 13px; font-weight: 650; color: var(--ink); }
.check-status { max-width: 520px; }
.check-status .cs-meta { font-size: 12px; color: var(--muted); }
.check-status .cs-progress { height: 4px; width: 140px; max-width: 30vw; background: var(--soft); border-radius: 99px; overflow: hidden; margin-top: 5px; }
.check-status .cs-progress > span { display: block; height: 100%; width: 0; background: var(--pv-progress); border-radius: 99px; transition: width .4s var(--ease); }
.check-status .cs-progress[hidden] { display: none; }
.check-status .btn { flex: none; }
.check-status a.cs-result { font-size: 12px; font-weight: 600; margin-top: 2px; align-self: flex-start; }
.check-status .cs-text { flex: 1; }
@keyframes cs-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* largeur des barres de progression sans attribut style (CSP) : classes p-0 … p-100 par pas de 5 */
.cs-progress > span.p-0 { width: 0; } .cs-progress > span.p-5 { width: 5%; } .cs-progress > span.p-10 { width: 10%; }
.cs-progress > span.p-15 { width: 15%; } .cs-progress > span.p-20 { width: 20%; } .cs-progress > span.p-25 { width: 25%; }
.cs-progress > span.p-30 { width: 30%; } .cs-progress > span.p-35 { width: 35%; } .cs-progress > span.p-40 { width: 40%; }
.cs-progress > span.p-45 { width: 45%; } .cs-progress > span.p-50 { width: 50%; } .cs-progress > span.p-55 { width: 55%; }
.cs-progress > span.p-60 { width: 60%; } .cs-progress > span.p-65 { width: 65%; } .cs-progress > span.p-70 { width: 70%; }
.cs-progress > span.p-75 { width: 75%; } .cs-progress > span.p-80 { width: 80%; } .cs-progress > span.p-85 { width: 85%; }
.cs-progress > span.p-90 { width: 90%; } .cs-progress > span.p-95 { width: 95%; } .cs-progress > span.p-100 { width: 100%; }
@media (max-width: 760px) {
  .page-head .actions { width: 100%; }
  .check-status { width: 100%; }
}

/* ───────────────────────── 5. Navigation fluide ───────────────────────── */
/* Transitions entre pages (navigation classique, même origine) : Chrome/Edge 126+, Safari 18.2+.
   Ailleurs : navigation normale, sans erreur. Désactivées si l'utilisateur réduit les animations. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .sidebar { view-transition-name: pv-sidebar; }      /* la barre latérale ne bouge pas */
  .topbar { view-transition-name: pv-topbar; }
  .shell-main main { view-transition-name: pv-main; }
  ::view-transition-old(pv-main) { animation: pv-out 110ms var(--ease) both; }
  ::view-transition-new(pv-main) { animation: pv-in 170ms var(--ease) both; }
  ::view-transition-group(pv-sidebar), ::view-transition-group(pv-topbar) { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 120ms; }
}
@keyframes pv-out { to { opacity: 0; transform: translateY(-3px); } }
@keyframes pv-in { from { opacity: 0; transform: translateY(4px); } }

/* Barre de chargement : apparaît seulement si la page suivante tarde (> 120 ms), jamais sur une page instantanée */
.pv-loadbar { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1000; pointer-events: none; opacity: 0; transform-origin: 0 50%;
  transform: scaleX(0); background: linear-gradient(90deg, var(--brand), var(--jade-400)); }
html.pv-loading .pv-loadbar { opacity: 1; transform: scaleX(.85); transition: transform 8s cubic-bezier(.1, .8, .2, 1), opacity .15s; }
html.pv-loading .shell-main main { opacity: .55; transition: opacity .2s .15s; }
html.pv-loading .shell-main main > .container { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  html.pv-loading .pv-loadbar { transform: scaleX(1); transition: none; }
  html.pv-loading .shell-main main { transition: none; }
}

/* ───────────────────────── 6. Moyens de paiement (Offres, récapitulatif) ───────────────────────── */
.payment-methods { margin: 0 0 14px; }
.payment-methods ul { margin: 4px 0 0; padding-left: 1.2em; }
.payment-methods li + li { margin-top: 2px; }
/* l'attribut hidden doit gagner sur .btn { display:inline-flex } dans le composant de statut */
.check-status [hidden] { display: none !important; }

/* ───────────────────────── phase 51 : le vert du logo se voit aussi ─────────────────────────
   Décision d'Alane : le vert du logo (#29c19d, --jade-400) doit être clairement visible À CÔTÉ du violet, qui reste
   la couleur principale (boutons primaires, liens, élément actif). #29c19d (2,28:1 sur blanc) n'est employé qu'en
   APLATS, FILETS, PASTILLES et DÉGRADÉS (décoratif ou doublé d'un libellé) ; tout TEXTE vert reste en --jade-600
   (5,83:1) ou --jade-800 sur fond vert pâle. Coches des offres : trait --jade-900 sur pastille #29c19d (≥ 4,5:1). */
.banner:not(.expired) { border-left: 4px solid var(--jade-400); }
.banner:not(.expired) .ic { color: var(--jade-500); }
.stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--violet-600), var(--jade-400)); }
.stat:hover { border-color: var(--jade-400); }
.stat .value.green { color: var(--jade-600); }
.chip.drop, .chip.ok, .pill.ok { box-shadow: inset 0 0 0 1px var(--jade-400); }
.check-status[data-state="fresh"] { border-color: var(--jade-400); }
.check-status[data-state="fresh"] .cs-dot { background: var(--jade-400); }
.side-link:hover .ic-tile { box-shadow: 0 0 0 2px var(--jade-400); }
.side-link.active::before { background: linear-gradient(180deg, var(--violet-600), var(--jade-400)); }
.card.plan { border-top: 4px solid var(--jade-400); }
.card.plan.enterprise { border-top-color: var(--violet-600); }
.plan ul li::before { background-color: var(--jade-400); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8l3 3 5-5' stroke='%230c4538' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.section-label::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%;
  background: var(--jade-400); vertical-align: middle; }
/* Titre : jade-500 (3,63:1, texte large). #29c19d (2,28:1) reste décoratif — pastilles, filets, logo. */
.hero .grad { background: linear-gradient(90deg, var(--violet-600) 0%, var(--violet-500) 40%, var(--jade-500) 100%); -webkit-background-clip: text; background-clip: text; }
.feature-icon { box-shadow: inset 0 -3px 0 var(--jade-400); }
.trust-item svg { color: var(--jade-500); }
.mock-dot { background: var(--jade-400); }
.opp-card { border-left: 4px solid var(--jade-400); }
.btn.secondary:hover { border-color: var(--jade-400); }
.card-head h2::after, .card-head h3::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 6px; border-radius: 2px;
  background: linear-gradient(90deg, var(--violet-600), var(--jade-400)); }
.t-green { color: var(--jade-600); }
@media (forced-colors: active) { .stat::before, .card-head h2::after, .card-head h3::after, .section-label::before { forced-color-adjust: auto; } }