/* ===== EBNL Banner — thème orchid (élégant & doux) ===== */
:root{ --ebnl-header-h: 74px } /* ajuste si ton header sticky est plus haut/bas */

#ebnlBanner.ebnlBanner{
  /* Palette dédiée */
  --accent:  #048ba2;     /* violet orchid */
  --accent2: #037f6e;     /* rose fuchsia */
  --grad:    linear-gradient(90deg,var(--accent),var(--accent2));
  --line:    #ece7ff;
  --chip:    #f3edff;
  --ink:     #0f172a;
  --ink-2:   #475569;

  position: fixed; z-index: 130;
  left: 50%; top: var(--ebnl-header-h);
  width: min(920px, 96vw);
  transform: translate(-50%, -18px);
  opacity: 0; pointer-events: none;

  background: linear-gradient(180deg,#ffffff,#fbf8ff);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 22px 48px rgba(1, 71, 104, 0.18);
  padding: 16px 16px 12px;
  overflow: hidden;
}

/* Ruban supérieur */
#ebnlBanner.ebnlBanner::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px; background: var(--grad);
}

/* Animation d’entrée (glisse du haut) */
#ebnlBanner.ebnlBanner.is-visible{
  animation: ebnl-slide-soft .5s cubic-bezier(.16,.84,.26,.99) forwards;
  pointer-events: auto;
}
@keyframes ebnl-slide-soft{
  0%   { transform: translate(-50%,-18px); opacity:0 }
  60%  { transform: translate(-50%,  2px); opacity:1 }
  100% { transform: translate(-50%,   0);  opacity:1 }
}
@media (prefers-reduced-motion:reduce){
  #ebnlBanner.ebnlBanner{ animation:none; transform:translate(-50%,0); opacity:1; pointer-events:auto }
}

.ebnlBClose{
  position:absolute; top:10px; right:10px;
  width:34px; height:34px; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:#1b2a55;
  font-size:20px; line-height:1; cursor:pointer; display:grid; place-items:center;
}
.ebnlBClose:hover{ box-shadow:0 10px 20px rgba(2,6,23,.10) }

.ebnlBHead{ padding:6px 38px 8px 6px; color: var(--ink) }
.ebnlBTag{
  display:inline-block; font-weight:800; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.22rem .5rem; border-radius:999px; border:1px solid var(--line);
  color:#5b31d3; background:linear-gradient(180deg,#fff,#f6f0ff);
}
#ebnlBTitle{ margin:.38rem 0 .1rem; font-size:clamp(18px,2.4vw,22px); font-weight:900; letter-spacing:-.01em }
.ebnlBLead{ margin:0 0 8px; color:#213147 }
.ebnlBLead .ebnlPhone{ color:#6a3fe5; text-decoration:underline }

/* Liste structurée */
.ebnlBList{
  list-style:none; margin:0; padding:0; display:grid; gap:10px;
}
.ebnlBItem{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff;
  opacity:0; transform: translateY(6px); /* pour le stagger */
  animation: ebnl-item-in .4s ease forwards;
}
.ebnlBItem:nth-child(1){ animation-delay:.06s }
.ebnlBItem:nth-child(2){ animation-delay:.12s }
.ebnlBItem:nth-child(3){ animation-delay:.18s }
@keyframes ebnl-item-in{ to{ opacity:1; transform:translateY(0) } }

.ebnlBDot{
  width:10px; height:10px; border-radius:999px; background: var(--grad);
  box-shadow:0 0 0 2px #efe6ff;
}
.ebnlBInfo b{ display:block; font-weight:800; color:var(--ink) }
.ebnlBSubtitle{ font-size:.9rem; color: var(--ink-2) }

/* Pastille date */
.ebnlBDate{
  display:grid; place-items:center; padding:.28rem .52rem; border-radius:999px;
  border:1px solid var(--line); background:linear-gradient(180deg,#fff,var(--chip));
  font-size:.88rem; font-weight:700; color:#5b31d3; white-space:nowrap;
}

/* CTA */
.ebnlBCTAs{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 4px }
.ebnlBtn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:.72rem 1.05rem; min-height:44px; border-radius:999px; font-weight:800; cursor:pointer; text-decoration:none;
  transition: box-shadow .25s ease, transform .08s ease;
}
.ebnlBtn--primary{
  background: var(--grad); color:#fff; border:1px solid transparent;
  box-shadow: 0 10px 24px rgba(124,58,237,.25);
}
.ebnlBtn--primary:hover{ box-shadow: 0 14px 30px rgba(124,58,237,.32) }
.ebnlBtn--ghost{
  background:#fff; color:#6a3fe5; border:1px solid #eadfff;
}
.ebnlBtn--ghost:hover{ border-color:#d9caff; background:#faf7ff }

/* Minimise → rond FAB */
#ebnlBanner.ebnlBanner.is-minimizing{
  animation: ebnl-minimize .36s cubic-bezier(.2,.7,.2,1) forwards;
  pointer-events: none;
}
@keyframes ebnl-minimize{
  0%   { transform: translate(-50%, 0) scale(1); opacity:1 }
  70%  { transform: translate(-50%, 12px) scale(.96); opacity:.5 }
  100% { transform: translate(-50%, -8px) scale(.90); opacity:0 }
}
#ebnlFab.ebnlFab{
  position: fixed; z-index: 131;
  left: clamp(12px, 2vw, 20px); bottom: clamp(14px, 2.4vw, 24px);
  width: 56px; height: 56px; border-radius: 999px;
  border: 1px solid #eadfff; background: var(--grad); color:#fff;
  display: none; place-items: center; cursor: pointer;
  box-shadow: 0 14px 32px rgba(124,58,237,.28), inset 0 0 0 0 rgba(255,255,255,.0);
  transform: scale(.9); opacity:.0;
  transition: opacity .28s ease, transform .28s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
#ebnlFab.ebnlFab.is-visible{ display:grid; opacity:1; transform: scale(1) }
#ebnlFab.ebnlFab:hover{ box-shadow: 0 18px 38px rgba(124,58,237,.34), inset 0 0 0 100vmax rgba(255,255,255,.05) }
#ebnlFab.ebnlFab:focus-visible{ outline:none; box-shadow: 0 0 0 4px rgba(124,58,237,.28), 0 14px 32px rgba(124,58,237,.28) }

@media (max-width:560px){
  #ebnlBanner.ebnlBanner{ left:8px; right:8px; width:auto; transform: translate(0,-18px) }
  #ebnlBanner.ebnlBanner.is-visible,
  #ebnlBanner.ebnlBanner.is-minimizing{ transform: translate(0,0) }
  .ebnlBItem{ grid-template-columns:auto 1fr; row-gap:6px }
  .ebnlBDate{ grid-column:1 / -1; justify-self:start }
  .ebnlBCTAs .ebnlBtn--primary{ flex:1 1 100% }
  .ebnlBCTAs .ebnlBtn--ghost{ flex:1 1 120px; text-align:center }
}

@media (prefers-reduced-motion:reduce){
  #ebnlFab.ebnlFab{ transition:none }
}



#ebnlBanner.ebnlBanner{
  will-change: transform, border-radius, opacity, box-shadow;
  transform-origin: top left;
}
#ebnlFab.ebnlFab{
  will-change: transform, opacity, box-shadow;
}

@media (prefers-reduced-motion: reduce){
  #ebnlBanner.ebnlBanner, #ebnlFab.ebnlFab{ transition: none; animation: none }
}
/* ===== Effet "balise avion" pour le FAB réduit ===== */
#ebnlFab.ebnlFab.beacon{
  /* base douce */
  box-shadow: 0 0 0 0 rgba(124,58,237,.0);
  animation: ebnl-beacon 2.6s infinite ease-out;
}
#ebnlFab.ebnlFab.beacon::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow: 0 0 0 0 rgba(255,255,255,.0);
  animation: ebnl-beacon-ring 2.6s infinite ease-out;
  pointer-events:none;
}

/* double clignotement (0% & 32%), puis pause — style “anti-collision” */
@keyframes ebnl-beacon{
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(0, 179, 255, 0) }
  2%   { transform: scale(1.06);box-shadow: 0 0 22px 10px rgba(0, 208, 255, 0.3) }
  6%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(0, 217, 255, 0) }
  32%  { transform: scale(1.06);box-shadow: 0 0 22px 10px rgba(0, 170, 255, 0.3) }
  36%  { transform: scale(1);   box-shadow: 0 0 0 0 rgba(0, 187, 255, 0) }
  100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(0, 174, 255, 0) }
}
@keyframes ebnl-beacon-ring{
  0%   { box-shadow: 0 0 0 0 rgba(2, 171, 255, 0) }
  2%   { box-shadow: 0 0 0 14px rgba(0, 251, 255, 0.22) }
  6%   { box-shadow: 0 0 0 0 rgba(68, 200, 252, 0) }
  32%  { box-shadow: 0 0 0 14px rgba(1, 170, 255, 0.22) }
  36%  { box-shadow: 0 0 0 0 rgba(0, 187, 255, 0) }
  100% { box-shadow: 0 0 0 0 rgba(0, 200, 255, 0) }
}

/* respect de l’accessibilité */
@media (prefers-reduced-motion: reduce){
  #ebnlFab.ebnlFab.beacon{ animation: none }
  #ebnlFab.ebnlFab.beacon::after{ animation: none }
}



/* ===== Bouton flottant "Revenir en haut" ===== */
/* (à intégrer dans ton CSS existant, hors EBNL Banner) */


/* petite pulsation optionnelle */
@keyframes toTop-breathe {
  0%,100% { transform: translateY(0) scale(1) }
  50%     { transform: translateY(-2px) scale(1.02) }
}
.toTop.is-visible:hover svg{ animation: toTop-breathe .9s ease both }

  :root{
    --maint-bg:#facc15;          /* jaune principal */
    --maint-fg:#1f2937;          /* texte foncé */
    --maint-accent:#f59e0b;      /* orange foncé */
    --maint-accent-2:#fde047;    /* jaune clair */
    --maint-line:#d97706;        /* bordure */
    --maint-stripe-dark:#d97706; /* bandes chantier */
    --maint-stripe-light:#f59e0b;
  }
  .maint-banner{
    position:fixed; left:50%; bottom:18px; transform:translate(-50%,10px);
    z-index:9999; display:flex; gap:14px; align-items:flex-start;
    max-width:min(820px,94vw); padding:16px 16px 12px; border-radius:16px;
    background:var(--maint-bg); color:var(--maint-fg); border:1px solid var(--maint-line);
    box-shadow:0 18px 38px rgba(2,6,23,.25);
    opacity:0; pointer-events:none; transition:opacity .35s ease, transform .35s ease;
  }
  .maint-banner.show{ opacity:1; transform:translate(-50%,0); pointer-events:auto }

  .maint-ico{
    width:44px; height:44px; border-radius:12px; background:#fff7cc;
    border:1px solid #f2c94c; display:grid; place-items:center; flex:0 0 auto;
  }
  .maint-ico svg{ width:28px; height:28px; color:#7c2d12 } /* brun */

  /* Grue animée (balancement) */
  .crane{ transform-origin:12px 6px }
  .hook{  transform-origin:18px 20px }
  .maint-banner.show .crane{ animation:crane-sway 3.6s ease-in-out infinite }
  .maint-banner.show .hook{  animation:hook-sway 3.6s ease-in-out infinite reverse }
  @keyframes crane-sway{ 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)} }
  @keyframes hook-sway { 0%,100%{transform:rotate(3deg)}  50%{transform:rotate(-3deg)} }

  .maint-content{ line-height:1.45 }
  .maint-title{ margin:0 0 2px; font-weight:900; letter-spacing:.01em }
  .maint-text{ margin:0; color:#374151 }
  .maint-actions{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap }
  .maint-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:.52rem .9rem; border-radius:999px; font-weight:800;
    border:1px solid #f2c94c; color:#1f2937;
    background:linear-gradient(90deg,var(--maint-accent),var(--maint-accent-2));
    text-decoration:none; box-shadow:0 6px 14px rgba(245,158,11,.35);
  }
  .maint-close{
    margin-left:6px; flex:0 0 auto; background:transparent; border:0; color:#7c2d12;
    width:34px; height:34px; border-radius:8px; cursor:pointer;
  }
  .maint-close:hover{ background:rgba(0,0,0,.06) }

  /* Bande rayée chantier en bas du bandeau */
  .maint-stripes{
    position:absolute; left:10px; right:10px; bottom:8px; height:5px; border-radius:6px;
    background:
      repeating-linear-gradient(135deg,
        var(--maint-stripe-dark) 0 14px,
        var(--maint-stripe-light) 14px 28px);
    overflow:hidden;
  }
  .maint-stripes::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
    transform:translateX(-100%);
  }
  .maint-banner.show .maint-stripes{ animation:stripes-move 8s linear infinite }
  .maint-banner.show .maint-stripes::after{ animation:sweep 2.6s linear infinite }
  @keyframes stripes-move{ from{background-position:0 0} to{background-position:280px 0} }
  @keyframes sweep{ 0%{transform:translateX(-100%)} 60%{transform:translateX(120%)} 100%{transform:translateX(120%)} }

  /* Barre de progression */
  .maint-progress{
    position:relative; margin-top:10px; width:100%; height:6px; border-radius:999px;
    background:rgba(0,0,0,.08); overflow:hidden;
  }
  .maint-progress > i{
    position:absolute; left:0; top:0; bottom:0; width:0%;
    background:linear-gradient(90deg,var(--maint-accent),var(--maint-accent-2));
    box-shadow:0 0 10px rgba(245,158,11,.45) inset;
  }

  @media (max-width:520px){
    .maint-banner{ padding:14px 12px 10px }
    .maint-ico{ width:40px; height:40px }
    .maint-ico svg{ width:24px; height:24px }
  }
  @media (prefers-reduced-motion:reduce){
    .maint-banner, .maint-banner.show{ transition:none }
    .maint-banner.show .crane,
    .maint-banner.show .hook,
    .maint-banner.show .maint-stripes,
    .maint-banner.show .maint-stripes::after{ animation:none !important }
  }