/* rweb — feuille de style unique, écrite à la main (même principe que hweb).
   Couleurs et polices en variables : pas de valeurs en dur dans les gabarits. */

:root {
  --encre: #1f2933;
  --encre-douce: #52606d;
  --fond: #f5f7fa;
  --carte: #ffffff;
  --bord: #d9e2ec;
  --accent: #2b6cb0;
  --accent-fonce: #1a4e8a;
  --ok: #2f855a;
  --alerte: #c05621;
  --erreur: #c53030;
  --surlignage: #fefcbf;
  /* Statuts des sites (R16) : nous = verts, pas important = gris, compétition = rouges,
     trois nuances par famille (rapports.classes_par_site). */
  --nous-0: #2f855a;
  --nous-1: #48bb78;
  --nous-2: #1c4532;
  --gris-0: #718096;
  --gris-1: #a0aec0;
  --gris-2: #4a5568;
  --comp-0: #c53030;
  --comp-1: #f56565;
  --comp-2: #822727;
  --serie-0: #2b6cb0;
  --serie-1: #c05621;
  --serie-2: #2f855a;
  --serie-3: #805ad5;
  --serie-4: #b83280;
  --serie-5: #718096;
  --police: system-ui, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--police);
  color: var(--encre);
  background: var(--fond);
  line-height: 1.5;
}

a { color: var(--accent); }
h1 { font-size: 1.6rem; margin: 0.4rem 0 0.8rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.6rem; }
code { background: var(--fond); padding: 0 0.25em; border-radius: 3px; }

/* ---------- entête ---------- */
.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1rem;
  background: var(--carte);
  border-bottom: 1px solid var(--bord);
}
.entete__marque {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--accent-fonce);
  text-decoration: none;
}
.entete__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.entete__nav a { color: var(--encre-douce); text-decoration: none; }
.entete__nav a:hover { color: var(--accent); }

.page { max-width: 64rem; margin: 0 auto; padding: 1rem; }

/* ---------- messages ---------- */
.messages { list-style: none; margin: 0 0 1rem; padding: 0; }
.message {
  padding: 0.5rem 0.8rem;
  border-radius: 6px;
  border: 1px solid var(--bord);
  background: var(--carte);
  margin-bottom: 0.4rem;
}
.message--success { border-color: var(--ok); }
.message--info { border-color: var(--accent); }
.message--error { border-color: var(--erreur); color: var(--erreur); }
.message--warning { border-color: var(--alerte); color: var(--alerte); }

/* ---------- blocs, cartes ---------- */
.bloc {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 1rem;
  margin: 0 0 1rem;
}
.entete-page { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.fil { color: var(--encre-douce); font-size: 0.9rem; margin-top: 0.4rem; }
.etat { color: var(--encre-douce); }
.aide { color: var(--encre-douce); font-size: 0.9rem; }

.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.carte {
  display: block;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 1rem;
  text-decoration: none;
  color: var(--encre);
}
.carte:hover { border-color: var(--accent); }
.carte h2 { margin: 0; }
.carte__domaine { color: var(--encre-douce); margin: 0.2rem 0; }
.carte__chiffres { margin: 0.4rem 0 0; }

.position { color: var(--accent-fonce); font-variant-numeric: tabular-nums; }

.badge {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--fond);
  border: 1px solid var(--bord);
  color: var(--encre-douce);
  font-size: 0.8rem;
}
.badge--attente { border-color: var(--alerte); color: var(--alerte); }
.badge--erreur { border-color: var(--erreur); color: var(--erreur); }
.badge--ok { border-color: var(--ok); color: var(--ok); }
.badge--projet { border-color: var(--accent); color: var(--accent-fonce); }
.badge--nous { border-color: var(--nous-0); color: var(--nous-0); }
.badge--gris { border-color: var(--gris-0); color: var(--gris-2); }
.badge--comp { border-color: var(--comp-0); color: var(--comp-0); }

.delta { font-variant-numeric: tabular-nums; color: var(--encre-douce); }
.delta--mieux { color: var(--ok); }
.delta--pire { color: var(--erreur); }

/* ---------- formulaires ---------- */
input, select, button { font: inherit; }
input, select {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--bord);
  border-radius: 6px;
  background: var(--carte);
  color: var(--encre);
  max-width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.bouton {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--accent-fonce);
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.bouton:hover { background: var(--accent-fonce); }
.bouton--secondaire { background: var(--carte); color: var(--accent-fonce); }
.bouton--secondaire:hover { background: var(--fond); }
.bouton--petit { padding: 0.15rem 0.6rem; font-size: 0.85rem; }
/* Analyse en file standard en cours : le bouton est désactivé et dit « en cours ». */
.bouton:disabled,
.bouton:disabled:hover {
  background: var(--fond);
  border-color: var(--alerte);
  color: var(--alerte);
  cursor: progress;
}
/* Coûts DataForSEO et solde du compte (page projet). */
.couts {
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--bord);
  border-radius: 6px;
  background: var(--fond);
}
.couts__titre { margin: 0; font-size: 1rem; }
.couts__tableau { margin-top: 0.4rem; background: var(--carte); }
.couts__tableau th:not(:first-child),
.couts__prix { text-align: right; white-space: nowrap; width: 8rem; }
.couts__tableau tbody tr:last-child td { border-bottom: none; }
.couts__solde { margin: 0.5rem 0 0; }
@media (max-width: 640px) {
  .couts__tableau { background: none; }
  .couts__prix { width: auto; text-align: left; }
}
/* Journal des requêtes : onglets, pagination, fiche d'une requête. */
.onglets { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }
.onglet--actif { cursor: default; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.code--erreur { color: var(--erreur); }
.fiche {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
  margin: 0.75rem 0 1rem;
}
.fiche dt { font-weight: 600; color: var(--encre-douce); }
.fiche dd { margin: 0; }
.tableau .url { overflow-wrap: anywhere; }
/* Adresse « goto » de Google restée non résolue (D2) : affichée, mais en retrait. */
.tableau .non-resolue td { color: var(--encre-douce); }
.tableau .non-resolue a { color: var(--encre-douce); }
@media (max-width: 640px) {
  .fiche { grid-template-columns: 1fr; gap: 0; }
  .fiche dd { margin-bottom: 0.4rem; }
}
.analyse-file { margin: 0.75rem 0; }
.analyse-file .aide { margin-top: 0.4rem; }

.lien {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.form-ligne { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem; margin-bottom: 0.8rem; }
.form-ligne .champ { display: flex; flex-direction: column; gap: 0.15rem; }
.form-ligne--large .champ:first-child input { min-width: 16rem; }
.form-page { max-width: 30rem; }
.form-page div { margin-bottom: 0.8rem; }
.form-page label { display: block; font-weight: 600; }
.form-page .helptext { display: block; color: var(--encre-douce); font-size: 0.85rem; }
.form-page ul { list-style: none; padding: 0; margin: 0.2rem 0; }
.form-page .errorlist { color: var(--erreur); }

.ligne-reglage { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.ligne-reglage .large { flex: 1; min-width: 14rem; }
.ligne-reglage .petit { width: 4.5rem; }
/* Une région : la ligne de modification, le bouton Supprimer, puis sa vérification. */
.ligne-region {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--bord);
}
.ligne-region .ligne-reglage { flex: 1; margin-bottom: 0; }
.ligne-region .verification { flex-basis: 100%; margin: 0.3rem 0 0; }
.case { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--encre-douce); }
.en-ligne { display: inline; }
.boutons { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.connexion { max-width: 22rem; margin: 3rem auto; background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; padding: 1.5rem; }
.connexion .champ { margin-bottom: 0.8rem; display: flex; flex-direction: column; gap: 0.15rem; }
.connexion input { width: 100%; }

/* ---------- tableaux ---------- */
.tableau { width: 100%; border-collapse: collapse; margin-top: 0.6rem; }
.tableau th {
  text-align: left;
  font-size: 0.85rem;
  color: var(--encre-douce);
  border-bottom: 2px solid var(--bord);
  padding: 0.35rem 0.5rem;
}
.tableau td { border-bottom: 1px solid var(--bord); padding: 0.35rem 0.5rem; vertical-align: top; }
.tableau .rognee { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tableau .surligne td { background: var(--surlignage); }

/* Sous 640 px, un tableau devient une pile de fiches (même principe que hweb). */
@media (max-width: 640px) {
  .tableau thead { display: none; }
  .tableau tr { display: block; border: 1px solid var(--bord); border-radius: 8px; margin-bottom: 0.6rem; padding: 0.3rem 0; }
  .tableau td { display: flex; gap: 0.5rem; border: none; padding: 0.15rem 0.6rem; }
  .tableau td::before { content: attr(data-label); font-weight: 600; min-width: 6.5rem; color: var(--encre-douce); }
  .tableau .rognee { max-width: none; white-space: normal; overflow-wrap: anywhere; }
}

/* ---------- graphes (SVG serveur, suivi/graphes.py) ---------- */
.graphe { width: 100%; height: auto; background: var(--carte); }
.graphe__grille { stroke: var(--bord); stroke-width: 1; }
.graphe__axe { fill: var(--encre-douce); font-size: 10px; }
.graphe__ligne { fill: none; stroke-width: 2; }
.graphe__point { stroke: none; }
.graphe__serie--0 { stroke: var(--serie-0); fill: var(--serie-0); }
.graphe__serie--1 { stroke: var(--serie-1); fill: var(--serie-1); }
.graphe__serie--2 { stroke: var(--serie-2); fill: var(--serie-2); }
.graphe__serie--3 { stroke: var(--serie-3); fill: var(--serie-3); }
.graphe__serie--4 { stroke: var(--serie-4); fill: var(--serie-4); }
.graphe__serie--5 { stroke: var(--serie-5); fill: var(--serie-5); }
.graphe__nous-0 { stroke: var(--nous-0); fill: var(--nous-0); }
.graphe__nous-1 { stroke: var(--nous-1); fill: var(--nous-1); }
.graphe__nous-2 { stroke: var(--nous-2); fill: var(--nous-2); }
.graphe__gris-0 { stroke: var(--gris-0); fill: var(--gris-0); }
.graphe__gris-1 { stroke: var(--gris-1); fill: var(--gris-1); }
.graphe__gris-2 { stroke: var(--gris-2); fill: var(--gris-2); }
.graphe__comp-0 { stroke: var(--comp-0); fill: var(--comp-0); }
.graphe__comp-1 { stroke: var(--comp-1); fill: var(--comp-1); }
.graphe__comp-2 { stroke: var(--comp-2); fill: var(--comp-2); }
polyline.graphe__ligne { fill: none !important; }

.legende { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.85rem; color: var(--encre-douce); }
.legende__item { display: inline-flex; align-items: center; gap: 0.3rem; }
.legende__puce { width: 0.7rem; height: 0.7rem; border-radius: 2px; display: inline-block; }
.legende__puce.graphe__serie--0 { background: var(--serie-0); }
.legende__puce.graphe__serie--1 { background: var(--serie-1); }
.legende__puce.graphe__serie--2 { background: var(--serie-2); }
.legende__puce.graphe__serie--3 { background: var(--serie-3); }
.legende__puce.graphe__serie--4 { background: var(--serie-4); }
.legende__puce.graphe__serie--5 { background: var(--serie-5); }
.legende__puce.graphe__nous-0 { background: var(--nous-0); }
.legende__puce.graphe__nous-1 { background: var(--nous-1); }
.legende__puce.graphe__nous-2 { background: var(--nous-2); }
.legende__puce.graphe__gris-0 { background: var(--gris-0); }
.legende__puce.graphe__gris-1 { background: var(--gris-1); }
.legende__puce.graphe__gris-2 { background: var(--gris-2); }
.legende__puce.graphe__comp-0 { background: var(--comp-0); }
.legende__puce.graphe__comp-1 { background: var(--comp-1); }
.legende__puce.graphe__comp-2 { background: var(--comp-2); }

/* ---------- filtre d'affichage (R16, R22) et listes de positions ---------- */
/* Un groupe par dimension (sites, régions, langues, mots-clés), sur deux lignes sans
   colonnes : les présélections, puis un bouton on/off par élément. */
.filtre {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  margin: 0 0 1rem;
  scroll-margin-top: 1rem;
}
.filtre__groupe + .filtre__groupe {
  border-top: 1px solid var(--bord);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}
.filtre__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.filtre__ligne + .filtre__ligne { margin-top: 0.4rem; }
.filtre__titre { font-weight: 600; color: var(--encre-douce); font-size: 0.9rem; min-width: 5.5rem; }
.filtre__choix--courant,
.filtre__choix--courant:hover { background: var(--fond); font-weight: 600; }
.filtre__pied { margin: 0.5rem 0 0; font-size: 0.85rem; }
/* Filtre sans rechargement (js/filtre.js) : les boutons basculent aussitôt ; pendant
   que le serveur recalcule, graphes et tableaux pâlissent (après 0,15 s, pour ne pas
   clignoter quand la réponse est rapide). */
.zone-filtree[aria-busy="true"] .bloc { opacity: 0.45; transition: opacity 0.2s 0.15s; }
/* Bouton on/off : plein = affiché (couleur du statut pour un site), contour pointillé
   et texte doux = masqué. */
.bascule {
  display: inline-block;
  padding: 0.15rem 0.7rem;
  border: 1px solid var(--accent-fonce);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.85rem;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.bascule:hover { background: var(--accent-fonce); }
.bascule:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bascule--nous { background: var(--nous-0); border-color: var(--nous-2); }
.bascule--nous:hover { background: var(--nous-2); }
.bascule--gris { background: var(--gris-0); border-color: var(--gris-2); }
.bascule--gris:hover { background: var(--gris-2); }
.bascule--comp { background: var(--comp-0); border-color: var(--comp-2); }
.bascule--comp:hover { background: var(--comp-2); }
.bascule--masque {
  background: var(--carte);
  border: 1px dashed var(--gris-1);
  color: var(--encre-douce);
}
.bascule--masque:hover { background: var(--fond); }
.bascule--masque.bascule--nous { border-color: var(--nous-0); }
.bascule--masque.bascule--gris { border-color: var(--gris-0); }
.bascule--masque.bascule--comp { border-color: var(--comp-0); }
.bascule--masque.bascule--nous:hover,
.bascule--masque.bascule--gris:hover,
.bascule--masque.bascule--comp:hover { background: var(--fond); }
.positions { list-style: none; margin: 0; padding: 0; }
.positions li { margin: 0 0 0.15rem; }
.carte__sites { list-style: none; margin: 0.3rem 0 0; padding: 0; }
.carte__sites li { margin: 0 0 0.15rem; }
.titre-site { font-size: 1rem; margin: 0.8rem 0 0.2rem; }
/* « Pages trouvées » : un mot-clé par ligne ; un mot-clé « passé » (qui ne fait plus
   sortir la page) est grisé, avec la date de sa dernière apparition en petit. */
.mots-page { list-style: none; margin: 0; padding: 0; }
.mots-page li { margin: 0 0 0.15rem; }
.mots-page small { color: var(--encre-douce); font-size: 0.75rem; }
.mot--passe, .mot--passe a, .mot--passe .position { color: var(--gris-1); }