/* KATÅLEZ — feuille de styles commune */

:root{
  --navy:#0E1B2A; --paper:#FAFAF7; --gold:#B99A5B;
  --ink:#16202B; --ink-soft:#5C6672;
  --paper-soft:rgba(250,250,247,.58);
  --rule:rgba(250,250,247,.14); --rule-dark:rgba(22,32,43,.13);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Neutralise l'apparence native des boutons (le bleu de Safari/Windows
   sur <button> non stylé) avant toute règle plus spécifique ci-dessous. */
button{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  border-radius:0;font:inherit;color:inherit;background:none;border:0;
  cursor:pointer}
body{background:var(--paper);color:var(--ink);
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:17px;line-height:1.65;overflow-x:hidden;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
@media(max-width:720px){body{font-size:16px}.wrap{padding:0 22px}}

/* ——— en-tête ——— */
.top{position:absolute;top:0;left:0;right:0;z-index:5;padding:26px 0}
.top .wrap{display:flex;align-items:center;justify-content:space-between}
.mark{font-family:'Fraunces',serif;font-weight:400;font-size:19px;
  letter-spacing:.14em;color:var(--paper);text-decoration:none}
.nav-right{display:flex;align-items:center;gap:22px}
.nav-back{color:var(--paper-soft);text-decoration:none;font-size:14px;
  padding:12px 0;border-bottom:1px solid transparent}
.nav-back:hover{border-bottom-color:var(--gold)}
.langs{display:flex;align-items:center;gap:4px;font-size:13px;letter-spacing:.08em}
.langs a{color:var(--paper-soft);text-decoration:none;padding:12px 10px;line-height:1}
.langs a[aria-current]{color:var(--gold)}
.langs .sep{color:var(--rule)}
@media(max-width:560px){.nav-right{gap:10px}.nav-back{display:none}}

/* ——— hero ——— */
.hero{background:var(--navy);color:var(--paper);min-height:100svh;
  display:flex;align-items:center;padding:150px 0 90px}
.hero-grid{display:grid;grid-template-columns:1fr 330px;gap:80px;
  align-items:end;width:100%}
h1{font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(31px,5.4vw,68px);line-height:1.1;
  letter-spacing:-.015em;max-width:15ch}
h1 .line{display:block;overflow:hidden}
h1 .line span{display:block;transform:translateY(105%);
  animation:rise .95s cubic-bezier(.2,.7,.2,1) forwards}
h1 .line:nth-child(1) span{animation-delay:.45s}
h1 .line:nth-child(2) span{animation-delay:.60s}
h1 .line:nth-child(3) span{animation-delay:.75s}
h1 .line:nth-child(4) span{animation-delay:.90s}
@keyframes rise{to{transform:translateY(0)}}
.hero-aside{opacity:0;animation:fade 1.1s ease 1.3s forwards;
  border-left:1px solid var(--rule);padding-left:26px}
.hero-aside p{color:var(--paper-soft);font-size:16px;max-width:36ch}
@keyframes fade{to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  h1 .line span{transform:none;animation:none}
  .hero-aside{opacity:1;animation:none}}
@media(max-width:920px){
  .hero{padding:126px 0 70px}
  .hero-grid{grid-template-columns:1fr;gap:48px;align-items:start}
  .hero-aside{border-left:0;padding-left:0;
    border-top:1px solid var(--rule);padding-top:28px}}

/* hero des pages intérieures */
.hero.page{min-height:0;padding:164px 0 88px;display:block}
.hero.page h1{max-width:18ch;margin-bottom:22px}
.hero.page .lede{color:var(--paper-soft);font-size:clamp(17px,2.2vw,20px);
  max-width:44ch;opacity:0;animation:fade 1.1s ease .9s forwards}
.hero.page .price-line{margin-top:26px;font-size:15px;color:var(--gold);
  opacity:0;animation:fade 1.1s ease 1.1s forwards}
@media(prefers-reduced-motion:reduce){
  .hero.page .lede,.hero.page .price-line{opacity:1;animation:none}}
@media(max-width:720px){.hero.page{padding:132px 0 62px}}

/* ——— sections ——— */
section{padding:118px 0}
section.tight{padding:96px 0}
@media(max-width:720px){section{padding:76px 0}section.tight{padding:64px 0}}
h2{font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(25px,3.4vw,40px);line-height:1.2;
  letter-spacing:-.01em;max-width:20ch;margin-bottom:52px}
@media(max-width:720px){h2{margin-bottom:38px}}
.lead{color:var(--ink-soft);max-width:52ch;margin-bottom:16px}

/* ——— les deux portes ——— */
.doors{border-top:1px solid var(--rule-dark)}
.door{display:grid;grid-template-columns:1fr 1.35fr;gap:56px;
  padding:52px 0;border-bottom:1px solid var(--rule-dark);align-items:start}
.door h3{font-family:'Fraunces',serif;font-weight:400;
  font-size:clamp(21px,2.6vw,27px);line-height:1.25;max-width:16ch}
.door .said{font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:19px;line-height:1.5;color:var(--ink);max-width:40ch;margin-bottom:14px}
.door p{color:var(--ink-soft);max-width:48ch;margin-bottom:18px}
.door .meta{font-size:15px;color:var(--gold);margin-bottom:20px;max-width:48ch}
.door .meta b{color:var(--ink);font-weight:500}
@media(max-width:820px){
  .door{grid-template-columns:1fr;gap:18px;padding:38px 0}}

/* ——— étapes ——— */
.steps{border-top:1px solid var(--rule-dark)}
.step{display:grid;grid-template-columns:1fr 1.5fr;gap:48px;
  padding:34px 0;border-bottom:1px solid var(--rule-dark);align-items:baseline}
.step h3{font-family:'Fraunces',serif;font-weight:400;font-size:22px;line-height:1.3}
.step .when{display:block;font-family:'Instrument Sans',sans-serif;
  font-size:14px;color:var(--ink-soft);margin-top:5px}
.step p{color:var(--ink-soft);max-width:54ch}
.step .why{display:block;margin-top:10px;color:var(--ink);max-width:54ch}
@media(max-width:820px){
  .step{grid-template-columns:1fr;gap:10px;padding:26px 0}}
.aside-note{margin-top:42px;font-family:'Fraunces',serif;font-style:italic;
  font-weight:300;font-size:clamp(18px,2.4vw,21px);line-height:1.5;
  max-width:44ch;color:var(--ink)}

/* ——— formules ——— */
.forms{border-top:1px solid var(--rule-dark)}
.formule{display:grid;grid-template-columns:1fr 1.5fr auto;gap:40px;
  padding:30px 0;border-bottom:1px solid var(--rule-dark);align-items:baseline}
.formule h3{font-family:'Fraunces',serif;font-weight:400;font-size:20px;line-height:1.3}
.formule p{color:var(--ink-soft);max-width:44ch}
.formule .tag{font-size:15px;color:var(--gold);white-space:nowrap;text-align:right}
.formule .tag span{display:block;color:var(--ink-soft);font-size:14px;margin-top:4px}
@media(max-width:820px){
  .formule{grid-template-columns:1fr;gap:10px;padding:26px 0}
  .formule .tag{text-align:left}}

/* ——— fond marine ——— */
.dark{background:var(--navy);color:var(--paper)}
.dark h2{color:var(--paper)}
.dark .lead{color:var(--paper-soft)}
.find{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;
  padding:48px 0;border-top:1px solid var(--rule);align-items:baseline}
.find:last-of-type{border-bottom:1px solid var(--rule)}
.who{font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:19px;color:var(--paper-soft);max-width:28ch;line-height:1.4}
.what{font-size:clamp(17px,2.1vw,19px);line-height:1.6;max-width:46ch}
.cost{display:block;margin-top:14px;font-size:15px;color:var(--gold);max-width:46ch}
@media(max-width:820px){
  .find{grid-template-columns:1fr;gap:14px;padding:34px 0}}
.dark .note{margin-top:42px;font-size:15px;color:var(--paper-soft);max-width:54ch}

/* listes marine : inclus / exclu */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:64px;
  border-top:1px solid var(--rule);padding-top:38px}
.pair h3{font-family:'Fraunces',serif;font-weight:400;font-size:19px;
  margin-bottom:18px;color:var(--paper)}
.pair ul{list-style:none}
.pair li{padding:9px 0;border-bottom:1px solid var(--rule);
  color:var(--paper-soft);font-size:16px;max-width:42ch}
@media(max-width:820px){.pair{grid-template-columns:1fr;gap:38px}}

/* ——— refus ——— */
.refuse{list-style:none;border-top:1px solid var(--rule-dark);max-width:62ch}
.refuse li{padding:20px 0;border-bottom:1px solid var(--rule-dark)}
.refuse b{display:block;font-family:'Fraunces',serif;font-weight:400;
  font-size:19px;color:var(--ink);margin-bottom:4px}
.refuse span{color:var(--ink-soft);font-size:16px}

/* ——— rendez-vous / formulaire ——— */
.close-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:start}
.close-grid p{color:var(--ink-soft);max-width:46ch;margin-bottom:16px}
.terms{padding-top:20px;border-top:1px solid var(--rule-dark)}
.terms p{font-family:'Fraunces',serif;font-size:20px;font-weight:300;
  line-height:1.5;color:var(--ink);max-width:34ch;margin:0 0 18px}
.terms .sub{font-family:'Instrument Sans',sans-serif;font-size:15px;
  color:var(--ink-soft);max-width:38ch}
@media(max-width:820px){.close-grid{grid-template-columns:1fr;gap:44px}}

form{margin-top:34px;max-width:420px}
.field{margin-bottom:22px}
.field label{display:block;font-size:13px;letter-spacing:.04em;
  color:var(--ink-soft);margin-bottom:6px}
.field input{width:100%;font-family:inherit;font-size:16px;
  color:var(--ink);background:none;border:0;
  border-bottom:1px solid var(--rule-dark);padding:10px 0;
  border-radius:0;-webkit-appearance:none}
.field input:focus{outline:none;border-bottom-color:var(--gold)}
.hp{position:absolute;left:-9999px}
.form-msg{margin-top:20px;font-size:15px;color:var(--ink-soft);max-width:42ch}
.form-done{font-family:'Fraunces',serif;font-size:20px;font-weight:300;
  line-height:1.5;color:var(--ink);max-width:38ch;margin-top:34px}

/* ——— pied de page ——— */
footer{background:var(--navy);color:var(--paper-soft);
  padding:92px 0 68px;text-align:center;font-size:15px}
.credits .mark{display:block;margin-bottom:24px}
.credits address{font-style:normal;line-height:1.95;margin-bottom:20px}
.credits .contact{line-height:2.1}
.credits nav{margin-bottom:22px;line-height:2.1}
footer a{color:var(--paper);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:2px}
footer a:hover{border-bottom-color:var(--gold)}
.rule{width:40px;height:1px;background:var(--rule);border:0;margin:44px auto}
.foot-note{font-size:14px;line-height:1.75;max-width:40ch;margin:0 auto 26px}
.foot-legal{font-size:14px}
@media(max-width:720px){footer{padding:72px 0 56px}.rule{margin:36px auto}}

/* ——— pages légales ——— */
.bar{background:var(--navy);padding:26px 0}
.bar .wrap{display:flex;align-items:center;justify-content:space-between}
.bar a.back{color:var(--paper-soft);text-decoration:none;font-size:14px;padding:10px 0}
main.legal{padding:88px 0 96px}
.col{max-width:700px;margin:0 auto;padding:0 40px}
.col h1{font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(27px,4.4vw,40px);line-height:1.2;
  letter-spacing:-.01em;margin-bottom:10px;max-width:none}
.updated{color:var(--ink-soft);font-size:15px;margin-bottom:52px}
.col h2{font-family:'Fraunces',serif;font-weight:400;font-size:20px;
  margin:40px 0 12px;padding-top:26px;border-top:1px solid var(--rule-dark);
  max-width:none}
.col h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.col p{color:var(--ink-soft);margin-bottom:12px}
.col strong{color:var(--ink);font-weight:500}
.col a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--gold)}
@media(max-width:720px){
  .bar .wrap,.col{padding:0 22px}
  main.legal{padding:60px 0 72px}
  .updated{margin-bottom:38px}}

/* valeurs à remplacer avant mise en ligne */
.todo{background:rgba(185,154,91,.16);padding:1px 5px;border-radius:2px;color:var(--ink)}
.dark .todo,.hero .todo{background:rgba(185,154,91,.22);color:var(--paper)}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ——————————————————————————————————————————————
   Calendrier de rendez-vous
   —————————————————————————————————————————————— */

.cal{display:grid;grid-template-columns:376px 1fr;gap:64px;align-items:start;
  border-top:1px solid var(--rule-dark);padding-top:44px}
@media(max-width:900px){.cal{grid-template-columns:1fr;gap:44px;padding-top:34px}}

.cal-head{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:22px}
.cal-head h3{font-family:'Fraunces',serif;font-weight:400;font-size:21px;
  line-height:1.2;letter-spacing:.005em}
.cal-nav{width:38px;height:38px;border:1px solid var(--rule-dark);background:none;
  color:var(--ink);font-family:inherit;font-size:17px;line-height:1;cursor:pointer;
  transition:border-color .25s,color .25s}
.cal-nav:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.cal-nav:disabled{opacity:.28;cursor:default}

.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);
  font-size:12px;letter-spacing:.1em;color:var(--ink-soft);
  text-align:center;padding-bottom:9px;border-bottom:1px solid var(--rule-dark)}

.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-cell{position:relative;aspect-ratio:1;border:0;background:none;
  font-family:inherit;font-size:15px;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;
  cursor:default;transition:background .2s,color .2s}
.cal-cell.empty{visibility:hidden}
.cal-cell:disabled{color:rgba(22,32,43,.26)}
.cal-cell.pending{color:rgba(22,32,43,.16)}
.cal-cell.open{color:var(--ink);cursor:pointer}
.cal-cell.open::after{content:"";position:absolute;bottom:20%;left:50%;
  width:4px;height:4px;margin-left:-2px;background:var(--gold)}
.cal-cell.open:hover{background:rgba(185,154,91,.15)}
.cal-cell.today{box-shadow:inset 0 0 0 1px var(--rule-dark)}
.cal-cell.chosen,.cal-cell.chosen:hover{background:var(--navy);color:var(--paper)}
.cal-cell.chosen::after{background:var(--gold)}

.cal-tz{margin-top:20px;font-size:13px;color:var(--ink-soft);line-height:1.6}

.cal-main{min-height:300px;border-left:1px solid var(--rule-dark);padding-left:48px}
@media(max-width:900px){
  .cal-main{border-left:0;padding-left:0;
    border-top:1px solid var(--rule-dark);padding-top:34px;min-height:0}}

.cal-h{font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(21px,2.8vw,27px);line-height:1.25;margin-bottom:6px}
.cal-h.done{color:var(--ink)}
.cal-sub{font-size:13px;letter-spacing:.04em;color:var(--ink-soft);margin:18px 0 12px}
.cal-when{font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:19px;color:var(--ink);margin-bottom:14px}
.cal-msg{color:var(--ink-soft);font-size:15px;max-width:42ch;line-height:1.6}
.cal-msg.err{color:var(--ink)}
.cal-msg.err::before{content:"";display:inline-block;width:14px;height:1px;
  background:var(--gold);vertical-align:middle;margin-right:9px}

.cal-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));
  gap:8px;max-width:420px}
.cal-time{padding:13px 6px;border:1px solid var(--rule-dark);background:none;
  font-family:inherit;font-size:15px;color:var(--ink);cursor:pointer;
  transition:border-color .25s,background .25s,color .25s}
.cal-time:hover{border-color:var(--gold);background:var(--gold);color:var(--paper)}

.cal-back{display:inline-block;margin:0 0 24px;padding:0;border:0;background:none;
  font-family:inherit;font-size:15px;color:var(--ink-soft);cursor:pointer;
  border-bottom:1px solid var(--rule-dark);padding-bottom:2px}
.cal-back:hover{color:var(--ink);border-bottom-color:var(--gold)}
.cal-form{margin-top:4px;max-width:420px}
.cal-form .cta{margin-top:10px}
.cal-form .cal-msg{margin-top:16px}
.cal-main .cta[download]{margin-top:24px;margin-bottom:22px;display:inline-block}
@media(max-width:720px){.cal-main .cta[download]{width:100%;text-align:center}}

/* ——————————————————————————————————————————————
   Agenda — interface privée
   —————————————————————————————————————————————— */

.admin{max-width:900px;margin:0 auto;padding:0 40px}
@media(max-width:720px){.admin{padding:0 22px}}
.admin h2{margin-bottom:26px}
.admin section{padding:0;margin-bottom:64px}
.gate{max-width:380px;margin:120px auto;padding:0 22px}
.gate h1{font-family:'Fraunces',serif;font-weight:300;font-size:30px;
  margin-bottom:10px;max-width:none}
.gate p{color:var(--ink-soft);font-size:15px;margin-bottom:26px}

.adm-row{display:grid;grid-template-columns:130px 1fr auto;gap:16px;
  align-items:center;padding:14px 0;border-bottom:1px solid var(--rule-dark)}
.adm-row:first-of-type{border-top:1px solid var(--rule-dark)}
.adm-row .day{font-family:'Fraunces',serif;font-size:18px;font-weight:400}
.adm-ranges{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
@media(max-width:720px){
  .adm-row{grid-template-columns:1fr;gap:10px;padding:16px 0}}

.pill{display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--rule-dark);padding:7px 10px;font-size:14px}
.pill input{border:0;background:none;font-family:inherit;font-size:14px;
  color:var(--ink);width:68px;padding:0}
.pill input:focus{outline:none;color:var(--gold)}
.pill button{border:0;background:none;color:var(--ink-soft);cursor:pointer;
  font-size:15px;line-height:1;padding:0 2px}
.pill button:hover{color:var(--gold)}
.link-btn{border:0;background:none;font-family:inherit;font-size:14px;
  color:var(--ink-soft);cursor:pointer;border-bottom:1px solid var(--rule-dark);
  padding:0 0 2px}
.link-btn:hover{color:var(--ink);border-bottom-color:var(--gold)}

.adm-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:14px;align-items:end;margin-bottom:18px}
.adm-form .field{margin:0}
.adm-list{list-style:none;border-top:1px solid var(--rule-dark)}
.adm-list li{display:grid;grid-template-columns:1fr auto;gap:16px;
  align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rule-dark)}
.adm-list .meta{display:block;color:var(--ink-soft);font-size:14px;margin-top:3px}
.adm-list .none{display:block;color:var(--ink-soft);font-size:15px;
  padding:16px 0;border-bottom:1px solid var(--rule-dark)}

.adm-bar{position:sticky;bottom:0;background:var(--paper);
  border-top:1px solid var(--rule-dark);padding:18px 0;margin-top:40px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.adm-bar .state{font-size:14px;color:var(--ink-soft)}
.adm-bar .cta{margin-top:0}
@media(max-width:720px){.adm-bar .cta{width:auto}}

/* ——————————————————————————————————————————————
   Boutons — bloc unique, à garder en fin de fichier
   .cta       : sur fond marine
   .cta.dark  : sur fond clair (« dark » = texte foncé)
   —————————————————————————————————————————————— */

.cta,
.cta.dark{display:inline-block;margin-top:26px;padding:15px 28px;
  font-family:inherit;font-size:15px;text-decoration:none;cursor:pointer;
  border:1px solid var(--gold);background:none;
  transition:background .35s,color .35s}

.cta{color:var(--paper)}
.cta:hover,.cta:focus-visible{background:var(--gold);color:var(--navy)}

.cta.dark{color:var(--ink)}
.cta.dark:hover,.cta.dark:focus-visible{background:var(--gold);color:var(--navy)}

@media(max-width:720px){.cta,.cta.dark{width:100%;text-align:center}}

/* les créneaux horaires du calendrier suivent la même logique */
.cal-time{padding:13px 6px;border:1px solid var(--rule-dark);background:none;
  font-family:inherit;font-size:15px;color:var(--ink);cursor:pointer;
  transition:border-color .25s,background .25s,color .25s}
.cal-time:hover{border-color:var(--gold);background:var(--gold);color:var(--navy)}

/* liens discrets, inchangés mais regroupés ici pour tout avoir au même endroit */
.quiet{display:block;margin-top:18px;font-size:15px;color:var(--ink-soft);
  text-decoration:none;border-bottom:1px solid var(--rule-dark);padding-bottom:2px;
  width:fit-content}
.quiet:hover{color:var(--ink);border-bottom-color:var(--gold)}

.door .meta > span,
.price-line > span{white-space:nowrap}
.door .meta .mid,
.price-line .mid{padding:0 .55em;opacity:.45}