/* =====================================================================
   QaLyZa, site C : plateforme (plateforme.html). Mise en page propre à
   la page ; les composants viennent de assets/site.css.
     1. Ouverture : texte et diorama
     2. Principes partagés : la dalle, quatre principes
     3. Échanges : l'anneau des applications
     4. Déploiement : le titre et sa phrase
     5. Suite : les bâtiments, la conformité
   Surcharges locales de composants partagés : .tete-page-grille à parts
   égales ; .coupe-tete empilée dès 1024 px (.principes-tete). Les
   principes reprennent la coupe du socle de site.css (.coupe-tete pour la
   dalle, .coupe-texte pour chaque principe), sans les couches dessinées.
   Le rouge (--signal) ne marque que l'excursion de l'EMS, dans la liste des
   échanges : jamais un aplat, jamais un statut d'échange.
   ===================================================================== */


/* ---------- 1. Ouverture ---------- */
@media (min-width: 1024px) {
  .plat-tete .tete-page-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.plat-tete .tete-page-actions { margin-top: 32px; }


/* ---------- 2. Principes partagés ----------
   La dalle à gauche ; à droite, le titre puis les quatre principes, deux par deux.
   Sous 1024 px, la dalle passe au-dessus (la coupe de site.css ne s'empile que sous
   768 px) : les principes gardent toute la largeur. */
.principes {
  margin-top: clamp(28px, 3.5vw, 44px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px clamp(24px, 3vw, 44px);
}
@media (max-width: 1023px) {
  .principes-tete { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .principes-tete .coupe-graphe { max-width: 320px; }
}
@media (max-width: 559px) {
  .principes { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}


/* ---------- 3. Échanges : l'anneau des applications, autour du logo QaLyZa ----------
   Les cinq applications en cercle, reliées par l'anneau et par un rayon au socle commun ;
   des points de lumière y circulent (arrêtés quand le mouvement est réduit). */
.echanges-plan .lede { margin-top: 20px; }
/* Le texte à gauche, l'anneau à droite (.grille-2) */
.anneau-plan { justify-self: center; width: 100%; max-width: 500px; }
/* Les noms des applications restent en écriture latine, aussi sur les pages en arabe */
.anneau { display: block; width: 100%; height: auto; overflow: visible; direction: ltr; }
.anneau-cercle { fill: none; stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 2; }
.anneau-lien { fill: none; stroke: var(--a); stroke-width: 2; opacity: .45; }
.anneau-flux {
  fill: none; stroke: var(--accent); stroke-width: 4.5; stroke-linecap: round;
  stroke-dasharray: 0 25.918; animation: anneau-tourne 36s linear infinite; /* 40 points sur le cercle */
}
.anneau-rayon {
  fill: none; stroke: var(--a); stroke-width: 4.5; stroke-linecap: round;
  stroke-dasharray: 0 13; animation: anneau-rayon 2.4s linear infinite;
}
.anneau-rayon.est-retour { animation-direction: reverse; }
.anneau-halo { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.anneau-pastille { fill: var(--fond-3); stroke: var(--trait-2); stroke-width: 1.2; }
.anneau-etq { fill: var(--texte); font: 600 15px var(--font-sans); }
@keyframes anneau-tourne { to { stroke-dashoffset: -1036.73; } }
@keyframes anneau-rayon { to { stroke-dashoffset: -26; } }
@media (prefers-reduced-motion: reduce) {
  .anneau-flux, .anneau-rayon { animation: none; }
}
@media (max-width: 1023px) {
  .anneau-plan { max-width: 440px; }
}


/* ---------- 4. Déploiement : le titre à gauche, sa phrase à droite (.grille-2) ---------- */
.plat-deploiement { align-items: baseline; }
@media (max-width: 1023px) {
  .plat-deploiement { gap: 20px; }
}


/* ---------- 5. Suite ---------- */
.suite-grille {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 6vw, 104px); align-items: center;
}
.suite-texte .lede { margin-top: 20px; }
/* Un bâtiment par ligne : son nom, puis sa phrase */
.suite-liens { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.suite-liens .menu-lien { border: 1px solid var(--trait); }
@media (max-width: 1023px) {
  .suite-grille { grid-template-columns: minmax(0, 1fr); }
}