/* ============================================
   MADRA — Theme partagé (blanc épuré + header noir)
   À inclure sur toutes les pages publiques avant le <style> spécifique.
   ============================================ */

:root {
  /* === Palette blanche (override des palettes dark des pages) === */
  --bg: #ffffff;
  --bg2: #fafafa;
  --bg3: #f4f4f5;
  --w: #0a0a0b;                 /* texte primaire (presque-noir) */
  --t: #3f3f46;                 /* texte secondaire */
  --m: #71717a;                 /* texte tertiaire / placeholder */
  --d: #a1a1aa;                 /* texte estompé */
  --border: #e4e4e7;
  --b2: #f4f4f5;
  --b3: #d4d4d8;
  /* Accent orange (parcimonie : CTAs primaires + emphasis hero italique) */
  --o: #ff6a1a;
  --o2: #fb4a00;
  --og: linear-gradient(135deg, #ff6a1a, #fb4a00);
  --o15: rgba(255, 106, 26, .10);
  --o40: rgba(255, 106, 26, .30);
  --green: #16a34a;
  --fh: 'Domine', Georgia, serif;
  --fb: 'Inter', system-ui, sans-serif;
  --e: cubic-bezier(.16, 1, .3, 1);
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* === Reset léger === */
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--w);
  font-family: var(--fb);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--fh);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--w);
}

a { color: inherit; }

/* ============================================
   HEADER NOIR (cohérent avec /creer)
   Usage HTML :
   <div class="m-hdr-bar">
     <header class="m-hdr">
       <a href="/" class="m-hdr-brand"><img src="/images/logo-madra.png" alt="Madra"></a>
       <nav class="m-hdr-nav">
         <a href="/fonctionnement">Fonctionnement</a>
         <a href="/#prix">Prix</a>
         <a href="/blog">Blog</a>
       </nav>
       <div class="m-hdr-right">
         <a href="/connexion" class="m-hdr-login">Se connecter</a>
         <a href="/creer" class="m-hdr-cta">Créer mon site →</a>
       </div>
     </header>
   </div>
   ============================================ */

.m-hdr-bar {
  background: #0a0a0b;
  width: 100%;
  border-bottom: 1px solid #18181b;
  position: sticky;
  top: 0;
  z-index: 100;
}
.m-hdr {
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.m-hdr-brand { flex-shrink: 0; }
.m-hdr-brand img { height: 22px; display: block; }
.m-hdr-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.m-hdr-nav a {
  font-size: 14px;
  color: rgba(255, 255, 255, .65);
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: all .15s;
  font-weight: 500;
}
.m-hdr-nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .06);
}
.m-hdr-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.m-hdr-login {
  font-size: 13px;
  color: rgba(255, 255, 255, .65);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 100px;
  transition: color .15s;
  font-weight: 500;
}
.m-hdr-login:hover { color: #fff; }
.m-hdr-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--og);
  padding: 10px 20px;
  border-radius: 100px;
  text-decoration: none;
  transition: all .2s;
  white-space: nowrap;
  box-shadow: 0 4px 12px var(--o40);
}
.m-hdr-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px var(--o40);
}

@media (max-width: 768px) {
  .m-hdr-nav { display: none; }
  .m-hdr-login { display: none; }
  .m-hdr { padding: 14px 20px; gap: 16px; }
}

/* ============================================
   BOUTONS STANDARDS (pour pages publiques)
   ============================================ */

.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--fb);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 100px;
  cursor: pointer;
  transition: all .2s;
  border: none;
  text-decoration: none;
  position: relative;
}

.m-btn-primary {
  background: var(--og);
  color: #fff;
  box-shadow: 0 4px 14px var(--o40);
}
.m-btn-primary:hover:not(.is-loading):not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--o40);
}

.m-btn-secondary {
  background: var(--bg);
  color: var(--w);
  border: 1px solid var(--border);
}
.m-btn-secondary:hover:not(.is-loading):not(:disabled) {
  border-color: var(--w);
  background: var(--bg2);
}

.m-btn-ghost {
  background: transparent;
  color: var(--t);
}
.m-btn-ghost:hover:not(.is-loading):not(:disabled) {
  color: var(--w);
}

/* ============================================
   ÉTAT LOADING UNIFIÉ (boutons partout)
   ============================================ */

.is-loading,
button.is-loading,
a.is-loading {
  cursor: wait !important;
  opacity: .9;
  pointer-events: none;
  position: relative;
}

.is-loading > * { opacity: .5; }

.is-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: m-spin .8s linear infinite;
  opacity: 1;
}

@keyframes m-spin {
  to { transform: rotate(360deg); }
}

/* Variante : pour les buttons primary qui sont déjà en couleur, le spinner reste blanc */
.m-btn-primary.is-loading::after,
.is-loading.has-bg::after {
  border-color: rgba(255, 255, 255, .4);
  border-top-color: #fff;
}

/* Pulse subtle sur les CTAs primaires en loading */
.m-btn-primary.is-loading {
  animation: m-pulse-btn 1.5s ease-in-out infinite;
}

@keyframes m-pulse-btn {
  0%, 100% { box-shadow: 0 4px 14px var(--o40); }
  50% { box-shadow: 0 4px 28px var(--o40); }
}

/* ============================================
   THINKING OVERLAY (réutilisable pour calls API)
   Usage : MadraFeedback.showThinking('Je réfléchis…')
   ============================================ */

.m-thinking-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.m-thinking-overlay.is-visible { display: flex; }
.m-thinking-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 36px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .08);
}
.m-thinking-dots {
  display: flex;
  gap: 5px;
}
.m-thinking-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--o);
  animation: m-thinking-pulse 1.4s ease-in-out infinite;
}
.m-thinking-dots span:nth-child(2) { animation-delay: .2s; }
.m-thinking-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes m-thinking-pulse {
  0%, 80%, 100% { transform: scale(.7); opacity: .5; }
  40%           { transform: scale(1);  opacity: 1; }
}
.m-thinking-text {
  font-size: 14px;
  color: var(--w);
  font-weight: 500;
}

/* ============================================
   FOOTER MINIMAL UNIFIÉ
   ============================================ */

.m-ft {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 64px 24px 40px;
}
.m-ft-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 48px;
  grid-template-columns: 2fr 1fr 1fr 1fr;
}
.m-ft-brand h3 {
  font-size: 22px;
  margin-bottom: 12px;
}
.m-ft-brand p {
  color: var(--m);
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;
}
.m-ft-col h4 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--w);
  margin-bottom: 16px;
  font-family: var(--fb);
}
.m-ft-col a {
  display: block;
  font-size: 14px;
  color: var(--m);
  text-decoration: none;
  padding: 6px 0;
  transition: color .15s;
}
.m-ft-col a:hover { color: var(--w); }
.m-ft-bottom {
  max-width: 1200px;
  margin: 48px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--m);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.m-ft-bottom a { color: var(--m); text-decoration: none; }
.m-ft-bottom a:hover { color: var(--w); }

@media (max-width: 768px) {
  .m-ft-inner { grid-template-columns: 1fr 1fr; }
  .m-ft-brand { grid-column: 1 / -1; }
}