/* ============================================================
   ALPENGLOW  -  CORRECTIFS
   Charge apres frosted-accueil.css et alpenglow-motion.css.
   ============================================================ */

/* --- 1. L accent oublie dans la methode ---------------------
   Le filet et les pastilles de la timeline utilisaient l or
   rasant sur une bande claire. Alpenglow reserve l or aux fonds
   sombres : sur fond clair, c est l orange brule. L or a 60 pour
   cent sur creme ne se voyait tout simplement pas. */
.fe-steps::before{
  background:linear-gradient(180deg,var(--fe-accent),var(--fe-line) 58%,transparent);
}
.fe-steps > li::before{
  border-color:var(--fe-accent);
  box-shadow:0 0 0 4px rgb(168 72 31 / .10);
}
/* Sur bande sombre, l or reprend sa place. */
.fe-night-band .fe-steps::before,
.fe-dark .fe-steps::before{
  background:linear-gradient(180deg,rgb(var(--fe-rgb-cyan)/.75),rgb(var(--fe-rgb-cyan)/.18) 58%,transparent);
}
.fe-night-band .fe-steps > li::before,
.fe-dark .fe-steps > li::before{
  background:var(--fe-night);
  border-color:var(--fe-prism-a);
  box-shadow:0 0 0 4px rgb(var(--fe-rgb-cyan)/.14);
}

/* --- 2. Le survol reste colle au doigt ----------------------
   Sur ecran tactile, :hover persiste apres un appui. La premiere
   realisation gardait donc son halo dore en permanence, ce qui la
   distinguait des autres sans raison. Les effets de survol sont
   desormais reserves aux peripheriques qui survolent vraiment. */
@media (hover:none){
  .fe-piece:hover{box-shadow:none;}
  .fe-piece:hover img{transform:none;}
  .fe-btn:hover{box-shadow:none;transform:none;}
  .fe-cell:hover{border-color:inherit;}
  .fe-page :where(p,li) a:not(.fe-btn):hover::after{transform:scaleX(1);}
}

/* --- 3. Alignement des realisations -------------------------
   En colonne unique, la grande piece gardait un rapport 16/11 et
   les petites un 4/3 : la pile paraissait bancale. Un seul rapport
   des que la grille passe sur une colonne. */
@media (max-width:880px){
  .fe-piece img,
  .fe-piece--big img{aspect-ratio:16/10;}
  .fe-work{gap:var(--fe-sm);}
}

/* --- 4. Respiration sous l en-tete --------------------------
   Le hero n avait aucune marge haute. Des que son contenu depassait
   la hauteur minimale, l etiquette venait toucher la barre de
   navigation. */
@media (max-width:880px){
  .fe-hero{padding-top:clamp(28px,7vw,56px);}
  .fe-hero-in{gap:var(--fe-sm);}
}

/* --- 5. Alignement des icones du bandeau de preuves ---------
   L icone se calait sur le haut du bloc et non sur la premiere
   ligne du titre. */
.fe-proof svg{margin-top:.28em;}

/* --- 6. Defilement lateral ---------------------------------
   La reprise du rayon en pied de page debordait de 12 pour cent
   de chaque cote. Le corps porte bien overflow-x:clip, mais c est
   l element html qui defile : la regle posee sur body seul ne
   suffit pas a empecher la barre laterale. Les deux la portent
   desormais, et le rayon est contenu dans son propre bloc.
   clip et non hidden : hidden ferait du document un conteneur de
   defilement et l en-tete collant perdrait son ancrage. */
html{overflow-x:clip;}
.fe-page{overflow-x:clip;}
footer.fe-dark,
.fe-page-hero{overflow-x:clip;}
.fe-foot{position:relative;overflow:clip;}
.fe-foot::before{
  inset:-24px 0 auto 0;
  background:linear-gradient(74deg,transparent 26%,rgb(var(--fe-rgb-cyan)/.14) 50%,transparent 74%);
}