/* ============================================================
   SÉPARATEUR DE SECTION — la couture entre deux bandes
   NOUVEAU COMPOSANT (bloc 3 de l'É4, 06/08). MANQUE DU REGISTRE v1, trouvé au
   relevé du live et pas avant : le relevé de DA avait catalogué les couleurs,
   les rayons et les ombres, jamais les COUTURES. Or l'accueil en porte cinq, et
   ce sont elles qui donnent au site son rythme de page — sans elles, les bandes
   s'empilent en blocs francs et la page change de caractère.

   RELEVÉ (sonde `probe-home-details.js`, 06/08, live 1440) :
     bas de « Chiffres clés »  courbe    225 px   #e0eaec
     haut de « À propos »      courbe    159 px   #e0eaec
     bas de « Avantages »      montagnes 160 px   #f5f8f9
     bas de « Bureau »         montagnes 160 px   #e0eaec
     haut de « Événements »    montagnes 160 px   #e0eaec
   La couleur d'un séparateur est TOUJOURS celle de la section voisine : c'est
   elle qui déborde. Le composant ne la choisit pas, la page la lui passe par
   `--sep-fill`.

   PROVENANCE DES TRACÉS : ce sont les silhouettes rendues aujourd'hui par les
   séparateurs Kadence de ce site (GPL, sous licence du client). Elles sont
   reprises telles quelles pour que la refonte soit à l'identique ; les
   redessiner est une décision de DA, pas de production — SIGNALÉE AU GATE.

   Le SVG est étiré (`preserveAspectRatio="none"`) : la silhouette suit la
   largeur de l'écran, sa hauteur reste pilotée par `--sep-h`.
   ============================================================ */

.lcdi-sep {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: var(--sep-h, 160px);
  pointer-events: none;
  line-height: 0;                 /* sans ça, le SVG inline traîne la ligne de base */
  overflow: hidden;
}
.lcdi-sep svg { display: block; width: 100%; height: 100%; }
.lcdi-sep path { fill: var(--sep-fill, var(--surface-warm)); }

/* La couture du bas déborde SOUS la section, celle du haut AU-DESSUS d'elle :
   dans les deux cas la silhouette mord sur la voisine, jamais sur le contenu. */
.lcdi-sep--bas  { bottom: 0; }
.lcdi-sep--haut { top: 0; }

/* Même tracé, retourné : une crête de montagne vue d'en dessous est la même
   crête. Écrire deux fichiers de tracés pour ça serait de la duplication. */
.lcdi-sep--haut svg { transform: scaleY(-1); }

/* Le second plan des montagnes, en retrait */
.lcdi-sep__arriere { opacity: .4; }

/* Sur mobile, une couture de 160 px mange un tiers de l'écran : elle se
   resserre, elle ne disparaît pas (c'est une signature, pas un décor). */
@media (max-width: 767px) {
  .lcdi-sep { height: calc(var(--sep-h, 160px) * .45); }
}