/* Effets du site : tout ce fichier ne s'applique qu'une fois wow.js lancé (classe .wow), sauf le bandeau et les grands titres de fond. */
html.wow{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:clip}

/* Écran d'ouverture */
#intro{position:fixed;inset:0;z-index:60;display:grid;place-items:center;align-content:center;gap:4px;background:var(--papier);color:var(--rose);cursor:pointer;will-change:clip-path}
#intro img{width:clamp(120px,17vw,210px);height:auto}
#intro p{font:700 clamp(4rem,13vw,10rem)/1 var(--main);margin:0}
#intro small{font:700 .8125rem var(--texte);letter-spacing:.24em;text-transform:uppercase;color:var(--encre);margin-top:14px}

/* Accueil */
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s ease}
.hero canvas.on{opacity:1}
.hero::after{pointer-events:none}
.hero-in{grid-template-columns:minmax(0,1fr) minmax(190px,270px)}
.accroche{font-size:clamp(3.1rem,8.2vw,7.4rem);line-height:.94;position:relative;z-index:3;margin-right:-110px;text-shadow:0 2px 24px rgba(255,250,250,.7);white-space:normal}
.accroche span.ligne{display:block}
.ch{display:inline-block;will-change:transform}
.mot{display:inline-block;white-space:nowrap}

/* Bandeau qui défile */
.bandeau{background:var(--poudre);color:#7a3c4c;overflow:hidden;padding-block:12px;white-space:nowrap;position:relative;z-index:3}
.bandeau-in{display:inline-flex;will-change:transform}
.bandeau span{font:700 clamp(1.7rem,3vw,2.5rem)/1 var(--main);padding-inline:22px}
.bandeau span::after{content:"✿";padding-left:44px;font-size:.7em;color:#fff}

/* Titres */
.m{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.m>i{display:inline-block;font-style:normal;will-change:transform}

/* Grands mots de fond */
.geant{position:absolute;z-index:0;left:0;white-space:nowrap;font:400 clamp(6rem,19vw,17rem)/1 var(--titre);color:transparent;-webkit-text-stroke:1px rgba(166,84,103,.22);pointer-events:none;user-select:none}

/* Parcours */
.frise{position:relative;padding-left:30px}
.tige{position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--ligne)}
.tige i{position:absolute;inset:0;background:#e2a9b4;transform-origin:top;transform:scaleY(0)}
.tige b{position:absolute;left:50%;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#e2a9b4;box-shadow:0 0 0 5px rgba(226,169,180,.3)}
.annee{position:absolute;right:max(16px,calc(50vw - 560px));top:clamp(36px,6vw,70px);font:400 clamp(4.5rem,13vw,11rem)/1 var(--titre);color:rgba(166,84,103,.11);font-variant-numeric:tabular-nums;z-index:0;pointer-events:none}
html.pin #parcours{min-height:calc(100vh - var(--nav));display:grid;align-content:center;padding-block:28px}
html.pin #parcours .parcours-photo{max-height:calc(100vh - 240px);aspect-ratio:3/4;width:auto;justify-self:start}
html.pin #parcours .parcours-photo img{height:100%;aspect-ratio:auto}

/* Apports : liste géante, l'image suit la souris */
.apport{padding-block:12px;border-top:1px solid var(--ligne);transition:padding-left .35s var(--sortie)}
.apport h3{font-size:clamp(1.8rem,3.6vw,3rem);transition:color .2s ease}
.apports{gap:0}
@media (hover:hover) and (pointer:fine){.apport:hover{padding-left:18px}.apport:hover h3{color:var(--rose)}}
.apercu{position:fixed;left:0;top:0;z-index:30;width:260px;height:330px;margin:-165px 0 0 -130px;background:var(--blanc);padding:8px;box-shadow:0 22px 50px -18px rgba(120,80,90,.45);pointer-events:none;opacity:0;scale:.8;visibility:hidden}
.apercu img{width:100%;height:100%;object-fit:cover}

/* Moodboard en long mur, sur grand écran */
html.pin #inspirations{height:calc(100vh - var(--nav));padding-block:22px;display:flex;flex-direction:column}
html.pin #inspirations>.page{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;max-width:none;margin:0;padding-left:max(16px,calc(50vw - 560px))}
html.pin #inspirations .tete{margin-bottom:18px}
html.pin .mur{flex:1;min-height:0;column-count:auto;display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,minmax(0,1fr));grid-auto-columns:max-content;gap:22px 30px;width:max-content;will-change:transform;padding-right:max(16px,calc(50vw - 560px))}
html.pin .mur>*{margin:0;min-height:0}
html.pin .mur .photo{height:100%;aspect-ratio:var(--a,5/6);display:flex;flex-direction:column}
html.pin .mur .photo>img,html.pin .mur .diapo{flex:1;min-height:0;height:auto;aspect-ratio:auto}
html.pin .mur .large{--a:5/4}
html.pin .mur .haute{grid-row:1/3;--a:3/4}
html.pin .mur .note{width:250px;align-self:center}
html.pin .mur .nuancier{grid-row:1/3;width:520px;align-self:center;margin:0}
.mur .nuancier{column-span:all}
.mur .matieres{margin-left:0}

/* Immersion et fin */
#idees .geant{top:clamp(14px,3vw,34px)}
#merci .geant{bottom:-.14em}
html.wow #merci{margin-top:-1px}

/* Couches fixes */
#grain{position:fixed;inset:-120px;z-index:44;pointer-events:none;opacity:.05;mix-blend-mode:multiply;animation:grain 1s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-40px,30px)}40%{transform:translate(50px,-20px)}60%{transform:translate(-20px,-50px)}80%{transform:translate(35px,45px)}100%{transform:translate(0,0)}}
#fil{position:fixed;top:calc(env(safe-area-inset-top,0px) + var(--nav) - 2px);left:0;width:100%;height:2px;z-index:21;background:#e2a9b4;transform:scaleX(0);transform-origin:left}
html.curseur,html.curseur a,html.curseur summary{cursor:none}
#cur,#cur-a{position:fixed;left:0;top:0;z-index:70;pointer-events:none;border-radius:50%}
#cur{width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23efb9c4' stroke='%23c77f90' stroke-width='.6'%3E%3Cellipse cx='12' cy='6' rx='3.6' ry='4.6'/%3E%3Cellipse cx='12' cy='6' rx='3.6' ry='4.6' transform='rotate(72 12 12)'/%3E%3Cellipse cx='12' cy='6' rx='3.6' ry='4.6' transform='rotate(144 12 12)'/%3E%3Cellipse cx='12' cy='6' rx='3.6' ry='4.6' transform='rotate(216 12 12)'/%3E%3Cellipse cx='12' cy='6' rx='3.6' ry='4.6' transform='rotate(288 12 12)'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23f3d78f'/%3E%3C/svg%3E") center/contain no-repeat}
#cur-a{width:42px;height:42px;margin:-21px 0 0 -21px;border:1.5px solid rgba(199,127,144,.55);transition:scale .25s var(--sortie),background-color .25s ease}
#cur-a.grand{scale:1.7;background:rgba(242,211,216,.35)}

@media (max-width:900px){
  .accroche{margin-right:0}
  .hero .photo{margin-top:-30px}
  .annee{top:18px}
}

/* Le curseur fleur tourne doucement sur les éléments cliquables */
#cur{transition:rotate .5s var(--sortie)}
#cur.tourne{rotate:72deg}
html.pin .mur .photo figcaption{flex:none}