/* ==========================================================================
   PAGE « SITE INTERNET » — section « pourquoi un site est un outil de conversion »
   (remplace l'ancien schéma SERP). Classes .site-why-*. Réutilise .site-name-*
   de site.css pour la maquette Google (non modifiée).
   ========================================================================== */

.site-why{position:relative;isolation:isolate;overflow-x:clip;padding:var(--section-y) 0}
.site-why .site-head{margin-bottom:clamp(32px,4vw,52px)}

/* ---------- le partage des rôles : une ligne, deux moitiés ---------- */
.site-why-split{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:880px;margin:0 auto}
.site-why-half{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border-radius:18px;
  border:1px solid var(--site-line);background:var(--site-card)}
.site-why-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  border:1px solid var(--site-line);background:rgba(var(--ink-rgb),.04)}
.site-why-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.site-why-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.site-why-txt strong{font-family:var(--font-display);font-weight:500;font-size:16.5px;letter-spacing:-.025em}
.site-why-txt > span{color:var(--site-ink-2);font-size:15px;line-height:1.5}

.site-why-half--no{opacity:.72}
.site-why-half--no .site-why-ic{color:var(--muted)}
.site-why-half--no .site-why-txt strong{text-decoration:line-through;text-decoration-color:rgba(var(--ink-rgb),.3);text-decoration-thickness:1.5px}

.site-why-half--yes{border-color:rgba(var(--orange-rgb),.4);
  background:linear-gradient(180deg,rgba(var(--orange-rgb),.12),rgba(var(--orange-rgb),.03));
  box-shadow:0 24px 50px -34px rgba(var(--orange-rgb),.65)}
.site-why-half--yes .site-why-ic{color:#0a0a0a;background:var(--orange);border-color:var(--orange);
  box-shadow:0 0 22px rgba(var(--orange-rgb),.5)}
.site-why-half--yes .site-why-txt strong{color:var(--orange-ink)}

/* ---------- la démonstration (grille .site-name de site.css) ---------- */
.site-why-demo{margin-top:clamp(34px,4.5vw,58px)!important}
.site-why-next{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:9px 4px;
  font-family:var(--font-display);font-size:12px;text-transform:uppercase;letter-spacing:-.1px;color:var(--text);
  border-bottom:1px solid rgba(var(--orange-rgb),.45);transition:color .3s var(--ease),border-color .3s var(--ease)}
.site-why-next svg{width:16px;height:16px;fill:none;stroke:var(--orange);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:site-why-bob 1.8s ease-in-out infinite}
.site-why-next:hover{color:var(--orange-ink);border-color:var(--orange)}
@keyframes site-why-bob{50%{transform:translateY(3px)}}

@media (max-width:860px){
  .site-why-split{grid-template-columns:1fr;gap:12px}
  .site-why-half{padding:16px 16px}
}

/* ---------- mode clair ---------- */
[data-theme="light"] .site-why-half{background:rgba(255,253,249,.72);border-color:rgba(15,15,15,.1);box-shadow:0 14px 30px -24px rgba(90,52,14,.4)}
[data-theme="light"] .site-why-half--yes{border-color:rgba(var(--orange-rgb),.5);
  background:linear-gradient(180deg,rgba(var(--orange-rgb),.16),rgba(255,253,249,.8));
  box-shadow:0 22px 44px -30px rgba(217,96,0,.5)}
[data-theme="light"] .site-why-next svg{stroke:var(--orange-ink)}