/* ============================================================
   global-refonte.css  —  À charger APRÈS global.css sur les 3 pages
   Bascule le site en base claire + règles d'alternance de sections.
   ============================================================ */

/* 1) Base claire (le thème sombre était codé en dur via body) */
body{ background-color:var(--color-white) !important; color:var(--color-ink-body) !important; font-family:var(--font-secondary); }
p{ color:var(--color-ink-secondary); }

/* 2) Wrappers d'alternance — À POSER sur un <div> pleine largeur
      qui ENTOURE le .container de chaque section (voir CORRECTIONS.md).
      Le fond doit être pleine largeur : il ne peut PAS être sur .container (max 1200px). */
.sec{ width:100%; }
.sec--white{ background:var(--color-white); }
.sec--tint { background:var(--color-surface-alt); border-top:1px solid color-mix(in srgb, var(--color-bg-main) 8%, transparent); border-bottom:1px solid color-mix(in srgb, var(--color-bg-main) 8%, transparent); }
.sec--dark { background:linear-gradient(180deg,#12233f,#1d3f71); }

/* 3) Typographie selon le fond ------------------------------------------------ */
/* Titres/paragraphes sur fond CLAIR */
.sec--white .section-title,
.sec--tint  .section-title,
.sec--white h1, .sec--tint h1,
.sec--white h2, .sec--tint h2,
.sec--white h3, .sec--tint h3{ color:var(--color-ink); letter-spacing:-.01em; }

.sec--white p, .sec--tint p{ color:var(--color-ink-secondary); }

/* Titres/paragraphes sur fond FONCÉ */
.sec--dark .section-title,
.sec--dark h2, .sec--dark h3{ color:var(--color-white); }
.sec--dark p{ color:var(--color-text-secondary); }

/* Eyebrow : orange sur clair, jaune sur foncé */
.section-tagline{ color:var(--color-orange); }
.sec--dark .section-tagline{ color:var(--color-orange-yellow); }

/* 4) Cartes génériques sur fond clair */
.sec--white .service-card, .sec--tint .service-card,
.sec--white .portfolio-card, .sec--tint .portfolio-card,
.sec--white .stat-card, .sec--tint .stat-card{
  background:var(--color-surface); border:1px solid color-mix(in srgb, var(--color-bg-main) 10%, transparent); color:var(--color-ink-body);
}
.sec--white .service-card h3, .sec--tint .service-card h3,
.sec--white .portfolio-card h3, .sec--tint .portfolio-card h3{ color:var(--color-ink); }
.sec--white .service-card p, .sec--tint .service-card p,
.sec--white .portfolio-card p, .sec--tint .portfolio-card p{ color:var(--color-ink-secondary); }
.sec--white .service-card:hover, .sec--tint .service-card:hover,
.sec--white .portfolio-card:hover, .sec--tint .portfolio-card:hover{
  border-color:color-mix(in srgb, var(--color-orange) 40%, transparent); box-shadow:0 16px 40px color-mix(in srgb, var(--color-bg-main) 10%, transparent);
}

/* Icônes de cartes : passer du bleu clair à l'orange sur fond clair */
.sec--white .service-icon, .sec--tint .service-icon,
.sec--white .collective-icon, .sec--tint .collective-icon,
.sec--white .info-icon, .sec--tint .info-icon{ color:var(--color-orange); }

/* Stats / compteurs sur clair */
.sec--white .stat-card .counter, .sec--tint .stat-card .counter{ color:var(--color-orange); }
.sec--white .stat-card .stat-label, .sec--tint .stat-card .stat-label{ color:var(--color-ink-secondary); }

/* 5) Boutons ------------------------------------------------------------------ */
/* Bouton secondaire sur fond clair (au lieu du style vidéo translucide) */
.sec--white .btn-secondary, .sec--tint .btn-secondary{
  background:transparent; color:var(--color-bg-main); border:1px solid color-mix(in srgb, var(--color-bg-main) 25%, transparent); backdrop-filter:none;
}
.sec--white .btn-secondary:hover, .sec--tint .btn-secondary:hover{
  background:color-mix(in srgb, var(--color-bg-main) 5%, transparent); color:var(--color-bg-main);
}