/* ============================================================
   am-hero2.css — HERO V2 (pilote /depannage/ + /accueil)
   Recette LOCKÉE : halftone pré-tramé (image en CSS/PHP), scrim
   dégradé gauche + bas + vignette, Ken Burns 26s, Variante A.
   Le TEXTE vit dans les modules Divi (4 Textes + 2 Boutons) — éditable.
   PORTÉE STRICTE : .et-l--post (corps de page) > 1re section Divi.
   -> N'impacte JAMAIS le header (.et-l--header) ni le footer (.et-l--footer).
   Couleurs site : anthracite #1a1a1a / blanc.
   ============================================================ */

/* alias de portée = la SEULE section hero (1re section du corps de page) */
/* HERO = body.am-hero2-pg #page-container .et-l--post .et_builder_inner_content > .et_pb_section:first-of-type */

/* ---- la section Hero ---- */
body.am-hero2-pg #page-container .et-l--post .et_builder_inner_content > .et_pb_section:first-of-type{
  position:relative!important;overflow:hidden!important;isolation:isolate;
  background:#0a0a0a!important;padding:0!important;margin:0!important}

/* === FIX « bande noire » sous le menu (desktop ET mobile) ===================
   CAUSE EXACTE : Divi applique un cadre inline `body{padding:40px 20px}` (option
   « custom-background » / boxed) sur les pages INTÉRIEURES. La page d'ACCUEIL, elle,
   l'annule (règles body.home) -> c'est pour ça que l'accueil n'avait PAS de bande.
   Sur les autres pages hero, ce padding poussait tout le contenu (dont le hero) 40px
   plus bas que le header FIXE (qui, lui, ignore le cadre) -> 40px de fond de page
   visibles = la bande noire ; + un léger retrait 20px G/D du hero.
   FIX unifié : on retire le cadre body UNIQUEMENT sur les pages hero -> elles se
   comportent EXACTEMENT comme l'accueil (halftone plein cadre, remonté sous le menu,
   zéro bande). Le décalage du CONTENU sous le menu reste assuré par l'offset
   #page-container{padding-top} (méga-nav) + la respiration interne (70/54/46px). */
body.am-hero2-pg{padding:0!important}
/* filet de sécurité : aucun espacement résiduel au-dessus de la 1re section */
body.am-hero2-pg #page-container .et-l--post,
body.am-hero2-pg #page-container .et-l--post .et_builder_inner_content{padding-top:0!important;margin-top:0!important}

/* couche image halftone pré-tramée + Ken Burns lent */
body.am-hero2-pg #page-container .et-l--post .et_builder_inner_content > .et_pb_section:first-of-type::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  transform-origin:62% 48%;will-change:transform;
  animation:amh2kb 26s ease-in-out infinite alternate}
@keyframes amh2kb{0%{transform:scale(1) translate3d(0,0,0)}
  100%{transform:scale(1.065) translate3d(-1.4%,-.8%,0)}}

/* scrim gauche + bas + vignette */
body.am-hero2-pg #page-container .et-l--post .et_builder_inner_content > .et_pb_section:first-of-type::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.78) 28%,rgba(10,10,10,.40) 50%,rgba(10,10,10,.08) 74%,rgba(10,10,10,0) 92%),
    linear-gradient(0deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,0) 38%);
  box-shadow:inset 0 0 220px 40px rgba(0,0,0,.55)}

/* contenu au-dessus du fond */
body.am-hero2-pg #page-container .et-l--post .et_builder_inner_content > .et_pb_section:first-of-type > .et_pb_row{
  position:relative;z-index:2;width:90%;max-width:1180px;margin:0 auto;
  /* respiration verticale ÉQUILIBRÉE (rythme calé sur le hero d'accueil du SHOP, validé par Umberto :
     bloc texte centré, air comparable en haut ET en bas ~70px). Le menu fixe est déjà compensé par
     l'offset #page-container ; ici padding symétrique + centrage vertical du bloc. */
  padding:70px 0!important;min-height:600px;box-sizing:border-box;display:flex;align-items:center}
body.am-hero2-pg #page-container .et-l--post .et_builder_inner_content > .et_pb_section:first-of-type .et_pb_column{padding:0!important}
body.am-hero2-pg #page-container .et-l--post .et_builder_inner_content > .et_pb_section:first-of-type .et_pb_column:first-child{
  padding:0!important;max-width:600px}
body.am-hero2-pg #page-container .et-l--post .et_builder_inner_content > .et_pb_section:first-of-type .et_pb_column_empty{display:none!important}
body.am-hero2-pg #page-container .et-l--post .et_builder_inner_content > .et_pb_section:first-of-type .et_pb_text_inner{color:#fff}

/* Variante A — typographie (classes uniques portées par le HTML éditable, scopées au hero).
   POLICE = Inter (identique au SHOP, chargée via Google Fonts dans am-hero2.php) pour cohérence
   typographique entre les deux sites. Graisses : titre 800 / fin 300 / eyebrow+desc 600 / sous-titre 400. */
body.am-hero2-pg #page-container .et-l--post .am-h2-eyebrow,
body.am-hero2-pg #page-container .et-l--post .am-h2-title,
body.am-hero2-pg #page-container .et-l--post .am-h2-desc,
body.am-hero2-pg #page-container .et-l--post .am-h2-sub{
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important}
body.am-hero2-pg #page-container .et-l--post .am-h2-eyebrow{color:#d8d8dc!important;font-size:12.5px!important;font-weight:600!important;
  letter-spacing:2.6px!important;text-transform:uppercase!important;margin:0 0 18px!important;
  display:flex;align-items:center;gap:12px;line-height:1.2!important}
body.am-hero2-pg #page-container .et-l--post .am-h2-eyebrow::before{content:"";width:34px;height:1px;background:#8a8a90;display:inline-block;flex:0 0 34px}
body.am-hero2-pg #page-container .et-l--post .am-h2-title{display:block!important;color:#fff!important;font-weight:800!important;font-size:54px!important;
  line-height:1.04!important;letter-spacing:-1.1px!important;margin:0!important}
/* /catalogues/ : le plugin am-catalogues masque les H1 hors .amc-header (.et_pb_text h1:not(.amc-header h1){display:none!important}).
   Notre H1 hero doit rester visible -> on le ré-affiche (spécificité (1,3,1) > (0,2,2) du plugin). */
body.am-hero2-pg #page-container .et-l--post .am-h2-title .thin{font-weight:300!important;color:#eaeaec!important}
body.am-hero2-pg #page-container .et-l--post .am-h2-desc{color:#c4c4cb!important;font-size:14px!important;font-weight:600!important;
  letter-spacing:2px!important;text-transform:uppercase!important;margin:18px 0 0!important;line-height:1.5!important}
body.am-hero2-pg #page-container .et-l--post .am-h2-sub{color:#b6b6bd!important;font-size:17px!important;line-height:1.55!important;
  margin:18px 0 0!important;max-width:500px;font-weight:400!important}

/* Boutons : wrappers serrés + solid (plein) / ghost (contour) — ZÉRO reflow au hover */
body.am-hero2-pg #page-container .et-l--post .et_pb_section:first-of-type .et_pb_button_module_wrapper{
  display:inline-block!important;vertical-align:top;
  width:calc(50% - 8px)!important;max-width:calc(50% - 8px)!important;/* desktop : chaque bouton = moitie de la colonne -> 2 cote a cote, largeur EGALE, RELATIVE (s'adapte si la colonne est elargie, pas de px fixe). Libelles courts (Lot 1 + Lot 2 : « Voir les appareils » / « Demander un depannage ») -> tiennent sans troncature. */
  margin:30px 4px 0 0!important}
/* géométrie figée : padding + bordure 1.5px IDENTIQUES repos ET hover (pas de grossissement) */
body.am-hero2-pg #page-container .et-l--post .et_pb_section:first-of-type a.et_pb_button,
body.am-hero2-pg #page-container .et-l--post .et_pb_section:first-of-type a.et_pb_button:hover{
  border-radius:10px!important;padding:14px 26px!important;border-width:1.5px!important;border-style:solid!important;
  box-sizing:border-box!important;width:100%!important;max-width:100%!important;/* le bouton REMPLIT son wrapper (max-width:100% annule le max-content que Divi force sur .et_pb_button) ; la largeur relative est portee par le wrapper */
  font-size:14.5px!important;font-weight:700!important;line-height:1.1!important;
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;letter-spacing:0!important;
  display:inline-flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
  align-items:center;justify-content:center;text-transform:none!important;white-space:nowrap!important;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease!important}
/* 1er bouton = plein */
body.am-hero2-pg #page-container .et-l--post .et_pb_section:first-of-type .et_pb_button_0,
body.am-hero2-pg #page-container .et-l--post .et_pb_section:first-of-type .et_pb_button_0:hover{
  background:#fff!important;color:#1a1a1a!important;border-color:#fff!important}
body.am-hero2-pg #page-container .et-l--post .et_pb_section:first-of-type .et_pb_button_0:hover{
  box-shadow:0 6px 18px rgba(0,0,0,.28)!important}
/* flèche figée : même géométrie repos ET hover (annule le slide Divi) */
body.am-hero2-pg #page-container .et-l--post .et_pb_section:first-of-type .et_pb_button_0:after,
body.am-hero2-pg #page-container .et-l--post .et_pb_section:first-of-type .et_pb_button_0:hover:after{
  content:"\2192"!important;font-family:inherit!important;opacity:1!important;display:inline!important;
  position:static!important;margin:0 0 0 9px!important;padding:0!important;line-height:1!important;font-size:15px!important;
  width:auto!important;height:auto!important;transform:none!important}
/* 2e bouton = contour */
body.am-hero2-pg #page-container .et-l--post .et_pb_section:first-of-type .et_pb_button_1,
body.am-hero2-pg #page-container .et-l--post .et_pb_section:first-of-type .et_pb_button_1:hover{
  background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.85)!important}
body.am-hero2-pg #page-container .et-l--post .et_pb_section:first-of-type .et_pb_button_1:hover{
  background:rgba(255,255,255,.12)!important;border-color:#fff!important}
body.am-hero2-pg #page-container .et-l--post .et_pb_section:first-of-type .et_pb_button_1:after,
body.am-hero2-pg #page-container .et-l--post .et_pb_section:first-of-type .et_pb_button_1:hover:after{
  display:none!important;content:""!important;width:0!important;margin:0!important;padding:0!important}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  body.am-hero2-pg #page-container .et-l--post .et_builder_inner_content > .et_pb_section:first-of-type::before{animation:none!important;transform:none!important}}

/* Responsive */
@media (max-width:980px){
  /* === FIX « bande noire » MOBILE/TABLETTE (≤980px) ==========================
     CAUSE EXACTE : le mu-plugin am-sticky-header.php pose, en ≤980px,
     `#et-main-area{padding-top:var(--am-hh,78px)!important}` pour décaler le
     contenu sous l'EN-TÊTE DIVI NATIF `#main-header` rendu fixe. Or am-mega-nav
     MASQUE `#main-header` (display:none) et gère déjà l'offset via
     `#page-container{padding-top}` (= hauteur réelle de la barre .amn). Le JS de
     sticky-header lit alors `#main-header.offsetHeight = 0` -> retombe sur le
     fallback 78px -> DOUBLE offset = 78px de fond (body #050505) entre le menu et
     le hero = la bande noire (absente en desktop car la règle est ≤980px only).
     FIX : sur les pages hero, on annule ce padding fantôme (spécificité
     html+body.am-hero2-pg+#id > #et-main-area, +!important). Le décalage sous la
     barre reste assuré par #page-container -> le halftone remonte sous le menu. */
  html body.am-hero2-pg #et-main-area{padding-top:0!important}
  body.am-hero2-pg #page-container .et-l--post .et_pb_section:first-of-type > .et_pb_row{min-height:480px;padding:54px 0!important}
  body.am-hero2-pg #page-container .et-l--post .am-h2-title{font-size:38px!important;letter-spacing:-.6px!important}
  body.am-hero2-pg #page-container .et-l--post .am-h2-sub{font-size:16px!important}
  /* mobile : scrim allégé + on RETIRE l'ombre inset (elle assombrissait le HAUT de l'image
     sur viewport étroit -> effet « bande noire » sous le menu). L'image/halftone remonte
     ainsi visiblement jusque sous le menu, comme sur desktop. Le dégradé gauche (.9) garde
     la lisibilité du texte. (desktop = scrim d'origine, inchangé) */
  body.am-hero2-pg #page-container .et-l--post .et_builder_inner_content > .et_pb_section:first-of-type::after{background:
    linear-gradient(90deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.62) 48%,rgba(10,10,10,.3) 100%),
    linear-gradient(0deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,0) 42%);
    box-shadow:none}
  /* mobile + tablette : boutons EMPILES, MEME largeur = 100% du groupe, alignes l'un sous l'autre */
  body.am-hero2-pg #page-container .et-l--post .et_pb_section:first-of-type .et_pb_button_module_wrapper{
    display:block!important;width:100%!important;max-width:100%!important;margin:14px 0 0 0!important}
  body.am-hero2-pg #page-container .et-l--post .et_pb_section:first-of-type .et_pb_button_0_wrapper{margin-top:24px!important}
  body.am-hero2-pg #page-container .et-l--post .et_pb_section:first-of-type a.et_pb_button{
    width:100%!important;max-width:100%!important;justify-content:center!important}}
@media (max-width:600px){
  body.am-hero2-pg #page-container .et-l--post .et_pb_section:first-of-type > .et_pb_row{min-height:440px;padding:46px 0!important}
  body.am-hero2-pg #page-container .et-l--post .am-h2-title{font-size:30px!important}
  body.am-hero2-pg #page-container .et-l--post .am-h2-eyebrow{font-size:11px!important;letter-spacing:2px!important}
  body.am-hero2-pg #page-container .et-l--post .am-h2-desc{font-size:12px!important;letter-spacing:1.4px!important}}