/* ============================================================================
   arcade-blog.css — 25/10/2026, Malik : « généralise le même style sur toutes les pages ».
   Le haut de chaque page du blog reprend celui de rushup.fr (src/arcade.css de la vitrine) :
   rayons bleus qui tournent, titre blanc cerclé d'encre, surligneur or, texte bleu clair.
   Appelée par ru_nav_header() (_site.php) : UNE feuille pour les 6 modèles, aucune page à retoucher.
   Les noms de haut de page ciblés sont ceux qui existent déjà : .hero-bg (index), .sec-hero (secteur),
   .hub-hero (preuves terrain), .demo-hero (démo), .cas-hero (preuve), .hero-gradient (article).
   ========================================================================== */

.hero-bg, .sec-hero, .hub-hero, .demo-hero, .cas-hero, .hero-gradient{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ru-blue)!important; background-image:none!important;
  border-bottom:2.75px solid var(--ru-ink)!important;
}
/* Les rayons (même dessin que la vitrine : 2 bleus de la charte, rotation lente) */
.hero-bg::before, .sec-hero::before, .hub-hero::before, .demo-hero::before, .cas-hero::before, .hero-gradient::before{
  content:""; position:absolute; left:50%; top:50%; width:260vmax; height:260vmax; margin:-130vmax 0 0 -130vmax; z-index:-2;
  background:repeating-conic-gradient(from 0deg, #004aad 0deg 9deg, #003c8f 9deg 18deg);
  animation:ru-arc-tourne 90s linear infinite; pointer-events:none;
}
/* Vignette : le centre reste lisible */
.hero-bg::after, .sec-hero::after, .hub-hero::after, .demo-hero::after, .cas-hero::after, .hero-gradient::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%, rgba(0,74,173,0) 30%, rgba(0,40,100,.55) 100%);
}
@keyframes ru-arc-tourne{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .hero-bg::before, .sec-hero::before, .hub-hero::before, .demo-hero::before, .cas-hero::before, .hero-gradient::before{ animation:none; }
}

/* L'article posait sa couverture en transparence + un voile dégradé : sur les rayons ça faisait bouillie */
.hero-gradient > img, .hero-gradient > .absolute.inset-0{ display:none!important; }

/* Titres : blanc cerclé d'encre + ombre dure, penchés comme sur l'accueil */
.hero-bg h1, .sec-hero h1, .hub-hero h1, .demo-hero h1, .cas-hero h1, .hero-gradient h1{
  color:#fff!important; -webkit-text-stroke:2.5px var(--ru-ink); paint-order:stroke fill;
  text-shadow:5px 5px 0 var(--ru-ink); transform:rotate(-2deg);
}
.hero-bg h1 .ru-hl, .sec-hero h1 .ru-hl, .hub-hero h1 .ru-hl, .demo-hero h1 .ru-hl, .cas-hero h1 .ru-hl{
  -webkit-text-stroke:0; text-shadow:none; color:var(--ru-ink)!important;
}
/* Textes du haut : bleu clair lisible sur les rayons, mots en gras en blanc */
.hero-bg p, .sec-hero p, .hub-hero p, .demo-hero p, .cas-hero p, .hero-gradient p{ color:#e6eefc!important; }
.hero-bg p strong, .hero-bg p b, .sec-hero p strong, .sec-hero p b, .hub-hero p strong, .hub-hero p b,
.demo-hero p strong, .demo-hero p b, .cas-hero p strong, .cas-hero p b, .hero-gradient p strong, .hero-gradient p b{ color:#fff!important; }
/* Les petites pastilles et boutons du haut restent blancs à bord encre (ils se lisent déjà sur le bleu) ;
   les liens texte (fil d'Ariane, « Voir les tarifs ») passent en blanc souligné */
.hero-bg a:not(.ru-btn):not([class*="rounded"]), .sec-hero a:not(.ru-btn):not([class*="rounded"]),
.hub-hero a:not(.ru-btn):not([class*="rounded"]), .cas-hero a:not(.ru-btn):not([class*="rounded"]){ color:#fff!important; }
/* Les petites lignes grises sous les boutons (« Gratuit pour démarrer… ») */
.hero-bg .text-gray-500, .hero-bg .text-gray-600, .sec-hero .text-gray-500, .sec-hero .text-gray-600,
.hub-hero .text-gray-500, .hub-hero .text-gray-600, .cas-hero .text-gray-500, .cas-hero .text-gray-600,
.demo-hero .text-gray-500, .demo-hero .text-gray-600{ color:#d3e2fb!important; }


/* ===== Bas de page compact (même dessin que Footer.tsx de la vitrine, 25/10) ===== */
.ru-signature{position:relative;display:flex;align-items:center;gap:16px;padding-bottom:22px;flex-wrap:wrap}
.ru-signature::after{content:"";position:absolute;left:0;right:0;bottom:0;border-bottom:1px solid rgba(211,226,251,.18)}
.ru-signature > a > img{height:54px;width:auto;flex:none;filter:drop-shadow(3px 3px 0 var(--ru-ink));transform:rotate(-6deg)}
.ru-signature p{margin:0;font:400 30px/1.05 var(--ru-display);text-transform:uppercase;letter-spacing:.03em;transform:rotate(-2deg)}
.ru-signature .l1{color:#fff;-webkit-text-stroke:2px var(--ru-ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ru-ink)}
.ru-signature .l2{display:inline-block;color:var(--ru-ink);background:var(--ru-gold);border:2.5px solid var(--ru-ink);border-radius:8px;box-shadow:3px 3px 0 var(--ru-ink);padding:1px 10px;margin-left:4px}
.ru-sig-droite{margin-left:auto;display:flex;align-items:center;gap:16px}
.ru-pied-titre{font:900 12px/1 'Manrope',system-ui,sans-serif;text-transform:uppercase;letter-spacing:.14em;color:var(--ru-gold);margin:0 0 12px}
.ru-pied-liens a{color:#d3e2fb;text-decoration:none}
.ru-pied-liens a:hover{color:#fff}
.ru-pied-plie > summary{list-style:none;cursor:default}
.ru-pied-plie > summary::-webkit-details-marker{display:none}
@media (max-width:767px){
  .ru-signature{gap:12px;padding-bottom:18px}
  .ru-signature > a > img{height:42px}
  .ru-signature p{font-size:19px}
  /* réseaux sur une ligne, badges d'appli sur la suivante (côte à côte ils débordaient de l'écran) */
  .ru-sig-droite{margin-left:0;width:100%;flex-wrap:wrap;gap:12px}
  .ru-sig-droite .ru-badges{zoom:.86;flex-wrap:nowrap}
  /* Par métier / Outils : repliés sur téléphone (balise <details> : marche sans JavaScript, liens présents pour Google) */
  .ru-pied-plie{border-top:1px solid rgba(211,226,251,.18);padding-top:14px}
  .ru-pied-plie > summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center}
  .ru-pied-plie > summary .ru-pied-titre{margin:0}
  .ru-pied-plie > summary::after{content:"+";width:28px;height:28px;border-radius:8px;background:var(--ru-gold);border:2.5px solid var(--ru-ink);box-shadow:2px 2px 0 var(--ru-ink);font:800 19px/23px 'Manrope',sans-serif;text-align:center;color:var(--ru-ink)}
  .ru-pied-plie[open] > summary::after{content:"−"}
  .ru-pied-plie[open] > summary{margin-bottom:12px}
}

/* Icônes du menu Fonctionnalités (avant : émojis 🔔🤖📇📱, « ça sonne IA ») : pastille or néo-brut */
.ru-picto{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border-radius:8px;background:var(--ru-gold);border:2.5px solid var(--ru-ink);box-shadow:3px 3px 0 var(--ru-ink);color:var(--ru-ink)}
.ru-picto svg{width:16px;height:16px}

/* Le haut de page démarre sous le menu flottant, comme la vitrine (avant : une cale blanche de 80 px au-dessus des rayons) */
.hero-bg, .sec-hero, .hub-hero, .demo-hero, .cas-hero{ margin-top:-80px; padding-top:calc(80px + 3.5rem)!important; }
@media (min-width:768px){ .hero-bg, .sec-hero, .hub-hero, .demo-hero, .cas-hero{ padding-top:calc(80px + 4.5rem)!important; } }
/* Le mot surligné du titre s'affichait dans une police fine (déjà en ligne) : il reprend la police des titres */
.hero-bg h1 .ru-hl, .sec-hero h1 .ru-hl, .hub-hero h1 .ru-hl, .demo-hero h1 .ru-hl, .cas-hero h1 .ru-hl{ font-family:var(--ru-display)!important; font-weight:400; }
/* La phrase du bas de page prenait la police des paragraphes du blog (règle plus forte dans les pages) */
.ru-footer .ru-signature p, .ru-footer .ru-signature p span{ font-family:var(--ru-display)!important; font-weight:400!important; }

/* Pages à part (pages métiers, outils, cas client — 25/10) : leur haut de page est dans une colonne étroite ;
   .ru-hero-plein le fait déborder sur toute la largeur et le pose sur les rayons. */
.ru-hero-plein{ position:relative; isolation:isolate; overflow:hidden; width:100vw; margin-left:calc(50% - 50vw);
  padding:56px max(20px, calc(50vw - 25rem)) 52px!important; background:var(--ru-blue)!important; border-bottom:2.75px solid var(--ru-ink); text-align:center; }
.ru-hero-plein::before{ content:""; position:absolute; left:50%; top:50%; width:260vmax; height:260vmax; margin:-130vmax 0 0 -130vmax; z-index:-2;
  background:repeating-conic-gradient(from 0deg, #004aad 0deg 9deg, #003c8f 9deg 18deg); animation:ru-arc-tourne 90s linear infinite; pointer-events:none; }
.ru-hero-plein::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 50% 45%, rgba(0,74,173,0) 30%, rgba(0,40,100,.55) 100%); }
@media (prefers-reduced-motion: reduce){ .ru-hero-plein::before{ animation:none; } }
.ru-hero-plein h1{ font-family:var(--ru-display)!important; font-weight:400!important; text-transform:uppercase; letter-spacing:.03em; line-height:1.08!important;
  color:#fff!important; -webkit-text-stroke:2.5px var(--ru-ink); paint-order:stroke fill; text-shadow:5px 5px 0 var(--ru-ink); transform:rotate(-2deg); font-size:clamp(30px,4.6vw,54px)!important; }
.ru-hero-plein p{ color:#e6eefc!important; }
.ru-hero-plein p b, .ru-hero-plein p strong{ color:#fff!important; }
/* La petite ligne du dessus (« Guide vertical · … », « Outil gratuit RushUp ») devient une pastille blanche */
.ru-hero-plein > p:first-child, .ru-hero-plein > span:first-child{ display:inline-block; background:#fff!important; color:var(--ru-ink)!important; border:2.5px solid var(--ru-ink);
  border-radius:999px; box-shadow:3px 3px 0 var(--ru-ink); padding:6px 14px!important; margin-bottom:18px!important; font-weight:800; font-size:12px; letter-spacing:.04em; }
.ru-hero-plein time, .ru-hero-plein p.text-sm:not(:first-child){ color:#d3e2fb!important; }
@media (max-width:767px){ .ru-hero-plein{ padding:40px 20px 36px!important; } }

/* ===== Corrections après relecture critique (25/10) ===== */
/* 1. Les cartes chiffrées posées à cheval sur le bas du bandeau passaient DESSOUS (chiffres coupés sur la fiche Le Cannibale) */
.hero-bg + *, .sec-hero + *, .hub-hero + *, .demo-hero + *, .cas-hero + *{ position:relative; z-index:3; }
/* 3. Tableaux des pages à part : ils défilent sur téléphone au lieu d'être coupés */
article.prose table{ display:block; max-width:100%; overflow-x:auto; }
/* 6. Un seul dessin de titre partout : droit, comme le blog ; le mot-clé sur l'étiquette or dans la police des titres */
.ru-hero-plein h1{ transform:none; }
.ru-hl{ font-family:inherit; }
.hero-bg h1 .ru-hl, .sec-hero h1 .ru-hl, .hub-hero h1 .ru-hl, .demo-hero h1 .ru-hl, .cas-hero h1 .ru-hl, .ru-hero-plein h1 .ru-hl{
  -webkit-text-stroke:0; text-shadow:none; paint-order:normal; color:var(--ru-ink)!important; padding-right:.32em; }
/* 7. Pages sans fil d'Ariane : le bleu démarre sous le menu (plus de bande blanche vide) */
main > .ru-hero-plein:first-child, main > article:first-child > .ru-hero-plein:first-child{ margin-top:calc(-80px - 2.5rem); padding-top:calc(80px + 3rem)!important; }
/* 8. Outils gratuits : cartes, champs et bouton principal au style néo-brut (ils étaient restés gris pâle, coins mous) */
main .bg-white.rounded-2xl.shadow-sm, main .bg-white.rounded-xl.shadow-sm{ border:2.75px solid var(--ru-ink)!important; box-shadow:6px 6px 0 var(--ru-ink)!important; }
main .btn-primary{ background:var(--ru-gold)!important; color:var(--ru-ink)!important; border:2.75px solid var(--ru-ink)!important; box-shadow:4px 4px 0 var(--ru-ink)!important; border-radius:14px!important; font-weight:900!important; }
main .btn-primary:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ru-ink)!important; }
main .input-base, main select, main input[type="text"], main input[type="email"]{ border:2.5px solid var(--ru-ink)!important; border-radius:12px!important; }
.ru-hero-plein span.rounded-full{ background:#fff!important; color:var(--ru-ink)!important; border:2.5px solid var(--ru-ink); box-shadow:3px 3px 0 var(--ru-ink); font-weight:800; }
/* 10. Pages métiers et cas client : sous-titres et tableaux comme le blog */
main article.prose > h2{ font-family:var(--ru-display)!important; font-weight:400!important; text-transform:uppercase; letter-spacing:.04em; color:var(--ru-blue)!important; line-height:1.15; }
article.prose table{ border:2.5px solid var(--ru-ink)!important; border-radius:12px; border-collapse:separate; border-spacing:0; }
article.prose table th{ background:var(--ru-blue)!important; color:#fff!important; }
article.prose table td, article.prose table th{ border-color:rgba(10,20,32,.25)!important; }
/* 11. Gris trop pâles (sous 4,5:1) */
main .text-gray-400, main .text-gray-300{ color:#5C6A7F!important; }
/* 20. Sur téléphone, moins de bleu vide au-dessus du titre */
@media (max-width:767px){
  .hero-bg, .sec-hero, .hub-hero, .demo-hero, .cas-hero{ padding-top:calc(80px + 1.75rem)!important; }
  main > .ru-hero-plein:first-child, main > article:first-child > .ru-hero-plein:first-child{ margin-top:calc(-80px - 2rem); padding-top:calc(80px + 2rem)!important; }
}

/* ===== « Une section = un écran » sur téléphone (25/10, même travail que la vitrine) ===== */
@media (max-width:767px){
  .ru-glisse-tel{ display:flex!important; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px!important; margin-left:-24px; margin-right:-24px; padding:6px 24px 14px; scrollbar-width:none; }
  .ru-glisse-tel::-webkit-scrollbar{ display:none; }
  .ru-glisse-tel > *{ flex:0 0 80%; scroll-snap-align:center; }
  .ru-js .ru-liste-tel:not(.tout) > :nth-child(n+7){ display:none!important; }
  .ru-js .ru-plie-tel:not(.ouvert){ max-height:380px; overflow:hidden; position:relative; }
  .ru-js .ru-plie-tel:not(.ouvert)::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:120px; background:linear-gradient(rgba(250,251,253,0), #fafbfd 85%); pointer-events:none; }
}
.ru-voir-tout{ display:none; }
@media (max-width:767px){
  .ru-js .ru-voir-tout{ display:flex; justify-content:center; margin:14px 0 6px; }
  .ru-voir-tout button{ font:800 15px/1 'Manrope',sans-serif; background:#fff; color:var(--ru-ink); border:2.5px solid var(--ru-ink); border-radius:999px; box-shadow:3px 3px 0 var(--ru-ink); padding:11px 18px; }
}