/**
 * Nout Web Réunion — thème global
 * À charger en dernier dans le <head> (après Tailwind et les <style> inline).
 */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root {
  --brand-primary: #0b3a83;
  --brand-secondary: #0e7490;
  --brand-accent: #f97316;
  --brand-deep: #071a33;
  --text-on-dark: #f8fafc;
  --text-muted-on-dark: rgba(248, 250, 252, 0.82);
  --text-on-accent: #0f172a;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typo : prime sur les * { Poppins } des pages legacy */
*,
body,
input,
textarea,
select,
button {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-display {
  font-family: "Fraunces", Georgia, "Times New Roman", serif !important;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Hero — couleurs marque visibles */
.hero {
  background: linear-gradient(
    140deg,
    var(--brand-deep) 0%,
    var(--brand-primary) 42%,
    #075985 72%,
    var(--brand-secondary) 100%
  ) !important;
  color: var(--text-on-dark) !important;
}

.hero::before {
  opacity: 0.12 !important;
  mix-blend-mode: luminosity;
}

.hero .text-gray-200,
.hero .text-gray-300,
.hero p.text-gray-200,
.hero p.text-gray-300 {
  color: var(--text-muted-on-dark) !important;
}

.hero h1 .text-transparent.bg-clip-text.bg-gradient-to-r,
.hero h1 span.bg-clip-text {
  background-image: linear-gradient(90deg, #fed7aa, var(--brand-accent), #fb923c) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Boutons utilitaires — contraste garanti */
.btn-primary {
  background: linear-gradient(135deg, var(--brand-accent) 0%, #ea580c 100%) !important;
  color: var(--text-on-accent) !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(249, 115, 22, 0.38) !important;
}

.btn-primary:hover {
  color: var(--text-on-accent) !important;
  filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(249, 115, 22, 0.48) !important;
}

.btn-secondary {
  background: linear-gradient(135deg, #0e7490 0%, var(--brand-primary) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(11, 58, 131, 0.35) !important;
}

.btn-secondary:hover {
  color: #ffffff !important;
  filter: brightness(1.06);
}

.hero-btn-outline {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* CTA ambre / orange sur fond sombre : texte toujours foncé */
a.inline-flex.bg-amber-400,
a.inline-flex.bg-amber-300,
a.inline-flex.bg-orange-400,
button.bg-yellow-400,
button.bg-yellow-500,
a.bg-orange-400 {
  color: #0f172a !important;
}

a.inline-flex.bg-amber-400:hover,
a.inline-flex.bg-orange-400:hover {
  color: #0f172a !important;
}

/* Navbar */
.navbar {
  background: linear-gradient(
    90deg,
    rgba(7, 26, 51, 0.97) 0%,
    var(--brand-primary) 52%,
    #0e7490 100%
  ) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-cta-devis {
  background: var(--brand-accent) !important;
  color: var(--text-on-accent) !important;
}

.nav-cta-devis:hover {
  background: #fb923c !important;
  color: var(--text-on-accent) !important;
}

.nav-cta-phone {
  color: #0f172a !important;
  background: #ffffff !important;
}

/* Blocs CTA fin de page (remplace slate/indigo Tailwind) */
.nout-cta-band {
  background: linear-gradient(
    135deg,
    var(--brand-deep) 0%,
    var(--brand-primary) 45%,
    #0c4a6e 100%
  ) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Newsletter / encarts dégradés violet → marque */
.nout-brand-panel {
  background: linear-gradient(
    120deg,
    var(--brand-primary) 0%,
    #155e75 50%,
    var(--brand-secondary) 100%
  ) !important;
}

/* Footer */
.footer {
  background: linear-gradient(180deg, var(--brand-deep) 0%, #020617 100%) !important;
}

.footer-link:hover {
  color: var(--brand-accent) !important;
}

.scroll-top {
  background: linear-gradient(135deg, var(--brand-accent), #ea580c) !important;
  color: #0f172a !important;
}

/* Titres de section soulignés */
.section-title::after {
  background: linear-gradient(
    90deg,
    var(--brand-primary),
    var(--brand-secondary),
    var(--brand-accent)
  ) !important;
}

.service-card:hover {
  border-color: rgba(14, 116, 144, 0.55) !important;
}

.service-card::before {
  background: linear-gradient(
    90deg,
    var(--brand-primary),
    var(--brand-secondary),
    var(--brand-accent)
  ) !important;
}

/* Liens d'évitement */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  z-index: 9999;
  padding: 0.75rem 1rem;
  background: var(--brand-accent);
  color: #0f172a;
  font-weight: 700;
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Unifie le menu : on masque l'ancien onglet partenaire partout */
a[href="devenir-partenaire.html"] {
  display: none !important;
}

/* Une seule pub Adsense visible par page */
.adsense-container ~ .adsense-container {
  display: none !important;
}

ins.adsbygoogle ~ ins.adsbygoogle {
  display: none !important;
}
