/* ============================================
   Page /site-internet/ — "Landing Page" offer.
   Réutilise les tokens, .panel, .cta de style.css.
   ============================================ */

.si-hero{
  max-width:900px; margin:0 auto;
  padding: clamp(2.5rem,6vw,4rem) 2rem 1rem;
  text-align:left;
}
.si-hero h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.9rem,4.4vw,2.7rem);
  line-height:1.15; margin:0 0 1.1rem;
  color:var(--navy);
}
.si-hero p{
  font-size:1.05rem; color:var(--gray); line-height:1.75;
  max-width:64ch; margin:0 0 1rem;
}
.si-hero p strong{ color:var(--navy); }

/* ============================================
   Bloc 500 € TTC
   ============================================ */
.si-price{
  position:relative;
  max-width:900px; margin:0 auto;
  background:linear-gradient(135deg,var(--navy),#0a2d68);
  border-radius:28px;
  padding:2.6rem 2rem;
  overflow:hidden;
  color:#fff;
}
.si-price__deco{
  position:absolute; width:64px; height:64px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; opacity:0.9;
  animation: float 4s ease-in-out infinite;
}
.si-price__deco--1{ top:-14px; right:8%; background:var(--obj-4, #F5A623); transform:rotate(-8deg); }
.si-price__deco--2{ bottom:-16px; left:6%; background:var(--obj-2, #18ABDA); transform:rotate(10deg); animation-delay:-1.4s; }
.si-price__deco--3{ top:38%; right:-14px; background:var(--obj-5, #E84D8A); width:44px; height:44px; font-size:1.2rem; animation-delay:-2.2s; }

.si-price__number{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.6rem,7vw,4.2rem); line-height:1;
  margin:0 0 0.3rem;
  animation: bounce-in 0.8s cubic-bezier(0.22,1,0.36,1) both;
}
.si-price__sub{ font-size:1rem; opacity:0.85; margin:0 0 1.5rem; }
.si-price__punch{
  font-family:var(--font-display); font-weight:600; font-size:1.15rem;
  margin:0 0 1.5rem; max-width:46ch; line-height:1.5;
}
.si-price__list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:0.6rem 1.4rem;
  max-width:640px;
}
.si-price__list li{
  font-size:0.92rem; opacity:0.92; padding-left:1.3rem; position:relative;
}
.si-price__list li::before{
  content:'✓'; position:absolute; left:0; color:var(--cyan); font-weight:700;
}
@media (max-width:600px){
  .si-price__list{ grid-template-columns:1fr; }
}

/* ============================================
   Switch 19€ / 99€
   ============================================ */
.si-toggle-wrap{ max-width:900px; margin:0 auto; }

.si-toggle{
  position:relative;
  display:inline-flex; background:var(--bg-soft); border-radius:999px;
  padding:5px; margin-bottom:1.6rem;
}
.si-toggle__highlight{
  position:absolute; top:5px; left:5px; bottom:5px;
  width:calc(50% - 5px); border-radius:999px;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  transition: transform 0.3s cubic-bezier(.34,1.2,.4,1);
  box-shadow:0 6px 14px rgba(3,128,246,0.28);
}
.si-toggle.is-99 .si-toggle__highlight{ transform: translateX(100%); }
.si-toggle__btn{
  position:relative; z-index:1;
  border:none; background:none; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:0.95rem;
  padding:0.75rem 1.6rem; border-radius:999px;
  color:var(--navy); transition: color 0.25s ease;
  min-width:120px;
}
.si-toggle.is-19 .si-toggle__btn[data-plan="19"],
.si-toggle.is-99 .si-toggle__btn[data-plan="99"]{ color:#fff; }

.si-panels{ position:relative; }
.si-panel{
  display:none;
  background:#fff; border:1px solid var(--line); border-radius:22px;
  padding:1.8rem 1.6rem;
  animation: si-panel-in 0.35s ease both;
}
.si-panel.is-active{ display:block; }
@keyframes si-panel-in{
  0%{ opacity:0; transform: translateY(8px); }
  100%{ opacity:1; transform:none; }
}
.si-panel__price{
  font-family:var(--font-display); font-weight:700; font-size:1.7rem; color:var(--navy);
  margin:0 0 0.3rem;
}
.si-panel__tag{
  display:inline-block; font-size:0.78rem; font-weight:600; color:#fff;
  background:var(--navy); padding:0.3rem 0.8rem; border-radius:999px;
  margin-bottom:1rem;
}
.si-panel__tag--live{ background:#2ECC71; }
.si-panel__list{
  list-style:none; margin:0 0 1rem; padding:0;
  display:grid; gap:0.55rem;
}
.si-panel__list li{
  font-size:0.94rem; color:var(--navy); padding-left:1.4rem; position:relative;
}
.si-panel__list li::before{
  content:'—'; position:absolute; left:0; color:var(--blue); font-weight:700;
}
.si-panel__note{
  font-size:0.9rem; color:var(--gray); font-style:italic; margin:0.6rem 0 0;
}
.si-panel__punch{
  font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--navy);
  margin:0.9rem 0 0;
}

.si-points-note{
  max-width:60ch; margin:1rem auto 0;
  font-size:0.82rem; color:var(--gray); line-height:1.6;
}

/* ============================================
   Pré-devis — intro + assistant en une carte
   ============================================ */
.si-predevis-intro{ max-width:70ch; }

.si-wizard{
  max-width:640px; margin:0 auto;
  background:#fff; border:1px solid var(--line); border-radius:24px;
  padding:1.8rem 1.6rem;
  min-height:340px;
  display:flex; flex-direction:column;
}
.si-wizard__progress{
  display:flex; align-items:center; justify-content:center; gap:0.4rem;
  margin-bottom:1.4rem;
}
.si-wizard__dot{
  width:8px; height:8px; border-radius:50%; background:var(--line);
  transition: background 0.2s ease, transform 0.2s ease;
}
.si-wizard__dot.is-done{ background:var(--cyan); }
.si-wizard__dot.is-current{ background:var(--blue); transform:scale(1.35); }

.si-wizard__body{ flex:1; display:flex; flex-direction:column; }
.si-wizard__step{ display:none; flex:1; flex-direction:column; }
.si-wizard__step.is-active{ display:flex; animation: si-panel-in 0.3s ease both; }

.si-wizard__question{
  font-family:var(--font-display); font-weight:600; font-size:1.15rem;
  color:var(--navy); margin:0 0 1.2rem; text-align:center;
}
.si-wizard__choices{
  display:flex; flex-wrap:wrap; gap:0.6rem; justify-content:center;
  margin-bottom:1rem;
}
.si-wizard__choice{
  border:1.5px solid var(--line); background:#fff; border-radius:14px;
  padding:0.7rem 1.1rem; font-size:0.9rem; color:var(--navy);
  cursor:pointer; font-family:inherit;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.si-wizard__choice:hover{ transform: translateY(-2px); }
.si-wizard__choice.is-selected{
  border-color:var(--blue); background:rgba(3,128,246,0.08); color:var(--blue); font-weight:600;
}
.si-wizard__continue{
  margin:0.6rem auto 0; display:block;
}
.si-wizard__back{
  align-self:flex-start; background:none; border:none; color:var(--gray);
  font-size:0.82rem; cursor:pointer; padding:0; margin-bottom:0.6rem;
  text-decoration:underline;
}
.si-wizard__fields{
  display:grid; grid-template-columns:1fr 1fr; gap:0.9rem; margin-bottom:1rem;
}
@media (max-width:520px){ .si-wizard__fields{ grid-template-columns:1fr; } }
.si-wizard__fields label{
  display:flex; flex-direction:column; gap:0.35rem;
  font-size:0.8rem; color:var(--gray);
}
.si-wizard__fields input{
  font-family:var(--font-body); font-size:0.95rem; color:var(--navy);
  border:1px solid var(--line); border-radius:10px; padding:0.65rem 0.8rem;
}
.si-wizard__submit{ margin-top:auto; }
.si-wizard__status{ font-size:0.85rem; margin-top:0.7rem; text-align:center; }
.si-wizard__status.is-error{ color:#C43D3D; }
.si-wizard__status.is-ok{ color:#1f9e59; font-weight:600; }

/* ============================================
   Démo actualités en trois clics
   ============================================ */
.si-actu{
  max-width:560px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:1.2rem;
}
.si-actu__card{
  width:100%; background:#fff; border:1px solid var(--line); border-radius:20px;
  overflow:hidden; box-shadow:0 14px 30px rgba(3,25,67,0.08);
}
.si-actu__img{
  height:150px; width:100%;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:2rem;
}
.si-actu__body{ padding:1.2rem 1.3rem; }
.si-actu__date{ font-size:0.76rem; color:var(--gray); margin:0 0 0.3rem; }
.si-actu__title{
  font-family:var(--font-display); font-weight:600; font-size:1.05rem;
  color:var(--navy); margin:0 0 0.4rem;
}
.si-actu__text{ font-size:0.88rem; color:var(--gray); line-height:1.6; margin:0; }
.si-actu__card.is-updated{ animation: bounce-in 0.5s cubic-bezier(0.22,1,0.36,1) both; }

.si-actu__confirm{
  font-size:0.9rem; color:#1f9e59; font-weight:600; min-height:1.4em;
  opacity:0; transition: opacity 0.3s ease;
}
.si-actu__confirm.is-visible{ opacity:1; }

.si-actu-overlay{
  position:fixed; inset:0; z-index:55;
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
  background:rgba(3,25,67,0.5); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition: opacity 0.25s ease;
}
.si-actu-overlay.is-open{ opacity:1; pointer-events:auto; }
.si-actu-modal{
  background:#fff; border-radius:20px; padding:1.8rem;
  width:100%; max-width:420px;
  transform: translateY(16px) scale(0.96); opacity:0;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), opacity 0.25s ease;
}
.si-actu-overlay.is-open .si-actu-modal{ transform:none; opacity:1; }
.si-actu-modal h3{
  font-family:var(--font-display); font-weight:600; font-size:1.1rem;
  margin:0 0 1rem; color:var(--navy);
}
.si-actu-modal label{
  display:flex; flex-direction:column; gap:0.4rem; font-size:0.8rem; color:var(--gray);
  margin-bottom:0.9rem;
}
.si-actu-modal input[type="text"],
.si-actu-modal textarea{
  font-family:var(--font-body); font-size:0.92rem; color:var(--navy);
  border:1px solid var(--line); border-radius:10px; padding:0.6rem 0.8rem; resize:vertical;
}
.si-actu-preview{
  width:100%; height:90px; border-radius:10px; background:var(--bg-soft);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  font-size:0.78rem; color:#9AA3AF; background-size:cover; background-position:center;
}
.si-actu-modal__actions{ display:flex; justify-content:flex-end; gap:0.6rem; margin-top:0.4rem; }
.si-actu-cancel{
  background:none; border:none; color:var(--gray); font-size:0.86rem; cursor:pointer;
}

/* ============================================
   FAQ compacte
   ============================================ */
.si-faq-tabs{
  display:flex; gap:0.5rem; overflow-x:auto; padding-bottom:0.6rem;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  margin-bottom:1.2rem;
}
.si-faq-tab{
  flex:0 0 auto;
  border:1.5px solid var(--line); background:#fff; border-radius:999px;
  padding:0.55rem 1.1rem; font-size:0.85rem; font-family:inherit; color:var(--navy);
  cursor:pointer; white-space:nowrap;
  transition: all 0.2s ease;
}
.si-faq-tab:nth-child(odd){ transform: rotate(-0.6deg); }
.si-faq-tab:nth-child(even){ transform: rotate(0.6deg); }
.si-faq-tab.is-active{
  background:var(--navy); color:#fff; border-color:var(--navy); transform:none;
}
.si-faq-answer{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:1.4rem 1.5rem; max-width:76ch;
  animation: si-panel-in 0.3s ease both;
}
.si-faq-answer h3{
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  margin:0 0 0.5rem; color:var(--navy);
}
.si-faq-answer p{ font-size:0.94rem; color:var(--gray); line-height:1.7; margin:0; }

/* ============================================
   CTA final
   ============================================ */
.si-final-cta{ text-align:center; }