/* ArtiWeb — couche d'amélioration partagée (injectée par generate.py sur TOUS les sites).
   Inspirée du code des sites design étudiés (Yantra, Daniel Aristizabal, Ivy Chen, Robin…).
   Effets : reveal clip-path "déroulé", hover N&B→couleur, lightbox, transitions de page. */

/* ===== 5. Transitions de page douces (View Transitions API, cross-document) ===== */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: awvt-out .35s cubic-bezier(.87,0,.13,1) both; }
  ::view-transition-new(root) { animation: awvt-in  .45s cubic-bezier(.22,1,.36,1) both; }
  @keyframes awvt-out { to   { opacity: 0; transform: translateY(-8px); } }
  @keyframes awvt-in  { from { opacity: 0; transform: translateY(10px); } }
}

/* ===== 2 & 3. Galerie : hover N&B→couleur + léger lift, tuiles nettes, curseur loupe ===== */
.aw-js .gallery img {
  filter: grayscale(.5) brightness(.97);
  transition: filter .55s ease, transform .55s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
  cursor: zoom-in;
}
.aw-js .gallery img:hover {
  filter: grayscale(0) brightness(1);
  transform: translateY(-4px);
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.45);
}

/* ===== 1. Reveal clip-path "déroulé bas→haut" des photos, en cascade =====
   IMPORTANT : l'état caché utilise opacity (et NON un clip-path à aire nulle),
   car un clip-path qui masque l'élément met son aire d'intersection à 0 →
   l'IntersectionObserver ne se déclencherait jamais. Le "déroulé" est joué
   par une @keyframes au moment du reveal. */
.aw-js .gallery img.ga-hide { opacity: 0; }
.aw-js .gallery img.ga-in {
  animation: ga-reveal .9s cubic-bezier(.87,0,.13,1) calc(var(--gi,0) * .09s) both;
}
@keyframes ga-reveal {
  0%   { opacity: 0; clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
  100% { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

/* ===== 4. Lightbox (clic sur une photo de galerie → plein écran, fond dépoli) ===== */
.awlb {
  position: fixed; inset: 0; z-index: 9999; display: none;
  align-items: center; justify-content: center;
  background: rgba(15,15,18,.6);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.awlb.on { display: flex; animation: awlb-fade .3s ease; }
@keyframes awlb-fade { from { opacity: 0; } to { opacity: 1; } }
.awlb-img {
  max-width: 88vw; max-height: 86vh; object-fit: contain;
  border-radius: 8px; box-shadow: 0 30px 90px -20px rgba(0,0,0,.7);
  animation: awlb-zoom .35s cubic-bezier(.22,1,.36,1);
}
@keyframes awlb-zoom { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.awlb button {
  position: absolute; border: 0; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.13); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; transition: background .25s, transform .25s;
}
.awlb button:hover { background: rgba(255,255,255,.28); }
.awlb-close { top: 18px; right: 22px; width: 46px; height: 46px; font-size: 1.7rem; }
.awlb-close:hover { transform: rotate(90deg); }
.awlb-nav { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 2rem; }
.awlb-prev { left: 18px; } .awlb-next { right: 18px; }
.awlb-count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.85); font: 500 .85rem/1 system-ui, sans-serif; letter-spacing: .05em; }
@media (max-width: 640px) {
  .awlb-nav { width: 44px; height: 44px; font-size: 1.6rem; }
  .awlb-prev { left: 8px; } .awlb-next { right: 8px; }
}

/* ===== Carrousel galerie de qualité (auto + flèches, scrollbar masquée) ===== */
.awcar { position: relative; }
.aw-js .gallery.gallery-carrousel { scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.aw-js .gallery.gallery-carrousel::-webkit-scrollbar { display: none; }
.awcar-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 48px; height: 48px;
  border: 0; border-radius: 50%; background: rgba(20,20,24,.55); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .25s, transform .25s; box-shadow: 0 6px 20px -8px rgba(0,0,0,.55); }
.awcar-btn:hover { background: rgba(20,20,24,.88); transform: translateY(-50%) scale(1.08); }
.awcar-prev { left: 10px; } .awcar-next { right: 10px; }
@media (max-width: 640px) { .awcar-btn { width: 40px; height: 40px; font-size: 1.4rem; } }

/* ===== Burger mobile universel (injecté si le template n'en a pas) ===== */
.aw-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; z-index: 60; }
.aw-burger span { width: 26px; height: 2px; background: var(--aw-navfg, currentColor); display: block; border-radius: 2px; transition: transform .3s, opacity .3s; }
.aw-menu-open .aw-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.aw-menu-open .aw-burger span:nth-child(2) { opacity: 0; }
.aw-menu-open .aw-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 760px) {
  .aw-js .aw-burger { display: flex; }
  .aw-js header.aw-menu-open .aw-mob-links {
    display: flex !important; flex-direction: column; align-items: center; gap: 20px;
    position: absolute; top: 100%; left: 0; right: 0; background: var(--aw-navbg, #111);
    padding: 26px var(--pad, 20px); border-top: 1px solid rgba(128,128,128,.25); box-shadow: 0 24px 40px -22px rgba(0,0,0,.5);
  }
  .aw-js header.aw-menu-open .aw-mob-links a { color: var(--aw-navfg, #fff) !important; opacity: 1 !important; }
}

/* ===== Centrage uniforme (préférence Brian « tout centré ») =====
   Titres de section + contenu héro centrés sur TOUS les templates. */
.aw-js .sec-head, .aw-js .head, .aw-js .page-head, .aw-js .mag-head {
  text-align: center; margin-left: auto; margin-right: auto;
}
.aw-js .hero-content, .aw-js .hero-text, .aw-js .hero-copy, .aw-js .hero-in,
.aw-js .hero-left, .aw-js .cn-hero-in, .aw-js .pr-hero-in, .aw-js .pro-hero-in, .aw-js .bd-hero-text,
.aw-js .ch-hero-text, .aw-js .mag-hero, .aw-js .cn-intro, .aw-js .pr-intro {
  text-align: center;
}
/* titres « nus » (dynamique/split/classique : h2 + kicker directement dans la section) */
.aw-js section > h2, .aw-js .section > h2, .aw-js .band > h2,
.aw-js section > .lbl, .aw-js .section > .lbl, .aw-js .band > .lbl,
.aw-js section > .kicker, .aw-js .section > .kicker {
  text-align: center; margin-left: auto; margin-right: auto;
}
.aw-js .hero-content h1, .aw-js .hero-text h1, .aw-js .hero-copy h1,
.aw-js .hero h1, .aw-js .hero-sub, .aw-js .hero-content p { margin-left: auto; margin-right: auto; }
.aw-js .hero-actions, .aw-js .hero-trust, .aw-js .hero-stats, .aw-js .hero-points,
.aw-js .hero-meta, .aw-js .ch-strip, .aw-js .bd-track { justify-content: center; }
.aw-js .zones { justify-content: center; }
/* blocs étroits (max-width) JAMAIS collés à gauche : on les centre toujours */
.aw-js .faq, .aw-js .pr-signature, .aw-js .legal, .aw-js .contact-inner,
.aw-js .pintro, .aw-js .pr-wide, .aw-js .hcard-body, .aw-js .section-sub,
.aw-js .contact-lead, .aw-js .sign-line { margin-left: auto; margin-right: auto; }

/* ===== Accessibilité : respecte prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
  .aw-js .gallery img.ga-hide { opacity: 1 !important; }
  .aw-js .gallery img.ga-in { animation: none !important; }
  .awlb.on, .awlb-img { animation: none !important; }
}

/* ===== Avant / Après (Prestige) — comparateur glissant ===== */
.ba-section .sec-head{text-align:center}
.ba-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:26px;max-width:1100px;margin:0 auto}
.ba-slider{position:relative;margin:0;border-radius:8px;overflow:hidden;aspect-ratio:4/3;user-select:none;touch-action:none;box-shadow:0 30px 70px -42px rgba(0,0,0,.55)}
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ba-after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-tag{position:absolute;top:14px;z-index:3;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:5px 12px;border-radius:50px;background:rgba(20,18,16,.62);color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none}
.ba-tag-av{left:14px}
.ba-tag-ap{right:14px}
.ba-divider{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;transform:translateX(-1px);z-index:3;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.ba-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.32)}
.ba-grip::before,.ba-grip::after{content:"";position:absolute;top:50%;width:10px;height:10px;border-top:2px solid #555;border-right:2px solid #555}
.ba-grip::before{left:9px;transform:translateY(-50%) rotate(-135deg)}
.ba-grip::after{right:9px;transform:translateY(-50%) rotate(45deg)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4}
.ba-slider figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:18px 16px 14px;font-size:.84rem;color:#fff;background:linear-gradient(transparent,rgba(10,8,6,.72));pointer-events:none}

/* Avant/Après — habillage de section autonome (marche sur tous les templates Prestige) */
.ba-section { padding: clamp(58px, 8vw, 98px) var(--pad, 24px); }
.ba-head { text-align: center; max-width: 1100px; margin: 0 auto clamp(26px, 4vw, 44px); }
.ba-kicker { text-transform: uppercase; letter-spacing: .18em; font-size: .74rem; font-weight: 700; color: var(--accent, #c8a45d); margin: 0 0 10px; }
.ba-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 600; margin: 0; line-height: 1.12; }
.ba-title em { font-style: italic; color: var(--accent, #c8a45d); }


/* Mot de l'artisan (signature) — style partagé, hérite de la couleur du template */
.aw-signature{text-align:center;max-width:760px;margin-left:auto;margin-right:auto;padding-top:8px}
.aw-signature .aw-sign-line{font-size:clamp(1.3rem,2.5vw,1.95rem);line-height:1.45;margin:12px 0 14px;font-style:italic}
.aw-signature .aw-sign-line em{font-style:italic}
.aw-signature .aw-sign-name{text-transform:uppercase;letter-spacing:.18em;font-size:.8rem;opacity:.6;font-style:normal}

.aw-signature{padding-block:clamp(48px,8vw,86px)}
.aw-signature .aw-sign-kicker{text-transform:uppercase;letter-spacing:.22em;font-size:.74rem;font-weight:700;opacity:.7;margin:0 0 6px}

/* Hero vidéo / carrousel pour la famille Pro (pro/confiance/chantier/edito/argile/nordique…) */
.pro-hero video.pro-hero-bg{width:100%;height:100%;object-fit:cover}
.pro-hero .phero-carousel{position:absolute;inset:0}
.pro-hero .phero-carousel .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.4s ease}
.pro-hero .phero-carousel .slide.on{opacity:1}