/*
 * galic-opc.com on Joomla 6 (child of Cassiopeia). Base file, owned by presentation worker A: tokens, fonts, container, shell
 * (SG-ROOT, SG-SHELL), home rows (SG-HERO, SG-INTRO, SG-DOMAINS, SG-QUOTE), footer (SG-FOOTER), cookie banner (SG-COOKIE).
 * The fragments of workers B and C are appended after this file. Numbers are the source's, measured in section-spec.md.
 */

/* ---- SG-ROOT: tokens, fonts, document ---- */

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/lato-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/lato-400.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;
}

@font-face {
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/fa.woff2') format('woff2');
}

@font-face {
    font-family: 'lykka';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/lykka.woff') format('woff');
}

:root {
    --gc-blue: rgb(79, 130, 191);
    --gc-blue-deep: rgb(33, 87, 158);
    --gc-text: rgb(102, 102, 102);
    --gc-text-dark: rgb(98, 98, 98);
    --gc-bar: rgba(33, 87, 158, 0.8);
    /* Left and right edge of the content column. The source `.uk-container` is centred, at most 1040 px wide with 30 px padding, and
       from 1220 px at most 1280 px wide with 40 px padding: the edge is 30 px up to a 1040 px viewport, grows by half the
       surplus up to 1219 px, is 40 px at 1220 px and grows again from 1280 px. Grids reach into it by their gutter. */
    --gc-edge: 30px;
    --gc-gutter: 30px;
    --gc-pad-y: 30px;
    --gc-header: 131px;
}

@media (min-width: 1040px) {
    :root {
        --gc-edge: calc((100vw - 1040px) / 2 + 30px);
    }
}

@media (min-width: 1220px) {
    :root {
        --gc-edge: max(40px, calc((100vw - 1280px) / 2 + 40px));
        --gc-gutter: 40px;
        --gc-pad-y: 40px;
    }
}

html {
    background: #fff;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
}

body.site {
    display: block;
    min-height: 0;
    margin: 0;
    overflow-x: clip;
    background: #fff;
    color: var(--gc-text);
    font-family: lato;
    font-size: 15px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: normal;
    -webkit-font-smoothing: auto;
}

body.site h1,
body.site h2,
body.site h3,
body.site h4,
body.site h5,
body.site h6 {
    margin: 0 0 20px;
    font-family: lato;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
}

body.site p,
body.site ul,
body.site ol,
body.site figure {
    margin: 0;
}

body.site a {
    color: var(--gc-blue);
    text-decoration: none;
    transition: color 0.1s ease-in-out;
}

body.site a:hover {
    color: #5b5b5b;
    text-decoration: underline;
}

body.site img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Cassiopeia's grid, containers and module wrappers add no box of their own: the rows below own their spacing. */
body.site .site-grid {
    display: block;
}

body.site .grid-child {
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

body.site .container-component {
    display: block;
}

body.site .container-component > * + *,
body.site .container-component > :first-child {
    margin-top: 0;
}

body.site .mod-custom {
    margin: 0;
    padding: 0;
}

body.site main {
    display: block;
}

/* Page-type rows owned by C use `--gc-edge` and `--gc-gutter`; nothing here sizes a page's main block. */

/* Section title: blue-grey rule with the lykka glyph under the text (the source `uk-panel-title`/`uk-article-title` :before). */
.gc-title,
.gc-intro__title,
.gc-footer__title,
body.site .page-header h1 {
    position: relative;
    text-align: center;
}

.gc-title::before,
.gc-intro__title::before,
.gc-footer__title::before,
body.site .page-header h1::before {
    position: absolute;
    bottom: -16.5px;
    left: 50%;
    width: 150px;
    margin-left: -75px;
    color: rgba(185, 184, 184, 0.5);
    font-family: 'lykka';
    font-size: 13px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-transform: none;
    content: '\e600';
    speak: none;
}

/* The page title of every inner article (the source `uk-article-title`): 23px/29px, blue, 50 px below, rule glyph under it. */
body.site .page-header {
    margin: 0;
    padding: 0;
}

body.site .page-header h1 {
    margin: 0 0 50px;
    color: var(--gc-blue);
    font-size: 23px;
    line-height: 29px;
}

/* ---- SG-SHELL: header, logo, main menu ---- */

body.site .container-header {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: var(--gc-header);
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(51, 51, 51, 0.1);
    background: #fff;
    background-image: none;
    box-shadow: none;
    color: rgba(102, 102, 102, 0.5);
}

body.site .container-header .grid-child {
    flex: 0 0 auto;
    padding: 0;
}

body.site .container-header .container-nav {
    display: block;
}

body.site .container-header .mod-custom {
    position: static;
}

body.site .gc-logo {
    width: 66px;
    line-height: 0;
}

body.site .gc-logo__link {
    display: block;
    line-height: 0;
}

body.site .gc-logo__img {
    display: block;
    width: 66px;
    height: auto;
}

body.site .gc-nav-panel {
    display: contents;
}

body.site .container-header ul.gc-nav {
    display: flex;
    flex: none;
    flex-direction: row;
    margin: 0;
    padding: 0;
    color: rgba(102, 102, 102, 0.5);
    list-style: none;
}

body.site .container-header ul.gc-nav > li {
    margin: 0;
    padding: 0;
}

body.site .container-header ul.gc-nav > li::after {
    display: none;
}

body.site .container-header ul.gc-nav > li > a {
    position: relative;
    display: block;
    box-sizing: border-box;
    height: 180px;
    padding: 0 15px;
    color: rgba(102, 102, 102, 0.5);
    font-family: Lato;
    font-size: 13px;
    font-weight: 400;
    line-height: 180px;
    text-decoration: none;
    text-transform: uppercase;
    transition: none;
}

body.site .container-header ul.gc-nav > li:not(.active):hover > a,
body.site .container-header ul.gc-nav > li:not(.active) > a:focus {
    color: rgb(98, 98, 98);
    outline: none;
}

body.site .container-header ul.gc-nav > li.active > a {
    color: var(--gc-blue-deep);
}

/* Cassiopeia underlines menu links on hover with a more specific rule; the source only changes the colour. */
body.site .container-header ul.gc-nav.mod-menu > li > a:hover {
    text-decoration: none;
}

body.site .cc-menu-toggle {
    display: none;
}

.gc-nav-overlay {
    display: none;
}

@media (max-width: 767.98px) {
    body.site .container-header .grid-child {
        position: static;
    }

    body.site .gc-logo {
        position: absolute;
        top: 35px;
        left: calc(50% - 18.2px);
    }

    body.site .cc-menu-toggle {
        position: absolute;
        top: 35px;
        left: 30px;
        display: block;
        width: 29.6px;
        height: 60px;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        color: #626262;
        font-family: 'FontAwesome';
        font-size: 17px;
        line-height: 60px;
        text-align: left;
        cursor: pointer;
    }

    body.site .cc-menu-toggle:hover {
        color: #626262;
        text-decoration: none;
    }

    body.site .cc-menu-toggle::before {
        content: '\f0c9';
    }

    /* Off-canvas panel: 270 px, slides in from the left, the page moves 270 px, a light veil closes it (source `uk-offcanvas`). */
    body.site .gc-nav-panel {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1000002;
        display: block;
        width: 270px;
        max-width: 100%;
        overflow-y: auto;
        background: #222;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out, visibility 0s linear 0.3s;
        visibility: hidden;
    }

    html.gc-nav-open body.site .gc-nav-panel {
        transform: translateX(0);
        transition: transform 0.3s ease-in-out;
        visibility: visible;
    }

    body.site .gc-nav-panel ul.gc-nav {
        display: block;
    }

    body.site .gc-nav-panel ul.gc-nav > li > a {
        height: auto;
        padding: 10px 25px;
        color: #ccc;
        font-size: 15px;
        font-weight: 300;
        line-height: 24px;
        text-transform: none;
    }

    body.site .gc-nav-panel ul.gc-nav > li:not(.active):hover > a,
    body.site .gc-nav-panel ul.gc-nav > li:not(.active) > a:focus {
        color: #fff;
    }

    body.site .gc-nav-panel ul.gc-nav > li.active > a {
        background: #151515;
        color: #fff;
    }

    body.site {
        transition: margin-left 0.3s ease-in-out;
    }

    html.gc-nav-open,
    html.gc-nav-open body.site {
        overflow: hidden;
    }

    html.gc-nav-open body.site {
        margin-left: 270px;
        margin-right: -270px;
    }

    /* The header's own stacking level would keep the panel under the veil, so links could not be hovered or clicked. The veil and
       panel sit above the cookie options icon (z-index 1000000), which the source's drawer covers. */
    html.gc-nav-open body.site .container-header {
        z-index: auto;
    }

    html.gc-nav-open .gc-nav-overlay {
        position: fixed;
        inset: 0;
        z-index: 1000001;
        display: block;
        background: rgba(0, 0, 0, 0.1);
    }
}

/* ---- SG-HERO: home slideshow, caption bar, arrows (>= 768 only) ---- */

body.site .container-top-a {
    position: relative;
}

body.site .gc-hero {
    display: none;
}

@keyframes gc-hero-fade {
    from {
        opacity: 0;
    }
}

@media (min-width: 768px) {
    body.site .gc-hero {
        position: relative;
        z-index: 0;
        display: block;
        height: max(500px, calc(100vh - 180px));
        overflow: hidden;
    }

    body.site .gc-hero__slide {
        position: absolute;
        inset: 0;
        opacity: 0;
    }

    body.site .gc-hero__slide:first-child {
        opacity: 1;
    }

    body.site .gc-hero.is-ready .gc-hero__slide:first-child {
        opacity: 0;
    }

    /* The incoming slide fades in over the outgoing one (0.5 s, linear); the outgoing one stays until it is covered. */
    body.site .gc-hero.is-ready .gc-hero__slide.is-leaving {
        z-index: 5;
        opacity: 1;
    }

    body.site .gc-hero.is-ready .gc-hero__slide.is-active {
        z-index: 10;
        opacity: 1;
    }

    body.site .gc-hero__slide.is-entering {
        animation: gc-hero-fade 0.5s linear;
    }

    body.site .gc-hero__slide > img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
    }

    body.site .gc-hero__caption {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        padding: 20px;
        background: var(--gc-bar);
        color: #fff;
    }

    /* The caption bar fades with its slide on its own clock (0.8 s); hidden from the first paint once scripts run, so the first one fades in too. */
    html.gc-js body.site .gc-hero__caption {
        opacity: 0;
        transition: opacity 0.8s cubic-bezier(0, 0, 0.58, 1);
    }

    html.gc-js body.site .gc-hero__slide.is-active .gc-hero__caption {
        opacity: 1;
    }

    body.site .gc-hero__caption p {
        margin: 0;
        font-size: 18px;
        font-weight: 800;
        letter-spacing: 1px;
        line-height: 24px;
        text-align: center;
        text-transform: uppercase;
    }

    /* The source anchors the arrow 67vh below the bottom edge of the caption bar. */
    body.site .gc-hero__down {
        position: absolute;
        bottom: -67vh;
        left: calc(50% - 20px);
        display: block;
        width: 40px;
        height: 40px;
        background: var(--gc-bar);
        color: #fff;
        font-family: 'FontAwesome';
        font-size: 15px;
        line-height: 40px;
        text-align: center;
        text-decoration: none;
    }

    body.site .gc-hero__down::before {
        content: '\f078';
    }

    body.site .gc-hero__down:hover {
        color: #fff;
        text-decoration: none;
    }

    body.site .gc-hero__prev,
    body.site .gc-hero__next {
        position: absolute;
        top: 50%;
        z-index: 20;
        display: none;
        box-sizing: border-box;
        width: 40px;
        height: 40px;
        margin: -20px 0 0;
        padding: 0;
        border: 0;
        background: none;
        color: rgba(255, 255, 255, 0.5);
        font-family: 'FontAwesome';
        font-size: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
    }

    body.site .gc-hero__prev {
        left: 20px;
    }

    body.site .gc-hero__next {
        right: 20px;
    }

    body.site .gc-hero__prev::before {
        content: '\f104';
    }

    body.site .gc-hero__next::before {
        content: '\f105';
    }

    body.site .gc-hero:hover .gc-hero__prev,
    body.site .gc-hero:hover .gc-hero__next {
        display: block;
    }

    body.site .gc-hero__prev:hover,
    body.site .gc-hero__next:hover,
    body.site .gc-hero__prev:focus-visible,
    body.site .gc-hero__next:focus-visible {
        color: rgba(255, 255, 255, 0.9);
        outline: none;
    }
}

/* ---- SG-INTRO: presentation of Sacha Klein (blueprint background, text column, portrait) ---- */

/* The source grid reaches `--gc-gutter` into the container edge: columns are as wide as (content + gutter) / n and every cell moves
   back by one gutter and pads it again. */
body.site .gc-intro {
    display: grid;
    grid-template-columns: calc(100% + var(--gc-gutter));
    box-sizing: border-box;
    padding: var(--gc-pad-y) var(--gc-edge);
    background: url('../images/background-sacha-klein-architecte.jpg') center / cover no-repeat;
}

body.site .gc-intro__text,
body.site .gc-intro__photo {
    box-sizing: border-box;
    width: 100%;
    margin-left: calc(var(--gc-gutter) * -1);
    padding-left: var(--gc-gutter);
}

body.site .gc-intro__photo {
    margin-top: 30px;
    text-align: center;
}

body.site .gc-intro__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 30px 30px calc(var(--gc-gutter) + 30px);
}

body.site .gc-intro__title {
    margin: 0 0 40px;
    color: #000;
    font-size: 17px;
    font-weight: 800;
    line-height: 22px;
}

body.site .gc-intro__title span {
    color: #626262;
    font-weight: 500;
}

body.site .gc-intro__body {
    margin-bottom: 20px;
    text-align: justify;
}

body.site .gc-intro__body p {
    text-align: justify;
}

body.site .gc-intro__photo img {
    display: inline-block;
    max-width: 100%;
}

@media (min-width: 768px) {
    body.site .gc-intro {
        grid-template-columns: repeat(2, calc((100% + var(--gc-gutter)) / 2));
    }

    body.site .gc-intro__photo {
        margin-top: 0;
    }
}

/* ---- SG-DOMAINS: three photos and three labels in a grid ---- */

body.site .gc-domains {
    --gc-domains-gutter: 30px;
    --gc-domains-cols: 1;
    display: grid;
    grid-template-columns: repeat(var(--gc-domains-cols), calc((100% + var(--gc-domains-gutter)) / var(--gc-domains-cols)));
    gap: 30px 0;
    box-sizing: border-box;
    padding: 40px var(--gc-edge) var(--gc-pad-y);
}

body.site .gc-domains__cell {
    box-sizing: border-box;
    width: 100%;
    margin-left: calc(var(--gc-domains-gutter) * -1);
    padding-left: var(--gc-domains-gutter);
    text-align: center;
}

body.site .gc-domains__cell[data-gc-seen] {
    animation: none;
}

body.site .gc-domains__cell img {
    display: inline;
    max-width: 100%;
    height: auto;
}

body.site .gc-domains__photo img {
    width: 100%;
}

body.site .gc-domains__label img {
    display: block;
    margin: 0 auto;
}

body.site .gc-domains__label h4 {
    margin: 40px 0 20px;
    color: var(--gc-text-dark);
    font-size: 15px;
    line-height: 20px;
}

@media (min-width: 480px) {
    body.site .gc-domains {
        --gc-domains-cols: 2;
    }
}

@media (min-width: 768px) {
    body.site .gc-domains {
        --gc-domains-cols: 3;
    }
}

@media (min-width: 960px) {
    body.site .gc-domains {
        --gc-domains-gutter: 40px;
    }
}

@media (min-width: 1220px) {
    body.site .gc-domains {
        --gc-domains-gutter: 50px;
        row-gap: 40px;
    }
}

/* ---- SG-QUOTE: quotation on the parallax photo ---- */

body.site .gc-quote {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
    overflow: hidden;
}

body.site .gc-quote__bg {
    position: absolute;
    inset: 0;
    background: url('/images/accueil/background_parallax.jpg') 50% 0 / auto no-repeat;
}

body.site .gc-quote__text {
    position: relative;
    box-sizing: border-box;
    width: 90%;
    color: #fff;
    font-size: 19px;
    font-weight: 300;
    line-height: 31px;
    text-align: center;
}

@media (min-width: 480px) {
    body.site .gc-quote__text {
        width: 80%;
    }
}

@media (min-width: 768px) {
    body.site .gc-quote__text {
        width: 66.6667%;
    }
}

@media (min-width: 960px) {
    body.site .gc-quote__text {
        width: 50%;
    }
}

/* ---- SG-FOOTER: three columns, back to top ---- */

body.site .container-footer {
    margin: 0;
    padding: 60px;
    background: rgb(250, 250, 250);
    background-image: none;
    color: var(--gc-text);
    font-size: 12px;
    letter-spacing: 2px;
    line-height: 16px;
    text-align: center;
    text-transform: uppercase;
}

body.site .container-footer .grid-child {
    display: block;
    padding: 0;
}

body.site .container-footer a:not(.btn) {
    color: var(--gc-blue);
}

body.site .container-footer a:not(.btn):hover {
    color: var(--gc-text);
}

body.site .gc-footer {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--gc-gutter) * -1);
}

body.site .gc-footer__col {
    box-sizing: border-box;
    flex: 0 0 100%;
    padding-left: var(--gc-gutter);
}

body.site .gc-footer__col:nth-child(1) {
    text-align: center;
}

body.site .gc-footer__col:nth-child(1) + .gc-footer__col,
body.site .gc-footer__col:nth-child(2) ~ .gc-footer__col {
    margin-top: 30px;
}

body.site .gc-footer__logo {
    display: inline;
    width: 100px;
    height: auto;
}

body.site .gc-footer__title {
    margin: 0 0 40px;
    color: var(--gc-text-dark);
    font-size: 17px;
    line-height: 22px;
}

body.site .gc-footer__menu {
    margin-bottom: 40px;
    padding: 0 0 0 30px;
    list-style: none;
    text-align: left;
}

body.site .gc-footer__menu li {
    padding: 3px 0;
    font-weight: 400;
    line-height: 24px;
}

body.site .gc-footer__tagline,
body.site .gc-footer__legal,
body.site .gc-footer__mentions {
    padding-bottom: 10px;
    font-weight: 400;
    text-align: left;
}

body.site .gc-totop {
    display: block;
    flex: none;
    margin: 20px 0 4px calc(50% + var(--gc-gutter) / 2 - 8.1px);
    font-family: 'FontAwesome';
    font-size: 22px;
    line-height: 16px;
    letter-spacing: 2px;
    text-align: center;
    text-decoration: none;
}

body.site .gc-totop::before {
    content: '\f106';
}

body.site .gc-totop:hover {
    text-decoration: none;
}

@media (min-width: 768px) {
    body.site .gc-footer__col {
        flex-basis: 33.3333%;
    }

    body.site .gc-footer__col:nth-child(1) + .gc-footer__col,
    body.site .gc-footer__col:nth-child(2) ~ .gc-footer__col {
        margin-top: 0;
    }
}

/* ---- SG-COOKIE: Cookies CK banner and options icon (the extension's own rules stay; only the face is set) ---- */

#cookiesck,
#cookiesck_options,
#cookiesck_interface {
    font-family: 'Lato', serif;
}

/* The source banner is one row: the text centred in the space left of the buttons, no Personnaliser button and panel, and no cookie
   icon until a choice is made. The extension lays its row out as a flex column and shows the icon at once. */
body #cookiesck > div {
    display: block;
}

#cookiesck_settings,
#cookiesck_interface {
    display: none !important;
}

#cookiesck:not([style*='none']) ~ #cookiesck_options {
    display: none !important;
}
/* Contact page (SG-CONTACT): two columns, the RSForm form with the source look, the details column.
   Source: uk-grid-large (gutter 30 under 960 px, 40 to 1219 px, 50 from 1220 px), Bootstrap 2 RSForm
   (responsive framework: label 20 % + 30 px, boxes 96 % wide with a 4 px grey border, blue submit). */

.gc-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 960px) {
  .gc-contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
  }
}

@media (min-width: 1220px) {
  .gc-contact {
    column-gap: 50px;
  }
}

/* column titles: the source uk-article-title (centred, rule glyph under it) */
.gc-contact :is(.gc-contact__form, .gc-contact__details) > h2:first-child {
  position: relative;
  margin: 0 0 50px;
  color: var(--gc-blue);
  font-size: 23px;
  line-height: 29px;
  text-align: center;
}

.gc-contact :is(.gc-contact__form, .gc-contact__details) > h2:first-child::before {
  content: "\e600";
  position: absolute;
  bottom: -16.5px;
  left: 50%;
  width: 150px;
  margin-left: -75px;
  color: rgba(185, 184, 184, 0.5);
  font-family: lykka;
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- form */

.gc-contact__form form {
  margin: 30px 0 0;
}

.gc-contact__form fieldset {
  margin: 0;
  min-width: min-content;
}

.gc-contact .formResponsive :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
  width: 96%;
  vertical-align: middle;
  padding: 8px 4px;
  border: 4px solid #666;
  border-radius: 0;
  color: var(--gc-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}

.gc-contact .formResponsive :is(input[type="text"], input[type="email"], input[type="tel"], textarea):focus {
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

.gc-contact .formResponsive .formHorizontal .formControls {
  margin-left: 0;
}

.gc-contact .formResponsive :is(input[type="checkbox"], input[type="radio"]) {
  vertical-align: middle;
}

/* phone width of the source form: narrower first control, 96 % boxes against the framework's forced 100 %, page clipped at the viewport */
@media screen and (max-width: 320px) {
  body:has(.gc-contact) {
    overflow-x: hidden;
  }

  .gc-contact .formResponsive .formHorizontal .formControls:first-child {
    width: 80%;
  }

  .gc-contact .formResponsive :is(input[type="text"], textarea, select) {
    width: 96% !important;
  }
}

.gc-contact .formResponsive :is(input, textarea)::placeholder {
  color: rgba(102, 102, 102, 0.5);
  opacity: 1;
}

.gc-contact .formControls label {
  display: block;
  font-weight: 400;
}

/* the visually hidden group legend keeps the source colour */
.gc-contact legend {
  color: #484848;
}

.gc-contact .formControlLabel {
  box-sizing: content-box;
  font-weight: 300;
}

.gc-contact .rsform-block-projet .formControlLabel {
  padding-right: 30px;
}

.gc-contact .rsform-block-envoi {
  text-align: center;
}

.gc-contact .rsform-block-captcha .formBody > div > div {
  margin: 0 auto;
}

.gc-contact .formResponsive button[type="submit"] {
  font-family: inherit;
  font-weight: 400;
}

/* ---- details */

.gc-contact__row {
  display: flow-root;
}

.gc-contact__icon {
  float: left;
  width: 30px;
  height: 30px;
  margin: 10px 20px;
  background: var(--gc-blue);
  color: #fff;
  font-family: FontAwesome;
  font-size: 15px;
  font-style: normal;
  font-weight: normal;
  line-height: 30px;
  text-align: center;
}

.gc-contact__icon--phone::before {
  content: "\f095";
}

.gc-contact__icon--mail::before {
  content: "\f003";
}

.gc-contact__detail {
  margin-bottom: 20px;
}

.gc-contact__row:last-child .gc-contact__detail {
  margin-bottom: 0;
}

.gc-contact .gc-contact__detail h4 {
  margin: 0;
  color: var(--gc-blue);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}
/* Page content rows (SG-PAGE): main block, article text and the previous/next link.
   Source: .tm-block-main > .uk-container (padding 30 under 1220 px, 40 from 1220 px) on the blueprint background;
   text styles from the source theme and custom.css (paragraphs and lists have no margin, `* + h2` has 40 px above).
   Base typography, links and the content edge (--gc-edge, --gc-pad-y) are in user.css. */

/* ---- main block (not the home page: its component area is empty and must stay flat) */

body.site:not(.gc-home) .container-component {
  padding: var(--gc-pad-y) var(--gc-edge);
  background: url(../images/background-sacha-klein-architecte.jpg) center / cover no-repeat;
}

/* ---- article text */

body.site :is(.gc-text, .gc-project__text) :is(h2, h3, h4) {
  margin: 40px 0 20px;
}

body.site :is(.gc-text, .gc-project__text) h2 {
  color: var(--gc-blue);
  font-size: 23px;
  line-height: 29px;
}

body.site :is(.gc-text, .gc-project__text) h3 {
  color: var(--gc-text-dark);
  font-size: 17px;
  line-height: 22px;
}

body.site :is(.gc-text, .gc-project__text) h4 {
  color: var(--gc-text-dark);
  font-size: 15px;
  line-height: 20px;
}

body.site :is(.gc-text, .gc-project__text) :is(h2, h3, h4):first-child {
  margin-top: 0;
}

:is(.gc-text, .gc-project__text) :is(ul, ol) {
  padding-left: 30px;
}

:is(.gc-text, .gc-project__text) ul {
  list-style: disc;
}

:is(.gc-text, .gc-project__text) strong {
  font-weight: 700;
}

:is(.gc-text, .gc-project__text) hr {
  box-sizing: content-box;
  height: 0;
  margin: 20px 0;
  border: 0;
  border-top: 1px solid rgba(51, 51, 51, 0.1);
  opacity: 1;
}

/* module title above the reference grid, in the reference intro text: wins over the text rule that zeroes a first child's top margin */
body.site .gc-refs .gc-refs__title:first-child {
  margin: 25px 0 20px;
  color: var(--gc-text-dark);
  font-size: 17px;
  line-height: 22px;
}

/* ---- previous/next link (test pages): the source is a right-aligned uk-pagination */

.pagenavigation {
  display: flow-root;
  margin: 0;
}

.pagenavigation .pagination {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}

body.site .pagenavigation a {
  position: relative;
  box-sizing: content-box;
  min-width: 20px;
  padding: 3px 5px;
  border: 1px solid rgba(51, 51, 51, 0.1);
  border-radius: 0;
  background: none;
  color: rgba(102, 102, 102, 0.5);
  font-size: 15px;
  font-weight: 300;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  transition: border 0.3s, background 0.3s, color 0.3s ease-in-out;
}

body.site .pagenavigation a:hover,
body.site .pagenavigation a:focus {
  border-color: #5b5b5b;
  background: none;
  color: var(--gc-text);
  outline: none;
  text-decoration: none;
}

.pagenavigation .icon-chevron-right::before {
  content: "\f061";
  font-family: FontAwesome;
  font-weight: normal;
}
/* Partners page (SG-PARTNERS): logo grid with the hover panel, then the clients slideset.
   Source: uk-grid (1 column under 960 px, 3 from 960 px, gutter 30 px, 40 px from 1220 px), uk-overlay hover panel
   (blue 80 % with a search icon, fade 0.3 s, logo scale 1.1), Widgetkit slideset with a small grid (gutter 10 px). */

/* ---- logo grid */

.gc-partners {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
}

@media (min-width: 960px) {
  .gc-partners {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1220px) {
  .gc-partners {
    gap: 40px;
  }
}

.gc-partners__item {
  position: relative;
  justify-self: center;
  width: min(100%, 300px);
  overflow: hidden;
}

.gc-partners__img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform 0.3s ease-out;
}

/* The panel and its glyph fade in by colour, not by opacity: an element at opacity 0 inside a scroll-reveal tile is taken for a
   hidden reveal and forced visible by capture tools. The result on screen is the source's opacity fade. */
.gc-partners__overlay {
  position: absolute;
  inset: 0;
  background: rgba(33, 87, 158, 0);
  transition: background-color 0.3s ease-out;
}

.gc-partners__overlay::before {
  content: "\f002";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  color: rgba(255, 255, 255, 0);
  font-family: FontAwesome;
  font-size: 50px;
  line-height: 1;
  text-align: center;
  transition: color 0.3s ease-out;
}

.gc-partners__item:hover .gc-partners__img,
.gc-partners__item:focus-visible .gc-partners__img {
  transform: scale(1.1);
}

.gc-partners__item:hover .gc-partners__overlay,
.gc-partners__item:focus-visible .gc-partners__overlay {
  background-color: rgba(33, 87, 158, 0.8);
}

.gc-partners__item:hover .gc-partners__overlay::before,
.gc-partners__item:focus-visible .gc-partners__overlay::before {
  color: #fff;
}

/* ---- clients slideset */

body.site .gc-clients__title {
  margin: 40px 0 20px;
  color: var(--gc-blue);
  font-size: 23px;
  line-height: 29px;
  text-align: center;
}

.gc-clients {
  display: grid;
  grid-template-columns: 1fr 40px 40px 1fr;
  column-gap: 10px;
}

.gc-clients .gc-clients__track {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 0 -10px;
  padding: 0;
  list-style: none;
}

.gc-clients__item {
  flex: 0 0 calc(100% / var(--gc-clients-view, 1));
  box-sizing: border-box;
  padding-left: 10px;
}

.gc-clients__item img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* set change: logos fade in one after the other, and out the same way (delays set by partners.js), as the source slideset */
.gc-clients__item.is-entering,
.gc-clients__item.is-leaving {
  animation: gc-clients-fade 0.2s linear both;
}

.gc-clients__item.is-leaving {
  animation-direction: reverse;
}

@keyframes gc-clients-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.gc-clients__prev,
.gc-clients__next {
  position: relative;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  margin-top: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(50, 50, 50, 0.4);
  font-family: FontAwesome;
  font-size: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}

.gc-clients__prev {
  grid-column: 2;
}

.gc-clients__next {
  grid-column: 3;
}

.gc-clients__prev::before {
  content: "\f104";
}

.gc-clients__next::before {
  content: "\f105";
}

.gc-clients__prev:hover,
.gc-clients__next:hover,
.gc-clients__prev:focus-visible,
.gc-clients__next:focus-visible {
  color: rgba(50, 50, 50, 0.7);
  outline: none;
}

.gc-clients__prev:active,
.gc-clients__next:active {
  color: rgba(50, 50, 50, 0.9);
}

.gc-clients .gc-clients__dots {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: -15px 0 0 -15px;
  padding: 0;
  list-style: none;
}

.gc-clients__dots li {
  flex: none;
  margin-top: 15px;
  padding-left: 15px;
}

.gc-clients__dots button {
  display: block;
  box-sizing: content-box;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 2px solid rgba(51, 51, 51, 0.1);
  border-radius: 50%;
  background: none;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.3s ease;
}

.gc-clients__dots button:hover,
.gc-clients__dots button:focus-visible,
.gc-clients__dots .is-active button {
  border-color: #5b5b5b;
  outline: none;
}

.gc-clients__dots button:active {
  background: #5b5b5b;
}

/* ---- clients box (test pages: the module under the article): grey panel, left-aligned small title, same slideset */

.gc-confiance {
  box-sizing: border-box;
  margin: 0 var(--gc-edge) var(--gc-pad-y);
  padding: 30px;
  background: #fafafa;
  color: #666;
}

@media (min-width: 1220px) {
  .gc-confiance {
    padding: 40px;
  }
}

body.site .gc-confiance__title {
  margin: 0 0 20px;
  padding-bottom: 50px;
  color: var(--gc-text-dark);
  font-size: 17px;
  font-weight: 300;
  line-height: 22px;
  text-transform: uppercase;
}
/* SG-PROJECT and SG-CAROUSEL: project page (before/after slider, contractors box, concept line, boxed title, photo carousel, lightbox).
   Layout model of the source (Bootstrap 2 fluid row): figure and contractors box are floated columns whose widths and gutter
   depend on the viewport range, the concept line is a full-width float, the boxed title clears them; below 768 px all stack.
   The project text (p and ul after the carousel) is styled with the article text. */

body.site .gc-project__intro {
  --gcp-gutter: 2.12765957%;
  --gcp-span7: 57.44680851%;
  --gcp-span5: 40.42553191%;
  display: flow-root;
  margin-bottom: 20px;
}

@media (min-width: 768px) and (max-width: 979px) {
  body.site .gc-project__intro {
    --gcp-gutter: 2.76243094%;
    --gcp-span7: 57.18232044%;
    --gcp-span5: 40.05524862%;
  }
}

@media (min-width: 1200px) {
  body.site .gc-project__intro {
    --gcp-gutter: 2.56410256%;
    --gcp-span7: 57.26495726%;
    --gcp-span5: 40.17094017%;
  }
}

body.site .gc-project__figure,
body.site .gc-project__interv,
body.site .gc-project__concept,
body.site .gc-carousel {
  float: left;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 0 var(--gcp-gutter);
  overflow-x: clip;
}

body.site .gc-project__figure {
  width: var(--gcp-span7);
  margin-left: 0;
}

/* The browser's bolder lands on 400 inside the light 300 text */
body.site .gc-project__concept strong {
  font-weight: 700;
}

body.site .gc-project__interv {
  width: var(--gcp-span5);
}

@media (max-width: 767px) {
  body.site .gc-project__figure,
  body.site .gc-project__interv,
  body.site .gc-project__concept,
  body.site .gc-carousel {
    float: none;
    width: 100%;
    margin-left: 0;
  }
}

/* Carousel after the intro row (the source's plain span12, not the fluid row): fixed widths per breakpoint, contained so the footer does not rise under it */
body.site .gc-project > .mod-custom > .gc-carousel {
  display: flow-root;
  float: none;
}

@media (min-width: 768px) {
  body.site .gc-project > .mod-custom > .gc-carousel {
    width: 724px;
    margin-left: 20px;
  }
}

@media (min-width: 980px) {
  body.site .gc-project > .mod-custom > .gc-carousel {
    width: 940px;
  }
}

@media (min-width: 1200px) {
  body.site .gc-project > .mod-custom > .gc-carousel {
    width: 1170px;
    margin-left: 30px;
  }
}

/* Before/after slider */
body.site .gc-compare {
  position: relative;
  width: 90%;
  max-width: 768px;
  margin: 0 auto;
}

body.site .gc-compare img {
  display: block;
  max-width: 100%;
  height: auto;
}

body.site .gc-compare__label {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 1em;
  color: #fff;
  font-size: 15px;
  line-height: 24px;
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.3s 0.7s, opacity 0.3s 0.7s;
  -webkit-font-smoothing: antialiased;
}

body.site .gc-compare__label.is-hidden {
  visibility: hidden;
}

body.site .gc-compare.is-visible .gc-compare__label {
  opacity: 1;
  transform: translateY(0);
}

body.site .gc-compare__top {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  overflow: hidden;
  transform: translateZ(0);
  backface-visibility: hidden;
}

body.site .gc-compare__top img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  max-width: none;
  height: 100%;
}

body.site .gc-compare__top .gc-compare__label {
  right: auto;
  left: 0;
  text-shadow: -2px 0 1px #000;
}

body.site .gc-compare.is-visible .gc-compare__top {
  width: 50%;
  animation: gc-compare-in 0.7s;
}

@keyframes gc-compare-in {
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}

body.site .gc-compare__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: var(--gc-blue, #4f82bf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpolygon fill='%23fff' points='13,21 8,16 13,11'/%3E%3Cpolygon fill='%23fff' points='19,11 24,16 19,21'/%3E%3C/svg%3E") no-repeat center;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  cursor: move;
  opacity: 0;
  touch-action: none;
  transform: translate3d(0, 0, 0) scale(0);
}

body.site .gc-compare__handle.draggable {
  background-color: #445b7c;
}

body.site .gc-compare.is-visible .gc-compare__handle {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition: transform 0.3s 0.7s, opacity 0s 0.7s;
}

/* Contractors box */
body.site .gc-project__interv {
  padding: 15px;
  background: var(--gc-blue, #4f82bf);
  color: #fff;
  font-size: 13px;
  line-height: 24px;
}

body.site .gc-project__interv-title {
  margin: 0 0 15px;
  padding: 0;
  color: #fff;
  font-size: 17px;
  font-weight: 300;
  line-height: 22px;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
}

/* Bullets as the source draws them: the dashed first list (ul.intro, followed by ul.col-2) and a lone plain list keep them, the two-column list has none */
body.site .gc-project__list {
  margin: 0;
  padding: 0 0 0 30px;
  list-style: disc;
}

body.site .gc-project__list:has(+ .gc-project__list--cols) {
  margin-bottom: 10px;
  border: 1px dashed;
}

body.site .gc-project__list--cols {
  column-count: 2;
  list-style: none;
}

body.site .gc-project__list li {
  list-style: inherit;
}

body.site ul.gc-project__text {
  padding-left: 30px;
}

body.site .gc-project__name {
  color: #000;
  font-style: italic;
  text-transform: uppercase;
}

body.site .gc-project__interv a {
  color: #000;
  text-decoration: underline;
}

/* Boxed title */
body.site .gc-project__title {
  display: block;
  clear: both;
  box-sizing: border-box;
  width: 100%;
  margin: 35px auto;
  padding: 15px;
  border: 1px solid #dedede;
  color: var(--gc-blue, #4f82bf);
  font-size: 23px;
  font-weight: 300;
  line-height: 29px;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
}

/* Photo carousel: 5 photos per view above 800 px, 4 from 621 px, 1 below; native swipe plus drag and arrows (script) */
body.site .gc-carousel__track {
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  cursor: grab;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

body.site .gc-carousel__track::-webkit-scrollbar {
  display: none;
}

body.site .gc-carousel__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

/* The source's empty .zt-item has a 30 px margin that collapses through and sits above the 10 px image margin: 40 px top */
body.site .gc-carousel__item {
  flex: 0 0 20%;
  box-sizing: border-box;
  padding: 40px 30px 20px 0;
  scroll-snap-align: start;
}

@media (max-width: 800px) {
  body.site .gc-carousel__item {
    flex-basis: 25%;
  }
}

@media (max-width: 620px) {
  body.site .gc-carousel__item {
    flex-basis: 100%;
  }
}

body.site .gc-carousel__link {
  display: block;
  text-align: center;
}

/* The source served centre-cropped 400 x 300 copies; the originals are cropped here */
body.site .gc-carousel__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: 6px 6px 0 0 rgba(51, 51, 51, 0.1);
  -webkit-user-drag: none;
}

body.site .gc-carousel__nav {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

body.site .gc-carousel__prev,
body.site .gc-carousel__next {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 30.3px;
  height: 30px;
  margin: 5px;
  padding: 0;
  border: 0;
  border-radius: 30px;
  background: var(--gc-blue, #4f82bf);
  cursor: pointer;
  opacity: 0.5;
}

body.site .gc-carousel__prev:hover,
body.site .gc-carousel__next:hover,
body.site .gc-carousel__prev:focus-visible,
body.site .gc-carousel__next:focus-visible {
  opacity: 1;
}

body.site .gc-carousel__prev::before,
body.site .gc-carousel__next::before {
  position: absolute;
  top: 9px;
  left: 10px;
  width: 12px;
  height: 12px;
  content: "";
  background: no-repeat center / contain;
}

body.site .gc-carousel__prev::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='6' fill='%23fff'/%3E%3Cpath d='M3 6h6M5.4 3.6L3 6l2.4 2.4' fill='none' stroke='%234f82bf' stroke-width='1.3'/%3E%3C/svg%3E");
}

body.site .gc-carousel__next::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='6' fill='%23fff'/%3E%3Cpath d='M9 6H3M6.6 3.6L9 6l-2.4 2.4' fill='none' stroke='%234f82bf' stroke-width='1.3'/%3E%3C/svg%3E");
}

/* Lightbox (script-made): dark overlay, centred photo, two arrows when the project has several photos */
html.gc-lightbox-open {
  overflow: hidden;
}

body.site .gc-lightbox {
  position: fixed;
  z-index: 1043;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s;
}

body.site .gc-lightbox.is-ready {
  opacity: 1;
}

body.site .gc-lightbox__bg {
  position: absolute;
  inset: 0;
  background: #333;
  opacity: 0.7;
}

body.site .gc-lightbox__stage {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: 0 8px;
  text-align: center;
}

body.site .gc-lightbox__stage::before {
  display: inline-block;
  height: 100%;
  content: "";
  vertical-align: middle;
}

body.site .gc-lightbox__figure {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  vertical-align: middle;
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.3s;
}

body.site .gc-lightbox.is-ready .gc-lightbox__figure {
  opacity: 1;
  transform: translateX(0);
}

body.site .gc-lightbox__figure::after {
  position: absolute;
  z-index: -1;
  inset: 0 0 40px;
  content: "";
  background: #333;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

body.site .gc-lightbox__img {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100vh;
  height: auto;
  margin: 0 auto;
  padding: 0 0 40px;
}

body.site .gc-lightbox__close,
body.site .gc-lightbox__prev,
body.site .gc-lightbox__next {
  position: absolute;
  z-index: 1046;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

body.site .gc-lightbox__close {
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  font: 28px/44px Arial, Baskerville, monospace;
  text-align: center;
}

body.site .gc-lightbox__prev,
body.site .gc-lightbox__next {
  top: 50%;
  width: 90px;
  height: 110px;
  margin-top: -55px;
}

body.site .gc-lightbox__prev {
  left: 0;
  transform-origin: 0;
}

body.site .gc-lightbox__next {
  right: 0;
  transform-origin: 100%;
}

body.site .gc-lightbox__prev::before,
body.site .gc-lightbox__next::before {
  position: absolute;
  top: 43px;
  width: 0;
  height: 0;
  content: "";
  border: 13px solid transparent;
}

body.site .gc-lightbox__prev::before {
  left: 31px;
  border-right: 17px solid #fff;
  border-left: 0;
}

body.site .gc-lightbox__next::before {
  left: 39px;
  border-right: 0;
  border-left: 17px solid #fff;
}

@media (max-width: 900px) {
  body.site .gc-lightbox__prev,
  body.site .gc-lightbox__next {
    transform: scale(0.75);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.site .gc-compare.is-visible .gc-compare__top {
    animation: none;
  }

  body.site .gc-lightbox,
  body.site .gc-lightbox__figure {
    transition: none;
  }
}
/* SG-REFS: reference grid (/architecture-interieure.html, /opc.html): filter bar, grid, hover title panel.
   Spacing model of the source (Zentools isotope grid): the list is 1/0.99 of the container wide, items are 24 % + 1 % gutter,
   one column below 788 px, 4 px between rows, the image block starts 10 px below the item top. */

/* Filter bar: bordered box, 20 px inner padding left and top, items in one line, wrapping on a phone */
body.site .gc-refs__filter {
  display: flow-root;
  box-sizing: content-box;
  width: 100%;
  margin: 0 0 30px;
  padding: 20px 0 0 20px;
  border: 1px solid #eee;
  border-radius: 2px;
  list-style: none;
}

body.site .gc-refs__filter-item {
  float: left;
  margin: 0 10px 0 0;
  padding-bottom: 2px;
  color: #999;
  font-size: 18px;
  line-height: 24px;
  text-transform: uppercase;
  cursor: pointer;
}

body.site .gc-refs__filter-item span {
  margin-right: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #333;
}

body.site .gc-refs__filter-item.is-active span {
  color: var(--gc-blue, #4f82bf);
}

body.site .gc-refs__filter-item span::after {
  margin: 0 0 0 10px;
  content: "";
}

body.site .gc-refs__filter-item span:hover,
body.site .gc-refs__filter-item:focus-visible span {
  color: #b64926;
}

body.site .gc-refs__grid {
  display: flow-root;
  width: calc(100% / 0.99);
  margin: 0;
  padding: 0;
  list-style: none;
}

body.site .gc-refs__item {
  position: relative;
  float: left;
  box-sizing: border-box;
  width: 100%;
  margin: 0 1% 4px 0;
  padding: 10px 0 0;
  overflow: hidden;
}

@media (min-width: 788px) {
  body.site .gc-refs__item {
    width: 24%;
  }
}

body.site .gc-refs__item.is-hidden {
  display: none;
}

body.site .gc-refs__item.is-entering {
  animation: gc-refs-enter 0.4s;
}

@keyframes gc-refs-enter {
  from {
    opacity: 0;
    transform: scale(0.001);
  }
}

body.site .gc-refs__link {
  display: block;
  background: #fff;
  text-align: center;
}

/* The source served centre-cropped 400 x 400 copies; the originals are cropped here */
body.site .gc-refs__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  transition: all 0.6s;
}

body.site .gc-refs__img:hover {
  opacity: 0.5;
}

/* Title panel: hidden below the image, slides up on hover (and on keyboard focus). The item in the selector keeps the article heading margins and colour from reaching the panel */
body.site .gc-refs__item .gc-refs__name {
  position: absolute;
  z-index: 10;
  bottom: -200px;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 30px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 17px;
  font-weight: 300;
  line-height: 22px;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
  transition: all 0.6s;
}

body.site .gc-refs__name a,
body.site .gc-refs__name a:hover {
  color: #fff;
  text-decoration: none;
}

body.site .gc-refs__item:hover .gc-refs__name,
body.site .gc-refs__item:focus-within .gc-refs__name {
  bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  body.site .gc-refs__item.is-entering {
    animation: none;
  }
}