/* ═══════════════════════════════════════════════════════════
   hero-pillar.css — hero dark en haut de la vue tâches (V5)
   Design sombre avec gradient piloté par --pil-hero-bg et accent
   couleur pilier via --pil-color. Utilise color-mix() pour les
   halos/borders teintés.
   Dépend de base.css (--pil-* variables).
   ═══════════════════════════════════════════════════════════ */

/* ═══ HERO PILIER — design dark avec accents couleur pilier ═══ */
.rs-hero{
  display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;
  background:var(--pil-hero-bg, linear-gradient(135deg,#1a0b1f 0%,#2d0a2f 100%));
  border:none;border-radius:20px;padding:2rem 2.25rem 2rem 2.5rem;margin-bottom:1.3rem;
  position:relative;overflow:hidden;color:#fff
}
.rs-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 90% 50%, color-mix(in srgb, var(--pil-color) 25%, transparent) 0%, transparent 55%);
  pointer-events:none
}
.rs-hero > *{position:relative;z-index:1}

.rs-hero-txt{min-width:0;max-width:660px}

.rs-hero-step{
  display:inline-block;background:rgba(255,255,255,.08);border:1px solid var(--pil-color);
  color:#fff;border-radius:100px;padding:4px 14px;font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem;font-family:'Outfit',sans-serif
}

.rs-hero-title{
  font-family:'Outfit',sans-serif;font-size:1.95rem;font-weight:800;line-height:1.15;
  letter-spacing:-.025em;margin-bottom:.95rem;color:#fff
}
.rs-hero-title-accent{
  background:linear-gradient(135deg, var(--pil-color) 0%, color-mix(in srgb, var(--pil-color) 70%, white) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;color:transparent;font-weight:800
}

.rs-hero-desc{
  color:rgba(255,255,255,.82);font-size:13.5px;line-height:1.6;
  max-width:520px;margin-bottom:1.35rem
}

.rs-hero-bullets{display:flex;gap:1.6rem;flex-wrap:wrap}
.rs-hero-bullet{display:flex;align-items:center;gap:10px;min-width:0}
.rs-hero-bullet-icon{
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1.5px solid var(--pil-color);
  color:var(--pil-color);
  display:flex;align-items:center;justify-content:center;flex-shrink:0
}
.rs-hero-bullet-icon .ico{width:14px;height:14px}
.rs-hero-bullet-txt{min-width:0;line-height:1.25}
.rs-hero-bullet-h{font-size:12px;font-weight:700;color:#fff;margin-bottom:1px;font-family:'Outfit',sans-serif}
.rs-hero-bullet-p{font-size:10.5px;color:rgba(255,255,255,.6);line-height:1.35}

/* Vidéo côté droit */
.rs-hero-video{position:relative;display:flex;flex-direction:column;align-items:center;gap:.75rem;flex-shrink:0;padding-right:.5rem}
.rs-hero-video-wrap{position:relative;display:flex;align-items:center;justify-content:center}
.rs-hero-video-btn{
  width:110px;height:110px;border-radius:50%;background:var(--pil-color);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 14px 42px color-mix(in srgb, var(--pil-color) 55%, transparent),
             0 0 0 8px color-mix(in srgb, var(--pil-color) 12%, transparent);
  transition:transform .2s
}
.rs-hero-video-btn:hover{transform:scale(1.05)}
.rs-hero-video-btn svg{width:36px;height:36px;margin-left:5px;fill:#fff;stroke:none}
.rs-hero-video-scribble{
  position:absolute;left:calc(100% + 10px);top:8px;
  font-family:'Caveat',cursive;font-size:1.1rem;color:rgba(255,255,255,.78);
  line-height:1.2;white-space:nowrap;text-align:left
}
.rs-hero-video-scribble::before{
  content:'';position:absolute;right:calc(100% + 4px);top:10px;
  width:32px;height:20px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20' fill='none' stroke='white' stroke-opacity='.55' stroke-width='1.5' stroke-linecap='round'><path d='M30 3 C 18 4, 8 10, 4 17 M4 17 L 10 13 M4 17 L 10 18'/></svg>");
  background-repeat:no-repeat;background-size:contain
}
.rs-hero-video-dur{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--pil-color);font-size:12.5px;font-weight:600;margin-top:.1rem
}
.rs-hero-video-dur-play{
  width:16px;height:16px;border-radius:50%;background:var(--pil-color);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0
}
.rs-hero-video-dur-play svg{width:6px;height:6px;fill:#fff}

@media(max-width:1200px){
  .rs-hero-title{font-size:1.7rem}
  .rs-hero-video-btn{width:96px;height:96px}
  .rs-hero-video-scribble{display:none}
}
@media(max-width:1000px){
  .rs-hero{grid-template-columns:1fr;padding:1.5rem 1.5rem 1.75rem}
  .rs-hero-video{align-items:flex-start}
  .rs-hero-bullets{gap:1rem}
}