/* ==========================================================================
   R-SYSTEM — REPARTITION DES COULEURS, VARIANTE ARRETEE
   Prolonge charte-corporate.css, qui remappe les tokens de la landing sur ceux
   de la charte SALUS Controls. Ce fichier-ci decide OU chaque couleur se pose.

   Ce qu'il reste des quatre propositions. La comparaison a eu lieu sur la
   pull request 18 : quatre repartitions commutables, un selecteur, et le JS
   qui allait avec. La D a ete retenue, tout le reste est parti. L'apercu de la
   PR 18 reste le temoin si la question revient.

   LA PALETTE, relevee sur le blog corporate saluscontrols.com :
     bleu fonce  --color-brand-blue      #1d2858   aplats
     bleu ciel   --color-surface-subtle  #e5f6fd   bandeaux, respirations
     blanc       --color-surface-default #ffffff   fond de lecture
     cyan        --color-brand-cyan      #00aeef   accent, jamais du texte

   LA REPARTITION. Le blanc domine, l'alternance est forte dans la moitie
   haute : blanc, marine (Le plenum), blanc (Les servomoteurs), marine (La
   regulation, et donc l'encart Intesis qu'elle porte). Le bleu ciel tient les
   bandeaux. Le marine reprend la main sur le heros, les deux blocs de
   chiffres, la bande des registres et le pied de page.

   Les sections se designent par rapport a #composants plutot que par un rang :
   la structure des deux langues est identique, l'ancre tient meme si une
   section s'ajoute ailleurs dans la page.

   PLUS DE NOIR. Le premier repeint envoyait les sections theme-deep sur du
   noir, faute de palier entre le bleu de marque et le noir dans la charte. Le
   site corporate n'a pas une seule surface noire : --navy-950 revient donc sur
   le bleu de marque.

   CONTRASTES VERIFIES sur le bleu ciel, ou les tokens de charte calibres pour
   le blanc decrochent :
     texte courant  bleu de marque                        12,6:1
     texte attenue  bleu de marque a 70 %                   5,1:1
     lien / accent  text-link 70 % + bleu de marque 30 %    5,7:1
     jalon          success 70 % + bleu de marque 30 %      5,8:1
   Les valeurs de charte nues (--color-text-muted 4,15 et --color-text-link
   4,07) ne tiennent PAS le seuil AA sur ce fond : elles ne sont pas employees.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Base — le noir sort de la landing
   -------------------------------------------------------------------------- */

:root{
  --navy-950:var(--color-brand-blue);
}

/* --------------------------------------------------------------------------
   1. Recette NAVY — aplat bleu fonce, texte blanc
   -------------------------------------------------------------------------- */

main > section.hero-cover,
main > section.theme-deep,
main > section#composants,
main > section#composants + section + section,
#registres,
.bandeau-cookies{
  --bg:var(--color-surface-inverse);
  --theme-strip-bg:var(--color-surface-inverse);
  --fg:var(--color-text-inverse);
  --fg-soft:color-mix(in srgb,var(--color-text-inverse) 70%,transparent);
  --fg-mute:color-mix(in srgb,var(--color-text-inverse) 70%,transparent);

  --accent:var(--color-brand-cyan);
  --accent-surface:var(--color-action-secondary-bg);
  --accent-fg:var(--color-text-on-cyan);
  --accent-alt:var(--color-brand-turquoise);
  --accent-alt-voile:color-mix(in srgb,var(--color-brand-turquoise) 10%,transparent);
  --accent-alt-border:color-mix(in srgb,var(--color-brand-turquoise) 30%,transparent);
  --accent-voile:color-mix(in srgb,var(--color-brand-cyan) 10%,transparent);

  --rule:color-mix(in srgb,var(--color-text-inverse) 10%,transparent);
  --rule-strong:color-mix(in srgb,var(--color-text-inverse) 30%,transparent);
  --ph-hatch:color-mix(in srgb,var(--color-text-inverse) 10%,transparent);
  --ph-fill:color-mix(in srgb,var(--color-text-inverse) 10%,transparent);
  --ph-border:color-mix(in srgb,var(--color-text-inverse) 30%,transparent);
  --card-border:color-mix(in srgb,var(--color-text-inverse) 30%,transparent);
  --btn-ghost-border:var(--color-text-inverse);

  --focus-ring:var(--color-text-inverse);
  --danger-fg:var(--color-error-surface);
}

/* --------------------------------------------------------------------------
   2. Recette BLANCHE — fond de lecture, bordure de carte bleu marine
   La bordure marine d'un pixel est l'ADN de surface de la charte : quarante
   occurrences relevees sur le site corporate.
   -------------------------------------------------------------------------- */

main > section,
main > section#composants + section{
  --bg:var(--color-surface-default);
  --theme-strip-bg:var(--color-surface-default);
  --fg:var(--color-text-default);
  --fg-soft:var(--color-text-default);
  --fg-mute:var(--color-text-muted);

  --accent:var(--color-text-link);
  --accent-surface:var(--color-action-secondary-bg);
  --accent-fg:var(--color-text-on-cyan);
  --accent-alt:var(--color-success);
  --accent-alt-voile:color-mix(in srgb,var(--color-brand-turquoise) 10%,transparent);
  --accent-alt-border:color-mix(in srgb,var(--color-brand-turquoise) 30%,transparent);
  --accent-voile:color-mix(in srgb,var(--color-brand-cyan) 10%,transparent);

  --rule:var(--color-border-default);
  --rule-strong:var(--color-border-strong);
  --ph-hatch:color-mix(in srgb,var(--color-brand-blue) 10%,transparent);
  --ph-fill:var(--color-surface-muted);
  --ph-border:var(--color-border-strong);
  --card-border:var(--color-brand-blue);
  --btn-ghost-border:var(--color-brand-blue);

  --focus-ring:var(--color-focus-ring);
  --danger-fg:var(--color-error);
}

/* --------------------------------------------------------------------------
   3. Recette CIEL — bandeau bleute
   La charte cale --color-text-muted et --color-text-link sur du blanc : sur ce
   fond ils tombent a 4,15 et 4,07, sous le seuil AA. Les deux roles passent
   donc par un melange avec le bleu de marque, sur la grille de transparence
   autorisee par la charte (70 / 30 / 10).
   -------------------------------------------------------------------------- */

main > section.origin-strip,
main > section.theme-pale{
  --bg:var(--color-surface-subtle);
  --theme-strip-bg:var(--color-surface-subtle);
  --fg:var(--color-text-default);
  --fg-soft:var(--color-text-default);
  --fg-mute:color-mix(in srgb,var(--color-brand-blue) 70%,transparent);

  --accent:color-mix(in srgb,var(--color-text-link) 70%,var(--color-brand-blue) 30%);
  --accent-surface:var(--color-action-secondary-bg);
  --accent-fg:var(--color-text-on-cyan);
  --accent-alt:color-mix(in srgb,var(--color-success) 70%,var(--color-brand-blue) 30%);
  --accent-alt-voile:color-mix(in srgb,var(--color-brand-turquoise) 10%,transparent);
  --accent-alt-border:color-mix(in srgb,var(--color-brand-turquoise) 30%,transparent);
  --accent-voile:color-mix(in srgb,var(--color-brand-cyan) 10%,transparent);

  --rule:color-mix(in srgb,var(--color-brand-blue) 10%,transparent);
  --rule-strong:color-mix(in srgb,var(--color-brand-blue) 30%,transparent);
  --ph-hatch:color-mix(in srgb,var(--color-brand-blue) 10%,transparent);
  --ph-fill:var(--color-surface-default);
  --ph-border:color-mix(in srgb,var(--color-brand-blue) 30%,transparent);
  --card-border:var(--color-brand-blue);
  --btn-ghost-border:var(--color-brand-blue);

  --focus-ring:var(--color-focus-ring);
  --danger-fg:var(--color-error);

  /* La bande d'origine force ses gris en primitives, hors couche semantique. */
  --grey-600:color-mix(in srgb,var(--color-brand-blue) 70%,transparent);
  --grey-700:color-mix(in srgb,var(--color-brand-blue) 70%,transparent);
}

/* --------------------------------------------------------------------------
   4. En-tete blanc, comme le site corporate
   Les deux primitives sont echangees localement, ce qui repeint le fond, le
   texte, les liens et le bouton fantome d'un seul geste. Le cyan de survol des
   liens tombe a 2,53 sur blanc : il passe par le bleu de lien de la charte.

   ET IL EST OPAQUE. L'en-tete de R-System est un panneau de verre, 86 %
   d'opacite et un flou d'arriere-plan. Ce verre ne tient que si ce qui defile
   dessous a la meme couleur que lui, ce qui etait vrai quand toutes les
   sections etaient marine. Blanc a 86 % au-dessus du heros marine donnait un
   gris sale. Aplat, donc.
   -------------------------------------------------------------------------- */

header{
  --navy-950:var(--color-surface-default);
  --white:var(--color-text-default);
  --cyan-500:var(--color-text-link);
  --grey-200:var(--color-text-default);
  --alpha-light-16:var(--color-border-default);
  background:var(--color-surface-default);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* --------------------------------------------------------------------------
   5. La bande des registres
   Ce bloc n'est pas une section mais un second mouvement a l'interieur de la
   section Application. Pour qu'il se lise comme une bande et non comme une
   carte posee au milieu du blanc, il sort du conteneur sur toute la largeur :
   marge negative pour atteindre les bords, padding symetrique pour ramener son
   contenu dans l'alignement des autres sections. Les deux pourcentages se
   resolvent sur .wrap, pas sur l'element : c'est ce qui fait tomber le calcul
   juste. body porte deja overflow-x:hidden, la barre de defilement comptee
   dans 100vw ne peut donc pas creer de defilement lateral.
   -------------------------------------------------------------------------- */

#registres{
  background:var(--color-surface-inverse);
  color:var(--color-text-inverse);
  border-top:0;
  margin-block:var(--space-block) 0;
  margin-inline:calc(50% - 50vw);
  padding-block:var(--space-section);
  padding-inline:calc(50vw - 50%);
}

/* --------------------------------------------------------------------------
   6. Le pilotage a distance
   Le bloc montre deja les deux objets cote a cote, les registres et l'ecran de
   l'application, mais rien ne dit que le second commande le premier. Une onde
   part donc du telephone, remonte vers la vanne, et la lame s'ouvre a son
   arrivee pendant que la consigne passe de 30 a 80 %. Le mouvement dure 3,2 s
   et se repete : la lame bouge APRES la derniere pastille, jamais avant, sinon
   la relation de cause a effet se perd.

   Rien n'est ajoute au fil du document : l'ensemble est aria-hidden, le
   paragraphe qui precede porte deja l'information. Sous prefers-reduced-motion
   la regle globale de tokens.css fige les animations sur leur derniere image,
   d'ou une derniere image lisible : vanne fermee, 30 %, pastilles visibles.
   -------------------------------------------------------------------------- */

#registres .duo-usage{grid-template-columns:1fr auto 1fr}
.pilotage{display:flex;align-items:center;align-self:center;gap:var(--space-4)}

.pilotage-vanne{display:grid;justify-items:center;gap:var(--space-2)}
.pilotage-vanne svg{display:block;width:var(--space-14);height:var(--space-14)}
.pilotage-corps{fill:none;stroke:var(--rule-strong);stroke-width:var(--border-accent)}
.pilotage-lame{
  fill:var(--accent);
  transform-box:fill-box;transform-origin:center;
  animation:pilotage-lame 3.2s var(--ease-standard) infinite;
}

.pilotage-valeurs{
  display:grid;
  font-family:var(--font-mono);font-size:var(--size-mono-xs);
  letter-spacing:var(--tracking-mono);color:var(--fg);
}
.pilotage-valeurs em{
  grid-area:1/1;font-style:normal;
  animation-duration:3.2s;
  animation-timing-function:var(--ease-standard);
  animation-iteration-count:infinite;
}
.pilotage-bas{animation-name:pilotage-bas}
.pilotage-haut{animation-name:pilotage-haut}

.pilotage-flux{display:flex;align-items:center;gap:var(--space-2)}
.pilotage-flux b{
  width:var(--space-2);height:var(--space-2);
  border-radius:var(--radius-circle);
  background:var(--accent);opacity:.3;
  animation:pilotage-onde 3.2s var(--ease-standard) infinite;
}
/* L'onde part du telephone : c'est la derniere pastille qui s'allume d'abord. */
.pilotage-flux b:nth-child(5){animation-delay:0s}
.pilotage-flux b:nth-child(4){animation-delay:.11s}
.pilotage-flux b:nth-child(3){animation-delay:.22s}
.pilotage-flux b:nth-child(2){animation-delay:.33s}
.pilotage-flux b:nth-child(1){animation-delay:.44s}

@keyframes pilotage-onde{
  0%,22%,100%{opacity:.3;transform:scale(1)}
  8%{opacity:1;transform:scale(1.7)}
}
@keyframes pilotage-lame{
  0%,24%{transform:rotate(0deg)}
  36%,74%{transform:rotate(74deg)}
  88%,100%{transform:rotate(0deg)}
}
@keyframes pilotage-bas{0%,24%{opacity:1}36%,74%{opacity:0}88%,100%{opacity:1}}
@keyframes pilotage-haut{0%,24%{opacity:0}36%,74%{opacity:1}88%,100%{opacity:0}}

/* En colonne, les deux objets s'empilent : les registres au-dessus, le
   telephone en dessous. L'onde remonte donc au lieu d'aller vers la gauche. */
@media (max-width:1000px){
  #registres .duo-usage{grid-template-columns:1fr}
  .pilotage{flex-direction:column;gap:var(--space-3);margin-block:var(--space-4)}
  .pilotage-flux{flex-direction:column}
}

/* --------------------------------------------------------------------------
   7. Le comparateur avant / apres
   Ses deux etiquettes flottent sur une photo, dans une pastille translucide :
   leur lisibilite dependait donc du fond de SECTION visible derriere l'image.
   La section Regulation qui le porte est marine, mais la pastille ne doit pas
   dependre de ce voisinage. Aplat marine : 12,6:1 pour le libelle et 5,5:1
   pour le cyan, quoi qu'il y ait derriere.
   -------------------------------------------------------------------------- */

.compare-tag{
  background:var(--color-surface-inverse);
  color:var(--color-text-inverse);
  border-color:color-mix(in srgb,var(--color-text-inverse) 30%,transparent);
}
.compare-tag--b{color:var(--color-brand-cyan)}