@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@600&display=swap');
/* Art Camping Car — HEADER V4 / reconstruction isolée
   Une seule feuille CSS pour le bandeau et la nav.
   Logos PNG fidèles à la maquette, courbes SVG jumelles,
   film MP4 original conservé, six liens HTML sans pictogrammes. */
/* overflow-x:hidden sur body creerait un conteneur de defilement
   pouvant bloquer le sticky; clip conserve le rognage horizontal sans cela. */
body{overflow-x:clip}
/* Bandeau et navigation restent ensemble en haut pendant le defilement. */
.acc-top-stack{
  position:sticky;
  top:0;
  z-index:60;
  isolation:isolate;
  flex-shrink:0;
}
/* Halos hors des elements masques : le fond alveole ne deborde pas,
   seule la lumiere traverse les deux bords comme sur la reference. */
.acc-top-stack::before,
.acc-top-stack::after{
  content:"";
  position:absolute;
  left:0;right:0;
  z-index:55;
  height:52px;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:100% 100%;
  /* Pas de masque et pas d'overflow hidden : symetrie du halo. */
}
.acc-top-stack::before{
  top:calc(clamp(42px,3.81vw,78px) - 29px);
  background-image:url('./assets/header-v4-banner-halo.svg?v=20261106-fluoro-seam');
}
.acc-top-stack::after{
  bottom:-24px;
  background-image:url('./assets/header-v4-nav-halo.svg?v=20261106-fluoro-seam');
}
@media(max-width:760px){
  .acc-top-stack::before{top:15px}
}
.acc-top-stack > .acc-led{z-index:50}
.acc-top-stack > .acc-header{
  position:relative;
  top:auto;
  z-index:40;
}
.acc-led {
  --acc-led-unit:clamp(42px,3.81vw,78px);
  position:relative;
  isolation:isolate;
  height:var(--acc-led-unit);
  overflow:hidden;
  background-color:#050a06;
  background-image:
    linear-gradient(180deg,#0009 0%,#0001 48%,#0009 100%),
    url('./assets/honeycomb-authentic.svg');
  background-size:cover,clamp(43px,3.05vw,62px) auto;
  background-position:center,center;
  background-repeat:no-repeat,repeat;
  border:0;
  border-radius:0 0 clamp(58px,5.5vw,114px) clamp(58px,5.5vw,114px) / 0 0 clamp(18px,2.04vw,42px) clamp(18px,2.04vw,42px);
  box-shadow:none;
  z-index:50;
}
.acc-led::before {
  content:"";
  position:absolute;
  z-index:1;inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,#0003,transparent 45%,#0007);
}
.acc-led::after {
  content:"";
  position:absolute;inset:0;z-index:6;
  width:100%;height:100%;
  pointer-events:none;
  background:url('./assets/header-v4-banner-rail.svg?v=20261106-fluoro-seam') center bottom/100% 100% no-repeat;
  filter:drop-shadow(0 0 4px #A5E51BA8);
  box-shadow:none;
}
.acc-led__branding {
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:4;pointer-events:none;
}
.acc-led__name {
  position:relative;z-index:3;
  display:block;flex:0 0 auto;
  /* Source : titre chromé original fourni, cadré sans modifier ses proportions. */
  width:clamp(220px,29.3vw,600px);
  height:clamp(35px,3.52vw,72px);
  margin:0;overflow:hidden;
  white-space:nowrap;
  font-size:0;line-height:0;letter-spacing:0;
  color:transparent;
  -webkit-text-stroke:0;
  background:url('./assets/art-camping-car-chrome-original.png') center center / 100% auto no-repeat;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.7));
}
.acc-led__name::before{display:none}
.acc-led__side-logo {
  position:absolute;z-index:5;top:50%;transform:translateY(-50%);
  height:auto;width:clamp(88px,10.6vw,216px);max-width:none;
  max-height:80%;object-fit:contain;
  opacity:1;filter:brightness(1);
  transform-origin:center center;
  animation:acc-aude-soft-pulse 4.2s ease-in-out infinite;
}
@keyframes acc-aude-soft-pulse {
  0%,100%{transform:translateY(-50%) scale(1);filter:brightness(1) drop-shadow(0 0 1px rgba(165,229,27,.12))}
  50%{transform:translateY(-50%) scale(1.035);filter:brightness(1.17) drop-shadow(0 0 5px rgba(165,229,27,.32))}
}
.acc-led__side-logo--left{left:clamp(7px,3.65vw,76px)}
.acc-led__side-logo--right{right:clamp(7px,3.65vw,76px)}
.acc-led__branding::before,
.acc-led__branding::after {
  content: none;
  display: none;
}
.acc-led>.acc-led__video{
  position:absolute;inset:0;z-index:1;
  opacity:0!important;
  width:100%;height:100%;object-fit:contain;pointer-events:none;
}
.acc-led__motion-window{
  position:absolute;z-index:2;top:0;bottom:0;
  width:clamp(120px,22vw,450px);
  overflow:hidden;pointer-events:none;
  isolation:isolate;
  mix-blend-mode:normal;
  opacity:0;
  /* Entree douce du singe a gauche, sortie nette derriere les logos :
     aucune transparence sur le camping-car pendant son depart. */
  mask-image:none;
  -webkit-mask-image:none;
}
.acc-led__motion-window--left{left:15.6%;width:min(22vw,calc(50% - clamp(220px,29.3vw,600px)/2 - 15.6%))}
.acc-led__motion-window--right{right:calc(clamp(7px,3.65vw,76px) + clamp(88px,10.6vw,216px) + 2.2vw);width:clamp(120px,22vw,450px)}
.acc-led__motion-window video{
  display:block;position:absolute;top:50%;
  width:102vw;max-width:none;height:auto;aspect-ratio:46/1;object-fit:fill;
  transform:translateY(-50%);opacity:1;
  filter:none;
  mix-blend-mode:normal;
}
.acc-led__motion-window--left video{left:-17.1vw}
.acc-led__motion-window--right video{left:-61vw}

.acc-header{
  position:sticky;top:0;z-index:40;
  isolation:isolate;
  background:transparent;
  backdrop-filter:none;
  filter:drop-shadow(0 6px 7px #0008) drop-shadow(0 2px 3px #A5E51B42);
}
.acc-header__nav-row{
  position:relative;isolation:isolate;
  width:100%;height:auto;
  overflow:hidden;
  border:0;
  border-radius:0 0 clamp(58px,5.5vw,114px) clamp(58px,5.5vw,114px) / 0 0 clamp(18px,2.04vw,42px) clamp(18px,2.04vw,42px);
  background:
    radial-gradient(ellipse 52% 40% at 50% 100%,#305a1430,transparent),
    linear-gradient(180deg,#0a100b 0%,#030804 30%,#030704 74%,#071009 100%);
  box-shadow:none;
}
.acc-header__nav-row::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url('./assets/header-nav-edge-relief.svg') center/100% 100% no-repeat;
  opacity:.69;pointer-events:none;
  border:0;border-radius:0;box-shadow:none;transform:none;
  width:100%;height:100%;
}
.acc-header__nav-row::after{
  content:"";position:absolute;inset:0;z-index:3;
  background:url('./assets/header-v4-rail.svg?v=20261106-fluoro-seam') center bottom/100% 100% no-repeat;
  filter:drop-shadow(0 0 4px #A5E51B94);
  pointer-events:none;
  border:0;border-radius:0;box-shadow:none;transform:none;
  width:100%;height:100%;
}
.acc-nav{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.04fr 2.07fr 1.52fr 1.34fr 1.18fr 1.05fr;
  align-items:stretch;justify-content:stretch;
  width:100%;max-width:2200px;
  min-height:clamp(46px,4.1vw,84px);
  margin:0 auto;padding:0 clamp(18px,5.0vw,104px);
  gap:0;overflow:visible;
}
.acc-nav .acc-nav__link{
  position:relative;display:flex;flex-flow:row nowrap;
  align-items:center;justify-content:center;
  min-width:0;min-height:0;
  margin:0;padding:6px 7px;
  white-space:nowrap;gap:clamp(5.4px,.72vw,14.4px);
  font:normal 600 clamp(12.36px,1.2154vw,24.72px)/1.1 Barlow,Impact,'Arial Narrow',sans-serif;
  letter-spacing:-.012em;text-transform:uppercase;
  color:#f6f8f3;text-decoration:none;
  text-shadow:0 1px 1px #000b;
  border:0;background:transparent;
  transition:color .17s ease,text-shadow .17s ease;
}
/* Les pictogrammes SVG servent de masques : ils adoptent exactement
   currentColor, comme les libelles, dans les etats normal/actif/survol. */
.acc-nav .acc-nav__icon{
  display:block!important;
  width:clamp(27.6px,2.67vw,51.5px);
  aspect-ratio:3 / 2;
  flex:0 0 auto;
  background-color:currentColor;
  -webkit-mask:var(--nav-icon) center / contain no-repeat;
  mask:var(--nav-icon) center / contain no-repeat;
  transition:background-color .17s ease;
}
.acc-nav__icon--accueil{--nav-icon:url('./assets/nav-accueil.svg?v=20261105-new-camper-home-smaller')}
.acc-nav__icon--camping-car{--nav-icon:url('./assets/nav-camping-car.svg?v=20261105-svg-affines-v4')}
.acc-nav__icon--magasin{--nav-icon:url('./assets/nav-magasin.svg?v=20261105-svg-affines-v4')}
.acc-nav__icon--services{--nav-icon:url('./assets/nav-services.svg?v=20261105-svg-affines-v4')}
.acc-nav__icon--contact{--nav-icon:url('./assets/nav-contact.svg?v=20261105-contact-minus8-more')}
.acc-nav .acc-nav__label{display:inline-block;line-height:1.1}
.acc-nav .acc-nav__link::before{content:none;display:none}
.acc-nav .acc-nav__link:not(:first-child)::before{
  content:"";display:block;
  /* Explicitement ancré au centre des libellés, sans la position statique du pseudo-élément. */
  position:absolute;inset:50% auto auto 0;
  transform:translateY(-50%);
  width:1px;height:clamp(16px,1.8vw,30px);
  background:linear-gradient(180deg,transparent,#d5ebcecc 18%,#d5ebcecc 82%,transparent);
  box-shadow:0 0 2px #e9ffdf38;
}
/* L'onglet actif garde son vert en permanence, y compris au survol et au focus. */
.acc-nav .acc-nav__link[aria-current="page"],
.acc-nav .acc-nav__link[aria-current="page"]:hover,
.acc-nav .acc-nav__link[aria-current="page"]:focus-visible{
  color:#A5E51B;
  text-shadow:0 0 5px #A5E51B6B;
  background:transparent;
}
/* Aucun soulignement : identification par la couleur du texte et du SVG. */
.acc-nav .acc-nav__link::after{
  content:none;
  display:none;
}
/* Le vert clair au survol est réservé aux onglets non actifs. */
.acc-nav .acc-nav__link:not([aria-current="page"]):hover,
.acc-nav .acc-nav__link:not([aria-current="page"]):focus-visible{
  color:#d8ff8d;
  text-shadow:0 0 6px #A5E51B88;
  background:transparent;
}
@media(max-width:1250px){
 .acc-nav{padding-inline:clamp(8px,2vw,26px)}
 .acc-nav .acc-nav__link{font-size:clamp(11.33px,1.1124vw,15.45px);padding-inline:5px}
 .acc-nav .acc-nav__icon{width:clamp(24.8px,2.58vw,35.9px)}
}
@media(max-width:1050px){
 .acc-nav{display:flex;justify-content:flex-start;gap:0;min-height:46px;overflow-x:auto;padding:0 15px;scrollbar-width:thin;scrollbar-color:#A5E51B transparent}
 .acc-nav .acc-nav__link{flex:0 0 auto;font-size:13.39px;padding:7px 15px}
 .acc-nav .acc-nav__icon{width:31.3px}
 .acc-led__motion-window video{width:145vw}
 .acc-led__motion-window--left video{left:-25vw}
 .acc-led__motion-window--right video{left:-93vw}
}
@media(max-width:760px){
 .acc-led{--acc-led-unit:44px;height:44px}
 .acc-led__name{width:clamp(135px,43vw,220px);height:31px;font-size:0}
 .acc-led__side-logo{width:clamp(45px,13.6vw,94px);max-height:65%}
 .acc-led__side-logo--left{left:3px}
 .acc-led__side-logo--right{right:3px}
 .acc-led__branding::before,.acc-led__branding::after{display:none}
 .acc-led__motion-window{width:21vw}
 .acc-led__motion-window--left{left:13%}
 .acc-led__motion-window--right{right:13%;width:25vw}
 .acc-led__motion-window video{width:145vw}
 .acc-led__motion-window--left video{left:-24vw}
 .acc-led__motion-window--right video{left:-92vw}
 .acc-nav{min-height:44px}
 .acc-header__nav-row{border-bottom-left-radius:24px 15px;border-bottom-right-radius:24px 15px}
 .acc-led{border-bottom-left-radius:24px 15px;border-bottom-right-radius:24px 15px}
}
@media(prefers-reduced-motion:reduce){
 .acc-led__side-logo{animation:none;filter:brightness(1)}
 .acc-led__motion-window{display:none}
 .acc-nav .acc-nav__link{transition:none}
}
/* V4.1 — raccord unique : la navigation est le fond continu sous le bandeau.
   Le bandeau est découpé sur le TRAIT SVG, jamais selon un rayon approximatif.
   Son fond, la vidéo et les logos s'arrêtent désormais au bon contour. */
.acc-led {
  -webkit-mask-image:url('./assets/header-v4-banner-clip.svg');
  mask-image:url('./assets/header-v4-banner-clip.svg');
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  border-radius:0;
  overflow:hidden;
}
/* V4.2 — Empilement exact, de l’arrière vers l’avant :
   1) hero qui remonte SOUS la navigation ;
   2) navigation + décor strictement découpés sur le rail inférieur ;
   3) bandeau masqué au-dessus de la navigation.
   Le décor alvéolé ne dépasse donc jamais sous la navigation. */
.acc-header {
  --acc-v4-band-height:clamp(42px,3.81vw,78px);
}
.acc-header::before {
  content:"";
  position:absolute;
  z-index:-1;
  left:0;right:0;
  top:calc(-1 * var(--acc-v4-band-height));
  bottom:0;
  pointer-events:none;
  background:
    url('./assets/header-nav-edge-relief.svg') center / 100% 100% no-repeat,
    radial-gradient(ellipse 52% 40% at 50% 100%,#305a1430,transparent),
    linear-gradient(180deg,#0a100b 0%,#030804 30%,#030704 74%,#071009 100%);
  border-radius:0;
  /* découpe du fond exactement au bord de la navigation */
  /* deux masques complémentaires : remplissage sous le bandeau en haut,
     forme exacte de la navigation en bas */
  -webkit-mask-image:linear-gradient(#000,#000),url('./assets/header-v4-nav-clip.svg');
  mask-image:linear-gradient(#000,#000),url('./assets/header-v4-nav-clip.svg');
  -webkit-mask-size:100% var(--acc-v4-band-height),100% calc(100% - var(--acc-v4-band-height));
  mask-size:100% var(--acc-v4-band-height),100% calc(100% - var(--acc-v4-band-height));
  -webkit-mask-position:center top,center bottom;
  mask-position:center top,center bottom;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
/* Le masque du calque parent s'applique aussi au texte et au décor.
   Le contour vert reste visible car il est déjà tracé sur le même chemin. */
.acc-header__nav-row {
  background:transparent;
  border-radius:0;
  -webkit-mask-image:url('./assets/header-v4-nav-clip.svg');
  mask-image:url('./assets/header-v4-nav-clip.svg');
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
.acc-header__nav-row::before{content:none;display:none}

/* La photo de la hero est réellement en dessous de la nav, y compris dans
   les coins dégagés par son contour. On compense la hauteur pour garder
   toutes les sections suivantes à leur position normale. */
.home-page #contenu{
  --acc-v4-hero-underlap:clamp(24px,2.05vw,42px);
  position:relative;
  z-index:0;
  margin-top:calc(-1 * var(--acc-v4-hero-underlap));
}
.home-page #contenu>.acc-hero{
  height:calc(100dvh - var(--acc-home-top-rail,104px) + var(--acc-v4-hero-underlap));
  min-height:calc(520px + var(--acc-v4-hero-underlap));
  padding-top:var(--acc-v4-hero-underlap);
}
@media(max-width:760px){
  .acc-header{--acc-v4-band-height:44px}
  .home-page #contenu{--acc-v4-hero-underlap:18px}
  .home-page #contenu>.acc-hero{
    height:auto;
    min-height:calc(570px + var(--acc-v4-hero-underlap));
  }
}