/* Design proposal "Olivier & Sable": same content and layout as the mockup,
   re-dressed in warm sand, a serif display face and Djerbian arch frames.
   Loaded after dar-dhiafa.css; delete this file and its <link> to revert. */
@font-face{font-family:Fraunces;src:url('/fonts/fraunces-latin.woff2') format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:Fraunces;src:url('/fonts/fraunces-latin-italic.woff2') format('woff2');font-style:italic;font-weight:300 700;font-display:swap}

:root{
  --paper:#f6f0e6;
  --ink:#2b231d;
  --muted:#6b6056;
  --line:#e2d5c2;
  --tint:#ece2d2;
  --card:#fbf7f0;
  --olive:#5f6b3a;         /* oliviers et palmeraies: actions */
  --door:#3f4826;          /* olive profond: contact block, table header, focus */
  --ochre:#7a5a1b;         /* ocre: labels and small accents */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --focus:var(--door);
  --arch:999px 999px 0 0;
  --soft:20px;
}
::selection{background:var(--olive);color:var(--card)}

/* Display type: serif, sentence case, no forced width axis. */
.mast,.num,.sub,.book h2,.blackbox h2,.page-heading h1,.next-link > span,.foot-brand b,.map h3,.hours span{
  font-family:var(--display);text-transform:none;font-variation-settings:normal;font-optical-sizing:auto
}
.mast{font-weight:350;letter-spacing:-.045em;line-height:.86}
.num{font-weight:380;letter-spacing:-.035em;line-height:.95}
.num .dot{color:var(--ochre)}
.sub{font-weight:350;font-style:italic;letter-spacing:-.01em;line-height:1.15;color:var(--muted)}
h2.sub{font-style:normal;font-weight:400;color:var(--ink);letter-spacing:-.025em;line-height:1.02}
.page-heading h1{font-weight:350;letter-spacing:-.045em;line-height:.95}
.book h2{font-weight:450;font-size:30px;letter-spacing:-.02em}
.blackbox h2{font-weight:380;letter-spacing:-.035em;line-height:.98}
.lede,.rate-cta p{font-family:var(--display);font-weight:300;font-variation-settings:normal}
.label,.eyebrow{color:var(--ochre);border-bottom-color:currentColor}
.hours span{font-weight:450}
.map h3{font-weight:450}

/* Chrome */
.top,.mbar{background:var(--paper)}
.nav a[aria-current="page"],.nav a:hover{border-bottom-color:var(--ochre)}
section.chap,.contact,.next-band{border-top-color:var(--line)}

/* Buttons: rounded terracotta, blue on hover. */
.btn{border-radius:999px;background:var(--olive);border-color:var(--olive);color:var(--card)}
.btn:hover{background:var(--door);border-color:var(--door);color:var(--card)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--card)}
.copy{border-radius:999px}

/* Arches: the main photographs take the shape of Djerbian doorways. */
.hero-img,figure.big{border-radius:var(--arch);overflow:hidden}
.thumbs img,.duo img{border-radius:var(--arch)}
.gallery img,.wide img{border-radius:6px}
.illu img{border-radius:var(--arch)}

/* Cards and framed elements */
.book{background:var(--card);border:1px solid var(--line);border-radius:var(--soft);box-shadow:0 1px 0 var(--line),0 24px 48px -32px rgba(43,35,29,.35)}
.field input,.field select{background-color:transparent;border-bottom-color:var(--line)}
.field input:focus,.field select:focus{border-bottom-color:var(--olive);outline:none}
.perks li::before{content:"✦";color:var(--ochre);font-size:11px;line-height:1.9}
.plan,.map{border:1px solid var(--line);border-radius:var(--soft);background:var(--card)}
.blackbox{background:var(--door);border-radius:var(--soft)}
.blackbox p{color:#e3e6d6}
.blackbox .btn{background:var(--card);border-color:var(--card);color:var(--ink)}
.blackbox .btn:hover{background:var(--ochre);border-color:var(--ochre);color:var(--card)}
.lines{border-top-color:rgba(255,255,255,.22)}
.line small{color:#c9cfb4}
.copy{border-color:rgba(255,255,255,.4)}

/* Tables and rules: hairlines in sand instead of black. */
.rates th,.rates td,.rcats th,.rcats td{border-bottom-color:var(--line)}
.rates thead tr:nth-child(2) th{background:var(--door);color:var(--card)}
.rates thead tr:nth-child(2) th:first-child{border-start-start-radius:var(--soft)}
.rates thead tr:nth-child(2) th:last-child{border-start-end-radius:var(--soft)}
.rates tbody tr:hover{background:var(--card)}
.rate-cta,.hours,.facts{border-color:var(--line)}
.rate-cta{border-width:1px 0}

/* Inner page close + footer */
.next-link .arr{color:var(--ochre)}
.next-link:hover > span{color:var(--ochre)}
footer{background:var(--tint);border-top:0}
.foot-brand b{font-weight:400;font-size:34px;letter-spacing:-.03em;width:auto}
.foot-h{color:var(--ochre)}
.crumbs li+li::before{color:var(--muted)}
@media(max-width:620px){
  .rates tr{border-radius:12px;overflow:hidden;background:var(--card)}
  .rates td:first-child{background:var(--tint)}
}