/* FOND de la page « rideaux » = l'écran-héros de la page riche landing-v2 (https://relancia.org/), repris à l'identique
   (texte, téléphone Darci, halos, typo « affiche »). Pour changer de fond : remplacer <section class="fond"> dans index.html
   et ce fichier. Règles copiées de landing-v2/site/assets/css/site.css (section « héros », « halos », « cm-phone »). */
.fond{--display:clamp(2.6rem,.3rem + 6.4vw,7.4rem);--step-1:clamp(1.2rem,1.07rem + .63vw,1.56rem);
  isolation:isolate;display:flex;align-items:center;padding:calc(var(--nav-h) + clamp(24px,5vh,72px)) 0 clamp(32px,6vh,80px)}
.fond .conteneur{max-width:1320px}
.halos{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.halo{position:absolute;inset:0;opacity:.5}
.halo--cyan{background:radial-gradient(48vmax circle at 4% 0%,rgba(37,244,238,.16),rgba(37,244,238,.05) 55%,transparent 100%)}
.halo--rose{background:radial-gradient(52vmax circle at 98% 2%,rgba(254,44,85,.2),rgba(254,44,85,.06) 55%,transparent 100%)}
@media (min-width:1024px) and (hover:hover){
  .halo--cyan{animation:deriveA 14s ease-in-out infinite alternate}
  .halo--rose{animation:deriveB 11s ease-in-out infinite alternate}
}
@keyframes deriveA{to{transform:translate(3vmax,2vmax)}}
@keyframes deriveB{to{transform:translate(-3vmax,3vmax)}}

.fond__grille{width:100%;display:grid;gap:40px;align-items:center}
@media (min-width:900px){.fond__grille{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}}
.surtitre{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-stretch:108%;margin-bottom:14px}
.affiche{font-size:var(--display);font-weight:700;font-stretch:62%;letter-spacing:-.01em;line-height:.9;text-transform:uppercase}
.affiche .l{display:block;text-wrap:balance}
.pt{display:inline-block}
.pt--tk{color:var(--tk)}.pt--web{color:var(--web)}
.fond__sous{max-width:56ch;color:#cfcdc6;margin:26px 0 30px;font-size:var(--step-1);line-height:1.45}
.boutons{display:flex;flex-wrap:wrap;gap:12px}
.boutons .btn{min-height:48px;--acc:var(--tk)}
.micro{font-size:13px;color:var(--muted);margin-top:14px}

.fond__tel{display:flex;justify-content:center;perspective:900px}
.cm-phone{background:var(--panel);border:1px solid var(--line-2);border-radius:18px;padding:10px}
.cm-phone--heros{width:min(260px,62vw);box-shadow:0 30px 80px -30px rgba(254,44,85,.35),0 20px 60px rgba(0,0,0,.5);transform-style:preserve-3d}
.cm-phone__tete{display:flex;align-items:center;gap:8px;padding:2px 2px 9px}
.cm-phone__id{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.cm-phone__id b{font-size:13px;font-weight:600}
.cm-phone__id small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line-2);display:inline-flex;align-items:flex-end;justify-content:center;gap:2px;padding:8px 7px;flex:none}
.avatar i{width:3px;background:var(--fg);border-radius:1px;height:40%}
.avatar i:nth-child(2){height:100%;background:var(--tk)}
.avatar i:nth-child(3){height:65%}
.etat{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;margin-left:auto}
.etat::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.etat--live{color:var(--live)}
.cm-phone__ecran{position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#0d0f13}
.cm-phone__ecran img,.cm-phone__ecran video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.tel-video{opacity:0;transition:opacity .4s}
.tel-video.joue{opacity:1}
.cm-phone__pied{font-size:12px;color:var(--muted);padding:9px 2px 2px;min-height:26px}
@media (max-width:767.98px){
  .fond{padding-top:calc(var(--nav-h) + 20px);align-items:flex-start}
  .fond__tel .cm-phone--heros{width:200px}
}

/* entrée (comme landing-v2 : textes qui montent, téléphone qui arrive) */
.js .fond .hx,.js .fond .affiche .l{animation:monte .6s cubic-bezier(.16,1,.3,1) backwards}
.js .fond .affiche .l:nth-child(2){animation-delay:.06s}.js .fond .affiche .l:nth-child(3){animation-delay:.12s}
.js .fond .fond__sous{animation-delay:.18s}.js .fond .boutons{animation-delay:.24s}.js .fond .micro{animation-delay:.3s}
.js .fond .cm-phone--heros{animation:monteTel .9s cubic-bezier(.16,1,.3,1) .1s backwards}
@keyframes monte{from{opacity:0;transform:translateY(12px)}}
@keyframes monteTel{from{opacity:0;transform:translateY(40px)}}