/* statut.wintg.group : posé sur site.css (wintg.group) et doc.css (en-tête à 3 logos). */
:root { --ok: #16A34A; --lent: #E6A11E; --panne: #DC2626; --vide: #E7E0D6; }

.statut-bandeau { min-height: clamp(280px, 34vh, 400px); }
.statut-bandeau h1 { font-size: clamp(40px, 4.6vw, 84px); max-width: 18ch; }
.statut-global { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--surface); font: 400 14px/1.2 var(--petit); letter-spacing: .06em; }
.statut-maj { margin-top: 14px; color: var(--argile); font: 400 13px/1.4 var(--petit); opacity: .85; }
.pastille { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--vide); }
.statut-ok .pastille { background: var(--ok); box-shadow: 0 0 0 4px rgba(22, 163, 74, .18); }
.statut-lent .pastille { background: var(--lent); box-shadow: 0 0 0 4px rgba(230, 161, 30, .2); }
.statut-panne .pastille { background: var(--panne); box-shadow: 0 0 0 4px rgba(220, 38, 38, .18); animation: battre 1.4s ease-in-out infinite; }
@keyframes battre { 50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, .05); } }

.statut-page { display: grid; gap: clamp(36px, 4vw, 64px); padding-top: clamp(40px, 4vw, 72px); }
.statut-produit { display: grid; gap: 14px; max-width: 1040px; width: 100%; margin: 0 auto; }
.statut-produit__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.statut-logo { height: 34px; width: auto; }
.statut-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; color: var(--taupe); font: 400 13px/1.3 var(--petit); }
.statut-legende .b { display: inline-block; width: 9px; height: 16px; margin-right: -8px; border-radius: 3px; vertical-align: -3px; }
.statut-legende .t { display: inline-block; width: 16px; height: 3px; margin-right: -8px; border-radius: 2px; vertical-align: 3px; }
.b.ok { background: var(--ok); } .b.lent { background: var(--lent); } .b.panne { background: var(--panne); } .b.vide { background: var(--vide); }

.statut-groupe { margin: 22px 0 2px; font: 400 12px/1.3 var(--petit); letter-spacing: .16em; text-transform: uppercase; color: var(--orange-profond); }
.statut-liste { display: grid; border: 1px solid var(--filet); border-radius: 22px; background: var(--blanc-pur); overflow: hidden; }
.statut-service { display: grid; gap: 10px; padding: 18px 22px; }
.statut-service + .statut-service { border-top: 1px solid var(--filet); }
.statut-service__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.statut-service__nom { min-width: 0; font-size: 19px; color: var(--cacao); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statut-etat { display: inline-flex; flex: none; align-items: center; gap: 8px; font: 400 14px/1.2 var(--petit); color: var(--taupe); white-space: nowrap; }
.statut-ok.statut-etat { color: var(--ok); } .statut-lent.statut-etat { color: #B7791F; } .statut-panne.statut-etat { color: var(--panne); }
.statut-detail { margin: -4px 0 0; color: var(--taupe); font: 400 14px/1.4 var(--petit); }

/* Les barres : un jour par barre, du plus ancien à aujourd'hui */
.statut-barres { display: flex; gap: 2px; height: 34px; }
.statut-barres i { flex: 1; min-width: 2px; border-radius: 3px; background: var(--vide); cursor: pointer; transition: transform .15s, opacity .15s; }
.statut-barres i.ok { background: var(--ok); } .statut-barres i.lent { background: var(--lent); } .statut-barres i.panne { background: var(--panne); }
.statut-barres i:hover { transform: scaleY(1.12); opacity: .85; }
.statut-service__pied { display: flex; justify-content: space-between; gap: 10px; white-space: nowrap; color: var(--argile); font: 400 12px/1.3 var(--petit); }
.statut-dispo { color: var(--taupe); text-align: center; }

.statut-carte { padding: 20px 22px; border: 1px solid var(--filet); border-radius: 22px; background: var(--blanc-pur); }
.courbe { display: block; width: 100%; height: auto; }
.courbe .grille { stroke: var(--filet); stroke-width: 1; }
.courbe .axe { fill: var(--argile); font: 400 11px var(--petit); }
.statut-legende--courbe { margin-top: 12px; }
.statut-incidents { display: grid; gap: 0; padding: 4px 22px; }
.statut-incident { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; }
.statut-incident + .statut-incident { border-top: 1px solid var(--filet); }
.statut-incident .statut-etat { width: 92px; padding-top: 3px; }
.statut-incident strong { display: block; font-weight: 400; color: var(--cacao); }
.statut-incident small { display: block; color: var(--taupe); font: 400 13px/1.4 var(--petit); }
.statut-vide { margin: 14px 0; color: var(--taupe); }

.statut-produit--bientot { align-items: center; justify-items: start; padding: 22px; border: 1px dashed var(--filet); border-radius: 22px; color: var(--taupe); }
.statut-produit--bientot .statut-logo { height: 30px; }
.statut-produit--bientot p { margin: 0; }

/* Le titre d'un groupe et son résumé, sur une ligne */
.statut-groupe-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 0 2px; }
.statut-groupe-tete .statut-groupe { margin: 0; }
.statut-resume { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font: 400 13px/1.2 var(--petit); color: var(--taupe); }
.statut-resume .pastille { width: 8px; height: 8px; }
.statut-resume.statut-ok .pastille { box-shadow: none; }
/* La tête d'un service est un bouton (ouvrir sur téléphone) ; sur ordinateur, tout est déjà ouvert. */
.statut-service__tete { width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: default; }
.statut-chevron { display: none; }
.statut-service__corps { display: grid; gap: 10px; }

/* L'info-bulle d'un jour */
.statut-bulle { position: fixed; z-index: 80; max-width: 240px; padding: 9px 12px; border-radius: 12px; background: var(--nuit); color: var(--blanc); font: 400 13px/1.4 var(--petit); pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); box-shadow: 0 8px 24px rgba(23, 19, 16, .25); }
.statut-bulle b { display: block; font-weight: 400; color: var(--orange); }

@media (max-width: 760px) {
  .statut-service { padding: 16px; }
  .statut-service__nom { font-size: 17px; }
  /* Sur téléphone : les 45 derniers jours (des barres assez larges pour le doigt). */
  .statut-barres i:nth-child(-n + 45) { display: none; }
  .statut-service__pied span:first-child { font-size: 0; }
  .statut-service__pied span:first-child::before { content: "45 jours"; font-size: 12px; }
  .statut-dispo .long { display: none; }
  .statut-carte { padding: 14px; }
  .statut-incidents { padding: 2px 16px; }
  .statut-incident { flex-direction: column; gap: 4px; }
}

/* --- Téléphone (20 oct. 2026) : une ligne par service, ouverte d'un toucher ; tailles en rem (rem = 4,27 % de la largeur) --- */
@media (max-width: 760px) {
  html { font-size: 4.2667vw; }
  .statut-bandeau { min-height: 0; }
  .statut-bandeau .bandeau__texte { padding-top: 1.5rem; padding-bottom: 1.75rem; }
  .statut-bandeau h1 { font-size: 2rem; line-height: 1.1; max-width: none; }
  .statut-bandeau .bandeau__chapeau { font-size: 1rem; line-height: 1.5; margin-top: .75rem; }
  .statut-bandeau .ariane { display: none; }
  .statut-global { margin-bottom: .875rem; padding: .375rem .875rem .375rem .625rem; font-size: .8125rem; }
  .statut-maj { margin-top: .875rem; font-size: .75rem; }
  .statut-page { gap: 2rem; padding-top: 1.75rem; }
  .statut-produit { gap: .5rem; }
  .statut-produit__tete { gap: .5rem; }
  .statut-logo { height: 1.75rem; }
  .statut-legende { flex-wrap: nowrap; gap: .375rem .625rem; font-size: .6875rem; white-space: nowrap; }
  .statut-legende .b { width: .4375rem; height: .75rem; margin-right: -.375rem; }
  .statut-legende .t { width: .875rem; margin-right: -.375rem; }
  .statut-produit__tete .statut-legende { display: none; }
  .statut-groupe-tete { margin: 1.25rem 0 .125rem; gap: .75rem; }
  .statut-groupe { font-size: .6875rem; letter-spacing: .14em; }
  .statut-resume { font-size: .75rem; gap: .375rem; }
  .statut-resume .pastille { width: .4375rem; height: .4375rem; }
  .statut-liste { border-radius: 1.125rem; }
  .statut-service { gap: 0; padding: 0; }
  .statut-service__tete { display: flex; align-items: center; gap: .625rem; min-height: 3.25rem; padding: 0 1rem; cursor: pointer; }
  .statut-service__nom { flex: 1; font-size: 1rem; }
  .statut-etat { gap: .375rem; font-size: .8125rem; }
  .statut-etat .pastille { width: .5rem; height: .5rem; }
  .statut-ok .statut-etat__texte { display: none; }
  .statut-chevron { display: block; flex: none; width: 1.125rem; height: 1.125rem; fill: none; stroke: var(--argile); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
  .statut-service.ouvert .statut-chevron { transform: rotate(180deg); }
  .statut-service__corps { display: none; gap: .5rem; padding: 0 1rem 1rem; }
  .statut-service.ouvert .statut-service__corps { display: grid; }
  .statut-detail { margin: 0; font-size: .8125rem; }
  .statut-barres { height: 1.75rem; gap: .125rem; }
  .statut-barres i { min-width: 0; border-radius: .1875rem; }
  .statut-service__pied { font-size: .6875rem; }
  .statut-service__pied span:first-child::before { font-size: .6875rem; }
  .statut-carte { padding: .875rem; border-radius: 1.125rem; }
  .statut-legende--courbe { flex-wrap: wrap; }
  .statut-incidents { padding: .125rem 1rem; }
  .statut-incident { padding: .75rem 0; }
  .statut-incident strong { font-size: .9375rem; }
  .statut-incident small { font-size: .75rem; }
  .statut-vide { margin: .75rem 0; font-size: .875rem; }
  .statut-bulle { max-width: 15rem; font-size: .8125rem; padding: .5rem .75rem; }
}

/* Le résumé d'un groupe : une pastille simple (le halo débordait sur le texte). */
.statut-resume .pastille { box-shadow: none !important; animation: none !important; }

/* Le graphique : une version large (ordinateur) et une version étroite et haute (téléphone). */
.courbe--mobile { display: none; }
@media (max-width: 760px) {
  .courbe--bureau { display: none; }
  .courbe--mobile { display: block; }
  .courbe--mobile .axe { font-size: 12px; }
}