/* ════════════════════════════════════════════════════════════════════════════
   VOLONTAIRE DÉSIGNÉ — l'habillage de l'appli publique.

   Les styles de BASE de la page (`.bloc`, `.bouton`, `.champ`, `.liste`, `--accent`,
   `--surface`…) : tableau.css s'appuie sur eux.

   Le bandeau du haut est une ardoise : le tableau de la classe. Son nom est composé en
   Latin Modern, comme le verdict du tirage. Le reste de la page est un outil — clair
   ou sombre selon l'appareil, de grandes cibles (44 px au moins), aucun champ sous
   16 px (en dessous, iOS zoome au focus), aucun texte sous 15 px.
   ════════════════════════════════════════════════════════════════════════════ */

/* Mise en page : une colonne d'outil de 52 rem au plus, sous un bandeau pleine largeur. */
:root {
  --fond:     #F3F4F2;
  --surface:  #FFFFFF;
  --texte:    #17191B;
  --pale:     #565B60;
  --filet:    #D6D9D4;
  --accent:   #2B5A7A;    /* bleu d'ardoise : boutons, liens, pastilles */
  --accent-t: #E3EDF3;
  --brique:   #A3492A;    /* les erreurs, les refus */
  --brique-t: #FAE6DF;
  --ardoise:  #1F2A2E;    /* le bandeau : le tableau de la classe */
  --craie:    #EDEBE4;
  --rayon:    10px;
  --large:    52rem;
  --mini:       15px;     /* rien sous ça */
  --mini-champ: 16px;     /* un champ sous ça fait zoomer iOS */
  --titre: "Tableau Serif", "Latin Modern Roman", "CMU Serif", Georgia, serif;
  --texte-police: "Tableau Sans", "Latin Modern Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #121516; --surface: #1B1F21; --texte: #ECEDEA; --pale: #A3A9AD;
    --filet: #2E3437; --accent: #8DBAD8; --accent-t: #172630;
    --brique: #E8956F; --brique-t: #2E1A13; --ardoise: #0D1214; --craie: #E4E2DA;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { font-size: 16px; }
/* Bandeau, page, pied, sur toute la hauteur de l'écran : le pied reste en bas. */
body {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--fond); color: var(--texte);
  font: 400 1rem/1.55 var(--texte-police); -webkit-text-size-adjust: 100%;
}
input, select, textarea, button { font-family: inherit; font-size: 1rem; }
a { color: var(--accent); }

/* ── Le bandeau ── Une seule ligne : le nom, qui ramène à l'accueil, et l'icône des
   paramètres (Maxime, 2026-10-03 : « celle classique à trois tirets ») — ✕ sur la page
   des paramètres. Pas de devise, pas d'onglets. */
.bandeau {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  background: var(--ardoise); color: var(--craie);
  padding: .6rem max(1rem, calc((100% - var(--large)) / 2 + 1rem));
  border-bottom: 3px solid color-mix(in srgb, var(--craie) 18%, var(--ardoise));
}
.bandeau-nom {
  min-width: 0; color: inherit; text-decoration: none;
  font-family: var(--titre); font-weight: 700; letter-spacing: .01em;
  font-size: clamp(1.5rem, 4.4vw, 2.1rem); line-height: 1.1;
}
.bandeau-nom:focus-visible, .bandeau-menu:focus-visible { outline: 2px solid var(--craie); outline-offset: 3px; border-radius: 6px; }
.bandeau-menu {
  flex-shrink: 0; width: 48px; height: 48px; display: inline-flex; align-items: center;
  justify-content: center; color: var(--craie); border-radius: 10px;
}
.bandeau-menu svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@media (hover: hover) { .bandeau-menu:hover { background: color-mix(in srgb, var(--craie) 12%, transparent); } }
/* Le logo devant le nom : un carré de la hauteur des capitales et demie, posé sur la
   ligne. Son fond est l'ardoise du bandeau ; un filet de craie le détache en sombre. */
.bandeau-logo {
  width: 1.35em; height: 1.35em; margin-right: .4em; vertical-align: -.3em;
  border-radius: 22%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--craie) 25%, transparent);
}

/* ── La page ── Elle prend la hauteur que laissent bandeau et pied ; sur l'ACCUEIL et
   le TIRAGE, son contenu se tient au milieu. */
.page { flex: 1 0 auto; width: 100%; max-width: var(--large); margin: 0 auto; padding: 1.25rem 1rem 2rem; }
body[data-vue="accueil"] .page, body[data-vue="tirage"] .page {
  display: flex; flex-direction: column; justify-content: center; padding-block: 1rem;
}
.titre { padding: .3rem 0 1.3rem; }
.titre h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.chapeau { color: var(--pale); margin-top: .35rem; font-size: 1.05rem; }

.bloc { margin-bottom: 2rem; }
.bloc-titre {
  font-size: max(var(--mini), .85rem); letter-spacing: .08em; text-transform: uppercase;
  color: var(--pale); font-weight: 600; margin-bottom: .7rem;
}
.discret { text-transform: none; letter-spacing: 0; font-weight: 400; }
.vide { color: var(--pale); text-align: center; padding: 2rem 1rem; }

/* ── Actions : champs et boutons ── */
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.champ {
  flex: 1 1 12rem; min-width: 0; min-height: 50px; padding: .6rem 1rem;
  font-family: inherit; font-size: max(var(--mini-champ), 1.05rem); color: var(--texte);
  background: var(--surface); border: 1px solid var(--filet); border-radius: 999px;
}
select.champ { cursor: pointer; }
textarea.champ { border-radius: var(--rayon); resize: vertical; min-height: 4.5rem;
                 line-height: 1.4; padding: .6rem .85rem; }
.champ:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.champ.mini { flex: 0 1 auto; min-height: 44px; font-size: max(var(--mini-champ), .95rem);
              padding: .35rem .7rem; border-radius: 8px; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 50px; padding: .6rem 1.1rem; cursor: pointer;
  font-family: inherit; font-size: max(var(--mini), 1.02rem); font-weight: 600; line-height: 1.2;
  text-align: center; color: var(--texte); text-decoration: none;
  background: var(--surface); border: 1px solid var(--filet); border-radius: 999px;
}
.bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .bouton:hover { border-color: var(--accent); } }
.bouton.fort { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.bouton.actif { background: var(--accent-t); border-color: var(--accent); color: var(--accent); }
.bouton.danger { color: var(--brique); border-color: var(--brique); }

.retirer {
  width: 44px; height: 44px; flex-shrink: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--pale); font-size: 1.35rem; line-height: 1;
}
.retirer:hover, .retirer:focus-visible { color: var(--brique); }

/* ── Listes ── */
.liste { list-style: none; background: var(--surface); border: 1px solid var(--filet);
         border-radius: var(--rayon); overflow: hidden; }
.ligne { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; min-height: 58px;
         border-bottom: 1px solid var(--filet); }
.liste > li:last-child .ligne { border-bottom: 0; }
.ligne-corps { flex: 1; min-width: 0; }
.ligne-nom { display: block; font-weight: 600; font-size: 1.08rem; overflow-wrap: break-word; }
.ligne-meta { display: block; font-size: max(var(--mini), .95rem); color: var(--pale);
              font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.jour { flex: 0 0 3.2rem; color: var(--pale); font-variant-numeric: tabular-nums; }
.badge { font-size: max(var(--mini), .85rem); font-weight: 700; padding: .25rem .55rem;
         border-radius: 6px; background: var(--accent); color: var(--surface); white-space: nowrap; }
.badge.creux { background: none; color: var(--pale); border: 1px dashed var(--filet); font-weight: 500; }

/* ── Chiffres ── */
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.chiffres > div { background: var(--surface); border: 1px solid var(--filet);
                  border-radius: var(--rayon); padding: .6rem .75rem; }
.chiffre { display: block; font-size: 1.3rem; font-weight: 700; line-height: 1.2;
           font-variant-numeric: tabular-nums; }
.chiffre-libelle { display: block; font-size: max(var(--mini), .8rem); line-height: 1.3;
                   letter-spacing: .06em; text-transform: uppercase; color: var(--pale); }

/* ── Formulaire : une étiquette, un champ, l'un sous l'autre ── */
.form { display: grid; gap: .7rem; }
.form label { display: grid; gap: .2rem; font-weight: 600; }
.form label > span { font-weight: 400; color: var(--pale); font-size: max(var(--mini), .95rem); }
.form .champ { width: 100%; }

/* ── Modale : une feuille qui monte du bas sur téléphone, centrée ailleurs ── */
.modale { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end;
          background: rgba(0, 0, 0, .45); }
.modale-boite { width: 100%; max-height: 85vh; overflow-y: auto; padding: 1rem;
                background: var(--surface); border-radius: var(--rayon) var(--rayon) 0 0; }

/* Le pied : l'auteur, la licence, les sources, la version — une ligne discrète, qui ne
   se coupe qu'entre ses morceaux. */
.pied { text-align: center; padding: .7rem 1rem .9rem; color: var(--pale);
        font-size: var(--mini); line-height: 1.5; }
.pied > span, .pied > a { white-space: nowrap; }
.pied a { color: inherit; }

/* ── Écran couché ou large : quatre colonnes, la modale au centre ── */
@media (orientation: landscape), (min-width: 700px) {
  .modale { align-items: center; justify-content: center; padding: 1rem; }
  .modale-boite { max-width: 34rem; border-radius: var(--rayon); }
}
/* ── Téléphone debout : un cran plus gros, deux colonnes de chiffres ── */
@media (orientation: portrait) and (max-width: 699px) {
  html { font-size: 17px; }
  .pied { line-height: 1.35; padding-block: .5rem .7rem; }   /* cinq lignes sur un téléphone */
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .titre h1 { font-size: 1.7rem; }
}