[css-dropshadow] {
        display: block;
        --offset: 0.02em;
        position: relative;
        line-height: 1em;
        white-space: nowrap;
        --stroke-color: var(--color, var(--current-title));
    }

    [css-dropshadow]:after {
        position: absolute;
        display: block;
        white-space: nowrap;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-family: var(--font-title);
        font-weight: 700;
        line-height: 1em;
        text-transform: uppercase;
        content: attr(css-dropshadow);
        color: transparent;
        transform: translate(calc(1.6*var(--offset)),
                calc(1.2*var(--offset)));
        -webkit-text-stroke: var(--offset) var(--stroke-color);
        margin: calc(-1*var(--stroke));
    }
.title-cartouche {
        --color: var(--current-title);
        --bracket-thickness: 0.4rem;
        width: fit-content;
        position: relative;
        padding: 0.5rem 1rem;
        margin-block: 2rem;
    }

    .title-cartouche:before,
    .title-cartouche:after {
        --x: var(--bracket-thickness);
        --size: 3.2rem;
        content: '';
        position: absolute;
        /* background: var(--color); */
        border-color: var(--color);
        border-width: var(--x);
        width: var(--size);
        height: var(--size);
    }

    .title-cartouche:before {
        bottom: calc(-1*var(--x));
        left: calc(-1*var(--x));
        border-left-style: solid;
        border-bottom-style: solid;
        /* clip-path: polygon(0 0, var(--x) 0, var(--x) calc(100% - var(--x)), 100% calc(100% - var(--x)), 100% 100%, 0 100%); */
    }

    .title-cartouche:after {
        top: calc(-1*var(--x));
        right: calc(-1*var(--x));
        border-right-style: solid;
        border-top-style: solid;
        /* clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - var(--x)) 100%, calc(100% - var(--x)) var(--x), 0 var(--x)); */
    }

    .title-container h1 {
        color: var(--color);
        line-height: 11.4rem;
    }

    .title-top-right-dots {
        position: absolute;
        top: 0;
        right: calc(-50% + 0.7rem);
        height: 3rem;
        width: 50%;
        z-index: 2;
    }

    .title-bottom-left-dots {
        position: absolute;
        bottom: -2.3rem;
        left: -4.8rem;
        height: 7rem;
        width: 7rem;
        z-index: 2;
    }

    .title-triangles-left {
        position: absolute;
        bottom: 0;
        left: -11.3rem;
    }

    .title-triangles-right {
        position: absolute;
        bottom: 0.4em;
        right: -15.1rem;
    }

    .title-left-stripes {
        position: absolute;
        --numStripes: round(calc(0.4em / var(--stripe-height)));
        right: 100%;
        width: 50vw;
        margin-right: -2rem;
        top: 0.13em;
        height: calc((var(--numStripes) + 1) * var(--stripe-height));
    }

    .title-right-stripes {
        --notch: 16rem;
        --numStripes: round(calc(0.4em / var(--stripe-height)));
        position: absolute;
        left: 100%;
        width: 50vw;
        bottom: 0;
        height: calc((var(--numStripes) + 1) * var(--stripe-height));
        clip-path: polygon(var(--notch) 0,
                100% 0,
                100% 100%,
                0 100%,
                0 calc(1.5*var(--stripe-height)),
                var(--notch) calc(1.5*var(--stripe-height)));
    }
.head-content {
        width: 100%;
        max-width: 103rem;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "title pic"
            "text pic"
            "button .";
        column-gap: 6rem;
        margin-bottom: 5rem;


        headline {
            grid-area: title;
        }

        headline .title-sub {
            margin-block: 3rem;
        }
    }

    .head-text {
        grid-area: text;
    }

    .head-pic {
        grid-area: pic;
        justify-self: end;
        position: relative;
        width: 42rem;
        height: 42rem;
        margin-top: 7rem;
    }

    @media screen and (max-width: 960px) {
        .head-content {
            margin-top: -6rem;
            padding-inline: 0;
            grid-template-columns: 1fr;
            grid-template-areas:
                "title"
                "text"
                "pic"
                "button";
            margin-bottom: 0;
        }

        headline {
            justify-self: center;
            padding-left: 0;
            padding-right: 5rem;
            width: fit-content;
        }

        headline .title-sub {
            padding: 0;
            margin: 0 !important;
        }

        .head-text {
            text-align: center;
            max-width: 60rem;
            justify-self: center;
        }

        .head-pic {
            justify-self: center;
            margin-top: 3rem !important;
            margin-bottom: 6rem !important;
            aspect-ratio: 1/1;
            width: 100%;
            height: auto;
            max-width: 30rem;
        }
    }

    .head-pic-dots {
        position: absolute;
        bottom: -2.3rem;
        left: -4.8rem;
        height: 7rem;
        width: 7rem;
        z-index: 2;
    }

    .head-content .title-right-stripes {
        width: 50rem;
    }
.socials {
        height: 4rem;
        display: flex;
        gap: 1rem;
        list-style: none;
        margin-block: 1rem;
    }

    .socials img {
        height: 100%;
    }
.block {
        width: 100%;
        display: flex;

        flex-flow: column;
        align-items: center;

        background: var(--current-background);
        color: var(--current-text);

        padding-inline: var(--gutters);
        padding-block: 5rem;
    }

    section .block .block-content {
        max-width: 120rem;
    }

    .block-content {
        width: 100%;
        display: flex;

        flex-flow: column;
        align-items: center;
    }

    .block.full {
        padding-inline: 0;
    }

    .block-content>* {
        margin-inline: auto;
    }

    .block.left-align>* {
        margin-left: 0;
    }

    .block.col2 .block-content {
        display: flex;
        flex-flow: row nowrap;
        gap: 2rem;
    }

    .block.col2 .block-content>* {
        flex: 0 0 50%;
    }

    .block~.arrow {
        align-self: center;
        width: 14rem;
        margin-top: -0.5px;
        margin-inline: auto;
        height: var(--header-arrow-height);
        background: var(--current-background);
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    }

    .block.footer {
        padding-block: 10rem;
        border-bottom: 6rem solid var(--secondary);
    }
.identite-graphique-struct {
        position: relative;
        width: 100%;
        display: grid;
        --identite-col-gap: 2rem;
        grid-template-columns: clamp(0px, calc((100% - var(--identite-col-gap)) / 2), 47rem) minmax(0, 1fr);
        grid-template-areas:
            "title title"
            ". subtitle2"
            "pic text";
        column-gap: var(--identite-col-gap);
        row-gap: 0;

        .title-sub {
            color: var(--alt-title);
        }
    }

    .identite-graphique-struct-title {
        position: relative;
        grid-area: title;
        margin-left: 12rem;

        --h1-size: 9rem;

        .subtitle1 .title-sub {
            padding-left: 23.5rem;
        }
    }

    .identite-graphique-struct-pic {
        grid-area: pic;
        max-width: 47rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .subtitle2 {
        grid-area: subtitle2;
    }

    .subtitle2 .title-sub {
        padding-left: 0;
        border-bottom: 3px solid var(--current-highlight);
    }

    @media screen and (max-width: 1006px) {
        .identite-graphique-struct-title {
            justify-self: center;
            margin-left: 0;
        }
    }

    @media screen and (max-width: 865px) {
        .identite-graphique-struct {
            grid-template-columns: 1fr;
            grid-template-areas:
                "title"
                "subtitle2"
                "text"
                "pic";
            justify-content: center;
            align-items: center;
            margin-inline: 3rem;
        }

        .identite-graphique-struct-title {
            --h1-size: 6rem;

            .triangle-line {
                display: none;
            }

            .dots {
                display: none;
            }

            .title-sub,
            .subtitle1 .title-sub {
                padding-left: 0;
            }
        }

        .identite-graphique-struct p {
            text-align: center;
            max-width: 64rem;
            margin: auto;
        }

        .subtitle2 {
            justify-self: center;
            margin-bottom: 3rem;
        }

        .identite-graphique-struct-pic {
            width: 100%;
            margin: auto;
            margin-top: 3rem;
            margin-bottom: 5rem;
        }
    }

    @media screen and (max-width: 630px) {
        .identite-graphique-struct p {
            text-align: left;
        }

        .identite-graphique-struct-title {
            --h1-size: 4rem;

            .title-row {
                padding: 0;
            }
        }

        .title-sub,
        .subtitle1 .title-sub {
            font-size: 2rem;
        }
    }
.problems {
    h2 {
      margin-left: 12rem;
    }
  }

  .args {
    display: flex;
    flex-flow: column;
    padding: 5rem;
    gap: 3rem;
  }

  .arg {
    max-width: 60%;
    position: relative;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: justify;
  }

  .arg .chevron {
    position: absolute;
  }

  .arg .chevron.bl {
    left: -3rem;
    bottom: -6rem;
  }

  .arg .chevron.tr {
    right: -3rem;
    top: -3rem;
  }

  .arg.neg {
    align-self: flex-start;
    font-weight: 300;
  }

  .arg.pos {
    align-self: flex-end;
    font-weight: 700;
    color: var(--current-text-strong);
  }

  @media screen and (max-width: 960px) {
    .arg {
      max-width: 85%;
    }
  }

  @media screen and (max-width: 630px) {
    .arg {
      text-align: left;
    }
  }

  @media screen and (max-width: 540px) {
    .args {
      padding: 5rem 2rem;
    }

    .arg {
      max-width: 95%;
    }
  }
.block.alt2 {
        --current-background: var(--primary);
        --current-text: var(--alt-text);
        background: linear-gradient(var(--current-background), var(--current-background)) no-repeat 100% 100%;
        background-position: 0 10rem;
    }

    ul.big-li {
        list-style: none;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 4rem;
    }

    .card {
        display: flex;
        flex-flow: column;
        justify-content: flex-start;
        align-items: center;
        flex: 1 0 auto;
        background: #fff;
        border-radius: 3rem;

        padding: 2rem 2rem 4rem;

        font-size: 1.6rem;
        text-align: center;
        color: var(--current-text);
        font-weight: 500;
    }

    .card .card-visual {
        width: 100%;
        /* border: 1px solid grey; */
        margin-bottom: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .card .card-visual img {
        object-fit: contain;
        aspect-ratio: 4/3;
    }

    .card .card-title {
        font-size: 2rem;
        margin: 0.5rem 0;
        text-transform: uppercase;
        color: var(--primary);
        padding: 0;
    }

    .card hr {
        width: 6rem;
        border-width: 2px;
        border-color: var(--secondary);
        border-style: solid;
        margin-block: 0.5rem 2rem;
    }

    .cta {

        font-size: var(--h2-size);
        font-weight: 500;
        max-width: 90%;

        margin: 5rem auto;

        h2 {
            margin-left: 12rem;
        }
    }

    @media screen and (max-width: 1200px) {
        ul.big-li {
            gap: 1rem;
        }
    }


    @media screen and (max-width: 960px) {
        .cta {
            text-align: center;

            h2 {
                margin-left: unset;
            }
        }

        ul.big-li {
            grid-template-columns: 1fr;
            gap: 1rem;
        }
    }

    @media screen and (max-width: 960px) and (min-width: 500px) {

        ul.big-li li.card {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1rem 1fr;
            grid-column-gap: 0;
            grid-row-gap: 0;
            width: 100%;
            padding: 3rem;
        }

        ul.big-li li.card .card-visual {
            grid-area: 1 / 1 / 5 / 1;
            align-self: center;
            justify-self: center;
            margin: 0;
        }

        .big-li li.card:nth-of-type(even) .card-visual {
            grid-area: 1 / 3 / 4 / 4;
        }

        .big-li li.card .card-title,
        .big-li li.card .card-text,
        .big-li li.card hr {
            grid-area: span 1 / span 2;
        }

        .big-li li.card hr {
            margin-inline: auto;
        }
    }
.carousel {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 2rem;
    margin-block: 5rem;
  }

  .carousel > a {
    flex: 1 1 0;
    max-width: 30rem;
    min-width: 0;
    display: block;
  }

  .carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
    border-radius: 2rem;
    transition: transform 0.3s ease-in-out;
    min-width: 0;
  }

  .carousel a:hover img {
    transform: scale(1.05);
  }

  @media screen and (max-width: 960px) {
    .realisations {
      --h1-size: 6rem;
    }

    .carousel {
      flex-direction: column;
      align-items: center;
    }
  }
.footer-struct {
        width: 100%;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "pic title"
            "pic text"
            "pic cta";
        column-gap: 6rem;
        row-gap: 2rem;
        padding-bottom: 10rem;
    }

    .footer-pic {
        grid-area: pic;
    }

    .footer-title {
        grid-area: title;
    }

    .footer-text {
        grid-area: text;
    }

    .footer-cta {
        grid-area: cta;
        text-align: center;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
    }

    .image-container {
        display: block;
        width: 48rem;
        height: 48rem;
        border-radius: 5rem;
        transform: rotate(7deg);
        overflow: hidden;
        position: relative;
    }

    @media screen and (max-width: 1296px) {
        .image-container {
            width: 40rem;
            height: 40rem;
            border-radius: 4rem;
        }
    }


    @media screen and (max-width: 1180px) {
        .image-container {
            width: 36rem;
            height: 36rem;
            border-radius: 3rem;
        }
    }


    @media screen and (max-width: 1130px) {
        .image-container {
            width: 32rem;
            height: 32rem;
        }
    }

    @media screen and (max-width: 960px) {
        .footer-struct {
            grid-template-areas:
                "title"
                "text"
                "pic"
                "cta";
            grid-template-columns: 1fr;
        }

        .footer-text {
            text-align: center;
        }
    }
.block-image {
    position: relative;
  }

  .block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2rem;
  }

  .block-image:before {
    content: "";
    background-color: var(--highlight);
    width: 50%;
    aspect-ratio: 1/1;
    position: absolute;
    bottom: -2rem;
    left: -2rem;
    border-radius: 2rem;
  }

  .block.col2 .block-content {
    align-items: flex-start;
  }
ul.article-list {
        width: 70rem;
        display: flex;
        flex-flow: column;
        justify-content: center;
        margin: 5rem auto;
        gap: 5rem;
    }

    /* Articles list items */
    ul.article-list li {
        position: relative;
        list-style: none;
    }

    ul.article-list li a {
        display: block;
        padding: 1rem;
        text-decoration: none;
    }

    ul.article-list li .article-button {
        position: relative;
        display: grid;
        column-gap: 1rem;
        padding-block: 3rem 0;
        grid-template-areas:
            "title img"
            "tags  img"
            ".     img";
        grid-template-columns: 1fr auto;
        text-align: end;
    }

    ul.article-list li:nth-child(even) .article-button {
        padding-block: 0;
        grid-template-areas:
            "img .    "
            "img title"
            "img tags ";
        grid-template-columns: auto 1fr;
        margin-top: -22rem;
        text-align: start;
    }

    ul.article-list li .article-button .chevron {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        transition: all 0.5s;
    }

    ul.article-list li:nth-child(even) .article-button .chevron {
        top: unset;
        left: unset;
        right: 0;
        bottom: 1rem;
        transform: scaleX(-1);
    }

    ul.article-list li a:before {
        content: '';
        position: absolute;
        width: 100%;
        left: 0;
        height: 16rem;
        background-color: var(--current-highlight);
        border-radius: 2rem;
        transition: opacity 0.4s;
        opacity: 0;
    }

    ul.article-list li a:hover:before {
        opacity: 1;
    }

    ul.article-list li:nth-child(even) a:before {
        bottom: -1rem;
    }

    ul.article-list li a:hover .article-button .chevron {
        transform: scale(2);
        opacity: 0;
    }

    ul.article-list li:nth-child(even) a:hover .article-button .chevron {
        transform: scale(-2, 2);
        opacity: 0;
    }

    .article-button-title {
        grid-area: title;
        font-size: 2.5rem;
        line-height: 3.1rem;
        color: var(--primary);
        font-weight: bold;
        padding-left: 3rem;
    }

    li:nth-child(even) .article-button-title {
        padding-left: 0;
        padding-right: 3rem;
    }

    .article-button-tags {
        grid-area: tags;
        font-size: 1.25rem;
        color: var(--secondary);
        text-transform: uppercase;
    }

    .article-button .article-button-image {
        grid-area: img;
        width: 30rem;
        aspect-ratio: 1/1;
        justify-self: start;
        border-radius: 5rem;
        overflow: hidden;
        z-index: 10;
        transition: transform 0.3s ease-in-out;
    }

    .article-button .article-button-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: scale(1.05);
        transition: transform 0.3s ease-in-out;
        will-change: transform;
    }

    ul.article-list li a:hover .article-button-image {
        transform: scale(1.02);
    }

    ul.article-list li a:hover .article-button-image img {
        transform: scale(1);
    }

    ul.article-list li:nth-child(even) .article-button .article-button-image {
        justify-self: end;
    }

    .article-button:nth-last-child {
        margin-bottom: 0;
    }

    @media screen and (max-width: 960px) {
        ul.article-list {
            width: 100%;
            margin: 0;
        }
    }

    @media screen and (max-width: 768px) {
        ul.article-list {
            gap: 0;
        }

        .article-button .article-button-image {
            width: 30rem;
        }

    }

    @media screen and (max-width: 710px) {
        .article-button .article-button-image {
            width: 25rem;
        }

        .article-button {
            margin-bottom: 5rem;
        }

        li:nth-child(even) .article-button {
            margin-bottom: 0;
        }
    }

    @media screen and (max-width: 660px) {
        .article-button {
            margin-bottom: 10rem;
        }

        li:nth-child(even) .article-button {
            margin-bottom: 0;
        }
    }

    @media screen and (max-width: 560px) {
        .article-button .article-button-image {
            width: 20rem;
        }

        .article-button {
            margin-bottom: 15rem;
        }

        li:nth-child(even) .article-button {
            margin-bottom: 0;
        }
    }
.crypted-email {
    user-select: none;
    display: inline-flex;

    /*759g16ebifa32j47cdh*/
    & span:nth-child(1) {
      order: 8;
    }

    & span:nth-child(2) {
      order: 5;
    }

    & span:nth-child(3) {
      order: 9;
    }

    & span:nth-child(4) {
      order: 15;
    }

    & span:nth-child(5) {
      order: 1;
    }

    & span:nth-child(6) {
      order: 6;
    }

    & span:nth-child(7) {
      order: 13;
    }

    & span:nth-child(8) {
      order: 11;
    }

    & span:nth-child(9) {
      order: 17;
    }

    & span:nth-child(10) {
      order: 14;
    }

    & span:nth-child(11) {
      order: 10;
    }

    & span:nth-child(12) {
      order: 3;
    }

    & span:nth-child(13) {
      order: 2;
    }

    & span:nth-child(14) {
      order: 18;
    }

    & span:nth-child(15) {
      order: 4;
    }

    & span:nth-child(16) {
      order: 7;
    }

    & span:nth-child(17) {
      order: 12;
    }

    & span:nth-child(18) {
      order: 16;
    }
  }

  @media screen and (max-width: 960px) {
    .contact {
      --h1-size: 6rem;
    }
  }
/* ugly nav tracking, add selectors with new sections */
  nav li:first-of-type a,
  body:has(#portfolio:target) nav a[href="/#portfolio"],
  body:has(#portfolio :target) nav a[href="/#portfolio"],
  body:has(#services:target) nav a[href="/#services"],
  body:has(#a_propos:target) nav a[href="/#a_propos"],
  body:has(#contact:target) nav a[href="/#contact"] {
    color: var(--highlight);
  }

  body:has(:target) nav li:first-of-type a {
    color: var(--primary-comp);
  }

  body:has(:target) [data-page=home],
  [data-page] {
    display: none;
  }

  [data-page=home],
  [data-page]:target,
  [data-page]:has(:target),
  body:has(:target) [data-page=home]:has(:target) {
    display: var(--display);
  }
header {
    position: sticky;
    height: var(--header-start-height);
    width: 100%;
    z-index: 100;
    top: calc(var(--header-height-difference) * -1);
    display: flex;
    flex-flow: row no-wrap;
    align-items: center;
    background: var(--primary);
    z-index: 100;
  }

  header nav {
    position: sticky;
    height: var(--header-shrink-height);
    top: 0;
    width: 100%;
    padding: 0 1rem;
    display: flex;
    align-items: center;

    /* -webkit-backdrop-filter: blur(10px); */
    /* backdrop-filter: blur(10px); */

    color: var(--primary-text);
  }

  header nav ul {
    display: flex;
    justify-self: center;
    margin: auto;
    list-style: none;
  }

  header nav ul li {
    margin: 0 2em;

    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.4rem;

    user-select: none;
  }

  header nav a {
    text-decoration: none;
    white-space: nowrap;

    color: var(--primary-text);
  }

  header nav .logo img {
    height: 3rem;
    margin-block: 1rem;
  }

  #menuToggle {
    display: none;
    /* You can also use relative/absolute here if you want to stay on the top */
    position: absolute;
    top: 1.5rem;
    right: 2rem;

    z-index: 1;

    -webkit-user-select: none;
    user-select: none;
  }

  #menuToggle a {
    text-decoration: none;
    color: #232323;

    transition: color 0.3s ease;
  }

  #menuToggle a:hover {
    color: tomato;
  }


  #menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;

    cursor: pointer;

    opacity: 0;
    /* hide this */
    z-index: 2;
    /* and place it over the hamburger */

    -webkit-touch-callout: none;
  }


  #menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;

    background: var(--primary-text);
    border-radius: 3px;

    z-index: 1;

    transform-origin: 4px 0px;

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
      background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
      opacity 0.55s ease;
  }

  #menuToggle span {
    transform-origin: 0% 50%;
  }

  #menuToggle input:checked~span {
    opacity: 1;
    transform: rotate(45deg) translate(-1px, -4px);
  }

  #menuToggle input:checked~span:nth-of-type(2) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }

  #menuToggle input:checked~span:nth-of-type(3) {
    transform: rotate(-45deg) translate(0, 2px);
  }

  /*
 * And let's slide it in from the left
 */
  #menuToggle input:checked~ul {
    transform: none;
  }

  @media screen and (max-width: 768px) {
    header {
      height: auto;
    }

    header nav {
      transition: height 0.3s ease;
    }

    header nav .logo {
      align-self: flex-start;
    }

    header nav ul {
      margin-top: 3rem;
      margin-bottom: 2rem;
      flex-direction: column;
      transition: opacity 0.3s ease;
      opacity: 0;
    }

    header nav ul li {
      height: 5rem;
      font-size: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #menuToggle {
      display: block;
    }

    header:has(input:checked) {
      position: fixed;
    }

    header nav:has(input:checked) {
      height: 27rem;
    }

    header nav:has(input:checked) ul {
      opacity: 1;
    }
  }