/* ---- css/shell.css ---- */
/* Groupe Conseils: shell (tokens, type, header, offcanvas, footer, parallax header band, main row, helper classes).
   Slice a. Colours and sizes are measured on the source (section-spec 0.1, 0.2, 2.1, 2.2, 2.3, 2.23). */

@font-face {
  font-family: 'ITC bold';
  src: url('../fonts/texgyreadventor-bold-webfont.woff2') format('woff2'),
       url('../fonts/texgyreadventor-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ITC';
  src: url('../fonts/texgyreadventor-regular-webfont.woff2') format('woff2'),
       url('../fonts/texgyreadventor-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --gc-text: #3c3c3c;
  --gc-accent: #ea6161;
  --gc-green: #a8d080;
  --gc-yellow: #ffad48;
  --gc-menu-hover: #fbad4a;
  --gc-white: #fff;
  --gc-font: 'ITC', sans-serif;
  --gc-font-bold: 'ITC bold', sans-serif;
  --gc-texture-black: url('../images/black-texture.jpg');
  --gc-texture-light: url('../images/background.jpg');
}

/* Base ---------------------------------------------------------------- */

html, body { overflow-x: clip; }
/* Cassiopeia smooths in-page scrolling; the source jumps */
html { scroll-behavior: auto; }
/* The source's root is UIkit's 14 px (Cassiopeia's rem values, the articles' inline 2.6rem headings, follow it); its Protostar routes stay at 16 px */
html:not(:has(body.gc-protostar)) { font-size: 14px; }

body.site {
  margin: 0;
  background: #fff;
  color: var(--gc-text);
  font-family: var(--gc-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  min-height: 0;
  -webkit-text-size-adjust: 100%;
}

body.site h1, body.site h2, body.site h3,
body.site h4, body.site h5, body.site h6 {
  font-family: var(--gc-font-bold);
  font-weight: 400;
  color: var(--gc-text);
  margin: 25px 0 15px;
  text-transform: none;
}
body.site h1 { font-size: 36px; line-height: 42px; }
body.site h2 { font-size: 24px; line-height: 30px; }
body.site h3 { font-size: 18px; line-height: 24px; }
body.site h4 { font-size: 16px; line-height: 22px; }
body.site h5 { font-size: 14px; line-height: 18px; }
body.site h6 { font-size: 12px; line-height: 18px; }
body.site h1, body.site h2, body.site h3 { text-transform: uppercase; }
body.site :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
body.site h2 > .fat { font-family: var(--gc-font-bold); color: var(--gc-accent); }

body.site p { margin: 0; font-family: var(--gc-font); color: var(--gc-text); }
body.site ul, body.site ol { margin: 0; padding-left: 0; }
body.site strong { font-weight: 400; font-family: var(--gc-font-bold); color: var(--gc-accent); }
body.site li { color: #444; }
body.site hr { border: 0; border-top: 1px solid #ddd; margin: 15px 0; opacity: 1; color: inherit; height: 0; }
body.site img { max-width: 100%; height: auto; }

body.site a {
  color: var(--gc-accent);
  text-decoration: none;
  transition: all ease .3s 0s;
}
body.site a:hover { color: var(--gc-text); text-decoration: underline; }
body.site .green { color: var(--gc-green); }
body.site .pink { color: var(--gc-accent); }
body.site .yellow { color: var(--gc-yellow); }
body.site .light { font-family: var(--gc-font); }

body.site input { height: 30px; }
body.site input, body.site textarea {
  font-family: var(--gc-font);
  border-radius: 0;
  box-shadow: none;
  border: none;
}

/* Button -------------------------------------------------------------- */

body.site .btn {
  display: inline-block;
  background-color: var(--gc-green);
  border: 0;
  border-radius: 2px;
  color: #fff;
  padding: 15px 30px;
  font-family: var(--gc-font-bold);
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  text-transform: uppercase;
  text-decoration: none;
  text-align: inherit;
  cursor: pointer;
  transition: all ease .3s 0s;
}
body.site button.btn { font-size: 13.3333px; line-height: normal; text-align: center; }
body.site .btn:hover, body.site .btn:focus {
  background-color: var(--gc-text);
  color: #fff;
  text-decoration: none;
}
/* The source's .btn keeps the browser focus ring and takes its text alignment from the parent (Cassiopeia centres it; a wrapped label stays left) */
body.site .btn:focus-visible { outline: auto 1px -webkit-focus-ring-color; outline-offset: 0; }

/* Cassiopeia grid off: the source is a stack of full-width bands ------- */

body.site .site-grid { display: block; margin: 0; padding: 0; }
body.site .site-grid > [class*="container-"] { width: auto; max-width: none; }
body.site .grid-child { display: block; width: auto; max-width: none; margin: 0; padding: 0; }
body.wrapper-fluid header > .grid-child,
body.wrapper-fluid footer > .grid-child { padding: 0; }

/* Helper classes the hooks print in place of the uk-* tokens ------------ */

.gc-text-center { text-align: center !important; }
.gc-text-right { text-align: right !important; }
.gc-flex-middle { align-items: center; }

.gc-container { box-sizing: border-box; max-width: 980px; padding: 0 25px; margin-left: auto; margin-right: auto; }
.gc-container::before, .gc-container::after { content: ''; display: table; }
.gc-container::after { clear: both; }
@media (min-width: 1220px) { .gc-container { max-width: 1200px; padding: 0 35px; } }

.gc-grid { display: flex; flex-wrap: wrap; margin: 0 0 0 -25px; padding: 0; list-style: none; }
.gc-grid > * { box-sizing: border-box; flex: none; margin: 0; padding-left: 25px; }
.gc-grid > * > :last-child { margin-bottom: 0; }
@media (min-width: 1220px) {
  .gc-grid { margin-left: -35px; }
  .gc-grid > * { padding-left: 35px; }
}
@media (min-width: 960px) {
  .gc-grid--large { margin-left: -35px; }
  .gc-grid--large > * { padding-left: 35px; }
}
@media (min-width: 1220px) {
  .gc-grid--large { margin-left: -50px; }
  .gc-grid--large > * { padding-left: 50px; }
}
.gc-col-1-2, .gc-col-md-1-2, .gc-col-lg-1-2, .gc-col-lg-1-3, .gc-col-lg-1-4 { width: 100%; }
@media (min-width: 768px) { .gc-col-md-1-2 { width: 50%; } }
@media (min-width: 960px) {
  .gc-col-lg-1-2 { width: 50%; }
  .gc-col-lg-1-3 { width: 33.333%; }
  .gc-col-lg-1-4 { width: 25%; }
}
.gc-col-1-2 { width: 50%; }

/* Round icon bullets (uk-icon-button): FontAwesome from the Joomla media */
.gc-icon, .gc-icon-button {
  font-family: 'Font Awesome 6 Free', 'FontAwesome', sans-serif;
  font-weight: 900;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}
.gc-icon-button {
  box-sizing: border-box;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #eee;
  color: #444;
  text-align: center;
  line-height: 35px;
  font-size: 14px;
  text-decoration: none;
}
.gc-icon--map-marker::before { content: '\f3c5'; }
.gc-icon--phone::before { content: '\f095'; }
.gc-icon--subway::before { content: '\f239'; }
.gc-icon--search::before { content: '\f002'; }

/* Header (SG-02) ------------------------------------------------------ */

body.site header.container-header {
  position: relative;
  z-index: 10;
  display: block;
  margin: 0;
  padding: 0;
  background: var(--gc-texture-black);
  background-color: #eee;
  box-shadow: none;
  color: #fff;
  font-size: 13.86px;
  line-height: 70px;
}
body.site .container-header .grid-child { display: block; padding: 0; }
body.site .container-header .container-below-top,
body.site .container-header .container-nav { display: block; margin: 0; padding: 0; color: #fff; }

body.site .container-header .mod-custom { position: static; }
body.site .container-header .gc-logo,
body.site .container-header .gc-silae {
  line-height: 60px;
  padding-bottom: 10px;
}
body.site .container-header .gc-logo * ,
body.site .container-header .gc-silae * { line-height: 70px; }
body.site .container-header .gc-logo { float: left; margin-left: 3%; }
body.site .container-header .gc-silae {
  float: right;
  margin-right: 3%;
  text-transform: uppercase;
  font-family: var(--gc-font-bold);
}
body.site .container-header .gc-logo p,
body.site .container-header .gc-silae p { margin: 0; font-size: 13.59px; }
body.site .container-header .gc-silae a {
  color: var(--gc-accent);
  font-size: 13.45px;
  text-decoration: none;
}
body.site .container-header .gc-silae a:hover { color: #fff; text-decoration: underline; }
body.site .container-header .gc-logo img { display: inline; vertical-align: middle; }

body.site .container-header .mod-menu.gc-nav {
  display: block;
  float: none;
  max-width: 50%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
  font-size: 13.58px;
}
body.site .container-header .mod-menu.gc-nav > li {
  float: left;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.site .container-header .mod-menu.gc-nav > li::after,
body.site .container-header .mod-menu.gc-nav > li::before { display: none; }
body.site .container-header .mod-menu.gc-nav > li > a {
  display: block;
  box-sizing: border-box;
  height: 40px;
  padding: 0 15px;
  line-height: 70px;
  color: #fff;
  background: transparent;
  font-family: var(--gc-font-bold);
  font-size: 13.3139px;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  transition: all ease .3s 0s;
}
body.site .container-header .mod-menu.gc-nav > li.current > a,
body.site .container-header .mod-menu.gc-nav > li.active > a { color: var(--gc-accent); background: transparent; }
body.site .container-header .mod-menu.gc-nav > li:hover > a,
body.site .container-header .mod-menu.gc-nav > li > a:focus { color: var(--gc-menu-hover); background: transparent; text-decoration: none; outline: 0; }

/* Tablet and phone navbar, up to 1024 px (user-accepted deviation from the source's bar and 270 px offcanvas, round 13): the seven pages
   leave the header for a drawer from the right with a 44 px toggle, MON ESPACE CLIENT as a red button under its cross, ruled 54 px rows,
   the current page in red on a green edge. It is also the navbar on landscape phones and tablets. 1025 px and wider keep the source's bar. */

.gc-nav-toggle, .gc-offcanvas { display: none; }
.gc-nav-toggle { margin: 0; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; }

@media (max-width: 1024px) {
  body.site header.container-header .container-nav > .gc-nav { display: none; }

  /* Toggle: three bars that turn into a cross at the top of the drawer */
  body.site header.container-header .gc-nav-toggle {
    display: block;
    position: absolute;
    top: 18px;
    right: 12px;
    z-index: 1002;
    width: 44px;
    height: 44px;
    border-radius: 2px;
  }
  body.site header.container-header .gc-nav-toggle::before,
  body.site header.container-header .gc-nav-toggle::after {
    content: '';
    position: absolute;
    left: 11px;
    right: 11px;
    top: 21px;
    height: 2px;
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
  }
  body.site header.container-header .gc-nav-toggle::before { box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff; }
  body.site header.container-header .gc-nav-toggle::after { background: transparent; }
  body.site header.container-header .gc-nav-toggle:focus-visible { outline: 2px solid var(--gc-green); outline-offset: 2px; }
  html.gc-offcanvas-page body.site header.container-header .gc-nav-toggle { position: fixed; }
  html.gc-offcanvas-page body.site header.container-header .gc-nav-toggle::before { box-shadow: none; transform: rotate(45deg); }
  html.gc-offcanvas-page body.site header.container-header .gc-nav-toggle::after { background: #fff; transform: rotate(-45deg); }

  /* Backdrop: the page stays visible but dimmed; a tap on it closes the drawer */
  body.site header.container-header .gc-offcanvas {
    display: block;
    visibility: hidden;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }
  body.site header.container-header .gc-offcanvas.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }

  /* Drawer: dark texture, slides in from the right */
  body.site header.container-header .gc-offcanvas__bar {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1001;
    box-sizing: border-box;
    width: min(86vw, 340px);
    overflow-y: auto;
    padding: 0 0 32px;
    background: var(--gc-texture-black);
    background-color: #262626;
    box-shadow: -10px 0 28px rgba(0, 0, 0, .4);
    transform: translateX(100%);
    transition: transform .3s ease-in-out;
  }
  body.site header.container-header .gc-offcanvas.is-open .gc-offcanvas__bar { transform: translateX(0); }
  /* The head (cross and MON ESPACE CLIENT ride above it) stays pinned, so a drawer taller than the screen scrolls its rows under it */
  body.site header.container-header .gc-offcanvas__bar::before {
    content: '';
    display: block;
    position: sticky;
    top: 0;
    z-index: 1;
    height: 148px;
    background: var(--gc-texture-black);
    background-color: #262626;
  }
  /* display: Cassiopeia's .container-header .mod-menu is a row from 992 px */
  body.site header.container-header .gc-offcanvas__bar ul { display: block; list-style: none; margin: 0; padding: 0; font-family: var(--gc-font-bold); font-size: 16px; line-height: 1.2; }
  body.site header.container-header .gc-offcanvas__bar li { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .1); }
  body.site header.container-header .gc-offcanvas__bar li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  body.site header.container-header .gc-offcanvas__bar li > a {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 54px;
    padding: 12px 24px;
    color: #fff;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    background: transparent;
  }
  body.site header.container-header .gc-offcanvas__bar li > a:hover,
  body.site header.container-header .gc-offcanvas__bar li > a:focus { background: rgba(255, 255, 255, .06); color: var(--gc-menu-hover); }
  body.site header.container-header .gc-offcanvas__bar li > a:focus-visible { outline: 2px solid var(--gc-green); outline-offset: -4px; }
  /* The page you are on: red label, green rule on the drawer edge */
  body.site header.container-header .gc-offcanvas__bar li.current > a,
  body.site header.container-header .gc-offcanvas__bar li.active > a {
    background: rgba(255, 255, 255, .06);
    color: var(--gc-accent);
    box-shadow: inset 4px 0 0 var(--gc-green);
  }
  body.site header.container-header .gc-offcanvas__bar ul ul { font-size: 14px; }
  body.site header.container-header .gc-offcanvas__bar ul ul li { border-top: 0; }
  body.site header.container-header .gc-offcanvas__bar ul ul a { min-height: 44px; padding-left: 44px; color: #ccc; }

  /* MON ESPACE CLIENT: a red button under the cross, riding with the drawer */
  body.site header.container-header .gc-silae {
    display: block;
    position: fixed;
    top: 84px;
    right: 16px;
    z-index: 1002;
    float: none;
    width: calc(min(86vw, 340px) - 32px);
    margin: 0;
    padding: 0;
    line-height: 1.2;
    transform: translateX(120%);
    visibility: hidden;
    transition: transform .3s ease-in-out, visibility 0s linear .3s;
  }
  html.gc-offcanvas-page body.site header.container-header .gc-silae { transform: translateX(0); visibility: visible; transition-delay: 0s; }
  body.site header.container-header .gc-silae * { line-height: 1.2; }
  body.site header.container-header .gc-silae a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 2px;
    background: var(--gc-accent);
    color: #fff;
    font-size: 14px;
    letter-spacing: .05em;
  }
  body.site header.container-header .gc-silae a:hover,
  body.site header.container-header .gc-silae a:focus { background: #fff; color: var(--gc-accent); text-decoration: none; }
  body.site header.container-header .gc-silae a:focus-visible { outline: 2px solid var(--gc-green); outline-offset: 3px; }

  /* Landscape phones: the button sits beside the cross, so more rows show before the drawer scrolls */
  @media (max-height: 520px) {
    body.site header.container-header .gc-offcanvas__bar::before { height: 74px; }
    body.site header.container-header .gc-silae { top: 18px; right: 68px; width: calc(min(86vw, 340px) - 84px); }
  }
}

/* Footer (SG-03) ------------------------------------------------------ */

body.site footer.container-footer {
  margin: 0;
  padding: 60px 2%;
  background: var(--gc-texture-black);
  background-repeat: repeat;
  background-color: #eee;
  color: #fff;
}
body.site footer.container-footer .grid-child { display: block; padding: 0; }
body.site .gc-footer { display: flex; flex-wrap: wrap; margin-left: -25px; }
body.site .gc-footer > div { box-sizing: border-box; flex: none; width: 100%; margin: 0; padding-left: 25px; }
body.site .gc-footer p, body.site .gc-footer a, body.site .gc-footer ul li { color: #fff; }
body.site .gc-footer ul { margin: 0 0 15px; padding: 0; list-style: none; }
body.site .gc-footer ul li {
  list-style: none;
  display: inline-block;
  margin: 0;
  padding-right: 20px;
  font-family: var(--gc-font-bold);
  text-transform: uppercase;
}
body.site .gc-footer ul li:last-child { padding-right: 0; }
body.site .gc-footer ul li a:hover { color: var(--gc-accent); text-decoration: none; }
body.site .gc-footer p a:hover { color: var(--gc-text); text-decoration: underline; }
body.site .gc-footer > div > :last-child { margin-bottom: 0; }
@media (min-width: 960px) {
  body.site .gc-footer { margin-left: -35px; }
  body.site .gc-footer > div { width: 33.333%; padding-left: 35px; }
}
@media (min-width: 1220px) {
  body.site .gc-footer { margin-left: -50px; }
  body.site .gc-footer > div { padding-left: 50px; }
}

/* Main content row (SG-24) -------------------------------------------- */

body.site .container-component { margin: 0; padding: 0; }
body.site .container-component > main { display: block; }
/* Cassiopeia spaces the component's children by 1em (14 px here); the source's page body starts at the band */
body.site .container-component > :first-child,
body.site .container-component > * + * { margin-top: 0; }
body.site .item-page,
body.site .com-content-article {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 0;
}
body.site .com-content-article__body { margin: 0; padding: 0; }
/* Source defect: .item-page has padding 50px 0, so the text pages (services, blog article, legal, contact) touch the screen edge below 1250 px.
   25 px is the gutter of the site's own bands (uk-container); tablet and phone only (up to 1024 px), desktop keeps the source's 1200 px box */
@media (max-width: 1024px) {
  body.site .item-page.com-content-article:is(.gc-services, .gc-blog-gc, .gc-legal, .gc-contact) { box-sizing: border-box; max-width: 1250px; padding-left: 25px; padding-right: 25px; }
}

/* Parallax header band (SG-04): inside pages, image pinned to its natural size */

body.site .gc-band--header {
  position: relative;
  display: flex;
  height: 30vh;
  overflow: hidden;
  background-color: #eee;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1900px 562px;
}
body.site .gc-band--header h2 {
  margin: auto 5% auto auto;
  text-align: right;
  font-size: 37px;
  line-height: 48px;
  position: relative;
  z-index: 1;
}
body.site .gc-band--header h2 > span { color: #fff; font-size: 43px; }

/* Parallax images painted by user.js: the band keeps its own layer */
.gc-parallax { position: relative; }
.gc-parallax > .gc-parallax__layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}
.gc-parallax > :not(.gc-parallax__layer) { position: relative; z-index: 1; }

/* Cassiopeia's .5em margin and flex sizing on the modules of the band positions: the source's bands touch */
body.site .container-top-a > *, body.site .container-top-b > *,
body.site .container-bottom-a > *, body.site .container-bottom-b > * { margin: 0; flex: none; }

/* The source's #blog-gc ul { padding-left: 30px } reaches the header menu and the footer links on the blog pages too */
body.site.gc-blog-gc .container-header .mod-menu.gc-nav { box-sizing: content-box; padding-left: 30px; }
body.site.gc-blog-gc .gc-footer ul { padding-left: 30px; }

/* Tab panels: the source's switcher shows nothing until its script has run; with JS off the panels stay visible */
html.gc-js .gc-tabs:not(.gc-tabs--ready) .gc-tabs__panels { display: none; }

/* ---- css/home.css ---- */
/* Groupe Conseils: home (hero slideshow, icon row, about band, quote band). Slice a, groups SG-05 to SG-07.
   Numbers: section-spec 2.4 to 2.6 and the home table of section 5. */

/* Hero (SG-05): the source's UIkit slideshow, rebuilt natively in user.js -------- */

body.gc-home .gc-hero { position: relative; }
body.gc-home .gc-hero__slides {
  position: relative;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  aspect-ratio: 1900 / 682;
  min-height: 300px;
  background: #fff;
}
body.gc-home .gc-hero__slide {
  position: absolute;
  inset: 0;
  min-height: 300px;
  margin: 0;
  padding: 0;
  list-style: none;
  visibility: hidden;
}
body.gc-home .gc-hero__slide.is-active { visibility: visible; z-index: 1; }
body.gc-home .gc-hero__slide > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* the source's `.header` is a flex box 60vh high, centred on the slide; its h2 centres inside it (top-aligned when taller) */
body.gc-home .gc-hero__caption {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 60vh;
  margin-top: -30vh;
  z-index: 3;
  box-sizing: border-box;
  display: flex;
  padding: 0 20px;
  opacity: 0;
  transition: opacity .8s ease-out;
}
body.gc-home .gc-hero__slide.is-active .gc-hero__caption { opacity: 1; }
body.gc-home .gc-hero__caption h2 {
  margin: auto auto auto 10%;
  font-size: 40px;
  line-height: 60px;
  color: #000;
}
body.gc-home .gc-hero__caption h2 > span { font-family: var(--gc-font-bold); font-size: 82px; }
body.gc-home .gc-hero__caption a.btn {
  display: inline-block;
  position: relative;
  width: fit-content;
  height: fit-content;
  margin-top: 2%;
  font-size: inherit;
  line-height: inherit;
}
body.gc-home .gc-hero__caption button.btn {
  position: absolute;
  top: 50vh;
  left: 0;
  margin-left: 10%;
  padding: 10px;
  border: 0;
  font-size: 13.3333px;
  line-height: normal;
}
@media (max-width: 414px) {
  body.gc-home .gc-hero__caption h2 { font-size: 24px; line-height: 34px; }
  body.gc-home .gc-hero__caption h2 > span { font-size: 48px; }
}

/* Slices of the slice-up-down transition (built by user.js) */
body.gc-home .gc-hero__slice-layer { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
body.gc-home .gc-hero__slice { position: absolute; top: 0; height: 100%; overflow: hidden; background-repeat: no-repeat; will-change: transform; }

/* Slide arrows (UIkit .uk-slidenav, hidden on touch): 60 px #a8d080 circles holding the Font Awesome 4 angle glyph (60 px type at a 50 px line
   height, drawn as an SVG mask so no icon font is needed), coloured rgba(50,50,50,.4) and .7 on hover; shown while the pointer is over the slideshow at every width */
body.gc-home .gc-hero__arrow {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 4;
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  margin-top: -30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gc-green);
  color: rgba(50, 50, 50, .4);
  cursor: pointer;
}
body.gc-home .gc-hero__arrow:hover, body.gc-home .gc-hero__arrow:focus { outline: 0; color: rgba(50, 50, 50, .7); }
body.gc-home .gc-hero__arrow:active { color: rgba(50, 50, 50, .9); }
body.gc-home .gc-hero__arrow--prev { left: 20px; }
body.gc-home .gc-hero__arrow--next { right: 20px; }
body.gc-home .gc-hero__arrow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: var(--gc-arrow) center / 100% 100% no-repeat;
  mask: var(--gc-arrow) center / 100% 100% no-repeat;
}
body.gc-home .gc-hero__arrow--prev { --gc-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M39.94 16.9 26.79 30.06 39.94 43.22Q40.28 43.55 40.28 43.99Q40.28 44.42 39.94 44.76L38.27 46.43Q37.94 46.76 37.5 46.76Q37.06 46.76 36.73 46.43L21.13 30.83Q20.79 30.49 20.79 30.06Q20.79 29.62 21.13 29.29L36.73 13.68Q37.06 13.35 37.5 13.35Q37.94 13.35 38.27 13.68L39.94 15.36Q40.28 15.69 40.28 16.13Q40.28 16.56 39.94 16.9Z'/%3E%3C/svg%3E"); }
body.gc-home .gc-hero__arrow--next { --gc-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M38.87 30.83 23.27 46.43Q22.94 46.76 22.5 46.76Q22.06 46.76 21.73 46.43L20.06 44.76Q19.72 44.42 19.72 43.99Q19.72 43.55 20.06 43.22L33.21 30.06L20.06 16.9Q19.72 16.56 19.72 16.13Q19.72 15.69 20.06 15.36L21.73 13.68Q22.06 13.35 22.5 13.35Q22.94 13.35 23.27 13.68L38.87 29.29Q39.21 29.62 39.21 30.06Q39.21 30.49 38.87 30.83Z'/%3E%3C/svg%3E"); }
@media (hover: hover) {
  body.gc-home .gc-hero:hover .gc-hero__arrow { display: block; }
}

/* Icon row (SG-06) ------------------------------------------------------ */

body.gc-home .gc-band--discover {
  padding: 50px;
  background: var(--gc-texture-light);
}
body.gc-home .gc-band--discover .gc-container { max-width: 980px; }
@media (min-width: 1220px) { body.gc-home .gc-band--discover .gc-container { max-width: 1200px; } }
body.gc-home .gc-discover {
  display: flex;
  flex-wrap: wrap;
  margin-left: -25px;
  text-align: center;
}
body.gc-home .gc-discover__item { box-sizing: border-box; flex: none; width: 100%; padding: 0 5%; }
@media (min-width: 960px) {
  body.gc-home .gc-discover { margin-left: -35px; }
  body.gc-home .gc-discover__item { width: 33.333%; }
}
@media (min-width: 1220px) { body.gc-home .gc-discover { margin-left: -50px; } }
body.gc-home .gc-discover__item > :last-child { margin-bottom: 0; }
body.gc-home .gc-discover p { font-size: 13px; line-height: 17px; }
body.gc-home .gc-discover h3 { margin: 25px 0 15px; }
body.gc-home .gc-discover__icon {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  transition: all ease .3s 0s;
}
body.gc-home .gc-discover__icon--localisation:hover { background: url('../images/icones/localisation_actif.svg') center / contain no-repeat; }
body.gc-home .gc-discover__icon--app:hover { background: url('../images/icones/app_actif.svg') center / contain no-repeat; }
body.gc-home .gc-discover__icon--espace:hover { background: url('../images/icones/espace_client_actif.svg') center / contain no-repeat; }
body.gc-home .gc-discover i.fa-3x { font-size: 3em; }

/* About and quote (SG-07) ----------------------------------------------- */

body.gc-home .gc-band--about { margin: 50px 0; --m: 25px; }
@media (min-width: 1220px) { body.gc-home .gc-band--about { --m: 35px; } }
body.gc-home .gc-band--about > h2 { padding: 0 25px; margin: 0 auto 15px; max-width: 1650px; box-sizing: border-box; }
body.gc-home .gc-about {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: content-box;
  width: calc(min(100%, 1650px) - 50px + var(--m));
  margin-left: calc(max(0px, (100% - 1650px) / 2) + 25px - var(--m));
  text-align: left;
}
body.gc-home .gc-about__image,
body.gc-home .gc-about__text { box-sizing: border-box; flex: none; width: 100%; margin: 0; padding-left: var(--m); }
@media (min-width: 768px) {
  body.gc-home .gc-about__image, body.gc-home .gc-about__text { width: 50%; }
}
body.gc-home .gc-about__image { text-align: center; }
body.gc-home .gc-about__image img {
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
  border: 5px solid var(--gc-yellow);
  padding: 20px;
  vertical-align: middle;
  transition: transform .3s ease-in-out;
}
body.gc-home .gc-about__image { overflow: hidden; }
body.gc-home .gc-about__image:hover img { transform: scale(1.1); }
body.gc-home .gc-about__text { padding: 30px 30px 30px calc(var(--m) + 30px); }
body.gc-home .gc-about__text h3 { margin: 0 0 15px; }
body.gc-home .gc-about__text h4 { margin: 25px 0 15px; }
body.gc-home .gc-about__text ul { margin: 0 0 10px; }
body.gc-home .gc-about__text li { list-style: none; margin: 10px 0; }
body.gc-home .gc-about__text li > i { color: #fff; vertical-align: baseline; font-size: 14px; width: 35px; height: 35px; line-height: 35px; border-radius: 100%; text-align: center; }
body.gc-home .gc-about__text li:first-child > i { background-color: #e271ab; }
body.gc-home .gc-about__text li:nth-child(2) > i { background-color: #ffdb2a; }
body.gc-home .gc-about__text li:last-child > i { background-color: var(--gc-green); }

body.gc-home .gc-quote {
  display: flex;
  min-height: 20vh;
  margin-top: 50px;
  background-color: #eee;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1900px 226px;
  overflow: hidden;
}
body.gc-home .gc-quote > .gc-container { margin: auto; width: 100%; }
body.gc-home .gc-quote p {
  margin: auto;
  color: #fff;
  font-family: var(--gc-font-bold);
  font-size: 26px;
  line-height: 36px;
  text-transform: uppercase;
}

/* stacked columns: the source's grid adds its row margin above the second one */
@media (max-width: 767px) { body.gc-home .gc-about__text { margin-top: 15px; } }

/* Latest news band (the source's #accueil #bottom-d) keeps 50 px above the footer */
body.gc-home .gc-band--news { margin-bottom: 50px; }

/* #accueil #top-c .custom .uk-panel-title is uppercase on the source's home only */
body.site.gc-home .gc-about__text .gc-stack__title { text-transform: uppercase; }

/* ---- css/inside.css ---- */
/* Presentation worker b: groupe, services (and its modal), contact addresses and map, espace client cards, legal text.
   Every rule is keyed on body.gc-<type> and on the contract wrappers, never on .item-page: the page class suffix
   is printed glued to "item-page" (item-pagegc-contact), so that selector does not exist on article pages.
   The main row, the groupe texture band and the helper classes of the shell belong to the shell file.
   Tokens are read as var(--gc-*) with the source values as fallbacks:
   --gc-text #3c3c3c, --gc-accent #ea6161, --gc-green #a8d080, --gc-yellow #ffad48, --gc-font ITC, --gc-font-bold "ITC bold".
   Gutters follow the source grid (UIkit 2): 25 px, 35 px from 1220 px; the large grid is 25, 35 from 960 and 50 from 1220. */

body.gc-groupe, body.gc-services, body.gc-contact, body.gc-recrutement {
  --gcb-gutter: 25px;
  --gcb-gutter-lg: 25px;
}
@media (min-width: 960px) {
  body.gc-groupe, body.gc-services, body.gc-contact, body.gc-recrutement { --gcb-gutter-lg: 35px; }
}
@media (min-width: 1220px) {
  body.gc-groupe, body.gc-services, body.gc-contact, body.gc-recrutement { --gcb-gutter: 35px; --gcb-gutter-lg: 50px; }
}

/* Groupe: intro band and team band, 50 px above and below */
.gc-band--intro, .gc-band--team { margin: 50px 0; }
.gc-band--intro h2 { margin-bottom: 15px; }

/* Groupe: the "Nos domaines d'intervention" article carries the light texture, 40 px of padding around the 1200 px row */
body.site.gc-groupe .container-component {
  padding: 40px;
  background: var(--gc-texture-light, url('../images/background.jpg')) 0 0 repeat;
}

/* Groupe: the four percent circles, 150 px, four columns from 960 px, one below */
.gc-groupe .gc-progress {
  display: flex;
  flex-wrap: wrap;
  margin: 50px 0 0 calc(-1 * var(--gcb-gutter-lg));
}
.gc-groupe .gc-progress__item {
  box-sizing: border-box;
  width: 100%;
  padding-left: var(--gcb-gutter-lg);
  text-align: center;
}
@media (min-width: 960px) {
  .gc-groupe .gc-progress__item { width: 25%; }
}
.gc-progress__circle { width: 150px; height: 150px; overflow: visible; vertical-align: baseline; }
.gc-progress__text {
  font-family: var(--gc-font-bold, 'ITC bold');
  font-size: 20px;
  fill: #000;
}
.gc-groupe .gc-progress__label {
  margin: 20px 0 0;
  font-family: var(--gc-font-bold, 'ITC bold');
  text-transform: uppercase;
}

/* Groupe and services: alternating rows, image 2/5 and text 3/5 from 768 px, the text panel padded 30 px */
.gc-stack__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: calc(-1 * var(--gcb-gutter));
}
.gc-stack__row + .gc-stack__row { margin-top: var(--gcb-gutter); }
.gc-stack__row > figure,
.gc-stack__row > .gc-stack__text {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding-left: var(--gcb-gutter);
}
.gc-stack__row > figure { text-align: center; }
.gc-stack__row > figure img { max-width: 100%; height: auto; }
.gc-stack__text { padding-top: 30px; padding-right: 30px; padding-bottom: 30px; }
.gc-stack__row > .gc-stack__text { padding-left: calc(var(--gcb-gutter) + 30px); }
.gc-stack__text > div { margin: 0; }
body.site .gc-stack__title {
  font-size: 18px;
  line-height: 24px;
  text-transform: none;
}
@media (min-width: 768px) {
  .gc-stack__row > figure { width: 40%; }
  .gc-stack__row > .gc-stack__text { width: 60%; }
  .gc-stack__row.is-reverse > figure { order: 1; }
}
.gc-groupe .light > span { position: relative; }
.gc-groupe .light > span::before {
  content: '';
  position: absolute;
  top: -10px;
  right: 35%;
  width: 30%;
  border-bottom: 3px solid #fbad4a;
}
.gc-groupe .gc-stack .light > span::before { left: 0; }

/* Groupe: rule between the associates and the team */
.gc-groupe .gc-band--team hr {
  box-sizing: content-box;
  height: 0;
  margin: 15px 0;
  border: 0;
  border-top: 7px solid var(--gc-accent, #ea6161);
}

/* Groupe: team thumbnails and the panel of the active member */
.gc-tabs--thumbs .gc-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: -10px 0 0 -10px;
  padding: 0;
  list-style: none;
}
.gc-tabs--thumbs .gc-tabs__tab { flex: none; margin-top: 10px; padding-left: 10px; }
.gc-tabs--thumbs .gc-tabs__tab > a { display: block; background: #fff; }
.gc-tabs--thumbs .gc-tabs__tab img { display: block; opacity: .7; transition: opacity .15s linear; }
.gc-tabs--thumbs .gc-tabs__tab.is-active img,
.gc-tabs--thumbs .gc-tabs__tab a:hover img,
.gc-tabs--thumbs .gc-tabs__tab a:focus img { opacity: 1; }
.gc-tabs--thumbs .gc-tabs__panels { margin-top: 15px; text-align: center; }
.gc-tabs--thumbs .gc-tabs__panel { display: none; }
.gc-tabs--thumbs .gc-tabs__panel.is-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: calc(-1 * var(--gcb-gutter));
}
.gc-tabs--thumbs .gc-tabs__panel > figure,
.gc-tabs--thumbs .gc-tabs__panel > .gc-tabs__text {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding-left: var(--gcb-gutter);
}
.gc-tabs--thumbs .gc-tabs__panel > figure img { max-width: 100%; height: auto; }
/* Source rhythm of the member panel: title and role are 15 px apart, 15 px under the role (UIkit panel title + .uk-margin) */
.gc-tabs--thumbs .gc-tabs__text > .gc-stack__title { margin: 0 0 15px; }
.gc-tabs--thumbs .gc-tabs__text > .light { margin: 0 0 15px; }
@media (min-width: 768px) {
  .gc-tabs--thumbs .gc-tabs__panel > figure,
  .gc-tabs--thumbs .gc-tabs__panel > .gc-tabs__text { width: 50%; }
}
@keyframes gc-b-fade { from { opacity: 0; } to { opacity: 1; } }
/* The source fades between panels, not the first panel on load: the fade runs once another member than the first is active */
.gc-tabs--thumbs:has(.gc-tabs__tab:not(:first-child).is-active) .gc-tabs__panel.is-active { animation: gc-b-fade .5s linear; }

/* Services: intro text and the textured band of the six rows */
.gc-services .com-content-article__body p.stronger {
  padding-top: 10px;
  font-family: var(--gc-font-bold, 'ITC bold');
  font-size: 17px;
}
.gc-band--services {
  margin: 50px 0;
  padding: 50px 0;
  background: url(../images/background.jpg) 0 0 repeat;
}
.gc-stack--services .gc-stack__text p { font-size: 13px; line-height: 17px; margin-bottom: 30px; }
/* The source button is a plain inline link on the text baseline; Cassiopeia's .btn centres it vertically, which grows the line box by 1.9 px */
.gc-stack--services a.btn { display: inline; vertical-align: baseline; }

/* Services: modal opened by its :target, full viewport like the source dialog */
html:has(.gc-modal:target) { overflow: hidden; }
.gc-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1010;
  overflow-y: auto;
  background: rgba(0, 0, 0, .6);
}
.gc-modal:target { display: block; animation: gc-b-fade .15s linear; }
.gc-modal__dialog {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  background: #fff;
}
.gc-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
  width: 20px;
  line-height: 20px;
  text-align: center;
  color: inherit;
  opacity: .3;
}
.gc-modal__close:hover, .gc-modal__close:focus { opacity: .5; text-decoration: none; }
.gc-modal__close::after { content: '\f00d'; display: block; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.gc-modal__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: calc(-1 * var(--gcb-gutter));
}
.gc-modal__cover,
.gc-modal__body {
  box-sizing: border-box;
  width: 100%;
  padding-left: var(--gcb-gutter);
}
/* source value: UIkit .uk-height-viewport is 100vh with a 600 px floor */
.gc-modal__cover { height: 100vh; min-height: 600px; }
.gc-modal__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 960px) {
  .gc-modal__cover, .gc-modal__body { width: 50%; }
}
.gc-modal__body ul.liste { margin: 10px 0 0; padding-left: 30px; }
.gc-modal__body ul.liste li { padding: 5px 0; margin: 0; }

/* Contact: addresses on the left, the map on the right, one half each at every width */
.gc-contact .com-content-article__body > .gc-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0 calc(-1 * var(--gcb-gutter-lg));
}
.gc-contact .com-content-article__body > .gc-grid > .gc-col-1-2 {
  box-sizing: border-box;
  width: 50%;
  padding-left: var(--gcb-gutter-lg);
}
/* Phones: the map is one iframe at its own size, so the two columns stack (the source keeps two halves, a 190 px map) and it takes the full width. */
@media (max-width: 479px) {
  .gc-contact .com-content-article__body > .gc-grid > .gc-col-1-2 { width: 100%; }
  .gc-contact .com-content-article__body > .gc-grid > .gc-col-1-2:last-child { margin-top: var(--gcb-gutter-lg); }
}
body.site.gc-contact .gc-address h4 { margin: 10px 0; font-size: 16px; line-height: 22px; text-transform: none; }
body.site.gc-contact .gc-hours h2 { margin-top: 25px; }
.gc-contact .gc-address .paris { color: #fbad4a; }
.gc-contact .gc-address .boulogne { color: var(--gc-green, #a8d080); }
.gc-contact .gc-address .saint-maur { color: #ffdb2a; }
.gc-contact .gc-address .yerres { color: var(--gc-accent, #ea6161); }
.gc-contact .gc-contact-addresses strong, .gc-contact .gc-hours strong { color: var(--gc-text, #3c3c3c); }
.gc-contact .gc-address .gc-icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-top: 10px;
  vertical-align: baseline;
  font: 900 14px/30px 'Font Awesome 6 Free';
  color: #fff;
  text-align: center;
}
.gc-contact .gc-icon--phone::before { content: '\f095'; }
.gc-contact .gc-icon--subway::before { content: '\f239'; }
.gc-contact .btn-paris { background: #fbad4a; }
.gc-contact .btn-boulogne { background: var(--gc-green, #a8d080); }
.gc-contact .btn-maur { background: #ffdb2a; }
.gc-contact .btn-yerres { background: var(--gc-accent, #ea6161); }
/* Contact map: one Google Maps iframe, switched by the address titles (js/map.js) */
.gc-map { display: block; box-sizing: border-box; width: 100%; max-width: 575px; height: 430px; border: 0; }
body.site .gc-address h4 a { color: inherit; text-decoration: underline dotted 1px; text-underline-offset: 4px; }
body.site .gc-address h4 a:hover, body.site .gc-address h4 a:focus { color: inherit; text-decoration-style: solid; }
body.site .gc-address.is-active h4 a { text-decoration: underline solid 2px; text-underline-offset: 4px; }

/* Espace client: three cards in one flex row, 33 % wide with a 1 % margin, shrunk to fit */
.gc-mec .gc-cards { display: flex; align-items: flex-start; }
.gc-mec .gc-card--client {
  box-sizing: border-box;
  width: 33%;
  margin: 1%;
  padding: 30px;
  /* source value: .cardEc min-height 310px, content box, so 370 px with the 30 px padding */
  min-height: calc(310px + 60px);
  background: #f1f0f0;
}
.gc-mec .gc-card--client img { display: block; width: auto; max-height: 56px; margin: auto; }
.gc-mec .gc-card--client h3 { text-align: center; text-transform: uppercase; }
.gc-mec .gc-card--client p { text-align: justify; }
.gc-mec .gc-card--client a.btn-primary {
  display: block;
  box-sizing: content-box;
  width: 80%;
  margin: 25px auto;
  padding: 10px;
  background: var(--gc-green, #a8d080);
  color: #fff;
  font-family: var(--gc-font, 'ITC');
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
}

/* Rows stacked below 768 px: the source margin script puts 15 px (uk-margin-top) above the wrapped text column */
@media (max-width: 767px) {
  .gc-stack__row > .gc-stack__text { margin-top: 15px; }
  /* the team row is a plain wrapped grid column: one gutter (uk-grid-margin) */
  .gc-tabs--thumbs .gc-tabs__panel > .gc-tabs__text { margin-top: var(--gcb-gutter); }
}

/* Article lists: Cassiopeia clips them (overflow hidden), which hides the outside markers the source shows */
body.site .com-content-article ul,
body.site .com-content-article ol { overflow: visible; }

/* ---- css/forms.css ---- */
/* Presentation worker b: house style of forms 3 (contact) and 4 (recrutement), one style for both, and the textured band behind them.
   The RSForm content plugin prints form#userForm without the source's div.rsform wrapper, so every rule is scoped by the form.
   Tokens: var(--gc-green) and var(--gc-font*) with the source values as fallbacks; gutters come from inside.css. */

.gc-band--form {
  background: url(../images/background.jpg) 0 0 repeat;
  color: var(--gc-text, #3c3c3c);
}

/* Contact: band 50 px above and below, the form sits in the 980/1200 container, 18 px under it inside the band */
.gc-contact .gc-band--form {
  margin: 50px 0;
  padding: 50px calc(max(0px, (100% - 980px) / 2) + 25px) 18px;
}
@media (min-width: 1220px) {
  .gc-contact .gc-band--form { padding: 50px calc(max(0px, (100% - 1200px) / 2) + 35px) 18px; }
}

/* Recrutement: the form is 1200 px wide, minus 25 px of side gutter below that; its 18 px margin collapses out of the band */
.gc-recrutement .gc-band--form {
  margin: 0 0 18px;
  padding: 50px 0 0;
}
.gc-recrutement .gc-band--form form#userForm {
  box-sizing: content-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 25px;
}
.gc-recrutement .gc-band--form form#userForm > h2 { margin: 0 0 15px; }

.gc-contact form#userForm { margin: 0; }
form#userForm { color: #444; }
form#userForm fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.formResponsive .formHorizontal .formControls { margin-left: 0 !important; }

/* Source grid markup kept by the form: 25/35 px gutters, large grid 25/35/50 */
form#userForm .uk-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0 calc(-1 * var(--gcb-gutter, 25px));
  padding: 0;
  list-style: none;
}
form#userForm .uk-grid.uk-grid-large { margin-left: calc(-1 * var(--gcb-gutter-lg, 25px)); }
form#userForm .uk-grid > * {
  box-sizing: border-box;
  width: 100%;
  padding-left: var(--gcb-gutter, 25px);
}
form#userForm .uk-grid-large > * { padding-left: var(--gcb-gutter-lg, 25px); }
@media (min-width: 960px) {
  form#userForm .uk-width-large-1-2 { width: 50%; }
}
form#userForm .uk-text-center { text-align: center; }
/* Modern RSForm house style, shared by both forms: white fields with a 1 px border and a soft radius, 5 px between inputs, green focus ring,
   a green button, dashed upload boxes, red error state. The markup has no labels, so the placeholders carry the text (and the required asterisk). */
form#userForm {
  --gcf-border: #b4b9be;
  --gcf-border-hover: #8a9096;
  --gcf-focus: #6fa23f;
  --gcf-focus-ring: rgba(168, 208, 128, .55);
  --gcf-error: #c43d3d;
  --gcf-error-bg: #fdf4f4;
  --gcf-green-dark: #97c46a;
  /* 5 px between the two columns as between the rows (user review p14) */
  --gcb-gutter: 5px;
  --gcb-gutter-lg: 5px;
}
form#userForm .rsform-block { margin: 0; }

form#userForm input:not([type='file']):not([type='submit']):not([type='hidden']),
form#userForm textarea {
  appearance: none;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 48px;
  margin: 0 0 5px;
  padding: 11px 14px;
  border: 1px solid var(--gcf-border);
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
  color: var(--gc-text, #3c3c3c);
  font: 16px/24px var(--gc-font, 'ITC');
  text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
form#userForm textarea {
  height: 160px;
  min-height: 120px;
  resize: vertical;
}
form#userForm input::placeholder,
form#userForm textarea::placeholder {
  color: #66696c;
  opacity: 1;
}
form#userForm input:not([type='file']):not([type='submit']):not([type='hidden']):hover,
form#userForm textarea:hover,
form#userForm input[type='file']:hover { border-color: var(--gcf-border-hover); }
form#userForm input:not([type='submit']):not([type='hidden']):focus,
form#userForm textarea:focus,
form#userForm input:not([type='submit']):not([type='hidden']):focus-visible,
form#userForm textarea:focus-visible {
  border-color: var(--gcf-focus);
  box-shadow: 0 0 0 3px var(--gcf-focus-ring);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Validation: RSForm swaps .formNoError for .formError on the message span and adds .rsform-error to the failing field */
form#userForm .formValidation { display: block; }
form#userForm .formValidation:empty { display: none; }
form#userForm .formNoError { display: none; }
form#userForm .formError,
form#userForm .formValidation .formError {
  display: block;
  height: auto;
  margin: -1px 0 8px;
  padding: 0;
  color: var(--gcf-error);
  font: 14px/20px var(--gc-font-bold, 'ITC bold');
  text-align: left;
}
form#userForm input.rsform-error,
form#userForm textarea.rsform-error,
form#userForm input[aria-invalid='true'],
form#userForm textarea[aria-invalid='true'],
form#userForm input.is-invalid,
form#userForm textarea.is-invalid {
  border-color: var(--gcf-error);
  background: var(--gcf-error-bg);
}
form#userForm input.rsform-error:focus,
form#userForm textarea.rsform-error:focus,
form#userForm input[aria-invalid='true']:focus,
form#userForm textarea[aria-invalid='true']:focus {
  border-color: var(--gcf-error);
  box-shadow: 0 0 0 3px rgba(196, 61, 61, .2);
}
/* Summary line above the form (RSForm shows it after a failed submit) */
form#userForm .formRed {
  margin: 0;
  color: var(--gcf-error);
  font: 15px/22px var(--gc-font-bold, 'ITC bold');
}
form#userForm [id^='rsform_error_'] {
  margin: 0 0 15px;
  padding: 10px 14px;
  border-left: 3px solid var(--gcf-error);
  border-radius: 4px;
  background: var(--gcf-error-bg);
}

/* reCAPTCHA is Google's widget: only centred above the button, and scaled down where it would not fit */
form#userForm div[id^='g-recaptcha'] {
  display: flex;
  justify-content: center;
  margin: 10px 0 15px;
}
@media (max-width: 360px) {
  form#userForm div[id^='g-recaptcha'] { transform: scale(.85); transform-origin: 50% 0; margin-bottom: 0; }
}

/* Submit: a real green button, centred in the contact form, left in the recrutement form */
form#userForm .rsform-submit-button {
  display: inline-block;
  box-sizing: border-box;
  width: auto;
  min-height: 48px;
  margin: 5px 0 0;
  padding: 12px 32px;
  border: 0;
  border-radius: 6px;
  background: var(--gc-green, #a8d080);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
  color: var(--gc-text, #3c3c3c);
  cursor: pointer;
  font: 15px/24px var(--gc-font-bold, 'ITC bold');
  letter-spacing: .5px;
  text-align: center;
  text-shadow: none;
  text-transform: uppercase;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
form#userForm .rsform-submit-button:hover { background: var(--gcf-green-dark); }
form#userForm .rsform-submit-button:active { transform: translateY(1px); }
form#userForm .rsform-submit-button:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--gcf-focus);
}
@media (max-width: 767px) {
  form#userForm .rsform-submit-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  form#userForm * { transition: none !important; }
}

/* Recrutement uploads: a dashed choose-file box, the native button restyled as the green button, the chosen file name stays visible */
.gc-recrutement form#userForm .formControlLabel {
  float: none;
  width: auto;
  margin: 0 0 5px;
  padding: 5px 0 0;
  color: var(--gc-text, #3c3c3c);
  font: 15px/22px var(--gc-font-bold, 'ITC bold');
  text-align: left;
}
.gc-recrutement form#userForm .formControlLabel::after {
  content: ' (PDF uniquement)';
  color: #66696c;
  font: 14px/22px var(--gc-font, 'ITC');
}
.gc-recrutement form#userForm input[type='file'] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 64px;
  margin: 0 0 5px;
  padding: 10px 14px;
  border: 1.5px dashed var(--gcf-border);
  border-radius: 6px;
  background: #fff;
  color: var(--gc-text, #3c3c3c);
  cursor: pointer;
  font: 15px/24px var(--gc-font, 'ITC');
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.gc-recrutement form#userForm input[type='file']::file-selector-button {
  margin: 0 14px 0 0;
  padding: 8px 20px;
  border: 0;
  border-radius: 6px;
  background: var(--gc-green, #a8d080);
  color: var(--gc-text, #3c3c3c);
  cursor: pointer;
  font: 14px/24px var(--gc-font-bold, 'ITC bold');
  letter-spacing: .5px;
  text-transform: uppercase;
  transition: background-color .15s ease;
}
.gc-recrutement form#userForm input[type='file']:hover::file-selector-button { background: var(--gcf-green-dark); }
.gc-recrutement form#userForm input[type='file'].rsform-error,
.gc-recrutement form#userForm input[type='file'][aria-invalid='true'] {
  border-color: var(--gcf-error);
  background: var(--gcf-error-bg);
}
@media (max-width: 767px) {
  .gc-recrutement form#userForm .formControlLabel { padding-top: 0; }
}
@media (max-width: 360px) {
  .gc-recrutement form#userForm input[type='file'] { padding: 10px; }
  .gc-recrutement form#userForm input[type='file']::file-selector-button { margin-right: 8px; padding: 8px 12px; font-size: 13px; }
}

/* Docbase search (.lookfor): the source gives the field the unloaded 'brandon grotesque', so it falls back to the browser font, and leaves the
   button on the browser's own button font. shell.css sets ITC on every `body.site input`, which outranks content.css's .lookfor rules. */
body.site .lookfor input { font-family: 'brandon grotesque'; }
body.site .lookfor button { font-family: revert; }

/* ---- css/content.css ---- */
/* content.css: actualités, documentation, chiffres utiles, blog, Expert+ (card grids, news, docbase, app).
   Colours, fonts and base type come from shell.css as --gc-* custom properties; the literals are the section-spec values. */

/* ---- Ink: the source body is #444 while p and headings stay --gc-text; the Joomla 6 muted date reads --secondary-color; UIkit gives em #d05 ---- */
.com-content-article.gc-actus, .com-content-article.gc-blog-gc, .com-content-category-blog { --secondary-color: #444; color: #444; }
.com-content-article.gc-actus em, .com-content-article.gc-blog-gc em, .gc-eplus em { color: #d05; }
body.gc-blog-gc .com-content-article__body li { color: inherit; }

/* ---- Expert+ includes keep their own uk-* class names: the few rules they need, scoped to the wrapper ---- */
.gc-eplus .uk-grid { display: flex; flex-wrap: wrap; margin: 0 0 0 -25px; padding: 0; list-style: none; }
.gc-eplus .uk-grid > * { flex: none; box-sizing: border-box; float: left; margin: 0; padding-left: 25px; width: 100%; }
.gc-eplus .uk-grid-match > * { display: flex; flex-wrap: wrap; }
.gc-eplus .uk-grid-match > * > * { flex: none; box-sizing: border-box; width: 100%; }
.gc-eplus .uk-grid > * > :last-child { margin-bottom: 0; }
.gc-eplus .uk-text-right { text-align: right; }
.gc-eplus .uk-text-center { text-align: center; }
.gc-eplus .clearfix::after { content: ""; display: table; clear: both; }
@media (min-width: 768px) {
  .gc-eplus .uk-width-medium-1-3 { width: 33.333%; }
  .gc-eplus .uk-width-medium-1-2 { width: 50%; }
}
@media (min-width: 960px) {
  .gc-eplus .uk-width-large-1-2 { width: 50%; }
}
@media (min-width: 1220px) {
  .gc-eplus .uk-grid { margin-left: -35px; }
  .gc-eplus .uk-grid > * { padding-left: 35px; }
}

/* ---- Cards: home domain grid and documentation gallery (SG-08) ---- */
.gc-grid.gc-grid--domains,
.gc-grid.gc-grid--docs { display: grid; grid-template-columns: 1fr; align-items: start; margin: 0; }
.gc-grid.gc-grid--domains { gap: 25px; }
.gc-grid.gc-grid--docs { gap: 10px; }
.gc-band--docs { margin: 50px 0; }
.gc-grid--domains > .gc-card,
.gc-grid--docs > .gc-card { position: relative; display: block; justify-self: start; box-sizing: border-box; width: auto; max-width: 100%; padding: 0; overflow: hidden; }
.gc-grid .gc-card > img { display: block; max-width: 100%; height: auto; transition: transform .3s ease-out, filter .3s ease-out; }
.gc-grid .gc-card:hover > img { transform: scale(1.1); }
.gc-grid--docs .gc-card > img { filter: grayscale(100%); }
.gc-grid--docs .gc-card:hover > img { transform: none; filter: grayscale(0); }
.gc-grid .gc-card > .gc-card__caption {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; margin: 0; padding: 20px; text-align: center; color: #fff;
  font-family: var(--gc-font-bold, 'ITC bold'); font-size: 18px; line-height: 24px; font-weight: 400; text-transform: uppercase;
}
/* the source centres a 24 px title plus its 15 px bottom margin, so the text sits 7.5 px above the middle of the tile */
.gc-grid--domains .gc-card > .gc-card__caption { padding-bottom: 35px; background: rgba(0, 0, 0, .5); }
.gc-grid--docs .gc-card > .gc-card__caption { padding: 0; background: rgba(0, 0, 0, .32); text-shadow: 0 1px 3px #000; text-transform: none; }
@media (min-width: 480px) { .gc-grid.gc-grid--docs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .gc-grid.gc-grid--domains { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) {
  .gc-grid.gc-grid--domains { grid-template-columns: repeat(3, 1fr); }
  .gc-grid.gc-grid--docs { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1220px) { .gc-grid.gc-grid--domains { gap: 35px; } }

/* ---- Expert+ news: leading article, teasers, news feed, figures list (SG-09) ---- */
body.gc-actus .zoom { margin: 40px 0; }
.gc-eplus .premier-article img { float: left; margin-right: 80px; }
.gc-eplus .premier-article .date { font-family: var(--gc-font-bold, 'ITC bold'); color: #939598; }
.gc-eplus .premier-article .date span { position: relative; padding-bottom: 10px; }
.gc-eplus .premier-article .date span::after { content: ""; position: absolute; left: 0; bottom: 0; width: 33px; height: 2px; background-color: rgba(147, 149, 152, .23); }
.gc-eplus .premier-article h3 { font-size: 22px; }
.gc-eplus .premier-article h3 > a { color: #000; }
.gc-eplus .premier-article h3 > a:hover { text-decoration: none; }
.gc-eplus .premier-article .readmore { position: relative; padding-left: 15px; color: #000; font-family: var(--gc-font-bold, 'ITC bold'); font-size: 16px; text-transform: uppercase; }
.gc-eplus .premier-article .readmore::before { content: ""; position: absolute; left: 0; top: 13px; width: 6px; height: 6px; border-radius: 50%; background-color: var(--gc-accent, #ea6161); }
body.gc-actus .gc-eplus .premier-article { margin-bottom: 40px; }
body.gc-home .gc-eplus .tease { margin: 50px 0; }
body.gc-home .gc-eplus .premier-article .resume { margin: 30px 0; }
.gc-eplus .wrap-resume { background-color: rgba(114, 112, 111, .1); padding: 25px 10px; }
.gc-eplus .wrap-resume h3 { font-size: 16px; line-height: 19px; }
.gc-eplus .wrap-resume h3 > a { color: #000; }
.gc-eplus .wrap-resume h3 > a:hover { text-decoration: none; }
.gc-eplus .wrap-resume p { margin-bottom: 0; }
.gc-eplus .article-teaser { margin-bottom: 20px; padding: 10px 20px; background-color: rgba(114, 112, 111, .05); }
.gc-grid > * > .gc-eplus > .article-teaser:last-child { margin-bottom: 0; }
body.gc-actus .gc-eplus .article-teaser h3 { margin-bottom: 5px; text-transform: none; }
.gc-eplus ul.article-links { margin: 0; padding: 0; list-style: none; }
.gc-eplus .article-links li { display: inline-block; padding: 0 5px; font-size: 12px; }
.gc-eplus ul.article-links li a, .gc-eplus ul.article-links li a i { color: #848484; }
/* Expert+ chapters: Bootstrap's .collapse:not(.show) hides the chapter label */
#accordion label.collapse { display: block; }
/* Expert+ reader share list: 30 x 30 white glyphs on the colour blocks, as the source; the grey inline-block rules above stay for the actus teasers */
.gc-eplus .eplus-social .article-links li { display: block; padding: 0; font-size: 18px; }
.gc-eplus .eplus-social ul.article-links li a i { color: #fff; }
.gc-eplus .read { font-family: var(--gc-font-bold, 'ITC bold'); }
.gc-eplus .module-eplus { margin-bottom: 30px; padding: 0; list-style: none; }
.gc-eplus .module-eplus > li { padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(114, 112, 111, .05); list-style: none; }
.gc-eplus .module-eplus > li:last-child { border-bottom: 0; }
.gc-eplus ul.chiffre-liste { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; list-style: none; }
.gc-eplus ul.chiffre-liste li { width: 33%; border-bottom: 0; }
.gc-eplus em.eplus-auteur { display: block; margin-bottom: 5px; color: #848484; font-size: smaller; }
body.gc-actus .lookfor fieldset { background-color: rgba(114, 112, 111, .05); }
.gc-eplus .lookfor > fieldset,
.lookfor > fieldset { margin: 0 0 15px; padding: .35em .75em .625em; border: 0; }
.lookfor input { display: inline-block; box-sizing: border-box; width: auto; height: 30px; margin: 0; padding: 5px; border: 0; border-radius: 0; background: #fff; box-shadow: none; color: #000; font-family: 'brandon grotesque'; font-size: 13.3333px; }
.lookfor button { width: 36px; height: 36px; padding: 0; border: 0; background: var(--gc-green, #a8d080); color: #fff; font-size: 18px; cursor: pointer; }
.lookfor .gc-icon--search,
.gc-eplus .uk-icon { display: inline-block; font-family: "Font Awesome 6 Free"; font-weight: 900; font-style: normal; font-size: inherit; line-height: 1; }
.gc-eplus .uk-icon-home::before { content: "\f015"; }
.gc-eplus .uk-icon-search::before { content: "\f002"; }
/* source glyph is Font Awesome 4 home at 30px (0.93em wide); the 6 Free glyph is 1.125em wide, so 25px gives the same 28 px advance */
.gc-eplus .research .uk-icon-home { font-size: 25px; line-height: 30px; }
.gc-eplus .research .btn { display: inline-block; }
.lookfor .gc-icon--search::before { content: "\f002"; }
/* Font Awesome 4 outline folder-open: the 6 Free regular f07c is heavy, f115 is the thin outline; the 4 clock is a 10 px ring that advances 10 px at 11.67 px, the 6 clock a 11.7 px ring advancing 8.4 px, so it is scaled to 89 percent and given a hairline stroke */
.gc-eplus .fa.fa-folder-open-o { --fa: "\f115"; display: inline-block; width: 1.0722em; text-align: center; }
body.gc-actus .fa.fa-clock-o, .gc-eplus .fa.fa-clock-o { display: inline-block; width: .962em; font-size: .89em; line-height: 1.123; text-align: center; -webkit-text-stroke: .3px currentColor; }

/* ---- Docbase: dossiers list (SG-14) ---- */
.gc-eplus .liste-dossiers { margin-top: 25px; }
@media (min-width: 1220px) { .gc-eplus .liste-dossiers { margin-top: 35px; } }
.gc-eplus .liste-dossiers .file-wrap { display: flex; margin-bottom: 20px; padding-right: 5px; background-color: rgba(235, 235, 236, .5); border-right: 8px solid var(--gc-accent, #ea6161); }
.gc-eplus .liste-dossiers .file-wrap .image { display: inline-block; max-width: 24%; }
.gc-eplus .liste-dossiers .file-wrap .wrap { box-sizing: content-box; display: inline-block; max-width: 74%; padding: 5px 10px; }
.gc-eplus .liste-dossiers .file-wrap .wrap h4 { margin-bottom: 0; text-transform: none; }
.gc-eplus .liste-dossiers .file-wrap .wrap p { font-size: 13px; line-height: 16px; }

/* ---- Chiffres utiles: pill tabs (SG-13) ---- */
.gc-tabs--pills > .gc-tabs__nav { display: flex; flex-wrap: wrap; justify-content: center; margin: -10px 0 0 -10px; padding: 0; list-style: none; }
.gc-tabs--pills > .gc-tabs__nav > li { flex: none; margin-top: 10px; padding-left: 10px; }
.gc-tabs--pills > .gc-tabs__nav > li > a { display: inline-block; padding: 10px 20px; border-radius: 1px; color: inherit; line-height: 20px; text-decoration: none; outline: none; }
.gc-tabs--pills > .gc-tabs__nav > li.is-active > a { background-color: var(--gc-green, #a8d080); color: #fff; }
.gc-tabs--pills .gc-tabs__panel { display: none; }
.gc-tabs--pills .gc-tabs__panel.is-active { display: block; }
.gc-tabs--pills .gc-tabs__panels { margin-top: 20px; }
.gc-tabs--pills .gc-tabs__panel { padding: 30px; }
.gc-tabs--pills .gc-tabs__panel > h3 { margin: 0 0 15px; font-size: 18px; line-height: 24px; text-transform: none; }

/* ---- Blog list (SG-15) ---- */
body.gc-blog-gc.view-category .com-content-category-blog { max-width: 1200px; margin: 0 auto 50px; }
body.gc-blog-gc.view-category .com-content-category-blog > .page-header h1 { margin: auto; padding: 50px; text-align: center; }
body.gc-blog-gc.view-category .blog-items.items-leading { display: block; }
body.gc-blog-gc.view-category .blog-items { margin: 0; }
body.gc-blog-gc.view-category .blog-items.columns-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; align-items: stretch; }
@media (min-width: 1220px) { body.gc-blog-gc.view-category .blog-items.columns-2 { gap: 35px; } }
body.gc-blog-gc.view-category .blog-items.columns-2 > .blog-item { display: flex; flex-direction: column; box-sizing: border-box; min-width: 0; padding: 20px; border: 5px solid #efe8e8; background: #fff; transition: all ease .3s; }
body.gc-blog-gc.view-category .blog-items.columns-2 > .blog-item:hover { border-color: var(--gc-accent, #ea6161); background: #fffdfd; }
body.gc-blog-gc.view-category .blog-item .item-content > .page-header h2 { margin: 0 0 15px; }
body.gc-blog-gc.view-category .blog-item .item-content > .page-header h2 a { color: var(--gc-accent, #ea6161); }
body.gc-blog-gc.view-category .blog-item .item-content > .page-header h2 a:hover { color: var(--gc-text, #3c3c3c); }
body.gc-blog-gc.view-category .blog-item dl.article-info { margin: 0 0 15px; padding: 0; }
body.gc-blog-gc.view-category .blog-item dl.article-info dd { margin: 0; }
body.gc-blog-gc.view-category .blog-item .article-info-term { display: none; }
body.gc-blog-gc.view-category .blog-item .icon-calendar { display: none; }
body.gc-blog-gc.view-category .blog-item ul { padding-left: 30px; list-style: disc outside; }
body.gc-blog-gc.view-category .blog-item p.readmore { display: block; width: fit-content; height: 45px; margin: 15px 0 0; background: var(--gc-green, #a8d080); line-height: 45px; text-indent: 0; }
body.gc-blog-gc.view-category .blog-item p.readmore .icon-chevron-right { display: none; }
body.gc-blog-gc.view-category .blog-item p.readmore a.btn { display: inline; vertical-align: baseline; border: 0; }
body.gc-blog-gc.view-category .items-more ol { margin: 0 0 25px; padding-left: 30px; list-style: decimal outside; }
body.gc-blog-gc.view-category .items-more li { padding: 0; border-bottom: 1px solid #efe8e8; }
body.gc-blog-gc.view-category .items-more li a { display: block; padding: 10px 0; }
body.gc-blog-gc.view-category .com-content-category-blog__navigation { display: block; }
body.gc-blog-gc.view-category .com-content-category-blog__counter { float: right; margin: 0; padding: 0 !important; line-height: 20px; }
body.gc-blog-gc.view-category .com-content-category-blog__pagination { display: block; }
body.gc-blog-gc.view-category .com-content-category-blog__navigation::after { content: ""; display: table; clear: both; }

/* ---- Blog article (SG-16) ---- */
body.gc-blog-gc.view-article .com-content-article { max-width: 1200px; margin: 0 auto; padding: 50px 0; }
body.gc-blog-gc.view-article .com-content-article > .page-header h1 { margin: auto; padding: 50px; text-align: center; }
body.gc-blog-gc.view-article .com-content-article > .page-header h2 { margin: 0 0 15px; }
body.gc-blog-gc.view-article dl.article-info { margin: 0 0 15px; padding: 0; }
body.gc-blog-gc.view-article dl.article-info dd { margin: 0; }
body.gc-blog-gc.view-article .article-info-term,
body.gc-blog-gc.view-article .icon-calendar { display: none; }
body.gc-blog-gc.view-article .com-content-article__body ul { padding-left: 30px; list-style: disc outside; }
body.gc-blog-gc.view-article .com-content-article__body ol { margin: 0 0 15px; padding-left: 30px; list-style: decimal outside; }
body.gc-blog-gc.view-article .com-content-article__body * + ol { margin-top: 15px; }

/* ---- Expert+ app and search block (SG-21) ---- */
.gc-eplus #eplus-container { position: relative; padding: 20px 40px; }
.gc-eplus #eplus-container h1.ng-binding { text-transform: none; }
.gc-eplus #eplus-container .btn { padding: 5px 30px; }
.gc-eplus .navbar-general { overflow: hidden; margin-bottom: 4px; padding-bottom: 10px; background: #eee; }
.gc-eplus .navbar-general form { float: left; margin: 0; list-style: none; }
.gc-eplus .navbar-general input { box-sizing: content-box; vertical-align: middle; font-size: 13.3333px; line-height: normal; }
.gc-eplus .navbar-general button { border: 2px outset #000; }
.gc-eplus .navbar-general ul { float: left; margin: 0; padding-left: 0; list-style: none; }
.gc-eplus .navbar-general ul li { position: relative; display: block; float: left; margin-right: 10px; padding: 10px; font-size: larger; line-height: 28px; }
.gc-eplus .navbar-form { margin-top: 8px; }
.gc-eplus input.searchterm { width: 100px; }
.gc-eplus span.label { display: inline; padding: .2em .6em .3em; border-radius: .25em; color: #fff; font-size: 85%; line-height: 1; text-align: center; vertical-align: baseline; white-space: nowrap; }
.gc-eplus .label-danger { background-color: #d9534f; }
.gc-eplus .eplus-ariane { margin: 8px 0 0 8px; }
.gc-eplus .colcontainer { clear: both; overflow: hidden; }
.gc-eplus .colgauche { float: left; width: 48%; margin-right: 15px; }
.gc-eplus .colgauche ul,
.gc-eplus .coldroite ul { padding-left: 0; }
.gc-eplus .coldroite { float: left; width: 48%; }
.gc-eplus .article-full img { float: right; width: 340px; max-height: 340px; height: auto; margin-left: 10px; margin-bottom: 10px; }
.gc-eplus ul.article-liste { clear: both; list-style: none; }
.gc-eplus ul.article-liste li a { display: block; margin: 0; padding: 5px; border-bottom: 1px solid #e6e6e6; }
.gc-eplus ul.article-liste li.odd a:link { background-color: #f0f0f0; }
.gc-eplus ul.article-liste li.even a:link { background-color: #fff; }
.gc-eplus ul.article-liste li.odd a:hover,
.gc-eplus ul.article-liste li.even a:hover { background-color: #d9d9d9; }
.gc-eplus div.description_courte { border-bottom: 1px solid #e6e6e6; color: grey; font-size: smaller; font-style: italic; }
.gc-eplus .chiffreutile-fond { margin: 5px; padding: 10px; border: 0; background: none; box-shadow: 0 0 5px 0 #656565; }
.gc-eplus .chiffreutile-fond ul { margin-left: 20px; list-style: square outside none; }
.gc-eplus .chiffreutile-fond i { margin-left: 20px; }
.gc-eplus .avertissement { margin: 10px; padding: 10px; border: 1px solid #f2c779; border-radius: 2px; background: #fff8c4; color: #555; text-align: center; }
.gc-eplus h2.chapitre { display: block; margin: 5px 0; padding: 5px; border-bottom: 1px solid #e6e6e6; background-color: #f0f0f0; cursor: pointer; }
.gc-eplus .result { display: flex; flex-direction: row; align-items: center; }
.gc-eplus .result > div { margin-bottom: 30px; padding: 0 20px; }
.gc-eplus .result > div:first-child { min-width: 350px; max-width: 350px; padding-left: 0; }
.gc-eplus .result .date { margin: 15px 0; color: #ccc; font-size: 15px; }
.gc-eplus .date > .category { font-weight: 700; text-transform: capitalize; }
.gc-eplus .red { color: var(--gc-accent, #ea6161); }


/* ---- Blog pager: boxed Début / Précédent / 1 … 4 / Suivant / Fin, the markup of the source (layouts/joomla/pagination) ---- */
/* the template gives .pagination a 1rem margin and a flex display: the source wrapper is a plain block */
body.gc-blog-gc.view-category div.pagination { display: block; margin: 0; padding: 0; }
body.gc-blog-gc.view-category .pagination ul { display: flex; flex-flow: row wrap; align-content: center; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
body.gc-blog-gc.view-category .pagination li { padding: 0; border: 2px solid rgba(128, 128, 128, .66); line-height: 20px; }
body.gc-blog-gc.view-category .pagination li > :is(a, span) { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 44px; min-height: 40px; padding: 0 14px; }
body.gc-blog-gc.view-category .pagination li a { color: var(--gc-accent, #ea6161); font-weight: 700; text-decoration: none; }
body.gc-blog-gc.view-category .pagination li:hover { border-color: var(--gc-green, #a8d080); }
body.gc-blog-gc.view-category .pagination li:hover, body.gc-blog-gc.view-category .pagination span.pagenav,
body.gc-blog-gc.view-category .pagination li.pagination-prev, body.gc-blog-gc.view-category .pagination li.pagination-start { background-color: var(--gc-green, #a8d080); }
body.gc-blog-gc.view-category .pagination li:hover a, body.gc-blog-gc.view-category .pagination span.pagenav,
body.gc-blog-gc.view-category .pagination li.pagination-prev, body.gc-blog-gc.view-category .pagination li.pagination-start { color: #fff; }

/* ---- Links inside Expert+ blocks, blog lists and docbase: plain, underlined on hover (as on the source) ---- */
.gc-eplus a, body.gc-blog-gc .blog-items a, body.gc-blog-gc .items-more a { text-decoration: none; }
.gc-eplus a:hover, .gc-eplus a:focus-visible, body.gc-blog-gc .blog-items a:hover, body.gc-blog-gc .items-more a:hover { text-decoration: underline; }

/* ---- Button row above the docbase and chiffres lists: the source's .btn is an inline link here, so the row is one text line high ---- */
body.gc-actus .com-content-article__body > .gc-grid a.btn { display: inline; vertical-align: baseline; }

/* ---- Blog: <b> in article text is plain bold (700) as on the source, not the template's bolder (900) ---- */
body.gc-blog-gc .blog-items b, body.gc-blog-gc .com-content-article__body b { font-weight: 700; }

/* ---- Services modal (markup and base rules in inside.css): the source's blank dialog is a 1 px #e5e5e5 box, its cover clips the picture at the viewport height and the picture keeps its natural size (never upscaled), the close is #444 at .5 ---- */
.gc-modal__dialog { border: 1px solid #e5e5e5; }
.gc-modal__cover { overflow: hidden; }
.gc-modal__cover img { width: auto; }
body.site .gc-modal__close, body.site .gc-modal__close:hover, body.site .gc-modal__close:focus { color: #444; opacity: .5; text-decoration: none; }

/* ---- Services modal below the 960 px layout (requested by the user; the source dialog is one viewport high there and spills its text onto the backdrop):
   the modal is the whole viewport and scrolls inside, the picture is a cover crop of about 38 % of the height, the text follows with the 25 px site gutter,
   and the close stays on screen as a 44 px target. At 960 px and above the block above is the whole result. ---- */
@media (max-width: 959px) {
  .gc-modal { height: 100vh; height: 100dvh; overflow-x: hidden; overscroll-behavior: contain; }
  .gc-modal__dialog { min-height: 100vh; min-height: 100dvh; border: 0; }
  .gc-modal__grid { display: block; margin: 0; }
  .gc-modal__cover { height: 38vh; height: 38dvh; min-height: 0; padding: 0; }
  body.site .gc-modal__cover img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; }
  .gc-modal__body { padding: 25px 25px 40px; }
  body.site .gc-modal__close, body.site .gc-modal__close:hover, body.site .gc-modal__close:focus {
    position: fixed; top: 8px; right: 8px; width: 44px; height: 44px; font-size: 18px; line-height: 44px; border-radius: 50%;
    background: rgba(255, 255, 255, .9); opacity: 1;
  }
  body.site .gc-modal__close:focus-visible { outline: 2px solid #444; outline-offset: 2px; }
}

/* ---- Blog, client round 2026-10-26: readable type, left-aligned text, one column on phones, measured articles (content and markup unchanged) ---- */
body.gc-blog-gc :is(.blog-items, .items-more, .com-content-article__body) { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
@media (min-width: 768px) { body.gc-blog-gc :is(.blog-items, .items-more, .com-content-article__body) { font-size: 16px; line-height: 1.65; } }
/* the content carries inline text-align: justify and line-height: normal; the headings keep their own sizes */
body.gc-blog-gc :is(.blog-items, .com-content-article__body) :is(p, li) { line-height: inherit !important; }
body.gc-blog-gc :is(.blog-items, .com-content-article__body) [style*="justify"] { text-align: left !important; }
body.gc-blog-gc :is(.blog-items, .com-content-article__body) :is(img, iframe, video) { max-width: 100%; height: auto; }
body.gc-blog-gc :is(.blog-items, .com-content-article__body) table { display: block; max-width: 100%; overflow-x: auto; }
body.gc-blog-gc :is(.blog-items, .items-more, .com-content-article__body) :is(h3, h4) { line-height: 1.3; }
body.gc-blog-gc dl.article-info { font-size: 14px; }
/* one text column, 15 to 16 px, about 75 characters */
body.gc-blog-gc.view-category .blog-items.items-leading .item-content { max-width: 800px; }
body.gc-blog-gc.view-article .com-content-article > :is(.page-header:not(:first-child), dl.article-info, .com-content-article__body) { max-width: 800px; margin-left: auto; margin-right: auto; }
/* cards: the content column grows, the button sits at the card bottom (and 15 px under whatever precedes it) */
body.gc-blog-gc.view-category .blog-items.columns-2 > .blog-item > .item-content { display: flex; flex: 1; flex-direction: column; min-width: 0; }
body.gc-blog-gc.view-category .blog-items.columns-2 .item-content > p.readmore { margin-top: auto; }
body.gc-blog-gc.view-category .blog-items.columns-2 .item-content > :has(+ p.readmore) { margin-bottom: 15px; }
/* the vehicle-tax intro leaves its last <li> open, so its button lands inside the list: back on its own line at the text edge */
body.gc-blog-gc.view-category .blog-item li p.readmore { margin: 15px 0 0 -30px; }
body.gc-blog-gc.view-category .com-content-category-blog__navigation { margin-top: 30px; }
/* two columns of cards need about 900 px; below that one column */
@media (max-width: 899px) {
  body.gc-blog-gc.view-category .blog-items.columns-2 { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  body.gc-blog-gc.view-category .blog-items.columns-2 > .blog-item { padding: 15px; }
  body.gc-blog-gc.view-category .com-content-category-blog__counter { float: none; padding-top: 0 !important; text-align: center; }
  body.gc-blog-gc.view-category .com-content-category-blog__pagination { margin-top: 10px; }
}
/* the list has no side gutter on tablets and phones (the article page gets its 25 px in shell.css) */
@media (max-width: 1249px) {
  body.gc-blog-gc.view-category .com-content-category-blog { box-sizing: border-box; padding: 0 25px; }
}
body.gc-blog-gc.view-category .blog-items.items-leading { margin-bottom: 25px; }
@media (min-width: 1220px) { body.gc-blog-gc.view-category .blog-items.items-leading { margin-bottom: 35px; } }
/* its li carries the hanging indent of the other bullets (text-indent -18pt) but not their padding, so the text would sit over its own bullet */
body.gc-blog-gc.view-category .blog-item li:has(> p.readmore) { text-indent: 0 !important; }

/* ---- Expert+ lists, client round 2026-10-26: /expert-plus is one regular card grid, /actualites keeps its layout with readable type (markup and data unchanged) ---- */
/* the two floats (.colgauche Zoom, .coldroite Chiffres utiles + Actualités) dissolve into one grid: headings and the figures box span the row, the teasers are the cells */
body.gc-expert-plus .gc-eplus div:has(> .colgauche) { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; padding: 0 0 30px; }
body.gc-expert-plus .gc-eplus :is(.colgauche, .coldroite) { display: contents; }
body.gc-expert-plus .gc-eplus :is(.colgauche, .coldroite) > h2 { grid-column: 1 / -1; margin: 15px 0 0; }
body.gc-expert-plus .gc-eplus .article-teaser { display: flex; flex-direction: column; box-sizing: border-box; min-width: 0; margin: 0; padding: 20px; border: 5px solid #efe8e8; background: #fff; transition: border-color .3s ease; }
body.gc-expert-plus .gc-eplus .article-teaser:hover { border-color: var(--gc-accent, #ea6161); }
body.gc-expert-plus .gc-eplus .article-teaser img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: 0 0 15px; }
body.gc-expert-plus .gc-eplus .article-teaser img[class~="ng-hide"] { display: none; }
body.gc-expert-plus .gc-eplus .article-teaser h3 { margin: 0 0 12px; line-height: 1.3; overflow-wrap: break-word; }
body.gc-expert-plus .gc-eplus .article-teaser p { margin: 0 0 15px; font-size: 15px; line-height: 1.6; }
body.gc-expert-plus .gc-eplus .article-teaser ul.article-links { margin-top: auto; }
body.gc-expert-plus .gc-eplus .article-teaser .article-links li { padding: 0 12px 0 0; font-size: 14px; line-height: 24px; }
body.gc-expert-plus .gc-eplus .chiffreutile-fond { grid-column: 1 / -1; box-sizing: border-box; margin: 0; padding: 20px; border: 5px solid #efe8e8; box-shadow: none; }
body.gc-expert-plus .gc-eplus .chiffreutile-fond h2 { margin: 0 0 15px; }
body.gc-expert-plus .gc-eplus .chiffreutile-fond ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 15px 30px; margin: 0; padding: 0; list-style: none; }
body.gc-expert-plus .gc-eplus .chiffreutile-fond li { font-size: 15px; line-height: 1.6; }
body.gc-expert-plus .gc-eplus .chiffreutile-fond a { font-size: 14px; }
body.gc-expert-plus .gc-eplus .chiffreutile-fond i { margin-left: 0; }
/* the app block has no page gutter below the 1250 px layout: 25 px like the blog list instead of the desktop 40 px (the cards then use the whole width) */
@media (max-width: 1249px) { body.gc-expert-plus .gc-eplus #eplus-container { padding-left: 25px; padding-right: 25px; } }
@media (min-width: 768px) { body.gc-expert-plus .gc-eplus div:has(> .colgauche) { grid-template-columns: repeat(2, 1fr); gap: 25px; } }
@media (min-width: 1100px) { body.gc-expert-plus .gc-eplus div:has(> .colgauche) { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1220px) { body.gc-expert-plus .gc-eplus div:has(> .colgauche) { gap: 35px; } }
@media (max-width: 767px) { body.gc-expert-plus .gc-eplus .article-teaser { padding: 15px; } }
/* /actualites: same layout as before, text one step up (excerpts 15, links 14 px) */
body.gc-actus .gc-eplus :is(.article-teaser, .wrap-resume) p { font-size: 15px; line-height: 1.6; }
body.gc-actus .gc-eplus .article-teaser .article-links li { font-size: 14px; line-height: 24px; }
body.gc-actus .gc-eplus .module-eplus li a { font-size: 15px; }

/* ---- css/protostar.css ---- */
/* Groupe Conseils: the Protostar-look routes (politique de confidentialité, espace blog, article form). Slice a, SG-22, D2.
   The source renders them with Joomla 3's Protostar template: 940 px white box on #f4f6f7, 3 px #ea6161 top rule, Open Sans
   headings (the family is requested without a bold file, so bold headings are the browser's synthetic bold), 13px/18px Helvetica Neue. */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/opensans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/opensans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body.site.gc-protostar {
  margin: 0;
  padding: 20px;
  border-top: 3px solid var(--gc-accent);
  background: #f4f6f7;
  color: #333;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 18px;
  -webkit-font-smoothing: antialiased;
}
body.site.gc-protostar .body { padding: 0; margin: 0; }
/* Cassiopeia keeps html white, so the body's grey does not reach the canvas */
html:has(body.gc-protostar) { background: #f4f6f7; overflow-x: clip; }
body.site.gc-protostar { overflow-x: clip; }
/* Bootstrap 2 container: fluid below 768 px, 724 px from 768, 940 px from 980. The source's box is wider than the viewport at 768-805 and 980-1021 (it scrolls sideways there); the page clips instead */
body.site.gc-protostar .body > .container {
  box-sizing: content-box;
  width: auto;
  max-width: none;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(0, 0, 0, .05);
}
@media (min-width: 768px) { body.site.gc-protostar .body > .container { width: 724px; } }
@media (min-width: 980px) { body.site.gc-protostar .body > .container { width: 940px; } }
body.site.gc-protostar .clearfix::after { content: ''; display: table; clear: both; }
body.site.gc-protostar .pull-left { float: left; }
body.site.gc-protostar .pull-right { float: right; }
body.site.gc-protostar .header { margin: 0 0 10px; }
@media (max-width: 768px) { body.site.gc-protostar .header .brand { float: none; text-align: center; } body.site.gc-protostar .header .brand img { margin: 0 auto; } }
body.site.gc-protostar .item-page, body.site.gc-protostar .com-content-article { max-width: none; margin: 0; padding: 0; }
body.site.gc-protostar .header-inner { min-height: 97px; }
body.site.gc-protostar .brand { display: block; margin: 0; }
body.site.gc-protostar .brand img { display: block; max-width: 100%; height: auto; }
body.site.gc-protostar .row-fluid { width: 100%; }
body.site.gc-protostar .row-fluid::after { content: ''; display: table; clear: both; }
body.site.gc-protostar .span12 { display: block; float: left; box-sizing: border-box; width: 100%; min-height: 1px; margin: 0; }

body.site.gc-protostar p { margin: 0 0 9px; color: #333; font-family: inherit; font-size: 13px; line-height: 18px; }
body.site.gc-protostar strong { color: inherit; font-family: inherit; font-weight: 700; }
body.site.gc-protostar a { color: var(--gc-accent); text-decoration: none; }
body.site.gc-protostar a:hover, body.site.gc-protostar a:focus { color: #7c2323; text-decoration: underline; }
body.site.gc-protostar h1, body.site.gc-protostar h2, body.site.gc-protostar h3, body.site.gc-protostar h4, body.site.gc-protostar h5, body.site.gc-protostar h6 {
  margin: 12px 0;
  color: #333;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-transform: none;
  text-rendering: optimizelegibility;
}
body.site.gc-protostar h1 { font-size: 36px; line-height: 40px; }
body.site.gc-protostar h2 { font-size: 22px; line-height: 24px; }
body.site.gc-protostar h3 { font-size: 18px; line-height: 20px; }
body.site.gc-protostar h4 { font-size: 15px; line-height: 20px; }
body.site.gc-protostar ul, body.site.gc-protostar ol { margin: 0 0 9px 25px; padding: 0; }
body.site.gc-protostar li { color: #333; line-height: 18px; margin: 0; }
body.site.gc-protostar ul { list-style: disc outside; }
body.site.gc-protostar ol { list-style: decimal outside; }
body.site.gc-protostar ul.unstyled, body.site.gc-protostar ul.nav, body.site.gc-protostar .unstyled { list-style: none; margin-left: 0; }
body.site.gc-protostar hr { margin: 18px 0; border: 0; border-top: 1px solid #eee; border-bottom: 1px solid #fff; height: 0; }

/* Buttons and forms */
body.site.gc-protostar .btn,
body.site.gc-protostar button.btn {
  display: inline-block;
  box-sizing: border-box;
  padding: 4px 12px;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #f5f5f5;
  color: #333;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  transition: none;
}
body.site.gc-protostar .btn-primary, body.site.gc-protostar button.btn-primary {
  background: var(--gc-accent);
  border-color: var(--gc-accent);
  color: #fff;
}
body.site.gc-protostar .btn-primary:hover, body.site.gc-protostar .btn-primary:focus,
body.site.gc-protostar button.btn-primary:hover, body.site.gc-protostar button.btn-primary:focus {
  background: #002f8d;
  border-color: #002f8d;
  color: #fff;
  text-decoration: none;
}
body.site.gc-protostar input, body.site.gc-protostar select, body.site.gc-protostar textarea {
  box-sizing: border-box;
  height: 26px;
  margin: 0;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: #555;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
body.site.gc-protostar input[type="checkbox"], body.site.gc-protostar input[type="radio"] { height: auto; width: auto; margin: 4px 0 0; padding: 0; box-shadow: none; border: 0; }
body.site.gc-protostar input.input-small { width: auto; }
body.site.gc-protostar select.input-mini { width: 60px; height: 26px; }
body.site.gc-protostar .element-invisible { position: absolute; padding: 0; margin: 0; border: 0; height: 1px; width: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
body.site.gc-protostar .control-group { margin-bottom: 9px; }
body.site.gc-protostar .input-prepend { display: inline-block; margin-bottom: 0; white-space: nowrap; font-size: 0; }
body.site.gc-protostar .input-prepend .add-on {
  display: inline-block;
  box-sizing: border-box;
  width: auto;
  min-width: 16px;
  height: 28px;
  padding: 4px 5px;
  border: 1px solid #ccc;
  margin-right: -1px;
  border-radius: 4px 0 0 4px;
  background: #eee;
  color: #333;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  vertical-align: top;
}
body.site.gc-protostar .input-prepend .add-on [class^="icon-"] { display: inline-block; width: 14px; height: 14px; line-height: 14px; margin-right: .25em; text-align: center; }
body.site.gc-protostar .input-prepend input { height: 28px; border-radius: 0 4px 4px 0; }
body.site.gc-protostar .form-inline .control-group { display: inline-block; vertical-align: middle; margin-bottom: 0; }
body.site.gc-protostar .checkbox label { display: inline; }
body.site.gc-protostar .badge { display: inline-block; padding: 2px 9px; border-radius: 9px; background: #999; color: #fff; font-size: 10.998px; font-weight: 700; line-height: 14px; vertical-align: baseline; white-space: nowrap; }
body.site.gc-protostar .badge-info { background: #3a87ad; }

/* Login box and list head of /espaceblog, printed as the source's Joomla 3 markup */
body.site.gc-protostar .hide { display: none !important; }
body.site.gc-protostar fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
body.site.gc-protostar form { margin: 0 0 18px; }
body.site.gc-protostar .btn-toolbar { display: block; margin: 9px 0; }
body.site.gc-protostar .btn-group { position: relative; display: inline-block; font-size: 0; white-space: nowrap; vertical-align: middle; }
body.site.gc-protostar .btn-group select { font-size: 13px; }
body.site.gc-protostar .btn-group > select { height: 27px; }
body.site.gc-protostar #login-form .pretext p, body.site.gc-protostar #login-form ul.unstyled { margin: 0 0 9px; }
body.site.gc-protostar #login-form a { color: #ea6161; }
body.site.gc-protostar #login-form { margin-top: 8px; }
body.site.gc-protostar #login-form .control-group { display: block; margin: 0 0 9px; }
body.site.gc-protostar #login-form .checkbox { margin: 0; padding: 0; min-height: 18px; }
body.site.gc-protostar #login-form .checkbox label { display: inline-block; margin-bottom: 5px; }
body.site.gc-protostar #login-form .checkbox input { float: left; margin: 4px 3px 0 0; }

/* Tables (category list of /espaceblog) */
body.site.gc-protostar table { width: 100%; max-width: 100%; margin: 0 0 18px; border-collapse: collapse; border-spacing: 0; background: transparent; }
body.site.gc-protostar th, body.site.gc-protostar td { padding: 8px; border-top: 1px solid #ddd; text-align: left; vertical-align: top; line-height: 18px; }
body.site.gc-protostar th { font-weight: 700; }
/* Joomla 6 prints the row title as <th scope="row">; the source's list has it in a plain cell */
body.site.gc-protostar tbody th { font-weight: 400; }
body.site.gc-protostar .table-bordered { border: 1px solid #ddd; border-collapse: separate; border-left: 0; border-radius: 4px; }
body.site.gc-protostar .table-bordered th, body.site.gc-protostar .table-bordered td { border-width: 1px 0 0 1px; border-style: solid; border-color: #ddd; }
/* Bootstrap 5 paints the stripe and hover colours as an inset shadow over the cell background: the source has none */
body.site.gc-protostar .table > :not(caption) > * > * { box-shadow: none; }
/* The source hides the caption with display: none; Joomla 6 prints it as a clipped table-caption box that still takes 1 px under the rows */
body.site.gc-protostar table caption.visually-hidden { display: none; }
body.site.gc-protostar .table thead th { vertical-align: bottom; }
body.site.gc-protostar .table-bordered > :is(thead:first-child, caption + thead) > tr:first-child > th { border-width: 0 0 0 1px; }
body.site.gc-protostar .table-striped tbody > tr:nth-child(odd) > :is(td, th) { background: #f9f9f9; }
body.site.gc-protostar .table-hover tbody tr:hover > :is(td, th) { background: #f5f5f5; }
/* The template colours the cells from --table-color, --table-striped-color and --table-hover-color (the page's black) and the info badge from --info-rgb (#30638d, behind an !important background): the source has #333 text and the Protostar #3a87ad badge */
body.site.gc-protostar .table { --table-color: #333; --table-striped-color: #333; --table-hover-color: #333; }
body.site.gc-protostar .badge.bg-info { --info-rgb: 58, 135, 173; }

/* Pagination */
/* The wrapper is a div: Bootstrap 5 makes .pagination a flex box with its own padding */
body.site.gc-protostar div.pagination { display: block; margin: 18px 0; padding: 0; }
body.site.gc-protostar .pagination ul { display: inline-block; margin: 0; padding: 0; list-style: none; }
body.site.gc-protostar .pagination li { display: inline; }
body.site.gc-protostar .pagination li > a {
  float: left;
  padding: 4px 12px;
  border: 1px solid #ddd;
  border-left-width: 0;
  background: #fff;
  line-height: 18px;
  text-decoration: none;
}
body.site.gc-protostar .pagination li:first-child > a { border-left-width: 1px; border-radius: 4px 0 0 4px; }
body.site.gc-protostar .pagination li:last-child > a { border-radius: 0 4px 4px 0; }
body.site.gc-protostar .pagination li > a:hover, body.site.gc-protostar .pagination li > a:focus { background: #f5f5f5; }
body.site.gc-protostar .pagination li.active > a, body.site.gc-protostar .pagination li.disabled > a { color: #999; cursor: default; }
body.site.gc-protostar .pagination li.active > a { background: #f5f5f5; }
body.site.gc-protostar .pagination li.disabled > a { background: transparent; }
/* Bootstrap 2 phone helper the source pager uses for the page numbers */
@media (max-width: 767px) { body.site.gc-protostar .hidden-phone { display: none !important; } }
/* Counter: the template prints it with Bootstrap 5 utilities (float and top padding); the source has a plain right float */
body.site.gc-protostar .counter { padding: 0 !important; }
body.site.gc-protostar .pagination [class^="icon-"] { display: inline-block; width: 14px; height: 14px; margin-right: .25em; vertical-align: text-top; line-height: 14px; }
body.site.gc-protostar .pagination [class^="icon-"]::before { font: 900 10px/12px 'Font Awesome 6 Free'; }
body.site.gc-protostar .pagination .icon-first::before { content: "\f049"; }
body.site.gc-protostar .pagination .icon-previous::before { content: "\f04a"; }
body.site.gc-protostar .pagination .icon-next::before { content: "\f04e"; }
body.site.gc-protostar .pagination .icon-last::before { content: "\f050"; }

/* Footer */
body.site.gc-protostar .footer { margin: 0; padding: 0; background: transparent; color: #333; }
body.site.gc-protostar .footer > .container { display: block; box-sizing: border-box; width: auto; max-width: 100%; margin: 0 auto; padding: 0; }
body.site.gc-protostar .footer > .container::before, body.site.gc-protostar .footer > .container::after { content: ''; display: table; }
body.site.gc-protostar .footer > .container::after { clear: both; }
@media (min-width: 768px) { body.site.gc-protostar .footer > .container { width: 724px; } }
@media (min-width: 980px) { body.site.gc-protostar .footer > .container { width: 940px; } }
body.site.gc-protostar .footer hr { margin: 18px 0; }
body.site.gc-protostar .footer .gc-footer p, body.site.gc-protostar .footer .gc-footer a, body.site.gc-protostar .footer .gc-footer li { color: #333; font-family: inherit; text-transform: none; font-size: 13px; line-height: 18px; }
body.site.gc-protostar .footer .gc-footer a { color: var(--gc-accent); }
body.site.gc-protostar .footer .gc-footer ul { margin: 0 0 0 25px; list-style: disc outside; }
body.site.gc-protostar .footer .gc-footer ul li { display: list-item; padding: 0; list-style: disc outside; font-family: inherit; text-transform: none; }

/* ---- css/error.css ---- */
/* Groupe Conseils: error page (error.php prints a bare document, like the source's Joomla 3 system error page).
   Slice a, SG-23. Numbers: section-spec 2.22 and the notfound table (900 px box, red header, 10 px body padding). */

html:has(body.gc-error-page) { background: #fff; }
body.gc-error-page {
  margin: 0;
  background: #fff;
  color: #5f6565;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  line-height: normal;
}
.gc-error { margin: 0; }
.gc-error #outline { width: 900px; max-width: 100%; box-sizing: content-box; margin: 0 auto; padding: 60px 0; background: #fff; }
/* the source's box is 900 px wide plus its 1 px border (902 px, wider than #outline); narrow screens keep it inside the viewport */
.gc-error #errorboxoutline { box-sizing: content-box; width: 900px; max-width: calc(100% - 2px); border: 1px solid #000; }
.gc-error #errorboxheader {
  background: #e44249;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  line-height: 23px;
  text-align: center;
}
.gc-error #errorboxbody { padding: 10px; }
.gc-error #errorboxbody p { margin: 11px 0; font-size: 11px; color: #5f6565; }
.gc-error #errorboxbody strong { font-family: inherit; font-weight: bold; color: inherit; }
.gc-error #errorboxbody ol, .gc-error #errorboxbody ul { margin: 11px 0; padding: 0 0 0 40px; font-size: 11px; }
.gc-error #errorboxbody li { margin: 0; }
.gc-error #errorboxbody a { color: #5f6565; text-decoration: underline; }
.gc-error #errorboxbody a:hover { color: #5f6565; }
.gc-error #techinfo { margin: 10px; padding: 10px; border: 1px solid #ccc; color: #ccc; }
.gc-error #techinfo p { margin: 11px 0; color: #ccc; }

/* ---- css/component.css ---- */
/* Groupe Conseils: print and e-mail view (?tmpl=component). Slice a, SG-27.
   The source's view carries no stylesheet (browser defaults), so component.php loads none and this file has no rule. */

/* Native consent control: discreet round icon, expanded on hover or keyboard focus. */
body.site .esa-cookie-reopen { display:flex; align-items:center; justify-content:flex-start; gap:0; box-sizing:border-box; width:44px; height:44px; min-height:44px; padding:11px; overflow:hidden; border:1px solid var(--gc-text); border-radius:24px; background:#fff; color:var(--gc-text); font:13px/1.4 var(--gc-font); transition:width .2s ease,gap .2s ease; }
.gc-cookie-icon { width:20px; height:20px; flex:0 0 20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.gc-cookie-label { white-space:nowrap; opacity:0; transition:opacity .15s ease; }
body.site .esa-cookie-reopen:focus-visible { width:180px; gap:9px; }
body.site .esa-cookie-reopen:focus-visible .gc-cookie-label { opacity:1; }
@media(hover:hover) { body.site .esa-cookie-reopen:hover { width:180px; gap:9px; background:var(--gc-text); color:#fff; } body.site .esa-cookie-reopen:hover .gc-cookie-label { opacity:1; } }
@media(prefers-reduced-motion:reduce) { body.site .esa-cookie-reopen,.gc-cookie-label { transition:none; } }
body.site .gc-contact a[href^="tel:"] { color:inherit; font:inherit; text-decoration:none; }
body.site .gc-contact a[href^="tel:"]:hover { text-decoration:underline; }
.gc-form-privacy { margin-top:18px!important; font-size:13px!important; line-height:1.6!important; }