/*
 * app/assets/wiloo.css — GENERE PAR build.sh, ne pas editer a la main.
 *
 * Lignes 1-127 : le bloc <style> de ../wiloo-1a-ecrans-complementaires.html,
 * repris valeur pour valeur. Tout ajout va dans app/assets-app.css.
 */
body{margin:0;background:#DCD8DA;font-family:Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased;padding:40px 0}
.stack{display:flex;flex-direction:column;gap:52px;align-items:center}
.block{display:flex;flex-direction:column;gap:12px}
.tag{display:flex;align-items:center;gap:12px}
.tag b{background:#2F2A2E;color:#fff;font-weight:700;font-size:15px;padding:5px 12px;border-radius:6px}
.tag span{color:#5C5459;font-size:15px;font-weight:500}
.frame{width:1440px;background:#F4F2F3;border-radius:14px;overflow:hidden;display:flex;box-shadow:0 24px 60px rgba(47,42,46,.22)}
.h1020{height:1020px}
.h820{height:820px}

.rail{width:236px;flex:0 0 236px;background:#fff;border-right:1px solid #E6E2E4;display:flex;flex-direction:column;padding:22px 0}
.logo{padding:0 22px 24px;display:flex;flex-direction:column;gap:2px}
.logo .w{font-size:26px;font-weight:800;letter-spacing:.5px;color:#F5821F;line-height:1}
.logo .w i{color:#8B4A9C;font-size:14px;font-style:normal}
.logo .bo{font-size:9.5px;letter-spacing:1.6px;color:#8B4A9C;font-weight:600}
.nav{padding:0 14px;display:flex;flex-direction:column;gap:3px}
.nav a{padding:10px 12px;border-radius:8px;color:#5C5459;font-size:14px;font-weight:500;display:flex;gap:10px;align-items:center;text-decoration:none}
.nav a i{width:7px;height:7px;border-radius:2px;background:#C9C3C6;flex:none}
.nav a.on{background:#F5821F;color:#fff;font-weight:700}
.nav a.on i{background:#fff}
.nav a .c{margin-left:auto;font-size:11.5px;font-weight:700;color:#A39BA0}
.nav a.on .c{color:#FFE2C8}
.railfoot{margin-top:auto;padding:16px 22px 0;border-top:1px solid #F0EDEE;display:flex;flex-direction:column;gap:6px}
.railfoot .l{font-size:12px;color:#8B8287}
.railfoot .v{font-size:14px;font-weight:700;color:#2F2A2E}
.railfoot .g{font-size:12px;color:#2FA36B;font-weight:600}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{height:70px;background:#fff;border-bottom:1px solid #E6E2E4;display:flex;align-items:center;gap:20px;padding:0 26px;flex:none}
.top .t{font-size:19px;font-weight:700;color:#2F2A2E}
.top .crumb{font-size:12.5px;color:#A39BA0;font-weight:500}
.search{flex:1;max-width:340px;height:40px;border:1px solid #E0DBDD;border-radius:8px;display:flex;align-items:center;padding:0 14px;color:#A39BA0;font-size:14px}
.acts{margin-left:auto;display:flex;align-items:center;gap:14px}
.btn{height:40px;padding:0 16px;border:1px solid #E0DBDD;border-radius:8px;display:flex;align-items:center;font-size:14px;font-weight:600;color:#5C5459;background:#fff}
.btn.pur{background:#8B4A9C;color:#fff;border-color:#8B4A9C;font-weight:700;padding:0 18px}
.btn.org{background:#F5821F;color:#fff;border-color:#F5821F;font-weight:700;padding:0 18px}
.av{width:36px;height:36px;border-radius:50%;background:#F5821F;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.body{flex:1;min-height:0;display:flex}
.col{flex:1;min-width:0;padding:22px 24px;display:flex;flex-direction:column;gap:18px;overflow:hidden}
.side{width:318px;flex:0 0 318px;background:#fff;border-left:1px solid #E6E2E4;padding:22px 20px;display:flex;flex-direction:column;gap:18px}
.side.w360{width:360px;flex:0 0 360px}

.card{background:#fff;border:1px solid #E6E2E4;border-radius:12px}
.card.p{padding:16px 18px}
.ch{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid #F0EDEE}
.ch .t{font-size:15px;font-weight:700;color:#2F2A2E}
.ch .s{font-size:12.5px;color:#8B8287;font-weight:500}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi{background:#fff;border:1px solid #E6E2E4;border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.kpi .l{font-size:12px;font-weight:600;color:#8B8287;letter-spacing:.3px}
.kpi .v{font-size:30px;font-weight:800;color:#2F2A2E;line-height:1}
.kpi .v small{font-size:16px;font-weight:700;color:#8B8287}
.kpi .s{font-size:12.5px;font-weight:600;color:#5C5459}
.kpi.dark{background:#2F2A2E;border-color:#2F2A2E}
.kpi.dark .l{color:#C9C3C6}
.kpi.dark .v{color:#fff}
.kpi.dark .s{color:#F5A45E}
.red{color:#D64545}.green{color:#2FA36B}.org{color:#F5821F}.pur{color:#8B4A9C}.soft{color:#8B8287}.mid{color:#5C5459}

.seg{display:flex;border:1px solid #E0DBDD;border-radius:7px;overflow:hidden;font-size:12.5px;font-weight:600;background:#fff}
.seg span{padding:6px 12px;color:#8B8287}
.seg span.on{background:#F4F2F3;color:#2F2A2E}
.seg.big span{padding:8px 15px;font-size:13px}
.seg.big span.on{background:#2F2A2E;color:#fff}
.pill{padding:6px 12px;border-radius:20px;background:#F4F2F3;color:#5C5459;font-size:12.5px;font-weight:600}
.pill.on{background:#2F2A2E;color:#fff}
.pill.out{background:none;border:1px solid #E0DBDD}
.chip{padding:5px 11px;border-radius:6px;background:#F4F2F3;color:#5C5459;font-size:11.5px;font-weight:600}
.chip.pur{background:#F4ECF7;color:#8B4A9C}
.chip.org{background:#FFF1E3;color:#B35F0C}
.badge{padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:700}
.b-red{background:#FDECEC;color:#D64545}
.b-green{background:#EAF6F0;color:#1E8A5A}
.b-amber{background:#FDF3E4;color:#A56A0E}
.b-grey{background:#F1EEEF;color:#8B8287}
.b-pur{background:#F4ECF7;color:#8B4A9C}

table{width:100%;border-collapse:collapse}
thead th{background:#FAF8F9;font-size:11.5px;font-weight:700;color:#8B8287;letter-spacing:.4px;padding:10px 14px;text-align:left;border-bottom:1px solid #F0EDEE}
thead th.r{text-align:right}
tbody td{padding:13px 14px;font-size:13.5px;color:#2F2A2E;border-bottom:1px solid #F5F2F3;vertical-align:middle}
tbody td.r{text-align:right}
tbody tr:last-child td{border-bottom:0}
tbody tr.me td{background:#FFF7EF;font-weight:800}
tbody tr.me td:first-child{box-shadow:inset 3px 0 0 #F5821F}
td .sub{font-size:11.5px;color:#8B8287;font-weight:500;display:block;margin-top:2px}
td.win{color:#1E8A5A;font-weight:800}
td.na{color:#C9C3C6}
td.est{color:#8B8287}

.mini{background:#F4F2F3;border-radius:10px;padding:14px 16px;display:flex;gap:18px}
.mini .l{font-size:11.5px;color:#8B8287;font-weight:600}
.mini .v{font-size:22px;font-weight:800;color:#2F2A2E}
.eyebrow{font-size:11.5px;font-weight:700;color:#8B4A9C;letter-spacing:.6px}
.bar{height:6px;background:#F0EDEE;border-radius:4px;overflow:hidden}
.bar i{display:block;height:6px;border-radius:4px}
.rowlbl{display:flex;justify-content:space-between;font-size:12.5px;color:#5C5459;font-weight:600}
.alert{border-radius:9px;padding:11px 13px;font-size:12.5px;line-height:1.45}
.a-red{border:1px solid #F6D9D9;background:#FDF4F4;color:#8A3232}
.a-grey{border:1px solid #E6E2E4;background:#FAF8F9;color:#5C5459}
.a-org{border:1px solid #F7DFC4;background:#FFF8F0;color:#8A5716}
.cta{height:42px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.cta.org{background:#F5821F;color:#fff}
.cta.pur{background:#8B4A9C;color:#fff}
.cta.out{border:1px solid #E0DBDD;color:#5C5459;font-weight:600;background:#fff}
.cta.gh{color:#D64545;font-weight:600;background:#fff;border:1px solid #F0DADA}

.qitem{padding:14px 16px;border-bottom:1px solid #F5F2F3;display:flex;flex-direction:column;gap:8px}
.qitem.on{background:#FFF7EF;box-shadow:inset 3px 0 0 #F5821F}
.qitem:last-child{border-bottom:0}
.field{display:flex;flex-direction:column;gap:6px}
.field .lab{font-size:11.5px;font-weight:700;color:#8B8287;letter-spacing:.3px}
.inp{height:38px;border:1px solid #E0DBDD;border-radius:8px;background:#fff;display:flex;align-items:center;padding:0 12px;font-size:13.5px;color:#2F2A2E;font-weight:600}
.inp.ph{color:#A39BA0;font-weight:400}
.ta{border:1px solid #E0DBDD;border-radius:8px;background:#fff;padding:10px 12px;font-size:13.5px;color:#A39BA0;min-height:62px}
.backdrop{width:100%;height:100%;background:rgba(47,42,46,.55);display:flex;align-items:center;justify-content:center}
.modal{background:#fff;border-radius:14px;box-shadow:0 30px 80px rgba(47,42,46,.4);overflow:hidden;display:flex;flex-direction:column}
.mh{padding:18px 22px;border-bottom:1px solid #F0EDEE;display:flex;align-items:flex-start;gap:14px}
.mf{padding:16px 22px;border-top:1px solid #F0EDEE;display:flex;align-items:center;gap:10px;background:#FAF8F9}
.states{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.state{background:#fff;border:1px solid #E6E2E4;border-radius:12px;padding:26px 22px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.state .h{font-size:15px;font-weight:700;color:#2F2A2E}
.state .p{font-size:13px;color:#5C5459;line-height:1.5;margin:0}
.note{background:#fff;border:1px solid #E6E2E4;border-left:4px solid #8B4A9C;border-radius:0 10px 10px 0;padding:14px 18px;font-size:13px;color:#5C5459;line-height:1.55;width:1440px;box-sizing:border-box}
.note b{color:#2F2A2E}

/* ==========================================================================
   APP — ce que la maquette ne pouvait pas prevoir.
   La maquette est une PLANCHE : une carte de 1440x1020 posee sur un fond
   gris. Ici c est une application : l ecran occupe la fenetre, et ses
   elements repondent. Chaque regle ci-dessous dit pourquoi elle existe.
   ========================================================================== */

/* La planche devient l application : plus de fond gris, plus de marge. */
body {padding:0;background:#F4F2F3;height:100vh;overflow:hidden}

/* La carte devient la fenetre. Le rayon et l ombre etaient ceux d une
   vignette posee sur un fond ; a plein ecran ils n ont plus d objet. */
.frame {width:100%;height:100vh;border-radius:0;box-shadow:none}

/* La maquette coupait le debordement parce qu elle garantissait 1440x1020.
   Une vraie fenetre est plus petite : sans ceci, une colonne de prix se
   tronque au milieu d un montant. */
.col {overflow-y:auto;overflow-x:hidden}
.side {overflow-y:auto}
.rail {overflow-y:auto}

/* Sous 1240px le panneau lateral mangerait le tableau. Il etait MASQUE, et
   avec lui la liste des concurrents, le detail d une reference, l etat de
   l outil : sur un ecran de portable a 1024 px, la page Concurrents ne
   montrait plus aucun concurrent (recette du 2026-10-20). Il passe SOUS le
   contenu ; la page defile en entier, le menu reste a gauche. */
@media (max-width:1240px) {
  body {height:auto;overflow:auto}
  .frame {height:auto;min-height:100vh}
  .rail {position:sticky;top:0;height:100vh;align-self:flex-start}
  .body {flex-direction:column}
  .col {overflow:visible}
  .side {width:auto;flex:none;border-left:0;border-top:1px solid #E6E2E4}
}

/* 1a donne 380px a sa recherche, la planche des ecrans complementaires 340. */
input.search {max-width:380px;font-family:Figtree,system-ui,sans-serif;font-weight:500;color:#2F2A2E;background:#fff}
input.search::placeholder {color:#A39BA0;font-weight:400}
input.search:focus {outline:none;border-color:#F5821F}

/* Les elements cliquables de la maquette sont des <div> : elle n avait pas
   besoin qu ils reagissent. Ici, si. */
.cta, .btn, .pill, .seg span, .nav a, .rang {cursor:pointer}
.nav a:hover {background:#F5F2F3}
.nav a.on:hover {background:#F5821F}
.cta:hover, .btn:hover, .pill:hover {filter:brightness(.96)}
.rang:hover {background:#FAF8F9}

/* Champs de la modale : meme dessin, vraie saisie. */
input.inp, textarea.ta {font-family:Figtree,system-ui,sans-serif;width:100%;box-sizing:border-box}
input.inp {text-align:right}
input.inp:focus, textarea.ta:focus {outline:none;border-color:#F5821F}
textarea.ta {color:#2F2A2E;font-weight:500;resize:vertical}
textarea.ta::placeholder {color:#A39BA0;font-weight:400}
.modal label.coche {cursor:pointer}
.modal label.coche input {width:16px;height:16px;accent-color:#8B4A9C;margin:1px 0 0;flex:none}

/* Bouton indisponible, et sa contrepartie : la confirmation sous plancher,
   orange fonce, telle que la planche la decrit. */
.cta.off {opacity:.45;pointer-events:none}
.cta.dark {background:#B35F0C;color:#fff}

/* La modale : la planche la montre ouverte, a plat. Ici elle se superpose
   et part fermee. */
.backdrop {position:fixed;inset:0;z-index:50}
.backdrop[hidden] {display:none}

/* Un message de fin d action. La planche n en a pas : elle ne montre aucune
   action qui aboutit. */
.toast {position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:60;
  max-width:620px;background:#2F2A2E;color:#fff;border-radius:10px;padding:13px 18px;
  font:500 13px/1.45 Figtree,system-ui,sans-serif;box-shadow:0 18px 44px rgba(47,42,46,.34);
  opacity:0;transition:opacity .25s,transform .25s}
.toast.on {opacity:1;transform:translate(-50%,0)}

/* ---- Connexion. Ecran absent de la maquette : construit avec ses seuls
   jetons — Figtree, #F5821F, #8B4A9C, #2F2A2E, les gris, les rayons. ---- */
body.login {background:#DCD8DA;display:flex;align-items:center;justify-content:center;overflow:auto;padding:24px}
.login-card {width:100%;max-width:400px;background:#fff;border-radius:14px;box-shadow:0 24px 60px rgba(47,42,46,.22);padding:38px 34px;display:flex;flex-direction:column;gap:22px}
.login-card .logo {padding:0}
.login-card .logo .w {font-size:30px}
.login-card h1 {margin:0;font-size:19px;font-weight:700;color:#2F2A2E}
.login-card p.help {margin:-14px 0 0;font-size:13px;color:#8B8287;line-height:1.5}
.login-card label {display:flex;flex-direction:column;gap:6px;font-size:11px;letter-spacing:.8px;font-weight:700;color:#8B8287}
.login-card input {height:42px;border:1px solid #E0DBDD;border-radius:8px;padding:0 13px;font:500 14px Figtree,system-ui,sans-serif;color:#2F2A2E;background:#FAF8F9}
.login-card input:focus {outline:none;border-color:#F5821F;background:#fff}
.login-card button {height:44px;border:0;border-radius:8px;background:#F5821F;color:#fff;font:700 15px Figtree,system-ui,sans-serif;cursor:pointer}
.login-card button:hover {filter:brightness(.96)}
.login-card .foot {font-size:12px;color:#A39BA0;text-align:center}
.login-card .foot a {color:#8B4A9C;font-weight:600;text-decoration:none}

/* Le badge de plancher tient sur une ligne : « SOUS le plancher de 22 % »
   coupe apres « 22 » dans la barre de marges, et se lit de travers. */
.mini .badge {white-space:nowrap}

/* ==========================================================================
   MOUVEMENT — la planche est une image fixe, une application ne l est pas.
   Tout tient ici, en CSS : rien n est pilote depuis le JS, donc il n y a
   rien a defaire quand un ecran se re-rend. Aucune duree ne depasse 300 ms
   pour les reponses au clic — au-dela, on attend l interface au lieu de
   s en servir.
   ========================================================================== */

/* Le reglage systeme passe avant l effet : « moins d animations » veut dire
   aucune. Ce bloc n est pas une option. */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}

@keyframes wl-monte {from {opacity:0;transform:translateY(9px)} to {opacity:1;transform:none}}
@keyframes wl-glisse {from {opacity:0;transform:translateX(16px)} to {opacity:1;transform:none}}
@keyframes wl-pop {from {opacity:0;transform:translateY(12px) scale(.985)} to {opacity:1;transform:none}}
@keyframes wl-fondu {from {opacity:0} to {opacity:1}}
@keyframes wl-barre {from {transform:scaleX(0)} to {transform:scaleX(1)}}
@keyframes wl-trace {from {stroke-dashoffset:1} to {stroke-dashoffset:0}}

/* Survol et appui. La maquette n a que des etats fixes : sans ca, rien ne
   confirme que le clic est parti. */
.btn, .cta, .pill, .chip, .seg span, .nav a, .rang, .av,
input.search, input.inp, textarea.ta {
  transition:background-color .16s ease, color .16s ease, border-color .16s ease,
             box-shadow .18s ease, filter .16s ease, transform .12s ease}
.btn:hover, .cta:hover {transform:translateY(-1px);box-shadow:0 6px 15px rgba(47,42,46,.14)}
.btn:active, .cta:active, .pill:active, .seg span:active, .nav a:active {transform:translateY(1px);box-shadow:none}
.cta.off:hover {transform:none;box-shadow:none}
.av:hover {transform:scale(1.07)}
input.search:focus, input.inp:focus, textarea.ta:focus {box-shadow:0 0 0 3px rgba(245,130,31,.15)}

/* Ce qui arrive a l ecran y arrive EN MOUVEMENT — mais seulement les blocs
   qui ne se redessinent PAS a chaque frappe. Animer les lignes du tableau
   les ferait clignoter a chaque lettre tapee dans la recherche. */
.kpis .kpi {animation:wl-monte .3s cubic-bezier(.22,.7,.3,1) both}
.kpis .kpi:nth-child(2) {animation-delay:.05s}
.kpis .kpi:nth-child(3) {animation-delay:.1s}
.kpis .kpi:nth-child(4) {animation-delay:.15s}
.side {animation:wl-glisse .26s cubic-bezier(.22,.7,.3,1) both}

/* Les barres poussent depuis leur gauche : c est la seule chose qui montre
   qu on vient de changer de reference. */
.bar i {transform-origin:left center;animation:wl-barre .5s cubic-bezier(.22,.7,.3,1) both}

/* La courbe se trace. Le `pathLength="1"` pose sur la polyligne rend la
   fraction independante de la largeur reelle du trace, donc de la fenetre. */
.trace {stroke-dasharray:1 1;animation:wl-trace .9s ease-out both}

/* La modale se pose, elle n apparait pas. */
.backdrop:not([hidden]) {animation:wl-fondu .16s ease both}
.backdrop:not([hidden]) .modal {animation:wl-pop .24s cubic-bezier(.22,.7,.3,1) both}

/* Une ligne qui ARRIVE se montre ; une ligne deja la ne bouge pas — sinon
   le tableau clignoterait a chaque lettre tapee dans la recherche. C est le
   JS qui pose .neuf, parce que lui seul sait ce qui est nouveau. */
.rang.neuf {animation:wl-monte .34s cubic-bezier(.22,.7,.3,1) both}

/* L aire sous la courbe se remplit une fois le trait tire. */
.aire {animation:wl-fondu .5s .35s ease both}

/* Le point de tete bat : c est le seul element de l ecran qui dise
   « ce point-la, c est maintenant ». Le halo grossit et s efface —
   stroke-width et opacity, animables partout, contrairement a r. */
@keyframes wl-halo {from {stroke-width:2;opacity:.5} to {stroke-width:11;opacity:0}}
.halo {animation:wl-halo 2.4s ease-out infinite}

/* ------------------------------------------------ brief « 4 pages + Admin » */

/* La date de mise à jour, sous le titre de chaque écran : le brief la veut
   en haut de page, et c'est la seule information que le titre n'a pas. */
.top .t {display:flex;flex-direction:column;justify-content:center;line-height:1.2}
.top .t .maj {font-size:11.5px;font-weight:600;color:#8B8287;margin-top:3px;white-space:nowrap}

/* Les listes déroulantes des filtres : la hauteur et le trait du champ SEUIL
   de la veille, pour qu'une barre de filtres ne mélange pas deux dessins. */
.sel {height:28px;border:1px solid #E0DBDD;border-radius:6px;padding:0 8px;font:inherit;font-size:12.5px;font-weight:600;color:#2F2A2E;background:#fff;max-width:230px}

/* La légende de la courbe : un trait de la couleur du site, le nom en encre
   de texte — jamais le nom dans la couleur de la série. */
.legende {display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;font-weight:600;color:#5C5459}
.legende .cle {display:flex;align-items:center;gap:6px;cursor:pointer;padding:2px 6px;border-radius:5px}
.legende .cle i {width:14px;height:3px;border-radius:2px}
.legende .cle.on {background:#FFF7EF;color:#2F2A2E}

/* La bulle du survol : la valeur d'abord, le nom ensuite. */
.bulle {position:absolute;z-index:3;min-width:170px;background:#fff;border:1px solid #E6E2E4;border-radius:8px;box-shadow:0 6px 22px rgba(47,42,46,.12);padding:9px 11px;font-size:12px;pointer-events:none}
.bulle .d {font-weight:700;color:#2F2A2E;margin-bottom:5px}
.bulle .r {display:flex;align-items:center;gap:7px;padding:1px 0;color:#8B8287}
.bulle .r i {width:12px;height:3px;border-radius:2px;flex:none}
.bulle .r b {color:#2F2A2E;min-width:62px;text-align:right}

/* Une ligne du panneau « Qui baisse, qui monte » : cliquable, elle met le
   site en avant sur la courbe et filtre le journal. */
.side .concurrent {padding:8px 9px;border-radius:7px;cursor:pointer}
.side .concurrent:hover {background:#FAF8F9}
.side .concurrent.on {background:#FFF7EF}

/* Scraping fournisseur : la barre de recherche seule, au centre de l'écran,
   comme l'accueil d'un assistant. */
.accueil {flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:40px 24px}
.accueil h1 {font-size:28px;font-weight:800;color:#2F2A2E;margin:0;letter-spacing:-.3px}
.accueil p {font-size:14px;color:#8B8287;margin:0;text-align:center;max-width:560px;line-height:1.5}
.accueil form {width:100%;max-width:680px;display:flex;gap:10px;background:#fff;border:1px solid #E0DBDD;border-radius:14px;padding:8px;box-shadow:0 8px 30px rgba(47,42,46,.08)}
.accueil form:focus-within {border-color:#F5821F;box-shadow:0 8px 30px rgba(245,130,31,.16)}
.accueil input {flex:1;border:0;outline:0;font:inherit;font-size:17px;padding:10px 12px;color:#2F2A2E;background:transparent;min-width:0}
.accueil button {border:0;border-radius:10px;background:#F5821F;color:#fff;font:inherit;font-weight:700;font-size:14px;padding:0 20px;cursor:pointer}
.accueil button:disabled {background:#E6E2E4;color:#A39BA0;cursor:default}
.accueil .chips {display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* La fiabilité d'un prix scrapé : un point ET un mot, jamais la couleur seule. */
.fiab {display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700}
.fiab::before {content:'';width:8px;height:8px;border-radius:50%;background:currentColor}
.fiab.fiable {color:#1E8A5A}
.fiab.douteux {color:#A56A0E}
.fiab.absent {color:#A39BA0}

/* L'Admin : des onglets en pilules, des formulaires sur la grille du reste. */
.formule {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end}
.formule .field .inp {height:34px}
.lien {color:#B35F0C;font-weight:600;cursor:pointer;text-decoration:underline;background:none;border:0;font:inherit;padding:0}

/* Rapports : le positionnement par concurrent et le sommaire, côte à côte. */
.duo {display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}

/* Les champs de l Admin se lisent de gauche a droite : ce ne sont pas des
   montants alignes comme ceux de la modale de prix. */
form input.inp {text-align:left}

/* Rapports : les deux cartes du haut ne mangent pas le tableau. Huit pilules
   tiennent sur une ligne, ou passent a la suivante sans se couper. */
.duo > .card {max-height:236px;overflow-y:auto}
.ch .pill {white-space:nowrap}

/* Correspondances : « Ouvrir la page concurrente » est un vrai lien — il
   s'ouvre dans un onglet et se lit au clavier — mais il a l'allure des autres
   boutons de la planche, qui sont des <div>. Sans cette règle, il héritait du
   soulignement et de la couleur d'un lien. */
a.cta {text-decoration:none}

/* Telephone. La planche est dessinee pour 1440 px et l outil sert d abord au
   bureau, mais un lien ouvert sur un telephone ne doit pas etre illisible :
   la recette du 2026-10-20 a 390 px montrait le menu garder ses 236 px fixes
   et ecraser chaque ecran sur 150 px. Sous 760 px, le menu passe en haut et
   defile de cote, la page defile en entier au lieu de chaque colonne, les
   tuiles vont par deux, les blocs poses cote a cote s empilent, et les
   tableaux gardent leurs colonnes en defilant de cote dans leur carte — empiles,
   leurs en-tetes se lisaient les uns sous les autres, sans la valeur en face.
   Les grilles des ecrans sont posees en style en ligne, d ou le selecteur
   d attribut et le !important : c est la seule facon de les replier ici. */
@media (max-width:760px) {
  body {height:auto;overflow:auto}
  .frame {flex-direction:column;height:auto;min-height:100vh}
  .rail {width:100%;flex:none;flex-direction:row;align-items:center;padding:10px 0;
    border-right:0;border-bottom:1px solid #E6E2E4;overflow-x:auto;overflow-y:hidden;
    position:static;height:auto;align-self:auto}
  .logo {padding:0 14px;flex:none}
  .nav {flex-direction:row;padding:0 8px;gap:4px}
  .nav a {white-space:nowrap;padding:8px 10px}
  .railfoot {display:none}
  .main, .body {min-height:0}
  .top {height:auto;flex-wrap:wrap;padding:12px 16px;gap:10px}
  .top input.search, .top .search {max-width:none;width:100%;flex-basis:100%;order:3}
  .acts {flex-wrap:wrap;gap:8px}
  .col {padding:14px;overflow:visible}
  .kpis {grid-template-columns:repeat(2,minmax(0,1fr))}
  .col > [style*="grid-template-columns"], .duo {grid-template-columns:1fr !important}
  .card {overflow-x:auto}
  .card [style*="grid-template-columns"] {min-width:640px}
}

/* Un bouton de la barre du haut ne passe jamais a la ligne : a 1024 px,
   « Lancer une collecte » s ecrivait sur trois lignes et debordait de son
   cadre, et sur Rapports « Rapport PDF » et l avatar sortaient de l ecran
   (recette du 2026-10-20). La recherche retrecit ; sous 1240 px, si les
   boutons ne tiennent toujours pas, la barre passe sur deux lignes plutot
   que de couper. Au-dessus, rien ne change : la barre garde ses 70 px. */
.top .btn, .acts .btn {white-space:nowrap;flex:none}
.top input.search, .top .search {min-width:120px}
@media (max-width:1240px) {
  .top {height:auto;min-height:70px;flex-wrap:wrap;row-gap:10px;padding-top:12px;padding-bottom:12px}
}

/* ==========================================================================
   Correspondances : la revue PRODUIT PAR PRODUIT (O-062).
   La planche montrait une file plate de pages concurrentes. On revoit
   desormais un produit et tous ses candidats : la liste des produits a
   gauche, notre fiche fixee en haut du centre, les candidats ranges par
   concurrent dessous. Memes jetons que la planche ; seuls la mise en page
   et les etats (choisi, decide, focus clavier) sont neufs.
   ========================================================================== */

/* Les boutons de l ecran sont de vrais <button> : atteignables au clavier,
   lus par un lecteur d ecran. La planche dessinait des <div> : on remet a
   zero ce que le navigateur ajoute a un bouton. */
button.btn, button.cta, button.pill, .seg button, .rv-produit, .rv-annuler {font-family:Figtree,system-ui,sans-serif}
button.pill {border:0;cursor:pointer}
button.cta {border:0;width:100%;gap:8px;cursor:pointer}
button.cta.out {border:1px solid #E0DBDD}
button.cta:disabled, button.btn:disabled {opacity:.45;cursor:default;transform:none;box-shadow:none}
.seg button {border:0;background:none;padding:6px 12px;color:#8B8287;font-size:12.5px;font-weight:600;cursor:pointer}
.seg button.on {background:#F4F2F3;color:#2F2A2E}

/* Une touche se lit comme une touche, a cote du libelle qu elle remplace. */
kbd {display:inline-block;min-width:15px;padding:1px 5px;border:1px solid #E0DBDD;border-bottom-width:2px;border-radius:4px;
  background:#FAF8F9;font:700 10.5px/1.3 Figtree,system-ui,sans-serif;color:#5C5459;text-align:center}
.cta.org kbd, .rv-v kbd, .rv-annuler kbd {background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45);color:#fff}

/* Le focus se VOIT : c est un ecran qu on mene au clavier. */
.btn:focus-visible, .cta:focus-visible, .pill:focus-visible, .seg button:focus-visible, .rv-produit:focus-visible,
.rv-annuler:focus-visible, .lien:focus-visible, select.sel:focus-visible, .rv-curl:focus-visible, .rv-coche input:focus-visible {
  outline:3px solid rgba(245,130,31,.6);outline-offset:2px}

.body.rv {min-height:0}

/* ---- A gauche : l avancement, les filtres, les produits. */
.rv-liste {width:340px;flex:0 0 340px;background:#fff;border-right:1px solid #E6E2E4;display:flex;flex-direction:column;min-height:0}
.rv-avance {padding:16px 18px 14px;border-bottom:1px solid #F0EDEE;display:flex;flex-direction:column;gap:6px}
.rv-avance-l {font-size:13px;color:#5C5459;font-weight:600}
.rv-avance-l strong {font-size:19px;font-weight:800;color:#2F2A2E;margin-right:4px}
.rv-avance-s {font-size:12px;color:#8B8287;font-weight:600}
.rv-filtres {padding:12px 14px;display:flex;flex-direction:column;gap:9px;border-bottom:1px solid #F0EDEE}
.rv-filtres .seg {align-self:flex-start}
.rv-pills {display:flex;gap:6px;flex-wrap:wrap}
.rv-pills .pill {font-size:12px;padding:5px 11px}
.rv-selects {display:flex;gap:8px}
.rv-selects .sel {flex:1;min-width:0;max-width:none}
.rv-produits {flex:1;overflow-y:auto;min-height:0}
.rv-produit {display:flex;width:100%;text-align:left;gap:10px;align-items:center;padding:11px 14px;border:0;
  border-bottom:1px solid #F5F2F3;background:#fff;cursor:pointer}
.rv-produit:hover {background:#FAF8F9}
.rv-produit.on {background:#FFF7EF;box-shadow:inset 3px 0 0 #F5821F}
.rv-produit.fini {opacity:.62}
.rv-pimg {width:38px;height:38px;flex:none;border-radius:8px;background:#F4F2F3;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;color:#8B8287;overflow:hidden}
.rv-pimg img, .rv-img img, .rv-cimg img {width:100%;height:100%;object-fit:contain;background:#fff}
.rv-ptxt {flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rv-pnom {font-size:13.5px;font-weight:700;color:#2F2A2E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-pref, .rv-psrc {font-size:11.5px;color:#8B8287;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-vendu {color:#1E8A5A;font-weight:700}
.rv-pscore {font-size:12.5px;font-weight:800;flex:none}
.rv-pages {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-top:1px solid #F0EDEE;
  font-size:12px;color:#8B8287;font-weight:600}
.rv-pages .btn {height:30px;padding:0 12px;cursor:pointer}
.rv-vide {padding:22px 18px;color:#8B8287;font-size:13px}

/* ---- Au centre : notre fiche, fixee en haut, puis les candidats. */
.rv-centre {flex:1;min-width:0;overflow-y:auto;padding:0 24px 28px;display:flex;flex-direction:column;gap:14px}
.rv-fiche {position:sticky;top:0;z-index:2;background:#fff;border:1px solid #E6E2E4;border-top:0;border-radius:0 0 12px 12px;
  padding:16px 18px;display:flex;gap:16px;align-items:flex-start;box-shadow:0 10px 22px rgba(47,42,46,.07)}
.rv-img {width:96px;height:96px;flex:none;border-radius:10px;background:#F4F2F3;display:flex;align-items:center;
  justify-content:center;overflow:hidden;font-size:22px;font-weight:800;color:#C9C3C6}
.rv-fiche-t {flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.rv-fiche-t h2 {margin:0;font-size:19px;font-weight:800;color:#2F2A2E;line-height:1.25}
.rv-meta {display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:#5C5459}
.rv-meta strong {color:#2F2A2E}
.rv-puces {display:flex;flex-wrap:wrap;gap:6px}
.rv-fiche-a {display:flex;flex-direction:column;gap:8px;flex:none;width:214px}
.rv-fiche-a .cta {height:38px;font-size:13.5px}
.rv-compte {font-size:12px;color:#8B8287;font-weight:600;text-align:right}
.rv-options {display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:12.5px;color:#5C5459}
.rv-coche {display:flex;gap:8px;align-items:center;cursor:pointer;font-weight:600}
.rv-coche input {accent-color:#F5821F;width:16px;height:16px;margin:0;flex:none}
.rv-touches {color:#A39BA0;font-size:11.5px;font-weight:500}
.rv-demo, .rv-fini {margin:0}
.rv-note {font-size:12px;color:#8B8287}

/* Un concurrent = un bloc ; ses pages dedans. */
.rv-groupes {display:flex;flex-direction:column;gap:14px}
.rv-groupe {background:#fff;border:1px solid #E6E2E4;border-radius:12px;overflow:hidden}
.rv-groupe-h {display:flex;align-items:center;gap:6px 10px;padding:10px 16px;border-bottom:1px solid #F0EDEE;background:#FAF8F9;flex-wrap:wrap}
.rv-gnom {font-size:14px;font-weight:800;color:#2F2A2E}
.rv-gdom {font-size:12px;color:#8B8287;font-weight:600}
.rv-gbtn {margin-left:auto;height:30px;padding:0 10px;font-size:12px;gap:6px;cursor:pointer}

.rv-cand {display:grid;grid-template-columns:84px minmax(0,1fr) 132px;grid-template-areas:"img body score" "img acts acts";
  gap:10px 16px;padding:14px 16px;border-bottom:1px solid #F5F2F3;cursor:pointer;outline:none;
  transition:background-color .16s ease, opacity .16s ease}
.rv-cand:last-child {border-bottom:0}
.rv-cand:hover {background:#FDFBFC}
.rv-cand.on {background:#FFF7EF;box-shadow:inset 3px 0 0 #F5821F}
.rv-cand:focus-visible {box-shadow:inset 3px 0 0 #F5821F, inset 0 0 0 2px rgba(245,130,31,.5)}
.rv-cand.decide {opacity:.6}
.rv-cand.decide.on {opacity:.9}
.rv-cimg {grid-area:img;width:84px;height:84px;border-radius:9px;background:#F4F2F3;display:flex;align-items:center;
  justify-content:center;overflow:hidden;font-size:16px;font-weight:800;color:#C9C3C6}
.rv-cbody {grid-area:body;min-width:0;display:flex;flex-direction:column;gap:5px}
.rv-ctitre {font-size:14px;font-weight:700;color:#2F2A2E;line-height:1.3}
.rv-ctitre em {font-weight:500;color:#A39BA0}
.rv-curl {font-size:12px;color:#8B4A9C;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.rv-curl:hover {text-decoration:underline}
.chip.ok {background:#EAF6F0;color:#1E8A5A}
.chip.ko {background:#FDECEC;color:#D64545}
.rv-avis {font-size:12px;color:#5C5459;line-height:1.4}
.rv-avis-different strong {color:#D64545}
.rv-avis-identique strong {color:#1E8A5A}
.rv-cscore {grid-area:score;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.rv-cpct {font-size:20px;font-weight:800}
.rv-cscore .bar {width:100%}
.rv-ctype {font-size:11px;color:#8B8287;text-align:right;line-height:1.3}
.rv-cacts {grid-area:acts;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rv-a {height:34px;padding:0 12px;font-size:13px;gap:7px;cursor:pointer;text-decoration:none}
.rv-v {background:#2FA36B;border-color:#2FA36B;color:#fff;font-weight:700}
.rv-r {color:#D64545;border-color:#F0DADA}

/* Le message de fin d action porte son « Annuler ». */
.rv-toast {display:flex;align-items:center;gap:14px}
.rv-annuler {border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-weight:700;font-size:13px;
  border-radius:7px;padding:6px 10px;cursor:pointer;display:flex;gap:6px;align-items:center;flex:none}
.rv-annonce {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Portable et tablette : la liste passe au-dessus, bornee en hauteur ; la
   page defile en entier et la fiche reste collee en haut de la fenetre. */
@media (max-width:1240px) {
  .rv-liste {width:auto;flex:none;border-right:0;border-bottom:1px solid #E6E2E4}
  .rv-produits {max-height:42vh}
  .rv-centre {overflow:visible;padding:0 18px 24px}
}

/* Telephone : la fiche ne colle plus (elle mangerait l ecran), les cartes
   s empilent, les boutons se partagent la largeur. Les touches ne servent a
   rien sans clavier : on les tait. */
@media (max-width:760px) {
  .rv-fiche {position:static;flex-wrap:wrap;border-top:1px solid #E6E2E4;border-radius:12px;margin-top:14px}
  .rv-img {width:64px;height:64px}
  .rv-fiche-a {width:100%;flex-direction:row;flex-wrap:wrap}
  .rv-fiche-a .cta {flex:1 1 140px;width:auto}
  .rv-compte {width:100%;text-align:left}
  .rv-centre {padding:0 14px 20px}
  .rv-cand {grid-template-columns:56px minmax(0,1fr);grid-template-areas:"img body" "score score" "acts acts";padding:12px}
  .rv-cimg {width:56px;height:56px}
  .rv-cscore {flex-direction:row;align-items:center;justify-content:flex-start;gap:10px}
  .rv-cscore .bar {width:90px}
  .rv-ctype {text-align:left}
  .rv-a {flex:1 1 auto;justify-content:center}
  .rv-touches, .rv-a kbd, .rv-fiche-a kbd, .rv-gbtn kbd, #rv-aide {display:none}
  .rv-gbtn {margin-left:0}
}