/* ============================================================================
   Schéma « analyse contextuelle » — bloc autonome intégré le 2026-08-21.
   Remplace le diagramme vectoriel home-contextual-diagram-v7.svg dans le
   premier volet de la section à visuel épinglé.

   Le bloc se met à l'échelle par requête de conteneur : `--u` vaut un pixel
   du dessin d'origine, et tout est exprimé en multiples de cette unité. Sous
   ~593 px de large il cesse de rétrécir et défile horizontalement, pour rester
   lisible.

   Aucune dépendance : ni JavaScript, ni police, ni bibliothèque d'icônes.
   Les icônes sont des SVG en ligne.

   Retirer la ligne de lien dans index.html et le bloc `.ctx-schema` suffit
   à revenir au diagramme précédent.
   ========================================================================== */

.ctx-schema {
  /* ---- réglages ---- */
  --ctx-accent: #15803D;   /* vert d'accent : traits, %, contours */
  --ctx-tint:   #D8EFD2;   /* fond des carrés d'icônes */
  --ctx-ink:    #0F1F19;   /* texte principal */
  --ctx-muted:  #6B7C74;   /* texte secondaire */
  --ctx-line:   #E4EBE7;   /* filet des pastilles */
  --ctx-wire:   #D6E0DA;   /* traits du circuit */
  --ctx-track:  #ECF1EE;   /* fond des barres de progression */
  --ctx-font:   inherit;   /* ex. "Plus Jakarta Sans", system-ui, sans-serif */
  --ctx-max:    760px;     /* largeur maximale du schéma */
  --ctx-umin:   0.78px;    /* plancher de lisibilité : en dessous de ~593 px
                              de large, le schéma cesse de rétrécir et
                              défile horizontalement. Baisser = plus petit
                              mais sans défilement. */

  /* ---- moteur d'échelle : --u = 1 px du dessin d'origine ---- */
  container-type: inline-size;
  --u: 1px;                          /* repli navigateurs anciens */
  display: block;
  width: 100%;
  max-width: var(--ctx-max);
  margin-inline: auto;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  font-family: var(--ctx-font);
  color: var(--ctx-ink);
  -webkit-font-smoothing: antialiased;
}
@supports (container-type: inline-size) {
  .ctx-schema { --u: max(calc(100cqw / 760), var(--ctx-umin)); }
}

.ctx-stage { position: relative; width: calc(760 * var(--u)); height: calc(600 * var(--u)); }

/* halo d'ambiance */
.ctx-halo {
  position: absolute; left: calc(210 * var(--u)); top: calc(96 * var(--u));
  width: calc(380 * var(--u)); height: calc(380 * var(--u));
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, var(--ctx-tint), rgba(255,255,255,0) 70%);
  filter: blur(calc(18 * var(--u)));
}

/* circuit */
.ctx-wires { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

/* photo */
.ctx-photo {
  position: absolute; left: calc(258 * var(--u)); top: calc(140 * var(--u));
  width: calc(244 * var(--u)); height: calc(280 * var(--u));
  border-radius: calc(18 * var(--u)); overflow: hidden;
}
.ctx-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* pastille générique */
.ctx-chip {
  position: absolute; display: flex; align-items: center;
  gap: calc(10 * var(--u));
  box-sizing: border-box; background: #fff;
  border: 1px solid var(--ctx-line);
  border-radius: calc(12 * var(--u));
  padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
  white-space: nowrap;
}
.ctx-chip__icon {
  width: calc(32 * var(--u)); height: calc(32 * var(--u)); flex-shrink: 0;
  border-radius: calc(9 * var(--u)); background: var(--ctx-tint);
  display: grid; place-items: center;
}
.ctx-chip__icon svg {
  width: calc(18 * var(--u)); height: calc(18 * var(--u));
  fill: none; stroke: var(--ctx-accent); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.ctx-chip__text { display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.ctx-chip__label { font-size: calc(13.5 * var(--u)); font-weight: 600; line-height: 1.2; }
.ctx-chip__sub   { font-size: calc(11 * var(--u)); font-weight: 500; color: var(--ctx-muted); }

/* entrées (gauche) — ancrées par le bord droit */
.ctx-in-1 { right: calc(552 * var(--u)); top: calc(86 * var(--u));  height: calc(52 * var(--u)); }
.ctx-in-2 { right: calc(540 * var(--u)); top: calc(170 * var(--u)); height: calc(52 * var(--u)); }
.ctx-in-3 { right: calc(566 * var(--u)); top: calc(254 * var(--u)); height: calc(52 * var(--u)); }
.ctx-in-4 { right: calc(548 * var(--u)); top: calc(340 * var(--u)); height: calc(52 * var(--u)); }

/* résultats (droite) */
.ctx-out-1 { left: calc(574 * var(--u)); top: calc(187 * var(--u)); height: calc(58 * var(--u)); }
.ctx-out-2 { left: calc(556 * var(--u)); top: calc(271 * var(--u)); height: calc(58 * var(--u)); }

/* résultat mis en avant, en débord sur la photo */
.ctx-top {
  left: calc(356 * var(--u)); top: calc(102 * var(--u));
  width: calc(190 * var(--u)); height: calc(56 * var(--u));
  border: 1.5px solid var(--ctx-accent);
  border-radius: calc(14 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  gap: calc(11 * var(--u));
}
.ctx-top .ctx-chip__label { font-size: calc(13.5 * var(--u)); font-weight: 700; }
.ctx-top .ctx-chip__sub   { font-weight: 600; color: var(--ctx-accent); }

/* curseur */
.ctx-cursor {
  position: absolute; left: calc(344 * var(--u)); top: calc(138 * var(--u));
  width: calc(19 * var(--u)); height: calc(21 * var(--u));
}

/* carte d'analyse, en débord sur la photo */
.ctx-card {
  position: absolute; left: calc(400 * var(--u)); top: calc(348 * var(--u));
  width: calc(194 * var(--u)); box-sizing: border-box;
  background: #fff; border: 1px solid var(--ctx-line);
  border-radius: calc(14 * var(--u)); padding: calc(14 * var(--u));
  display: flex; flex-direction: column; gap: calc(11 * var(--u));
  white-space: nowrap;
}
.ctx-card__title { font-size: calc(12.5 * var(--u)); font-weight: 700; line-height: 1.2; }
.ctx-card__sub   { font-size: calc(10.5 * var(--u)); font-weight: 500; color: var(--ctx-muted); margin-top: calc(2 * var(--u)); }
.ctx-card__list  { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.ctx-card__row   { display: flex; align-items: center; gap: calc(8 * var(--u));
                   font-size: calc(11 * var(--u)); font-weight: 500; color: #35473F; }
.ctx-card__row svg {
  width: calc(14 * var(--u)); height: calc(14 * var(--u)); flex-shrink: 0;
  fill: none; stroke: var(--ctx-accent); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* socle */
.ctx-base {
  position: absolute; left: calc(196 * var(--u)); top: calc(500 * var(--u));
  width: calc(368 * var(--u)); height: calc(56 * var(--u)); box-sizing: border-box;
  background: #fff; border: 1px solid var(--ctx-line);
  border-radius: calc(14 * var(--u));
  padding: calc(11 * var(--u)) calc(16 * var(--u)) calc(11 * var(--u)) calc(12 * var(--u));
  display: flex; align-items: center; gap: calc(12 * var(--u)); white-space: nowrap;
}
.ctx-base__icon {
  width: calc(34 * var(--u)); height: calc(34 * var(--u)); flex-shrink: 0;
  border-radius: calc(9 * var(--u)); background: var(--ctx-tint);
  display: grid; place-items: center;
}
.ctx-base__icon svg {
  width: calc(18 * var(--u)); height: calc(18 * var(--u));
  fill: none; stroke: var(--ctx-accent); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.ctx-base__body { display: flex; flex-direction: column; gap: calc(5 * var(--u)); flex-grow: 1; }
.ctx-base__head { display: flex; align-items: baseline; gap: calc(8 * var(--u)); }
.ctx-base__label { font-size: calc(13 * var(--u)); font-weight: 700; }
.ctx-base__sub   { font-size: calc(10.5 * var(--u)); font-weight: 500; color: var(--ctx-muted); }
.ctx-base__score { font-size: calc(16 * var(--u)); font-weight: 800; color: var(--ctx-accent); letter-spacing: -0.01em; }

.ctx-track { height: calc(4 * var(--u)); border-radius: 999px; background: var(--ctx-track); overflow: hidden; }
.ctx-track > i { display: block; width: 100%; height: 100%; border-radius: 999px; background: var(--ctx-accent); }

/* ─── Calage dans la colonne du site ────────────────────────────────────────
   Le bloc arrive avec un plancher de lisibilité de 0,78 px par unité, soit
   593 px de large minimum. La colonne du visuel épinglé en fait 570 : il en
   résultait une barre de défilement horizontale de 23 px À L'INTÉRIEUR du
   schéma, ce qui se lit comme un défaut.

   0,73 px le fait tenir exactement, avec une marge. Les libellés passent de
   13,5 à 9,9 px — une réduction de 6 %, invisible à l'œil, contre une barre
   de défilement qui, elle, se voit. */
.sticky-feature-visual .ctx-schema { --ctx-umin: 0.73px; }

/* ─── Alignement des pastilles ──────────────────────────────────────────────
   Les quatre pastilles d'entrée étaient ancrées PAR LEUR BORD DROIT, à des
   valeurs différentes (552, 540, 566, 548). Résultat : ni les bords gauches
   ni les bords droits ne s'alignaient, et le décalage suivait la longueur du
   libellé — « Requête client » ne tombait pas au même endroit que « Critères
   techniques ».

   On leur donne un bord gauche commun ET une largeur commune : les deux côtés
   s'alignent, et les fils peuvent tous partir de la même abscisse.
   La largeur est calée sur le libellé le plus long, avec un peu de marge. */
.ctx-in-1, .ctx-in-2, .ctx-in-3, .ctx-in-4 {
  left: calc(20 * var(--u));
  right: auto;
  width: calc(196 * var(--u));
}
/* Les deux pastilles de résultat étaient décalées de 14 px l'une par rapport
   à l'autre. Même traitement. */
.ctx-out-1, .ctx-out-2 {
  left: calc(574 * var(--u));
  width: calc(160 * var(--u));
}

/* ─── Traits du circuit en noir ─────────────────────────────────────────────
   Ils étaient en #D6E0DA, un gris-vert si pâle qu'il disparaissait sur le
   fond blanc. Une règle CSS l'emporte sur l'attribut `stroke` du SVG. */
.ctx-wires g { stroke: #171918 !important; }

/* ─── Bordures à l'encre ────────────────────────────────────────────────────
   Comme les fils : #E4EBE7 était un gris si pâle qu'il ne dessinait rien.
   Les pastilles, la carte d'analyse et le socle passent à l'encre du site.

   La pastille « Eco Pack » GARDE sa bordure verte : c'est le seul signal qui
   la désigne comme le meilleur résultat. Tout passer en noir la ferait
   disparaître dans le lot — l'objectif est l'inverse, et sur un fond où tout
   le reste est noir, son vert ressort davantage qu'avant. */
.ctx-schema { --ctx-line: #171918; }
.ctx-photo {
  border: 1px solid #171918;
  box-sizing: border-box;
}

/* ─── Alignement vertical des deux colonnes ─────────────────────────────────
   Mesuré : le texte de droite démarre à 1391, la première pastille du schéma
   à 1489. Le schéma paraissait donc « tomber » 98 px plus bas que le texte.

   L'écart vient de la scène elle-même : ses éléments commencent à 86 unités
   du haut, et le conteneur épinglé ajoute son propre centrage. On remonte le
   bloc d'autant, en UNITÉS de dessin plutôt qu'en pixels, pour que la
   correction suive l'échelle quand la colonne change de largeur. */
@media (min-width: 1000px) {
  /* `transform` et non `margin` : une marge negative reduit la hauteur du
     conteneur epingle, qui recalcule alors son centrage — le decalage se
     corrige lui-meme en boucle et surcorrige (mesure : -210 px au lieu de 0).
     Une transformation deplace le rendu sans toucher a la mise en page. */
  /* PIEGE : `var(--u)` est inutilisable ICI. Sa definition contient
     `100cqw`, et une unite de conteneur appliquee a l element qui EST le
     conteneur se resout sur un ancetre — la fenetre. Mesure : 2,53 px au lieu
     de 0,80, soit un decalage de 308 px au lieu de 98. La variable ne vaut
     que pour les enfants.
     On exprime donc le decalage en POURCENTAGE DE LA HAUTEUR du bloc, qui
     suit exactement la meme echelle : 98 px sur 481.

     CORRIGE ENSUITE : ce decalage sortait le schema AU-DESSUS de son
     conteneur epingle. Comme celui-ci se cale sous la barre de navigation,
     le haut du dessin passait dessous — 11 px ronges sur le second volet,
     et seulement 33 px de marge sur celui-ci. Le reglage retenu ne cale plus le sommet en haut mais CENTRE le dessin dans
     son cadre : dans une section a visuel epingle, le texte defile pendant
     que le schema reste, donc « aligner » les deux n a de sens qu a un
     instant precis. Un dessin centre tient a tous les moments du defilement.
     Marges mesurees : 22 px en haut, 79 en bas -> descendre de 51 px, soit
     8,3 % de la hauteur. */
  .sticky-feature-visual .ctx-schema { transform: translateY(-8.3%); }
}