h4 {
      text-align: center;
      color: #007BFF !important; /* bleu forcé */
      text-decoration: underline !important;
    }
h3 {
  background: linear-gradient(90deg, #2563eb, #64748b, #e2e8f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


	/* Fix bouton non cliquable */
.bg-shape { 
  pointer-events: none; 
}

.actions a.btn { 
  position: relative; 
  z-index: 2; 
}
/* ===== Ticker style (bulle, label fixe) ===== */
.site-ticker{
  --wrap: 960px;               /* largeur de la bulle */
  --h: 34px;                   /* hauteur */
  --gap: 40px;                 /* espace entre items */
  display:flex; justify-content:center; margin:8px 0 0;
}
.ticker-shell{
  width:min(var(--wrap),92vw); height:var(--h); border-radius:9999px;
  padding:1px; position:relative; overflow:hidden; display:grid;
  grid-template-columns:auto 1fr; align-items:center;
  background: linear-gradient(90deg,#7c3aed,#3b82f6,#06b6d4); /* bordure dégradée */
}
.ticker-shell::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:rgba(7,12,27,.80); backdrop-filter:blur(6px);
}
.ticker-label{
  position:relative; z-index:1;
  height:calc(var(--h) - 2px);
  display:flex; align-items:center; gap:8px;
  padding:0 14px 0 12px; color:#fff; font-weight:700; font-size:14px;
  border-right:1px solid rgba(255,255,255,.18);
  white-space:nowrap;
}
.ticker-viewport{
  position:relative; z-index:1; height:calc(var(--h) - 2px);
  overflow:hidden; display:flex; align-items:center;
}
.ticker-track{
  display:inline-flex; align-items:center; gap:var(--gap);
  white-space:nowrap; will-change:transform;
}
.ticker-item{
  display:inline-flex; align-items:center; gap:10px;
  color:#eaf2ff; font-weight:700; font-size:14px; letter-spacing:.1px;
}
.ticker-item::after{ content:"•"; opacity:.35; margin-left:12px; }
.ticker-item:last-child::after{ content:""; }

/* Pause uniquement sur la bulle */
.ticker-shell:hover{ cursor:pointer; }
/* N'ajoute rien à .strip, tu gardes la tienne telle quelle */

.strip .ss{
  max-width:560px;
  margin:0 auto;
  padding:14px 16px;
  height:100%;               /* occupe les 120px de .strip */
  display:flex;              /* centre verticalement le texte */
  flex-direction:column;
  justify-content:center;
  text-align:center;
}
.strip .titre-bleu{color:#2563eb;margin:0 0 6px;font-weight:800}
.strip p{margin:0;line-height:1.5;color:#357AB7;}

.tile .ss{
  max-width:560px;
  margin:0 auto;
  padding:14px 16px;
  height:100%;               /* occupe les 120px de .strip */
  display:flex;              /* centre verticalement le texte */
  flex-direction:column;
  justify-content:center;
  text-align:center;
}
.tile .titre-bleu{color:#2563eb;margin:0 0 6px;font-weight:800}
.tile p{margin:0;line-height:1.5;color:#357AB7;}

#offer-tile-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  text-align:center;
  text-decoration:none;
  border-radius:inherit;
}

#offer-tile-title{
  background:linear-gradient(90deg,#f59e0b,#f97316,#facc15); /* orange → jaune coucher de soleil */
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:800;
  margin:0;
}

s {
  text-decoration: line-through;
  text-decoration-color: red;
  text-decoration-thickness: 3px;
}

/* — Typewriter sur le H3 — */
.typewriter {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: .12em solid currentColor;
  animation:
    typing 2.2s steps(var(--chars)) .2s both,
    caret .7s steps(1) infinite;
}
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
@keyframes caret {
  50% { border-color: transparent }
}

/* — Apparition mot à mot sans surlignage — */
.slogan { margin-top: .25rem }
.slogan .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(.35em);
  animation: rise .6s ease forwards;
}
.slogan .w1 { animation-delay: .2s }
.slogan .w2 { animation-delay: .6s }
.slogan .w3 { animation-delay: 1.0s }
.slogan .w4 { animation-delay: 1.4s }

@keyframes rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

 /* Saut permanent — uniquement HTML, CSS, PHP (1er, 2e, 3e .tile) */
.grid > .tile:nth-of-type(1) .titre-bleu,
.grid > .tile:nth-of-type(2) .titre-bleu,
.grid > .tile:nth-of-type(3) .titre-bleu{
  display:inline-block;
  will-change: transform;
  animation: jump 1s ease-in-out infinite;
  transform-origin: bottom center;
}

/* Décalage en cascade */
.grid > .tile:nth-of-type(2) .titre-bleu{ animation-delay: .12s; }
.grid > .tile:nth-of-type(3) .titre-bleu{ animation-delay: .24s; }


  @keyframes jump{
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-0.6em); }
    60%  { transform: translateY(0); }
    100% { transform: translateY(0); }
  }

  /* Accessibilité : désactive si préférence réduction des animations */
  @media (prefers-reduced-motion: reduce){
    .tile .titre-bleu{ animation: none; }
  }
  
  /* ===== Demo souris qui clique sur la tuile (HTML intact) ===== */
.tile.wide { position: relative; }

#offer-tile-link{
  position: relative;
  overflow: hidden; /* masque le ripple qui dépasse */
}

/* Curseur visuel */
#offer-tile-link .cursor-demo{
  position:absolute;
  width:18px; height:26px;
  left:var(--cx,70%); top:var(--cy,55%);
  transform:translate(-50%,-50%) scale(1);
  opacity:.95;
  pointer-events:none;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.15));
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  /* Curseur flèche en SVG inline (noir) */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='32' viewBox='0 0 24 32' fill='none'><path d='M2 2 L2 28 L8 22 L12 30 L15 29 L11 21 L18 21 Z' fill='black'/></svg>");
}

/* Animation de “pression” du clic */
#offer-tile-link .cursor-demo.press{
  animation:cursor-press .22s ease-out;
}
@keyframes cursor-press{
  0%{ transform:translate(-50%,-50%) scale(1) }
  50%{ transform:translate(-50%,-50%) scale(.92) }
  100%{ transform:translate(-50%,-50%) scale(1) }
}

/* Ripple cercle */
#offer-tile-link .click-ring{
  position:absolute;
  width:10px; height:10px;
  border-radius:50%;
  background:currentColor;
  opacity:.25;
  transform:translate(-50%,-50%) scale(1);
  pointer-events:none;
  animation:ring-pop .6s ease-out forwards;
}
@keyframes ring-pop{
  to{
    opacity:0;
    transform:translate(-50%,-50%) scale(22);
  }
}

/* Respecte la réduction d’animations */
@media (prefers-reduced-motion: reduce){
  #offer-tile-link .cursor-demo,
  #offer-tile-link .click-ring{ display:none !important; }
}

/* ===== J.S (5e .tile) : animation 3D permanente ===== */
.grid > .tile:nth-of-type(5){ 
  perspective: 900px;               /* profondeur locale, n'impacte rien d'autre */
}

.grid > .tile:nth-of-type(5) .titre-bleu{
  display:inline-block;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform-origin: center bottom;
  will-change: transform;
  animation: js-loop-3d 2.6s cubic-bezier(.25,.9,.25,1) infinite;
}

/* Boucle : remonte du “sol”, passe en avant, tourne, puis redescend légèrement */
@keyframes js-loop-3d{
  0%{
    transform:
      translateY(22%)      /* sous le sol, mais sans déformer la tuile */
      translateZ(-120px)
      rotateX(28deg)
      rotateY(0deg)
      scale(.96);
  }
  35%{
    transform:
      translateY(0%)
      translateZ(22px)
      rotateX(0deg)
      rotateY(180deg)
      scale(1);
  }
  70%{
    transform:
      translateY(-4%)
      translateZ(10px)
      rotateX(-6deg)
      rotateY(300deg)
      scale(1.02);
  }
  100%{
    transform:
      translateY(22%)
      translateZ(-120px)
      rotateX(28deg)
      rotateY(360deg)      /* = 0deg pour une boucle sans “saut” */
      scale(.96);
  }
}

/* Accessibilité : coupe l’anim si l’utilisateur la réduit */
@media (prefers-reduced-motion: reduce){
  .grid > .tile:nth-of-type(5) .titre-bleu{ animation: none !important; transform: none !important; }
}
/* =========================
   MOBILE ONLY
   ========================= */
@media (max-width: 768px){

  /* containers */
  .container{ padding-left:16px; padding-right:16px; }
  .section{ padding-top:28px; padding-bottom:28px; }

  /* HERO */
  .hero{ padding-top:18px; }
  .hero-inner{
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
    align-items:stretch !important;
  }
  .hero-text h1{
    font-size:28px !important;
    line-height:1.15 !important;
  }
  .actions{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }
  .actions .btn{
    width:100% !important;
    text-align:center !important;
  }
  .badges{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    padding-left:0 !important;
  }
  .badges li{
    font-size:13px !important;
  }

  /* Mock/card à droite -> passe en dessous */
  .hero-card{ width:100% !important; }
  .mock{ width:100% !important; }
  .mock-body{ padding:14px !important; }

  /* grille dans le mock */
  .grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
  }
  .tile.wide{ grid-column:1 / -1 !important; }

  /* OFFRES */
  .offres-split{
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
  }
  .offres-stack{ width:100% !important; }
  .bundles{ width:100% !important; }

  .card{
    border-radius:16px !important;
  }

  /* IMPACT */
  .impact-hero h2{
    font-size:22px !important;
    line-height:1.2 !important;
  }
  .impact-stats{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
  }
  .impact-kpi .kpi-num{ font-size:22px !important; }

  .impact-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
  }

  /* compare réseaux vs site */
  .compare{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }

  /* Ticker (si ça déborde) */
  .site-ticker .ticker-shell{ border-radius:14px !important; }
  .site-ticker .ticker-item{ white-space:nowrap; }

  /* FOOTER */
  .footer .foot{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:10px !important;
  }
}