/* ============================================================
   AMBIANCE « Sérénité » — douce, chaleureuse & éditoriale
   Fonds crème, violet en aplat franc plutôt qu'en arc-en-ciel,
   photos en couleurs naturelles, beaucoup de respiration.
   Conserve la charte officielle (mêmes couleurs de marque).
   ------------------------------------------------------------
   Pour figer cette ambiance sur WordPress : charger ce fichier
   après theme.css et supprimer le sélecteur d'ambiance.
   ============================================================ */

:root {
  --paper:        #FBF8F4;   /* crème chaud */
  --section-alt:  #F3ECE4;   /* sable */

  --hero-bg:      linear-gradient(150deg, #F0E8FA 0%, #FBF8F4 56%, #FBF1EC 100%);
  --hero-fg:      var(--noir);
  --hero-muted:   var(--ink-700);
  --hero-eyebrow: var(--violet);
  --hero-accent:  var(--violet);

  --impact-bg:    var(--violet);          /* violet de marque (le profond était jugé trop foncé) */
  --cta-bg:       linear-gradient(135deg, #4d00ad, #6000D9);

  --photo-tint:   0;          /* photos naturelles */
  --frame-radius: 26px;
}

/* Cartes engagement : voile chaleureux en haut, quasi opaque sous le texte
   (contraste AA garanti pour le blanc, RGAA). */
.engage-card::after { background: linear-gradient(180deg, rgba(45,20,80,0.06) 0%, rgba(45,20,80,0.18) 22%, rgba(35,17,64,0.90) 34%, rgba(30,15,56,0.96) 100%); }

/* Surfaces blanches → crème très légère pour réchauffer */
.engage, .mission, .hero { }
.testi-card, .card, .about-card, .service, .partner, .article-card,
.contact-info, .featured, .testimonial-big { background: var(--surface); }

/* Filet violet plein sous le hero clair, pour garder l'ancrage "journal" */
.hero { border-bottom: 4px solid var(--violet); }
.hero__decor span { opacity: 0.5; }
.hero__decor span:nth-child(1) { background: radial-gradient(circle, rgba(96,0,217,0.10) 0%, transparent 62%); }
.hero__decor span:nth-child(2) { background: radial-gradient(circle, rgba(0,181,223,0.16) 0%, transparent 62%); }

/* Hero clair → boutons de marque par défaut (violet plein + contour) */
.hero .btn--primary { background: var(--violet); color: #fff; border-color: var(--violet); }
.hero .btn--primary:hover { background: var(--violet-deep); border-color: var(--violet-deep); }
.hero .btn--ghost { background: transparent; color: var(--violet); border-color: var(--violet); }
.hero .btn--ghost:hover { background: var(--violet); color: #fff; }

.hero__photo { box-shadow: 0 26px 64px rgba(96,0,217,0.18); }