/* La feuille des pages publiques : statut et support, aux couleurs du fournisseur. L'échelle est dans :root ; le thème
   suit celui du système. Les couleurs sont celles d'Ironlane, `smi-pilotage/app/styles/foundation.css` (clair) et
   `sombre.css` (sombre) : un changement là-bas se reporte ici. */

:root {
  color-scheme: light dark;

  --p-fond: #faf9fb;
  --p-surface: #fff;
  --p-encre: #2b2233;
  --p-texte: #3e3446;
  --p-doux: #71637e;
  --p-ligne: #e0dce5;
  --p-accent: #7553ff;
  --p-accent-pale: #f1effd;
  --p-sur-accent: #fff;
  --p-vide: #c9c3cf;

  --p-bon: #1b7350;
  --p-barre-bon: #2fa36b;
  --p-mineur: #d8a020;
  --p-partiel: #e07a1f;
  --p-majeur: #c8372d;
  --p-maintenance: #3f83c7;

  --p-text-xs: 12px;
  --p-text-sm: 14px;
  --p-text-base: 16px;
  --p-text-lg: 18px;
  --p-text-xl: 22px;
  --p-text-2xl: 30px;

  --p-pas: 4px;
  --p-rayon: 8px;
  --p-rayon-grand: 12px;
  --p-rond: 999px;
  --p-trait: 1px;
  --p-barre: 34px;
  --p-logo: 30px;
  --p-pastille: 12px;
  --p-cible: 44px;

  --p-largeur: 920px;
  --p-largeur-texte: 640px;
  --p-largeur-carte: 460px;
  --p-largeur-piece: 420px;

  --p-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --p-fond: #141417;
    --p-surface: #1c1c21;
    --p-encre: #f2f2f5;
    --p-texte: #d4d4da;
    --p-doux: #a0a0aa;
    --p-ligne: #303037;
    --p-accent: #a995ff;
    --p-accent-pale: #2a2545;
    --p-sur-accent: #141417;
    --p-vide: #54545c;
    --p-bon: #4cc38a;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--p-fond);
  color: var(--p-texte);
  font: var(--p-text-base) / 1.55 var(--p-sans);
}
a {
  color: var(--p-accent);
}
h1,
h2,
h3 {
  color: var(--p-encre);
  line-height: 1.25;
}
h1 {
  margin: calc(2 * var(--p-pas)) 0 calc(3 * var(--p-pas));
  font-size: var(--p-text-2xl);
}
h2 {
  margin: calc(10 * var(--p-pas)) 0 calc(4 * var(--p-pas));
  font-size: var(--p-text-xl);
}
h3 {
  margin: 0 0 calc(2 * var(--p-pas));
  font-size: var(--p-text-lg);
}
p {
  margin: 0 0 calc(3 * var(--p-pas));
}
input,
textarea,
button {
  font: inherit;
}
input,
textarea {
  width: 100%;
  padding: calc(2.5 * var(--p-pas)) calc(3 * var(--p-pas));
  border: var(--p-trait) solid var(--p-ligne);
  border-radius: var(--p-rayon);
  background: var(--p-surface);
  color: var(--p-encre);
}
input:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--p-accent);
  outline-offset: 2px;
}
textarea {
  resize: vertical;
}
label {
  color: var(--p-encre);
  font-weight: 600;
}

.p-cadre {
  width: 100%;
  max-width: var(--p-largeur);
  margin-inline: auto;
  padding-inline: calc(4 * var(--p-pas));
}
main.p-cadre {
  padding-block: calc(8 * var(--p-pas)) calc(16 * var(--p-pas));
}
.p-doux {
  color: var(--p-doux);
  font-size: var(--p-text-sm);
}
.p-masque {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* L'en-tête */

.p-tete {
  background: var(--p-surface);
  border-bottom: var(--p-trait) solid var(--p-ligne);
}
.p-tete-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(3 * var(--p-pas)) calc(6 * var(--p-pas));
  min-height: calc(16 * var(--p-pas));
  padding-block: calc(3 * var(--p-pas));
}
.p-marque {
  display: flex;
  align-items: center;
  gap: calc(2.5 * var(--p-pas));
  color: var(--p-encre);
  font-size: var(--p-text-lg);
  font-weight: 700;
  text-decoration: none;
}
.p-marque svg {
  width: var(--p-logo);
  height: var(--p-logo);
}
.p-lieu {
  color: var(--p-doux);
  font-weight: 400;
}
.p-onglets {
  display: flex;
  flex-wrap: wrap;
  gap: calc(5 * var(--p-pas));
  margin-left: auto;
}
.p-onglets a {
  color: var(--p-texte);
  font-size: var(--p-text-sm);
  text-decoration: none;
}
.p-onglets a:hover,
.p-onglets a.actif {
  color: var(--p-accent);
}
.p-onglets a.actif {
  font-weight: 600;
}
.p-compte summary {
  cursor: pointer;
  color: var(--p-doux);
  font-size: var(--p-text-sm);
}
.p-compte[open] > div {
  margin-top: calc(2 * var(--p-pas));
}
.p-pied {
  padding-block: calc(8 * var(--p-pas));
  border-top: var(--p-trait) solid var(--p-ligne);
  color: var(--p-doux);
  font-size: var(--p-text-sm);
}

/* Boutons et formulaires */

.p-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(10 * var(--p-pas));
  padding: calc(2 * var(--p-pas)) calc(4.5 * var(--p-pas));
  border: var(--p-trait) solid var(--p-accent);
  border-radius: var(--p-rayon);
  background: var(--p-accent);
  color: var(--p-sur-accent);
  font-size: var(--p-text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.p-bouton:hover {
  filter: brightness(1.08);
}
.p-bouton.discret {
  background: transparent;
  color: var(--p-accent);
}
.p-lien {
  padding: 0;
  border: 0;
  background: none;
  color: var(--p-accent);
  font-size: var(--p-text-sm);
  text-decoration: underline;
  cursor: pointer;
}
.p-plus {
  font-size: var(--p-text-sm);
  font-weight: 600;
}
.p-formulaire {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--p-pas));
}
.p-formulaire label + p {
  margin: 0;
}
.p-ligne-de-champ {
  display: flex;
  gap: calc(2 * var(--p-pas));
}
.p-gestes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(3 * var(--p-pas));
  margin-top: calc(2 * var(--p-pas));
}
.p-gestes .p-bouton:last-child {
  margin-left: auto;
}
.p-fichier {
  cursor: pointer;
}
.p-genres {
  display: flex;
  flex-wrap: wrap;
  gap: calc(2 * var(--p-pas));
  margin: 0 0 calc(2 * var(--p-pas));
  padding: 0;
  border: 0;
}
.p-genres legend {
  margin-bottom: calc(2 * var(--p-pas));
  color: var(--p-encre);
  font-weight: 600;
}
.p-genre input {
  position: absolute;
  opacity: 0;
}
.p-genre span {
  display: inline-block;
  padding: calc(2 * var(--p-pas)) calc(4 * var(--p-pas));
  border: var(--p-trait) solid var(--p-ligne);
  border-radius: var(--p-rond);
  cursor: pointer;
  font-weight: 500;
}
.p-genre input:checked + span {
  border-color: var(--p-accent);
  background: var(--p-accent-pale);
  color: var(--p-accent);
}
.p-genre input:focus-visible + span {
  outline: 2px solid var(--p-accent);
}
.p-annonce {
  padding: calc(3 * var(--p-pas));
  border-radius: var(--p-rayon);
  background: var(--p-accent-pale);
  color: var(--p-encre);
}
.p-refus {
  color: var(--p-majeur);
  font-weight: 600;
}

/* Cartes */

.p-carte {
  display: block;
  margin-bottom: calc(4 * var(--p-pas));
  padding: calc(5 * var(--p-pas));
  border: var(--p-trait) solid var(--p-ligne);
  border-radius: var(--p-rayon-grand);
  background: var(--p-surface);
}
.p-seule {
  max-width: var(--p-largeur-carte);
  margin: calc(6 * var(--p-pas)) auto;
}
.p-titre-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(3 * var(--p-pas));
}
.p-article {
  max-width: 100%;
}
.p-article p,
.p-article li {
  max-width: var(--p-largeur-texte);
}

/* La page de statut */

.p-bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(2 * var(--p-pas)) calc(3 * var(--p-pas));
  margin-bottom: calc(6 * var(--p-pas));
  padding: calc(5 * var(--p-pas)) calc(6 * var(--p-pas));
  border-radius: var(--p-rayon-grand);
  background: var(--p-barre-bon);
  color: #fff;
}
.p-bandeau h1 {
  flex: 1;
  margin: 0;
  color: inherit;
  font-size: var(--p-text-xl);
}
.p-bandeau .p-doux {
  color: inherit;
  opacity: 0.85;
}
.p-bandeau .p-pastille {
  background: #fff;
}
.p-bandeau.maintenance {
  background: var(--p-maintenance);
}
.p-bandeau.mineur {
  background: var(--p-mineur);
}
.p-bandeau.partiel {
  background: var(--p-partiel);
}
.p-bandeau.majeur {
  background: var(--p-majeur);
}
.p-pastille {
  flex: none;
  width: var(--p-pastille);
  height: var(--p-pastille);
  border-radius: var(--p-rond);
  background: var(--p-barre-bon);
}
.p-services {
  padding: 0;
}
.p-service {
  padding: calc(5 * var(--p-pas));
  border-top: var(--p-trait) solid var(--p-ligne);
}
.p-service:first-child {
  border-top: 0;
}
.p-service-tete {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--p-pas));
  margin-bottom: calc(3 * var(--p-pas));
  color: var(--p-encre);
}
.p-aide {
  display: inline-grid;
  place-items: center;
  width: calc(4.5 * var(--p-pas));
  height: calc(4.5 * var(--p-pas));
  border: var(--p-trait) solid var(--p-ligne);
  border-radius: var(--p-rond);
  color: var(--p-doux);
  font-size: var(--p-text-xs);
  cursor: help;
}
.p-niveau {
  margin-left: auto;
  color: var(--p-bon);
  font-size: var(--p-text-sm);
  font-weight: 600;
}
.p-niveau.maintenance {
  color: var(--p-maintenance);
}
.p-niveau.mineur {
  color: var(--p-mineur);
}
.p-niveau.partiel {
  color: var(--p-partiel);
}
.p-niveau.majeur {
  color: var(--p-majeur);
}
.p-barres {
  display: flex;
  gap: 2px;
  height: var(--p-barre);
}
.p-barres i {
  flex: 1;
  min-width: 1px;
  border-radius: 2px;
  background: var(--p-barre-bon);
}
.p-barres i:hover {
  opacity: 0.7;
}
.p-barres .vide {
  background: var(--p-vide);
}
.p-barres .maintenance {
  background: var(--p-maintenance);
}
.p-barres .mineur {
  background: var(--p-mineur);
}
.p-barres .partiel {
  background: var(--p-partiel);
}
.p-barres .majeur {
  background: var(--p-majeur);
}
.p-echelle {
  display: flex;
  justify-content: space-between;
  gap: calc(2 * var(--p-pas));
  margin-top: calc(2 * var(--p-pas));
  color: var(--p-doux);
  font-size: var(--p-text-xs);
}
.p-incident {
  margin-bottom: calc(4 * var(--p-pas));
  padding: calc(5 * var(--p-pas));
  border: var(--p-trait) solid var(--p-ligne);
  border-left: 4px solid var(--p-partiel);
  border-radius: var(--p-rayon-grand);
  background: var(--p-surface);
}
.p-incident.maintenance {
  border-left-color: var(--p-maintenance);
}
.p-incident.mineur {
  border-left-color: var(--p-mineur);
}
.p-incident.majeur {
  border-left-color: var(--p-majeur);
}
.p-incident h3 a {
  color: var(--p-encre);
}
.p-maj {
  margin-top: calc(3 * var(--p-pas));
  white-space: pre-line;
}
.p-maj b {
  color: var(--p-encre);
}
.p-jour {
  padding-block: calc(4 * var(--p-pas));
  border-bottom: var(--p-trait) solid var(--p-ligne);
}
.p-jour h3 {
  font-size: var(--p-text-base);
}
.p-jour .p-incident {
  margin: calc(2 * var(--p-pas)) 0 0;
}
.p-jour p {
  margin: 0;
}
.p-mois {
  text-transform: capitalize;
}
.p-histoire {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--p-pas) calc(3 * var(--p-pas));
  padding-block: calc(3 * var(--p-pas));
  border-top: var(--p-trait) solid var(--p-ligne);
}
.p-histoire:first-child {
  border-top: 0;
}
.p-histoire .p-doux {
  flex-basis: 100%;
}
.p-histoire a {
  color: var(--p-encre);
}
.p-abonner {
  margin-top: calc(10 * var(--p-pas));
}

/* Le support */

.p-accueil {
  padding: calc(8 * var(--p-pas)) 0 calc(6 * var(--p-pas));
  text-align: center;
}
.p-recherche {
  display: flex;
  gap: calc(2 * var(--p-pas));
  max-width: var(--p-largeur-texte);
  margin: calc(4 * var(--p-pas)) auto 0;
}
.p-statut-court {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--p-pas));
  width: fit-content;
  margin: 0 auto calc(6 * var(--p-pas));
  color: var(--p-texte);
  font-size: var(--p-text-sm);
  text-decoration: none;
}
.p-statut-court.maintenance .p-pastille {
  background: var(--p-maintenance);
}
.p-statut-court.mineur .p-pastille {
  background: var(--p-mineur);
}
.p-statut-court.partiel .p-pastille {
  background: var(--p-partiel);
}
.p-statut-court.majeur .p-pastille {
  background: var(--p-majeur);
}
.p-trois {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(4 * var(--p-pas));
}
.p-action {
  display: flex;
  flex-direction: column;
  gap: calc(1.5 * var(--p-pas));
  margin: 0;
  color: var(--p-encre);
  text-decoration: none;
}
.p-action:hover {
  border-color: var(--p-accent);
}
.p-action b {
  font-size: var(--p-text-lg);
}
.p-rubrique ul {
  margin: 0;
  padding-left: calc(5 * var(--p-pas));
}
.p-rubrique li {
  margin-block: calc(1.5 * var(--p-pas));
}
.p-liste {
  padding: 0;
}
.p-demande {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: calc(4 * var(--p-pas));
  padding: calc(4 * var(--p-pas)) calc(5 * var(--p-pas));
  border-top: var(--p-trait) solid var(--p-ligne);
  color: var(--p-encre);
  text-decoration: none;
}
.p-demande:first-child {
  border-top: 0;
}
.p-demande:hover {
  background: var(--p-accent-pale);
}
.p-num {
  color: var(--p-doux);
  font-size: var(--p-text-sm);
}
.p-sujet {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-weight: 600;
}
.p-sujet .p-doux {
  font-weight: 400;
}
.p-etat {
  display: inline-block;
  padding: var(--p-pas) calc(3 * var(--p-pas));
  border-radius: var(--p-rond);
  background: var(--p-accent-pale);
  color: var(--p-accent);
  font-size: var(--p-text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.p-etat.attente {
  background: color-mix(in srgb, var(--p-mineur) 18%, transparent);
  color: var(--p-encre);
}
.p-etat.bon {
  background: color-mix(in srgb, var(--p-bon) 16%, transparent);
  color: var(--p-bon);
}
.p-etat.fini {
  background: var(--p-ligne);
  color: var(--p-doux);
}
.p-fil {
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--p-pas));
  margin-block: calc(6 * var(--p-pas));
}
.p-message {
  max-width: 88%;
  padding: calc(4 * var(--p-pas));
  border: var(--p-trait) solid var(--p-ligne);
  border-radius: var(--p-rayon-grand);
  background: var(--p-surface);
}
.p-message.equipe {
  align-self: flex-end;
  background: var(--p-accent-pale);
}
.p-message.interne {
  border-style: dashed;
  background: color-mix(in srgb, var(--p-mineur) 12%, var(--p-surface));
}
.p-message-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(2 * var(--p-pas));
  margin-bottom: calc(1.5 * var(--p-pas));
  color: var(--p-encre);
}
.p-etiquette {
  padding: 0 calc(2 * var(--p-pas));
  border-radius: var(--p-rond);
  background: var(--p-mineur);
  color: #fff;
  font-size: var(--p-text-xs);
}
.p-texte {
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.p-piece {
  display: block;
  max-width: min(100%, var(--p-largeur-piece));
  margin-top: calc(3 * var(--p-pas));
  border: var(--p-trait) solid var(--p-ligne);
  border-radius: var(--p-rayon);
}
.p-colonnes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(4 * var(--p-pas));
  align-items: start;
}
.p-colonne h2 {
  margin-top: 0;
  font-size: var(--p-text-lg);
}
.p-idee {
  display: flex;
  gap: calc(3 * var(--p-pas));
  margin-bottom: calc(3 * var(--p-pas));
  padding: calc(4 * var(--p-pas));
}
.p-idee a {
  color: var(--p-encre);
}
.p-idee .p-doux {
  display: block;
}
.p-livree {
  display: flex;
  flex-direction: column;
  gap: var(--p-pas);
  margin-bottom: calc(3 * var(--p-pas));
  padding: calc(4 * var(--p-pas));
  color: var(--p-encre);
  text-decoration: none;
}
.p-livree:hover {
  border-color: var(--p-accent);
}
.p-resume {
  margin: var(--p-pas) 0;
}
.p-idee-tete {
  display: flex;
  gap: calc(4 * var(--p-pas));
  align-items: flex-start;
}
.p-vote button {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: calc(12 * var(--p-pas));
  padding: calc(1.5 * var(--p-pas));
  border: var(--p-trait) solid var(--p-ligne);
  border-radius: var(--p-rayon);
  background: var(--p-surface);
  color: var(--p-doux);
  cursor: pointer;
  line-height: 1.2;
}
.p-vote button b {
  color: var(--p-encre);
}
.p-vote button:hover,
.p-vote button.vote {
  border-color: var(--p-accent);
  color: var(--p-accent);
}
.p-vote button.vote {
  background: var(--p-accent-pale);
}
.p-nouveaute h2 {
  margin: calc(1.5 * var(--p-pas)) 0 calc(3 * var(--p-pas));
}
.p-nouveaute h2 a {
  color: var(--p-encre);
}

/* La bulle d'aide, partagée avec Vigie : son style vit ici pour les pages publiques. */
.bulle-titre {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  max-width: 320px;
  padding: calc(2 * var(--p-pas)) calc(3 * var(--p-pas));
  border-radius: var(--p-rayon);
  background: var(--p-encre);
  color: var(--p-surface);
  font-size: var(--p-text-xs);
  white-space: pre-line;
  pointer-events: none;
}

@media (max-width: 760px) {
  .p-trois,
  .p-colonnes {
    grid-template-columns: minmax(0, 1fr);
  }
  .p-demande {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .p-num,
  .p-quand {
    display: none;
  }
  .p-onglets {
    order: 3;
    width: 100%;
    margin-left: 0;
  }
  .p-onglets a,
  .p-bouton {
    min-height: var(--p-cible);
    display: inline-flex;
    align-items: center;
  }
  .p-message {
    max-width: 100%;
  }
  h1 {
    font-size: var(--p-text-xl);
  }
}