/* Pied commun à toutes les pages : le bas de la montagne remonte avec le défilement, une nappe de nuages en jonction,
   puis le contenu posé sur une brume de nuages. Balisage posé par outils/seo/pied.mjs, mesures par assets/pied.js. */
.pied{--p:1;position:relative;isolation:isolate;overflow:hidden;margin-top:0;color:var(--encre);background:transparent}
.pied :focus-visible{outline:2px solid var(--teal);outline-offset:2px}

.pd-rdv{position:relative;z-index:4;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px calc(var(--m) * 1.5);align-items:end;padding:calc(var(--m) * 1.25) var(--cote) 0}
.pd-rdv h2{max-width:11em;margin:0;font-size:var(--t-h2,clamp(40px,5.6vw,88px));font-weight:500;line-height:1;letter-spacing:-.05em;text-wrap:balance}
.pd-rdv-a{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.pd-rdv-a p{margin:0;font-size:19px;line-height:1.45;color:var(--gris)}
.pd-rdv .btn{display:inline-flex;align-items:center;justify-content:flex-start;gap:12px;min-height:56px;padding:0 24px;border:0;border-radius:0;background:var(--encre);color:#fff;font-size:16px;font-weight:500;line-height:1.5;text-decoration:none;white-space:nowrap}
.pd-rdv .btn:hover{background:#000}
.pd-rdv .chev{display:inline-block;flex:none;width:7px;height:10px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 10'%3E%3Cpath d='M1.25 1.25L5 5L1.25 8.75' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 10'%3E%3Cpath d='M1.25 1.25L5 5L1.25 8.75' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E") center/100% 100% no-repeat;transition:transform .25s var(--var(--ease),cubic-bezier(.22,1,.36,1))}
.pd-rdv .btn:hover .chev{transform:translateX(3px)}
.pd-rdv+.pz-vue{margin-top:calc(var(--m) * -1)}

.pz-vue{--sol:18%;position:relative;z-index:1;height:clamp(400px,46vw,700px);overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%);mask-image:linear-gradient(180deg,transparent 0,#000 26%)}
.pz-vue img{display:block}
.pz-image{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%);mask-image:linear-gradient(180deg,transparent 0,#000 24%);position:absolute;left:0;top:0;width:100%;max-width:none;height:122%;object-fit:cover;object-position:56% 0;will-change:transform;transform:translate3d(0,calc((1 - var(--p)) * 14%),0)}
.pz-nuage{position:absolute;left:-8vw;width:116vw;will-change:transform}
.pz-nuage img{width:100%;height:auto}
.pz-nuage.arr{bottom:-9vw;opacity:.75;transform:translate3d(calc((1 - var(--p)) * -3vw),calc((1 - var(--p)) * 8vw),0)}
.pz-nuage.arr img{transform:scaleX(-1);filter:blur(6px)}
.pz-nuage.av{bottom:-17vw;transform:translate3d(calc((1 - var(--p)) * 3vw),calc((1 - var(--p)) * 14vw),0)}
.pz-nuage.av img{filter:blur(3px)}
.pz-vue::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--sol);background:var(--papier) var(--fond-fixe,none);-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.86) 55%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.86) 55%,#000 100%)}
.pz-fumee{position:absolute;left:0;right:0;bottom:0;top:clamp(260px,32vw,500px);z-index:2;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%),radial-gradient(62% 56% at 50% 50%,transparent 50%,#000 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 24%),radial-gradient(62% 56% at 50% 50%,transparent 50%,#000 100%);mask-composite:intersect}
.pz-fumee img{position:absolute;display:block;width:96vw;max-width:none;height:auto;filter:blur(10px);will-change:transform}
.pz-fumee .f1{left:-46vw;top:6%;transform:translate3d(calc((1 - var(--p)) * -4vw),0,0) scaleY(-1)}
.pz-fumee .f2{right:-48vw;top:12%;transform:translate3d(calc((1 - var(--p)) * 4vw),0,0) scale(-1,-1)}
.pz-fumee .f3{left:-10vw;width:120vw;bottom:-20vw;transform:translate3d(0,calc((1 - var(--p)) * 6vw),0)}
/* Avec une souris, assets/pied.js découpe les deux nuages de la montagne en tuiles qui s'écartent sur son passage, comme au premier écran de l'accueil :
   chaque tuile est pleine en son milieu et se fond sur ses bords, sa voisine la recouvre de moitié. Les 40px de marge gardent le bord flouté. */
.pz-tuile{display:none;position:absolute;top:-40px;height:calc(100% + 80px);overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 26%,#000 74%,transparent);mask:linear-gradient(90deg,transparent,#000 26%,#000 74%,transparent);will-change:transform,opacity}
.pz-tuile img{position:absolute;top:40px;max-width:none;height:auto}
.joue{aspect-ratio:2200/1238}
.joue>picture{display:none}
.joue>.pz-tuile{display:block}

.pd-contenu{position:relative;z-index:3;margin-top:calc(var(--cell,120px) * -.5);padding:0 var(--cell,120px) 24px}
.pd-haut{display:grid;grid-template-columns:repeat(var(--n,12),1fr);column-gap:0;padding-bottom:48px;border-bottom:1px solid rgba(24,24,27,.16)}
.pd-marque{grid-column:1/3;display:flex;flex-direction:column;align-items:flex-start}
.pd-logo{display:inline-flex;width:96px;text-decoration:none;color:var(--encre)}
.pd-logo svg{display:block;width:100%;height:auto}
.pd-remonte{display:inline-flex;align-items:center;min-height:48px;margin-top:20px;font-size:14px;font-weight:600;color:var(--encre);text-decoration:none}
.pd-remonte-t{padding-bottom:3px;border-bottom:1px solid rgba(24,24,27,.3);transition:border-color .15s var(--ease)}
.pd-remonte:hover .pd-remonte-t{border-color:var(--rouge)}
.pd-nav{grid-column:3/-1;display:grid;grid-template-columns:repeat(var(--nn,16),1fr);gap:0}
.pd-nav>div{padding-right:20px}
.pd-nav h2{margin:0 0 6px;font-size:14px;font-weight:600;letter-spacing:0;line-height:20px;color:var(--encre)}
.pd-nav ul{list-style:none;margin:0;padding:0}
.pd-nav a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:12px 0;font-size:15px;line-height:20px;color:var(--gris);text-decoration:none;transition:color .15s var(--ease)}
.pd-nav a:hover{color:var(--encre);text-decoration:underline;text-decoration-color:var(--teal);text-underline-offset:4px}
.pd-nav a[aria-current="page"]{color:var(--encre)}
.pd-milieu{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 32px;padding:28px 0;font-size:14px;line-height:20px}
.pd-milieu p{margin:0}
.pd-milieu b{font-weight:600}
.pd-milieu span{color:var(--gris)}
.pd-milieu a{color:inherit}
.pd-legal{display:flex;flex-wrap:wrap;align-items:center;gap:0 24px;border-top:1px solid rgba(24,24,27,.16);padding-top:4px;font-size:13px;color:var(--gris)}
.pd-legal span,.pd-legal a{display:inline-flex;align-items:center;min-height:44px}
.pd-legal a{color:var(--gris);text-decoration:none}
.pd-legal a:hover{color:var(--encre);text-decoration:underline;text-underline-offset:4px}

@media (max-width:1100px){
  .pd-rdv{grid-template-columns:1fr}
  .pd-haut{gap:36px 0}
  .pd-marque,.pd-nav{grid-column:1/-1}
}
@media (max-width:760px){
  .pd-rdv{padding:56px 16px 16px;gap:24px}
  .pd-rdv-a p{font-size:17px}
  .pd-rdv-a .btn{align-self:stretch;justify-content:center}
  .pd-rdv+.pz-vue{margin-top:0}
  .pz-vue{--sol:20%;height:min(112vw,500px)}
  .pz-image{top:-20%;object-position:64% 0}
  .pz-nuage{left:-70vw;width:240vw}
  .pz-nuage.arr{bottom:4vw}
  .pz-nuage.av{bottom:-16vw}
  .pz-fumee{top:min(76vw,340px);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%),linear-gradient(90deg,#000 0,transparent 16%,transparent 84%,#000 100%),linear-gradient(0deg,#000 0,transparent 18%);-webkit-mask-composite:source-in,source-over;mask-image:linear-gradient(180deg,transparent 0,#000 12%),linear-gradient(90deg,#000 0,transparent 16%,transparent 84%,#000 100%),linear-gradient(0deg,#000 0,transparent 18%);mask-composite:intersect,add}
  .pz-fumee img{width:220vw;filter:blur(10px)}
  .pz-fumee .f1{left:-180vw;top:4%}
  .pz-fumee .f2{right:-180vw;top:36%}
  .pz-fumee .f3{left:-60vw;width:220vw;bottom:-40vw}
  .pd-contenu{margin-top:calc(var(--mod,48px) * -1);padding:0 16px 12px}
  .pd-logo{width:80px}
  .pd-remonte{margin-top:8px}
  .pd-haut{gap:24px;padding-bottom:28px}
  .pd-nav{grid-template-columns:1fr 1fr;gap:32px 16px}
  .pd-nav>div{grid-column:auto!important;padding-right:0}
  .pd-nav>div:first-child,.pd-nav>div:last-child{grid-column:1/-1!important}
  .pd-nav a,.pd-milieu{font-size:16px}
  .pd-milieu{flex-direction:column;align-items:flex-start;gap:8px;padding:20px 0}
  .pd-legal{gap:0 20px}
}
@media (max-width:760px),(hover:none) and (pointer:coarse){
  .pd-nav a:active,.pd-legal a:active,.pd-remonte:active{opacity:.6;transition-duration:0s}
}
@media (hover:none){
  .pd-nav a:hover,.pd-legal a:hover{color:var(--gris);text-decoration:none}
  .pd-remonte:hover .pd-remonte-t{border-color:rgba(24,24,27,.3)}
}
