/* ------------------------------------------------------------------
   Facette · onglet Référencement
   Courbes, chiffres de la semaine et tableaux du suivi de developpia.fr.
   Reprend les couleurs et les rayons du tableau de bord (styles.css).
   ------------------------------------------------------------------ */

#vue-referencement .seo-tete{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
#vue-referencement .seo-tete h2{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-0.01em}
#vue-referencement .seo-tete p{color:var(--texte-doux);font-size:14px;margin-top:3px;max-width:70ch}
#vue-referencement a{color:var(--bleu)}

#vue-referencement .seo-compteurs{display:flex;flex-wrap:wrap;gap:8px}
#vue-referencement .seo-compteur{display:flex;flex-direction:column;gap:1px;padding:7px 13px;border-radius:12px;border:1px solid var(--trait);background:var(--carte);font-size:11.5px;color:var(--texte-doux);min-width:84px}
#vue-referencement .seo-compteur b{font-family:var(--display);font-size:19px;color:var(--texte);line-height:1.1}

#vue-referencement .seo-barre-dates{margin-bottom:10px}
#vue-referencement .seo-periode{font-size:14px;color:var(--texte-doux);margin:0 2px 14px;line-height:1.5}
#vue-referencement .seo-periode b{color:var(--texte)}

#vue-referencement .seo-grille-kpi{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:16px}
#vue-referencement .seo-kpi{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:var(--rayon);border:1px solid var(--trait);background:var(--carte)}
#vue-referencement .seo-kpi-etiquette{font-size:12px;color:var(--texte-doux)}
#vue-referencement .seo-kpi-valeur{font-family:var(--display);font-weight:700;font-size:28px;line-height:1.05;letter-spacing:-0.02em}
#vue-referencement .seo-sur{font-size:14px;color:var(--texte-faible);font-weight:500}
#vue-referencement .seo-kpi-note{font-size:12px;color:var(--texte-faible)}

#vue-referencement .seo-delta{display:inline-block;padding:1px 7px;border-radius:999px;font-size:11.5px;font-weight:600;font-family:var(--mono)}
#vue-referencement .seo-delta--bon{background:rgba(47,211,165,0.16);color:var(--vert)}
#vue-referencement .seo-delta--mauvais{background:rgba(255,154,61,0.16);color:var(--orange)}
#vue-referencement .seo-delta--stable{background:rgba(255,255,255,0.06);color:var(--texte-doux)}

#vue-referencement .seo-courbes{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:16px}
#vue-referencement .seo-deux{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
#vue-referencement .seo-bloc{border:1px solid var(--trait);border-radius:var(--rayon);background:var(--carte);padding:16px;margin-bottom:12px}
#vue-referencement .seo-bloc-tete{margin-bottom:10px}
#vue-referencement .seo-bloc-tete h3{font-family:var(--display);font-weight:700;font-size:15.5px}
#vue-referencement .seo-bloc-tete p{color:var(--texte-doux);font-size:12.5px;margin-top:2px;line-height:1.45}

#vue-referencement .seo-courbe svg{display:block;width:100%;height:auto}
#vue-referencement .seo-courbe-vide{padding:30px 0;text-align:center;color:var(--texte-faible);font-size:13px}
#vue-referencement .seo-axe{stroke:rgba(255,255,255,0.10);stroke-width:1}
#vue-referencement .seo-axe-texte{fill:var(--texte-faible);font-size:11px;font-family:var(--mono)}
#vue-referencement .seo-valeur{fill:var(--texte);font-size:11.5px;font-family:var(--mono);font-weight:600}
#vue-referencement .seo-ligne{fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
#vue-referencement .seo-ligne--bleu{stroke:var(--bleu)} #vue-referencement .seo-point--bleu{fill:var(--bleu)}
#vue-referencement .seo-ligne--vert{stroke:var(--vert)} #vue-referencement .seo-point--vert{fill:var(--vert)}
#vue-referencement .seo-ligne--orange{stroke:var(--orange)} #vue-referencement .seo-point--orange{fill:var(--orange)}
#vue-referencement .seo-ligne--violet{stroke:var(--violet)} #vue-referencement .seo-point--violet{fill:var(--violet)}

#vue-referencement .seo-tableau-cadre{overflow-x:auto}
#vue-referencement .seo-tableau{width:100%;border-collapse:collapse;font-size:13px}
#vue-referencement .seo-tableau th{text-align:left;font-size:11.5px;color:var(--texte-faible);font-weight:600;padding:6px 10px;border-bottom:1px solid var(--trait);white-space:nowrap}
#vue-referencement .seo-tableau td{padding:8px 10px;border-bottom:1px solid var(--trait);vertical-align:top;line-height:1.4}
#vue-referencement .seo-tableau tr:last-child td{border-bottom:0}
#vue-referencement .seo-tableau .num{text-align:right;font-family:var(--mono);white-space:nowrap}
#vue-referencement .seo-place{color:var(--vert)}
#vue-referencement .seo-faible{color:var(--texte-faible);font-size:12px}
#vue-referencement .seo-vide{color:var(--texte-faible);font-size:13px;padding:8px 0}

#vue-referencement .seo-etat{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600}
#vue-referencement .seo-etat--attente{background:rgba(255,154,61,0.16);color:var(--orange)}
#vue-referencement .seo-etapes{margin:6px 0 0 18px;color:var(--texte-doux);font-size:13px;line-height:1.5;display:flex;flex-direction:column;gap:6px}
#vue-referencement .seo-note{color:var(--texte-faible);font-size:12px;line-height:1.5;margin-top:8px}

/* Où on se place : une carte par recherche visée */
#vue-referencement .seo-places{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
#vue-referencement .seo-place-carte{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:var(--rayon);border:1px solid var(--trait);background:rgba(255,255,255,0.02)}
#vue-referencement .seo-place-carte h4{font-size:13.5px;font-weight:600;color:var(--texte);line-height:1.3}
#vue-referencement .seo-place-ligne{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
#vue-referencement .seo-place-chiffre{font-family:var(--display);font-weight:700;font-size:38px;line-height:1;letter-spacing:-0.03em;color:var(--texte)}
#vue-referencement .seo-place-chiffre--haut{color:var(--vert)}
#vue-referencement .seo-place-chiffre--milieu{color:var(--bleu)}
#vue-referencement .seo-place-chiffre--vide{color:var(--texte-faible)}
#vue-referencement .seo-place-sous{font-size:12px;color:var(--texte-doux)}
#vue-referencement .seo-tendance{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600}
#vue-referencement .seo-tendance--monte{background:rgba(47,211,165,0.16);color:var(--vert)}
#vue-referencement .seo-tendance--descend{background:rgba(255,154,61,0.16);color:var(--orange)}
#vue-referencement .seo-tendance--stable{background:rgba(255,255,255,0.06);color:var(--texte-doux)}
#vue-referencement .seo-mini{display:block;width:100%;height:auto}
#vue-referencement svg.seo-mini path{fill:none;stroke:var(--violet);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
#vue-referencement svg.seo-mini circle{fill:var(--violet)}
#vue-referencement .seo-mini-legende{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--texte-faible);font-family:var(--mono);margin-top:-2px;white-space:nowrap}
#vue-referencement .seo-mini--vide{font-size:11.5px;color:var(--texte-faible)}
#vue-referencement .seo-place-pied{font-size:11.5px;color:var(--texte-faible);margin-top:auto}
#vue-referencement .seo-monte{color:var(--vert)}
#vue-referencement .seo-descend{color:var(--orange)}

html[data-theme="clair"] #vue-referencement .seo-axe{stroke:rgba(0,0,0,0.10)}
html[data-theme="clair"] #vue-referencement .seo-tendance--stable{background:rgba(0,0,0,0.05)}
html[data-theme="clair"] #vue-referencement .seo-place-carte{background:rgba(0,0,0,0.015)}
html[data-theme="clair"] #vue-referencement .seo-delta--stable{background:rgba(0,0,0,0.05)}