/* ============================================================================
   BIBLIOTHEQUE UI JABS  -  canvas.css
   Depend de : theme.css

   Les effets qui demandent une surface de dessin. C'est le dernier poste ou
   le catalogue etait en retrait, parce qu'il visait le hors-ligne strict.

   Tout est en WebGL et canvas 2D NATIFS : aucune bibliotheque, aucun CDN.
   Three.js ferait 600 Ko pour ce qui tient ici en 60 lignes.

   Regles tenues partout dans ce fichier :
   1. L'effet est DECORATIF : il se pose derriere le contenu, jamais a la
      place. Si le canvas ne se dessine pas, la page reste complete.
   2. Le rendu s'arrete des que le bloc sort du champ (IntersectionObserver).
      Un canvas qui tourne dans un onglet en arriere-plan vide une batterie.
   3. prefers-reduced-motion fige l'image sur une seule frame.
   4. Le canvas porte aria-hidden : il n'y a rien a y lire.
   ========================================================================= */

.cv {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 240px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #0d1017;
}
.cv canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Le titre reste dans le balisage pour la lecture et le referencement,
   meme quand seule la trame est visible (CNV-B3). */
.cv .sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cv__contenu { position: relative; z-index: 1; padding: var(--sp-6); text-align: center; color: #fff; }
.cv__contenu strong { display: block; font-size: clamp(20px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; text-wrap: balance; }
.cv__contenu span { display: block; margin-top: 8px; font-size: var(--fs-md); opacity: .76; }
.cv__note { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--c-text-muted); line-height: 1.5; }

/* ===========================================================================
   FAMILLE A  -  FONDS GENERATIFS
   ======================================================================== */

/* @v CNV-A1
@nom Degrade fluide en WebGL
@usage Une banniere dont le fond bouge lentement, sans video ni image. Le shader tient en trente lignes et pese zero octet de plus que le script : c'est ce qui remplace aujourd'hui la boucle video de 4 Mo.
@large
@html
<div class="cv" data-cv="fluide">
  <canvas aria-hidden="true"></canvas>
  <div class="cv__contenu">
    <strong>Votre facture de chauffage divisee par trois</strong>
    <span>Etude thermique offerte, aides deduites du devis</span>
  </div>
</div>
@tw WebGL natif : deux triangles, un fragment shader, aucune bibliotheque
@end */
/* Aucun style specifique : le socle .cv suffit. Voir js/canvas.js. */
/* @endv */

/* @v CNV-A2
@nom Champ de points reactif
@usage Une trame qui s'ecarte au passage du curseur. Sur un fond de section, elle donne de la matiere sans jamais gener la lecture du texte pose dessus.
@large
@html
<div class="cv cv--clair" data-cv="points">
  <canvas aria-hidden="true"></canvas>
  <div class="cv__contenu cv__contenu--sombre">
    <strong>1 240 installations depuis 2009</strong>
    <span>Deplacez le curseur sur la trame</span>
  </div>
</div>
@tw canvas 2D : une grille de points, deplacement inverse a la distance au curseur
@end */
.cv--clair { background: var(--c-surface); }
.cv__contenu--sombre { color: var(--c-text); }
.cv__contenu--sombre span { opacity: .6; }
/* @endv */

/* @v CNV-A3
@nom Nuee de particules
@usage Reliees entre elles quand elles se rapprochent. Tres vu, donc a n'employer que discret : peu de particules, lentes, faiblement contrastees.
@large
@html
<div class="cv" data-cv="particules">
  <canvas aria-hidden="true"></canvas>
  <div class="cv__contenu">
    <strong>Reseau d'artisans partenaires</strong>
    <span>42 poseurs en Ile-de-France</span>
  </div>
</div>
@tw canvas 2D : n particules, un trait entre deux points a moins de 110 px
@end */
/* @endv */

/* @v CNV-A4
@nom Ondes de bruit
@usage Des lignes qui ondulent selon un bruit continu. Le rendu evoque une carte topographique : registre technique, etude, mesure.
@large
@html
<div class="cv" data-cv="ondes">
  <canvas aria-hidden="true"></canvas>
  <div class="cv__contenu">
    <strong>Etude thermique du logement</strong>
    <span>Deperditions calculees piece par piece</span>
  </div>
</div>
@tw canvas 2D : 40 lignes, deplacement vertical par bruit sinusoidal compose
@end */
/* @endv */

/* ===========================================================================
   FAMILLE B  -  EFFETS SUR LE CONTENU
   ======================================================================== */

/* @v CNV-B1
@nom Revelation au curseur
@usage Deux versions d'une meme image, la seconde revelee dans un disque qui suit le curseur. Sert a montrer un avant / apres sans bouton ni curseur a faire glisser.
@large
@html
<div class="cv-reveler" data-cv-reveler>
  <div class="cv-reveler__bas"><span>Avant</span></div>
  <div class="cv-reveler__haut"><span>Apres</span></div>
</div>
@tw clip-path: circle(120px at var(--x) var(--y)) pilote au pointermove
@end */
.cv-reveler {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: crosshair;
}
.cv-reveler > div { position: absolute; inset: 0; display: grid; place-items: center; }
.cv-reveler__bas  { background: linear-gradient(140deg, #4a4038, #7a6a5a 60%, #b0a495); }
.cv-reveler__haut {
  background: linear-gradient(140deg, #2f5a45, #7aa88a 60%, #c9ddc4);
  /* Sans JavaScript, le disque reste au centre : les deux etats sont visibles. */
  clip-path: circle(110px at var(--x, 50%) var(--y, 50%));
  transition: clip-path 90ms linear;
}
.cv-reveler span {
  padding: 6px 13px;
  border-radius: var(--r-full);
  background: rgba(10,12,18,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
.cv-reveler__bas span { align-self: end; justify-self: start; margin: var(--sp-4); }
.cv-reveler__haut span { align-self: end; justify-self: end; margin: var(--sp-4); }
/* @endv */

/* @v CNV-B2
@nom Trainee du curseur
@usage Un trait qui suit le pointeur avec du retard. Signature de site vitrine ; sur un outil de travail, il devient vite fatigant.
@large
@html
<div class="cv cv--clair" data-cv="trainee">
  <canvas aria-hidden="true"></canvas>
  <div class="cv__contenu cv__contenu--sombre">
    <strong>Deplacez le curseur</strong>
    <span>La trainee s'efface en une seconde</span>
  </div>
</div>
@tw canvas 2D : file des 24 dernieres positions, epaisseur decroissante
@end */
/* @endv */

/* @v CNV-B3
@nom Texte en trame
@usage Un titre rendu en points plutot qu'en lettres pleines. Le texte reste dans le balisage pour la lecture et le referencement ; la trame n'est qu'un calque decoratif par-dessus.
@large
@html
<div class="cv cv--clair cv--texte" data-cv="trame" data-cv-texte="RENOVATION">
  <canvas aria-hidden="true"></canvas>
  <h2 class="sr-only">RENOVATION</h2>
</div>
@tw canvas 2D : le texte est dessine hors ecran, puis echantillonne en grille
@end */
.cv--texte { min-height: 190px; background: var(--c-surface); }
/* @endv */

/* @v CNV-B4
@nom Fond fige de secours
@usage Ce que voit l'utilisateur si le canvas ne demarre pas : WebGL indisponible, script bloque, ou mouvement reduit demande. Un degrade fixe, jamais un rectangle vide.
@large
@html
<div class="cv cv--repli">
  <div class="cv__contenu">
    <strong>Le contenu reste toujours complet</strong>
    <span>Aucun texte, aucune action ne depend du canvas</span>
  </div>
</div>
@tw le fond du conteneur est peint en CSS, le canvas se superpose s'il demarre
@end */
.cv--repli {
  background-color: #141a26;
  background-image:
    radial-gradient(at 16% 20%, #2f4a7a 0px, transparent 50%),
    radial-gradient(at 84% 26%, #6b3a5a 0px, transparent 46%),
    radial-gradient(at 62% 84%, #7a4a2f 0px, transparent 48%);
}
/* Tous les blocs .cv portent ce fond de repli : si le canvas ne se dessine
   pas, on obtient une banniere correcte plutot qu'un aplat noir. */
.cv {
  background-image:
    radial-gradient(at 16% 20%, #22354f 0px, transparent 52%),
    radial-gradient(at 84% 30%, #3d2a44 0px, transparent 48%);
}
.cv--clair { background-image: none; }
/* @endv */