/* Tableau de bord des campagnes de 42 Lausanne.
   Couleurs d'accent validées par le validateur de palette (dataviz) : #00999b sur fond clair,
   #19a5a7 sur fond sombre. Le turquoise de marque #00babc n'atteint que 2,34:1 sur blanc.
   Aucun style inline, la politique de sécurité l'interdit : hauteurs, largeurs et positions des
   graphiques passent par les classes h-, l-, b- et g- générées en fin de fichier. */

@font-face {
  font-family: "Jost";
  src: url("polices/jost-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --surface: #ffffff;
  --surface-2: #f6f6f4;
  --texte: #0b0b0b;
  --texte-2: #52514e;
  --ligne: #e6e5e1;
  --ligne-forte: #c9c8c2;
  --accent: #00999b;
  --accent-survol: #007577;
  --lavande: #e1e6ff;
  --lavande-texte: #1f2a6b;
  --alerte-fond: #fff0f7;
  --alerte-texte: #a50e58;
  --succes-fond: #e7fefe;
  --succes-texte: #00585a;
  --degrade: linear-gradient(90deg, #00babc 0%, #96a3eb 100%);
  --rayon: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --surface: #1a1a19;
    --surface-2: #232322;
    --texte: #f0efec;
    --texte-2: #c3c2b7;
    --ligne: #383835;
    --ligne-forte: #55554f;
    --accent: #19a5a7;
    --accent-survol: #4cc4c6;
    --lavande: #2b3060;
    --lavande-texte: #e1e6ff;
    --alerte-fond: #3a1426;
    --alerte-texte: #ffb3d6;
    --succes-fond: #0f3536;
    --succes-texte: #b9f4f4;
  }
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--surface);
  color: var(--texte);
  font-family: "Jost", "Futura", "Century Gothic", "Trebuchet MS", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
code { font-size: .9em; background: var(--surface-2); padding: 0 .25em; border-radius: 4px; }
h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.2; font-weight: 600; }
h2 { font-size: 1.3rem; font-weight: 600; }
h3 { font-size: 1.05rem; font-weight: 600; }

.conteneur { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.entete { border-bottom: 1px solid var(--ligne); position: relative; }
.entete::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--degrade); }
.entete-contenu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding-top: .9rem; padding-bottom: .9rem; }
.marque { display: flex; align-items: baseline; gap: .6rem; text-decoration: none; }
.marque-nom { font-weight: 700; font-size: 1.2rem; }
.marque-sous { color: var(--texte-2); }
.compte { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; font-size: .95rem; }
.compte-adresse { color: var(--texte-2); overflow-wrap: anywhere; }
.lien-nav { font-weight: 500; }
.bouton-discret { background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; color: inherit; }

main.conteneur { padding-top: 1.75rem; padding-bottom: 2.5rem; }
footer.pied { border-top: 1px solid var(--ligne); padding-top: 1rem; padding-bottom: 2rem; color: var(--texte-2); font-size: .9rem; }
.pied p + p { margin-top: .35rem; }

.titre-page { margin-bottom: 1.5rem; }
.titre-page h1 { margin: .35rem 0; }
.intro { color: var(--texte-2); max-width: 46rem; margin-top: .35rem; }
.discret { color: var(--texte-2); font-size: .92rem; }
.note { color: var(--texte-2); font-size: .88rem; margin-top: .9rem; max-width: 46rem; }
.fil { font-size: .95rem; margin-bottom: .75rem; }
.vide { color: var(--texte-2); padding: 1.5rem 0; }
.alerte { background: var(--alerte-fond); color: var(--alerte-texte); padding: .75rem 1rem; border-radius: 8px; margin: 1rem 0; }
.succes { background: var(--succes-fond); color: var(--succes-texte); padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }

.carte { display: block; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 1.25rem; }
.carte-etroite { max-width: 30rem; margin: 2rem auto; }
.carte-etroite h1 { font-size: 1.6rem; }
.formulaire { display: grid; gap: .6rem; margin-top: 1.25rem; }
.formulaire label { font-weight: 500; }
.formulaire input { width: 100%; padding: .7rem .8rem; border: 1px solid var(--ligne-forte); border-radius: 8px; background: var(--surface); }
.champ-code { font-size: 1.5rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.bouton { display: inline-block; background: var(--texte); color: var(--surface); border: 0; border-radius: 8px; padding: .75rem 1.2rem; font-weight: 600; cursor: pointer; text-decoration: none; margin-top: .4rem; }
.bouton:hover { opacity: .88; }
.carte-etroite .discret { margin-top: 1rem; }

.grille-cartes { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.carte-enquete { height: 100%; display: flex; flex-direction: column; gap: .6rem; text-decoration: none; transition: border-color .15s; }
.carte-enquete:hover { border-color: var(--ligne-forte); }
.carte-titre { font-weight: 600; font-size: 1.1rem; line-height: 1.3; }
.carte-chiffres { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; color: var(--texte-2); }
.chiffre { color: var(--texte); font-size: 1.4rem; font-weight: 600; }
.puces { display: flex; flex-wrap: wrap; gap: .4rem; }
.puce { display: inline-block; font-size: .8rem; font-weight: 500; padding: .1rem .55rem; border-radius: 999px; border: 1px solid var(--ligne-forte); color: var(--texte-2); }
.puce-inProgress { color: var(--texte); border-color: var(--texte-2); }
.puce-partagee { background: var(--lavande); color: var(--lavande-texte); border-color: transparent; }

.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.tuile { border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .2rem; }
.tuile-libelle { color: var(--texte-2); font-size: .95rem; }
.tuile-valeur { font-size: 2rem; font-weight: 600; line-height: 1.1; }
.tuile-heros .tuile-valeur { font-size: 3.25rem; }
.tuile-note { color: var(--texte-2); font-size: .85rem; }

.bloc { margin: 2rem 0; }
.bloc h2 { margin-bottom: .9rem; }
.bloc-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; }
.lien-discret { font-size: .92rem; color: var(--texte-2); }
.deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 2.5rem; }
.question { margin: 1.25rem 0 1.75rem; max-width: 46rem; }
.question .discret { margin: .2rem 0 .4rem; }

/* Colonnes par jour : une série, une teinte. */
.colonnes { margin-top: .5rem; }
.trace { display: grid; grid-template-columns: 2.75rem 1fr; height: 240px; padding-top: 1.6rem; }
.axe-y { position: relative; }
.graduation { position: absolute; right: .55rem; transform: translateY(50%); font-size: .8rem; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.zone { position: relative; border-bottom: 1px solid var(--ligne-forte); }
.grille { position: absolute; left: 0; right: 0; height: 1px; background: var(--ligne); }
.barres { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-around; gap: 2px; }
.colonnes-serree .barres { gap: 1px; }
.col { position: relative; flex: 1 1 0; max-width: 24px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; cursor: default; }
.barre { flex: none; width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; }
.colonnes-serree .barre { border-radius: 2px 2px 0 0; }
.pic { flex: none; font-size: .8rem; font-weight: 600; margin-bottom: .2rem; white-space: nowrap; }
.col:hover .barre { background: var(--accent-survol); }
.col:hover::after { content: attr(data-info); position: absolute; top: -1.6rem; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--texte); color: var(--surface); font-size: .8rem; padding: .15rem .5rem; border-radius: 4px; z-index: 3; pointer-events: none; }
.col-gauche:hover::after { left: 0; transform: none; }
.col-droite:hover::after { left: auto; right: 0; transform: none; }
.axe-x { position: relative; height: 1.6rem; margin-left: 2.75rem; }
.repere { position: absolute; top: .3rem; transform: translateX(-50%); white-space: nowrap; font-size: .8rem; color: var(--texte-2); }

.tableau { margin-top: 1rem; }
.tableau summary { cursor: pointer; color: var(--texte-2); font-size: .92rem; }
.tableau table { margin-top: .6rem; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
.tableau th, .tableau td { text-align: left; padding: .3rem 1.5rem .3rem 0; border-bottom: 1px solid var(--ligne); }
.tableau th { font-weight: 600; }

/* Répartitions : barres horizontales classées, longueur relative à la plus grande. */
.repartition { list-style: none; }
.repartition li { margin: .55rem 0; }
.repartition-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.repartition-libelle { overflow-wrap: anywhere; }
.repartition-nombre { white-space: nowrap; font-weight: 600; }
.repartition-nombre .discret { font-weight: 400; }
.piste { display: block; height: 10px; margin-top: .2rem; }
.barre-h { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; }

/* Partage */
.formulaire-partage { margin-bottom: 1.5rem; }
.liste-partage { list-style: none; margin-bottom: 1rem; }
.liste-partage li + li { border-top: 1px solid var(--ligne); }
.case { display: flex; gap: .85rem; align-items: flex-start; padding: .75rem 0; cursor: pointer; }
.case input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--accent); flex: none; }
.case-texte { display: flex; flex-direction: column; }
.case-titre { font-weight: 500; }

@media (forced-colors: active) {
  .barre, .barre-h { background: CanvasText; forced-color-adjust: none; }
}
@media (max-width: 520px) {
  .trace { height: 200px; grid-template-columns: 2.25rem 1fr; }
  .axe-x { margin-left: 2.25rem; }
  .tuile-heros .tuile-valeur { font-size: 2.75rem; }
}

.h-0{height:0%} .h-1{height:1%} .h-2{height:2%} .h-3{height:3%} .h-4{height:4%} .h-5{height:5%} .h-6{height:6%} .h-7{height:7%} .h-8{height:8%} .h-9{height:9%} .h-10{height:10%} .h-11{height:11%} .h-12{height:12%} .h-13{height:13%} .h-14{height:14%} .h-15{height:15%} .h-16{height:16%} .h-17{height:17%} .h-18{height:18%} .h-19{height:19%} .h-20{height:20%} .h-21{height:21%} .h-22{height:22%} .h-23{height:23%} .h-24{height:24%} .h-25{height:25%} .h-26{height:26%} .h-27{height:27%} .h-28{height:28%} .h-29{height:29%} .h-30{height:30%} .h-31{height:31%} .h-32{height:32%} .h-33{height:33%} .h-34{height:34%} .h-35{height:35%} .h-36{height:36%} .h-37{height:37%} .h-38{height:38%} .h-39{height:39%} .h-40{height:40%} .h-41{height:41%} .h-42{height:42%} .h-43{height:43%} .h-44{height:44%} .h-45{height:45%} .h-46{height:46%} .h-47{height:47%} .h-48{height:48%} .h-49{height:49%} .h-50{height:50%} .h-51{height:51%} .h-52{height:52%} .h-53{height:53%} .h-54{height:54%} .h-55{height:55%} .h-56{height:56%} .h-57{height:57%} .h-58{height:58%} .h-59{height:59%} .h-60{height:60%} .h-61{height:61%} .h-62{height:62%} .h-63{height:63%} .h-64{height:64%} .h-65{height:65%} .h-66{height:66%} .h-67{height:67%} .h-68{height:68%} .h-69{height:69%} .h-70{height:70%} .h-71{height:71%} .h-72{height:72%} .h-73{height:73%} .h-74{height:74%} .h-75{height:75%} .h-76{height:76%} .h-77{height:77%} .h-78{height:78%} .h-79{height:79%} .h-80{height:80%} .h-81{height:81%} .h-82{height:82%} .h-83{height:83%} .h-84{height:84%} .h-85{height:85%} .h-86{height:86%} .h-87{height:87%} .h-88{height:88%} .h-89{height:89%} .h-90{height:90%} .h-91{height:91%} .h-92{height:92%} .h-93{height:93%} .h-94{height:94%} .h-95{height:95%} .h-96{height:96%} .h-97{height:97%} .h-98{height:98%} .h-99{height:99%} .h-100{height:100%}
.l-0{width:0%} .l-1{width:1%} .l-2{width:2%} .l-3{width:3%} .l-4{width:4%} .l-5{width:5%} .l-6{width:6%} .l-7{width:7%} .l-8{width:8%} .l-9{width:9%} .l-10{width:10%} .l-11{width:11%} .l-12{width:12%} .l-13{width:13%} .l-14{width:14%} .l-15{width:15%} .l-16{width:16%} .l-17{width:17%} .l-18{width:18%} .l-19{width:19%} .l-20{width:20%} .l-21{width:21%} .l-22{width:22%} .l-23{width:23%} .l-24{width:24%} .l-25{width:25%} .l-26{width:26%} .l-27{width:27%} .l-28{width:28%} .l-29{width:29%} .l-30{width:30%} .l-31{width:31%} .l-32{width:32%} .l-33{width:33%} .l-34{width:34%} .l-35{width:35%} .l-36{width:36%} .l-37{width:37%} .l-38{width:38%} .l-39{width:39%} .l-40{width:40%} .l-41{width:41%} .l-42{width:42%} .l-43{width:43%} .l-44{width:44%} .l-45{width:45%} .l-46{width:46%} .l-47{width:47%} .l-48{width:48%} .l-49{width:49%} .l-50{width:50%} .l-51{width:51%} .l-52{width:52%} .l-53{width:53%} .l-54{width:54%} .l-55{width:55%} .l-56{width:56%} .l-57{width:57%} .l-58{width:58%} .l-59{width:59%} .l-60{width:60%} .l-61{width:61%} .l-62{width:62%} .l-63{width:63%} .l-64{width:64%} .l-65{width:65%} .l-66{width:66%} .l-67{width:67%} .l-68{width:68%} .l-69{width:69%} .l-70{width:70%} .l-71{width:71%} .l-72{width:72%} .l-73{width:73%} .l-74{width:74%} .l-75{width:75%} .l-76{width:76%} .l-77{width:77%} .l-78{width:78%} .l-79{width:79%} .l-80{width:80%} .l-81{width:81%} .l-82{width:82%} .l-83{width:83%} .l-84{width:84%} .l-85{width:85%} .l-86{width:86%} .l-87{width:87%} .l-88{width:88%} .l-89{width:89%} .l-90{width:90%} .l-91{width:91%} .l-92{width:92%} .l-93{width:93%} .l-94{width:94%} .l-95{width:95%} .l-96{width:96%} .l-97{width:97%} .l-98{width:98%} .l-99{width:99%} .l-100{width:100%}
.b-0{bottom:0%} .b-1{bottom:1%} .b-2{bottom:2%} .b-3{bottom:3%} .b-4{bottom:4%} .b-5{bottom:5%} .b-6{bottom:6%} .b-7{bottom:7%} .b-8{bottom:8%} .b-9{bottom:9%} .b-10{bottom:10%} .b-11{bottom:11%} .b-12{bottom:12%} .b-13{bottom:13%} .b-14{bottom:14%} .b-15{bottom:15%} .b-16{bottom:16%} .b-17{bottom:17%} .b-18{bottom:18%} .b-19{bottom:19%} .b-20{bottom:20%} .b-21{bottom:21%} .b-22{bottom:22%} .b-23{bottom:23%} .b-24{bottom:24%} .b-25{bottom:25%} .b-26{bottom:26%} .b-27{bottom:27%} .b-28{bottom:28%} .b-29{bottom:29%} .b-30{bottom:30%} .b-31{bottom:31%} .b-32{bottom:32%} .b-33{bottom:33%} .b-34{bottom:34%} .b-35{bottom:35%} .b-36{bottom:36%} .b-37{bottom:37%} .b-38{bottom:38%} .b-39{bottom:39%} .b-40{bottom:40%} .b-41{bottom:41%} .b-42{bottom:42%} .b-43{bottom:43%} .b-44{bottom:44%} .b-45{bottom:45%} .b-46{bottom:46%} .b-47{bottom:47%} .b-48{bottom:48%} .b-49{bottom:49%} .b-50{bottom:50%} .b-51{bottom:51%} .b-52{bottom:52%} .b-53{bottom:53%} .b-54{bottom:54%} .b-55{bottom:55%} .b-56{bottom:56%} .b-57{bottom:57%} .b-58{bottom:58%} .b-59{bottom:59%} .b-60{bottom:60%} .b-61{bottom:61%} .b-62{bottom:62%} .b-63{bottom:63%} .b-64{bottom:64%} .b-65{bottom:65%} .b-66{bottom:66%} .b-67{bottom:67%} .b-68{bottom:68%} .b-69{bottom:69%} .b-70{bottom:70%} .b-71{bottom:71%} .b-72{bottom:72%} .b-73{bottom:73%} .b-74{bottom:74%} .b-75{bottom:75%} .b-76{bottom:76%} .b-77{bottom:77%} .b-78{bottom:78%} .b-79{bottom:79%} .b-80{bottom:80%} .b-81{bottom:81%} .b-82{bottom:82%} .b-83{bottom:83%} .b-84{bottom:84%} .b-85{bottom:85%} .b-86{bottom:86%} .b-87{bottom:87%} .b-88{bottom:88%} .b-89{bottom:89%} .b-90{bottom:90%} .b-91{bottom:91%} .b-92{bottom:92%} .b-93{bottom:93%} .b-94{bottom:94%} .b-95{bottom:95%} .b-96{bottom:96%} .b-97{bottom:97%} .b-98{bottom:98%} .b-99{bottom:99%} .b-100{bottom:100%}
.g-0{left:0%} .g-1{left:1%} .g-2{left:2%} .g-3{left:3%} .g-4{left:4%} .g-5{left:5%} .g-6{left:6%} .g-7{left:7%} .g-8{left:8%} .g-9{left:9%} .g-10{left:10%} .g-11{left:11%} .g-12{left:12%} .g-13{left:13%} .g-14{left:14%} .g-15{left:15%} .g-16{left:16%} .g-17{left:17%} .g-18{left:18%} .g-19{left:19%} .g-20{left:20%} .g-21{left:21%} .g-22{left:22%} .g-23{left:23%} .g-24{left:24%} .g-25{left:25%} .g-26{left:26%} .g-27{left:27%} .g-28{left:28%} .g-29{left:29%} .g-30{left:30%} .g-31{left:31%} .g-32{left:32%} .g-33{left:33%} .g-34{left:34%} .g-35{left:35%} .g-36{left:36%} .g-37{left:37%} .g-38{left:38%} .g-39{left:39%} .g-40{left:40%} .g-41{left:41%} .g-42{left:42%} .g-43{left:43%} .g-44{left:44%} .g-45{left:45%} .g-46{left:46%} .g-47{left:47%} .g-48{left:48%} .g-49{left:49%} .g-50{left:50%} .g-51{left:51%} .g-52{left:52%} .g-53{left:53%} .g-54{left:54%} .g-55{left:55%} .g-56{left:56%} .g-57{left:57%} .g-58{left:58%} .g-59{left:59%} .g-60{left:60%} .g-61{left:61%} .g-62{left:62%} .g-63{left:63%} .g-64{left:64%} .g-65{left:65%} .g-66{left:66%} .g-67{left:67%} .g-68{left:68%} .g-69{left:69%} .g-70{left:70%} .g-71{left:71%} .g-72{left:72%} .g-73{left:73%} .g-74{left:74%} .g-75{left:75%} .g-76{left:76%} .g-77{left:77%} .g-78{left:78%} .g-79{left:79%} .g-80{left:80%} .g-81{left:81%} .g-82{left:82%} .g-83{left:83%} .g-84{left:84%} .g-85{left:85%} .g-86{left:86%} .g-87{left:87%} .g-88{left:88%} .g-89{left:89%} .g-90{left:90%} .g-91{left:91%} .g-92{left:92%} .g-93{left:93%} .g-94{left:94%} .g-95{left:95%} .g-96{left:96%} .g-97{left:97%} .g-98{left:98%} .g-99{left:99%} .g-100{left:100%}