/* ---------------------------------------------------------------------
   Sillon - LE PUPITRE.

   Même famille que Sonar : papier, encre, colonnes tabulaires. Mais là
   où les quatre autres ont chacune leur couleur, SILLON N'EN A PAS.

   POURQUOI. À cinq icônes identiques de 16 px, la palette est pleine :
   mesuré en ΔE2000, le violet tombait à 28 de Fit, le magenta à 27 de
   Sonar, le vert à 22 de Battle - alors que la paire la plus serrée déjà
   acceptée, Fit/Battle, est à 29,6. Aucune teinte saturée ne tenait.
   L'achromatique, lui, ne peut se confondre avec rien par construction.
   Le favicon bascule donc noir sur clair, blanc sur sombre, et l'encre
   du site suit. Idée de Paul, le 14 septembre 2026.

   RIEN NE SORT VERS UN CDN. Aucune police n'est chargée : les piles
   système portent très bien l'écran, et Georgia - présente partout - fait
   le caractère « papier » des chiffres de tête.

   LES CHIFFRES SONT TABULAIRES PARTOUT où ils s'empilent. Sans
   `font-variant-numeric`, une colonne d'euros ne s'aligne pas et on ne
   peut plus comparer deux lignes d'un coup d'œil.
   --------------------------------------------------------------------- */

:root{
  --papier:#f6f5f2; --carte:#fff; --trait:#e2dfd8; --encre:#1b1a17; --doux:#6b6760;
  --accent:#1b1a20; --accent-pale:#eceae4;
  --ok:#2f6b46; --moyen:#8a6d1f; --faible:#a33b3b;
  --relief:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
}
@media (prefers-color-scheme:dark){
  :root{--papier:#15141a; --carte:#1d1c23; --trait:#302f39; --encre:#efece7; --doux:#a09c95;
        --accent:#f2efe9; --accent-pale:#2a2932;
        --ok:#6fce9b; --moyen:#d9bb63; --faible:#e69494;
        --relief:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);}
}

*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--encre);
  font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}

/* --- la porte ------------------------------------------------------- */
.porte{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  align-items:center;padding:24px}
.porte .marque{font-size:27px;font-weight:640;letter-spacing:-.02em}
.porte .sous{color:var(--doux);font-size:13.5px;margin:4px 0 22px}
.porte-carte{background:var(--carte);border:1px solid var(--trait);border-radius:14px;
  padding:26px;width:min(94vw,372px);box-shadow:var(--relief)}

/* --- l'en-tête ------------------------------------------------------ */
.tete{background:var(--carte);border-bottom:1px solid var(--trait)}
.tete-in{max-width:1080px;margin:0 auto;padding:13px 20px;display:flex;align-items:center;gap:14px}
.marque{color:inherit;text-decoration:none;font-size:20px;font-weight:640;letter-spacing:-.02em}
.marque span{margin-left:9px;font-size:13px;font-weight:400;color:var(--doux)}
.lien-doux{margin-left:auto;color:var(--doux);font-size:13px;text-decoration:none}
.lien-doux:hover{color:var(--accent)}

/* --- la page -------------------------------------------------------- */
.page{max-width:1080px;margin:0 auto;padding:22px 20px 80px}
.bandeau{color:var(--doux);font-size:12.5px;margin:0 0 20px;padding-bottom:15px;
  border-bottom:1px solid var(--trait)}
.grille{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:820px){.grille{grid-template-columns:1fr}}
.carte{background:var(--carte);border:1px solid var(--trait);border-radius:12px;
  padding:17px 17px 19px;box-shadow:var(--relief)}
.carte h2{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--doux);
  margin:0 0 13px;font-weight:600}
.aparte{color:var(--doux);font-size:12px;line-height:1.5;margin:9px 0 0}
.aparte b{color:var(--encre);font-weight:600}

/* --- les champs ----------------------------------------------------- */
.champ{margin-top:11px}
label{display:block;font-size:12.5px;color:var(--doux);margin-bottom:5px}
input[type=text],input[type=number],input[type=search],input[type=email],input[type=password]{
  width:100%;padding:9px 11px;border:1px solid var(--trait);border-radius:8px;
  background:var(--papier);color:var(--encre);font:inherit;font-size:14px}
input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}

/* --- les boutons ---------------------------------------------------- */
.bt{margin-top:13px;padding:9px 15px;border:1px solid var(--trait);border-radius:8px;
  background:var(--papier);color:var(--encre);font:inherit;font-size:13.5px;cursor:pointer}
.bt:hover{border-color:var(--accent);color:var(--accent)}
.bt-fort{background:var(--accent);border-color:var(--accent);color:var(--carte);font-weight:600;
  padding:11px 24px;font-size:14px}
.bt-fort:hover{opacity:.88;color:var(--carte)}
.bt-fort[disabled]{opacity:.45;cursor:not-allowed;filter:none}
.porte-carte .bt-fort{width:100%;margin-top:19px}
.agir{grid-column:1/-1;display:flex;align-items:center;gap:14px}

/* --- le choix d'artiste --------------------------------------------- */
.trouves{list-style:none;margin:12px 0 0;padding:0;border:1px solid var(--trait);border-radius:10px;
  overflow:hidden}
.trouves li+li{border-top:1px solid var(--trait)}
.res{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:0;
  background:none;color:var(--encre);font:inherit;text-align:left;cursor:pointer}
.res:hover{background:var(--accent-pale)}
.res img{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--trait);flex:none}
.res b{display:block;font-size:14px;font-weight:560}
.res i{display:block;font-style:normal;color:var(--doux);font-size:12px}
.choisi{margin:0 0 4px;padding:10px 12px;background:var(--accent-pale);border-radius:9px}
.choisi b{font-size:15px}
.choisi span{display:block;color:var(--doux);font-size:12.5px}

/* --- les clés ------------------------------------------------------- */
.cles{display:flex;gap:17px;flex-wrap:wrap;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--trait)}
.cles div{font-size:11.5px;color:var(--doux)}
.cles b{display:block;font-size:17px;color:var(--encre);font-weight:600;
  font-variant-numeric:tabular-nums}

/* --- le résultat ---------------------------------------------------- */
.sortie{margin-top:20px;padding:20px;background:var(--carte);border:1px solid var(--trait);
  border-radius:12px;box-shadow:var(--relief)}
.etiquette{margin:0;color:var(--doux);font-size:11.5px;text-transform:uppercase;letter-spacing:.09em}
.chiffre{margin:5px 0 0;font:640 40px/1.1 Georgia,"Times New Roman",serif;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}

.tableau{width:100%;border-collapse:collapse;margin-top:18px;font-size:13.5px}
.tableau th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--doux);font-weight:600;padding:0 9px 8px;border-bottom:1px solid var(--trait)}
.tableau td{padding:11px 9px;border-bottom:1px solid var(--trait);vertical-align:top}
.tableau .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.formule{display:block;margin-top:3px;color:var(--doux);font-size:11.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

details{margin-top:16px}
summary{cursor:pointer;color:var(--doux);font-size:13px}
.mini{width:100%;border-collapse:collapse;margin-top:10px;font-size:12.5px}
.mini th{text-align:left;color:var(--doux);font-weight:600;padding:4px 8px;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.06em}
.mini td{padding:4px 8px;border-top:1px solid var(--trait)}
.mini .n{text-align:right;font-variant-numeric:tabular-nums}

/* --- les pastilles de fiabilité, et les mots ------------------------ */
.pastille{display:inline-block;font-size:10.5px;padding:2px 7px;border-radius:20px;
  border:1px solid currentColor;font-weight:600;white-space:nowrap}
.p-bonne{color:var(--ok)} .p-moyenne{color:var(--moyen)} .p-faible{color:var(--faible)}

.mot{margin:0 0 16px;padding:10px 12px;border-radius:8px;font-size:13px}
.mot-err{background:#fdeaea;color:#8a2f2f;border:1px solid #f3caca}
@media(prefers-color-scheme:dark){.mot-err{background:#3a2222;color:#f0b4b4;border-color:#5a3333}}

/* ---------------------------------------------------------------------
   Le questionnaire, l'historique, le résultat — ajoutés le 14 septembre 2026
   quand Sillon est passé d'un écran unique à un parcours en trois temps.
   --------------------------------------------------------------------- */

.nav{display:flex;gap:16px;margin-left:18px;padding-left:18px;border-left:1px solid var(--trait)}
.nav a{color:var(--doux);text-decoration:none;font-size:13.5px}
.nav a:hover{color:var(--encre)}
.nav a.ici{color:var(--encre);font-weight:600}
.dates{margin-left:auto;display:flex;gap:24px}
.dates div{font-size:10.5px;color:var(--doux);text-align:right;line-height:1.35}
.dates b{display:block;color:var(--encre);font-weight:600;font-size:13px}
.tete-in .lien-doux{margin-left:18px}

.titre-ecran{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.titre-ecran h1{font-size:21px;margin:0;letter-spacing:-.015em}
.titre-ecran .bt{margin-left:auto;margin-top:0}
.fil{color:var(--doux);font-size:12.5px;margin-bottom:14px}
.fil a{color:var(--doux)} .fil span{margin:0 5px;opacity:.5}

.bloc{background:var(--carte);border:1px solid var(--trait);border-radius:12px;
  padding:17px 18px 19px;box-shadow:var(--relief);margin-bottom:14px}
.bloc h2{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--doux);
  margin:0 0 4px;font-weight:600}
.bloc .source{margin:0 0 9px;font-size:11px;color:var(--doux);opacity:.8}
.bloc.replie{display:none}

.rang{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.rang .champ{flex:1 1 190px;min-width:0;margin-top:0}
.rang .champ.grand{flex:2 1 300px} .rang .champ.petit{flex:0 0 110px}
.rang .bt{flex:none;align-self:flex-end;margin-top:0}
.champ .src{font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--faible);border:1px solid currentColor;border-radius:20px;padding:1px 6px;margin-left:5px}
select{width:100%;padding:9px 11px;border:1px solid var(--trait);border-radius:8px;
  background:var(--papier);color:var(--encre);font:inherit;font-size:14px}
.case{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--encre);cursor:pointer;
  padding-top:22px}
.aide{color:var(--doux);font-size:11.5px;line-height:1.5;margin:5px 0 0}
.aide b{color:var(--encre)}

.cocher{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px;margin-top:11px}
.fam{display:block;padding:11px 13px;border:1px solid var(--trait);border-radius:9px;cursor:pointer;
  background:var(--papier)}
.fam:hover{border-color:var(--accent)}
.fam.on{border-color:var(--accent);background:var(--accent-pale)}
.fam input{margin-right:7px}
.fam b{font-size:13.5px;font-weight:560}
.fam i{display:block;font-style:normal;color:var(--doux);font-size:11.5px;margin-top:2px;margin-left:21px}
.deduites{margin-top:13px}
.deduites p{color:var(--doux);font-size:12px;line-height:1.55;margin:8px 0 0}
.deduites p b{color:var(--encre)}
.artiste{margin-bottom:12px}

.tuiles{display:flex;gap:26px;flex-wrap:wrap;margin:14px 0 4px;padding-bottom:16px;
  border-bottom:1px solid var(--trait)}
.tuiles div{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--doux)}
.tuiles b{display:block;font:600 15px/1.4 ui-sans-serif;color:var(--encre);text-transform:none;
  letter-spacing:0;font-variant-numeric:tabular-nums}
.sortie h3{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--doux);
  margin:26px 0 4px;font-weight:600}
.origine{display:block;color:var(--doux);font-size:10.5px;margin-top:4px;max-width:26ch;line-height:1.4}
.doux{color:var(--doux)}
.pied{margin-top:22px;padding-top:14px;border-top:1px solid var(--trait);
  color:var(--doux);font-size:11.5px;line-height:1.65}
.pied b{color:var(--encre)}

.renommer{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.renommer input[type=text]{flex:1 1 240px;max-width:400px}
.renommer .bt{margin-top:0}
.separe{flex:1}
.bt-danger:hover{border-color:var(--faible);color:var(--faible)}

.liste td{vertical-align:middle}
.liste .lien{color:var(--encre);font-weight:560;text-decoration:none}
.liste .lien:hover{color:var(--accent)}
.actions{text-align:right;white-space:nowrap}
.actions a,.actions button{color:var(--doux);font:inherit;font-size:11.5px;background:none;
  border:0;cursor:pointer;text-decoration:none;padding:2px 5px}
.actions a:hover,.actions button:hover{color:var(--accent)}
.actions .danger:hover{color:var(--faible)}
.enligne{display:inline}
.vide{color:var(--doux);padding:34px 0;text-align:center}