/* ============================================================
   IYA Solutions — HERO PREMIUM (clair / habillé)
   Fond blanc travaillé + halo cobalt doux + carte "agenda RDV".
   Couleurs = charte officielle. Surcharge la section .hero.
   ============================================================ */

.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(70% 55% at 88% 6%, rgba(0,0,163,.10), transparent 60%),
    radial-gradient(55% 50% at 6% 100%, rgba(224,96,17,.07), transparent 60%),
    linear-gradient(180deg,#FFFFFF 0%, #F4F7FF 70%, #EEF3FF 100%);
  color:var(--anthracite);
  padding:9rem 0 5rem;
}
/* grille de points très subtile */
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:-2;
  background-image:radial-gradient(rgba(11,27,58,.06) 1px, transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(75% 65% at 70% 25%, #000 30%, transparent 80%);
          mask-image:radial-gradient(75% 65% at 70% 25%, #000 30%, transparent 80%);
}
/* halo cobalt doux flottant */
.hero::after{
  content:"";
  position:absolute; z-index:-1;
  width:560px; height:560px; right:-100px; top:-140px;
  background:radial-gradient(circle, rgba(0,0,163,.16) 0%, rgba(0,0,163,0) 65%);
  filter:blur(10px);
  animation:hxGlow 10s ease-in-out infinite alternate;
}
@keyframes hxGlow{ from{ transform:translateY(0) scale(1); opacity:.8 } to{ transform:translateY(26px) scale(1.08); opacity:1 } }

/* filigrane monogramme IYA (marque, discret) */
.hx-watermark{
  position:absolute; z-index:-1; right:-40px; bottom:-70px;
  width:340px; height:auto; opacity:.05; color:#0000A3; pointer-events:none;
}

.hero .hero-inner{ max-width:none; display:flex; flex-direction:column; }

/* badge + boutons : centrés sur TOUTE la largeur de la page */
.hero-inner > .hx-badge{ align-self:center; }
.hero-inner > .hx-actions{ align-self:center; justify-content:center; margin-top:2.6rem; }

.hx-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(315px,365px);
  align-items:center;
  gap:clamp(1.4rem,3vw,2.75rem);
}

/* colonne texte : titre/accroche/réassurances à gauche */
.hx-copy{ display:flex; flex-direction:column; align-items:flex-start; }

/* ---------- colonne texte ---------- */
.hx-badge{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:'Geist Mono',monospace; font-size:.74rem; letter-spacing:.05em;
  color:var(--anthracite); text-transform:uppercase;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 4px 16px -8px rgba(11,27,58,.25);
  padding:.5rem 1rem; border-radius:100px; margin-bottom:1.8rem;
}
.hx-badge .dot{ width:7px; height:7px; border-radius:50%; background:#E06011; box-shadow:0 0 0 4px rgba(224,96,17,.18); }

.hero .hx-title{
  font-family:'Geist',sans-serif; font-weight:800;
  font-size:clamp(2.6rem,5.2vw,4.5rem); line-height:1.04; letter-spacing:-.035em;
  color:#0B1B3A; margin:0 0 1.4rem;
}
/* desktop : chaque phrase du titre tient sur une seule ligne */
@media (min-width:981px){
  .hero .hx-title{ white-space:nowrap; }
}
/* mot fort en bloc orange plein, façon .blk du site */
.hero .hx-title .accent{
  display:inline-block;
  background:#E06011; color:#fff;
  -webkit-text-fill-color:#fff;
  padding:0 .14em;
}

.hero .hx-lead{
  font-family:'Montserrat',sans-serif; font-size:clamp(1rem,1.15vw,1.12rem);
  line-height:1.6; color:var(--text-muted); max-width:36rem; margin:0 0 2rem;
}

/* boutons sous le sous-titre */
.hx-copy .hx-actions{ margin-top:.4rem; }
/* réassurance : texte simple sous les boutons (sans carte) */
.hx-trust{
  display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:1.4rem;
  margin:1.7rem 0 0; padding:0;
  background:none; border:none; box-shadow:none;
  font-family:'Geist Mono',monospace; font-size:.95rem; color:var(--text-muted);
}
.hx-trust span{ display:inline-flex; align-items:center; gap:.6rem; }
.hx-trust-row{ display:flex; gap:1.4rem; }
.hx-trust svg{ width:20px; height:20px; color:#E06011; flex:none; }

.hx-actions{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }
.hx-actions .btn{ font-size:.98rem; padding:1rem 1.7rem; border-radius:12px; }
.hx-actions .btn-cobalt{
  background:#0000A3; color:#fff;
  box-shadow:0 16px 38px -14px rgba(0,0,163,.6), inset 0 1px 0 rgba(255,255,255,.2);
}
.hx-actions .btn-cobalt:hover{ background:#0000c4; transform:translateY(-2px); }
.hx-ghost{
  background:#fff; color:var(--anthracite);
  border:1px solid var(--border-strong);
  box-shadow:0 4px 14px -8px rgba(11,27,58,.2);
}
.hx-ghost:hover{ background:#F8FAFC; transform:translateY(-2px); }

.hx-note{ margin:1.6rem 0 0; font-family:'Geist Mono',monospace; font-size:.74rem; color:var(--text-dim); letter-spacing:.02em; }

/* ---------- colonne visuel : agenda RDV ---------- */
.hx-visual{ position:relative; }
.hx-visual::before{
  content:""; position:absolute; inset:-14% -8% -8% -4%; z-index:0;
  background:radial-gradient(60% 55% at 62% 42%, rgba(0,0,163,.16), transparent 70%);
  filter:blur(8px);
}
.hx-card{
  position:relative; z-index:1;
  max-width:365px; margin-left:auto;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px; padding:1.15rem 1.15rem 1.3rem;
  box-shadow:0 40px 80px -30px rgba(11,27,58,.4), 0 8px 24px -12px rgba(11,27,58,.18);
  animation:hxFloat 7s ease-in-out infinite alternate;
}
@keyframes hxFloat{ from{ transform:translateY(0) } to{ transform:translateY(-14px) } }

.hx-card-top{ display:flex; align-items:center; justify-content:space-between; padding:.1rem .3rem 1rem; border-bottom:1px solid var(--border); margin-bottom:1rem; }
.hx-brand{ display:inline-flex; align-items:center; gap:.55rem; font-family:'Geist',sans-serif; font-weight:600; font-size:.9rem; color:#0B1B3A; letter-spacing:-.01em; }
.hx-cal{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:rgba(0,0,163,.10); color:#0000A3; flex:none; }
.hx-cal svg{ width:17px; height:17px; }
.hx-live{ display:inline-flex; align-items:center; gap:.4rem; font-family:'Geist Mono',monospace; font-size:.68rem; color:#059669; text-transform:uppercase; letter-spacing:.04em; }
.hx-live i{ width:7px; height:7px; border-radius:50%; background:#059669; box-shadow:0 0 0 3px rgba(5,150,105,.18); display:block; }

.hx-row{ display:flex; align-items:center; gap:.8rem; padding:.7rem .5rem; border-radius:10px; }
.hx-row + .hx-row{ margin-top:.1rem; }
.hx-row.is-hot{ background:#EEF2FF; border:1px solid rgba(0,0,163,.18); }
.hx-date{ width:46px; flex:none; text-align:center; font-family:'Geist',sans-serif; line-height:1; }
.hx-date b{ display:block; font-size:1.1rem; font-weight:800; color:#0B1B3A; }
.hx-date small{ font-family:'Geist Mono',monospace; font-size:.6rem; text-transform:uppercase; color:#8A92A5; letter-spacing:.06em; }
.hx-meta{ flex:1; min-width:0; }
.hx-meta b{ display:block; font-family:'Montserrat',sans-serif; font-weight:600; font-size:.84rem; color:#0B1B3A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hx-meta small{ font-family:'Geist Mono',monospace; font-size:.68rem; color:#64748B; }
.hx-tag{ font-family:'Geist Mono',monospace; font-size:.6rem; text-transform:uppercase; letter-spacing:.05em; padding:.28rem .55rem; border-radius:100px; flex:none; }
.hx-tag.ok{ color:#059669; background:#ECFDF5; border:1px solid rgba(5,150,105,.3); }
.hx-tag.q{ color:#0000A3; background:#E8EFFF; border:1px solid rgba(0,0,163,.25); }

.hx-card-foot{ display:flex; align-items:flex-end; justify-content:space-between; margin-top:1.1rem; padding:.95rem .5rem 0; border-top:1px solid var(--border); }
.hx-kpi small{ display:block; font-family:'Geist Mono',monospace; font-size:.64rem; color:#8A92A5; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.25rem; }
.hx-kpi b{ font-family:'Geist',sans-serif; font-weight:800; font-size:1.55rem; color:#0B1B3A; letter-spacing:-.02em; }
.hx-kpi b .up{ font-size:.78rem; color:#059669; margin-left:.3rem; }
.hx-spark{ display:flex; align-items:flex-end; gap:5px; height:42px; }
.hx-spark i{ width:8px; border-radius:3px 3px 0 0; background:linear-gradient(180deg,#2D5BFF,#0000A3); display:block; }

.hx-disclaim{ margin:.7rem .3rem 0; font-family:'Geist Mono',monospace; font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:#A6AEC0; text-align:right; }

/* carte flottante "stat" */
.hx-float{
  position:absolute; z-index:2; left:-26px; bottom:18px;
  display:flex; align-items:center; gap:.7rem;
  background:#fff; border:1px solid var(--border);
  padding:.75rem .95rem; border-radius:14px;
  box-shadow:0 24px 50px -20px rgba(11,27,58,.45);
  animation:hxFloat 7s ease-in-out infinite alternate-reverse;
}
.hx-float .ic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:rgba(224,96,17,.12); color:#E06011; flex:none; }
.hx-float .ic svg{ width:18px; height:18px; }
.hx-float b{ display:block; font-family:'Geist',sans-serif; font-weight:800; font-size:1.05rem; color:#0B1B3A; line-height:1; }
.hx-float small{ font-family:'Geist Mono',monospace; font-size:.64rem; color:#64748B; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero{ padding:7.5rem 0 3.5rem; }
  .hx-grid{ grid-template-columns:1fr; gap:3rem; }
  .hx-visual{ max-width:460px; margin:0 auto; width:100%; }
  .hx-float{ left:0; }
  .hx-watermark{ display:none; }
}
@media (max-width:560px){
  .hx-actions{ width:100%; }
  .hx-actions .btn{ flex:1; justify-content:center; }
  .hx-float{ display:none; }
}