/* ============================================================
   ALPENGLOW  -  LUMIERE ET CRETE
   Charge en dernier, apres frosted-accueil.css, alpenglow-motion.css
   et alpenglow-correctifs.css.

   Deux intentions :
   1. rendre la lumiere rasante reellement visible sur les photos.
      Les voiles precedents etaient regles pour Frosted Echoes, une
      direction sombre. Sous Alpenglow ils eteignaient l heure doree
      qu ils etaient censes porter.
   2. remplacer la coupe droite des bandes par une crete. Le Mole est
      un cone reconnaissable depuis Geneve : la page emprunte sa ligne
      de faite plutot qu un simple filet horizontal.
   ============================================================ */

/* --- 1. Les photographies retrouvent leur heure ------------- */
.fe-hero-photo{filter:saturate(.94) contrast(1.02) brightness(.94);}
.fe-band-photo{filter:saturate(.9) contrast(1.02) brightness(.8);}

/* Le voile n assombrit plus toute la photo : il ne travaille que
   la ou le texte se pose. Le haut reste ouvert sur le ciel, le bas
   porte le contraste. Le texte du hero est cale en bas. */
.fe-veil{
  background:
    linear-gradient(180deg,rgb(37 53 68 / .34) 0%,transparent 26%),
    linear-gradient(180deg,transparent 0 38%,rgb(43 58 74 / .34) 66%,rgb(37 53 68 / .84) 100%);
}
.fe-veil--band{
  background:linear-gradient(180deg,rgb(37 53 68 / .8) 0%,rgb(52 72 92 / .68) 46%,rgb(37 53 68 / .86) 100%);
}

/* --- 2. La crete --------------------------------------------
   Une ligne de faite irreguliere, sommet dominant decale a gauche
   de l axe, comme le Mole vu de la vallee de l Arve. Elle est en
   neige doree : c est le sol de la page qui monte dans la photo,
   pas un separateur pose dessus.
   variance .6 : le sommet n est jamais centre. */
:root{
  --fe-crete:polygon(
    0 100%, 0 74%, 6% 80%, 12% 62%, 18% 73%, 24% 55%,
    30% 66%, 37% 38%, 43% 14%, 48% 40%, 54% 30%, 61% 52%,
    68% 41%, 75% 60%, 82% 49%, 89% 67%, 95% 58%, 100% 70%, 100% 100%
  );
}
.fe-crete{
  position:absolute;inset:auto 0 -1px 0;z-index:5;
  height:clamp(64px,10vw,148px);
  pointer-events:none;
  filter:drop-shadow(0 -1.5px 0 rgb(242 184 114 / .8));
}
/* La decoupe vit sur l element interne : un filtre s applique avant
   le clip, jamais apres. Porte par le meme element, l ombre serait
   calculee sur le rectangle puis rognee avec lui, donc invisible. */
.fe-crete > i{
  display:block;position:absolute;inset:0;
  background:var(--fe-glacier);
  clip-path:var(--fe-crete);
}
/* Le hero se termine sur la crete : le contenu doit la degager. */
.fe-hero{padding-bottom:clamp(112px,15vw,232px);}

/* Un liseré dore suit l arete, cote lumiere. C est l alpenglow lui
   meme : le soleil rasant qui accroche le fil du sommet. */

/* La meme arete, retournee, ferme les bandes claires par le haut.
   Profil different de celui du hero : sommet a 55 pour cent, plus
   etale. Deux fois la meme silhouette sur une page en ferait un
   motif. Sur fond clair l ombre passe a l orange brule : l or
   rasant ne se lit que sur fond sombre. */
:root{
  --fe-crete-etale:polygon(
    0 100%, 0 70%, 8% 78%, 15% 56%, 22% 72%, 29% 44%,
    36% 62%, 44% 28%, 50% 52%, 55% 8%, 61% 46%, 68% 34%,
    75% 58%, 82% 40%, 89% 64%, 95% 50%, 100% 66%, 100% 100%
  );
}
.fe-crete--haut{
  inset:-1px 0 auto 0;
  transform:scaleY(-1);
  filter:drop-shadow(0 -1px 0 rgb(168 72 31 / .24));
}
.fe-crete--haut > i{clip-path:var(--fe-crete-etale);}

/* Bande claire alternee. La direction demande deux bandes inversees
   par page au maximum : les services repassent en brume rosee et
   gardent leur arete, portee ici par un element et non par une
   decoupe, ce qui permet au filet de suivre le trace. */
.fe-clair{background:#F3E9E4;}
.fe-massif-haut{padding-top:calc(var(--fe-band) + clamp(52px,8vw,120px));}
@media (max-width:700px){
  .fe-massif-haut{padding-top:calc(var(--fe-band) + clamp(34px,10vw,64px));}
}

@media (max-width:700px){
  .fe-crete{height:clamp(48px,13vw,80px);}
}

@media (prefers-reduced-motion:reduce){
  .fe-crete{transition:none;}
}

/* --- 3. Les bandes ne sont plus des rectangles ---------------
   Chaque bande sombre est decoupee sur une ligne de faite. Le fond
   creme de la page passe dans l entaille : ce n est pas un
   separateur pose sur la bande, c est la bande qui a une silhouette.
   Les coordonnees sont en pixels et non en pourcentage : une bande
   haute et une bande courte doivent porter la meme arete, pas la
   meme proportion.
   Trois profils distincts. Une meme silhouette repetee trois fois
   redeviendrait un motif, donc un rectangle deguise. */

.fe-massif{
  --fe-r:clamp(44px,6.5vw,104px);
  padding-top:calc(var(--fe-band) + var(--fe-r) * .7);
}

/* Profil A : massif etale, sommet dominant a droite de l axe.
   Pour la bande des services, la plus longue de la page. */
.fe-massif--arete{
  clip-path:polygon(
    0 var(--fe-r),
    9% calc(var(--fe-r) * .64), 16% calc(var(--fe-r) * .88),
    24% calc(var(--fe-r) * .36), 31% calc(var(--fe-r) * .68),
    39% calc(var(--fe-r) * .14), 46% calc(var(--fe-r) * .52),
    55% 0,
    62% calc(var(--fe-r) * .44), 70% calc(var(--fe-r) * .22),
    78% calc(var(--fe-r) * .6), 86% calc(var(--fe-r) * .32),
    93% calc(var(--fe-r) * .72), 100% calc(var(--fe-r) * .46),
    100% 100%, 0 100%
  );
}

/* Profil B : chaine detachee, aretes en haut et en bas. La bande
   photo flotte dans la page au lieu de la barrer. Le bas est plus
   sourd que le haut : une chaine vue de loin s enfonce dans la brume. */
.fe-massif--chaine{
  padding-bottom:calc(var(--fe-band) + var(--fe-r) * .5);
  clip-path:polygon(
    0 calc(var(--fe-r) * .52),
    7% calc(var(--fe-r) * .78), 15% calc(var(--fe-r) * .3),
    22% 0,
    29% calc(var(--fe-r) * .4), 37% calc(var(--fe-r) * .16),
    45% calc(var(--fe-r) * .58), 53% calc(var(--fe-r) * .26),
    61% calc(var(--fe-r) * .7), 69% calc(var(--fe-r) * .38),
    77% calc(var(--fe-r) * .84), 85% calc(var(--fe-r) * .44),
    92% calc(var(--fe-r) * .9), 100% calc(var(--fe-r) * .6),
    100% calc(100% - var(--fe-r) * .34),
    88% calc(100% - var(--fe-r) * .1), 74% calc(100% - var(--fe-r) * .4),
    58% calc(100% - var(--fe-r) * .08), 41% calc(100% - var(--fe-r) * .36),
    26% calc(100% - var(--fe-r) * .06), 12% calc(100% - var(--fe-r) * .3),
    0 calc(100% - var(--fe-r) * .04)
  );
}

/* Profil C : un cone unique. Le Mole culmine a 1 863 metres et se
   reconnait de loin a cette forme la, presque isolee au-dessus de
   la vallee de l Arve. La bande de contact la porte franchement. */
.fe-massif--cone{
  --fe-r:clamp(56px,8vw,132px);
  clip-path:polygon(
    0 var(--fe-r),
    14% calc(var(--fe-r) * .82), 22% calc(var(--fe-r) * .92),
    31% calc(var(--fe-r) * .34),
    38% 0,
    47% calc(var(--fe-r) * .3), 56% calc(var(--fe-r) * .2),
    68% calc(var(--fe-r) * .68), 79% calc(var(--fe-r) * .5),
    89% calc(var(--fe-r) * .86), 100% calc(var(--fe-r) * .72),
    100% 100%, 0 100%
  );
}

/* Pas de liseré dore sur les bandes : un filtre s applique avant la
   decoupe, jamais apres, donc aucune ombre ne peut suivre l arete
   d un element qui se clippe lui meme. La silhouette porte seule.
   Le hero, lui, passe par un element interne (voir plus haut). */

@media (max-width:700px){
  .fe-massif{--fe-r:clamp(30px,9vw,58px);}
  .fe-massif--cone{--fe-r:clamp(36px,11vw,70px);}
}

/* --- 4. Le voile de l en-tete -------------------------------
   Le gris ne venait pas du reglage mais de la methode. Poser un
   aplat bleu nuit sur une photo orangee revient a melanger deux
   teintes opposees : la moyenne des deux tombe au centre du cercle
   chromatique, donc dans le gris. Baisser l opacite ne corrigeait
   rien, cela ne faisait que reculer le probleme.

   L en-tete n ajoute donc plus aucune couleur. Il assombrit ce qui
   passe dessous, canal par canal, ce qui conserve la teinte exacte
   du ciel, et il en remonte la saturation. Le haut du hero reste
   orange, simplement plus sourd. Aucun gris ne peut apparaitre
   puisque aucune couleur n est ajoutee.

   Le degrade ne teinte plus : il sert de masque au filtre, sur huit
   paliers cales en courbe d amortissement. C est ce qui evite l
   arete visible que produisaient les trois paliers d origine. */
/* isolation:isolate posait un plafond au filtre d arriere-plan : sous
   cette propriete, l element ne voit plus rien derriere lui et le
   filtre s applique dans le vide. L empilement reste tenu par les
   z-index deja en place. */
.fe-nav{isolation:auto;}
.fe-nav::before{
  height:164%;
  background:none;  -webkit-backdrop-filter:brightness(.5) saturate(1.5);
  backdrop-filter:brightness(.5) saturate(1.5);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgb(0 0 0 / .93) 12%,rgb(0 0 0 / .8) 24%,rgb(0 0 0 / .63) 37%,rgb(0 0 0 / .45) 50%,rgb(0 0 0 / .29) 63%,rgb(0 0 0 / .16) 76%,rgb(0 0 0 / .06) 89%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgb(0 0 0 / .93) 12%,rgb(0 0 0 / .8) 24%,rgb(0 0 0 / .63) 37%,rgb(0 0 0 / .45) 50%,rgb(0 0 0 / .29) 63%,rgb(0 0 0 / .16) 76%,rgb(0 0 0 / .06) 89%,transparent 100%);
}

/* Repli pour les moteurs sans filtre d arriere-plan : la teinte
   franche de la nuit douce, assez opaque pour se lire comme un bleu
   et non comme la moyenne de deux couleurs. */
@supports not (backdrop-filter:brightness(1)){
  .fe-nav::before{
    background:linear-gradient(180deg,rgb(37 53 68 / .88) 0%,rgb(37 53 68 / .62) 42%,rgb(37 53 68 / .24) 72%,transparent 100%);
  }
}

/* Les liens de l en-tete perdaient 30 pour cent d opacite. Sur un
   voile allege, cela les faisait passer sous le seuil AA. Ils
   prennent la neige pleine : c est le voile qui gere le contraste,
   pas la transparence du texte. */
.fe-nav-links a{color:#FBF7F2;}

/* La barre givree souffrait du meme travers : un aplat de nuit a 74
   pour cent sur une page creme donnait un bleu eteint. Elle garde
   une teinte franche mais legere et laisse le filtre assombrir, la
   saturation relevee pour la meme raison. */
.fe-nav.is-frost{
  background:rgb(37 53 68 / .46);
  -webkit-backdrop-filter:blur(16px) saturate(155%) brightness(.74);
  backdrop-filter:blur(16px) saturate(155%) brightness(.74);
}

/* --- 5. L en-tete revient sur la photo -----------------------
   Le voile ne pouvait pas etre autre chose que gris : l en-tete
   n etait pas pose sur le hero, il etait pose au-dessus de lui,
   dans le flux. Le filtre assombrissait donc le fond creme de la
   page, et un creme assombri est un gris. Toute la mecanique du
   givre au scroll supposait pourtant un en-tete transparent pose
   sur l image : c est cette superposition qui manquait.

   Le hero remonte donc de la hauteur de l en-tete et recupere
   cette hauteur en marge interieure. La regle porte sur main et
   non sur la section : une marge negative posee sur le premier
   enfant se fusionnerait avec celle du parent et deplacerait le
   parent entier. */
main:has(> .fe-hero),
main:has(> .fe-page-hero){margin-top:calc(-1 * var(--fe-nav-h,104px));}
.fe-hero,
.fe-page-hero{padding-top:calc(var(--fe-nav-h,104px) + var(--fe-sm));}

/* --- 6. Le bouton reprend l accent --------------------------
   Le bouton principal etait un aplat de nuit douce borde de nuit
   douce : sur la photo il passait pour un rectangle bleu eteint.
   Alpenglow ne laisse pas de doute la-dessus, le bouton est un
   aplat orange brule a texte neige. La valeur est ecrite en dur
   et non prise dans la variable : sur bande sombre l accent
   bascule vers l or rasant, et un bouton dore a texte neige ne
   passerait aucun seuil de contraste. L orange brule tient sur
   les deux fonds. */
.fe-btn{background:#A8481F;border-color:#A8481F;color:#FBF7F2;}
.fe-btn:hover{border-color:#A8481F;box-shadow:0 0 0 1px rgb(242 184 114 / .5),0 0 30px rgb(242 184 114 / .34);}

/* --- 7. Le titre du hero sur petit ecran ---------------------
   La borne basse du titre etait calee a 2,5rem. Sur un telephone
   de 393 points, une phrase de onze mots y tenait sur cinq lignes,
   loin des deux que demande la direction. La phrase est raccourcie,
   et la borne basse descend juste assez pour la ramener a trois
   lignes. Deux restent hors d atteinte a cette largeur sans casser
   l echelle du titre, et trois lignes de titre court se lisent
   mieux que deux lignes minuscules. */
@media (max-width:560px){
  .fe-t-hero{font-size:clamp(2.15rem,1.3rem + 5vw,3.4rem);line-height:1;}
}

/* --- 8. Telephone : une seule barre, en bas -------------------
   Le site portait deux navigations sur telephone : un tiroir plein
   ecran ouvert depuis le haut, et une barre fixe en bas qui
   apparaissait au defilement. Deux instruments pour un seul geste.

   Ils fusionnent en une barre basse permanente, la ou se posent les
   pouces. Le haut de l ecran est rendu a la photo : plus de voile,
   plus de bouton, la marque seule posee sur le ciel. Le panneau de
   menu monte depuis le bas au lieu de tomber du haut, et la barre
   reste au-dessus de lui : le meme bouton ouvre et ferme.

   Le bouton de menu est deplace par le script. S il ne tourne pas,
   il reste dans l en-tete et la navigation fonctionne quand meme. */
@media (max-width:720px){
  .fe-nav::before{display:none;}
  .fe-nav.is-frost{background:rgb(37 53 68 / .38);
    -webkit-backdrop-filter:blur(14px) saturate(155%) brightness(.78);
    backdrop-filter:blur(14px) saturate(155%) brightness(.78);}
  /* La marque tient seule sur la photo : une ombre bleue portee,
     jamais noire, suffit la ou un voile pesait. */
  .fe-brand{text-shadow:0 1px 14px rgb(37 53 68 / .6);}

  .fe-dock{
    transform:none;
    display:flex;align-items:center;gap:12px;
  }
  .fe-dock .fe-burger{
    display:flex;flex:0 0 48px;width:48px;height:48px;
    border:1px solid rgb(242 184 114 / .3);border-radius:var(--fe-r-sm);
  }
  .fe-dock .fe-btn{flex:1;}

  /* Le panneau monte du bas et s arrete sous la barre. */
  .fe-nav-links{
    transform:translateY(26px);
    padding:calc(var(--fe-nav-h,76px) + 12px) var(--fe-gutter) 132px;
  }
  .fe-nav-links.is-open{transform:none;}

  /* La barre est desormais permanente. La reserve etait posee sur la
     page : le fond creme apparaissait alors entre la fin du pied et
     la barre, sur les quelques points que la barre ne couvre pas.
     Elle passe dans le pied lui-meme, qui se prolonge sous la barre.
     Le sombre va jusqu au bord de l ecran. */
  .fe-foot-band{padding-bottom:calc(64px + 84px + env(safe-area-inset-bottom));}
}

@media (max-width:720px) and (prefers-reduced-motion:reduce){
  .fe-nav-links{transform:none;}
}

/* Avec viewport-fit=cover l image passe sous l encoche. La marque
   et la barre basse gardent leur marge de securite. */
@media (max-width:720px){
  .fe-nav-in{padding-top:env(safe-area-inset-top);}
  .fe-nav-links{padding-top:calc(var(--fe-nav-h,76px) + 12px + env(safe-area-inset-top));}
}

/* --- 9. Sortie du panneau de menu ----------------------------
   Le panneau se fermait par le bouton qui l avait ouvert, en bas de
   l ecran. Cela marche, mais rien ne l annonce : une croix visible
   en haut du panneau dit la sortie au lieu de la sous-entendre.
   Elle n existe que la ou le panneau recouvre l ecran ; au-dessus
   de 880 points la navigation est une simple rangee de liens. */
.fe-close{display:none;}
@media (max-width:880px){
  .fe-close{
    display:flex;align-items:center;justify-content:center;
    position:absolute;z-index:2;
    top:calc(env(safe-area-inset-top) + 16px);
    right:var(--fe-gutter);
    width:46px;height:46px;padding:0;
    background:transparent;color:inherit;
    border:1px solid rgb(242 184 114 / .3);
    border-radius:var(--fe-r-sm);
    cursor:pointer;
    transition:border-color var(--fe-dur-hover) var(--fe-ease-mist),
               box-shadow var(--fe-dur-hover) var(--fe-ease-mist);
  }
  .fe-close span{
    position:absolute;width:17px;height:1.5px;
    background:var(--fe-glacier,#FBF7F2);border-radius:2px;
  }
  .fe-close span:first-child{transform:rotate(45deg);}
  .fe-close span:last-child{transform:rotate(-45deg);}
  .fe-close:hover,
  .fe-close:focus-visible{
    border-color:rgb(242 184 114 / .6);
    box-shadow:0 0 24px rgb(242 184 114 / .28);
  }
  /* La place de la croix est reservee dans l entete du panneau. */
  .fe-nav-links{padding-right:calc(var(--fe-gutter) + 58px);}
  .fe-nav-links .fe-menu{padding-right:0;}
}

/* --- 10. Telephone : les cartes de service ------------------
   Deux essais ecartes. La ligne de faite complete : a trois cents
   points de large, dix sommets donnent une scie et non une
   montagne. La pente unique : plus sobre, mais elle retire de la
   surface en haut de carte, la ou le texte commence.

   Reste le rayon asymetrique. Un seul angle largement ouvert, en
   haut, alterne d une carte a l autre, les trois autres coupes
   franc. L oeil suit l epaule qui bascule d un cote puis de
   l autre et lit un versant, sans qu aucune montagne ne soit
   dessinee. Rien n est retire de la carte : la lisibilite ne paie
   aucun prix, ce qui n etait vrai d aucune des deux decoupes.

   L ecart entre l angle ouvert et les angles francs fait tout le
   travail. Adoucir les trois autres eteindrait le geste. */
@media (max-width:560px){
  .fe-bento{
    --fe-cr:clamp(26px,8vw,52px);
    gap:10px;background:none;border:0;border-radius:0;overflow:visible;
  }
  .fe-bento > .fe-cell{
    border-radius:var(--fe-cr) 0 0 0;
    transition:background var(--fe-dur-soft) var(--fe-ease-mist),
               border-radius var(--fe-dur-soft) var(--fe-ease-glacier);
  }
  .fe-bento > .fe-cell:nth-child(even){border-radius:0 var(--fe-cr) 0 0;}

  /* Deux plans alternes : sans eux les cartes se fondent les unes
     dans les autres des que le filet partage disparait. */
  .fe-bento > .fe-cell:not(.fe-cell--lead):nth-child(odd){background:#253544;}
  .fe-bento > .fe-cell:not(.fe-cell--lead):nth-child(even){background:#35495D;}
  .fe-bento > .fe-cell:hover{background:#3E5468;}
}

/* --- 11. La fin de page ne se coupe plus ---------------------
   La bande de contact est en nuit douce, le pied de page en bleu
   profond. Deux valeurs proches mais distinctes, collees sans
   transition : le raccord se lisait comme une image mal recadree,
   d autant plus que tout le reste de la page annonce ses ruptures
   par une crete.

   Le pied prend la meme valeur que la bande qui le precede. La fin
   de page devient une seule masse sombre, et le cone en haut du
   contact reste la seule articulation, ce qui etait l intention. */
footer.fe-dark{background:var(--fe-night);}

/* Aucune promotion de calque sur l en-tete ni sur la barre basse.
   Une transformation ou un will-change poses la creeraient un bloc
   conteneur : le panneau de menu, en position fixe et descendant de
   l en-tete, se calerait sur l en-tete au lieu de l ecran. Et une
   transformation sur la barre basse ecraserait celle qui la fait
   apparaitre au defilement sur grand ecran. Le remede coutait plus
   cher que le defaut. */

/* Le pied portait sa hauteur en style en ligne, ce qui empechait
   toute reprise en CSS. Elle passe dans une classe. */
.fe-foot-band{padding-block:64px;}

/* --- 10. Menu blanc a l etat initial de l en-tete -------------
   Avant le givre, l en-tete est pose sur la photo du hero : la
   neige cassee tirait vers le creme sur un ciel dore. Les liens
   prennent le blanc plein tant que la barre reste transparente,
   et retrouvent la neige des que le givre s installe. */
.fe-nav:not(.is-frost) .fe-nav-links a,
.fe-nav:not(.is-frost) .fe-menu a,
.fe-nav:not(.is-frost) .fe-brand{color:#FFFFFF;}
.fe-nav:not(.is-frost) .fe-menu a:hover,
.fe-nav:not(.is-frost) .fe-menu a:focus-visible{color:var(--fe-accent-light);}
.fe-nav:not(.is-frost) .fe-menu .fe-cta > a{color:var(--fe-glacier);}

/* --- 11. Le rayon du pied de page disparait ------------------
   La reprise du rayon du hero se lisait en bas comme un pave
   plus clair a bord franc derriere la premiere colonne, et non
   comme une lumiere rasante. Le pied redevient un aplat. */
.fe-foot::before{display:none;}