@font-face{font-family:Fraunces;src:url(../fonts/fraunces-latin-full-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Fraunces;src:url(../fonts/fraunces-latin-full-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:Karla;src:url(../fonts/karla-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:Karla;src:url(../fonts/karla-latin-wght-italic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:Caveat;src:url(../fonts/caveat-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --paper:#F3ECDD;
  --paper-2:#EAE0CB;
  --ink:#1E2A44;
  --green:#6F8A4B;
  --ochre:#C08A44;
  --ink-soft:rgba(30,42,68,.72);
  --rule:rgba(30,42,68,.22);
  --serif:Fraunces,Georgia,serif;
  --sans:Karla,"Helvetica Neue",Arial,sans-serif;
  --hand:Caveat,"Bradley Hand",cursive;
  --gutter:clamp(16px,5vw,64px);
  --max:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 1.0625rem/1.6 var(--sans);
  overflow-x:clip;
}
/* grain du papier */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.35;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='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.05;margin:0;font-variation-settings:"SOFT" 100,"WONK" 0;letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,7.4vw,6.2rem);font-weight:400}
h2{font-size:clamp(2.1rem,4.8vw,3.9rem)}
h3{font-size:clamp(1.5rem,2.6vw,2rem)}
em{font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 1}
p{margin:0 0 1em;max-width:60ch}
.hand{font-family:var(--hand);font-weight:600;font-size:1.45rem;line-height:1.1;color:var(--ochre)}
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:99;background:var(--ink);color:var(--paper);padding:.5em 1em}

/* ---------- en-tête ---------- */
.top{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:1.5rem;height:64px}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-right:auto}
.logo svg{width:34px;height:auto}
.logo b{font:500 1.35rem/1 var(--serif);font-variation-settings:"SOFT" 100}
.logo small{display:block;font:600 .95rem/1 var(--hand);color:var(--green)}
.menu{display:none;gap:1.4rem;font-size:.95rem}
.menu a{text-decoration:none;padding:.3em 0;background:linear-gradient(var(--ochre),var(--ochre)) left bottom/0 2px no-repeat;transition:background-size .3s}
.menu a:hover,.menu a[aria-current]{background-size:100% 2px}
.burger{background:none;border:0;font:600 1.5rem/1 var(--hand);color:var(--ink);padding:.4rem;cursor:pointer}
.drawer{display:none;border-top:1px solid var(--rule);padding:1rem var(--gutter) 1.5rem}
.drawer a{display:block;font:500 1.6rem/1.5 var(--serif);text-decoration:none}
.top.open .drawer{display:block}

/* bouton timbre */
.stamp-btn{
  --c:var(--ochre);
  display:inline-flex;align-items:center;gap:.5em;text-decoration:none;cursor:pointer;
  font:700 .85rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--paper);
  background:var(--c);padding:.95em 1.3em;border:0;
  /* bord dentelé de timbre */
  -webkit-mask:radial-gradient(3px at 0 50%,#0000 97%,#000) 0 0/51% 9px repeat-y,radial-gradient(3px at 100% 50%,#0000 97%,#000) 100% 0/51% 9px repeat-y;
  mask:radial-gradient(3px at 0 50%,#0000 97%,#000) 0 0/51% 9px repeat-y,radial-gradient(3px at 100% 50%,#0000 97%,#000) 100% 0/51% 9px repeat-y;
  transition:transform .25s cubic-bezier(.3,1.6,.5,1);
}
.stamp-btn:hover{transform:rotate(-2deg) scale(1.03)}
.stamp-btn.ink{--c:var(--ink)}
.top .stamp-btn{display:none}

/* barre mobile */
.mbar{position:fixed;inset:auto 0 0 0;z-index:45;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink);background:var(--paper);padding-bottom:env(safe-area-inset-bottom)}
.mbar a{display:flex;justify-content:center;align-items:center;min-height:56px;text-decoration:none;font:700 .85rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.mbar a:first-child{background:var(--ink);color:var(--paper)}
body{padding-bottom:56px}

@media (min-width:960px){
  .menu{display:flex}.burger,.drawer,.top.open .drawer{display:none}
  .top .stamp-btn{display:inline-flex}
  .mbar{display:none}body{padding-bottom:0}
}

/* ---------- hirondelle ---------- */
.swallow{position:absolute;top:0;left:0;z-index:50;width:clamp(58px,5.6vw,80px);pointer-events:none;color:var(--ink);will-change:transform}
.swallow svg{display:block;width:100%;overflow:visible}
.swallow .wing{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.4);transition:transform .3s}
.swallow .wing-down{transform-origin:50% 0}
.swallow.flying .wing{animation:flap .3s ease-in-out infinite alternate}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.2)}}

/* ---------- tirages photo ---------- */
.print{position:relative;margin:0;background:#FBF8F1;padding:10px 10px 0;
  box-shadow:3px 4px 0 rgba(30,42,68,.13);rotate:var(--r,-1.5deg)}
.print img{width:100%;aspect-ratio:var(--ar,16/10);object-fit:cover;background:var(--paper-2)}
.print figcaption{font:600 1.35rem/1.1 var(--hand);color:var(--ink);padding:.55em .2em .6em}
.print::before{ /* scotch */
  content:"";position:absolute;top:-13px;left:50%;width:96px;height:26px;translate:-50% 0;rotate:calc(var(--r,-1.5deg) * -2.4);
  background:rgba(232,220,186,.78);box-shadow:inset 0 0 0 1px rgba(30,42,68,.05);
  clip-path:polygon(3% 0,97% 4%,100% 50%,96% 100%,2% 94%,0 48%);
}
.print.tape-corners::before{left:14%}
button.print{border:0;font:inherit;text-align:left;cursor:zoom-in;display:block;width:100%}

/* annotation qui s'écrit */
.note{display:inline-block;padding:0 .4em .15em 0;font:600 1.5rem/1.1 var(--hand);color:var(--ochre);transform-origin:left}
.arrow{display:inline-block;width:56px;height:30px;vertical-align:middle;color:var(--ochre)}

/* ---------- accueil : hero ---------- */
.hero{padding:clamp(28px,5vw,64px) 0 clamp(48px,8vw,110px);position:relative}
.hero .wrap{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
.hero-text .kicker{margin-bottom:1rem}
.hero h1 em{color:var(--green)}
.hero-text p.lead{font-size:1.15rem;color:var(--ink-soft);margin-top:1.4rem}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:1.8rem}
.hero-cta .link{font-weight:600;text-underline-offset:.3em}

.postcard{perspective:1600px;width:100%;max-width:720px;justify-self:center}
.postcard-inner{position:relative;transform-style:preserve-3d;rotate:2deg;aspect-ratio:16/10.6}
.pc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#FBF8F1;padding:12px;box-shadow:4px 5px 0 rgba(30,42,68,.14)}
.pc-front img{width:100%;height:100%;object-fit:cover}
.pc-front .pc-caption{position:absolute;left:24px;bottom:18px;font:600 1.5rem/1 var(--hand);color:#FBF8F1;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.pc-back{transform:rotateY(180deg);display:grid;grid-template-columns:1.25fr 1fr;padding:clamp(14px,3vw,28px);gap:clamp(12px,2.5vw,26px)}
.pc-back .msg{font:600 clamp(1.15rem,2.6vw,1.9rem)/1.15 var(--hand);color:var(--ink);border-right:1px solid var(--rule);padding-right:clamp(10px,2vw,22px)}
.pc-back .addr{display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(10px,2vw,18px);position:relative}
.pc-back .addr span{border-bottom:1px solid var(--rule);font:600 clamp(1rem,2.2vw,1.5rem)/1.3 var(--hand)}
.postage{position:absolute;top:0;right:0;width:clamp(56px,10vw,92px);aspect-ratio:4/5;background:var(--green);color:var(--paper);display:grid;place-items:center;
  -webkit-mask:radial-gradient(3px,#0000 97%,#000) -3px -3px/8px 8px round;mask:radial-gradient(3px,#0000 97%,#000) -3px -3px/8px 8px round}
.postage svg{width:62%}
.postmark{position:absolute;top:clamp(26px,4vw,40px);right:clamp(36px,7vw,72px);width:clamp(70px,12vw,112px);color:var(--ink);opacity:.75;rotate:-14deg}

/* ---------- accueil : promesse ---------- */
.section{padding:clamp(64px,10vw,140px) 0;position:relative}
.folio{font:600 .75rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--green);display:flex;align-items:center;gap:.8em;margin-bottom:1.4rem}
.folio::after{content:"";height:1px;width:60px;background:currentColor}
.intro .wrap{display:grid;gap:2.5rem}
.intro .big{font:400 clamp(1.5rem,3vw,2.3rem)/1.3 var(--serif);font-variation-settings:"SOFT" 100;max-width:28ch}
.intro .big em{color:var(--green)}
.intro .side{display:grid;gap:2.2rem;align-content:start}

/* points forts : liste de carnet */
.forts{background:var(--ink);color:var(--paper)}
.forts .folio{color:var(--ochre)}
.forts h2{max-width:14ch}
.forts ol{list-style:none;margin:3rem 0 0;padding:0;display:grid;border-top:1px solid rgba(243,236,221,.25)}
.forts li{display:grid;grid-template-columns:3.2rem 1fr;gap:.2rem 1rem;padding:1.4rem 0;border-bottom:1px solid rgba(243,236,221,.25)}
.forts .n{font:italic 400 2.2rem/1 var(--serif);color:var(--ochre);grid-row:span 2}
.forts b{font:500 clamp(1.35rem,2.4vw,1.8rem)/1.15 var(--serif);font-variation-settings:"SOFT" 100}
.forts span{color:rgba(243,236,221,.72);font-size:1rem}
.forts .hand{color:var(--ochre)}

/* planche de tirages */
.planche .wrap{display:grid;gap:clamp(36px,6vw,64px) clamp(20px,3vw,40px)}
.planche .head{display:grid;gap:1rem}
.planche .p1{--r:-2deg}.planche .p2{--r:1.6deg}.planche .p3{--r:-1deg}.planche .p4{--r:2.2deg}

/* calendrier */
.cal-section{background:var(--paper-2)}
.cal-section .wrap{display:grid;gap:2.5rem;align-items:start}
.cal-page{position:relative;background:#FBF8F1;padding:clamp(18px,3vw,32px);box-shadow:4px 5px 0 rgba(30,42,68,.12);rotate:-.6deg}
.cal-page::before{content:"";position:absolute;top:-8px;left:8%;right:8%;height:16px;
  background:radial-gradient(circle 5px,var(--paper-2) 98%,#0000) 0 0/28px 16px repeat-x}
.months{display:grid;gap:1.8rem}
.month h3{font-size:1.5rem;margin-bottom:.8rem;display:flex;justify-content:space-between;align-items:baseline}
.month h3 small{font:600 1.1rem/1 var(--hand);color:var(--green)}
.grid7{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;font-size:.95rem}
.grid7 .dow{font:700 .7rem/2 var(--sans);letter-spacing:.1em;color:var(--ink-soft)}
.grid7 span{aspect-ratio:1;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.grid7 .x{color:rgba(30,42,68,.35);text-decoration:line-through;text-decoration-color:rgba(192,138,68,.7);background:repeating-linear-gradient(-45deg,transparent 0 5px,rgba(30,42,68,.06) 5px 6px)}
.grid7 .sel{background:var(--green);color:var(--paper)}
.grid7 .sel-end{background:var(--green);color:var(--paper);border-radius:0 50% 50% 0}
.grid7 .sel-start{background:var(--green);color:var(--paper);border-radius:50% 0 0 50%}
.legend{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1.2rem;font-size:.85rem;color:var(--ink-soft)}
.legend i{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:.4em}
.tarifs{display:grid;gap:1.2rem}
.tarifs dl{margin:0;display:grid;grid-template-columns:1fr auto;border-top:1px solid var(--rule)}
.tarifs dt,.tarifs dd{margin:0;padding:.85rem 0;border-bottom:1px solid var(--rule)}
.tarifs dd{font:500 1.35rem/1 var(--serif);text-align:right;align-self:center}
.cal-foot{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:1.5rem;position:relative}
.cal-foot .stamp-btn[aria-disabled]{cursor:default}
.mark{position:absolute;right:-6px;bottom:-40px;width:150px;color:var(--ochre);rotate:-12deg;opacity:.85;pointer-events:none}

/* avis */
.avis .wrap{display:grid;gap:2rem;align-items:center}
.avis blockquote{margin:0;background:#FBF8F1;padding:clamp(22px,4vw,44px);rotate:1.2deg;box-shadow:3px 4px 0 rgba(30,42,68,.12);position:relative;max-width:640px}
.avis blockquote p{font:400 clamp(1.3rem,2.4vw,1.85rem)/1.35 var(--serif);font-variation-settings:"SOFT" 100;max-width:none}
.avis cite{font:600 1.6rem/1 var(--hand);color:var(--green);font-style:normal}
.avis .stars{color:var(--ochre);letter-spacing:.2em}

/* pied */
.foot{border-top:1px solid var(--rule);padding:48px 0 32px;font-size:.95rem}
.foot .wrap{display:grid;gap:1.5rem}
.foot .big{font:400 clamp(1.8rem,4vw,3rem)/1.1 var(--serif);font-variation-settings:"SOFT" 100}
.foot nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}

/* ---------- le gîte ---------- */
.page-head{padding:clamp(40px,7vw,96px) 0 clamp(32px,5vw,64px)}
.page-head .wrap{display:grid;gap:2rem}
.page-head h1 em{color:var(--green)}
.sommaire{list-style:none;padding:0;margin:0;columns:2;column-gap:2rem;counter-reset:s}
.sommaire li{break-inside:avoid;border-bottom:1px dotted var(--rule);counter-increment:s}
.sommaire a{display:flex;gap:.6rem;align-items:baseline;padding:.55rem 0;text-decoration:none;font:500 1.15rem/1.2 var(--serif)}
.sommaire a::before{content:counter(s,decimal-leading-zero);font:600 .75rem/1 var(--sans);color:var(--ochre);letter-spacing:.1em}
.room{padding:clamp(56px,8vw,110px) 0;border-top:1px solid var(--rule);scroll-margin-top:64px}
.room .wrap{display:grid;gap:2rem}
.room-head .num{font:italic 300 clamp(3.5rem,8vw,6.5rem)/1 var(--serif);color:var(--ochre);display:block;margin-bottom:.4rem}
.room-head p{color:var(--ink-soft);margin-top:1.2rem}
.room-head ul{padding:0;margin:1rem 0 0;list-style:none}
.room-head li{padding:.35rem 0 .35rem 1.4rem;position:relative}
.room-head li::before{content:"";position:absolute;left:0;top:.95em;width:.8rem;height:1px;background:var(--ochre)}
.room-prints{display:grid;gap:clamp(28px,5vw,56px)}
.room-prints .duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,3vw,32px);align-items:start}
.room-prints .duo .print:nth-child(2){margin-top:clamp(24px,6vw,80px)}
.room.alt{background:var(--paper-2)}
.seminaire{background:var(--ink);color:var(--paper)}
.seminaire .room-head p{color:rgba(243,236,221,.75)}
.seminaire .print{--r:1deg}

/* galerie plein écran */
.lb{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:rgba(18,25,41,.96);color:var(--paper)}
.lb::backdrop{background:transparent}
.lb-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none}
.lb-track figure{flex:0 0 100%;scroll-snap-align:center;margin:0;display:grid;place-items:center;padding:56px 12px 24px;gap:8px;grid-template-rows:1fr auto}
.lb-track img{max-height:100%;width:auto;max-width:100%;object-fit:contain;min-height:0}
.lb-track figcaption{font:600 1.5rem/1 var(--hand)}
.lb-close{position:absolute;top:10px;right:12px;background:none;border:1px solid currentColor;color:inherit;font:600 1.3rem/1 var(--hand);padding:.4rem .8rem;cursor:pointer}
.lb-hint{position:absolute;top:18px;left:16px;font:600 1.2rem/1 var(--hand);color:var(--ochre)}

/* ---------- bientôt ---------- */
.soon{min-height:70vh;display:grid;place-items:center;text-align:center;padding:64px 0}
.soon h1{font-size:clamp(2.4rem,6vw,4.5rem)}
.soon p{margin-inline:auto}

/* ---------- grands écrans ---------- */
@media (min-width:760px){
  .months{grid-template-columns:1fr 1fr}
  .forts ol{grid-template-columns:1fr 1fr;column-gap:4rem}
  .sommaire{columns:3}
}
@media (min-width:960px){
  .hero .wrap{grid-template-columns:1fr 1.15fr}
  .intro .wrap{grid-template-columns:1.3fr 1fr;align-items:center}
  .forts .wrap{display:grid;grid-template-columns:1fr 1.8fr;gap:4rem;align-items:start}
  .forts ol{margin-top:0}
  .planche .wrap{grid-template-columns:repeat(12,1fr)}
  .planche .head{grid-column:1/6;align-self:end}
  .planche .p1{grid-column:6/13}
  .planche .p2{grid-column:1/6;margin-top:-40px}
  .planche .p3{grid-column:7/11;margin-top:60px}
  .planche .p4{grid-column:2/8}
  .planche .more{grid-column:9/13;align-self:center}
  .cal-section .wrap{grid-template-columns:1.6fr 1fr;gap:4rem}
  .avis .wrap{grid-template-columns:1fr 1.4fr}
  .foot .wrap{grid-template-columns:2fr 1fr 1fr;align-items:end}
  .page-head .wrap{grid-template-columns:1.2fr 1fr;align-items:end}
  .room .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:4rem;align-items:start}
  .room-head{position:sticky;top:110px}
  .room:nth-of-type(even) .room-head{order:2}
}
@media (prefers-reduced-motion:reduce){
  .swallow{display:none}
  *{transition:none!important;animation:none!important}
}