/*
 * Parlons Running - modern visual override
 * Add this file AFTER base.css, skeleton.css, child.css and layout.css.
 * This file changes presentation only; it does not replace PHP/HTML or URLs.
 */

:root {
  --pr-ink: #17232f;
  --pr-blue: #218fc0;
  --pr-blue-dark: #176b91;
  --pr-paper: #ffffff;
  --pr-page: #edf3f7;
  --pr-text: #263746;
  --pr-muted: #617181;
  --pr-border: #dbe4eb;
  --pr-radius: 10px;
  --pr-shadow: 0 8px 28px rgba(23, 35, 47, .08);
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--pr-text);
  background: var(--pr-page) !important;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}
body .page-wrapper { background: transparent !important; }
a, a:visited { color: var(--pr-blue-dark); text-decoration: none; }
a:hover, a:focus { color: var(--pr-blue); text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* Header and navigation */
.header {
  min-width: 0;
  background: var(--pr-ink);
  border-bottom: 4px solid var(--pr-blue);
}
.header .container {
  max-width: 1240px;
  width: calc(100% - 40px);
  padding-top: 0;
}
.header .nav {
  height: auto;
  min-height: 82px;
  margin-bottom: 0;
  background: var(--pr-ink) !important;
  border: 0;
}
.header .logo {
  top: 10px;
  background: transparent !important;
  border-radius: 0;
}
.header .logo img { max-width: 100%; height: auto; }
.header .shadow { display: none; }
.header .nav .standard ul.tabs li {
  height: auto;
  min-height: 78px;
  margin: 0;
  padding: 0;
  background: none !important;
  border-bottom: 4px solid transparent;
  box-sizing: border-box;
}
.header .nav .standard ul.tabs li a {
  display: block;
  padding: 26px 16px 22px;
  color: #f5f8fb;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  text-shadow: none;
}
.header .nav .standard ul.tabs li a.active,
.header .nav .standard ul.tabs li a:hover,
.header .nav .standard ul.tabs li:hover {
  color: #fff;
  background: rgba(255,255,255,.05);
  border-bottom-color: var(--pr-blue);
}
.header .nav a.active span.indicator { display: none; }
.header .menu li.submenu ul.child {
  margin-top: 0;
  width: 220px;
  left: 50%;
  margin-left: -110px;
  padding: 6px 0;
  background: var(--pr-ink) !important;
  border: 1px solid rgba(255,255,255,.12);
  border-top: 3px solid var(--pr-blue);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,.2);
  opacity: 1;
}
.header .menu li.submenu ul.child li,
.header .menu li.submenu ul.child li a {
  width: 100%;
  box-sizing: border-box;
  background: transparent !important;
}
.header .menu li.submenu ul.child li a {
  padding: 10px 18px;
  color: #e7eef4;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  border: 0;
}
.header .menu li.submenu ul.child li a:hover {
  color: #fff;
  background: rgba(33,143,192,.22) !important;
}
.header .menu li.submenu .bf { display: none; }

/* Decorative old blue masthead: keep its position but make it subtle */
body .slug-pattern {
  height: 285px;
  background: linear-gradient(135deg, #176b91 0%, #218fc0 100%) !important;
}
body .slug-pattern .overlay,
body .slug-pattern .slug-cut { display: none; }
body .slug-pattern .background-image { opacity: .14; }
.header .page-title { top: 26px; margin-bottom: 26px; }
.header .page-title .rg { display: none; }
.header .page-title h1 {
  top: 0;
  color: #fff;
  font-size: clamp(25px, 3vw, 36px);
  font-style: normal;
  font-weight: 700;
  line-height: 1.25;
  text-shadow: none;
}

/* Main page panel */
.body { width: 100%; }
.body .body-round {
  width: min(1240px, calc(100% - 40px));
  height: 0;
  background: none !important;
}
.body .body-wrapper {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto 36px;
  min-height: 50px;
  background: var(--pr-paper) !important;
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius);
  box-shadow: var(--pr-shadow);
  overflow: visible;
}
.body .body-wrapper .content {
  padding: clamp(20px, 3.2vw, 42px);
}
.side-shadows { display: none; }

/* Typography and reusable content elements */
h1, h2, h3, h4, h5, h6 {
  color: var(--pr-ink);
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 700;
  text-shadow: none;
}
h1 { font-size: clamp(27px, 3vw, 38px); line-height: 1.25; }
h2 { font-size: clamp(22px, 2.2vw, 29px); line-height: 1.35; }
h3 { font-size: 20px; line-height: 1.4; }
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span { color: var(--pr-blue); }
p { line-height: 1.75; }
blockquote, .body .callout, .tabbed-area, .accordion div.parent h2 {
  border-radius: 6px;
}
.body .callout span { color: var(--pr-blue); }
.body .callout-hr, .body .hr { border-color: var(--pr-border); }
button, input[type="submit"], input[type="button"], a.button {
  border-radius: 6px;
}

/* Tables: improve legibility without changing table structure */
table {
  max-width: 100%;
  border-collapse: collapse;
  border-color: var(--pr-border);
}
th { background: var(--pr-ink); color: #fff; }
th, td { padding: 9px 12px; border-color: var(--pr-border); }
tr:nth-child(even) td { background: #f5f8fa; }

/* Footer */
.footer, .footer .foot-nav, .footer .foot-nav-bg {
  background-color: var(--pr-ink) !important;
}
.footer { color: #e7eef4; }
.footer a, .footer a:visited { color: #8ed7f4; }
.footer a:hover { color: #fff; }
.footer .logo-caption, .footer .logo-caption-overlay { background-color: var(--pr-blue-dark); }

/* Responsive safeguards */
@media (max-width: 900px) {
  .header .container,
  .body .body-round,
  .body .body-wrapper {
    width: calc(100% - 28px);
  }
  .header .nav .standard ul.tabs li a { padding-left: 10px; padding-right: 10px; }
  .body .body-wrapper .content { padding: 24px; }
}
@media (max-width: 767px) {
  .header .container { width: 100%; }
  .header .nav { min-height: 0; }
  .header .logo { top: 8px; }
  .header .nav .standard .tabwrapper { float: none; }
  .header .nav .standard ul.tabs { display: flex; flex-wrap: wrap; justify-content: center; }
  .header .nav .standard ul.tabs li { min-height: 0; height: auto; border-bottom-width: 3px; }
  .header .nav .standard ul.tabs li a { padding: 12px 10px; font-size: 14px; }
  .header .menu li.submenu ul.child { left: 0; margin-left: 0; max-width: 90vw; }
  body .slug-pattern { height: 210px; }
  .header .page-title { top: 20px; padding: 0 16px; box-sizing: border-box; }
  .header .page-title h1 { font-size: 25px; }
  .body .body-round, .body .body-wrapper { width: calc(100% - 20px); }
  .body .body-wrapper .content { padding: 18px; }
  table { display: block; overflow-x: auto; }
}

/* Menu dropdown corrections: compact rows, no underlined parent links,
   and consistent backgrounds for nested dropdowns. */
.header .nav .standard ul.tabs li,
.header .nav .standard ul.tabs li:hover {
  border-bottom-color: transparent !important;
}
.header .nav .standard ul.tabs li > a,
.header .nav .standard ul.tabs li > a:hover,
.header .nav .standard ul.tabs li > a:focus,
.header .nav .standard ul.tabs li > a.active {
  text-decoration: none !important;
}
.header .menu li.submenu ul.child,
.header .menu li.submenu ul.child ul,
.header .menu li.submenu ul.child li.submenu ul,
.header .menu li.submenu ul.child li ul {
  height: auto !important;
  min-height: 0 !important;
  padding: 4px 0 !important;
  background: var(--pr-ink) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.2);
}
.header .menu li.submenu ul.child {
  border-top: 2px solid var(--pr-blue) !important;
}
.header .menu li.submenu ul.child li,
.header .menu li.submenu ul.child li.submenu,
.header .menu li.submenu ul.child li a,
.header .menu li.submenu ul.child li.submenu > a,
.header .menu li.submenu ul.child li ul li,
.header .menu li.submenu ul.child li ul li a {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background-color: var(--pr-ink) !important;
  box-sizing: border-box;
}
.header .menu li.submenu ul.child li > a,
.header .menu li.submenu ul.child li.submenu > a,
.header .menu li.submenu ul.child li ul li > a {
  display: block !important;
  padding: 10px 18px !important;
  color: #e7eef4 !important;
  line-height: 1.45 !important;
  text-decoration: none !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  background: var(--pr-ink) !important;
}
.header .menu li.submenu ul.child li > a:hover,
.header .menu li.submenu ul.child li.submenu > a:hover,
.header .menu li.submenu ul.child li ul li > a:hover {
  color: #fff !important;
  text-decoration: none !important;
  background: #1b3b50 !important;
}
.header .menu li.submenu ul.child li:last-child > a,
.header .menu li.submenu ul.child li ul li:last-child > a {
  border-bottom: 0 !important;
}

/* Nested dropdowns: show a right-facing indicator and open the next level
   beside (not underneath) the first dropdown. */
.header .menu li.submenu ul.child li.submenu {
  position: relative !important;
}
.header .menu li.submenu ul.child li.submenu > a {
  position: relative !important;
  padding-right: 38px !important;
}
.header .menu li.submenu ul.child li.submenu > a::after {
  content: "›";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #55c5eb;
  font-size: 23px;
  line-height: 1;
  font-weight: 700;
}
.header .menu li.submenu ul.child li.submenu > ul,
.header .menu li.submenu ul.child li.submenu > ul.child {
  position: absolute !important;
  top: 0 !important;
  left: 100% !important;
  right: auto !important;
  margin: 0 !important;
  width: 220px !important;
  min-width: 200px;
  max-width: min(80vw, 280px);
  z-index: 10000 !important;
  display: none;
  padding: 4px 0 !important;
  background: var(--pr-ink) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-top: 3px solid var(--pr-blue) !important;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,.24) !important;
}
.header .menu li.submenu ul.child li.submenu:hover > ul,
.header .menu li.submenu ul.child li.submenu:focus-within > ul {
  display: block !important;
}
/* On narrow screens, keep nested links inside the viewport. */
@media (max-width: 767px) {
  .header .menu li.submenu ul.child li.submenu > ul,
  .header .menu li.submenu ul.child li.submenu > ul.child {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border-left: 3px solid var(--pr-blue) !important;
  }
  .header .menu li.submenu ul.child li.submenu > a::after {
    content: "⌄";
  }
}

/* pour éviter le chevauchement du texte dans les cartes */
#isotope-container .item p {
    line-height: 1.4;
}