/* ==========================================================================
   Zone Total Sport — thème "Article Hero XXL" (mockup utilisateur)
   Cyan #00C4FF + Jaune #FFF000 + Luckiest Guy + Inter
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Bangers&family=Nunito:wght@400;500;600;700;800;900&display=swap');

/* Police composite : Luckiest Guy pour ASCII + Bangers pour accents (Luckiest Guy ne supporte pas é/è/à/etc.) */
@font-face{
  font-family:'LuckiestGuyZTS';
  src:local('Luckiest Guy');
  unicode-range:U+0020-007F;
}
@font-face{
  font-family:'LuckiestGuyZTS';
  src:local('Bangers');
  unicode-range:U+00A0-024F,U+1E00-1EFF,U+2000-206F;
  size-adjust:92%;
}

:root{
  --zts-blue:#00C4FF;
  --zts-blue-dark:#0086AD;
  --zts-deep:#004A61;
  --zts-yellow:#FFF000;
  --zts-pink:#FF2A7A;
}

/* Tailwind config local pour les utility classes du mockup */
.bg-ztsBlue{background-color:var(--zts-blue) !important}
.bg-ztsYellow{background-color:var(--zts-yellow) !important}
.bg-ztsDeep{background-color:var(--zts-deep) !important}
.bg-ztsDarkBlue{background-color:var(--zts-blue-dark) !important}
.text-ztsBlue{color:var(--zts-blue) !important}
.text-ztsYellow{color:var(--zts-yellow) !important}
.text-ztsDeep{color:var(--zts-deep) !important}
.border-ztsBlue{border-color:var(--zts-blue) !important}
.border-ztsYellow{border-color:var(--zts-yellow) !important}
.border-ztsDarkBlue{border-color:var(--zts-blue-dark) !important}

/* Typo + background article */
body{
  font-family:'Nunito',system-ui,sans-serif !important;color:#1e293b;
  background:
    radial-gradient(circle at 20% 10%,rgba(0,196,255,.08),transparent 40%),
    radial-gradient(circle at 80% 90%,rgba(255,240,0,.08),transparent 40%),
    #f8fafc !important;
  background-attachment:fixed;
}
.font-luckiest{font-family:'LuckiestGuyZTS','Luckiest Guy','Bangers',cursive !important;letter-spacing:.05em}
.text-outline{text-shadow:2px 2px 0 rgba(0,0,0,.2)}
.hero-gradient{background:radial-gradient(circle at top right,#00C4FF,#0086AD,#004A61)}

/* Override des polices legacy → Luckiest Guy / Inter */
.font-bangers,.font-fredoka,.font-baloo,.font-lucky,.font-hand,.font-schoolbell,.font-comic{
  font-family:'Nunito',sans-serif !important;
}
h1.font-bangers,h2.font-bangers,h3.font-bangers,h4.font-bangers,
h1.font-fredoka,h2.font-fredoka,h3.font-fredoka,h4.font-fredoka,
h1.font-lucky,h2.font-lucky,h3.font-lucky,h4.font-lucky{
  font-family:'LuckiestGuyZTS','Luckiest Guy','Bangers',cursive !important;letter-spacing:.04em;
}

/* Animations */
@keyframes ztsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.animate-float{animation:ztsFloat 3s ease-in-out infinite}

/* ==========================================================================
   PROSE STYLES — pour le contenu de l'article (.zts-prose)
   ========================================================================== */
.zts-prose{
  font-family:'Nunito',sans-serif;color:#334155;
  font-size:1.0625rem;line-height:1.8;
}

/* Paragraphes */
.zts-prose p{
  margin:0 0 1.5rem;line-height:1.8;color:#334155;font-size:1.0625rem;
  font-family:'Nunito',sans-serif !important;
}
.zts-prose p:first-of-type{
  /* Lead paragraph — barre cyan à gauche */
  font-size:1.25rem;font-weight:600;color:#1e293b;
  border-left:6px solid var(--zts-blue);
  padding:.5rem 0 .5rem 1.5rem;margin-bottom:2rem;
  font-style:italic;
}

/* Headings */
.zts-prose h1,.zts-prose h2,.zts-prose h3,.zts-prose h4,.zts-prose h5,.zts-prose h6{
  font-family:'LuckiestGuyZTS','Luckiest Guy','Bangers',cursive !important;letter-spacing:.04em;
  color:var(--zts-deep);text-transform:uppercase;line-height:1.15;
}
.zts-prose h1{font-size:clamp(2rem,5vw,2.8rem);margin:2rem 0 1.5rem;color:var(--zts-deep)}
.zts-prose h2,
.zts-prose .article-body h2,
.article-body h2,
article.zts-prose h2{
  font-size:clamp(1.75rem,4vw,2.4rem) !important;
  margin:3rem 0 1.5rem !important;
  /* Carte sticker derrière le titre */
  background:linear-gradient(135deg,#fff,#f0f9ff) !important;
  border-radius:1.5rem !important;
  padding:1.5rem 2rem !important;
  border-left:8px solid var(--zts-blue) !important;
  border-bottom:8px solid #e0f2fe !important;
  border-top:none !important;
  border-right:none !important;
  box-shadow:
    0 12px 28px -8px rgba(0,196,255,.3),
    0 4px 12px rgba(0,0,0,.06) !important;
  position:relative !important;
  font-family:'LuckiestGuyZTS','Luckiest Guy','Bangers',cursive !important;
  letter-spacing:.04em !important;
  color:var(--zts-deep) !important;
  text-transform:uppercase !important;
  line-height:1.2 !important;
}
.zts-prose h2::before,
.article-body h2::before{
  content:'' !important;position:absolute !important;
  top:1.2rem;right:1.8rem;
  width:.55rem;height:.55rem;border-radius:50%;
  background:var(--zts-yellow);
  box-shadow:1rem 0 0 var(--zts-yellow),2rem 0 0 var(--zts-yellow);
  opacity:.7;
}
.zts-prose h3{font-size:clamp(1.4rem,3vw,1.9rem);margin:2rem 0 1rem;color:var(--zts-blue-dark)}
.zts-prose h4{font-size:1.4rem;margin:1.5rem 0 .8rem;color:var(--zts-blue-dark)}

/* Listes */
.zts-prose ul,.zts-prose ol{margin:1rem 0 1.5rem 1.5rem;padding:0}
.zts-prose ul{list-style:none}
.zts-prose ul li{position:relative;padding-left:1.8rem;margin-bottom:.6rem}
.zts-prose ul li::before{
  content:'';position:absolute;left:0;top:.7em;
  width:.6rem;height:.6rem;border-radius:50%;background:var(--zts-yellow);
  border:2px solid var(--zts-blue);
}
.zts-prose ol{list-style:decimal}
.zts-prose ol li{margin-bottom:.6rem;padding-left:.5rem}
.zts-prose ol li::marker{color:var(--zts-blue);font-weight:900;font-family:'LuckiestGuyZTS','Luckiest Guy','Bangers',cursive}

/* Strong/em */
.zts-prose strong,.zts-prose b{color:var(--zts-deep);font-weight:800}
.zts-prose em,.zts-prose i{color:var(--zts-blue-dark)}

/* Links */
.zts-prose a{color:var(--zts-blue-dark);font-weight:700;text-decoration:underline;text-decoration-color:var(--zts-yellow);text-underline-offset:3px}
.zts-prose a:hover{color:var(--zts-blue)}

/* Blockquote stylisée — fond sombre cyan */
.zts-prose blockquote{
  background:var(--zts-deep);color:#fff;
  border-radius:2rem;padding:2.5rem 2rem;margin:2.5rem 0;
  position:relative;overflow:hidden;
  border-bottom:8px solid rgba(0,0,0,.2);
  box-shadow:0 25px 50px -12px rgba(0,74,97,.4);
}
.zts-prose blockquote::before{
  content:'"';position:absolute;top:-1rem;right:1rem;
  font-family:'LuckiestGuyZTS','Luckiest Guy','Bangers',cursive;font-size:8rem;
  color:var(--zts-yellow);opacity:.15;line-height:1;
}
.zts-prose blockquote p{
  font-family:'LuckiestGuyZTS','Luckiest Guy','Bangers',cursive !important;
  color:var(--zts-yellow) !important;font-size:1.5rem;
  line-height:1.3;margin:0;text-transform:uppercase;letter-spacing:.04em;
}
.zts-prose blockquote cite,.zts-prose blockquote footer{
  display:block;margin-top:1rem;color:#cffafe;
  font-size:.85rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;font-style:normal;font-family:'Nunito',sans-serif !important;
}

/* Images dans le contenu — effet sticker */
.zts-prose img,.zts-prose .article-inline-img{
  display:block;width:100%;max-width:780px;height:auto;
  margin:2.5rem auto;
  border-radius:2rem !important;
  border:8px solid #fff !important;
  box-shadow:0 20px 50px -12px rgba(0,74,97,.3) !important;
}

/* Boîte d'astuce pédagogique — bordure pointillée jaune */
.zts-prose .tip-box,
.zts-prose .astuce,
.zts-prose [class*="tip-"]{
  background:rgba(255,240,0,.1);border:4px dashed var(--zts-yellow);
  border-radius:2rem;padding:2rem 2.5rem;margin:2.5rem 0;
  position:relative;
}
.zts-prose .tip-box::before,
.zts-prose .astuce::before{
  content:'💡 ASTUCE';position:absolute;top:-1rem;left:2rem;
  background:var(--zts-yellow);color:var(--zts-deep);
  font-family:'LuckiestGuyZTS','Luckiest Guy','Bangers',cursive;letter-spacing:.05em;
  padding:.4rem 1rem;border-radius:.6rem;font-size:.85rem;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

/* Tables */
.zts-prose table{
  width:100%;border-collapse:collapse;margin:2rem 0;
  border-radius:1rem;overflow:hidden;
  box-shadow:0 8px 24px -8px rgba(0,74,97,.2);
}
.zts-prose th{
  background:var(--zts-blue);color:#fff;
  font-family:'LuckiestGuyZTS','Luckiest Guy','Bangers',cursive;letter-spacing:.04em;
  padding:1rem;text-align:left;
}
.zts-prose td{padding:.9rem 1rem;border-bottom:1px solid #e2e8f0}
.zts-prose tr:nth-child(even){background:#f0f9ff}

/* Cartes auteur / méta legacy → masquées (le hero a déjà l'auteur) */
.zts-prose [class*="article-author"],
.zts-prose .author-card,
.zts-prose [class*="author"][class*="card"]{display:none !important}

/* H1 dupliqué dans le main → masqué */
[data-zts-hidden],
.zts-prose > h1:first-child:not(:only-child){display:none !important}

/* ==========================================================================
   RESET de styles legacy qui cassent le flux
   ========================================================================== */
.zts-prose .bg-yellow-sun,.zts-prose .bg-pink,.zts-prose [class*="bg-pink"],
.zts-prose [class*="from-pink"]{background:transparent !important}
.zts-prose .scroll-progress{display:none}

/* Sticky progress bar globale (legacy) */
body > .scroll-progress{display:none !important}

/* Hero-full legacy → caché complètement */
body > .hero-full,main > .hero-full{display:none !important}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:768px){
  .zts-prose blockquote{padding:2rem 1.5rem}
  .zts-prose blockquote p{font-size:1.25rem}
  .zts-prose img,.zts-prose .article-inline-img{margin:1.5rem auto;border-width:6px}
}

::selection{background:var(--zts-yellow);color:var(--zts-deep)}

/* ==========================================================================
   FORCE-OVERRIDE des éléments legacy dans le body d'article
   ========================================================================== */

/* Tous les CTA gradient cyan-violet → cyan/jaune ZTS */
.zts-prose [class*="from-cyan-electric"],
.zts-prose [class*="from-violet"],
.zts-prose [style*="linear-gradient"][style*="#00E5FF"],
.zts-prose [style*="linear-gradient"][style*="#8B5CF6"],
.zts-prose [style*="135deg,#00E5FF"]{
  background:var(--zts-blue) !important;
  background-image:linear-gradient(135deg,var(--zts-blue),var(--zts-deep)) !important;
  color:#fff !important;
  font-family:'LuckiestGuyZTS','Luckiest Guy','Bangers',cursive !important;
  letter-spacing:.04em;
  border-radius:9999px !important;
  padding:1rem 2rem !important;
}

/* Like button legacy (Bangers + rose) */
.zts-prose .like-btn,
.zts-prose button[style*="Bangers"]{
  font-family:'LuckiestGuyZTS','Luckiest Guy','Bangers',cursive !important;
  background:var(--zts-yellow) !important;
  color:var(--zts-deep) !important;
  border:3px solid var(--zts-deep) !important;
  border-radius:9999px !important;
  padding:12px 32px !important;
  font-size:1.2rem !important;
}
.zts-prose .like-btn:hover{background:var(--zts-blue) !important;color:#fff !important}
.zts-prose .like-count{
  background:var(--zts-deep) !important;color:var(--zts-yellow) !important;
  font-family:'Nunito',sans-serif !important;font-weight:900;
}

/* Sections "Tags" / footer-style legacy DANS l'article — restyle */
.zts-prose h3.font-fredoka,
.zts-prose h4.font-fredoka,
.zts-prose h3[class*="font-bangers"]{
  color:var(--zts-deep) !important;
  font-family:'LuckiestGuyZTS','Luckiest Guy','Bangers',cursive !important;
  font-size:1.4rem !important;text-transform:uppercase;
  letter-spacing:.04em;margin:2rem 0 1rem !important;
}

/* Pink/rose anywhere in article → cyan */
.zts-prose [style*="#FF2A7A"],
.zts-prose [style*="#FF6B9D"],
.zts-prose .text-pink,
.zts-prose .bg-pink{
  background-color:var(--zts-blue) !important;
  color:#fff !important;
  border-color:var(--zts-deep) !important;
}

/* Liens "back to blog" legacy en bas d'article */
.zts-prose a[href*="blog.html"]:not(.no-style){
  display:inline-flex;align-items:center;gap:.5rem;
}

/* Avatars / éléments cyan-electric → ztsBlue */
.zts-prose .from-cyan-electric,
.zts-prose .to-violet-pop,
.zts-prose .bg-cyan-electric{
  background-color:var(--zts-blue) !important;
  background-image:none !important;
}

/* Sticky progress bar DOM legacy */
.zts-prose .scroll-progress,body > div.scroll-progress{display:none !important}

/* Couleurs texte "dark" legacy → slate */
.zts-prose .text-dark{color:#1e293b !important}
.zts-prose .text-dark\/40,.zts-prose .text-dark\/50,.zts-prose .text-dark\/60{color:#64748b !important}

/* Cards "aside" legacy à l'intérieur du body article (sections tags, partage etc.) */
.zts-prose > div[class*="bg-gray"],
.zts-prose > div[class*="bg-slate"]:not(.zts-keep){
  background:transparent !important;
  border:none !important;
  padding:0 !important;
}

/* Legacy buttons style "px-10 py-5 rounded-full" cyan-violet → ztsBlue */
.zts-prose a[href*="open=https"],
.zts-prose .inline-flex.bg-gradient-to-r{
  background:var(--zts-blue) !important;
  background-image:none !important;
  color:#fff !important;
  font-family:'LuckiestGuyZTS','Luckiest Guy','Bangers',cursive !important;
  letter-spacing:.04em !important;
  padding:1rem 2rem !important;
  border-radius:9999px !important;
}
.zts-prose a[href*="open=https"]:hover{background:var(--zts-deep) !important}

/* ==========================================================================
   ENHANCEMENTS LISIBILITÉ — drop cap, surligneurs, séparateurs, etc.
   ========================================================================== */

/* Drop cap : première lettre du premier paragraphe en grande lettre cyan */
.zts-prose .article-body > p:first-of-type::first-letter,
.zts-article-centered .article-body > p:first-of-type::first-letter{
  font-family:'LuckiestGuyZTS','Luckiest Guy','Bangers',cursive !important;
  font-size:4.5rem !important;
  float:left;
  line-height:.9;
  padding:.4rem .8rem 0 0;
  color:var(--zts-blue) !important;
  text-shadow:3px 3px 0 var(--zts-yellow);
}

/* Listes numérotées avec gros chiffres jaunes */
.zts-prose ol{counter-reset:zts-num;list-style:none;padding-left:0;margin-left:0}
.zts-prose ol > li{
  counter-increment:zts-num;position:relative;
  padding:1rem 1.5rem 1rem 4.5rem !important;
  margin-bottom:1rem;
  background:#fff;border-radius:1rem;
  border-left:4px solid var(--zts-yellow);
  box-shadow:0 4px 12px -4px rgba(0,196,255,.15);
  font-size:1.0625rem;
}
.zts-prose ol > li::marker{display:none}
.zts-prose ol > li::before{
  content:counter(zts-num);
  position:absolute;left:1rem;top:.85rem;
  width:2.5rem;height:2.5rem;border-radius:50%;
  background:linear-gradient(135deg,var(--zts-yellow),#ffd700);
  color:var(--zts-deep);
  font-family:'LuckiestGuyZTS','Luckiest Guy','Bangers',cursive;font-size:1.4rem;
  display:flex;align-items:center;justify-content:center;
  border:3px solid var(--zts-deep);
  box-shadow:0 4px 8px rgba(0,0,0,.15);
}

/* Surligneur jaune subtil sur les strong */
.zts-prose .article-body strong,
.zts-prose strong{
  background:linear-gradient(180deg,transparent 60%,rgba(255,240,0,.5) 60%) !important;
  padding:0 .15em !important;color:var(--zts-deep) !important;font-weight:800 !important;
}

/* Liens avec underline animé */
.zts-prose .article-body a,
.zts-prose a{
  position:relative;text-decoration:none !important;
  color:var(--zts-blue-dark) !important;font-weight:700;
  background-image:linear-gradient(var(--zts-yellow),var(--zts-yellow));
  background-size:100% .25em;background-repeat:no-repeat;
  background-position:0 88%;
  transition:background-size .25s ease;
}
.zts-prose a:hover{background-size:100% 100%}

/* Séparateurs décoratifs entre paragraphes longs (tous les ~5e p) */
.zts-prose .article-body > p:nth-of-type(5n+5)::after{
  content:'• • •';display:block;text-align:center;
  margin:2.5rem auto 0;color:var(--zts-blue);
  font-size:1.5rem;letter-spacing:.5em;opacity:.4;
}

/* HR décoratif si présent */
.zts-prose hr{
  border:none;height:8px;
  background:
    radial-gradient(circle,var(--zts-yellow) 2px,transparent 2px) 0 0/24px 8px repeat-x;
  margin:3rem 0;opacity:.5;
}

/* Premier paragraphe — taille augmentée, look "lead" plus marqué */
.zts-prose .article-body > p:first-of-type{
  font-size:1.2rem !important;
  line-height:1.7 !important;
  color:#1e293b !important;
  font-weight:500 !important;
  border-left:none !important;
  padding-left:0 !important;
  font-style:normal !important;
  margin-bottom:2rem !important;
}

/* Citations courtes inline (texte entre guillemets « ... » ou " ... ") — pas de style spécial mais garde lisibilité */
.zts-prose em{
  background:rgba(0,196,255,.08);
  padding:.05em .25em;border-radius:.3em;
  font-style:italic;color:var(--zts-deep);
}

/* Paragraphe avec emoji en début → mise en valeur (boîte de fond) */
.zts-prose p:first-letter{font-feature-settings:"smcp"}

/* Tables plus lisibles */
.zts-prose table{font-family:'Nunito',sans-serif !important}
.zts-prose th{
  font-family:'LuckiestGuyZTS','Luckiest Guy','Bangers',cursive !important;
  font-size:1.05rem !important;letter-spacing:.04em;
}
.zts-prose td{font-size:1rem !important}

/* Espacement aéré entre paragraphes */
.zts-prose p + p{margin-top:0}

/* H3 dans le contenu : barre jaune à gauche pour distinguer du H2 sticker */
.zts-prose .article-body h3,
.zts-prose h3{
  border-left:6px solid var(--zts-yellow) !important;
  padding-left:1rem !important;
  font-family:'LuckiestGuyZTS','Luckiest Guy','Bangers',cursive !important;
  color:var(--zts-blue-dark) !important;
  margin-top:2.5rem !important;
}