@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/fraunces.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url(../fonts/dmsans.woff2) format("woff2")}
/* LornArt Créations — feuille de style
   Socle = mobile. Le bureau (>= 900px) reprend la maquette validée à l'échelle,
   via l'unité --u (1 px de la maquette 1024 px). */
:root{
  --jaune:#F0B32F;
  --jaune-btn:#F2B62C;
  --jaune-bloc:#EFB436;
  --encre:#1B1815;
  --texte:#2A2622;
  --gris:#5E5750;
  --creme:#FAF4ED;
  --creme-2:#F6F0E9;
  --creme-3:#ECE3D9;
  --filet:#E2DCD5;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sb:0px;
  --u:1px;
  --max:1600px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;background:var(--creme);color:var(--texte);font-family:var(--sans);font-size:1rem;line-height:1.55;-webkit-font-smoothing:antialiased}
img,video,canvas{max-width:100%;height:auto;display:block}
iframe{max-width:100%}
a{color:inherit}
.hero h1,.sec-title,.card h3,.edito h2,.page-head h1,.prose h2,.steps strong,.faq summary,.mobile-menu a,.search-ov input,.form h2,.f-title{font-weight:500 !important;font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0}
button{font:inherit}
:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--encre);color:#fff;padding:10px 14px;z-index:100}
.skip:focus{left:10px;top:10px}
[id]{scroll-margin-top:80px}

/* ---------- En-tête ---------- */
.site-header{position:sticky;top:0;z-index:40;background:linear-gradient(90deg,var(--creme-2) 0%,#F1E9E0 45%,var(--creme-3) 100%);border-bottom:1px solid rgba(0,0,0,.03)}
.header-in{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;min-height:64px}
.logo{display:block;flex:0 0 auto;line-height:0}
.logo img{width:58px;height:auto}
.nav{display:none}
.tools{display:flex;align-items:center;gap:4px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:0;background:none;color:var(--encre);cursor:pointer;text-decoration:none;position:relative}
.icon-btn svg{width:22px;height:22px}
.burger span{display:block;width:22px;height:1.6px;background:var(--encre);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:1.6px;background:var(--encre)}
.burger span::before{top:-7px}.burger span::after{top:7px}
.mobile-menu{position:fixed;inset:64px 0 0 0;background:var(--creme);z-index:39;padding:18px 24px 40px;overflow:auto;overscroll-behavior:contain;transform:translateX(100%);transition:transform .3s ease;visibility:hidden}
.mobile-menu.open{transform:none;visibility:visible}
.mobile-menu a{display:block;padding:14px 0;border-bottom:1px solid var(--filet);text-decoration:none;font-family:var(--serif);font-size:1.45rem;color:var(--encre)}
.mobile-menu a[aria-current="page"]{color:#B07D12}

/* ---------- Héro ---------- */
.hero{position:relative;background:var(--creme-2);overflow:hidden}
.hero-media{order:2}
.hero-media img{width:100%;aspect-ratio:724/480;object-fit:cover;object-position:right center}
.hero-text{padding:40px 22px 34px;position:relative}
.kicker{margin:0 0 18px;font-family:var(--sans);font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;color:var(--encre);font-weight:500}
.hero h1{margin:0;font-family:var(--serif);font-weight:400;color:var(--encre);font-size:2.6rem;line-height:1.04;letter-spacing:-.005em}
.rule{display:block;width:44px;height:2px;background:var(--jaune);margin:24px 0 22px;border:0}
.rule.dark{background:#2A2216;height:1.5px}
.hero-sub{margin:0 0 26px;font-size:1.02rem;line-height:1.5;color:var(--texte)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:48px;padding:0 22px;font-family:var(--sans);font-size:.82rem;font-weight:500;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.btn svg{width:18px;height:10px;flex:0 0 auto;transition:transform .2s}
.btn:hover svg{transform:translateX(4px)}
.btn-jaune{background:var(--jaune-btn);color:var(--encre);border:0;border-radius:2px}
.btn-jaune:hover{background:#E6A817}
.btn-blanc{background:#fff;color:var(--encre);border:1px solid var(--encre);border-radius:2px}
.btn-blanc:hover{background:var(--encre);color:#fff}

/* ---------- Nos créations ---------- */
.creations{background:var(--creme);padding:44px 20px 52px}
.creations-in{max-width:var(--max);margin:0 auto}
.sec-title{display:flex;align-items:center;gap:20px;margin:0 0 22px;font-family:var(--serif);font-weight:400;color:var(--encre);font-size:2rem;line-height:1.1}
.sec-title::after{content:"";display:block;width:64px;height:1.5px;background:var(--jaune)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:18px 12px}
.card{text-decoration:none;color:inherit;display:block;min-width:0}
.card-img{overflow:hidden;background:#eee6dc}
.card-img img{width:100%;aspect-ratio:227/233;object-fit:cover;transition:transform .6s ease}
.card:hover .card-img img{transform:scale(1.04)}
.card h3{margin:12px 0 2px;font-family:var(--serif);font-weight:400;font-size:1.12rem;color:var(--encre);line-height:1.2}
.card p{margin:0;font-size:.8rem;color:var(--texte);line-height:1.35}

/* ---------- Bloc éditorial ---------- */
.edito{display:flex;flex-direction:column;background:var(--jaune-bloc)}
.edito-bg{display:none}
.edito-text{background:var(--jaune-bloc);padding:44px 22px 40px}
.edito h2{margin:0;font-family:var(--serif);font-weight:400;color:var(--encre);font-size:2.1rem;line-height:1.08}
.edito p{margin:0 0 26px;font-size:1.02rem;line-height:1.5;color:var(--texte)}
.edito-photo img{width:100%;aspect-ratio:612/349;object-fit:cover}

/* ---------- Pied de page ---------- */
.site-footer{background:var(--creme);padding:44px 22px 26px;color:var(--texte)}
.footer-in{max-width:var(--max);margin:0 auto}
.f-cols{display:flex;flex-wrap:wrap;gap:28px 40px}
.f-brand{flex:1 1 100%}
.f-brand img{width:96px}
.f-brand p{margin:14px 0 0;font-size:.9rem;line-height:1.55}
.f-col{flex:1 1 140px;min-width:0}
.f-col ul{list-style:none;margin:0;padding:0}
.f-col li{margin:0}
.f-col a{display:inline-block;padding:7px 0;text-decoration:none;font-size:.92rem}
.f-col a:hover{color:#9A6C0C}
.f-social{flex:1 1 100%}
.f-social h4{margin:0 0 12px;font-size:.92rem;font-weight:700;color:var(--encre)}
.socials{display:flex;gap:6px;margin-left:-12px}
.socials a{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;color:var(--encre)}
.socials svg{width:20px;height:20px}
.f-bottom{border-top:1px solid var(--filet);margin-top:34px;padding-top:20px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:.78rem;color:var(--gris)}
.f-bottom a{text-decoration:none}
.f-legal{display:flex;flex-wrap:wrap;gap:4px 16px}

/* ---------- Pages intérieures ---------- */
.page-head{background:var(--creme-2);padding:40px 22px 34px}
.page-head .in{max-width:1120px;margin:0 auto}
.page-head h1{margin:0;font-family:var(--serif);font-weight:400;color:var(--encre);font-size:2.4rem;line-height:1.06}
.page-head p{margin:14px 0 0;max-width:620px;font-size:1.02rem}
.page-body{padding:40px 22px 64px}
.page-body .in{max-width:1120px;margin:0 auto}
.prose{max-width:720px}
.prose h2{font-family:var(--serif);font-weight:400;color:var(--encre);font-size:1.6rem;margin:36px 0 10px;line-height:1.15}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{font-size:1rem;line-height:1.65}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.filters button{min-height:44px;padding:0 18px;border:1px solid var(--encre);background:transparent;border-radius:2px;cursor:pointer;font-size:.85rem;color:var(--encre)}
.filters button[aria-pressed="true"]{background:var(--encre);color:#fff}
.note{background:#fff;border-left:3px solid var(--jaune);padding:18px 20px;margin:30px 0 0;font-size:.98rem;max-width:760px}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:32px;align-items:start}
.split > *{min-width:0}
.split img{width:100%;aspect-ratio:4/3;object-fit:cover}
.steps{list-style:none;padding:0;margin:20px 0 0;counter-reset:s}
.steps li{padding:12px 0 12px 0;border-bottom:1px solid var(--filet)}
.steps strong{font-family:var(--serif);font-weight:400;font-size:1.2rem;color:var(--encre);display:block}
form.form{display:grid;gap:14px;max-width:640px}
.form label{display:block;font-size:.85rem;font-weight:500;margin-bottom:6px;color:var(--encre)}
.form input,.form select,.form textarea{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1px solid #CFC6BB;background:#fff;border-radius:2px;color:var(--encre)}
.form textarea{min-height:140px;resize:vertical}
.form .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:14px}
.form .consent{display:flex;gap:10px;align-items:flex-start;font-size:.85rem}
.form .consent input{width:20px;height:20px;flex:0 0 auto;margin-top:2px}
.form .hp{position:absolute;left:-5000px}
.form-msg{font-size:.95rem;min-height:1.4em}
.faq details{border-bottom:1px solid var(--filet);padding:6px 0}
.faq summary{cursor:pointer;padding:12px 0;font-family:var(--serif);font-size:1.15rem;color:var(--encre)}

/* recherche */
.search-ov{position:fixed;inset:0;background:rgba(250,244,237,.98);z-index:60;display:none;padding:90px 22px 40px;overflow:auto}
.search-ov.open{display:block}
.search-ov .in{max-width:720px;margin:0 auto}
.search-ov input{width:100%;font-size:22px;font-family:var(--serif);padding:10px 0;border:0;border-bottom:1.5px solid var(--encre);background:transparent;color:var(--encre)}
.search-ov input:focus{outline:none}
.search-ov ul{list-style:none;padding:0;margin:20px 0 0}
.search-ov li a{display:block;padding:14px 0;border-bottom:1px solid var(--filet);text-decoration:none}
.search-ov li a span{display:block;font-size:.85rem;color:var(--gris)}
.search-close{position:absolute;top:18px;right:18px}

/* apparition douce */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.reveal.in-view{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.card-img img{transition:none}}

@media (min-width:600px){
  .hero h1{font-size:3.2rem}
  .f-brand{flex:1 1 200px}
  .f-social{flex:1 1 180px}
}

/* =================== BUREAU : reproduction de la maquette =================== */
@media (min-width:700px){
  :root{--u:calc(min(100vw - var(--sb), var(--max)) / 1024)}
  [id]{scroll-margin-top:calc(80 * var(--u))}
  .header-in{height:calc(75 * var(--u));min-height:0;padding:0 calc(52 * var(--u)) 0 calc(52 * var(--u));gap:0}
  .logo img{width:calc(68 * var(--u));min-width:56px;margin-top:calc(2 * var(--u))}
  .nav{display:flex;align-items:center;margin-left:calc(80 * var(--u));margin-right:auto}
  .nav a{position:relative;display:inline-flex;align-items:center;height:calc(75 * var(--u));padding-top:calc(8 * var(--u));margin-right:calc(22.5 * var(--u));text-decoration:none;font-size:calc(10 * var(--u));color:var(--texte);white-space:nowrap}
  .nav a:hover{color:var(--encre)}
  .nav a[aria-current="page"]{color:var(--encre);font-weight:700}
  .nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:calc(16 * var(--u));height:calc(3 * var(--u));background:var(--jaune)}
  .burger{display:none}
  .tools{gap:calc(18 * var(--u));margin-right:calc(-8 * var(--u));padding-top:calc(6 * var(--u))}
  .icon-btn{width:calc(34 * var(--u));height:calc(34 * var(--u));min-width:34px;min-height:34px}
  .icon-btn svg{width:calc(22 * var(--u));height:calc(22 * var(--u))}
  .mobile-menu{display:none}

  .hero{max-width:var(--max);margin:0 auto;height:calc(480 * var(--u));display:block}
  .hero-media{position:absolute;inset:0}
  .hero-media img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center}
  .hero-media .m{display:none}
  .hero-media .d{display:block}
  .hero-text{position:absolute;z-index:2;left:calc(56 * var(--u));top:calc(76 * var(--u));padding:0;width:calc(300 * var(--u))}
  .kicker{font-size:calc(8.2 * var(--u));letter-spacing:.5em;margin:0 0 calc(18 * var(--u))}
  .hero h1{font-size:calc(48 * var(--u));line-height:1.04}
  .hero .rule{width:calc(43 * var(--u));height:calc(2 * var(--u));margin:calc(17 * var(--u)) 0 calc(18 * var(--u))}
  .hero-sub{font-size:calc(14.2 * var(--u));line-height:1.48;margin:0 0 calc(24 * var(--u))}
  .btn{min-height:0;height:calc(40 * var(--u));padding:0 calc(20 * var(--u));gap:calc(12 * var(--u));font-size:calc(11.4 * var(--u));letter-spacing:0}
  .btn svg{width:calc(16 * var(--u));height:calc(9 * var(--u))}
  .hero .btn{width:calc(216 * var(--u))}

  .creations{padding:calc(28 * var(--u)) calc(31 * var(--u)) calc(30 * var(--u))}
  .sec-title{font-size:calc(32 * var(--u));gap:calc(20 * var(--u));margin:0 0 calc(17 * var(--u)) calc(9 * var(--u))}
  .sec-title::after{width:calc(64 * var(--u));height:calc(1.5 * var(--u))}
  .cards{grid-template-columns:repeat(auto-fit,minmax(calc(200 * var(--u)),1fr));gap:0 calc(16 * var(--u))}
  .card h3{font-size:calc(15.5 * var(--u));margin:calc(10 * var(--u)) 0 calc(3 * var(--u)) calc(6 * var(--u))}
  .card p{font-size:calc(10.6 * var(--u));margin-left:calc(6 * var(--u))}
  .card:nth-child(2) h3,.card:nth-child(2) p{margin-left:calc(12 * var(--u))}
  .card:nth-child(3) h3,.card:nth-child(3) p{margin-left:calc(9 * var(--u))}
  .card:nth-child(4) h3,.card:nth-child(4) p{margin-left:calc(11 * var(--u))}
  .card-img img{aspect-ratio:229/235}

  .edito{position:relative;display:block;max-width:var(--max);margin:0 auto;height:calc(349 * var(--u));background:none}
  .edito-bg{display:block;position:absolute;inset:0}
  .edito-bg img{width:100%;height:100%;object-fit:cover}
  .edito-photo{display:none}
  .edito-text{position:absolute;z-index:2;left:calc(57 * var(--u));top:calc(42 * var(--u));padding:0;background:none;width:calc(300 * var(--u))}
  .edito h2{font-size:calc(34.5 * var(--u));line-height:1.04}
  .edito .rule{width:calc(43 * var(--u));height:calc(1.5 * var(--u));margin:calc(16 * var(--u)) 0 calc(18 * var(--u))}
  .edito p{font-size:calc(15 * var(--u));line-height:1.5;margin:0 0 calc(26 * var(--u))}
  .edito .btn{width:calc(214 * var(--u));height:calc(42 * var(--u));font-size:calc(11.5 * var(--u))}

  .site-footer{padding:calc(38 * var(--u)) calc(55 * var(--u)) calc(38 * var(--u))}
  .f-cols{flex-wrap:nowrap;gap:0}
  .f-brand{flex:0 0 calc(190 * var(--u));border-right:1px solid var(--filet);padding-top:calc(2 * var(--u))}
  .f-brand img{width:calc(80 * var(--u));min-width:70px}
  .f-brand p{font-size:calc(11.6 * var(--u));margin-top:calc(12 * var(--u))}
  .f-col{flex:0 0 calc(206 * var(--u));padding-left:calc(40 * var(--u));border-right:1px solid var(--filet)}
  .f-col.c2{flex-basis:calc(205 * var(--u))}
  .f-col a{font-size:calc(11.6 * var(--u));padding:0;line-height:calc(19.6 * var(--u))}
  .f-social{flex:1 1 auto;padding-left:calc(52 * var(--u))}
  .f-social h4{font-size:calc(11.4 * var(--u));margin:calc(-4 * var(--u)) 0 calc(12 * var(--u))}
  .socials{gap:calc(13 * var(--u));margin-left:0}
  .socials a{width:calc(22 * var(--u));height:calc(22 * var(--u));min-width:22px;min-height:22px}
  .socials svg{width:calc(19 * var(--u));height:calc(19 * var(--u))}
  .f-bottom{margin-top:calc(27 * var(--u));padding-top:calc(24 * var(--u));font-size:calc(9.6 * var(--u))}
  .f-legal{gap:0 calc(14 * var(--u))}

  .page-head{padding:calc(56 * var(--u)) calc(56 * var(--u)) calc(44 * var(--u))}
  .page-head h1{font-size:calc(44 * var(--u))}
  .page-head p{font-size:calc(14.2 * var(--u))}
  .page-body{padding:calc(48 * var(--u)) calc(56 * var(--u)) calc(70 * var(--u))}
  .page-head .in,.page-body .in{max-width:none}
}
@media (min-width:700px) and (max-width:1099px){
  .header-in{height:64px}
  .nav{display:none}
  .burger{display:inline-flex}
  .mobile-menu{display:block;inset:64px 0 0 0}
  .tools{gap:6px;padding-top:0;margin-right:-10px}
  .icon-btn{width:44px;height:44px}
  .icon-btn svg{width:21px;height:21px}
  .logo img{width:52px;min-width:0;margin-top:0}
  .hero{height:max(calc(480 * var(--u)),350px)}
  .hero-text{top:max(calc(76 * var(--u)),40px);width:max(calc(300 * var(--u)),250px)}
  .kicker{font-size:max(calc(8.2 * var(--u)),9px);letter-spacing:.42em}
  .hero-sub{font-size:max(calc(14.2 * var(--u)),13px)}
  .btn{height:44px;font-size:12px;padding:0 18px}
  .hero .btn,.edito .btn{width:auto}
  .card h3{font-size:max(calc(15.5 * var(--u)),14px)}
  .card p{font-size:max(calc(10.6 * var(--u)),11.5px)}
  .edito{height:max(calc(349 * var(--u)),320px)}
  .edito-text{top:max(calc(42 * var(--u)),34px);width:max(calc(300 * var(--u)),240px)}
  .edito p{font-size:max(calc(15 * var(--u)),13px);margin-bottom:18px}
  .edito .rule{margin:12px 0 14px}
  .f-brand p,.f-col a,.f-social h4{font-size:max(calc(11.6 * var(--u)),12.5px)}
  .f-col a{line-height:1.9}
  .f-bottom{font-size:11px}
  .page-head p{font-size:15px}
}
/* très grands écrans : bandes centrées */
@media (min-width:1601px){
  body{background:var(--creme)}
  .hero,.edito{border-radius:0}
}

/* finitions : entrée douce du visuel principal, en-tête qui se détache au défilement */
@keyframes lnZoom{from{transform:scale(1.06)}to{transform:none}}
.hero-media img{animation:lnZoom 2.4s cubic-bezier(.2,.7,.2,1) both}
.site-header{transition:box-shadow .3s ease}
.site-header.scrolled{box-shadow:0 6px 24px rgba(40,30,15,.08)}
.card-img{position:relative}
.card:hover h3{color:#8C620E}
@media (prefers-reduced-motion:reduce){.hero-media img{animation:none}}