/* LA PAGE DU CONSEIL (Lionel, 07/10/2026) -- meme famille que le 2e cerveau : nuit bleue, or, verre depoli. */
:root { --cs-or: rgba(225,185,110,.92); --cs-or2: #f3d79b; --cs-or-doux: rgba(225,185,110,.35); --cs-texte: rgba(220,228,250,.92);
  --cs-gris: rgba(200,214,245,.6); --cs-bord: rgba(200,214,245,.13); --cs-vert: #4fd08a; --cs-rouge: #f06060; --cs-orange: #f0a35e; }
#cerveau-signe { border-radius: 0 !important; }   /* le conseil ferme la rangee : c'est lui qui a le bout arrondi */
#conseil-signe { position: fixed; top: 16px; left: 50%; z-index: 4; height: 46px; width: 30px; padding: 0;
  border: 1px solid var(--cs-or-doux); border-left: none; border-radius: 0 8px 8px 0; background: rgba(10,10,14,.92);
  color: var(--cs-or); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: .75; transition: opacity .2s, background .2s; }
#conseil-signe:hover, #conseil-signe[aria-expanded="true"] { opacity: 1; background: rgba(28,22,12,.95); }
#conseil-signe svg { width: 16px; height: 16px; }
#conseil-panneau { position: fixed; inset: 84px 3vw 3vh 3vw; z-index: 9; display: none; flex-direction: column;
  background: rgba(7,9,20,.96); border: 1px solid var(--cs-or-doux); border-radius: 14px; overflow: hidden; color: var(--cs-texte);
  box-shadow: 0 20px 70px rgba(0,0,0,.6), inset 0 0 80px rgba(80,90,160,.08); backdrop-filter: blur(14px);
  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
#conseil-panneau.ouvert { display: flex; animation: cs-naitre .28s ease-out; }
@keyframes cs-naitre { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.cs-tete-p { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid rgba(225,185,110,.14); }
.cs-titre { font: italic 700 19px Georgia, "Palatino Linotype", serif; letter-spacing: .04em; color: var(--cs-or); }
.cs-onglets { display: flex; gap: 6px; flex-wrap: wrap; }
.cs-og { font: inherit; font-size: 12.5px; padding: 4px 12px; border-radius: 16px; border: 1px solid var(--cs-bord); background: transparent; color: var(--cs-gris); cursor: pointer; }
.cs-og.on { background: #2a2360; border-color: #a493f0; color: var(--cs-texte); }
.cs-og b { font-size: 10.5px; background: #ffffff14; border-radius: 8px; padding: 0 6px; margin-left: 4px; }
.cs-dire { margin-left: auto; font-size: 12px; color: var(--cs-or2); }
.cs-fermer { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--cs-bord); background: transparent; color: var(--cs-texte); cursor: pointer; flex: none; }
.cs-corps { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(200px, 250px) 1fr minmax(230px, 290px); gap: 12px; padding: 12px; }
.cs-col { background: #0b1230; border: 1px solid var(--cs-bord); border-radius: 14px; padding: 12px; overflow: auto; position: relative; min-height: 0; }
.cs-col h4 { font-size: 11.5px; letter-spacing: .12em; color: #c9cff0; margin: 0 0 9px; font-weight: 600; }
.cs-dec { display: block; padding: 9px 30px 9px 10px; border: 1px solid var(--cs-bord); border-radius: 11px; margin-bottom: 7px; cursor: pointer; position: relative; }
.cs-dec.on { border-color: var(--cs-or); background: #15183c; }
.cs-dec-t { display: block; font-size: 12.3px; }
.cs-dec-q { display: flex; gap: 6px; align-items: center; margin-top: 4px; font-size: 11px; color: var(--cs-gris); flex-wrap: wrap; }
.cs-jeter { position: absolute; right: 6px; top: 6px; font-size: 12px; background: transparent; border: none; color: var(--cs-gris); cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.cs-arme { color: #fff !important; background: #b23a3a !important; font-size: 11px; }
.cs-vp { font-size: 10.5px; padding: 1px 8px; border-radius: 9px; font-weight: 600; white-space: nowrap; display: inline-block; }
.cs-oui { background: #4fd08a22; color: var(--cs-vert); border: 1px solid #4fd08a55; }
.cs-non { background: #f0606022; color: #ff8a8a; border: 1px solid #f0606055; }
.cs-part { background: #f0a35e22; color: var(--cs-orange); border: 1px solid #f0a35e55; }
.cs-sujet { font-size: 13px; padding: 9px 12px; border-left: 3px solid var(--cs-or); background: #ffffff06; border-radius: 6px; margin-bottom: 10px; cursor: pointer; }
.cs-sujet-t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cs-sujet.tout .cs-sujet-t { -webkit-line-clamp: unset; display: block; }
/* 07/11 : le bouton de retour n'existe que sur le telephone ; la raison d'un rangement automatique */
.cs-retour { display: none; }
.cs-rangee { font-size: 12px; color: var(--cs-orange); margin: 0 0 8px; }
.cs-tetes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.cs-tete { border: 1px solid var(--cs-bord); border-radius: 12px; padding: 9px; font-size: 11.6px; background: #0d1434; }
.cs-tete.contre { border-color: #f0606066; }
.cs-tn { font: italic 700 13px Georgia, serif; color: var(--cs-or2); margin-top: 5px; }
.cs-tc { font-size: 10px; color: var(--cs-gris); margin: 2px 0 4px; }
.cs-conf { display: flex; gap: 2px; margin: 4px 0; }
.cs-conf i { width: 10px; height: 4px; border-radius: 2px; background: #ffffff1a; }
.cs-conf i.p { background: var(--cs-or); }
.cs-tete ul { padding-left: 14px; margin: 4px 0 0; color: #cfd6f5; line-height: 1.38; }
.cs-tete li { margin-bottom: 4px; }
.cs-rq { margin-top: 6px; padding-top: 6px; border-top: 1px solid #ffffff10; color: #f0b98a; font-size: 11px; }
.cs-bloc { margin-top: 10px; border: 1px solid var(--cs-bord); border-radius: 12px; padding: 10px 12px; }
.cs-tl { display: grid; grid-template-columns: minmax(110px, 160px) auto 1fr; gap: 6px 10px; font-size: 12px; align-items: center; }
.cs-h { color: var(--cs-gris); font-size: 10.5px; letter-spacing: .1em; }
.cs-chg { color: var(--cs-or2); font-weight: 600; }
.cs-gris { color: var(--cs-gris); font-size: 11.5px; }
.cs-st { margin-top: 8px; }
.cs-p { font-size: 12px; margin: 0 0 6px; }
.cs-vide { color: var(--cs-gris); font-size: 12.5px; }
.cs-gros { font: italic 700 20px Georgia, serif; margin: 4px 0 6px; }
.cs-barv { display: flex; height: 10px; border-radius: 6px; overflow: hidden; margin: 8px 0 4px; background: #ffffff10; }
.cs-chif { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; }
.cs-chif div { border: 1px solid var(--cs-bord); border-radius: 10px; padding: 7px 8px; font-size: 11px; color: var(--cs-gris); }
.cs-chif b { display: block; font-size: 15px; color: var(--cs-texte); }
.cs-manque { margin: 4px 0 60px; padding-left: 16px; }
.cs-manque li { font-size: 11.6px; color: #cfd6f5; margin-bottom: 4px; }
.cs-act { display: flex; gap: 6px; position: sticky; bottom: 0; padding-top: 8px; background: #0b1230; }
.cs-b { flex: 1; font: inherit; font-size: 12px; padding: 8px 4px; border-radius: 9px; border: 1px solid var(--cs-bord); background: transparent; color: var(--cs-texte); cursor: pointer; }
.cs-go { background: var(--cs-or); color: #1a1205; border-color: var(--cs-or); font-weight: 700; }
.cs-cb { flex: 0 0 52px; color: #ff9d9d; border-color: #f0606055; }
@media (max-width: 640px) {
  /* 07/11 (Lionel) : la liste OU la fiche, jamais les deux l'une sous l'autre (il defilait tout en bas) */
  #conseil-panneau:not(.cs-fiche) .cs-milieu, #conseil-panneau:not(.cs-fiche) .cs-droite { display: none; }
  #conseil-panneau.cs-fiche .cs-liste { display: none; }
  .cs-retour { display: block; margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid #ffffff22;
    background: #ffffff0d; color: inherit; font: inherit; cursor: pointer; }
  html #conseil-signe { width: 28px; }
  #conseil-panneau { inset: 64px 6px 6px 6px; }
  .cs-tete-p { flex-wrap: wrap; gap: 8px; position: relative; padding-right: 50px; }
  .cs-fermer { position: absolute; right: 10px; top: 10px; }
  .cs-dire { width: 100%; margin-left: 0; order: 3; }
  .cs-corps { display: block; overflow: auto; }
  .cs-col { margin-bottom: 10px; overflow: visible; }
  .cs-tl { grid-template-columns: 1fr auto; }
  .cs-tl > span:nth-child(3n) { grid-column: 1 / -1; padding-bottom: 6px; border-bottom: 1px solid #ffffff0b; }
  .cs-tl .cs-h:nth-child(3) { display: none; }
}