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

   Ce qui remplace l'aplat de couleur. Une page dont tous les fonds sont des
   aplats parait toujours inachevee, quel que soit le soin apporte au reste.

   Regles tenues partout dans ce fichier :
   1. Une atmosphere se pose DERRIERE le contenu et ne le concurrence jamais :
      elle reste sous 12 % d'opacite quand du texte passe dessus.
   2. Tout est en CSS ou en SVG inline. Aucune image, aucune bibliotheque,
      donc aucun poids et une nettete parfaite a toute taille.
   3. Une seule atmosphere par ecran. Deux textures superposees font sale.
   ========================================================================= */

/* ===========================================================================
   FAMILLE A  -  MATIERES
   ======================================================================== */

/* @v ATM-A1
@nom Grain
@usage Le detail qui distingue un fond travaille d'un aplat. Un bruit SVG pose a 4 % casse la platitude d'un degrade sans se voir consciemment.
@large
@html
<div class="atm-duo">
  <div class="atm-vue" style="background:linear-gradient(140deg,#2b3a55,#5a4a6b 60%,#8a5a4a)">
    <span>Sans grain</span>
  </div>
  <div class="atm-vue atm-grain" style="background:linear-gradient(140deg,#2b3a55,#5a4a6b 60%,#8a5a4a)">
    <span>Avec grain</span>
  </div>
</div>
@tw ::after avec un feTurbulence SVG en data-URI, opacity .045, mix-blend-mode:overlay
@end */
.atm-grain { position: relative; isolation: isolate; }
.atm-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* @endv */

/* @v ATM-A2
@nom Degrade en mesh
@usage Trois a quatre taches de couleur floutees, superposees. Remplace le degrade lineaire, trop reconnaissable, par quelque chose qui ne se lit pas comme un outil.
@large
@html
<div class="atm-duo">
  <div class="atm-vue atm-mesh atm-grain"><span>Mesh chaud</span></div>
  <div class="atm-vue atm-mesh atm-mesh--froid atm-grain"><span>Mesh froid</span></div>
</div>
@tw plusieurs radial-gradient superposes, chacun a une position et une taille differentes
@end */
.atm-mesh {
  background-color: #2a2036;
  background-image:
    radial-gradient(at 18% 22%, #b4632e 0px, transparent 52%),
    radial-gradient(at 82% 18%, #7a3f6b 0px, transparent 48%),
    radial-gradient(at 68% 78%, #3f5a7a 0px, transparent 52%),
    radial-gradient(at 25% 82%, #8a4a3c 0px, transparent 45%);
}
.atm-mesh--froid {
  background-color: #16283a;
  background-image:
    radial-gradient(at 22% 18%, #2f6b7a 0px, transparent 50%),
    radial-gradient(at 78% 28%, #3a4a8a 0px, transparent 48%),
    radial-gradient(at 60% 82%, #2f7a6b 0px, transparent 50%),
    radial-gradient(at 15% 75%, #4a3a7a 0px, transparent 46%);
}
/* @endv */

/* @v ATM-A3
@nom Motifs
@usage Grille technique, points, diagonales, quadrillage de plan. Ils sont montres ici a pleine intensite pour etre visibles ; dans un projet on les descend a 4 ou 6 % d'opacite, ou ils donnent une assise sans attirer l'oeil.
@large
@html
<div class="atm-quatre">
  <div class="atm-vue atm-vue--clair atm-p-grille"><span>Grille</span></div>
  <div class="atm-vue atm-vue--clair atm-p-points"><span>Points</span></div>
  <div class="atm-vue atm-vue--clair atm-p-lignes"><span>Diagonales</span></div>
  <div class="atm-vue atm-vue--clair atm-p-plan"><span>Plan</span></div>
</div>
@tw repeating-linear-gradient / radial-gradient en background-size fixe
@end */
.atm-p-grille {
  background-image:
    linear-gradient(var(--c-border-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-border-strong) 1px, transparent 1px);
  background-size: 24px 24px;
}
.atm-p-points {
  background-image: radial-gradient(var(--c-border-strong) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
}
.atm-p-lignes {
  background-image: repeating-linear-gradient(-45deg, var(--c-border-strong) 0 1px, transparent 1px 10px);
}
.atm-p-plan {
  background-image:
    linear-gradient(var(--c-border-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-border-strong) 1px, transparent 1px),
    linear-gradient(var(--c-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-border) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
}
/* @endv */

/* @v ATM-A4
@nom Halos lumineux
@usage Deux ou trois taches floues derriere un contenu sombre. C'est l'atmosphere la plus repandue, donc la plus vite datee : la sauver en decalant les taches hors du cadre.
@large
@html
<div class="atm-vue atm-vue--haute atm-halos atm-grain">
  <div class="atm-contenu">
    <strong>Votre facture de chauffage divisee par trois</strong>
    <span>Etude thermique offerte, aides deduites du devis</span>
  </div>
</div>
@tw ::before/::after en blur-[90px] positionnes hors du cadre, overflow-hidden
@end */
.atm-halos { position: relative; isolation: isolate; overflow: hidden; background: #10141d; }
.atm-halos::before, .atm-halos::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
}
.atm-halos::before { width: 340px; height: 340px; top: -140px; left: -90px; background: #3a5f9e; opacity: .55; }
.atm-halos::after  { width: 300px; height: 300px; bottom: -130px; right: -70px; background: #9e5a3a; opacity: .5; }
.atm-contenu { position: relative; text-align: center; color: #fff; padding: var(--sp-6); }
.atm-contenu strong { display: block; font-size: clamp(20px, 3.4vw, 32px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; text-wrap: balance; }
.atm-contenu span { display: block; margin-top: 8px; font-size: var(--fs-md); opacity: .78; }
/* @endv */

/* @v ATM-A5
@nom Formes organiques
@usage Une tache aux bords irreguliers plutot qu'un cercle. Trois valeurs de border-radius differentes suffisent : au-dela, la forme devient une flaque.
@large
@html
<div class="atm-formes">
  <div class="atm-blob"></div>
  <div class="atm-blob atm-blob--2"></div>
  <div class="atm-blob atm-blob--3"></div>
</div>
@tw border-radius avec huit valeurs (elliptique) plutot qu'une seule
@end */
.atm-formes { display: flex; flex-wrap: wrap; gap: var(--sp-5); justify-content: center; padding: var(--sp-4) 0; }
.atm-blob {
  width: 150px; height: 150px;
  border-radius: 62% 38% 46% 54% / 54% 46% 54% 46%;
  background: linear-gradient(140deg, #d8853f, #a8543c);
  animation: atm-morph 14s ease-in-out infinite;
}
.atm-blob--2 { border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; background: linear-gradient(140deg, #3f7ea8, #3a4a8a); animation-duration: 17s; animation-direction: reverse; }
.atm-blob--3 { border-radius: 54% 46% 38% 62% / 62% 54% 46% 38%; background: linear-gradient(140deg, #3f9e7a, #2f6b5a); animation-duration: 20s; }
@keyframes atm-morph {
  0%, 100% { border-radius: 62% 38% 46% 54% / 54% 46% 54% 46%; }
  33%      { border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; }
  66%      { border-radius: 54% 46% 38% 62% / 62% 54% 46% 38%; }
}
/* @endv */

/* @v ATM-A6
@nom Bruit anime
@usage Un grain qui vibre tres legerement. A reserver a une banniere : c'est un cout de rendu permanent, coupe par prefers-reduced-motion.
@large
@html
<div class="atm-vue atm-vue--haute atm-mesh atm-bruit">
  <div class="atm-contenu"><strong>Grain en mouvement</strong><span>Deplacement de 4 px, 8 images par seconde</span></div>
</div>
@tw animation par pas (steps) sur la position du bruit, jamais en continu
@end */
.atm-bruit { position: relative; isolation: isolate; }
.atm-bruit::after {
  content: "";
  position: absolute;
  inset: -6px;
  pointer-events: none;
  opacity: .09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  /* steps() plutot qu'une interpolation continue : c'est ce qui donne
     l'impression de grain de pellicule et non de texture qui glisse. */
  animation: atm-vibre 700ms steps(6) infinite;
}
@keyframes atm-vibre {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3px, 2px); }
  40%  { transform: translate(2px, -3px); }
  60%  { transform: translate(-2px, -2px); }
  80%  { transform: translate(3px, 1px); }
  100% { transform: translate(0, 0); }
}
/* @endv */

/* ===========================================================================
   FAMILLE B  -  TRAITEMENTS
   ======================================================================== */

/* @v ATM-B1
@nom Duotone
@usage Ramener des photos disparates a une seule identite. Deux couleurs de marque remplacent les tons sombres et clairs : un fonds photo heteroclite devient coherent.
@large
@html
<div class="atm-quatre">
  <div class="atm-vue atm-photo1"><span>Origine</span></div>
  <div class="atm-vue atm-photo1 atm-duotone"><span>Duotone bleu</span></div>
  <div class="atm-vue atm-photo1 atm-duotone atm-duotone--chaud"><span>Duotone chaud</span></div>
  <div class="atm-vue atm-photo1 atm-nb"><span>Noir et blanc</span></div>
</div>
@tw grayscale + un calque en mix-blend-mode:color ou une paire de multiply/screen
@end */
.atm-photo1 { background: linear-gradient(140deg, #4a6fa5 0%, #8a6a4a 45%, #c9b48a 100%); }
.atm-duotone { position: relative; filter: grayscale(1) contrast(1.15); isolation: isolate; }
.atm-duotone::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(140deg, #1c2f5e, #4ec3d9);
  mix-blend-mode: color;
}
.atm-duotone--chaud::before { background: linear-gradient(140deg, #4a1c1c, #f0b45a); }
.atm-nb { filter: grayscale(1) contrast(1.08); }
/* @endv */

/* @v ATM-B2
@nom Vignettage et voile
@usage Poser du texte sur une image sans la retoucher. Le degre du voile se regle sur la zone occupee par le texte, pas sur l'image entiere.
@large
@html
<div class="atm-trois">
  <div class="atm-vue atm-photo1 atm-voile"><span>Voile du bas</span></div>
  <div class="atm-vue atm-photo1 atm-vignette"><span>Vignettage</span></div>
  <div class="atm-vue atm-photo1 atm-voile-total"><span>Voile complet</span></div>
</div>
@tw ::after avec un linear-gradient from-black/75 to-transparent
@end */
.atm-voile, .atm-vignette, .atm-voile-total { position: relative; }
.atm-voile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8,10,16,.82) 0%, rgba(8,10,16,.28) 42%, transparent 68%);
}
.atm-vignette::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 45%, transparent 38%, rgba(8,10,16,.62) 100%);
}
.atm-voile-total::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(8,10,16,.52);
}
/* @endv */

/* @v ATM-B3
@nom Ombres colorees
@usage Une ombre teintee de l'objet qu'elle porte plutot qu'un gris neutre. C'est le detail qui fait passer une carte de correcte a soignee.
@large
@html
<div class="atm-cartes">
  <div class="atm-c" style="--t:#2563eb"><b>Ombre neutre</b><span>rgba(16,24,40,.14)</span></div>
  <div class="atm-c atm-c--teinte" style="--t:#2563eb"><b>Ombre teintee</b><span>la couleur de l'objet, a 28 %</span></div>
  <div class="atm-c atm-c--teinte" style="--t:#c2410c"><b>Autre teinte</b><span>l'ombre suit la couleur</span></div>
</div>
@tw shadow-[0_12px_32px_-8px_var(--t)] avec la couleur de la carte
@end */
.atm-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-5); padding: var(--sp-3) 0 var(--sp-6); }
.atm-c {
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--t);
  color: #fff;
  box-shadow: 0 12px 30px -8px rgba(16,24,40,.3);
}
.atm-c--teinte { box-shadow: 0 14px 34px -8px color-mix(in srgb, var(--t) 62%, transparent); }
.atm-c b { display: block; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.atm-c span { display: block; margin-top: 4px; font-size: var(--fs-xs); opacity: .8; }
/* @endv */

/* @v ATM-B4
@nom Bordure lumineuse animee
@usage Un liser qui tourne autour d'un bloc. A garder pour un seul element : une offre mise en avant, une nouveaute. Deux blocs anime cote a cote se neutralisent.
@large
@html
<div class="atm-trois">
  <div class="atm-lueur"><div class="atm-lueur__int"><b>Formule Pro</b><span>Le plus choisi</span></div></div>
  <div class="atm-lueur atm-lueur--lent"><div class="atm-lueur__int"><b>Rotation lente</b><span>12 secondes</span></div></div>
  <div class="atm-lueur atm-lueur--fixe"><div class="atm-lueur__int"><b>Sans rotation</b><span>degrade fixe</span></div></div>
</div>
@tw conic-gradient sur un ::before en rotation, contenu opaque par-dessus
@end */
.atm-lueur {
  position: relative;
  padding: 2px;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
}
.atm-lueur::before {
  content: "";
  position: absolute;
  inset: -150%;
  z-index: -1;
  background: conic-gradient(from 0deg, transparent 0 250deg, var(--c-primary) 310deg, var(--c-accent) 360deg);
  animation: atm-tourne 5s linear infinite;
}
.atm-lueur--lent::before { animation-duration: 12s; }
.atm-lueur--fixe::before { animation: none; }
@keyframes atm-tourne { to { transform: rotate(360deg); } }
.atm-lueur__int {
  padding: var(--sp-5);
  border-radius: calc(var(--r-lg) - 2px);
  background: var(--c-surface);
  height: 100%;
}
.atm-lueur b { display: block; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--c-text); }
.atm-lueur span { display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--c-text-muted); }
/* @endv */

/* @v ATM-B5
@nom Separateurs de section
@usage Ce qui remplace le trait horizontal. Une vague, une diagonale ou une entaille marque le passage d'une section a l'autre sans ajouter de bloc.
@large
@html
<div class="atm-sep-demo">
  <div class="atm-sec atm-sec--diag"><span>Diagonale</span></div>
  <div class="atm-sec atm-sec--vague"><span>Vague</span></div>
  <div class="atm-sec atm-sec--entaille"><span>Entaille</span></div>
</div>
@tw clip-path: polygon(...) ou ellipse(...) sur la section suivante
@end */
.atm-sep-demo { display: flex; flex-direction: column; }
.atm-sec {
  display: grid;
  place-items: center;
  min-height: 110px;
  padding: var(--sp-5);
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
}
.atm-sec--diag     { background: #2b3a55; clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); margin-bottom: -1px; }
.atm-sec--vague    { background: #5a4a6b; clip-path: ellipse(140% 88% at 50% 12%); margin-bottom: -1px; padding-top: var(--sp-8); }
.atm-sec--entaille { background: #8a5a4a; clip-path: polygon(0 0, 44% 0, 50% 16%, 56% 0, 100% 0, 100% 100%, 0 100%); padding-top: var(--sp-8); }
/* @endv */

/* @v ATM-B6
@nom Fond de section complet
@usage L'assemblage : mesh, grain, motif et halo poses ensemble, dans le bon ordre et aux bonnes opacites. C'est le gabarit a copier pour une banniere.
@large
@html
<section class="atm-complet">
  <div class="atm-complet__motif" aria-hidden="true"></div>
  <div class="atm-contenu">
    <strong>Votre pompe a chaleur posee en trois semaines</strong>
    <span>Etude thermique offerte, aides deduites du devis, equipes salariees</span>
    <div class="demo-row" style="justify-content:center;margin-top:20px">
      <button class="btn btn--plein btn--lg">Demander mon devis</button>
      <button class="btn btn--lg-verre btn--lg">06 12 34 56 78</button>
    </div>
  </div>
</section>
@tw quatre couches : mesh (fond), motif (4 %), halos (blur), grain (7 %), contenu
@end */
.atm-complet {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: var(--sp-10) var(--sp-6);
  border-radius: var(--r-lg);
  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%);
}
/* Le motif, tres pale, donne une assise au degrade. */
.atm-complet__motif {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .06;
  background-image:
    linear-gradient(#fff 1px, transparent 1px),
    linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 46px 46px;
}
/* Le grain, en dernier, unifie l'ensemble. */
.atm-complet::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* @endv */

/* ---------------------------------------------------------------------------
   CADRES DE DEMONSTRATION (catalogue uniquement)
   ------------------------------------------------------------------------ */
.atm-duo    { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.atm-trois  { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); }
.atm-quatre { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.atm-vue {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 130px;
  border-radius: var(--r-md);
  overflow: hidden;
}
.atm-vue--haute { min-height: 220px; }
.atm-vue--clair { background: var(--c-surface); border: 1px solid var(--c-border); }
.atm-vue > span {
  position: relative;
  z-index: 2;
  padding: 5px 11px;
  border-radius: var(--r-full);
  background: rgba(10,12,18,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.atm-vue--clair > span { background: var(--c-text); }
@media (max-width: 560px) { .atm-duo { grid-template-columns: 1fr; } }