/* Ruffieu.com modernisation 2026
   Progressive visual layer over the existing TOWeb structure.
   The original information architecture and URLs are intentionally preserved. */

:root {
  --rf-green-950: #102b23;
  --rf-green-900: #173a2f;
  --rf-green-800: #20503f;
  --rf-green-700: #28644e;
  --rf-green-600: #337d62;
  --rf-green-100: #e8f1ed;
  --rf-green-050: #f3f7f5;
  --rf-stone-950: #17201c;
  --rf-stone-800: #2e3a34;
  --rf-stone-700: #45534c;
  --rf-stone-500: #718078;
  --rf-stone-300: #cfd8d3;
  --rf-stone-200: #dee5e1;
  --rf-stone-100: #eef2ef;
  --rf-white: #ffffff;
  --rf-gold: #c6a35b;
  --rf-shadow-sm: 0 1px 2px rgba(16, 43, 35, .06), 0 8px 24px rgba(16, 43, 35, .05);
  --rf-shadow-md: 0 12px 36px rgba(16, 43, 35, .10);
  --rf-radius-sm: 10px;
  --rf-radius-md: 16px;
  --rf-radius-lg: 24px;
  --rf-content: 1180px;
  --rf-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
  background: var(--rf-green-950);
}

body {
  margin: 0;
  padding: 0;
  background: #f5f7f5;
  color: var(--rf-stone-950);
  font-family: var(--rf-font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body, input, button, select, textarea {
  font-family: var(--rf-font) !important;
}

* {
  box-sizing: border-box;
}

::selection {
  background: #cfe4da;
  color: var(--rf-green-950);
}

a {
  color: var(--rf-green-700);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover, a:focus {
  color: var(--rf-green-900);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(51, 125, 98, .34) !important;
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 100000;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--rf-white);
  color: var(--rf-green-950) !important;
  box-shadow: var(--rf-shadow-md);
  transform: translateY(-180%);
  transition: transform .2s ease;
  font-weight: 700;
}

.skip-link:focus {
  transform: translateY(0);
}

#site {
  min-height: 100%;
  overflow-x: clip;
  background: #f5f7f5;
}

#page {
  max-width: var(--rf-content) !important;
  width: min(100%, var(--rf-content));
  margin: 0 auto !important;
  background: transparent;
}

/* Hero and identity */
#toolbar1 {
  margin: 0 calc(50% - 50vw) !important;
  width: 100vw;
  overflow: hidden;
  background: var(--rf-green-950);
}

#toolbar1 .navbar-inner {
  min-height: 300px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background:
    linear-gradient(90deg, rgba(10, 34, 26, .82) 0%, rgba(10, 34, 26, .56) 48%, rgba(10, 34, 26, .28) 100%),
    linear-gradient(0deg, rgba(10, 34, 26, .28), rgba(10, 34, 26, .12)),
    url('../_media/img/xlarge/2017-07-11-ruffieu-dji-13.jpg') center 48% / cover no-repeat;
  color: var(--rf-white);
}

#toolbar1 .container-fluid {
  width: min(100%, var(--rf-content));
  min-height: 300px;
  margin: 0 auto;
  padding: 54px 28px 36px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

#toolbar1_l,
#toolbar1_r {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#toolbar1_l > li,
#toolbar1_r > li {
  float: none !important;
}

#logo {
  display: block;
  padding: 0 !important;
  color: var(--rf-white) !important;
  text-decoration: none !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .35);
}

#logo #logo-lt,
#logo #logo-rt {
  display: inline;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--rf-white) !important;
  font-family: var(--rf-font) !important;
  font-size: clamp(2rem, 5vw, 4.3rem) !important;
  line-height: 1.02 !important;
  font-weight: 800 !important;
  letter-spacing: -.045em;
  text-shadow: 0 3px 20px rgba(0, 0, 0, .36) !important;
}

#logo #logo-lt {
  margin-right: .16em !important;
}

#logo #logo-sl {
  display: block;
  margin-top: 12px;
  color: rgba(255, 255, 255, .92) !important;
  font-size: clamp(.88rem, 1.5vw, 1.05rem) !important;
  line-height: 1.4;
  font-weight: 550;
  letter-spacing: .015em;
}

#searchbox {
  margin: 0 0 4px !important;
}

#searchbox > input,
#searchbox > input:focus {
  width: min(260px, 33vw) !important;
  height: 44px;
  margin: 0;
  padding: 10px 16px 10px 42px !important;
  border: 1px solid rgba(255, 255, 255, .46) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .95) url(search-white.png) no-repeat 16px center !important;
  background-size: 15px 15px !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .16) !important;
  color: #1f2b26;
  font-size: 15px;
  font-style: normal;
}

#searchbox > input::placeholder {
  color: #64726b;
}

/* Primary navigation */
#toolbar3 {
  position: sticky;
  top: 0;
  z-index: 9990;
  margin: 0 calc(50% - 50vw) !important;
  width: 100vw;
  background: rgba(16, 43, 35, .96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 20px rgba(16, 43, 35, .14);
}

#toolbar3 .navbar-inner {
  width: min(100%, var(--rf-content));
  margin: 0 auto !important;
  padding: 0 24px !important;
  min-height: 64px;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--rf-white) !important;
  display: flex;
  align-items: center;
  border: 0 !important;
}

#toolbar3 .container-fluid {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
}

#toolbar3_l {
  float: none !important;
  padding: 0 !important;
  border: 0 !important;
}

#toolbar3 .nav-collapse {
  flex: 1 1 auto;
}

#mainmenu {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin: 0 !important;
}

#mainmenu > li,
#mainmenu > ul.nav,
#mainmenu > ul.nav > li {
  float: none !important;
  margin: 0 !important;
}

#mainmenu > ul.nav {
  display: contents;
}

#mainmenu > li > a,
#mainmenu > ul.nav > li > a,
#mainmenu .dropdown-toggle {
  display: flex;
  min-height: 64px;
  align-items: center;
  padding: 0 15px !important;
  border-radius: 0;
  color: rgba(255,255,255,.88) !important;
  font-size: 14px !important;
  font-weight: 650;
  letter-spacing: .005em;
  text-decoration: none;
  background: transparent !important;
  transition: background-color .16s ease, color .16s ease;
}

#mainmenu > li > a:hover,
#mainmenu > li > a:focus,
#mainmenu > li.active > a,
#mainmenu .dropdown-toggle:hover,
#mainmenu li.dropdown.open > .dropdown-toggle {
  color: var(--rf-white) !important;
  background: rgba(255,255,255,.11) !important;
}

#mainmenu > li.active > a {
  box-shadow: inset 0 -3px 0 var(--rf-gold);
}

#mainmenu .dropdown-menu {
  margin: 0;
  padding: 8px;
  min-width: 250px;
  border: 1px solid var(--rf-stone-200);
  border-radius: 12px;
  background: var(--rf-white);
  box-shadow: var(--rf-shadow-md);
}

#mainmenu .dropdown-menu > li > a {
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--rf-stone-800) !important;
  font-size: 14px;
  line-height: 1.35;
}

#mainmenu .dropdown-menu > li > a:hover,
#mainmenu .dropdown-menu > li > a:focus {
  background: var(--rf-green-050);
  color: var(--rf-green-900) !important;
}

#sharebox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 14px;
}

#sharebox a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  opacity: .82;
  transition: background-color .16s ease, opacity .16s ease;
}

#sharebox a:hover,
#sharebox a:focus {
  opacity: 1;
  background: rgba(255,255,255,.10);
}

#sharebox img {
  width: 24px !important;
  height: 24px !important;
}

.btn-navbar {
  min-width: 92px;
  margin: 10px 0 !important;
  padding: 9px 14px !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.08) !important;
  color: white !important;
  box-shadow: none !important;
}

.btn-navbar span {
  color: white !important;
  font-weight: 700;
}

/* Main content */
#content {
  padding: 0 22px 40px;
}

#topic {
  margin: 0 !important;
  padding: 34px 0 26px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--rf-stone-950) !important;
}

#topic-inner {
  padding: 0;
}

#top-content,
#top-sb {
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: var(--rf-stone-950) !important;
  text-shadow: none !important;
}

#top-content > .tw-para:first-child:not([id]) {
  margin: 0 0 22px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--rf-stone-200);
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  box-shadow: none;
}

#top-content > .tw-para:first-child:not([id]) ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#top-content > .tw-para:first-child:not([id]) li {
  margin: 0;
}

#top-content > .tw-para:first-child:not([id]) a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--rf-green-100);
  color: var(--rf-green-900) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

#top-content > .tw-para:first-child:not([id]) a:hover,
#top-content > .tw-para:first-child:not([id]) a:focus {
  background: #d9e9e1;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  color: var(--rf-green-950);
  font-family: var(--rf-font) !important;
  font-weight: 760;
  letter-spacing: -.02em;
  text-shadow: none !important;
}

h1 {
  margin-bottom: 24px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
}

h2 {
  margin-bottom: 16px;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.18;
}

h3 {
  margin-bottom: 12px;
  font-size: 1.25rem;
  line-height: 1.25;
}

.twpara-row {
  margin-bottom: 22px;
}

.twpara-row > .tw-para,
#top-sb > .tw-para,
#content > .tw-para,
#topic-inner > .tw-para {
  padding: 24px !important;
  border: 1px solid var(--rf-stone-200);
  border-radius: var(--rf-radius-md);
  background: var(--rf-white);
  color: var(--rf-stone-800) !important;
  box-shadow: var(--rf-shadow-sm);
}

.tw-para {
  color: var(--rf-stone-800) !important;
  text-shadow: none !important;
  overflow-wrap: anywhere;
}

.tw-para .ptext,
.tw-para .ptext p,
.tw-para .ptext div,
.tw-para.twps-highlight .ptext {
  color: var(--rf-stone-800) !important;
  font-family: var(--rf-font) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  text-shadow: none !important;
}

.tw-para .ptext p:last-child,
.tw-para .ptext div:last-child {
  margin-bottom: 0;
}

.tw-para a:not(.btn),
#footersmall a {
  color: var(--rf-green-700) !important;
}

.tw-para a:not(.btn):hover,
.tw-para a:not(.btn):focus {
  color: var(--rf-green-950) !important;
}

.tw-para img,
.pobj img,
.thumbnail img,
.gallery-idx img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.pobj a:has(img) {
  display: inline-block;
  border-radius: 12px;
}

.frm-thin-border,
.frm-wide-border,
.frm-drop-shadow,
.frm-polaroid {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.hdate {
  left: 0 !important;
  width: auto !important;
  min-height: 0 !important;
  padding-left: 56px;
}

.hdate:before,
.hdate:after {
  left: 0 !important;
  box-shadow: none !important;
}

.hdate:before {
  background: var(--rf-green-100) !important;
  color: var(--rf-green-900) !important;
}

.hdate:after {
  background: var(--rf-green-800) !important;
  color: white !important;
}

blockquote {
  margin: 22px 0;
  padding: 16px 20px;
  border-left: 4px solid var(--rf-green-600);
  background: var(--rf-green-050);
  color: var(--rf-stone-800);
}

hr {
  border: 0;
  border-top: 1px solid var(--rf-stone-200);
}

/* Galleries */
.thumbnail {
  border: 1px solid var(--rf-stone-200) !important;
  border-radius: 14px !important;
  background: var(--rf-white) !important;
  box-shadow: var(--rf-shadow-sm) !important;
  transition: transform .16s ease, box-shadow .16s ease;
}

.thumbnail:hover {
  transform: translateY(-2px);
  box-shadow: var(--rf-shadow-md) !important;
}

.thumbnail > .caption {
  border: 0 !important;
  padding: 12px 14px !important;
}

.gallery-idx a > img {
  border: 1px solid var(--rf-stone-200) !important;
  transition: transform .16s ease, box-shadow .16s ease;
}

.gallery-idx a > img:hover {
  transform: translateY(-2px);
  border-color: var(--rf-green-600) !important;
  box-shadow: var(--rf-shadow-md);
}

/* Buttons and forms */
.btn,
button,
input[type="submit"],
input[type="button"] {
  border-radius: 10px !important;
  box-shadow: none !important;
}

.btn-primary,
input[type="submit"].btn-primary {
  border-color: var(--rf-green-800) !important;
  background: var(--rf-green-800) !important;
  color: white !important;
}

.btn-primary:hover,
.btn-primary:focus {
  border-color: var(--rf-green-950) !important;
  background: var(--rf-green-950) !important;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
select {
  border: 1px solid #bdc9c3 !important;
  border-radius: 10px !important;
  background: white;
  box-shadow: none !important;
}

/* Tables */
table {
  max-width: 100%;
  border-collapse: collapse;
}

table th,
table td {
  padding: 10px 12px;
  border-color: var(--rf-stone-200) !important;
}

table th {
  background: var(--rf-green-050);
  color: var(--rf-green-950);
}

/* Old per-article social bars are hidden to reduce visual clutter and third party noise. */
.twsharebtnbar-left,
.twsharebtnbar-right,
.twsharebtnbar-center,
.tw-blogbar {
  display: none !important;
}

/* Pagination and album navigation */
#mpnav-top,
#mpnav-bottom {
  margin-bottom: 20px;
}

.mpnav-prevnext-btns a,
.pagination a {
  border-radius: 8px !important;
}

/* Footer */
footer {
  margin: 34px calc(50% - 50vw) 0 !important;
  width: 100vw;
  background: var(--rf-green-950);
  color: rgba(255,255,255,.84);
}

#footerfat,
#footersmall {
  width: min(100%, var(--rf-content));
  margin: 0 auto !important;
}

#footerfat {
  padding: 38px 24px 24px;
  background: transparent !important;
}

#footerfat .row-fluid {
  display: flex;
  gap: 30px;
}

#footerfat .tw-para,
#footerfat .tw-para p,
#footerfat_s1,
#footerfat_s2,
#footerfat_s3 {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.76) !important;
  font-family: var(--rf-font) !important;
  font-style: normal !important;
  text-shadow: none !important;
}

#footerfat strong {
  display: inline-block;
  margin-bottom: 10px;
  color: white;
  font-size: 15px;
  letter-spacing: .02em;
}

#footerfat a,
#footersmall a {
  color: #d6e8df !important;
}

#footersmall {
  padding: 18px 24px 28px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.62);
  font-size: 13px;
}

.toTop {
  right: 20px !important;
  bottom: 20px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px !important;
  background: rgba(16,43,35,.9) !important;
  box-shadow: var(--rf-shadow-md);
  color: white !important;
}

.toTop i,
.toTopLink {
  color: white !important;
}

/* Colorbox */
#colorbox,
#cboxOverlay,
#cboxWrapper {
  z-index: 10050 !important;
}

#cboxContent {
  border-radius: 12px;
}

/* Responsive */
@media (max-width: 979px) {
  #toolbar1 .navbar-inner,
  #toolbar1 .container-fluid {
    min-height: 250px;
  }

  #toolbar1 .container-fluid {
    padding: 36px 22px 26px;
  }

  #toolbar3 .container-fluid {
    display: block;
    min-height: auto;
  }

  #toolbar3 .navbar-inner {
    display: block;
    padding: 0 18px !important;
  }

  #toolbar3_r {
    float: right !important;
    margin-top: 8px !important;
  }

  #mainmenu {
    display: block;
    padding: 8px 0 14px;
  }

  #mainmenu > li,
  #mainmenu > ul.nav,
  #mainmenu > ul.nav > li {
    display: block !important;
  }

  #mainmenu > li > a,
  #mainmenu > ul.nav > li > a,
  #mainmenu .dropdown-toggle {
    min-height: 44px;
    padding: 10px 12px !important;
    border-radius: 9px;
  }

  #mainmenu > li.active > a {
    box-shadow: inset 3px 0 0 var(--rf-gold);
  }

  #mainmenu .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin: 4px 0 8px 16px;
    box-shadow: none;
  }
}

@media (max-width: 767px) {
  #page {
    width: 100%;
  }

  #toolbar1 .container-fluid {
    min-height: 225px;
    padding: 28px 18px 22px;
    align-items: flex-end;
  }

  #toolbar1_r {
    display: none;
  }

  #logo #logo-lt,
  #logo #logo-rt {
    font-size: clamp(2.2rem, 12vw, 3.4rem) !important;
  }

  #content {
    padding: 0 14px 28px;
  }

  #topic {
    padding-top: 20px;
  }

  .twpara-row > .tw-para,
  #top-sb > .tw-para,
  #content > .tw-para,
  #topic-inner > .tw-para {
    padding: 18px !important;
    border-radius: 14px;
  }

  #footerfat .row-fluid {
    display: block;
  }

  #footerfat .span4 {
    width: 100% !important;
    margin: 0 0 24px !important;
  }

  #footersmall .span6 {
    width: 100% !important;
    margin: 0 0 8px !important;
    text-align: left !important;
  }

  #footersmall #foot-sec2,
  #footersmall #foot-sec2 > div {
    text-align: left !important;
  }
}

@media (max-width: 480px) {
  #toolbar1 .navbar-inner,
  #toolbar1 .container-fluid {
    min-height: 205px;
  }

  #sharebox {
    display: none;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.45rem;
  }

  .hdate {
    padding-left: 0;
  }

  .hdate:before,
  .hdate:after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  #toolbar3,
  #sharebox,
  .toTop,
  .skip-link {
    display: none !important;
  }

  body,
  #site,
  #page,
  .tw-para {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }
}

/* Final cleanup of legacy presentation elements superseded by the new hero. */
#main-carousel {
  display: none !important;
}

#content > h1 {
  margin: 36px 0 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--rf-green-950) !important;
  font-family: var(--rf-font) !important;
  font-size: clamp(2rem, 4vw, 3.1rem) !important;
  line-height: 1.08 !important;
  font-weight: 780 !important;
  letter-spacing: -.035em;
  text-align: left !important;
  text-shadow: none !important;
}

#content > h1 span {
  display: inline-block;
  margin-left: .35em;
  color: var(--rf-stone-500) !important;
  font-size: .36em !important;
  font-weight: 650 !important;
  letter-spacing: 0;
  vertical-align: .22em;
}

#toolbar3_r {
  order: 3;
  margin-left: auto !important;
}

#toolbar3 .nav-collapse {
  order: 1;
}

#toolbar3 .btn-navbar {
  order: 1;
}

@media (max-width: 767px) {
  #content > h1 {
    margin: 26px 0 22px !important;
  }

  #content > h1 span {
    display: block;
    margin: 7px 0 0;
    font-size: .48em !important;
    vertical-align: baseline;
  }
}