/* Shared styles for the inner pages (officiant, bar à vinyles, bonnes adresses) */
:root{
  --ink:#1E1E1E; --soft:#4F4A44; --red:#C9302C; --navy:#23366B; --gold:#C98A22; --chip:rgba(255,255,255,.55); --paper:#FBF7EF;
  box-sizing:border-box;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:light; } }
:root[data-theme="dark"]{ color-scheme:light; }
*,*::before,*::after{box-sizing:inherit;margin:0}
html{scroll-behavior:smooth;background:#DDEBEE}
body{color:var(--ink);font:400 1.0625rem/1.7 "Karla",system-ui,-apple-system,sans-serif;overflow-x:hidden;min-height:100vh;
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 100%) fixed}
body.morning{--sky1:#D7E8EE;--sky2:#F7EFE2}
body.afternoon{--sky1:#AFD8EA;--sky2:#F9F3E6}
body.sunset{--sky1:#F2C99A;--sky2:#F6DDB8;--soft:#3A302C}
body.dusk{--sky1:#E89A78;--sky2:#F3BF98;--soft:#3A302C}
body.night{--sky1:#0E1328;--sky2:#1B1A36;--ink:#F6EEE2;--soft:#CFC5B6;--red:#FF8A6B;--navy:#9DB8FF;--gold:#F2C46B;--chip:rgba(20,24,46,.55)}
body.night #grain{opacity:.08}
/* Paper notes keep dark text at night */
body.night .card,body.night .form{--ink:#1E1E1E}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2rem}
.quotes blockquote{background:var(--paper);color:#1E1E1E;padding:1.6rem 1.5rem;box-shadow:0 14px 30px -16px rgba(0,0,0,.6)}
.quotes blockquote:nth-child(1){transform:rotate(-2deg)}
.quotes blockquote:nth-child(2){transform:rotate(1.5deg) translateY(1rem)}
.quotes cite{display:block;margin-top:.8rem;font-style:normal;font-family:"Amatic SC",cursive;font-weight:700;font-size:1.7rem;color:#C9302C}
.cars{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end;margin-top:2rem}
.cars figcaption{text-align:center;margin-top:.6rem}
.cars figcaption b{display:block;font-family:"Amatic SC",cursive;font-size:2.2rem;line-height:1}
.cars figcaption span{color:var(--soft);font-size:.98rem}
a{color:inherit}
:focus-visible{outline:2px dashed var(--red);outline-offset:4px}
h1,h2,h3,.lead,.time{text-wrap:balance}
p,li,figcaption span{text-wrap:pretty}
.hand{font-family:"Amatic SC","Chalkboard SE","Comic Sans MS",cursive;font-weight:700;line-height:.95;letter-spacing:.02em}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.5rem}
img.ill{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
#grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.18;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .42 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}

nav:not(.pages){position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.5rem;
  background:var(--sky1);box-shadow:0 8px 16px -14px rgba(0,0,0,.35)}
nav:not(.pages) .logo{font-family:"Amatic SC",cursive;font-weight:700;font-size:2rem;text-decoration:none;line-height:1;white-space:nowrap}
.btn{display:inline-block;text-decoration:none;font-weight:700;padding:.8rem 1.35rem;border:2px solid var(--ink);border-radius:2rem .7rem 2rem .7rem;background:var(--chip);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .25s}
.btn:hover{transform:rotate(-1.5deg) translateY(-2px)}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}

/* Reveal helpers */
.write{clip-path:inset(-10% 100% -10% 0);transition:clip-path 1.3s steps(26,end)}
.write.on{clip-path:inset(-10% -2% -10% 0)}
.fade{opacity:0;transform:translateY(18px);transition:opacity .9s,transform .9s}
.fade.on{opacity:1;transform:none}
.wash{opacity:0;filter:blur(10px) saturate(.2);transition:opacity 1.3s,filter 1.8s}
.wash.on{opacity:1;filter:none}

/* Page head */
.head{padding:3rem 0 4rem}
.head .mgrid{align-items:center}
.time{font-family:"Amatic SC",cursive;font-weight:700;font-size:2.2rem;color:var(--red);line-height:1}
.head h1{font-size:clamp(1.25rem,2.4vw,1.5rem);font-weight:700;color:var(--soft);letter-spacing:.01em;margin-top:.6rem}
.head .title{font-size:clamp(3.4rem,8vw,6.2rem);margin:.4rem 0 1.2rem}
.head p.lead{color:var(--soft);font-size:1.15rem;max-width:32rem}
.head .row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}

.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
section.block{padding:4rem 0}
section.block h2{font-size:clamp(2.8rem,6vw,4.4rem);margin-bottom:1.2rem}
section.block p{color:var(--soft);max-width:34rem}
section.block p+p{margin-top:1rem}
.center{text-align:center}
.center p{margin-left:auto;margin-right:auto}

/* Paper cards */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin-top:2rem}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{background:var(--paper);color:#1E1E1E;padding:1.6rem 1.5rem;box-shadow:0 14px 30px -16px rgba(0,0,0,.5)}
.card:nth-child(4n+1){transform:rotate(-1deg)}
.card:nth-child(4n+2){transform:rotate(.8deg)}
.card:nth-child(4n+3){transform:rotate(.5deg)}
.card:nth-child(4n){transform:rotate(-.6deg)}
.card h3{font-family:"Amatic SC",cursive;font-weight:700;font-size:2.2rem;line-height:1;color:#C9302C}
.card .where{display:block;font-weight:700;font-size:.95rem;color:#23366B;margin:.3rem 0 .7rem}
.card p{color:#4F4A44;font-size:1rem}
.card .ask{margin-top:.8rem;font-style:italic}
.card a.go{display:inline-block;margin-top:.9rem;font-weight:700;color:#23366B}

/* Steps */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2rem;counter-reset:s}
.steps li{counter-increment:s;color:var(--soft)}
.steps li::before{content:counter(s);display:block;font-family:"Amatic SC",cursive;font-weight:700;font-size:3.4rem;line-height:1;color:var(--gold)}
.steps b{display:block;color:var(--ink);font-size:1.1rem;margin-bottom:.3rem}

.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.center .chips{justify-content:center}
.chips span{font-family:"Amatic SC",cursive;font-weight:700;font-size:1.6rem;line-height:1;padding:.4rem 1rem;border:2px solid currentColor;border-radius:1.4rem .5rem 1.4rem .5rem}
.chips span:nth-child(odd){color:var(--red)}
.chips span:nth-child(even){color:var(--gold)}

.price{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;max-width:34rem;margin-top:1.6rem;padding:.8rem 1.1rem;border-radius:1.2rem .4rem 1.2rem .4rem;background:var(--chip);font-weight:700}
.price span:last-child{font-family:"Amatic SC",cursive;font-size:1.9rem;line-height:1;color:var(--navy);white-space:nowrap}
.center .price{margin-left:auto;margin-right:auto}

.contact{padding:6rem 1.5rem 5rem;text-align:center}
.contact h2{font-size:clamp(3.2rem,8vw,6.4rem)}
.contact address{font-style:normal;margin-top:1.2rem;color:var(--soft);line-height:1.9}
.contact .row{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}

.pages{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.4rem;padding:0 1.5rem;font-weight:700}
.pages a{text-decoration-thickness:1px;text-underline-offset:.25em}
.pages a[aria-current]{color:var(--red)}
footer{text-align:center;padding:1.4rem 1.5rem 3rem;color:var(--soft);font-size:.88rem}

@media (max-width:860px){
  .mgrid,.cards,.cards.three,.steps,.quotes,.cars{grid-template-columns:1fr}
  .quotes blockquote{transform:none!important}
  .head{padding-top:1.5rem}
  .head .art{order:-1;max-width:34rem}
  .card{transform:none!important}
  nav:not(.pages) .btn{padding:.6rem 1rem;font-size:.95rem}
}
@media (max-width:420px){
  nav:not(.pages) .logo{font-size:1.7rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .write{clip-path:none}.fade,.wash{opacity:1;transform:none;filter:none}
  html{scroll-behavior:auto}
}

/* Contact form */
.form{max-width:40rem;margin:0 auto;padding:2rem 1.6rem;background:var(--paper);color:#1E1E1E;box-shadow:0 14px 30px -16px rgba(0,0,0,.5);transform:rotate(-.4deg);display:grid;gap:1.2rem}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.form label,.form legend{display:block;font-weight:700;font-size:.95rem;margin-bottom:.35rem}
.form input,.form textarea{width:100%;font:inherit;color:#1E1E1E;background:#fff;border:1.5px solid rgba(30,30,30,.25);border-radius:.9rem .3rem .9rem .3rem;padding:.7rem .9rem}
.form input:focus,.form textarea:focus{outline:2px dashed #C9302C;outline-offset:2px}
.form textarea{resize:vertical;min-height:8rem}
.form fieldset{border:0;padding:0}
.form .opts{display:flex;flex-wrap:wrap;gap:.5rem}
.form .opts label{display:inline-flex;align-items:center;gap:.45rem;font-weight:500;margin:0;padding:.4rem .8rem;border:1.5px solid rgba(30,30,30,.25);border-radius:1.2rem .4rem 1.2rem .4rem;cursor:pointer}
.form .opts input{width:auto;accent-color:#C9302C}
.form .hint{font-weight:400;color:#4F4A44}
.form button{justify-self:start;font:inherit;cursor:pointer}
.form .bot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:600px){ .form .two{grid-template-columns:1fr} .form{transform:none} }

/* The Impala drawing faces left: mirror it like on the home page */
img[src="/img/impala.webp"]{transform:scaleX(-1)}