/*
Fichier : css_audience.css
Chemin  : D:\speedclicV2\www\assets\css\css_audience.css
Rôle    : LE COMPTEUR — bandeau à chiffres de la colonne de gauche, et sa modale publique.

          LE BANDEAU reprend la forme des compteurs mécaniques de l'époque, comme sur la
          maquette de Ramon : des cases, un chiffre par case, fond clair, caractères
          espacés.

          LA MODALE est large et AÉRÉE : quatre cartes, une courbe, quatre listes à
          jauges. Les listes sont en grille automatique — elles se rangent d'elles-mêmes
          en 1, 2 ou 4 colonnes selon la place, ce qui évite l'ascenseur sur un écran
          normal et donne une colonne unique lisible sur un téléphone.

          RIEN N'EST COLLÉ, RIEN N'EST CENTRÉ DE TRAVERS : les grands nombres sont
          centrés, les listes alignées à gauche, et tout respire.

Date : 01/08/2026
*/

/* ------------------------------------------------------- LE BANDEAU ------ */

.sc-compteur        { margin: 10px 0; cursor: pointer; user-select: none; }
.sc-compteur-boite  { display: flex; gap: 3px; justify-content: center;
                      background: #e8e8e8; border: 1px solid #cfcfcf; border-radius: 3px;
                      padding: 6px 8px; }
.sc-compteur-boite i{ font-style: normal; font-family: ui-monospace, Consolas, monospace;
                      font-size: 15px; font-weight: 700; color: #2b2b2b; width: 13px;
                      text-align: center; }
.sc-compteur:hover .sc-compteur-boite { background: #f2f2f2; }

/* --------------------------------------------------------- LA MODALE ----- */

.sc-cpt-modale      { position: fixed; inset: 0; background: rgba(0,0,0,.5);
                      display: flex; align-items: center; justify-content: center;
                      z-index: 9000; padding: 18px; }
.sc-cpt-boite       { background: #fff; border-radius: 10px; padding: 26px 30px 22px;
                      width: 100%; max-width: 980px; max-height: 88vh; overflow: auto;
                      box-shadow: 0 14px 50px rgba(0,0,0,.35); }
.sc-cpt-titre       { font-size: 17px; font-weight: 700; color: #13496a;
                      margin-bottom: 20px; text-align: center; }
.sc-cpt-attente     { text-align: center; color: #8a96a3; padding: 40px 0; }

/* Le grand nombre, au même dessin que le bandeau : c'est le même compteur. */
.sc-cpt-tete        { text-align: center; margin-bottom: 22px; }
.sc-cpt-odo         { display: inline-flex; gap: 4px; background: #e8e8e8;
                      border: 1px solid #cfcfcf; border-radius: 4px; padding: 9px 12px; }
.sc-cpt-odo i       { font-style: normal; font-family: ui-monospace, Consolas, monospace;
                      font-size: 26px; font-weight: 700; color: #2b2b2b; width: 21px;
                      text-align: center; }
.sc-cpt-sous        { margin-top: 9px; font-size: 12.5px; color: #7a8794; }

/* Les quatre cartes du haut. */
.sc-cpt-cartes      { display: grid; gap: 14px; margin-bottom: 24px;
                      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sc-cpt-carte       { border: 1px solid #e6ebf1; border-radius: 8px; padding: 14px 10px;
                      text-align: center; background: #fbfcfd; }
.sc-cpt-carte .sc-cpt-k { display: block; font-size: 11px; font-weight: 700; color: #7a8794;
                      text-transform: uppercase; letter-spacing: .05em; }
.sc-cpt-carte b     { display: block; margin-top: 8px; font-size: 30px; font-weight: 800;
                      color: #13496a; line-height: 1.1; }
.sc-cpt-carte em    { display: block; margin-top: 4px; font-size: 11.5px; color: #94a0ad;
                      font-style: normal; }

/* Un bloc : un titre, puis son contenu. */
.sc-cpt-bloc        { margin-bottom: 22px; }
.sc-cpt-t           { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; color: #7a8794;
                      text-transform: uppercase; letter-spacing: .05em; }
.sc-cpt-vide        { font-size: 12.5px; color: #a3aeba; padding: 6px 0; }

/* La courbe : des bâtons, une ligne de sol, et les dates en HTML sous le dessin. */
.sc-cpt-svg         { display: block; width: 100%; height: 110px; }
.sc-cpt-b           { fill: #13a8d8; }
.sc-cpt-b0          { fill: #e8eef3; }
.sc-cpt-axe         { stroke: #dde5ec; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sc-cpt-axe-l       { display: flex; justify-content: space-between; margin-top: 6px;
                      font-size: 11px; color: #94a0ad; }

/* Les listes à jauges, rangées d'elles-mêmes selon la place disponible. */
.sc-cpt-grille      { display: grid; gap: 10px 30px;
/* QUATRE LISTES, DONC DEUX COLONNES DE DEUX. En laissant la grille décider, on
   obtenait trois colonnes et un bloc seul sur la ligne du dessous — un trou au
   milieu de l'écran. Deux colonnes se remplissent toujours proprement. */
                      grid-template-columns: repeat(2, 1fr); }
.sc-cpt-l           { display: flex; align-items: center; gap: 10px; padding: 7px 0;
                      border-bottom: 1px solid #eef2f6; font-size: 13px; }
.sc-cpt-l .sc-cpt-n { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px;
                      color: #55606c; overflow: hidden; text-overflow: ellipsis;
                      white-space: nowrap; }
.sc-cpt-dr          { width: 18px; height: 13px; flex: 0 0 auto; border: 1px solid #e2e8ee;
                      border-radius: 2px; object-fit: cover; }
.sc-cpt-jauge       { flex: 0 0 84px; height: 7px; background: #eef2f6; border-radius: 4px;
                      overflow: hidden; }
.sc-cpt-jauge i     { display: block; height: 100%; background: #13a8d8; border-radius: 4px; }
.sc-cpt-l b         { flex: 0 0 auto; min-width: 52px; text-align: right; color: #1a2535; }

/* La promesse, écrite. Elle vaut un argument de vente. */
.sc-cpt-note        { margin-top: 22px; padding-top: 14px; border-top: 1px solid #eef2f6;
                      text-align: center; font-size: 11.5px; color: #94a0ad; }

.sc-cpt-pied        { margin-top: 20px; text-align: center; }
.sc-cpt-pied button { padding: 9px 24px; border: 0; border-radius: 4px; background: #6b7a8c;
                      color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.sc-cpt-pied button:hover { background: #57646f; }

/* ----------------------------------------------------- SUR TÉLÉPHONE ----- */

@media (max-width: 700px) {
    .sc-cpt-modale  { padding: 8px; }
    .sc-cpt-boite   { padding: 18px 16px 16px; max-height: 94vh; }
    .sc-cpt-odo i   { font-size: 20px; width: 16px; }
    .sc-cpt-cartes  { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .sc-cpt-carte b { font-size: 24px; }
    .sc-cpt-grille  { grid-template-columns: 1fr; gap: 4px; }
    .sc-cpt-svg     { height: 90px; }
}

/* === FIN DU FICHIER : css_audience.css === */