/* ===================================================================
   header-anim.css — Header animé Retrofutur Lab
   Adapté de la maquette retrofutur-lab-demo-v3b.
   Chargé APRÈS style_menu.css et template.css : les règles de menu
   ci-dessous neutralisent volontairement celles de style_menu.css.
   Les url() sont relatives à CE fichier → rf-lab/images/...
   =================================================================== */

:root{
  --rf-paper:#e7decf;
  --rf-rust:#963725;
  --rf-gold:#b98543;
  --rf-dark:#15120f;
  --rf-nav-h:92px;
}

/* ---------- Scène ----------
   header-bg2.jpg fait 1672x754 (ratio 2.22, nettement panoramique).
   aspect-ratio donne au header la hauteur naturelle de l'image, donc un
   cadrage sans rognage sur les écrans larges ; min-height prend le relais
   sur les écrans étroits, où il faut de la place pour le menu et la plaque.
   La plus grande des deux valeurs l'emporte. ---------- */
.hero{
  position:relative;
  aspect-ratio:1672/754;
  min-height:clamp(520px,62vh,780px);
  overflow:hidden;
  isolation:isolate;
  background:#cfc3b1;
}
.hero__image{
  position:absolute; inset:0; z-index:-5;
  background:url('images/header-bg2.jpg') center center/cover no-repeat;
  transform:scale(1.018) translate3d(var(--bgx,0),var(--bgy,0),0);
  transition:transform .25s ease-out;
}
.hero__shade{
  position:absolute; inset:0; z-index:-4; pointer-events:none;
  background:
    radial-gradient(circle at 50% 46%,rgba(255,234,199,.04),transparent 42%),
    linear-gradient(180deg,rgba(19,15,12,.13),rgba(19,15,12,.015) 42%,rgba(19,15,12,.20));
}
.hero__grain{
  position:absolute; inset:0; z-index:8; pointer-events:none;
  opacity:.11; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

/* ---------- Barre de navigation ----------
   Le HTML du menu reste celui du CMS (#header > ul#menu > li > a,
   sous-menus ul.hidden) : les liens viennent de la base. Seule
   l'apparence est reprise de la maquette. ---------- */
/* Menu fixe, présent sur toutes les pages. Sur l'accueil il se superpose au
   header animé (fond translucide) ; ailleurs, .rf-inner décale le contenu. */
#enveloppe_menu{
  position:fixed; top:0; left:0; right:0;
  z-index:100; width:100%; height:auto;
}
.rf-inner .page{ padding-top:var(--rf-nav-h) }

#header.mainmenu{
  position:relative;          /* annule le position:fixed de style_menu.css */
  top:auto;
  height:var(--rf-nav-h);
  background:rgba(238,230,218,.78);
  border-bottom:1px solid rgba(50,40,31,.2);
  backdrop-filter:blur(9px) saturate(.9);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:0 clamp(24px,4vw,72px);
  color:#181512;
}

/* Marque — image détourée (hexagone + texte), fond transparent */
.rf-brand{ display:flex; align-items:center; text-decoration:none; flex:0 0 auto }
.rf-brand img{
  display:block; height:clamp(38px,3.4vw,54px); width:auto;
  max-width:100%;
}

/* Séparateurs verticaux */
.rf-sep{
  flex:0 0 auto; width:1px; align-self:stretch;
  margin:22px 0; background:rgba(40,30,22,.28);
}
.rf-sep-mini{
  display:inline-block; width:1px; height:18px;
  background:rgba(40,30,22,.3); margin:0 10px; vertical-align:middle;
}

/* Réseaux */
.rf-social{ display:flex; align-items:center; flex:0 0 auto }
.rf-social a{ display:flex; align-items:center; line-height:0; opacity:.85; transition:opacity .2s ease, transform .2s ease }
.rf-social a:hover{ opacity:1; transform:translateY(-1px) }
.rf-social img{ display:block; height:22px; width:auto }

/* Menu principal — structure CMS, centré entre la marque et les réseaux */
#header ul#menu{
  display:flex; align-items:center; justify-content:center;
  flex:1 1 auto;
  gap:clamp(16px,2.6vw,42px);
  margin:0; padding:0; list-style:none;
  position:static;
}
#header ul#menu > li{
  float:none; display:block; width:auto; margin:0; position:relative;
}
#header ul#menu > li > a{
  /* SolanoGothicMVBStd-Bd est déclarée en tête de style_menu.css */
  font-family:'SolanoGothicMVBStd-Bd','Arial Narrow',Arial,sans-serif;
  color:#181512;
  background:none;            /* annule le background:#000 de style_menu.css */
  text-decoration:none; text-transform:uppercase;
  font-size:clamp(15px,1.35vw,19px); letter-spacing:.11em; white-space:nowrap;
  display:block; width:auto; height:auto; line-height:1.4; min-width:0;
  text-align:left; position:relative; padding:0;
  transition:color .2s ease;
}
#header ul#menu > li > a::after{
  content:""; position:absolute; left:50%; right:50%; bottom:-9px;
  height:2px; background:var(--rf-rust);
  transition:left .25s ease, right .25s ease;
}
#header ul#menu > li > a:hover::after{ left:0; right:0 }
#header ul#menu > li:hover > a{ color:var(--rf-rust) }

/* Page courante — classe posée par template.js (le menu du CMS ne la fournit pas) */
#header ul#menu > li > a.rf-active{ color:var(--rf-rust) }
#header ul#menu > li > a.rf-active::after{ left:25%; right:25% }

/* Sous-menus (ul.hidden du CMS) */
#header ul#menu li ul{
  display:none; position:absolute; top:100%; left:0;
  min-width:240px; padding:10px 0; margin:0;
  background:rgba(238,230,218,.97);
  box-shadow:0 18px 28px rgba(40,28,18,.14);
  z-index:30;
}
#header ul#menu li:hover ul{ display:block }
#header ul#menu li ul li{ float:none; display:block; width:100%; margin:0 }
#header ul#menu li ul li a{
  display:block; width:100%; padding:7px 22px;
  color:#181512 !important; background:none !important;
  font-size:12px !important; line-height:1.5; height:auto;
  text-align:left; letter-spacing:.08em; text-transform:none;
}
#header ul#menu li ul li a:hover{ color:var(--rf-rust) !important; background:rgba(150,55,37,.07) !important }

/* Bouton menu mobile — mécanisme natif du CMS (label + checkbox) */
#header .show-menu{
  display:none; color:#181512; font-size:24px; cursor:pointer;
  height:auto; padding:0; text-align:right; text-decoration:none;
}
#header input[type=checkbox]{ display:none }

/* ---------- Couche SVG animée ---------- */
.hero__svg{
  position:absolute; inset:var(--rf-nav-h) 0 0;
  width:100%; height:calc(100% - var(--rf-nav-h));
  z-index:2; pointer-events:none;
}
.blueprint-lines{fill:none;stroke:rgba(99,77,54,.26);stroke-width:2;stroke-dasharray:1050;stroke-dashoffset:1050;animation:rf-draw 10s ease-in-out .8s infinite alternate}
.scan-mark{stroke:rgba(160,52,36,.42);stroke-width:2;opacity:.45;animation:rf-scan 10s ease-in-out infinite}
.signal-trace{fill:none;stroke:rgba(151,49,34,.42);stroke-width:2;stroke-dasharray:290;stroke-dashoffset:290;animation:rf-trace 5.5s ease-in-out 1.2s infinite}

/* ---------- Plaque ---------- */
.hero__stage{
  position:absolute; z-index:10;
  left:0; right:0; top:var(--rf-nav-h); bottom:0;
  display:grid; place-items:center;
  padding:clamp(34px,5vh,74px) clamp(20px,4vw,70px) clamp(58px,8vh,95px);
  pointer-events:none;
}
.plaque-shell{
  position:relative;
  width:min(58vw,956px);
  max-width:calc(100vw - 72px);
  transform:translate3d(var(--px,0),var(--py,0),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
  filter:drop-shadow(0 22px 28px rgba(25,17,10,.24));
  animation:rf-plaqueFloat 7s ease-in-out infinite;
  transition:transform .22s ease-out,filter .22s ease-out;
  will-change:transform;
}
.hero__plaque{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.plaque-glint{
  position:absolute; inset:7% 5%; overflow:hidden; border-radius:18px;
  pointer-events:none; mix-blend-mode:screen; opacity:.25;
}
.plaque-glint::before{
  content:""; position:absolute; top:-30%; bottom:-30%;
  width:18%; left:-35%; transform:skewX(-16deg);
  background:linear-gradient(90deg,transparent,rgba(255,244,218,.48),transparent);
  animation:rf-glint 9s ease-in-out 2.4s infinite;
}

/* ---------- Mentions techniques ---------- */
.rf-status,.rf-coord{
  position:absolute; z-index:12; bottom:26px;
  color:#5a4a3c; font:11px monospace; letter-spacing:.18em;
  text-shadow:0 1px rgba(255,255,255,.35);
}
.rf-status{ left:clamp(20px,4vw,66px) }
.rf-coord{ right:clamp(20px,4vw,66px); opacity:.72 }
.rf-led{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#a23b27; margin-right:8px;
  box-shadow:0 0 10px rgba(162,59,39,.2);
  animation:rf-pulse 2.2s infinite;
}

/* ---------- Animations ---------- */
@keyframes rf-draw{to{stroke-dashoffset:0}}
@keyframes rf-trace{0%,20%{stroke-dashoffset:290;opacity:.05}55%,78%{stroke-dashoffset:0;opacity:.68}100%{stroke-dashoffset:-290;opacity:.08}}
@keyframes rf-scan{0%,100%{transform:translateX(-160px);opacity:.08}50%{transform:translateX(1220px);opacity:.5}}
@keyframes rf-pulse{50%{box-shadow:0 0 0 8px rgba(162,59,39,0),0 0 13px rgba(162,59,39,.55)}}
@keyframes rf-plaqueFloat{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes rf-glint{0%,62%{left:-35%;opacity:0}70%{opacity:.72}82%{left:125%;opacity:.16}100%{left:125%;opacity:0}}

@media (prefers-reduced-motion:reduce){
  .hero *,.hero *::before,.hero *::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* ---------- Adaptatif ----------
   Avec un fond au ratio 2.22, plus l'écran est étroit, plus « cover » doit
   zoomer et rogner les côtés. On réduit donc la hauteur imposée au fur et à
   mesure : le cadrage reste lisible et la plaque garde la place qu'il lui faut.
   ---------- */

@media(max-width:1280px){
  /* style_menu.css bascule en mode mobile à 1280px : on suit le même seuil
     pour que le menu déroulant du CMS reste cohérent. */
  :root{--rf-nav-h:82px}
  #header .show-menu{ display:block }
  #header ul#menu{
    display:none; position:absolute; top:var(--rf-nav-h); left:0; right:0;
    flex-direction:column; align-items:flex-start;
    padding:24px 32px; gap:16px;
    background:rgba(238,230,218,.97);
    box-shadow:0 18px 28px rgba(40,28,18,.12);
    max-height:calc(100vh - var(--rf-nav-h));
    overflow-y:auto;   /* menu fixe : un menu long doit rester atteignable */
  }
  #header ul#menu > li{ width:100% }
  #header ul#menu > li > a{ font-size:17px }
  #header ul#menu > li > a::after{ display:none }   /* soulignement inutile en liste */
  #header ul#menu li ul{ position:static; display:block; box-shadow:none; background:none; padding:6px 0 0 14px }
  /* La barre garde ses trois zones : marque | burger | réseaux */
  #header.mainmenu{ justify-content:space-between; gap:14px }
  .rf-sep{ display:none }
  .rf-social{ order:3 }
  #header .show-menu{ order:4; margin-left:6px }
  .hero{ min-height:clamp(460px,58vh,640px) }
  .hero__stage{ padding:34px clamp(16px,4vw,50px) 70px }
  .plaque-shell{ width:min(78vw,820px); max-width:calc(100vw - 28px) }
}

@media(max-width:900px){
  :root{--rf-nav-h:78px}
  #header.mainmenu{ padding:0 22px }
  .rf-brand img{ height:36px }
  .hero{ min-height:clamp(420px,52vh,560px) }
  .hero__stage{ padding:26px 16px 60px }
  .plaque-shell{ width:min(88vw,700px) }
  .rf-coord{ display:none }
}

@media(max-width:560px){
  .hero{ min-height:380px }
  .rf-brand img{ height:32px }
  .rf-social img{ height:19px }
  .rf-sep-mini{ margin:0 7px }
  .hero__stage{ padding:22px 8px 52px }
  .plaque-shell{ width:94vw }
  .rf-status{ bottom:16px; font-size:9px }
  .hero__svg{ display:none }   /* tracés illisibles sous 560px : on allège */
}

/* Écran bas (portable 768px de haut) : éviter que le header mange tout l'écran */
@media(max-height:800px) and (min-width:1281px){
  .hero{ min-height:clamp(480px,70vh,700px) }
}