/* Schéma interactif de la ferme de serveurs (page realisations/greta). Chargée après site.css.
   Tout est sous .schema-ferme. Les couleurs du dessin reprennent celles du schéma d'origine. */

.schema-ferme {
  --sf-encre: #25303B;
  --sf-actif: #E51432;
  --sf-bleu: #004C99;
  margin: 0;
}

.schema-ferme-legende { margin-bottom: 0.75rem; font-weight: 700; }

/* ---------- Cadre du schéma : défile seul sur petit écran ---------- */
.schema-ferme-cadre {
  overflow-x: auto;
  border: var(--filet) solid var(--c-bordure);
  border-radius: var(--rayon-l);
  background: var(--c-blanc);
}

/* Sous 64 rem, le schéma garde une largeur de 100 rem : les adresses IP restent lisibles (environ 9 px) et le cadre défile. */
.schema-ferme-svg {
  display: block;
  width: 100%;
  min-width: 100rem;
  height: auto;
  background: #FFFFFF;
  font-family: var(--police);
  font-size: 12.4px;
  forced-color-adjust: none;
}

/* ---------- Dessin : zones ---------- */
.schema-ferme .zone { stroke-width: 2; stroke-dasharray: 10 6.4; }
.schema-ferme .z-prox { fill: #DAE8FC; stroke: #6C8EBF; }
.schema-ferme .z-ovh  { fill: #D5E8D4; stroke: #82B366; }
.schema-ferme .z-pf   { fill: #F8CECC; stroke: #B85450; }
.schema-ferme .z-cli  { fill: #E8EAF6; stroke: #5C6BC0; }
.schema-ferme .z-srv  { fill: #E8F5E9; stroke: #2E7D32; }
.schema-ferme .z-adm  { fill: #FFF8E1; stroke: #F9A825; }
.schema-ferme .z-df   { fill: #FCE4EC; stroke: #C62828; }
.schema-ferme .z-db   { fill: #F3E5F5; stroke: #7B1FA2; }

.schema-ferme .nuage { fill: #DAE8FC; stroke: #6C8EBF; stroke-width: 1.7; }

/* ---------- Dessin : cadres d'information ---------- */
.schema-ferme .bx-jaune  { fill: #FFF2CC; stroke: #D6B656; stroke-width: 1.7; }
.schema-ferme .bx-mauve  { fill: #E1D5E7; stroke: #9673A6; stroke-width: 1.7; }
.schema-ferme .bx-vert   { fill: #C8E6C9; stroke: #2E7D32; stroke-width: 1.7; }
.schema-ferme .bx-violet { fill: #E1BEE7; stroke: #7B1FA2; stroke-width: 1.7; }
.schema-ferme .bx-rouge  { fill: #FFCDD2; stroke: #C62828; stroke-width: 1.7; }
.schema-ferme .bx-pf     { fill: none; stroke: #B85450; stroke-width: 1.7; }

/* ---------- Dessin : traits et pointes de flèche ---------- */
.schema-ferme .l { fill: none; stroke-width: 2.4; }
.schema-ferme .l-bleu   { stroke: #6C8EBF; }
.schema-ferme .l-wan    { stroke: #82B366; }
.schema-ferme .l-vert   { stroke: #2E7D32; }
.schema-ferme .l-orange { stroke: #F9A825; }
.schema-ferme .l-indigo { stroke: #5C6BC0; }
.schema-ferme .l-rouge  { stroke: #C62828; }
.schema-ferme .l-violet { stroke: #7B1FA2; }
.schema-ferme .l-pf     { stroke: #B85450; stroke-dasharray: 12.5 9.4; stroke-dashoffset: 11.7; }
.schema-ferme .m-bleu path   { fill: #6C8EBF; }
.schema-ferme .m-wan path    { fill: #82B366; }
.schema-ferme .m-vert path   { fill: #2E7D32; }
.schema-ferme .m-orange path { fill: #F9A825; }
.schema-ferme .m-indigo path { fill: #5C6BC0; }
.schema-ferme .m-rouge path  { fill: #C62828; }
.schema-ferme .m-violet path { fill: #7B1FA2; }
.schema-ferme .m-pf path     { fill: #B85450; }

/* ---------- Dessin : textes ---------- */
.schema-ferme-svg text { fill: #000000; dominant-baseline: central; user-select: none; }
.schema-ferme-svg .c { text-anchor: middle; }
.schema-ferme-svg .g, .schema-ferme-svg tspan.g { font-weight: 700; }
.schema-ferme-svg .v { fill: var(--sf-bleu); }
.schema-ferme-svg .i { font-size: 10.9px; }
.schema-ferme-svg .e { font-size: 13.7px; }
.schema-ferme-svg .vt { font-size: 13.5px; }
.schema-ferme-svg .wt { font-size: 14.6px; }
.schema-ferme-svg .i.g { fill: var(--sf-bleu); }
.schema-ferme-svg .zt { font-size: 15.1px; }
.schema-ferme-svg .zt.zs { font-size: 13.7px; }
.schema-ferme-svg .vip text, .schema-ferme-svg text.vip { font-size: 12.63px; }

/* ---------- Dessin : légende ---------- */
.schema-ferme .leg-ombre { fill: #000000; opacity: 0.18; }
.schema-ferme .leg-fond { fill: #FAFAFA; stroke: #CCCCCC; stroke-width: 1.4; }
.schema-ferme .pastille { stroke-width: 1.8; }
.schema-ferme-svg .leg-t { font-size: 15.1px; }
.schema-ferme-svg .leg-l { font-size: 12.4px; fill: #111111; }

/* ---------- Éléments cliquables ---------- */
.schema-ferme .act { cursor: pointer; outline: none; }
.schema-ferme .hit { fill: transparent; stroke: transparent; stroke-width: 3; }
.schema-ferme .act:hover .hit { fill: rgba(37, 48, 59, 0.1); stroke: rgba(37, 48, 59, 0.45); stroke-width: 2; }
.schema-ferme .act.est-actif .hit { fill: rgba(229, 20, 50, 0.1); stroke: var(--sf-actif); stroke-width: 3.5; }
.schema-ferme .act:focus-visible .hit { fill: rgba(37, 48, 59, 0.1); stroke: var(--sf-encre); stroke-width: 3.5; stroke-dasharray: none; }
.schema-ferme .act:focus-visible.est-actif .hit { stroke-dasharray: 9 4; }

/* Consigne de défilement (écrans où le cadre défile) */
.schema-ferme-aide { margin-bottom: 0.5rem; color: var(--c-texte-secondaire); font-size: 0.9375rem; }

/* ---------- Liste des zones (petit écran, avec JavaScript) ---------- */
.schema-ferme-zones { display: none; margin-bottom: 0.75rem; }
.schema-ferme-zones ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.schema-ferme-zones button {
  min-height: var(--cible);
  padding: 0.25rem 0.875rem;
  border: var(--filet) solid var(--c-bordure-champ);
  border-radius: var(--rayon-xl);
  background: var(--c-blanc);
  color: var(--c-sombre);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}
.schema-ferme-zones button:hover { background: var(--c-fond-clair); }
.schema-ferme-zones button.est-actif {
  border: var(--trait) solid var(--c-rouge);
  background: var(--c-fond-clair);
  color: var(--c-rouge-texte);
}

/* ---------- Panneau de description ---------- */
.schema-panneau { display: none; }
.schema-ferme--js .schema-panneau {
  display: block;
  max-height: 45vh;
  margin-top: 0.75rem;
  padding: 0.875rem 1.125rem;
  overflow-y: auto;
  border: var(--filet) solid var(--c-bordure);
  border-left: 0.25rem solid var(--c-rouge);
  border-radius: var(--rayon-l);
  background: var(--c-blanc);
  box-shadow: 0 0.25rem 1rem var(--c-ombre);
}
.schema-ferme--js .schema-panneau.est-ouvert { position: sticky; bottom: 0.75rem; z-index: 2; }
.schema-panneau:focus { outline: none; }
.schema-panneau:focus-visible { outline: var(--trait) solid var(--c-sombre); outline-offset: var(--trait); }
.schema-panneau-invite { color: var(--c-texte-secondaire); }
.schema-panneau.est-ouvert .schema-panneau-invite { display: none; }
.schema-panneau h4 { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.schema-panneau h4 + p { margin-top: 0.375rem; }
.schema-panneau-contenu p { max-width: var(--largeur-texte); overflow-wrap: anywhere; text-wrap: pretty; }
.schema-panneau-fermer {
  margin-top: 0.75rem;
  min-height: var(--cible);
  padding: 0.25rem 1.25rem;
  border: var(--filet) solid var(--c-bordure-champ);
  border-radius: var(--rayon-bouton);
  background: var(--c-blanc);
  color: var(--c-sombre);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.schema-panneau-fermer:hover { background: var(--c-fond-clair); }
.schema-panneau-fermer[hidden] { display: none; }

/* ---------- Descriptions : liste lisible sans JavaScript, masquée avec ---------- */
.schema-descriptions { margin-top: 1.5rem; }
.schema-descriptions-titre { margin-bottom: 0.75rem; font-size: 1.125rem; font-weight: 700; }
.schema-description { padding: 0.75rem 0; border-top: var(--filet) solid var(--c-bordure); }
.schema-description h4 { font-size: 1rem; font-weight: 700; }
.schema-description p { margin-top: 0.25rem; }
.schema-ferme--js .schema-descriptions { display: none; }

/* Ordinateur : le schéma tient dans la page et les consignes de défilement disparaissent */
@media (min-width: 64rem) {
  .schema-ferme-svg { min-width: 68.75rem; }
  .schema-ferme-aide { display: none; }
}

/* En dessous de 64 rem, les titres de zone sont petits au doigt : la liste de boutons les remplace */
@media (max-width: 63.9375rem) {
  .schema-ferme--js .schema-ferme-zones { display: block; }
}

/* Petit écran : le panneau prend moins de place et laisse voir le schéma */
@media (max-width: 47.9375rem) {
  .schema-ferme--js .schema-panneau { max-height: 35vh; }
}

@media print {
  .schema-ferme-zones, .schema-ferme-aide, .schema-panneau, .schema-panneau-fermer { display: none !important; }
  .schema-ferme-cadre { overflow: visible; }
  .schema-ferme-svg { min-width: 0; }
  .schema-ferme--js .schema-descriptions { display: block; }
}

@media (prefers-reduced-motion: no-preference) {
  .schema-ferme .hit { transition: fill var(--transition), stroke var(--transition); }
}

@media (forced-colors: active) {
  .schema-ferme-cadre, .schema-panneau, .schema-ferme-zones button, .schema-panneau-fermer { border-color: CanvasText; }
  .schema-ferme-zones button.est-actif { border-color: Highlight; }
}