/* ============================================================
   ARGANE \002014 Footer (composant partag\0000e9)
   ------------------------------------------------------------
   Source UNIQUE du pied de page. Inject\0000e9 par argane-footer.js
   sur chaque page :  <script src="argane-footer.js"></script>
   Footer fix\0000e9 bas (parallax) : le contenu glisse au-dessus.
   ============================================================ */
/* ============================================================
   Reveal parallax \002014 m\0000e9canique partag\0000e9e (toutes les pages \0000e0 footer)
   ------------------------------------------------------------
   Le footer est fix\0000e9 en bas ; le contenu glisse au-dessus. La
   derni\0000e8re section de contenu se "pose" sur le footer avec des
   coins arrondis bas IDENTIQUES sur toutes les pages (Desktop,
   mobile, responsive). Source unique de la valeur du rayon.
   (Charg\0000e9 uniquement sur les pages qui injectent le footer, donc
    automatiquement scop\0000e9 aux bonnes pages.)
   ============================================================ */
body > section,
body > article,
body > main,
body > .marquee{
  position:relative;
  z-index:2;
}
body > section:last-of-type,
body > article:last-of-type,
body > main:last-of-type{
  border-bottom-left-radius:clamp(16px, 2.5vw, 28px);
  border-bottom-right-radius:clamp(16px, 2.5vw, 28px);
}

.site-footer{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:1;
  background:var(--forge);
  color:var(--paper);
  border-top:0;
  overflow:hidden;
  isolation:isolate;
}
.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.foot-wrap{
  position:relative;
  z-index:1;
  padding-left:clamp(24px, 5vw, 64px);
  padding-right:clamp(24px, 5vw, 64px);
}

/* ----- STRATE 2 \002014 navigation compl\0000e8te ----- */
.foot-strate-2{
  padding-top:clamp(72px, 9vw, 112px);
  padding-bottom:clamp(56px, 7vw, 80px);
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:clamp(28px, 3vw, 44px);
  align-items:start;
}

/* Bloc identitaire */
.foot-identity{grid-column:1 / span 3;}
.foot-identity .brand{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:24px;
}
.foot-identity .brand img{height:40px; width:auto;}
.foot-identity p{
  font-family:var(--ff-body);
  font-size:14px;
  font-weight:400;
  line-height:1.55;
  color:rgba(250,250,250,0.62);
  max-width:240px;
  margin:0;
}
.foot-identity .signature{
  margin-top:32px;
  font-family:var(--ff-body);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:rgba(238,39,55,0.8);
}

/* Colonnes liens */
.foot-col{display:flex; flex-direction:column;}
.foot-col.col-produits{grid-column:4 / span 3;}
.foot-col.col-decouvrir{grid-column:7 / span 2;}
.foot-col.col-services{grid-column:9 / span 2;}
.foot-col-newsletter{grid-column:11 / span 2; display:flex; flex-direction:column;}

.foot-col .label,
.foot-col-newsletter .label{
  font-family:var(--ff-body);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#8FA0B3;
  margin-bottom:24px;
}
.foot-col ul{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.foot-col li a{
  font-family:var(--ff-body);
  font-size:15px;
  font-weight:400;
  color:var(--paper);
  transition:color .2s ease, transform .2s ease;
  display:inline-block;
}
.foot-col li a:hover{color:var(--braise);}

/* Desktop : <details> rendu sans disclosure */
.foot-col details > summary{list-style:none; display:none;}
.foot-col details > summary::-webkit-details-marker{display:none;}

/* R\0000e9seaux sociaux */
.foot-social .label{margin-bottom:24px;}
.foot-social .social-list{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.foot-social .social-list a{
  font-family:var(--ff-body);
  font-size:15px;
  font-weight:400;
  color:var(--paper);
  padding:0;
  transition:color .2s ease;
}
.foot-social .social-list a:first-child{padding-left:0;}
.foot-social .social-list a:hover{color:var(--braise);}
.foot-social .social-list .sep{display:none;}

/* ----- STRATE 3 \002014 barre l\0000e9gale ----- */
.foot-strate-3{
  border-top:1px solid rgba(250,250,250,0.08);
  padding-top:32px;
  padding-bottom:32px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  justify-content:space-between;
  align-items:center;
  gap:32px;
}
.foot-strate-3 .foot-legal{justify-self:center;}
.foot-credit{
  justify-self:end;
  margin:0;
  font-family:var(--ff-body);
  font-size:13px;
  color:rgba(250,250,250,0.62);
}
.foot-credit a{color:rgba(250,250,250,0.62); text-decoration:none; transition:color .2s ease;}
.foot-credit a:hover{color:var(--paper);}
.foot-copyright{
  font-family:var(--ff-body);
  font-size:13px;
  color:rgba(250,250,250,0.62);
}
.foot-legal{display:flex; gap:24px; flex-wrap:wrap;}
.foot-legal a{
  font-family:var(--ff-body);
  font-size:13px;
  color:rgba(250,250,250,0.62);
  transition:color .2s ease;
}
.foot-legal a:hover{color:var(--paper);}

/* Focus visible */
.site-footer a:focus-visible,
.site-footer button:focus-visible,
.site-footer input:focus-visible{
  outline:2px solid var(--braise);
  outline-offset:3px;
  border-radius:2px;
}

/* ----- Responsive ----- */
@media (max-width: 1024px){
  .foot-strate-2{grid-template-columns:repeat(2, 1fr); gap:48px 32px;}
  .foot-identity{grid-column:1 / -1;}
  .foot-col.col-produits{grid-column:1;}
  .foot-col.col-decouvrir{grid-column:2;}
  .foot-col.col-services{grid-column:1;}
  .foot-col-newsletter{grid-column:2; align-self:start;}

  .foot-wrap{padding-left:32px; padding-right:32px;}
}
@media (max-width: 768px){
  .foot-wrap{padding-left:24px; padding-right:24px;}

  /* Mobile : on abandonne le footer fixe (reveal parallax). Sur petit
     écran le footer est plus haut que le viewport : fixé en bas, son
     haut devenait inatteignable. Il redevient un bloc en flux. */
  .site-footer{position:relative; bottom:auto;}

  .foot-strate-2{grid-template-columns:1fr; gap:0;}
  .foot-identity, .foot-col, .foot-col-newsletter{grid-column:1 / -1 !important;}
  /* Accord\0000e9ons coll\0000e9s (les bordures + le padding des summary rythment) ; respiration autour des blocs non-accord\0000e9on */
  .foot-identity{margin-bottom:clamp(24px, 6vw, 36px);}
  .foot-col-newsletter{margin-top:clamp(24px, 6vw, 36px);}

  /* Accord\0000e9ons colonnes liens */
  .foot-col{
    border-bottom:1px solid rgba(250,250,250,0.08);
    padding-bottom:0;
  }
  .foot-col .label{display:none;}
  .foot-col details > summary{
    display:flex;
    list-style:none;
    cursor:pointer;
    padding:18px 0;
    justify-content:space-between;
    align-items:center;
    font-family:var(--ff-body);
    font-size:11px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:#8FA0B3;
    transition:color .2s ease;
  }
  .foot-col details > summary::-webkit-details-marker{display:none;}
  .foot-col details > summary::after{
    content:"+";
    font-family:var(--ff-body);
    font-size:18px;
    color:var(--paper);
    transition:transform .25s ease;
  }
  .foot-col details[open] > summary::after{transform:rotate(45deg);}
  .foot-col details[open] > summary{color:var(--paper);}
  .foot-col details ul{padding:0 0 20px;}

  .foot-strate-3{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
    gap:20px;
  }
  .foot-strate-3 .foot-legal,
  .foot-strate-3 .foot-credit,
  .foot-strate-3 .foot-copyright{justify-self:center;}
  .foot-legal{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 20px;
  }
}