/* Poème de Fleurs — refonte Le Web du Coin */
@font-face{font-family:"Josefin";src:url(fonts/josefin-sans-latin-300-normal.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Josefin";src:url(fonts/josefin-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Josefin";src:url(fonts/josefin-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Script";src:url(fonts/mrs-saint-delafield-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}

:root{--blanc:#fcfcfc;--noir:#0b0b0b;--gris:#5c5c5c;--max:1180px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--blanc);color:var(--noir);font:300 17px/1.55 "Josefin",system-ui,sans-serif;letter-spacing:-.1px;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-weight:400;text-transform:uppercase;letter-spacing:-2px;line-height:.98}
h2{font-size:clamp(2.1rem,4.6vw,3.3rem)}
h3{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-1px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
.center{text-align:center}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;z-index:99;background:#fff;padding:8px}
.script{font-family:"Script",cursive;font-size:2.6rem;line-height:1;letter-spacing:0;text-transform:none}
.kicker{font-weight:400;text-transform:uppercase;letter-spacing:3px;font-size:.8rem;margin-bottom:14px}

/* Boutons */
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.btn{display:inline-block;font:400 .85rem/1 "Josefin",sans-serif;text-transform:uppercase;letter-spacing:1px;text-decoration:none;padding:15px 24px 13px;border:2px solid var(--noir);transition:background .2s,color .2s}
.btn-black{background:var(--noir);color:#fff;outline:1px solid var(--noir);outline-offset:2px}
.btn-black:hover{background:#fff;color:var(--noir)}
.btn-line{background:transparent}
.btn-line:hover{background:var(--noir);color:#fff}
.btn-white{background:#fff;color:var(--noir);border-color:#fff}
.btn-line-w{border-color:#fff;color:#fff}
.btn-line-w:hover,.btn-white:hover{background:#fff;color:var(--noir)}

/* Logo */
.logo{display:inline-flex;flex-direction:column;text-decoration:none;line-height:1;position:relative}
.logo-a{font-weight:400;text-transform:uppercase;letter-spacing:6px;font-size:1.25rem}
.logo-b{font-family:"Script";font-size:2rem;margin:-6px 0 -10px 34px}
.logo-w{color:#fff}

/* En-tête */
.top{position:sticky;top:0;z-index:50;background:rgba(252,252,252,.96);backdrop-filter:blur(6px)}
.top-in{display:flex;align-items:center;gap:30px;height:84px}
.nav{display:flex;gap:28px;list-style:none;margin-left:auto}
.nav a{text-decoration:none;font-weight:400;font-size:.95rem}
.nav a:hover{text-decoration:underline;text-underline-offset:5px}
.top-btns{display:flex;gap:12px}
.top-btns .btn{padding:12px 18px 10px}
.burger{display:none;margin-left:auto;background:none;border:0;width:44px;height:44px;cursor:pointer}
.burger span,.burger span::before,.burger span::after{display:block;width:26px;height:1.5px;background:var(--noir);position:relative;margin:auto}
.burger span::before,.burger span::after{content:"";position:absolute}
.burger span::before{top:-8px}.burger span::after{top:8px}
@media (max-width:960px){
  .burger{display:block}.top-btns{display:none}
  .nav{display:none;position:absolute;top:84px;left:0;right:0;flex-direction:column;gap:0;background:var(--blanc);border-bottom:1px solid #ddd}
  .nav.open{display:flex}.nav a{display:block;padding:16px 24px;border-top:1px solid #e6e6e6;text-transform:uppercase;letter-spacing:1px}
}

/* Héros */
.hero{padding:40px 0 110px}
.hero-in{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:end;min-height:calc(100vh - 160px)}
.hero h1{font-size:clamp(3.2rem,8vw,6.4rem);margin:8px 0 22px}
.hero-lead{max-width:40ch;font-size:1.05rem}
.hero-pics{position:relative;height:min(78vh,640px)}
.frame{position:relative}
.frame img{width:100%;height:100%;object-fit:cover}
.f-a{position:absolute;right:0;top:0;width:78%;height:62%}
.f-b{position:absolute;left:4%;bottom:0;width:46%;height:52%;outline:2px solid var(--noir);outline-offset:14px;background:#fff}
.sq{position:absolute;border:2px solid var(--noir);pointer-events:none}
.sq-hero{right:6%;bottom:6%;width:150px;height:150px;transform:rotate(-4deg)}
@media (max-width:860px){.hero-in{grid-template-columns:1fr;min-height:0}.hero-pics{height:480px;order:-1}.hero{padding:20px 0 50px}.atelier{padding:70px 0 90px}}

/* Cadres décalés (Pâtisson) */
.frame-out{padding:22px;border:2px solid var(--noir)}
.frame-out-w{padding:22px;border:2px solid #fff}

/* Atelier */
.atelier{padding:120px 0 140px}
.h-right{text-align:right;margin-left:auto;max-width:14ch}
.stagger{display:grid;grid-template-columns:1fr 1.55fr .9fr;grid-template-rows:auto auto;gap:40px 50px;margin-top:70px;align-items:start}
.s-left{grid-column:1;grid-row:1/3;align-self:center;max-width:300px;transform:rotate(-1.5deg)}
.s-left img{aspect-ratio:4/5;filter:grayscale(1) contrast(1.05)}
.s-left:hover img{filter:none}
.s-p1{grid-column:2;grid-row:1;font-size:1.12rem}
.s-right{grid-column:3;grid-row:1;max-width:220px;justify-self:end}
.s-right img{aspect-ratio:1}
.s-p2{grid-column:2/4;grid-row:2;font-size:1.12rem;max-width:56ch;margin-left:18%}
@media (max-width:860px){.stagger{grid-template-columns:1fr 1fr}.s-left{grid-column:1;grid-row:2}.s-p1{grid-column:1/3;grid-row:1}.s-right{grid-column:2;grid-row:2;align-self:center}.s-p2{grid-column:1/3;grid-row:3;margin-left:0}}

/* Sections noires */
.black{background:var(--noir);color:#fff;padding:110px 0}
.card{background:#fff;color:var(--noir);display:grid;grid-template-columns:1.1fr 1fr;gap:50px;padding:70px;align-items:center}
.h-sm{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-1px;margin-bottom:28px}
.savoir{list-style:none}
.savoir li{padding:12px 0;border-bottom:1px solid #e3e3e3}
.savoir b{display:block;font-weight:600;text-transform:uppercase;letter-spacing:.5px;font-size:.92rem}
.savoir span{color:var(--gris)}
.script-dark{margin-top:30px;transform:rotate(-2deg);font-size:2.4rem}
.card-pic{display:flex;justify-content:center}
.thick{border:22px solid var(--noir);padding:22px;background:#fff;max-width:380px}
.thick img{aspect-ratio:1;object-fit:cover}
@media (max-width:860px){.card{grid-template-columns:1fr;padding:40px 26px}}

/* Créations */
.creations{padding-top:40px}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.sec-head p{font-size:1.1rem;max-width:44ch;justify-self:end}
@media (max-width:760px){.sec-head{grid-template-columns:1fr}.sec-head p{justify-self:start}}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:50px 0 40px}
.filters button{font:400 .8rem/1 "Josefin",sans-serif;text-transform:uppercase;letter-spacing:1px;padding:12px 16px 10px;background:none;color:#fff;border:1.5px solid #555;cursor:pointer}
.filters button.on,.filters button:hover{border-color:#fff;background:#fff;color:var(--noir)}
.gallery{columns:3 280px;column-gap:28px}
.gallery figure{break-inside:avoid;margin-bottom:34px;position:relative;padding:14px;border:1.5px solid rgba(255,255,255,.25);transition:border-color .2s}
.gallery figure:hover{border-color:#fff}

.gallery figcaption{font-size:.85rem;text-transform:uppercase;letter-spacing:1px;margin-top:12px;color:#cfcfcf}
.gallery figure[hidden]{display:none}
.creations .center{margin-top:40px}

/* Événements */
.events{padding:130px 0 120px}
.h-xl{font-size:clamp(2.6rem,7vw,5.6rem)}
.lead{font-size:1.2rem;max-width:52ch;margin:26px 0 30px}
.ev{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:60px 0;border-top:1px solid #dcdcdc;position:relative}
.ev-rev .ev-txt{order:2}
.ev-txt p{font-size:1.15rem;margin:14px 0 16px}
.ev-txt ul{list-style:none}
.ev-txt li{padding:6px 0 6px 26px;position:relative}
.ev-txt li::before{content:"";position:absolute;left:0;top:14px;width:14px;height:1.5px;background:var(--noir)}
.ev-pic{max-width:380px;justify-self:center}
.ev-pic img{aspect-ratio:4/5}
.ev:nth-of-type(2) .ev-pic{transform:rotate(1.5deg)}
@media (max-width:760px){.ev{grid-template-columns:1fr;gap:30px}.ev-rev .ev-txt{order:0}}
.cta-line{border-top:1px solid #dcdcdc;padding-top:50px;text-align:center}
.cta-line .script{margin:0 0 10px}
.cta-line a{font-weight:600}

/* Contact */
.contact-in{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.infos{display:grid;grid-template-columns:auto 1fr;gap:18px 30px;margin-top:40px;font-size:1.05rem}
.infos dt{text-transform:uppercase;letter-spacing:2px;font-size:.78rem;padding-top:4px;color:#bdbdbd}
.infos a{text-decoration:none;font-weight:400}
.hours th{font-weight:400;text-align:left;padding-right:18px;white-space:nowrap;vertical-align:top}
.hours td{padding-bottom:6px}
.map iframe{display:block;width:100%;height:380px;border:0;filter:grayscale(1)}
@media (max-width:860px){.contact-in{grid-template-columns:1fr}}

/* Pied */
.foot{background:var(--noir);color:#bdbdbd;border-top:1px solid #222;padding:50px 0 90px;font-size:.9rem}
.foot-in{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:center}
.foot-r{text-align:right}

/* Bouton flottant (comme « Réservation » du Pâtisson) */
.float-btn{position:fixed;left:14px;bottom:14px;z-index:60;background:#fff;color:var(--noir);border:1.5px solid var(--noir);outline:1px solid #fff;padding:13px 22px 11px;font:400 .82rem/1 "Josefin",sans-serif;text-transform:uppercase;letter-spacing:1px;text-decoration:none}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ===== Effets de mouvement au défilement ===== */
.top{transition:box-shadow .3s}
.top-in{transition:height .35s ease}
.top.small{box-shadow:0 1px 0 #e5e5e5}
.top.small .top-in{height:66px}

/* Bandeau de texte qui glisse */
.band{overflow:hidden;padding:26px 0;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;background:var(--blanc)}
.band-in{white-space:nowrap;font-weight:400;text-transform:uppercase;letter-spacing:-2px;font-size:clamp(2.4rem,6vw,5rem);line-height:1;color:transparent;-webkit-text-stroke:1.2px var(--noir);will-change:transform}
.band-b{background:var(--noir);border-color:#222}
.band-b .band-in{-webkit-text-stroke-color:#fff}

/* Apparitions */
.js [data-r]{transition:opacity 1s ease,translate 1.1s cubic-bezier(.2,.7,.2,1),scale 1.1s cubic-bezier(.2,.7,.2,1),clip-path 1.3s cubic-bezier(.7,0,.2,1);transition-delay:var(--d,0s)}
.js [data-r].px{transition:opacity 1s ease,scale 1.1s cubic-bezier(.2,.7,.2,1),clip-path 1.3s cubic-bezier(.7,0,.2,1);transition-delay:var(--d,0s)}
.js [data-r="up"]{opacity:0;translate:0 50px}
.js [data-r="left"]{opacity:0;translate:-70px 0}
.js [data-r="right"]{opacity:0;translate:70px 0}
.js [data-r="zoom"]{opacity:0;scale:.92}
.js [data-r="fade"]{opacity:0}
.js [data-r="clip"]{clip-path:inset(100% 0 0 0)}
.js [data-r].in{opacity:1;translate:0 0;scale:1;clip-path:inset(0 0 0 0)}
/* Titres qui montent ligne par ligne */
.ln{display:block;overflow:hidden;padding:.14em 0 .06em;margin:-.14em 0 -.06em}
.ln>span{display:block;transition:translate 1.1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * .12s + var(--d,0s))}
.js .split .ln>span{translate:0 110%}
.js .split.in .ln>span{translate:0 0}
/* Zoom doux des photos au survol */
.gallery figure img,.ev-pic img{transition:scale .8s cubic-bezier(.2,.7,.2,1)}
.gallery figure{overflow:hidden}
.gallery figure:hover img{scale:1.05}
@media (prefers-reduced-motion:reduce){.js [data-r],.js .split .ln>span{opacity:1!important;translate:none!important;scale:none!important;clip-path:none!important;transition:none!important}}