/* loto.tjampens.com : style suisse. Direction et interdits : DESIGN.md du projet. */

:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --gridline: #e1e0d9;
  --axis: #c3c2b7;
  --serie: #2a78d6;
  --comp: #eb6834;
  --comp-ink: #0b0b0b;
  /* Séquentielle, 7 classes, du peu au beaucoup */
  --q0: #cde2fb; --q1: #9ec5f4; --q2: #6da7ec; --q3: #3987e5; --q4: #256abf; --q5: #184f95; --q6: #0d366b;
  --q0-ink: #0b0b0b; --q1-ink: #0b0b0b; --q2-ink: #0b0b0b; --q3-ink: #0b0b0b; --q4-ink: #fff; --q5-ink: #fff; --q6-ink: #fff;
  /* Divergente, bleu = moins que prévu, rouge = plus que prévu */
  --dm2: #2a78d6; --dm1: #9ec5f4; --d0: #f0efec; --dp1: #f2a7a6; --dp2: #e34948;
  --dm2-ink: #fff; --dm1-ink: #0b0b0b; --d0-ink: #0b0b0b; --dp1-ink: #0b0b0b; --dp2-ink: #0b0b0b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0d0d0d; --surface: #1a1a19; --ink: #f0efec; --ink-2: #c3c2b7; --muted: #898781;
    --gridline: #2c2c2a; --axis: #383835; --serie: #3987e5; --comp: #d95926; --comp-ink: #0b0b0b;
    --q0: #0d366b; --q1: #184f95; --q2: #256abf; --q3: #3987e5; --q4: #6da7ec; --q5: #9ec5f4; --q6: #cde2fb;
    --q0-ink: #f0efec; --q1-ink: #f0efec; --q2-ink: #fff; --q3-ink: #0b0b0b; --q4-ink: #0b0b0b; --q5-ink: #0b0b0b; --q6-ink: #0b0b0b;
    --dm2: #3987e5; --dm1: #184f95; --d0: #383835; --dp1: #8f2f2f; --dp2: #e66767;
    --dm2-ink: #0b0b0b; --dm1-ink: #f0efec; --d0-ink: #f0efec; --dp1-ink: #f0efec; --dp2-ink: #0b0b0b;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface: #1a1a19; --ink: #f0efec; --ink-2: #c3c2b7; --muted: #898781;
  --gridline: #2c2c2a; --axis: #383835; --serie: #3987e5; --comp: #d95926; --comp-ink: #0b0b0b;
  --q0: #0d366b; --q1: #184f95; --q2: #256abf; --q3: #3987e5; --q4: #6da7ec; --q5: #9ec5f4; --q6: #cde2fb;
  --q0-ink: #f0efec; --q1-ink: #f0efec; --q2-ink: #fff; --q3-ink: #0b0b0b; --q4-ink: #0b0b0b; --q5-ink: #0b0b0b; --q6-ink: #0b0b0b;
  --dm2: #3987e5; --dm1: #184f95; --d0: #383835; --dp1: #8f2f2f; --dp2: #e66767;
  --dm2-ink: #0b0b0b; --dm1-ink: #f0efec; --d0-ink: #f0efec; --dp1-ink: #f0efec; --dp2-ink: #0b0b0b;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: inherit; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; }

.page { max-width: 1120px; margin: 0 auto; padding: 0 16px 64px; }

/* En-tête */
.entete { padding: 40px 0 24px; border-bottom: 1px solid var(--ink); }
.titre { font-size: clamp(44px, 9vw, 96px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; }
.chapeau { max-width: 40em; margin: 16px 0 24px; font-size: 18px; color: var(--ink-2); }
.onglets { display: flex; gap: 24px; }
.onglet {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font-size: 22px; font-weight: 700; color: var(--muted);
  border-bottom: 3px solid transparent;
}
.onglet[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.onglet:hover { color: var(--ink); }
.maj { margin: 16px 0 0; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.maj .alerte { color: var(--ink); font-weight: 700; }

/* Sections : 4 colonnes de titre, 8 de contenu */
/* minmax(0, …) : sans lui, une colonne s'élargit à la taille du plus large tableau et la page déborde. */
.section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 40px 0; border-bottom: 1px solid var(--axis); }
@media (min-width: 860px) {
  .section { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; }
  .section-titre { position: relative; }
}
.section-titre .num { display: block; font-size: 14px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.section-titre h2 { font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.section-corps { min-width: 0; }
.sous-titre { font-size: 18px; font-weight: 700; margin: 40px 0 8px; }
.note { font-size: 14px; color: var(--ink-2); margin: 8px 0; }
.texte { max-width: 38em; }
.texte strong { font-weight: 700; }

/* Boules */
.boules { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.boule {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--surface); color: var(--ink);
  font-weight: 700; font-variant-numeric: tabular-nums; flex: none;
}
.boule.comp { background: var(--comp); border-color: var(--comp); color: var(--comp-ink); }
.boule.petite { width: 30px; height: 30px; font-size: 13px; border-width: 1.5px; }
.boules .plus { color: var(--muted); font-weight: 700; padding: 0 2px; }
.dernier .boule { width: 48px; height: 48px; font-size: 20px; border-width: 2px; }
@media (min-width: 640px) { .dernier .boule { width: 64px; height: 64px; font-size: 26px; border-width: 3px; } }
.dernier .date { font-size: 20px; font-weight: 700; margin: 0 0 16px; }
.dernier .second { margin-top: 16px; }

/* Tuiles de chiffres */
.tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 40px; border-top: 1px solid var(--axis); }
@media (min-width: 640px) { .tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tuile { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--axis); }
.tuile .valeur { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.tuile .libelle { font-size: 14px; color: var(--ink-2); }

/* Filtres */
.filtres { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-bottom: 8px; }
.filtre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.filtre-nom { font-size: 14px; color: var(--muted); }
.filtre button {
  background: none; border: 0; padding: 4px 0; cursor: pointer; font-size: 15px;
  color: var(--ink-2); border-bottom: 3px solid transparent;
}
.filtre button[aria-pressed="true"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.filtre button:hover { color: var(--ink); }

/* Grille des numéros */
.grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; max-width: 520px; margin: 16px 0; }
@media (min-width: 860px) { .grille.dix { grid-template-columns: repeat(10, minmax(0, 1fr)); max-width: 680px; } }
.case {
  aspect-ratio: 1; width: 100%; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(13px, 3.4vw, 17px); font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.15s ease;
}
.case:hover { transform: scale(1.08); }
.case:focus-visible, .case[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .grille.entree .case { animation: apparition 0.4s ease both; animation-delay: calc(var(--i) * 12ms); }
}
@keyframes apparition { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

.q0 { background: var(--q0); color: var(--q0-ink); } .q1 { background: var(--q1); color: var(--q1-ink); }
.q2 { background: var(--q2); color: var(--q2-ink); } .q3 { background: var(--q3); color: var(--q3-ink); }
.q4 { background: var(--q4); color: var(--q4-ink); } .q5 { background: var(--q5); color: var(--q5-ink); }
.q6 { background: var(--q6); color: var(--q6-ink); }
.dm2 { background: var(--dm2); color: var(--dm2-ink); } .dm1 { background: var(--dm1); color: var(--dm1-ink); }
.d0 { background: var(--d0); color: var(--d0-ink); }
.dp1 { background: var(--dp1); color: var(--dp1-ink); } .dp2 { background: var(--dp2); color: var(--dp2-ink); }

.legende { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin-bottom: 16px; }
.legende .echelle { display: flex; gap: 2px; }
.legende .echelle span { width: 28px; height: 12px; display: block; }
.legende .item { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; }
.legende .item i { display: block; width: 12px; height: 12px; }
.legende .item i.trait { height: 2px; background: var(--ink); }

/* Détail d'un numéro */
.detail { border-top: 3px solid var(--ink); padding: 16px 0; margin: 8px 0 24px; }
.detail-tete { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.detail-tete .boule { width: 56px; height: 56px; font-size: 22px; }
.detail-tete h3 { font-size: 22px; }
.detail dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 8px 0; }
.detail dt { color: var(--ink-2); }
.detail dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.fermer { background: none; border: 1px solid var(--ink); cursor: pointer; padding: 2px 10px; margin-left: auto; }
.fermer:hover { background: var(--ink); color: var(--page); }

.verdict { border-left: 3px solid var(--ink); padding: 4px 0 4px 16px; margin: 16px 0; max-width: 38em; }
.extremes { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 24px 0 0; }
@media (min-width: 640px) { .extremes { grid-template-columns: 1fr 1fr; } }
.extremes h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.extremes .ligne { display: flex; align-items: center; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--gridline); font-variant-numeric: tabular-nums; }
.extremes .ligne span { color: var(--ink-2); font-size: 14px; }

/* Graphiques */
.graphe { margin: 8px 0 24px; }
.graphe svg { display: block; width: 100%; height: auto; overflow: visible; }
.graphe .axe { stroke: var(--axis); stroke-width: 1; }
.graphe .grillage { stroke: var(--gridline); stroke-width: 1; }
.graphe .barre { fill: var(--serie); }
.graphe .barre.comp { fill: var(--comp); }
.graphe .attendu { stroke: var(--ink); stroke-width: 2; }
.graphe .cible { fill: transparent; cursor: default; }
.graphe .cible:hover + .survol, .graphe .cible:focus + .survol { opacity: 1; }
.graphe .survol { fill: var(--ink); opacity: 0; pointer-events: none; }
.graphe text { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.graphe text.fort { fill: var(--ink); font-weight: 700; }
/* Le SVG est réduit d'environ moitié au téléphone : on grossit son texte d'autant. */
@media (max-width: 640px) { .graphe text { font-size: 19px; } }
@media (prefers-reduced-motion: no-preference) {
  .graphe .barre { transform-box: fill-box; transform-origin: bottom; animation: pousse 0.5s ease both; }
}
@keyframes pousse { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.bloc { margin-bottom: 40px; }
.bloc h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }

/* Tableaux */
details.donnees { margin: 4px 0 16px; font-size: 14px; }
details.donnees summary { cursor: pointer; color: var(--ink-2); }
.cadre { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 14px; }
th, td { text-align: left; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--gridline); vertical-align: middle; }
th { font-weight: 700; color: var(--ink-2); border-bottom-color: var(--axis); font-size: 13px; }
td.nb, th.nb { text-align: right; }
.tableau-boules td .boules { gap: 4px; }

/* Ma grille */
.form-grille fieldset { border: 0; padding: 0; margin: 0 0 16px; }
.form-grille legend { font-weight: 700; margin-bottom: 8px; }
.saisie { display: flex; flex-wrap: wrap; gap: 8px; }
.saisie input {
  width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--ink); background: var(--surface);
  color: var(--ink); text-align: center; font: 700 20px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.saisie input::-webkit-outer-spin-button, .saisie input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.saisie.comp input { border-color: var(--comp); }
.saisie input:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bouton { background: var(--ink); color: var(--page); border: 1px solid var(--ink); padding: 10px 18px; cursor: pointer; font-weight: 700; }
.bouton:hover { background: var(--page); color: var(--ink); }
.bouton.secondaire { background: none; color: var(--ink); }
.bouton.secondaire:hover { background: var(--ink); color: var(--page); }
.erreur { color: var(--ink); font-weight: 700; min-height: 1.5em; }
#resultat-grille { margin-top: 16px; }

/* Infobulle */
.infobulle {
  position: fixed; z-index: 10; pointer-events: none; max-width: 260px;
  background: var(--ink); color: var(--page); padding: 8px 10px; font-size: 13px; line-height: 1.4;
}
.infobulle strong { display: block; }

/* Pied */
.pied { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 40px 0 0; font-size: 14px; color: var(--ink-2); }
@media (min-width: 860px) { .pied { grid-template-columns: 1fr 1fr; } }
.pied h2 { font-size: 15px; color: var(--ink); margin-bottom: 8px; }
.pied p { margin: 0 0 8px; max-width: 42em; }

.charge { opacity: 0.4; }