/* Veille tarifaire — feuille de style unique (clair / sombre, mobile d'abord) */
:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --surface-2: #f3f2ee;
  --texte: #0b0b0b;
  --texte-2: #52514e;
  --discret: #898781;
  --trait: #e1e0d9;
  --bord: rgba(11, 11, 11, 0.10);
  --accent: #2a78d6;
  --moi: #eb6834;
  --moi-fond: #fdeee7;
  --ok: #006300;
  --alerte: #b25a00;
  --erreur: #d03b3b;
  /* Comparatif : du moins cher (bleu) au plus cher (rouge), gris au milieu */
  --c0: #b7d3f6; --c1: #dbe8f8; --c2: #f0efec; --c3: #f8dcdb; --c4: #f2b8b7;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0d0d0d; --surface: #1a1a19; --surface-2: #232321;
    --texte: #f0efec; --texte-2: #c3c2b7; --discret: #898781; --trait: #2c2c2a;
    --bord: rgba(255, 255, 255, 0.10); --accent: #3987e5; --moi: #d95926; --moi-fond: #3a2219;
    --ok: #0ca30c; --alerte: #fab219; --erreur: #e66767;
    --c0: #184f95; --c1: #1f3550; --c2: #383835; --c3: #563030; --c4: #7a3636;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface: #1a1a19; --surface-2: #232321;
  --texte: #f0efec; --texte-2: #c3c2b7; --discret: #898781; --trait: #2c2c2a;
  --bord: rgba(255, 255, 255, 0.10); --accent: #3987e5; --moi: #d95926; --moi-fond: #3a2219;
  --ok: #0ca30c; --alerte: #fab219; --erreur: #e66767;
  --c0: #184f95; --c1: #1f3550; --c2: #383835; --c3: #563030; --c4: #7a3636;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--page); color: var(--texte);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--accent); }
h1 { font-size: 1.4rem; margin: 0 0 .75rem; }
h2 { font-size: 1.1rem; margin: 1.75rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
.discret, small { color: var(--texte-2); }

/* En-tête et navigation */
header.barre {
  background: var(--surface); border-bottom: 1px solid var(--bord);
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; padding: .5rem 16px;
}
header.barre .marque { font-weight: 700; color: var(--texte); text-decoration: none; margin-right: auto; }
header.barre nav { display: flex; flex-wrap: wrap; gap: .1rem .3rem; }
header.barre nav a { padding: .35rem .55rem; border-radius: 6px; text-decoration: none; color: var(--texte-2); }
header.barre nav a.actif, header.barre nav a:hover { background: var(--surface-2); color: var(--texte); }
header.barre form { margin: 0; }
main { padding: 16px; max-width: 1400px; margin: 0 auto; }

/* Messages */
.flash { padding: .6rem .8rem; border-radius: 8px; margin-bottom: .6rem; border: 1px solid var(--bord); background: var(--surface); }
.flash.ok { border-left: 4px solid var(--ok); }
.flash.erreur { border-left: 4px solid var(--erreur); }
.flash.info { border-left: 4px solid var(--accent); }

/* Cartes, formulaires */
.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.filtres { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: end; margin-bottom: 14px; }
.filtres > *, .filtres label, .champ { min-width: 0; max-width: 100%; }
.filtres label, .champ { display: flex; flex-direction: column; font-size: .85rem; color: var(--texte-2); gap: .15rem; }
input, select, textarea, button {
  font: inherit; color: var(--texte); background: var(--surface); border: 1px solid var(--trait);
  border-radius: 6px; padding: .35rem .5rem; max-width: 100%;
}
select { text-overflow: ellipsis; }
textarea { width: 100%; min-height: 4rem; }
button, .bouton {
  cursor: pointer; background: var(--surface-2); border: 1px solid var(--bord); text-decoration: none;
  color: var(--texte); display: inline-block; padding: .4rem .75rem; border-radius: 6px;
}
button.principal, .bouton.principal { background: var(--accent); color: #fff; border-color: transparent; }
button.lien { background: none; border: none; color: var(--accent); padding: 0; text-decoration: underline; }
.segment { display: inline-flex; border: 1px solid var(--trait); border-radius: 7px; overflow: hidden; }
.segment a { padding: .35rem .7rem; text-decoration: none; color: var(--texte-2); }
.segment a.actif { background: var(--accent); color: #fff; }
.grille-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7rem 1rem; }
.case { flex-direction: row !important; align-items: center; gap: .4rem !important; }

/* Tableaux */
.defile { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--bord); border-radius: 10px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: .4rem .55rem; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
th { font-size: .8rem; color: var(--texte-2); font-weight: 600; background: var(--surface); position: sticky; top: 0; }
td.n, th.n { text-align: right; white-space: nowrap; }
tr.moi td { background: var(--moi-fond); }
tr.moi td:first-child, .pastille-moi { box-shadow: inset 4px 0 0 var(--moi); }
tr.separation td { border-top: 2px solid var(--trait); }
.motif { color: var(--discret); font-size: .8rem; white-space: normal; max-width: 12rem; display: inline-block; }
.dispo { color: var(--alerte); font-size: .78rem; display: block; }
.nuit { color: var(--texte-2); font-size: .8rem; display: block; }
/* « tr td » : la couleur de prix l'emporte aussi sur le surlignage de ma ligne */
tr td.c0 { background: var(--c0); } tr td.c1 { background: var(--c1); } tr td.c2 { background: var(--c2); }
tr td.c3 { background: var(--c3); } tr td.c4 { background: var(--c4); }
.legende-couleurs { display: flex; gap: .3rem; align-items: center; font-size: .8rem; color: var(--texte-2); margin: .4rem 0; }
.legende-couleurs span.b { width: 1.4rem; height: .8rem; border-radius: 3px; display: inline-block; }

/* Pastilles de statut (toujours avec un libellé) */
.statut { display: inline-block; padding: .05rem .45rem; border-radius: 99px; font-size: .78rem; border: 1px solid var(--bord); white-space: nowrap; }
.statut::before { content: "● "; }
.statut.ok, .statut.aucune_correspondance { color: var(--ok); }
.statut.partiel, .statut.en_cours { color: var(--alerte); }
.statut.erreur, .statut.interrompu, .statut.bloque { color: var(--erreur); }
.badge { font-size: .72rem; padding: .05rem .4rem; border-radius: 4px; background: var(--surface-2); color: var(--texte-2); white-space: nowrap; }
.badge.verifier { color: var(--alerte); border: 1px solid var(--alerte); background: none; }
.confirmation { color: var(--ok); font-size: .82rem; transition: opacity .6s ease; }

/* Synthèse */
.synthese li { margin: .2rem 0; }
.hausse { color: var(--erreur); } .baisse { color: var(--ok); }
.point { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; vertical-align: middle; margin-right: .3rem; }

/* Graphique */
.graphique { position: relative; height: 340px; }
@media (max-width: 640px) {
  .graphique { height: 280px; }
  main { padding: 12px 16px; }
  th, td { padding: .35rem .4rem; }
  /* Tableaux larges : une ligne par cellule, défilement horizontal dans le cadre */
  .defile th, .defile td { white-space: nowrap; }
  .defile td .motif { white-space: normal; min-width: 7rem; }
  .graphique { height: 320px; }
}

/* --- Confort de lecture (17/10/2026) --------------------------------------- */
/* Onglets du tableau de bord */
.onglets { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--trait); margin: 0 0 14px; }
.onglets a { padding: .45rem .8rem; text-decoration: none; color: var(--texte-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.onglets a.actif { color: var(--texte); border-bottom-color: var(--accent); font-weight: 600; }
.onglets a:hover { color: var(--texte); }
.bandeau { color: var(--texte-2); margin: 0 0 14px; }
h2.titre-carte { margin: 0 0 .6rem; }
.note { font-size: .82rem; margin: .5rem 0 0; }
.bloc { display: block; }
.fort { font-weight: 600; }
sup { font-size: .7em; }
/* Tableau dans une carte : pas de second cadre */
.defile.nu { border: none; border-radius: 0; background: none; }
/* Long tableau : il défile dans son cadre et garde ses en-têtes visibles */
.defile.haut { max-height: 78vh; overflow: auto; }
.defile.haut thead th { position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 var(--trait); }
table.aere th, table.aere td { padding: .55rem .7rem; vertical-align: middle; }
table.aere td.n strong { font-weight: 600; }
tbody.groupe + tbody.groupe tr:first-child td { border-top: 2px solid var(--trait); }
tr.intertitre td { background: var(--surface-2); font-weight: 600; padding-top: .45rem; padding-bottom: .45rem; }
.grille .motif { max-width: none; }
/* Relevé : un tableau camping × séjour */
.matrice td.n, .matrice th.n { text-align: center; }
.grille td:nth-child(2) { white-space: nowrap; }
.case-releve { display: inline-block; min-width: 4.2rem; padding: .1rem .4rem; border-radius: 5px; font-size: .82rem; text-decoration: none; }
.case-releve.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.case-releve.aucune_correspondance { color: var(--texte-2); background: var(--surface-2); }
.case-releve.erreur, .case-releve.bloque { color: var(--erreur); background: color-mix(in srgb, var(--erreur) 10%, transparent); }
.compte { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: .2rem 0 .4rem; }
.compte div { min-width: 7rem; }
.compte .nb { font-size: 1.5rem; font-weight: 700; display: block; line-height: 1.1; }
.compte .nb.ok { color: var(--ok); } .compte .nb.erreur { color: var(--erreur); }
details.liste summary { cursor: pointer; color: var(--accent); margin: .6rem 0; }

/* --- Comparer (17/10/2026) : mon camping face aux concurrents choisis ------ */
.choix-concurrents { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  border: 1px solid var(--bord); border-radius: 10px; padding: .4rem .7rem .7rem; margin: 0; background: var(--surface); }
.choix-concurrents legend { font-size: .85rem; color: var(--texte-2); padding: 0 .3rem; }
.filtres label.puce { display: inline-flex; flex-direction: row; align-items: center; gap: .35rem; color: var(--texte);
  border: 1px solid var(--trait); border-radius: 99px; padding: .2rem .65rem .2rem .45rem; font-size: .85rem; cursor: pointer; background: var(--surface); }
.puce input { margin: 0; padding: 0; accent-color: var(--accent); }
.puce:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.puce small { color: var(--discret); }
.puce .point { margin-right: 0; }
.choix-concurrents button { margin-left: auto; }
.phrase { margin: 0 0 .6rem; font-size: 1.02rem; line-height: 1.45; }
table.comparer thead th.camping { white-space: normal; min-width: 6.5rem; max-width: 9.5rem; }
table.comparer td.col-moi, table.comparer th.col-moi { box-shadow: inset 3px 0 0 var(--moi); }
table.comparer td.col-moi { font-weight: 600; }
table.comparer td.absent { color: var(--discret); font-size: .8rem; }
table.comparer td small.bloc { font-weight: 400; }
.repartition { display: flex; height: 1.15rem; border-radius: 4px; overflow: hidden; width: 14rem; max-width: 100%; font-size: .75rem; margin-bottom: .15rem; }
.repartition span { display: flex; align-items: center; justify-content: center; color: var(--texte); min-width: 1.1rem; }
.repartition .moins { background: var(--c0); } .repartition .egal { background: var(--c2); } .repartition .plus { background: var(--c4); }
/* Sur un écran étroit, la colonne des séjours reste visible pendant le défilement */
table.comparer tbody td:first-child, table.comparer thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
table.comparer thead th:first-child { z-index: 3; }

/* --- Finitions visuelles (22/10/2026) --------------------------------------- */
h1 { font-weight: 800; letter-spacing: -.01em; }
.carte { box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .05); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .carte { box-shadow: none; } }
:root[data-theme="dark"] .carte { box-shadow: none; }

/* Filtres en pastilles : piste neutre, choix actif en relief (plutôt qu'un aplat de couleur répété) */
.segment { border: none; border-radius: 999px; background: var(--surface-2); padding: 3px; gap: 2px; }
.segment a { border-radius: 999px; font-weight: 600; font-size: .82rem; padding: .4rem .8rem; }
.segment a.actif { background: var(--surface); color: var(--texte); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.segment a:not(.actif):hover { color: var(--texte); }

button, .bouton { border-radius: 8px; font-weight: 500; }
button.principal:hover, .bouton.principal:hover { filter: brightness(.93); }
.point { width: .8rem; height: .8rem; }

/* Carte d'accent : met en évidence un résumé clé (ex. « En bref » du tableau de bord) */
.carte-accent {
  --texte: #eef1fb; --texte-2: #aab4cf; --discret: #8a96bd; --ok: #4ade80; --erreur: #f87171;
  background: #10193a; border-color: transparent; color: var(--texte);
}
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .carte-accent { background: #17213f; } }
:root[data-theme="dark"] .carte-accent { background: #17213f; }
.carte-accent h2.titre-carte { color: #93b4ff; text-transform: uppercase; font-size: .72rem; letter-spacing: .07em; font-weight: 700; }
.carte-accent .compte { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: .9rem; }
.carte-accent .compte .nb { font-size: 1.9rem; }

/* --- Fluidité et accessibilité (22/10/2026) ---------------------------------
   Transitions douces sur les éléments interactifs ; états clavier visibles ;
   cibles tactiles plus confortables sur mobile. Les couleurs d'écart prix/marché
   (.c0-.c4) ne sont volontairement pas concernées par un survol de ligne : les
   garder intactes prime sur l'effet, c'est la donnée la plus consultée de l'écran. */
a, button, .bouton, .segment a, .puce, .onglets a, header.barre nav a, input, select, textarea {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, filter .15s ease;
}
button, .bouton, .segment a, label.puce, .onglets a, header.barre nav a { cursor: pointer; }
button:active, .bouton:active, .puce:active { transform: scale(.97); }
a:focus-visible, button:focus-visible, .bouton:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .segment a:focus-visible, .onglets a:focus-visible, header.barre nav a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}
.puce:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.defile.haut { scroll-behavior: smooth; }
/* Lignes de tableau « cliquables » (cases à cocher, liens) : retour visuel au survol
   sans jamais changer la couleur des cellules de données (prix, écarts). */
tr.moi, .choix-concurrents label.puce, .onglets a, header.barre nav a { will-change: background-color; }
@media (pointer: coarse) {
  .segment a, label.puce, button, .bouton { min-height: 44px; display: inline-flex; align-items: center; padding-block: .5rem; }
  input[type="checkbox"], input[type="radio"] { width: 1.1rem; height: 1.1rem; }
}