/* ct.css */

:root {
  --main-color: #007bff;
  --accent-color: #6c757d;
  --bg-labo: #ffffff;
}

/* On change les valeurs si le body porte la classe .is-connected */

/* Utilisation des variables dans tes composants */

/* Le conteneur de la photo */

/* Effet Pro Connecté */

/* Le Cadenas en pastille */

/* Optimisation tactile pour la barre d'identité */

/* Bouton de partage "Pouce-Friendly" */

/* Texte adaptatif */

/* ==========================================================================
   AJOUTS POUR L'OPPORTUNITÉ INTERNATIONALE (SUR FOND VIDÉO SOMBRE)
   ========================================================================== */

/* Couleur Or Premium pour Olfazeta (Fixe, hors statut de connexion) */

/* Ombres portées pour garantir la lisibilité sur la vidéo en mouvement */

/* gazette

/* ============================================================
   CHOGAN GAZETTE — Feuille de styles
   À coller dans ton fichier CSS global Bootstrap Studio
   ============================================================ */

/* ── 1. Variables centralisées ─────────────────────────────── */

:root {
  --cg-blue-dark: #0d1b4b;
  --cg-blue: #1B6FD8;
  --cg-gold: #F4A100;
  --cg-gold-light: #FFFBEE;
  --cg-gold-border: rgba(212, 175, 55, 0.3);
  --cg-green: #18bc9c;
  --cg-text: #2c2c2c;
  --cg-muted: #6c757d;
  --cg-radius: 14px;
  --cg-radius-sm: 8px;
}

/* ── 2. Layout sections ────────────────────────────────────── */

/* ── 3. Typographie commune ────────────────────────────────── */

/* ── 4. Badges & pills ─────────────────────────────────────── */

.cg-badge-gold {
  display: inline-block;
  background: var(--cg-gold);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 1rem;
}

.cg-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #EEF4FF;
  color: var(--cg-blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 0.75rem;
}

/* ── 5. Hero banner ────────────────────────────────────────── */

.cg-hero-top {
  background: linear-gradient(135deg, var(--cg-blue-dark) 0%, var(--cg-blue) 100%);
  border-radius: var(--cg-radius);
  padding: 2.5rem 1.5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
}

.cg-hero-top::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: rgba(244, 161, 0, 0.12);
  border-radius: 50%;
}

.cg-hero-top h2 {
  font-weight: 800;
  font-size: clamp(1.3rem, 4vw, 2rem);
  color: #fff;
  margin: 0 0 0.25rem;
  line-height: 1.2;
}

.cg-hero-top .lead {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.05rem;
  margin-bottom: 0;
}

/* ── 6. Carte sponsor / ville ──────────────────────────────── */

/* ── 7. Humour & histoire ──────────────────────────────────── */

/* ── 8. Section qualité ────────────────────────────────────── */

/* ── 9. Gastronomie ────────────────────────────────────────── */

/* ── 10. Parfums ───────────────────────────────────────────── */

.cg-parfum-video {
  border-radius: var(--cg-radius);
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(27, 111, 216, 0.15);
  border: 2px solid var(--cg-gold-border);
}

/* Price tag parfum */

/* ── 11. Cards bien-être ───────────────────────────────────── */

/* ── 12. Vision Chogan ─────────────────────────────────────── */

/* ── 13. CTA final ─────────────────────────────────────────── */

/* ── 14. Responsive mobile ─────────────────────────────────── */

/* Styles personnalisés pour le header - à intégrer dans votre fichier style.css */

/* Couleurs du thème (variables Bootstrap) */

:root {
  --bs-primary: #0d6efd;
  --bs-primary-rgb: 13, 110, 253;
  --bg-labo: #ffffff;
}

/* Header principal */

/* Navbar */

/* Liens de navigation */

/* Adaptation responsive pour tablette et mobile */

/* Badge personnalisé */

/* Bouton Boutique */

/* Toggler mobile personnalisé */

/* Animation au scroll (optionnel) */

/* Responsive fine-tuning */

/* Support pour thème sombre (optionnel) */

/* Optionnel : Animation pour le JavaScript d'effet au scroll */

/* Décommentez si vous voulez l'effet de scroll */

/* window.addEventListener('scroll', function() {
    var header = document.querySelector('.sticky-top');
    if (window.scrollY > 50) {
        header.classList.add('scrolled');
    } else {
        header.classList.remove('scrolled');
    }
}); */

/* ==========================================
   🔧 OUTLINE DEBUGGER (À SUPPRIMER APRÈS)
   ========================================== */

/* * {
    outline: 1px solid red !important;
} */