/* Animations BPP (validées par le patron le 19/10/2026) – CSS pur, aucun script.
   Tout est désactivé si le visiteur demande moins d'animations (réglage du téléphone ou de l'ordinateur).
   Les navigateurs qui ne connaissent pas une fonction affichent simplement le site comme aujourd'hui. */

/* ===== V2 (demande du patron) : styles fixes, visibles même sans animation ===== */

/* Les 4 métiers en grosses pastilles avec icône */
.hero .metiers { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0; margin: 0 0 1.4rem; }
.hero .metiers a {
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px 12px 13px; border-radius: 999px;
  font: 700 1.08rem/1 var(--titre); letter-spacing: .01em; color: var(--blanc); text-decoration: none;
  background: rgba(255, 255, 255, .08); border: 1.5px solid rgba(255, 255, 255, .28);
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.hero .metiers a::before {
  content: ""; width: 22px; height: 22px; flex: none; background: var(--orange);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; transition: background .25s;
}
.hero .metiers a[href*="construction"] { --ico: url("ico-construction.svg"); }
.hero .metiers a[href*="renovation"]   { --ico: url("ico-renovation.svg"); }
.hero .metiers a[href*="volet"]        { --ico: url("ico-volet.svg"); }
.hero .metiers a[href*="fuite"]        { --ico: url("ico-fuite.svg"); }
.hero .metiers a:hover, .hero .metiers a:focus-visible { background: var(--orange); border-color: var(--orange); color: var(--nuit); transform: translateY(-2px); }
.hero .metiers a:hover::before, .hero .metiers a:focus-visible::before { background: var(--nuit); }

/* Boutons « devis / visite / rappel » : flèche qui avance au survol */
a.btn[href$="#contact"], a.btn[href*="contact/"], form .btn-cta { gap: 10px; }
a.btn[href$="#contact"]::before, a.btn[href*="contact/"]::before, form .btn-cta::before {
  content: ""; order: 2; width: 20px; height: 20px; flex: none; background: currentColor;
  -webkit-mask: url("fleche.svg") center / contain no-repeat; mask: url("fleche.svg") center / contain no-repeat;
  transition: transform .25s;
}
a.btn[href$="#contact"]:hover::before, a.btn[href*="contact/"]:hover::before, form .btn-cta:hover::before { transform: translateX(5px); }
.hero a.btn-ghost[href$="#contact"] { background: var(--blanc); color: var(--nuit); }
.hero a.btn-ghost[href$="#contact"]:hover { background: var(--orange); border-color: var(--orange); }

/* Titres de section soulignés d'un trait orange */
.section-head h2::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 12px; border-radius: 2px; background: var(--orange); transform-origin: left; }

@media (prefers-reduced-motion: no-preference) {

  /* V2 – entrée du haut de page au chargement (le grand titre ne disparaît jamais : pas d'impact sur la vitesse mesurée) */
  .hero .eyebrow, .hero .lead, .hero .btns, .hero .baseline, .hero .badges { animation: bpp-entree .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hero .display { animation: bpp-glisse .8s cubic-bezier(.2, .7, .2, 1) both; }
  .hero .lead { animation-delay: .25s; } .hero .btns { animation-delay: .35s; } .hero .baseline { animation-delay: .45s; } .hero .badges { animation-delay: .55s; }
  .hero .metiers a { animation: bpp-pop .5s cubic-bezier(.3, 1.4, .5, 1) both; }
  .hero .metiers a:nth-of-type(1) { animation-delay: .15s; } .hero .metiers a:nth-of-type(2) { animation-delay: .25s; }
  .hero .metiers a:nth-of-type(3) { animation-delay: .35s; } .hero .metiers a:nth-of-type(4) { animation-delay: .45s; }
  @keyframes bpp-entree { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes bpp-glisse { from { transform: translateY(24px); } to { transform: none; } }
  @keyframes bpp-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

  /* V2 – boutons devis : halo qui pulse doucement pour attirer l'œil */
  a.btn[href$="#contact"], a.btn[href*="contact/"], form .btn-cta { animation: bpp-halo 2.8s ease-out 1.5s infinite; }
  @keyframes bpp-halo { 0% { box-shadow: 0 0 0 0 rgba(232, 126, 12, .6); } 70%, 100% { box-shadow: 0 0 0 14px rgba(232, 126, 12, 0); } }

  /* V2 – photos des cartes : léger zoom au survol */
  .card { overflow: hidden; }
  .card img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
  .card:hover img { transform: scale(1.05); }

  @supports (animation-timeline: view()) {
    /* V2 – le trait orange des titres se dessine en arrivant */
    .section-head h2::after { animation: bpp-trait linear both; animation-timeline: view(); animation-range: entry 20% entry 70%; }
    /* V2 – les pictos arrivent avec un petit rebond */
    .ico { animation: bpp-rebond linear both; animation-timeline: view(); animation-range: entry 10% entry 55%; }
  }
  @keyframes bpp-trait { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes bpp-rebond { from { transform: scale(.4) rotate(-15deg); opacity: 0; } 70% { transform: scale(1.12) rotate(4deg); opacity: 1; } to { transform: none; } }

  /* 6. Transition en fondu entre les pages (Chrome, Edge, Safari récents) */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

  /* 3. Photo d'accueil : zoom très lent, façon plan de cinéma */
  .hero-grid { overflow: hidden; }
  .hero .photo { animation: bpp-zoom 20s ease-in-out infinite alternate; transform-origin: 60% 55%; }
  @keyframes bpp-zoom { from { transform: scale(1); } to { transform: scale(1.05); } }

  /* 2. Vague d'eau qui ondule en bas du haut de page */
  .hero { position: relative; }
  .hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 34px; pointer-events: none;
    background: url("vague.svg") repeat-x 0 100% / 720px 34px;
    animation: bpp-vague 14s linear infinite;
  }
  @keyframes bpp-vague { to { background-position-x: -720px; } }

  /* 1. Apparition douce au défilement (cartes, photos, titres de section) */
  @supports (animation-timeline: view()) {
    .section-head, .card, .benefices li, .avis-carte, figure.illus, .galerie figure, .grid > article {
      animation: bpp-monte linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 40%;
    }
    /* 4. Les pastilles des étapes « s'allument » l'une après l'autre en descendant */
    .etape-num { animation: bpp-pastille linear both; animation-timeline: view(); animation-range: entry 20% cover 35%; }
  }
  @keyframes bpp-monte { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  @keyframes bpp-pastille {
    from { transform: scale(.4); box-shadow: 0 0 0 0 rgba(232, 126, 12, .55); }
    70%  { transform: scale(1.12); box-shadow: 0 0 0 10px rgba(232, 126, 12, 0); }
    to   { transform: scale(1); box-shadow: 0 0 0 0 rgba(232, 126, 12, 0); }
  }

  /* 5. Réactions au survol et reflet sur le bouton devis */
  .card { transition: transform .25s ease, box-shadow .25s ease; }
  .card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(10, 28, 58, .12); }
  .card:hover .ico { animation: bpp-flotte 1.2s ease-in-out; }
  @keyframes bpp-flotte { 50% { transform: translateY(-4px) rotate(-4deg); } }
  .btn-cta { position: relative; overflow: hidden; }
  .btn-cta::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: bpp-reflet 7s ease-in-out 2s infinite;
  }
  @keyframes bpp-reflet { 0%, 82% { left: -60%; } 100% { left: 130%; } }
}