/* =============================================================
   ENGC — Couche d'amélioration visuelle  (engc-enhance.css)
   À charger APRÈS css/styles.css.
   Thème directeur : « l'enseigne qui s'allume ».
   Tout est scopé / additif pour ne rien casser de l'existant.
   ============================================================= */

:root {
  --engc-navy:    #1b2530;
  --engc-accent:  #2e86b5;   /* bleu enseigne existant */
  --engc-glow:    #5bb8ec;   /* bleu plus lumineux pour le halo / chase */
  --engc-spark:   #d6f1ff;   /* point chaud de "l'étoile filante" */
  --engc-ease:    cubic-bezier(.16,.84,.34,1);
}

/* angle animable pour le chase lumineux (dégrade proprement si non supporté) */
@property --engc-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* =============================================================
   1) APPARITION AU SCROLL  (reveal)
   - Les éléments ne sont masqués QUE si le JS est actif (html.engc-js),
     donc aucun risque de page vide si le JS échoue.
   - engc-enhance.js ajoute la classe .is-in quand l'élément entre à l'écran.
   ============================================================= */
html.engc-js .engagements .eng-card,
html.engc-js .produits .prod-card,
html.engc-js .atelier .section-inner > *,
html.engc-js .realisations .section-inner > *,
html.engc-js .cta-final .section-inner > *,
html.engc-js .section-inner > h2,
html.engc-js .section-sub {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition:
    opacity .7s var(--engc-ease),
    transform .7s var(--engc-ease),
    filter .7s var(--engc-ease);
  will-change: opacity, transform;
}

html.engc-js .is-in {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Décalage en cascade (stagger) pour les grilles de cartes */
html.engc-js .eng-card:nth-child(2),
html.engc-js .prod-card:nth-child(2)  { transition-delay: .08s; }
html.engc-js .eng-card:nth-child(3),
html.engc-js .prod-card:nth-child(3)  { transition-delay: .16s; }
html.engc-js .eng-card:nth-child(4),
html.engc-js .prod-card:nth-child(4)  { transition-delay: .24s; }
html.engc-js .prod-card:nth-child(5)  { transition-delay: .32s; }
html.engc-js .prod-card:nth-child(6)  { transition-delay: .40s; }

/* =============================================================
   2) HEADER STICKY QUI SE CONDENSE AU SCROLL
   engc-enhance.js ajoute .engc-shrink sur .topbar après ~40px.
   ============================================================= */
.topbar {
  transition: padding .25s var(--engc-ease),
              background-color .25s var(--engc-ease),
              box-shadow .25s var(--engc-ease),
              backdrop-filter .25s var(--engc-ease);
}
.topbar.engc-shrink {
  padding-top: 6px;
  padding-bottom: 6px;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 6px 24px rgba(27,37,48,.10);
}
.topbar.engc-shrink .nav-logo img {
  height: 50px; /* léger rétrécissement du logo */
  transition: height .25s var(--engc-ease);
}
.nav-logo img { transition: height .25s var(--engc-ease); }

/* =============================================================
   3) HERO — le mot "professionnels" qui s'allume (halo néon)
   Cible le <span class="halo"> déjà présent dans le H1.
   ============================================================= */
.hero h1 .halo {
  position: relative;
  color: var(--engc-glow);
  text-shadow:
     0 0 0 transparent;
  animation: engc-neon-on 1.4s var(--engc-ease) .3s both;
}
@keyframes engc-neon-on {
  0%   { text-shadow: 0 0 0 transparent; opacity:.55; }
  35%  { text-shadow: 0 0 14px rgba(91,184,236,.0); opacity:1; }
  45%  { opacity:.7; }   /* petit clignotement "tube qui s'amorce" */
  55%  { opacity:1; }
  100% { text-shadow:
            0 0 12px rgba(91,184,236,.55),
            0 0 32px rgba(46,134,181,.35); opacity:1; }
}

/* Indice de défilement discret en bas du hero (ajouté par le JS) */
.engc-scrollcue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 26px; height: 42px;
  margin-left: -13px;
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 14px;
  opacity: .8;
  transition: opacity .4s var(--engc-ease);
}
/* disparaît dès qu'on scrolle (classe posée par engc-enhance.js) */
.engc-scrollcue.engc-cue-hidden {
  opacity: 0;
  pointer-events: none;
}
.engc-scrollcue::after {
  content: "";
  position: absolute;
  left: 50%; top: 8px;
  width: 4px; height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: #fff;
  animation: engc-scrollcue 1.8s var(--engc-ease) infinite;
}
@keyframes engc-scrollcue {
  0%   { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 0; }
}

/* =============================================================
   4) ⭐ LE BOUTON QUI S'ALLUME — toutes les CTA vers l'outil de devis
   Cible AUTOMATIQUEMENT tout lien vers devis.engc.fr (aucun
   changement de HTML nécessaire), + .btn-primary et .nav-cta.
   Effet : point lumineux qui court sur le contour (chase LED)
           + halo qui "respire".
   ============================================================= */
a[href*="devis.engc.fr"],
.btn-primary,
.nav-cta {
  position: relative;
  isolation: isolate;
  overflow: visible;
  transition:
    transform .25s var(--engc-ease),
    box-shadow .35s var(--engc-ease),
    filter .25s var(--engc-ease);
  /* halo de base : le bouton est "allumé" en permanence, doucement */
  box-shadow:
    0 0 0 1px rgba(46,134,181,.0),
    0 8px 22px rgba(46,134,181,.28);
  animation: engc-breathe 3.2s ease-in-out infinite;
}

/* Le contour lumineux qui tourne (l'étoile filante) */
a[href*="devis.engc.fr"]::before,
.btn-primary::before,
.nav-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;                       /* épaisseur du trait lumineux */
  background: conic-gradient(
    from var(--engc-angle),
    transparent 0deg 250deg,
    rgba(91,184,236,.35) 300deg,
    var(--engc-glow) 332deg,
    var(--engc-spark) 350deg,         /* le point chaud = la "tête" de l'étoile filante */
    var(--engc-glow) 356deg,
    transparent 360deg
  );
  /* on ne garde que le contour (anneau) grâce au masque */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  animation: engc-chase 3.4s linear infinite;
}

@keyframes engc-chase {
  to { --engc-angle: 360deg; }
}
@keyframes engc-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(46,134,181,0),  0 8px 22px rgba(46,134,181,.28); }
  50%      { box-shadow: 0 0 0 1px rgba(91,184,236,.25), 0 10px 30px rgba(46,134,181,.45); }
}

/* Survol : la lumière s'intensifie nettement + le bouton avance */
a[href*="devis.engc.fr"]:hover,
.btn-primary:hover,
.nav-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow:
    0 0 0 1px rgba(91,184,236,.5),
    0 0 18px rgba(91,184,236,.55),
    0 14px 36px rgba(46,134,181,.55);
  animation-play-state: paused; /* fige la "respiration", le halo reste fort */
}
a[href*="devis.engc.fr"]:hover::before,
.btn-primary:hover::before,
.nav-cta:hover::before {
  animation-duration: 1.6s; /* l'étoile filante accélère au survol */
}

/* La grosse CTA (hero + section finale) : effet renforcé */
.btn-big {
  letter-spacing: .4px;
}
.btn-big::before { padding: 2.5px; }

/* =============================================================
   5) BOUTON SECONDAIRE (outline) — survol propre, sans surcharge
   ============================================================= */
.btn-ghost {
  transition: transform .25s var(--engc-ease),
              border-color .25s var(--engc-ease),
              background-color .25s var(--engc-ease),
              color .25s var(--engc-ease);
}
.btn-ghost:hover {
  transform: translateY(-2px);
  border-color: var(--engc-glow);
  background: rgba(91,184,236,.10);
}

/* =============================================================
   6) CARTES PRODUITS — survol riche (zoom photo + voile + flèche)
   .prod-card est un <a> contenant une image + titre + texte.
   ============================================================= */
.prod-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  transition: transform .35s var(--engc-ease),
              box-shadow .35s var(--engc-ease);
  box-shadow: 0 8px 24px rgba(27,37,48,.08);
}
.prod-card img {
  transition: transform .6s var(--engc-ease);
  will-change: transform;
}
.prod-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(27,37,48,.20);
}
.prod-card:hover img {
  transform: scale(1.06);
}
/* voile dégradé qui monte depuis le bas de la photo au survol */
.prod-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 60%;                      /* couvre la zone image */
  background: linear-gradient(to top, rgba(27,37,48,.55), transparent);
  opacity: 0;
  transition: opacity .35s var(--engc-ease);
  pointer-events: none;
}
.prod-card:hover::after { opacity: 1; }
/* petite flèche qui apparaît (signal "cliquable") */
.prod-card::before {
  content: "→";
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--engc-accent);
  color: #fff;
  font-weight: 700;
  transform: translateX(8px) scale(.8);
  opacity: 0;
  transition: all .35s var(--engc-ease);
  z-index: 2;
}
.prod-card:hover::before {
  transform: translateX(0) scale(1);
  opacity: 1;
}

/* =============================================================
   7) CARTES ENGAGEMENTS — soulèvement + filet bleu qui s'allume
   ============================================================= */
.eng-card {
  transition: transform .3s var(--engc-ease),
              box-shadow .3s var(--engc-ease);
}
.eng-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(27,37,48,.16);
}
/* si la bordure haute existe déjà via styles.css, on la fait juste vibrer */
.eng-card:hover h3 {
  text-shadow: 0 0 12px rgba(46,134,181,.18);
}

/* =============================================================
   8) ATELIER (section sombre) — zoom doux des photos machines
   Sélecteur défensif : cible les images dans .atelier.
   ============================================================= */
.atelier figure,
.atelier a { overflow: hidden; display: block; border-radius: 10px; }
.atelier img {
  transition: transform .6s var(--engc-ease), filter .4s var(--engc-ease);
}
.atelier figure:hover img,
.atelier a:hover img,
.atelier img:hover {
  transform: scale(1.05);
  filter: brightness(1.08) saturate(1.05);
}

/* =============================================================
   9) MATIÈRE DANS LES SECTIONS CLAIRES
   Grain très léger pour que l'ADN "industriel" du hero ne
   disparaisse pas brutalement. Réglé très discret (à doser).
   ============================================================= */
.engagements,
.produits {
  position: relative;
}
.engagements::after,
.produits::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
/* le contenu reste au-dessus du grain */
.engagements > *,
.produits > * { position: relative; z-index: 1; }

/* =============================================================
   10) LOGO — corriger le fond blanc "cuit"
   Le PNG actuel n'est PAS transparent (fond blanc plein vérifié).
   • Solution propre (recommandée) : remplacer le fichier par une
     vraie version transparente — voir make-logo-transparent.py.
   • Solution immédiate sans toucher au fichier : multiply sur les
     fonds CLAIRS uniquement (le blanc disparaît). NE marche PAS sur
     le footer sombre -> pour le footer, utiliser la version blanche
     générée par le script (logo-engc-white.png).
   ============================================================= */

/* Stopgap header (fond clair) — décommenter si tu ne remplaces pas tout de suite le PNG :
.nav-logo img { mix-blend-mode: multiply; }
*/

/* Une fois les fichiers transparents en place, plus besoin de blend.
   Pour le footer sombre, pointer l'<img> du footer vers la version blanche :
   <img class="footer-logo" src="/img/logo-engc-white.png" ...> */
.footer-logo { filter: none; }

/* =============================================================
   11) ACCESSIBILITÉ — focus visible clavier
   ============================================================= */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--engc-glow);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================================
   12) RESPECT DE "RÉDUIRE LES ANIMATIONS"
   Si l'utilisateur a activé prefers-reduced-motion, on coupe tout
   le mouvement mais on garde le contenu visible.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html.engc-js .engagements .eng-card,
  html.engc-js .produits .prod-card,
  html.engc-js .atelier .section-inner > *,
  html.engc-js .realisations .section-inner > *,
  html.engc-js .cta-final .section-inner > *,
  html.engc-js .section-inner > h2,
  html.engc-js .section-sub {
    opacity: 1; transform: none; filter: none; transition: none;
  }
  .hero h1 .halo,
  a[href*="devis.engc.fr"], .btn-primary, .nav-cta,
  a[href*="devis.engc.fr"]::before, .btn-primary::before, .nav-cta::before,
  .engc-scrollcue::after {
    animation: none !important;
  }
  /* le bouton garde un halo statique, juste sans mouvement */
  a[href*="devis.engc.fr"], .btn-primary, .nav-cta {
    box-shadow: 0 0 0 1px rgba(91,184,236,.25), 0 8px 22px rgba(46,134,181,.35);
  }
}

/* =============================================================
   13) BANDE DE CHIFFRES-CLÉS (sous le hero)
   Compteurs animés via data-count (engc-enhance.js).
   ============================================================= */
.engc-stats { background: var(--engc-navy); color: #fff; padding: 48px 0; }
.engc-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.engc-stat { display: flex; flex-direction: column; align-items: center; }
.engc-num, .engc-num-suffix {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1;
  color: var(--engc-glow);
  text-shadow: 0 0 18px rgba(91,184,236,.35); /* léger halo néon, cohérent avec le thème */
}
.engc-num-suffix { font-size: clamp(22px, 4vw, 36px); margin-top: 2px; }
.engc-stat-label {
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
@media (max-width: 720px) {
  .engc-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
}

/* =============================================================
   12) EN-TÊTE BLEU NUIT (John 2026-10-05 : « trop blanc, trop classique,
   le logo ne ressort pas ») — barre sombre en verre, liseré lumineux
   bleu → rouge en pied, logo métal agrandi, liens clairs qui s'allument.
   ============================================================= */
.topbar,
.topbar.engc-shrink {
  background: linear-gradient(180deg, rgba(10, 24, 38, .96), rgba(16, 36, 54, .93));
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 0;
  box-shadow: 0 8px 28px rgba(5, 14, 24, .35);
}
.topbar::after {               /* liseré LED tricolore */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #2e86b5 18%, #6fc3ee 50%, #d6453d 82%, transparent 100%);
  background-size: 200% 100%;
  box-shadow: 0 0 10px rgba(111, 195, 238, .55);
  animation: engc-lisere 9s linear infinite;
}
@keyframes engc-lisere { from { background-position: 0 0; } to { background-position: -200% 0; } }
.nav-logo img {
  width: 190px;
  height: auto;
  filter: drop-shadow(0 0 14px rgba(111, 195, 238, .18));
}
.topbar.engc-shrink .nav-logo img { width: 160px; height: auto; }
.nav-links a {
  color: #dbe6ef;
  position: relative;
  transition: color .2s;
}
.nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: #6fc3ee;
  box-shadow: 0 0 8px #6fc3ee;
  transform: scaleX(0);
  transition: transform .25s;
}
.nav-links a:not(.nav-cta):hover { color: #fff; }
.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }
.nav-links .nav-cta { box-shadow: 0 0 0 1px rgba(111, 195, 238, .45), 0 0 18px rgba(46, 134, 181, .55); }
.nav-burger span { background: #dbe6ef; }
@media (max-width: 820px) {
  .nav-logo img { width: 150px; }
  .topbar.engc-shrink .nav-logo img { width: 130px; }
  .nav-links {
    background: #0f2335;
    border-bottom: 0;
    box-shadow: 0 14px 30px rgba(5, 14, 24, .45);
  }
}
@media (prefers-reduced-motion: reduce) {
  .topbar::after { animation: none; }
}
@media (max-width: 1060px) and (min-width: 821px) {
  .nav-logo img { width: 150px; }
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 14px; letter-spacing: .5px; }
  .nav-links .nav-cta { padding: 8px 12px; }
}

/* =============================================================
   13) SURTITRE DU HERO — PASTILLE BLEU BLANC ROUGE (John 2026-10-06)
   Le rouge seul ne se lisait pas sur l'acier gris : pastille bleu
   foncé, contour et texte en dégradé bleu → blanc → rouge, halo qui
   « respire » lentement (pas de clignotement).
   ============================================================= */
.hero-eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 15px;
  text-shadow: none;
  padding: 7px 18px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(rgba(23, 62, 98, .88), rgba(23, 62, 98, .88)) padding-box,
    linear-gradient(90deg, #2e86b5, #ffffff 50%, #d6453d) border-box;
  box-shadow: -6px 0 12px rgba(46, 134, 181, .25), 6px 0 12px rgba(214, 69, 61, .25);
  animation: engc-eyebrow-glow 3.2s ease-in-out infinite;
}
@keyframes engc-eyebrow-glow {
  0%, 100% { box-shadow: -6px 0 12px rgba(46, 134, 181, .25), 6px 0 12px rgba(214, 69, 61, .25); }
  50%      { box-shadow: -8px 0 22px rgba(46, 134, 181, .6),  8px 0 22px rgba(214, 69, 61, .6); }
}
.hero-eyebrow .tricolore {
  background: linear-gradient(90deg, #8fd0f7 0%, #8fd0f7 22%, #ffffff 40%, #ffffff 60%, #ff5a4f 78%, #ff5a4f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 520px) {
  .hero-eyebrow { font-size: 11.5px; letter-spacing: 1px; padding: 6px 12px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow { animation: none; }
}