:root{
  /* Palette proche de ton logo (approx) */
  --teal: #2C7E8C;
  --gray: #4E4E4D;
  --dark: #141414;   /* fond principal */
  --dark2:#0f0f10;   /* profondeur */

  --text: rgba(255,255,255,0.88);
  --muted: rgba(255,255,255,0.70);
}

/* Fond intimiste : sombre + halos doux */
.bg-intimate{
  background:
    radial-gradient(900px 520px at 50% 20%, rgba(44,126,140,0.20), transparent 60%),
    radial-gradient(700px 500px at 15% 85%, rgba(78,78,77,0.18), transparent 60%),
    radial-gradient(900px 650px at 85% 85%, rgba(44,126,140,0.10), transparent 62%),
    linear-gradient(180deg, var(--dark), var(--dark2));
  overflow: hidden;
}

/* Petit grain très subtil (option premium) */
.bg-intimate::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Bloc principal fin */
.hero{
  padding-top: 4vh;
  padding-bottom: 4vh;
}

/* Logo responsive + respiration très légère */
.brand-logo{
  width: min(380px, 72vw);
  height: auto;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,0.45));
  animation: breathe 6.5s ease-in-out infinite;
}

@keyframes breathe{
  0%,100% { transform: translateY(0); opacity: 0.98; }
  50%     { transform: translateY(-4px); opacity: 1; }
}

/* Slogan : fin, classe, sans bloc */
.slogan{
  color: var(--text);
  font-weight: 300;
  letter-spacing: 0.35px;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.35;

  opacity: 0;
  transform: translateY(8px);
  animation: reveal 800ms ease-out 120ms forwards;
}

@keyframes reveal{
  to { opacity: 1; transform: translateY(0); }
}

/* Brillance douce sur le texte (pas un défilement) */
.slogan-shine{
  position: relative;
  display: inline-block;
}

.slogan-shine::after{
  content:"";
  position:absolute;
  inset: -0.15em -0.25em;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(44,126,140,0.00) 35%,
    rgba(44,126,140,0.22) 50%,
    rgba(255,255,255,0.12) 52%,
    rgba(44,126,140,0.00) 65%,
    transparent 100%
  );
  transform: translateX(-130%);
  opacity: 0.9;
  filter: blur(0.2px);
  mix-blend-mode: screen;
  animation: shine 5.8s ease-in-out 1.2s infinite;
  pointer-events: none;
}

@keyframes shine{
  0%   { transform: translateX(-130%); }
  35%  { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

/* Ligne très fine sous le slogan */
.fine-line{
  width: min(320px, 55%);
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(44,126,140,0.75),
    rgba(255,255,255,0.28),
    rgba(44,126,140,0.55),
    transparent
  );
  opacity: 0.75;

  transform-origin: 50% 50%;
  animation: line-breathe 7s ease-in-out infinite;
}

@keyframes line-breathe{
  0%,100% { transform: scaleX(0.96); opacity: 0.55; }
  50%     { transform: scaleX(1.00); opacity: 0.85; }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .brand-logo, .slogan, .slogan-shine::after, .fine-line{ animation: none !important; }
  .slogan{ opacity: 1 !important; transform: none !important; }
}
/* Couleur du slogan gérée par un “ink shift” : on ne voit pas la forme,
   on voit juste les lettres légèrement changer de teinte au passage */
.slogan-ink{
  display: inline-block;

  /* Couleur de base (fallback) */
  color: rgba(255,255,255,0.88);

  /* Gradient très doux : la “zone teal” n’est pas une bande franche,
     c’est une transition courte qui teinte juste quelques lettres */
  background-image: linear-gradient(
    110deg,
		rgba(255,255,255,.86) 0%,
		rgba(255,255,255,.86) 48%,
		rgba(200,230,235,.55) 50%,
		rgba(255,255,255,.86) 52%,
		rgba(255,255,255,.86) 100%
);

  );

  /* On “colle” le gradient aux lettres */
  -webkit-background-clip: text;
  background-clip: text;

  /* Important : rend le texte transparent pour révéler le gradient */
  -webkit-text-fill-color: transparent;

  /* Taille > 100% pour que le déplacement soit progressif */
  background-size: 260% 100%;
  background-position: 0% 50%;

  /* Animation très lente et discrète */
  animation: inkShift 6.5s ease-in-out 1.0s infinite;
}

@keyframes inkShift{
  0%   { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}