@charset "utf-8";

/* ==================================================================
   TREGOR DIGITAL - Ambiance « douce » (novembre 2026)
   Chargée APRÈS style.css : adoucit la palette sans toucher à la
   structure. Nuit moins profonde, or champagne moins saturé, arrondis
   plus généreux, ombres diffuses, bandes claires crème.
   Pour revenir à l'ancien rendu : retirer la ligne doux.css de header.php.
   ================================================================== */

:root {
  /* Nuit plus chaude et moins contrastée (taupe espresso) */
  --night:    #15120e;
  --night-2:  #1a1612;
  --night-3:  #211c17;
  --night-4:  #29231c;

  /* Or champagne : même famille que le logo, moins vif */
  --gold-deep: #6f5426;
  --gold-dark: #8f6f35;
  --gold:      #c4a265;
  --gold-mid:  #d4b679;
  --gold-lite: #e3cb98;
  --gold-pale: #f6ebd3;

  --ink:      #f1ebdf;
  --ink-soft: rgba(241, 235, 223, 0.78);
  --ink-dim:  rgba(241, 235, 223, 0.6);

  --panel:      rgba(255, 246, 228, 0.045);
  --panel-warm: rgba(196, 162, 101, 0.07);
  --line:       rgba(212, 182, 121, 0.22);
  --line-soft:  rgba(241, 235, 223, 0.08);

  --grad-gold: linear-gradient(100deg, #a0814a 0%, #d4b679 28%, #f6ebd3 50%, #d4b679 72%, #a0814a 100%);

  --r-s: 14px;
  --r-m: 18px;
  --r-l: 26px;

  /* Ombres longues et diffuses, jamais dures */
  --shadow: 0 1px 0 rgba(255, 246, 228, 0.05) inset, 0 30px 60px -36px rgba(8, 6, 3, 0.7);

  /* Tons secondaires de l'ambiance */
  --sage: 150, 172, 150;
  --sea:  132, 160, 178;
}

body { line-height: 1.75; }
body::before {
  background:
    radial-gradient(60vw 55vh at 92% -15%, rgba(212, 182, 121, 0.09), transparent 70%),
    radial-gradient(50vw 50vh at -10% 110%, rgba(var(--sea), 0.06), transparent 70%);
}
body::after { opacity: 0.02; }

::selection { background: rgba(212, 182, 121, 0.4); color: #1b1610; }

h1 { font-weight: 700; letter-spacing: -0.03em; }
h2 { font-weight: 700; letter-spacing: -0.025em; }

/* ---------- En-tête ---------- */
.site-head.is-stuck .head-in {
  background: rgba(26, 22, 18, 0.7);
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 246, 228, 0.06);
}

/* ---------- Boutons : champagne satiné, halo léger ---------- */
.btn { background: rgba(255, 246, 228, 0.04); border-color: rgba(212, 182, 121, 0.28); }
.btn:hover { background: rgba(212, 182, 121, 0.1); border-color: var(--gold-mid); }
.btn-gold {
  background: linear-gradient(180deg, #e3cb98, #d0b072);
  border-color: transparent;
  color: #1d170f;
  box-shadow: inset 0 1px 0 rgba(255, 250, 238, 0.55), 0 10px 26px -16px rgba(212, 182, 121, 0.55);
}
.btn-gold:hover {
  background: linear-gradient(180deg, #ecd8ad, #d9bc82);
  border-color: transparent;
  color: #1d170f;
  box-shadow: inset 0 1px 0 rgba(255, 250, 238, 0.7), 0 16px 32px -16px rgba(212, 182, 121, 0.6);
}
.nav a.btn-gold, .nav a.btn-gold:hover, .skip, .offer[data-tag]::before { color: #1d170f; }

.label { letter-spacing: 0.14em; font-weight: 600; }
.label::before { width: 22px; border-radius: 2px; }

/* ---------- Bandes claires : crème douce, fondu au lieu d'un liseré ---------- */
.band-light {
  --panel-warm: #fffbf4;
  --line:       rgba(143, 111, 53, 0.24);
  --gold:       #93733a;
  --gold-lite:  #7a5d2a;
  --gold-pale:  #5e4620;
  background:
    radial-gradient(55% 45% at 100% 0%, rgba(212, 182, 121, 0.16), transparent 70%),
    radial-gradient(45% 40% at 0% 100%, rgba(var(--sage), 0.12), transparent 70%),
    #f7f2e8;
}
.band-light::before, .band-light::after { opacity: 0.35; }
.band-light .btn { background: #fffdf8; }
.band-light .btn-gold { background: linear-gradient(180deg, #e3cb98, #d0b072); }
.band-light .work { box-shadow: 0 1px 2px rgba(40, 30, 15, 0.04), 0 26px 50px -34px rgba(90, 66, 28, 0.32); }

/* ---------- Cartes : plus rondes, survol plus calme ---------- */
.offer { border-radius: var(--r-l); background: linear-gradient(180deg, rgba(255, 246, 228, 0.05), rgba(255, 246, 228, 0.015)); }
.offer:hover { transform: translateY(-4px); }
.offer.feature, .offer.promo {
  border-color: rgba(212, 182, 121, 0.5);
  background: radial-gradient(120% 60% at 50% 0%, rgba(212, 182, 121, 0.13), transparent 70%), var(--night-3);
}
.checks .ico, .trio .ico { background: rgba(212, 182, 121, 0.1); }
.trio article { border-radius: var(--r-l); }
.trio article:first-child {
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(212, 182, 121, 0.2), transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(var(--sage), 0.12), transparent 70%),
    var(--night-3);
}
.callout { border-radius: var(--r-l); }

/* ==================================================================
   Accueil : ouverture animée, tout en douceur
   ================================================================== */

/* Halos colorés qui dérivent lentement derrière le texte */
.hero-aura {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.hero-aura i {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
}
.hero-aura i:nth-child(1) {
  width: 46vw; max-width: 620px; aspect-ratio: 1;
  right: -8%; top: -18%;
  background: radial-gradient(circle, rgba(212, 182, 121, 0.38), transparent 65%);
}
.hero-aura i:nth-child(2) {
  width: 36vw; max-width: 480px; aspect-ratio: 1;
  left: -10%; top: 30%;
  background: radial-gradient(circle, rgba(var(--sea), 0.22), transparent 65%);
}
.hero-aura i:nth-child(3) {
  width: 30vw; max-width: 400px; aspect-ratio: 1;
  left: 38%; bottom: -20%;
  background: radial-gradient(circle, rgba(var(--sage), 0.2), transparent 65%);
}
.hero-home::before { display: none; } /* le halo fixe est remplacé par les halos animés */

@media (prefers-reduced-motion: no-preference) {
  .hero-aura i:nth-child(1) { animation: aura-a 22s ease-in-out infinite alternate; }
  .hero-aura i:nth-child(2) { animation: aura-b 26s ease-in-out infinite alternate; }
  .hero-aura i:nth-child(3) { animation: aura-c 30s ease-in-out infinite alternate; }
}
@keyframes aura-a { to { transform: translate(-8%, 10%) scale(1.12); } }
@keyframes aura-b { to { transform: translate(14%, -8%) scale(0.92); } }
@keyframes aura-c { to { transform: translate(-12%, -14%) scale(1.15); } }

/* Titre : les mots montent en fondu, sans effet de coupe sèche */
.js .split .w > span {
  opacity: 0;
  translate: 0 55%;
  filter: blur(6px);
  animation: word-soft 1.1s var(--ease) forwards;
  animation-delay: calc(150ms + var(--i, 0) * 55ms);
}
@keyframes word-soft { to { opacity: 1; translate: 0 0; filter: blur(0); } }
.split .w { overflow: visible; }

/* Mot clé : un trait champagne se dessine dessous, après le titre */
.hero-home h1 em {
  color: var(--gold-lite);
  background: linear-gradient(90deg, rgba(212, 182, 121, 0.55), rgba(212, 182, 121, 0.15)) no-repeat 0 92% / 100% 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.js .hero-home h1 em { background-size: 0% 0.12em; animation: em-line 1.2s var(--ease) 1.1s forwards; }
@keyframes em-line { to { background-size: 100% 0.12em; } }

/* Écrans clients : entrée douce puis légère flottaison, chacun à son rythme.
   La flottaison anime « transform », l'entrée « translate » : pas de conflit. */
.hero-shots { transition: transform 0.9s var(--ease); }
.hero-shots .mock { border-radius: 14px; box-shadow: 0 36px 70px -40px rgba(0, 0, 0, 0.75); }
.js .hero-shots .mock { animation: shot-in 1.3s var(--ease) forwards; }
.js .hero-shots .shot-back  { animation-delay: 300ms; }
.js .hero-shots .shot-front { animation-delay: 460ms; }
.js .hero-shots .shot-mini  { animation-delay: 620ms; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-shots .shot-back  { animation: shot-in 1.3s var(--ease) 300ms forwards, float 8s ease-in-out 1.7s infinite; }
  .js .hero-shots .shot-front { animation: shot-in 1.3s var(--ease) 460ms forwards, float 7s ease-in-out 2.4s infinite reverse; }
  .js .hero-shots .shot-mini  { animation: shot-in 1.3s var(--ease) 620ms forwards, float 6s ease-in-out 1.9s infinite; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* Le combiné du bouton téléphone sonne discrètement, de temps en temps */
@media (prefers-reduced-motion: no-preference) {
  .hero-home .hero-actions a[href^="tel:"] .ico {
    transform-origin: 50% 60%;
    animation: ring 6s ease-in-out 2.4s infinite;
  }
}
@keyframes ring {
  0%, 82%, 100% { rotate: 0deg; }
  84% { rotate: -14deg; }
  86% { rotate: 12deg; }
  88% { rotate: -10deg; }
  90% { rotate: 8deg; }
  92% { rotate: 0deg; }
}

/* Repères sous l'ouverture : petites cartes au lieu de filets */
.hero-home + .shell .facts {
  gap: 12px;
  border: 0;
}
.hero-home + .shell .facts div {
  padding: 22px 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-m);
  background: var(--panel);
  transition: border-color 0.4s var(--ease), translate 0.4s var(--ease);
}
.hero-home + .shell .facts div:first-child { padding-left: 24px; }
.hero-home + .shell .facts div:hover { border-color: var(--line); translate: 0 -2px; }
.hero-home + .shell .facts b { color: var(--gold-lite); }
@media (max-width: 860px) {
  .hero-home + .shell .facts div:nth-child(odd) { padding-left: 24px; }
  .hero-home + .shell .facts div:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 560px) {
  .hero-home + .shell .facts div { padding: 16px 18px; }
  .hero-home + .shell .facts div:first-child,
  .hero-home + .shell .facts div:nth-child(odd) { padding-left: 18px; }
}

.marquee li { color: rgba(241, 235, 223, 0.42); font-weight: 600; }
.marquee li::after { width: 6px; height: 6px; border-radius: 50%; rotate: 0deg; opacity: 0.6; }

/* Apparition à la lecture : un peu plus lente et plus souple */
.js .up {
  translate: 0 22px;
  transition:
    opacity 0.9s var(--ease) var(--d, 0ms),
    translate 0.9s var(--ease) var(--d, 0ms);
}

@media (prefers-reduced-transparency: reduce) {
  .hero-aura { display: none; }
}