/* ===== Hero : texte libre (sans carte) + visuel NOVA à droite =====
   Chargé APRES site.css (voir default.php). Réutilise les variables de site.css. */
header.hero{padding-bottom:clamp(44px,6vw,80px)}
header.hero nav{margin-bottom:clamp(24px,4vw,52px)}

.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,5vw,40px);align-items:center}
.hero-grid>*{min-width:0}

/* --- Texte : aucun fond, aucune bordure, aucune ombre --- */
.hero-copy{display:block;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.hero-copy h1{
  font-size:clamp(1.85rem,6.4vw,2.35rem);line-height:1.12;letter-spacing:-.02em;
  margin:0 0 16px;max-width:15em}
.hero-copy .lead{
  max-width:34em;margin:0 0 24px;font-size:1rem;line-height:1.65}
.hero-copy .cta{gap:12px}
.hero-copy .btn{padding:13px 20px;font-size:.95rem}
.hero-copy .chips{margin:24px 0 0;gap:8px}
.hero-copy .chips li{padding:6px 13px;font-size:.84rem}

/* --- Visuel : aucune carte (pas de bordure, d'angles, d'ombre ni de fond).
   Les bords de l'image fondent dans le fond de la page ; ratio natif 3:2, rien n'est rogné. --- */
.hero-visual{
  position:relative;margin:0;width:100%;aspect-ratio:3/2;overflow:visible;
  background:none;border:0;border-radius:0;box-shadow:none}
.hero-visual img{
  position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-composite:intersect}

@media (min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,6fr) minmax(0,7fr)}
  .hero-copy h1{font-size:clamp(2.1rem,3.5vw,2.9rem);margin-bottom:18px}
  .hero-copy .lead{font-size:1.04rem}
}
@media (min-width:1200px){
  .hero-grid{gap:48px}
}
@media (max-width:640px){
  .hero-copy .cta .btn{flex:1 1 100%}
}