/* ==========================================================
   L'Endroit — animations
   Tout est ici : pour revenir au site sans animations,
   il suffit de retirer ce fichier et js/animations.js de index.html.
   ========================================================== */
:root{--douce:cubic-bezier(.2,.7,.2,1)}

/* ----- 1. Fine barre rose de progression, tout en haut ----- */
.progression{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,var(--rose-vif),var(--framboise));transform-origin:0 50%;transform:scaleX(0)}

/* ----- 2. En-tête qui s'affine quand on descend ----- */
.tete{transition:box-shadow .35s,background .35s}
.tete .wrap{transition:height .35s var(--douce)}
.tete.defile{box-shadow:0 10px 30px -18px rgba(20,17,19,.35);background:rgba(251,247,243,.96)}
@media (min-width:861px){.tete.defile .wrap{height:64px}}

/* ----- 3. Accueil : le texte arrive ligne par ligne ----- */
.js .hero .entree{opacity:0;transform:translateY(22px);animation:entree .9s var(--douce) forwards;animation-delay:calc(.12s * var(--i,0) + .1s)}
@keyframes entree{to{opacity:1;transform:none}}
.js .hero h1 .ligne{display:block;overflow:hidden;padding-bottom:.08em}
.js .hero h1 .ligne > span{display:block;transform:translateY(105%);animation:monte 1s var(--douce) forwards;animation-delay:calc(.15s * var(--i,0) + .25s)}
@keyframes monte{to{transform:none}}
.js .badge{opacity:0;animation:pose .8s var(--douce) forwards 1.1s}
@keyframes pose{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
.scene .cadre svg{will-change:transform}

/* ----- 4. Petits mots en italique : un filet doré qui se dessine ----- */
.kicker{display:flex;align-items:center;gap:12px}
.insta .kicker{justify-content:center}
.kicker::before{content:"";width:28px;height:1px;background:var(--champagne);flex:none;transform-origin:0 50%}
.js .apparait .kicker::before,.js .kicker.apparait::before{transform:scaleX(0);transition:transform .9s var(--douce) .3s}
.js .visible .kicker::before,.js .kicker.visible::before{transform:none}

/* ----- 5. Mots en italique des titres : soulignés au pinceau ----- */
.h2 i,.tira h2 i{position:relative;display:inline-block}
.tira h2 i{display:block;width:max-content;max-width:100%}
.h2 i::after,.tira h2 i::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.06em;border-radius:99px;
  background:currentColor;opacity:.3;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--douce) .45s}
.js .visible .h2 i::after,.js .h2.visible i::after,.js .visible h2 i::after{transform:none}
html:not(.js) .h2 i::after,html:not(.js) .tira h2 i::after{transform:none}

/* ----- 6. Apparitions en cascade : les cartes arrivent une à une ----- */
.js .apparait{transition-delay:calc(.09s * var(--i,0))}
.js .cascade > *{opacity:0;transform:translateY(24px);transition:opacity .8s var(--douce),transform .8s var(--douce);transition-delay:calc(.1s * var(--i,0) + .1s)}
.js .cascade.visible > *{opacity:1;transform:none}

/* ----- 7. Photos : dévoilées comme un rideau qui s'ouvre ----- */
.js .rideau{clip-path:inset(0 0 100% 0 round 18px);transition:clip-path 1.2s var(--douce)}
.js .rideau.arche{clip-path:inset(0 0 100% 0 round 400px 400px 18px 18px)}
.js .rideau.visible,.js .visible .rideau,.js .rideau.arche.visible,.js .visible .rideau.arche{clip-path:inset(0)}
.photo > img{transform:scale(1.08);transition:transform 1.6s var(--douce)}
.visible .photo > img,.photo.visible > img,html:not(.js) .photo > img{transform:none}

/* ----- 8. Ardoise : les lignes s'écrivent à la craie ----- */
.ardoise .slate path{stroke-dasharray:180;stroke-dashoffset:180;transition:stroke-dashoffset 1.1s var(--douce)}
.ardoise.visible .slate path{stroke-dashoffset:0}
.ardoise.visible .slate path:nth-child(2){transition-delay:.35s}
.ardoise.visible .slate path:nth-child(3){transition-delay:.7s}
.ardoise.visible .slate path:nth-child(4){transition-delay:1.05s}
.ardoise .slate text{opacity:0;transition:opacity 1s .2s}
.ardoise.visible .slate text{opacity:1}

/* ----- 9. Bandeau défilant entre les sections ----- */
.defilant{background:var(--nuit);color:var(--rose);overflow:hidden;padding:20px 0;border-top:1px solid #2E272B}
.defilant .piste{display:flex;width:max-content;animation:file 48s linear infinite}
.defilant:hover .piste{animation-play-state:paused}
.defilant .piste span{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.6vw,2rem);white-space:nowrap;padding:0 28px;display:flex;align-items:center;gap:56px}
.defilant .piste span::after{content:"✦";font-style:normal;font-size:.7em;color:var(--champagne)}
@keyframes file{to{transform:translateX(-50%)}}

/* ----- 10. Cartes et boutons : réactions au survol ----- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.b-noir::before,.b-rose::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--douce)}
.b-noir:hover::before,.b-rose:hover::before{transform:translateX(120%)}
/* « translate » (et non « transform ») pour ne pas gêner les apparitions */
.js .parfums .parfum,.js .moments .moment,.js .offres .offre{
  transition:opacity .8s var(--douce),transform .8s var(--douce),translate .45s var(--douce),box-shadow .45s;
  transition-delay:calc(.09s * var(--i,0)),calc(.09s * var(--i,0)),0s,0s}
.js .trois.cascade > *{
  transition:opacity .8s var(--douce),transform .8s var(--douce),translate .45s var(--douce),box-shadow .45s;
  transition-delay:calc(.1s * var(--i,0) + .1s),calc(.1s * var(--i,0) + .1s),0s,0s}
.parfum svg,.moment svg{transition:transform .5s var(--douce)}
@media (hover:hover){
  .offres .offre:hover{translate:0 -5px;box-shadow:0 26px 50px -26px rgba(0,0,0,.8)}
}
.pilier .ico{transition:background .35s,transform .35s var(--douce)}
.pilier:hover .ico{background:var(--rose);transform:scale(1.06)}

/* ----- 11. Bouton « retour en haut » (ordinateur) ----- */
.haut-page{position:fixed;right:24px;bottom:24px;z-index:45;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  background:var(--nuit);color:var(--rose);display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(20,17,19,.55);
  opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .35s,transform .35s var(--douce),background .2s}
.haut-page svg{width:20px;height:20px}
.haut-page.montre{opacity:1;transform:none;pointer-events:auto}
.haut-page:hover{background:#2E272B}

/* ----- 12. Menu téléphone : panneau plein écran élégant ----- */
.burger svg path{transition:transform .35s var(--douce),opacity .25s;transform-origin:12px 12px}
.burger[aria-expanded="true"] svg path:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] svg path:nth-child(2){opacity:0}
.burger[aria-expanded="true"] svg path:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media (max-width:860px){
  .haut-page{display:none}
  /* le flou de l'en-tête empêcherait le panneau de couvrir l'écran */
  .tete,.tete.defile{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--creme)}
  .nav,.nav.ouvert{display:flex;position:fixed;inset:var(--en-tete) 0 0 0;flex-direction:column;justify-content:center;align-items:center;gap:6px;
    background:var(--nuit);padding:24px 24px 120px;border:0;box-shadow:none;margin:0;
    clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .6s var(--douce),visibility 0s .6s}
  .nav::before{content:"";position:absolute;left:0;right:0;bottom:0;height:24px;background:var(--motif) 0 0/24px 24px}
  .nav.ouvert{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .6s var(--douce),visibility 0s}
  .nav a,.nav.ouvert a{font-family:var(--serif);font-size:2.2rem;line-height:1.1;color:var(--creme);border:0;padding:10px 0;
    opacity:0;transform:translateY(18px);transition:opacity .5s,transform .6s var(--douce),color .2s}
  .nav.ouvert a{opacity:1;transform:none;transition-delay:calc(.06s * var(--i,0) + .2s)}
  .nav a::after{background:var(--rose)}
  .nav a:hover,.nav a[aria-current="true"]{color:var(--rose)}
  body.menu-ouvert{overflow:hidden}
  body.menu-ouvert .barre{opacity:0;pointer-events:none}
  .barre{transition:opacity .3s}
  .defilant{padding:14px 0}
}

/* ----- Respect du réglage « réduire les animations » ----- */
@media (prefers-reduced-motion:reduce){
  .js .hero .entree,.js .hero h1 .ligne > span,.js .badge,.js .cascade > *{opacity:1!important;transform:none!important}
  .js .rideau{clip-path:none!important}
  .photo > img{transform:none!important}
  .ardoise .slate path{stroke-dashoffset:0!important}
  .ardoise .slate text{opacity:1!important}
  .kicker::before,.h2 i::after,.tira h2 i::after{transform:none!important}
  .defilant .piste{animation:none!important}
  .progression{display:none}
}