/* ==========================================================================
   Fondations
   ========================================================================== */

/* ---------- Polices ---------- */

@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: url("../fonts/oswald-wght-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Bebas Neue";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/bebas-neue-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto Condensed";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/roboto-condensed-wght-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto Condensed";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/roboto-condensed-wght-italic.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-500-normal.woff2") format("woff2");
}

/* ---------- Variables ---------- */

:root {
    --font-title: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
    --font-body: "Roboto Condensed", "Arial Narrow", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --title-weight: 400;
    --title-tracking: .02em;

    --vert: #2A3328;
    --vert-profond: #283325;
    --creme: #F0EFE6;
    --cyan: #46BDE1;
    --jaune: #E9C535;
    --white: #FFFFFF;

    --ground: var(--vert-profond);
    --surface: color-mix(in srgb, var(--vert-profond), var(--creme) 6%);
    --surface-2: color-mix(in srgb, var(--vert-profond), var(--creme) 10%);
    --line-surface: color-mix(in srgb, var(--vert-profond), var(--creme) 16%);
    --ink: var(--creme);
    --ink-inactive: rgba(240, 238, 230, .6);
    --ink-2: #C4C6BC;
    --ink-3: #ADAFA5;
    --line: rgba(240, 238, 230, .2);
    --line-soft: rgba(240, 238, 230, .1);
    --dist: var(--cyan);
    --dist-soft: rgba(70, 189, 225, .13);
    --fisc: var(--jaune);
    --fisc-soft: rgba(233, 197, 53, .13);
    --dist-line: var(--cyan);
    --fisc-line: var(--jaune);
    --stamp: #F2937F;
    --stamp-soft: rgba(242, 147, 127, .14);
    --btn-bg: var(--white);
    --btn-ink: var(--vert-profond);

    --radius: 10px;
    --btn-radius: 999px;

    --container: 2560px;
    --gutter: 7rem;
    --section-space: clamp(5.6rem, 2.8rem + 3.6vw, 12rem);
    --gap: clamp(1.6rem, .8rem + 1vw, 3.2rem);

    --fs-3xs: 1.15rem;
    --fs-2xs: 1.25rem;
    --fs-xs: 1.35rem;
    --fs-sm: 1.45rem;
    --fs-md: 1.55rem;
    --fs-base: 1.65rem;
    --fs-lg: 1.75rem;
    --fs-xl: 1.85rem;
    --fs-h3: 2.4rem;
    --fs-h2: clamp(3.1rem, 2.3vw, 4.5rem);
    --fs-h1: clamp(4rem, 2.5rem + 1.7vw, 6.7rem);

    --titre-depart: .4;

    color-scheme: dark;
}

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

* {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

[id] {
    scroll-margin-top: 11rem;
}

.section[id] {
    scroll-margin-top: var(--header-h, 8rem);
}

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: rgba(70, 189, 225, .35);
}

img {
    max-width: 100%;
    height: auto;
}

:focus-visible {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- Typographie ---------- */

h1 {
    font-family: var(--font-title);
    font-weight: var(--title-weight);
    font-size: var(--fs-h1);
    text-transform: uppercase;
    line-height: 1.2;
    letter-spacing: var(--title-tracking);
    margin: 0;
    text-wrap: balance;
    max-width: 38ch;
}

h2 {
    position: relative;
    font-family: var(--font-title);
    font-weight: var(--title-weight);
    font-size: var(--fs-h2);
    text-transform: uppercase;
    line-height: 1.1;
    letter-spacing: var(--title-tracking);
    margin: 0 0 1rem;
    text-wrap: balance;
}

.entry h2::before,
.contact-bloc h2::before,
.section h2::before {
	content: "";
	position: absolute;
	bottom: 50%;
	left: calc(-1 * var(--gutter));
	width: calc(var(--gutter) - 2rem);
	height: 1px;
	background: var(--line-soft);
}

h3 {
	font-size: var(--fs-lg);
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 .8rem;
	letter-spacing: -.01rem;
	text-transform: uppercase;
}

h4,
.label {
    font-size: var(--fs-2xs);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 1rem;
}

p {
    margin: 0 0 1.4rem;
    max-width: 100ch;
}

a {
    color: var(--ink);
    text-decoration: none;
    transition: color .3s ease;
}

a:hover {
    color: var(--jaune);
}

.section-content a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    text-decoration-color: var(--cyan);
}

.section-content a:hover {
    color: var(--cyan);
}

.section-content :is(a.btn, a.card-target) {
    text-decoration: none;
}

.section-content a.btn {
	color: var(--vert-profond);
	text-decoration: none;
	background-color: var(--ink);
}

.section-content a.btn:hover {
	color: var(--ink);
	background-color: transparent;
}

.section-content .card:hover a.card-target,
.section-content .card:hover .card-cta {
    color: var(--jaune);
}

/* ---------- Accessibilité ---------- */

.skip-link {
    position: absolute;
    top: -10rem;
    left: 1.6rem;
    z-index: 100;
    padding: 1rem 1.6rem;
    background: var(--creme);
    color: var(--vert);
    font-size: var(--fs-md);
    font-weight: 600;
}

.skip-link:focus {
    top: 1.6rem;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Animations au défilement ---------- */

@media (prefers-reduced-motion: no-preference) {
    .js :is(h1, h2):not(.label):not(.screen-reader-text):not(.is-split) {
        opacity: var(--titre-depart);
    }

    .is-split .l {
        opacity: var(--titre-depart);
        transition: opacity .07s ease-out;
        transition-delay: var(--d, 0ms);
    }

    .is-split.is-visible .l {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .js [data-apparition]:not(.is-visible) {
        opacity: 0;
    }

    .js [data-apparition].is-visible {
        animation: ngt-apparition .7s cubic-bezier(.2, .7, .2, 1) var(--delai, 0ms) both;
    }
}

@keyframes ngt-apparition {
    from {
        opacity: 0;
        transform: translateY(2.4rem);
    }
}

@media print {
    .js [data-apparition] {
        opacity: 1 !important;
        animation: none !important;
    }
}

/* ==========================================================================
   Structure
   ========================================================================== */

/* ---------- Mise en page ---------- */

.shell {
    padding: 0 var(--gutter);
}

.site-main {
    border-left: 1px solid var(--line-soft);
    border-right: 1px solid var(--line-soft);
    width: 94%;
    max-width: var(--container);
    margin: 0 auto;
}

.section {
    display: grid;
    grid-template-columns: clamp(20rem, 13vw, 28rem) minmax(0, 1fr);
    gap: clamp(3.6rem, 2.34375vw, 6rem);
    padding: var(--section-space) var(--gutter);
    border-bottom: 1px solid var(--line-soft);
}

.section:last-child {
    border-bottom: 0;
}

.section-intro h2 {
    position: sticky;
    top: 12rem;
}

.grid {
    display: grid;
    gap: var(--gap);
}

.g2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------- En-tête du site ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line-soft);
}

.header-wrapper {
    --header-pad-y: 1.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 94%;
    max-width: var(--container);
    margin: 0 auto;
    border-left: 1px solid var(--line-soft);
    border-right: 1px solid var(--line-soft);
    padding-top: var(--header-pad-y);
    padding-bottom: var(--header-pad-y);
}

.admin-bar .site-header {
    top: 32px;
}

.brand {
    --logo-h: 4rem;
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 2.8rem;
    margin-block: calc(-1 * var(--header-pad-y));
    padding-block: var(--header-pad-y);
    padding-inline: var(--gutter);
    color: var(--ink);
    text-decoration: none;
}

.brand::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: var(--line-soft);
}

.brand:focus-visible,
.mainnav a:focus-visible {
    outline-offset: -2px;
}

.brand-logo {
    display: block;
    flex: none;
    width: auto;
    height: var(--logo-h);
    color: var(--creme);
}

/* ---------- Logo animé ---------- */

.brand-logo .logo-neg,
.brand-logo .logo-tia {
    transition: opacity .3s ease .55s, transform .35s ease .5s;
}

.brand-logo .logo-dist,
.brand-logo .logo-fisc,
.brand-logo .logo-o,
.brand .brand-base {
    transition: transform .5s cubic-bezier(.65, 0, .35, 1) .1s;
}

.brand-logo .logo-o-haut,
.brand-logo .logo-o-bas {
    transition: transform .2s ease;
}

@media (prefers-reduced-motion: no-preference) {
    .site-header.is-compact:not(:hover) .logo-neg,
    .site-header.is-compact:not(:hover) .logo-tia {
        opacity: 0;
        transition: opacity .25s ease, transform .45s ease;
    }

    .site-header.is-compact:not(:hover) .logo-neg {
        transform: translateX(4px);
    }

    .site-header.is-compact:not(:hover) .logo-tia {
        transform: translateX(-4px);
    }

    .site-header.is-compact:not(:hover) .logo-dist,
    .site-header.is-compact:not(:hover) .logo-fisc,
    .site-header.is-compact:not(:hover) .logo-o,
    .site-header.is-compact:not(:hover) .brand-base {
        transition: transform .6s cubic-bezier(.65, 0, .35, 1) .05s;
    }

    .site-header.is-compact:not(:hover) .logo-dist {
        transform: translateX(var(--logo-dist-x));
    }

    .site-header.is-compact:not(:hover) .logo-o {
        transform: translateX(var(--logo-o-x));
    }

    .site-header.is-compact:not(:hover) .logo-fisc {
        transform: translateX(var(--logo-fisc-x));
    }

    .site-header.is-compact:not(:hover) .brand-base {
        transform: translateX(calc(-1 * var(--logo-reduction) * var(--logo-h)));
    }

    .site-header.is-compact:not(:hover) .logo-o-haut,
    .site-header.is-compact:not(:hover) .logo-o-bas {
        transition: transform .35s cubic-bezier(.34, 1.56, .64, 1) .45s;
    }

    .site-header.is-compact:not(:hover) .logo-o-haut {
        transform: translateY(var(--logo-o-y));
    }

    .site-header.is-compact:not(:hover) .logo-o-bas {
        transform: translateY(calc(-1 * var(--logo-o-y)));
    }
}

.brand-base {
	line-height: 1.5;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-2);
	max-width: 30ch;
	font-size: var(--fs-3xs);
	font-weight: 500;
}

/* ---------- Menu ---------- */

.menu-toggle {
	display: none;
	align-items: center;
	gap: .8rem;
	font: inherit;
	font-size: var(--fs-3xs);
	font-weight: 600;
	color: var(--ink);
	background: none;
	border: none;
	border-radius: var(--radius);
	padding: 0;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: .1rem;
}

.menu-toggle-label {
	position: relative;
	top: .5px;
}

.menu-toggle-icon {
    position: relative;
    width: 1.6rem;
    height: 1.2rem;
}

.menu-toggle-icon::before,
.menu-toggle-icon::after {
    content: "";
    position: absolute;
    height: 2px;
    width: 1.2rem;
    transition: transform .2s ease;
}

.menu-toggle-icon::before {
    top: 2px;
    left: 0;
    background: var(--cyan);
}

.menu-toggle-icon::after {
    bottom: 2px;
    right: 0;
    background: var(--jaune);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon::before {
    transform: translate(2px, 3px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon::after {
    transform: translate(-2px, -3px) rotate(-45deg);
}

.mainnav {
	align-self: stretch;
	margin-block: calc(-1 * var(--header-pad-y));
	padding-inline: var(--gutter);
	border-left: 1px solid var(--line-soft);
}

.mainnav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mainnav a {
	--nav-pad-y: .8rem;
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	font-size: var(--fs-base);
	color: var(--ink-inactive);
	text-decoration: none;
	padding: calc(var(--nav-pad-y) + var(--header-pad-y)) 1.3rem;
	text-transform: uppercase;
	font-family: var(--font-title);
    letter-spacing: 0.05rem;
}

@media (hover: hover) and (pointer: fine) {
    .mainnav a:hover {
        color: var(--ink);
    }
}

.mainnav a[aria-current] {
    color: var(--ink);
    font-weight: 500;
}

.mainnav a::after {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(50% + .5lh);
	bottom: 0;
	width: 1px;
	background: var(--line-soft);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform .7s cubic-bezier(.2, .7, .2, 1);
	pointer-events: none;
}

.mainnav a[aria-current]::after,
.mainnav a:focus-visible::after {
	transform: scaleY(1);
}

.mainnav a::before {
	content: "";
	position: absolute;
	top: calc(50% - 2.5px);
	left: .3rem;
	right: .3rem;
	height: 3px;
	background: linear-gradient(var(--cyan), var(--cyan)) left top / 3px 100% no-repeat, linear-gradient(var(--jaune), var(--jaune)) right top / 3px 100% no-repeat;
	opacity: 0;
	transition: opacity .15s ease;
	pointer-events: none;
}

.mainnav a[aria-current]::before,
.mainnav a:focus-visible::before {
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
    .mainnav a:hover::before {
        opacity: 1;
        animation: ngt-regards .9s ease-in-out;
    }

    .mainnav a:hover::after {
        transform: scaleY(1);
    }
}

@keyframes ngt-regards {
    0%,
    100% {
        transform: translateY(0);
    }
    14% {
        transform: translateY(-.4rem);
    }
    30% {
        transform: translateY(.4rem);
    }
    46% {
        transform: translateY(-.25rem);
    }
    62% {
        transform: translateY(.25rem);
    }
    78% {
        transform: translateY(-.1rem);
    }
    90% {
        transform: translateY(.1rem);
    }
}

/* ---------- Menu plein écran ---------- */

.menu-plein {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 39;
    visibility: hidden;
}

.menu-open .menu-plein,
.menu-fermeture .menu-plein {
    visibility: visible;
}

.menu-open,
.menu-fermeture {
    overflow: hidden;
}

.menu-plein-volet {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 51%;
    background: color-mix(in srgb, var(--ground), #000000 22%);
}

.menu-plein-volet--gauche {
    left: 0;
}

.menu-plein-volet--droite {
    right: 0;
}

.menu-plein-regard {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.menu-plein-regard::before,
.menu-plein-regard::after {
    content: "";
    position: absolute;
    width: 3px;
    background: var(--regard);
}

.menu-plein-regard::before {
    top: var(--header-bas, 0px);
    bottom: 0;
}

.menu-plein-regard::after {
    top: calc(50% + var(--header-bas, 0px) / 2 - 1.5px);
    height: 3px;
}

.menu-plein-regard--dist {
    --regard: var(--cyan);
}

.menu-plein-regard--dist::before {
    left: calc(3% - 1px);
}

.menu-plein-regard--dist::after {
    left: calc(3% + 2px);
}

.menu-plein-regard--fisc {
    --regard: var(--jaune);
}

.menu-plein-regard--fisc::before {
    right: calc(3% - 1px);
}

.menu-plein-regard--fisc::after {
    right: calc(3% + 2px);
}

.menu-plein-dossier {
    position: absolute;
    top: calc(50% + var(--header-bas, 0px) / 2 - 1.5px);
    left: calc(50% - 1.5px);
    width: 3px;
    height: 3px;
    background: var(--ink);
    opacity: 0;
}

.menu-plein-defile {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "nav"
        "annexes"
        "pied";
    column-gap: 5.6rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(var(--header-bas, 8rem) + clamp(2.4rem, 5vh, 6.4rem)) calc(3% + var(--gutter)) max(2.4rem, env(safe-area-inset-bottom));
}

.menu-plein-nav {
    --menu-ecart: 2.4rem;
    grid-area: nav;
    container-type: inline-size;
}

.menu-plein-rubriques {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-plein-rubriques li {
    position: relative;
}

.menu-plein-rubriques li::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--line-soft);
    transform-origin: left;
}

.menu-plein-rubriques a {
    display: flex;
    align-items: baseline;
    gap: var(--menu-ecart);
    padding-block: 1.6rem 1.2rem;
    color: var(--ink);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.menu-plein-num {
    flex: none;
    width: 2.4rem;
    font-size: var(--fs-2xs);
    font-weight: 500;
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
}

.menu-plein-titre {
    display: block;
    overflow: hidden;
    margin-block: -.2em -.1em;
    padding-block: .2em .1em;
    font-family: var(--font-title);
    font-size: 4rem;
    font-weight: var(--title-weight);
    line-height: 1;
    letter-spacing: var(--title-tracking);
    text-transform: uppercase;
    transition: color .2s ease;
}

.menu-plein-titre > span {
    display: inline-block;
    position: relative;
}

.menu-plein-rubriques a[aria-current] .menu-plein-num {
    color: var(--dist);
}

.menu-plein-rubriques a[aria-current] .menu-plein-titre > span {
    padding-right: 1.6rem;
}

.menu-plein-rubriques a[aria-current] .menu-plein-titre > span::after {
    content: "";
    position: absolute;
    right: 0;
    top: calc(50% - .35rem);
    width: .7rem;
    height: .7rem;
    background: var(--fisc);
}

.menu-plein-annexes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 3.2rem;
    padding-top: 4rem;
}

.menu-plein-label {
    margin: 0 0 1.4rem;
    font-size: var(--fs-3xs);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .2rem;
    text-transform: uppercase;
    color: var(--ink-3);
}

.menu-plein-bloc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-plein-bloc li + li {
    margin-top: 1rem;
}

.menu-plein-bloc a {
    color: var(--ink-2);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s ease;
}

.menu-plein-bloc li a {
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
    line-height: 1.35;
}

.menu-plein-bloc a[aria-current] {
    color: var(--ink);
}

.menu-plein-puce {
    flex: none;
    width: .7rem;
    height: .7rem;
    transform: translateY(-.1em);
}

.menu-plein-puce--dist {
    background: var(--dist);
}

.menu-plein-puce--fiscal {
    background: var(--fisc);
}

.menu-plein-associes {
    display: grid;
    gap: .6rem;
}

.menu-plein-associes-titre {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: .4rem;
    font-family: var(--font-title);
    font-size: var(--fs-h3);
    font-weight: var(--title-weight);
    line-height: 1;
    letter-spacing: var(--title-tracking);
    text-transform: uppercase;
    color: var(--ink);
}

.menu-plein-associes-titre svg {
    flex: none;
    width: 2.2rem;
    height: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    stroke-miterlimit: 10;
}

.menu-plein-associe {
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
    font-size: var(--fs-sm);
}

.menu-plein-pied {
    grid-area: pied;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.2rem 3.2rem;
    margin-top: 4.8rem;
    padding-top: 2.4rem;
    border-top: 1px solid var(--line-soft);
    font-size: var(--fs-xs);
    color: var(--ink-inactive);
}

.menu-plein-pied p {
    margin: 0;
}

.menu-plein-pied a {
    color: var(--ink-2);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s ease;
}

.menu-plein-signature {
    grid-area: 1 / 1;
    font-size: var(--fs-3xs);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-2);
    max-width: 40ch;
}

.menu-plein-linkedin {
    grid-area: 1 / 2;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    justify-self: end;
}

.menu-plein-linkedin svg {
    display: block;
    width: 2rem;
    height: 2rem;
}

.menu-plein-legal {
    grid-area: 2 / 1;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 2.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-plein-copyright {
    grid-area: 2 / 2;
    justify-self: end;
    font-size: var(--fs-2xs);
}

.menu-plein-rubriques a:active,
.menu-plein-bloc a:active,
.menu-plein-pied a[href]:active {
    color: var(--fisc);
}

@media (hover: hover) and (pointer: fine) {
    .menu-plein-rubriques a:hover,
    .menu-plein-bloc a:hover,
    .menu-plein-pied a[href]:hover {
        color: var(--fisc);
    }
}

.menu-open .menu-plein-volet--gauche {
    animation: ngt-volet-gauche .55s cubic-bezier(.77, 0, .18, 1) both;
}

.menu-open .menu-plein-volet--droite {
    animation: ngt-volet-droite .55s cubic-bezier(.77, 0, .18, 1) both;
}

.menu-open .menu-plein-regard--dist {
    animation: ngt-regard-dist 1.1s both;
}

.menu-open .menu-plein-regard--fisc {
    animation: ngt-regard-fisc 1.1s both;
}

.menu-open .menu-plein-dossier {
    animation: ngt-dossier 1.2s both;
}

.menu-open .menu-plein-rubriques li::after {
    animation: ngt-menu-trait .9s cubic-bezier(.2, .8, .2, 1) calc(.58s + var(--i) * 70ms) both;
}

.menu-open .menu-plein-titre > span {
    animation: ngt-menu-monte .8s cubic-bezier(.2, .8, .2, 1) calc(.62s + var(--i) * 70ms) both;
}

.menu-open .menu-plein-num {
    animation: ngt-menu-fondu .5s ease calc(.75s + var(--i) * 70ms) both;
}

.menu-open .menu-plein-annexes {
    animation: ngt-menu-apparait .7s cubic-bezier(.2, .8, .2, 1) 1s both;
}

.menu-open .menu-plein-pied {
    animation: ngt-menu-apparait .7s cubic-bezier(.2, .8, .2, 1) 1.12s both;
}

.menu-fermeture .menu-plein-defile {
    pointer-events: none;
    animation: ngt-menu-efface .2s ease both;
}

.menu-fermeture .menu-plein-volet--gauche {
    animation: ngt-volet-gauche-sortie .45s cubic-bezier(.77, 0, .18, 1) .25s both;
}

.menu-fermeture .menu-plein-volet--droite {
    animation: ngt-volet-droite-sortie .45s cubic-bezier(.77, 0, .18, 1) .25s both;
}

.menu-fermeture .menu-plein-regard--dist {
    animation: ngt-regard-dist-sortie .7s both;
}

.menu-fermeture .menu-plein-regard--fisc {
    animation: ngt-regard-fisc-sortie .7s both;
}

@keyframes ngt-volet-gauche {
    from {
        transform: translateX(-100%);
    }
}

@keyframes ngt-volet-droite {
    from {
        transform: translateX(100%);
    }
}

@keyframes ngt-volet-gauche-sortie {
    to {
        transform: translateX(-100%);
    }
}

@keyframes ngt-volet-droite-sortie {
    to {
        transform: translateX(100%);
    }
}

@keyframes ngt-regard-dist {
    0% {
        transform: translateX(calc(-3% - 5px));
        animation-timing-function: cubic-bezier(.77, 0, .18, 1);
    }
    50%,
    60% {
        transform: translateX(calc(47% - 5px));
        animation-timing-function: cubic-bezier(.2, .8, .2, 1);
    }
    100% {
        transform: none;
    }
}

@keyframes ngt-regard-fisc {
    0% {
        transform: translateX(calc(3% + 5px));
        animation-timing-function: cubic-bezier(.77, 0, .18, 1);
    }
    50%,
    60% {
        transform: translateX(calc(-47% + 5px));
        animation-timing-function: cubic-bezier(.2, .8, .2, 1);
    }
    100% {
        transform: none;
    }
}

@keyframes ngt-regard-dist-sortie {
    0% {
        transform: none;
        animation-timing-function: cubic-bezier(.6, 0, .4, 1);
    }
    36% {
        transform: translateX(calc(47% - 5px));
        animation-timing-function: cubic-bezier(.77, 0, .18, 1);
    }
    100% {
        transform: translateX(calc(-3% - 5px));
    }
}

@keyframes ngt-regard-fisc-sortie {
    0% {
        transform: none;
        animation-timing-function: cubic-bezier(.6, 0, .4, 1);
    }
    36% {
        transform: translateX(calc(-47% + 5px));
        animation-timing-function: cubic-bezier(.77, 0, .18, 1);
    }
    100% {
        transform: translateX(calc(3% + 5px));
    }
}

@keyframes ngt-dossier {
    0%,
    45% {
        opacity: 0;
        transform: scale(0);
    }
    55% {
        opacity: 1;
        transform: scale(2.6);
    }
    70% {
        opacity: 1;
        transform: scale(1.8);
    }
    100% {
        opacity: 0;
        transform: scale(1.8);
    }
}

@keyframes ngt-menu-trait {
    from {
        transform: scaleX(0);
    }
}

@keyframes ngt-menu-monte {
    from {
        transform: translateY(120%);
    }
}

@keyframes ngt-menu-fondu {
    from {
        opacity: 0;
    }
}

@keyframes ngt-menu-apparait {
    from {
        opacity: 0;
        transform: translateY(1.6rem);
    }
}

@keyframes ngt-menu-efface {
    to {
        opacity: 0;
    }
}

/* ---------- En-tête de page ---------- */

.pagehead {
    padding: clamp(5.6rem, 2rem + 7vw, 16rem) 0;
    border-bottom: 1px solid var(--line-soft);
}

.pagehead .shell {
    position: relative;
}

.pagehead--decor {
    position: relative;
}

.pagehead--decor .shell {
    z-index: 1;
}

.pagehead-points {
    --reseau-couleur: var(--ink);
    --reseau-survol: var(--jaune);
    position: absolute;
    top: 5rem;
    right: var(--gutter);
    bottom: 5rem;
    width: min(32%, 80rem);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 30%);
    mask-image: linear-gradient(to right, transparent, #000 30%);
}

.pagehead-points canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.eyebrow {
	font-size: var(--fs-2xs);
	letter-spacing: .15rem;
	text-transform: uppercase;
	color: var(--fisc);
	margin: 0 0 2rem;
	font-weight: 500;
}

.eyebrow.dist {
    color: var(--dist);
}

.lede {
	font-size: var(--fs-lg);
	line-height: 1.5;
	max-width: 70ch;
	margin: 2.8rem 0 0;
}

.pagehead-meta {
	font-size: var(--fs-xs);
	letter-spacing: .06rem;
	color: var(--ink-3);
	margin: 2.4rem 0 0;
}

.btnrow {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-top: 3.6rem;
}

/* ---------- Page en deux colonnes ---------- */

.actus {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.actus-tete {
    position: sticky;
    top: min(var(--header-h, 8rem), calc(100vh - var(--tete-h, 0px)));
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-h, 8rem));
    padding: var(--section-space) var(--gutter) clamp(3.2rem, 1.6rem + 2vw, 6.4rem);
}

.actus-tete .lede {
    font-size: var(--fs-lg);
}

.actus-anim {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 18rem;
	max-height: 28rem;
	margin-top: 8rem;
}

.actus-anim-scene {
    --anim-trait: var(--ink);
    --anim-fisc: var(--fisc);
    --anim-dist: var(--dist);
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.actus-anim-scene canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.actus-anim-legende {
	display: flex;
	gap: 1.2rem;
	min-height: 1lh;
	margin: 1.6rem 0 0;
	font-size: var(--fs-2xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.actus-anim-legende .num {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    color: var(--fisc);
}

.actus-anim-legende .num::before {
    content: "";
    width: .6rem;
    height: .6rem;
    background: var(--fisc-line);
}

.actus-anim-legende.dist .num {
    color: var(--dist);
}

.actus-anim-legende.dist .num::before {
    background: var(--dist-line);
}

@media (prefers-reduced-motion: no-preference) {
    .actus-anim-legende.is-new {
        animation: ngt-legende .6s ease both;
    }
}

@keyframes ngt-legende {
    from {
        opacity: 0;
    }
}

.actus-anim-sources {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 0;
    pointer-events: none;
}

.actus-anim-sources svg {
    width: 160px;
    height: 100px;
}

.actus-corps {
	min-width: 0;
	min-height: calc(100vh - var(--header-h, 8rem));
	border-left: 1px solid var(--line-soft);
}

.blog .actus .actus-corps,
.single .actus .actus-corps {
    padding: var(--section-space) var(--gutter);
}

/* ---------- Pied de page ---------- */

.site-footer {
	border-top: 1px solid var(--line-soft);
	font-size: var(--fs-md);
	color: var(--ink-inactive);
}

.footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3.6rem;
    border-right: 1px solid var(--line-soft);
    border-left: 1px solid var(--line-soft);
    padding: clamp(4.8rem, 2.4rem + 3vw, 9.6rem) var(--gutter);
    width: 94%;
    max-width: var(--container);
    margin: 0 auto;
}

.footer-label {
	font-size: var(--fs-xl);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .2rem;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 1rem;
}

.footer-logo-lien {
    display: block;
    width: fit-content;
}

.footer-logo {
    display: block;
    width: auto;
    height: 4rem;
    margin-bottom: 1.4rem;
}

.footer-about p {
    max-width: 30ch;
    margin-bottom: 0;
}

.footer-linkedin {
	margin-top: 2.4rem;
	display: inline-flex;
	gap: 1rem;
	align-items: center;
}

.footer-linkedin svg {
    display: block;
    width: 2.4rem;
    height: 2.4rem;
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer li {
    margin-bottom: .7rem;
}

.site-footer li:last-child {
    margin-bottom: 0;
}

.site-footer a {
    color: var(--ink-2);
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .site-footer a:hover {
        color: var(--jaune);
        text-decoration: none;
    }
}

.legal-line-wrapper {
	border-top: 1px solid var(--line-soft);
	max-width: var(--container);
}

.legal-line {
	max-width: var(--container);
	margin: 0 auto;
	padding-block: 3rem;
	font-size: var(--fs-2xs);
	letter-spacing: .03rem;
	text-align: center;
	border-right: 1px solid var(--line-soft);
	border-left: 1px solid var(--line-soft);
	width: 94%;
}

/* ==========================================================================
   Composants
   ========================================================================== */

/* ---------- Boutons ---------- */

.btn {
    display: inline-block;
    font: inherit;
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .01em;
    color: var(--btn-ink);
    background: var(--btn-bg);
    border: 1px solid var(--btn-bg);
    border-radius: var(--btn-radius);
    padding: 1.2rem 2.6rem;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .btn:hover {
        background: transparent;
        color: var(--ink);
    }
}

.btn.ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
}

@media (hover: hover) and (pointer: fine) {
    .btn.ghost:hover {
        border-color: var(--ink);
    }
}

.btn:disabled {
    opacity: .6;
    cursor: wait;
}

.btn-fleche {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
}

.btn-fleche svg {
	flex: none;
	width: 2.4rem;
	height: auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.2;
	stroke-miterlimit: 10;
	transition: transform .2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .btn-fleche:hover svg {
        transform: translateX(.4rem);
    }
}

.btn-picto {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.btn-picto svg {
    flex: none;
    width: 1.8rem;
    height: 1.8rem;
}

/* ---------- Cartes ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--line-surface);
    border-radius: var(--radius);
    padding: clamp(2.2rem, 1.4rem + 1vw, 3.6rem);
    transition: background-color .15s ease, border-color .15s ease;
}

.card p {
    font-size: var(--fs-md);
    color: var(--ink-2);
    margin-bottom: 0;
}

.card p + p {
    margin-top: 1rem;
}

.card .label {
    font-size: var(--fs-3xs);
    color: var(--ink-3);
}

.card-num {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fisc);
    margin-bottom: 1.2rem;
}

.card.dist .card-num {
    color: var(--dist);
}

.card-link {
    position: relative;
}

.card-target {
    color: inherit;
    text-decoration: none;
}

.card-target::after {
    content: "";
    position: absolute;
    inset: 0;
}

.card-target:focus-visible {
    outline: none;
}

.card-link:focus-within {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .card-link:hover {
        background: var(--surface-2);
        border-color: var(--line);
    }
}

.card-alt {
    background: transparent;
    border: 1px dashed var(--line);
}

.card-cta {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2.4rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--ink);
    transition: color .15s ease;
}

.card-cta svg {
    flex: none;
    width: 2.2rem;
    height: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    stroke-miterlimit: 10;
    transition: transform .2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .card-link:hover .card-cta {
        color: var(--dist);
    }

    .card-link:hover .card-cta svg {
        transform: translateX(.4rem);
    }
}

.card .card-date {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: .04em;
    color: var(--ink-3);
    margin-top: 1.6rem;
}

.card-picto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.6rem;
    height: 5.6rem;
    margin-bottom: 2.4rem;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink);
    transition: border-color .2s ease, color .2s ease;
}

.card-picto svg {
    width: 2.6rem;
    height: 2.6rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (hover: hover) and (pointer: fine) {
    .card:hover .card-picto {
        border-color: var(--fisc-line);
        color: var(--fisc);
    }
}

/* ---------- Étiquettes ---------- */

.tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-3xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .3rem .8rem;
    border-radius: var(--radius);
    background: var(--fisc-soft);
    color: var(--fisc);
}

.tag.dist {
    background: var(--dist-soft);
    color: var(--dist);
}

/* ---------- Listes ---------- */

ul.marks {
    list-style: none;
    padding: 0;
    margin: 0 0 1.4rem;
    max-width: 68ch;
}

ul.marks li {
    position: relative;
    padding-left: 2.2rem;
    margin-bottom: 1.1rem;
    font-size: var(--fs-base);
}

ul.marks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: .6rem;
    height: .6rem;
    background: var(--ink);
}

/* ---------- Questions ---------- */

.qbox {
	margin: 6rem 0 3.4rem;
	padding: 2px 0 2px 2rem;
	border-left: 3px solid var(--fisc-line);
}

.section.faq .qbox:first-child {
    margin-top: 0;
}

.qbox p {
    font-size: var(--fs-md);
    color: var(--ink-2);
    margin-bottom: 0;
}

.qbox .q {
    font-family: var(--font-title);
    font-size: 2.6rem;
    font-weight: var(--title-weight);
    line-height: 1.25;
    letter-spacing: .005em;
    color: var(--ink);
    margin: 0 0 .8rem;
}

/* ---------- Étapes ---------- */

.steps {
    list-style: none;
    padding: 0;
    margin: 0;
}

.steps li {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: 2rem;
    padding: 2.4rem 0;
    border-top: 1px solid var(--line-soft);
}

.steps li:last-child {
    border-bottom: 1px solid var(--line-soft);
}

.steps .n {
    font-family: var(--font-title);
    font-size: 2.9rem;
    font-weight: var(--title-weight);
    line-height: 1;
    color: var(--fisc);
    padding-top: .2rem;
}

.steps p {
    font-size: var(--fs-md);
    color: var(--ink-2);
    margin-bottom: 0;
}

/* ---------- Blocs ---------- */

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--surface);
    border: 1px solid var(--line-surface);
    border-radius: var(--radius);
}

.split > div {
    padding: clamp(2.4rem, 1.6rem + 1vw, 4rem);
}

.split > div + div {
    border-left: 1px solid var(--line-soft);
}

/* ---------- Tableaux ---------- */

.tablewrap {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--line-surface);
    border-radius: var(--radius);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-md);
}

th,
td {
    text-align: left;
    vertical-align: top;
    padding: 1.4rem 1.8rem;
    border-bottom: 1px solid var(--line-soft);
}

th {
	font-size: var(--fs-3xs);
	font-weight: 500;
	letter-spacing: .15rem;
	text-transform: uppercase;
	color: var(--ink-3);
	background: var(--surface-2);
}

td {
    color: var(--ink-2);
}

tr:last-child td {
    border-bottom: 0;
}

td strong {
    color: var(--ink);
    font-weight: 600;
}

/* ---------- Formulaire ---------- */

.contact-form {
    --coin: 8px;
    --coin-ecart: 8px;
    border: 1px solid var(--line);
    border-radius: 0;
    padding: clamp(2.4rem, 1.2rem + 2vw, 4.8rem);
    background:
        linear-gradient(var(--line), var(--line)) left var(--coin-ecart) top var(--coin-ecart) / var(--coin) var(--coin) no-repeat,
        linear-gradient(var(--line), var(--line)) right var(--coin-ecart) top var(--coin-ecart) / var(--coin) var(--coin) no-repeat,
        linear-gradient(var(--line), var(--line)) left var(--coin-ecart) bottom var(--coin-ecart) / var(--coin) var(--coin) no-repeat,
        linear-gradient(var(--line), var(--line)) right var(--coin-ecart) bottom var(--coin-ecart) / var(--coin) var(--coin) no-repeat;
}

.field {
    position: relative;
    margin-bottom: 2.4rem;
}

.field:not(.field-consent) {
    padding-top: 2.2rem;
}

.field:not(.field-consent) > label {
	position: absolute;
	top: 0;
	left: 0;
	max-width: 100%;
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.6;
	color: var(--ink-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	transform-origin: left top;
	transform: scale(.75);
	transition: transform .2s ease, color .2s ease;
	text-transform: uppercase;
    letter-spacing: 0.05rem;
}

.field:has(> input.input:placeholder-shown):not(:focus-within) > label {
    color: var(--ink-3);
    transform: translateY(2.8rem);
    letter-spacing: 0.01rem;
}

.field:not(.field-consent):focus-within > label {
    color: var(--fisc);
}

.field:has(textarea.input) {
	margin-top: 5.25rem;
	padding-top: 3rem;
}

.field:has(textarea.input) > label {
	transform: none;
	letter-spacing: 0.01rem;
    color: var(--ink-3);
}

.field .input {
    display: block;
    width: 100%;
    font: inherit;
    font-size: max(var(--fs-md), 16px);
    line-height: 1.4;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: .6rem 0 .8rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.field .input:focus {
    outline: none;
    border-bottom-color: var(--fisc);
    box-shadow: 0 1px 0 var(--fisc);
}

.field .input:user-invalid {
    border-bottom-color: var(--stamp);
}

.field .input:-webkit-autofill {
    -webkit-text-fill-color: var(--ink);
    caret-color: var(--ink);
    transition: background-color 100000s 0s;
}

.field textarea.input {
    min-height: 14rem;
    resize: vertical;
    background: var(--surface);
    padding: 1.2rem 1.6rem;
}

.field .hint {
    font-size: var(--fs-xs);
    color: var(--ink-3);
    margin: 1rem 0 0;
}

.field-website {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.field-consent {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
}

.field-consent a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.field-consent input {
	position: relative;
	width: 1.6rem;
	height: 1.6rem;
	margin: .4rem 0 0;
	appearance: none;
	background: transparent;
	border: 1px solid var(--ink-3);
	border-radius: 0;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}

.field-consent input::after {
	content: "";
	position: absolute;
	left: calc(50% - .25rem);
	top: calc(50% - .65rem);
	width: .3rem;
	height: .9rem;
	border: solid var(--vert-profond);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform .15s ease;
}

.field-consent input:checked {
    background: var(--fisc-line);
    border-color: var(--fisc);
}

.field-consent input:checked::after {
    transform: rotate(45deg) scale(1);
}

.field-consent input:focus-visible {
    outline: 2px solid var(--fisc);
    outline-offset: 3px;
}

.field-consent input:user-invalid {
    border-color: var(--stamp);
}

@media (hover: hover) and (pointer: fine) {
    .field-consent input:not(:checked):hover {
        border-color: var(--ink);
    }
}

.field-consent label {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--ink-2);
    margin: 0;
    cursor: pointer;
}

.form-required {
    font-size: var(--fs-xs);
    color: var(--ink-3);
}

.form-status {
    font-size: var(--fs-md);
    margin: 1.8rem 0 0;
}

.form-status:empty {
    display: none;
}

.form-status.is-ok {
    color: var(--ink);
    background: var(--dist-soft);
    border-left: 3px solid var(--dist);
    padding: 1.2rem 1.6rem;
}

.form-status.is-erreur {
    color: var(--stamp);
    background: var(--stamp-soft);
    border-left: 3px solid var(--stamp);
    padding: 1.2rem 1.6rem;
}

/* ---------- Pagination ---------- */

.pagination {
    margin-top: 4rem;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	font-size: var(--fs-sm);
}

.pagination .page-numbers {
    display: inline-block;
    padding: .7rem 1.3rem;
    color: var(--ink-2);
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.pagination .page-numbers:hover {
    color: var(--ink);
    border-color: var(--ink);
}

.pagination .page-numbers.current {
    color: var(--btn-ink);
    background: var(--btn-bg);
    border-color: var(--btn-bg);
}

.pagination :is(.prev, .next) {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.pagination-fleche {
	flex: none;
	width: 2rem;
	height: auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.1;
	stroke-miterlimit: 10;
}

.pagination .prev .pagination-fleche {
    transform: scaleX(-1);
}

.pagination-fleche polyline:first-child {
    stroke-dasharray: 24;
}

.pagination-fleche polyline:last-child {
    stroke-dasharray: 11;
}

@keyframes ngt-fleche-trait {
    from { stroke-dashoffset: 24; }
    to { stroke-dashoffset: 0; }
}

@keyframes ngt-fleche-pointe {
    from { stroke-dashoffset: 11; }
    to { stroke-dashoffset: 0; }
}

@media (hover: hover) and (pointer: fine) {
    .pagination :is(.prev, .next):hover .pagination-fleche polyline:first-child {
        animation: ngt-fleche-trait .4s cubic-bezier(.6, 0, .25, 1) both;
    }

    .pagination :is(.prev, .next):hover .pagination-fleche polyline:last-child {
        animation: ngt-fleche-pointe .22s ease-out .32s both;
    }
}

/* ---------- Illustrations des domaines ---------- */

.illu {
    display: block;
    width: 100%;
    max-width: 20rem;
    height: auto;
    margin-bottom: 2.4rem;
    color: var(--white);
}

.illu-accent {
    color: var(--fisc-line);
}

/* ==========================================================================
   Pages
   ========================================================================== */

/* ---------- Accueil ---------- */

.actus--accueil .actus-anim {
    min-height: 26rem;
    max-height: 32rem;
}

.actus--accueil .actus-corps {
    padding: 0;
}

.interlocuteurs .grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
}

.strip-foot {
    max-width: none;
    margin: 3.6rem 0 0;
    padding-top: 2.2rem;
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
    letter-spacing: .02em;
    color: var(--ink-3);
    overflow: hidden;
}

.strip-foot a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1.2rem;
    margin-left: -1.6rem;
    color: inherit;
    text-decoration: none;
}

.strip-foot span {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
}

.strip-foot span::before {
	content: "";
	flex: none;
	width: .4rem;
	height: .4rem;
	background: currentColor;
	position: relative;
	top: 1px;
}

@media (hover: hover) and (pointer: fine) {
    .strip-foot a:hover {
        color: var(--ink);
    }
}

.people {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
}

.person {
    background: var(--surface);
    border: 1px solid var(--line-surface);
    border-radius: var(--radius);
    padding: clamp(2.4rem, 1.6rem + 1vw, 4rem);
}

.person .ph {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 6.4rem;
    height: 6.4rem;
    background: var(--surface-2);
    font-family: var(--font-title);
    font-size: 2.7rem;
    font-weight: var(--title-weight);
    letter-spacing: .04em;
    color: var(--ink);
}

.person-tete {
    display: flex;
    align-items: flex-end;
    gap: 1.6rem 2.4rem;
    margin-bottom: 2.4rem;
}

.person-photo {
    display: block;
    flex: none;
    width: 9.6rem;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: calc(var(--radius) * .6);
    background: var(--surface-2);
}

.person-identite {
    flex: 1 1 20rem;
    min-width: 0;
}

.person .person-identite > :last-child {
    margin-bottom: 0;
}

.person h3 {
    font-family: var(--font-title);
    font-size: 3.4rem;
    font-weight: var(--title-weight);
    line-height: 1.1;
    margin-bottom: .6rem;
}

.person .role {
	font-size: var(--fs-3xs);
	letter-spacing: .15rem;
	text-transform: uppercase;
	color: var(--fisc);
	margin-bottom: 1.8rem;
	font-weight: 500;
}

.person.dist .role {
    color: var(--dist);
}

.person p {
    font-size: var(--fs-md);
    color: var(--ink-2);
}

.person .tags {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 1.8rem 0 0;
}

.people .tag {
	font-family: var(--font-body);
	font-size: 1rem;
	letter-spacing: .12rem;
}

/* ---------- Accueil : illustration de l'alliance ---------- */

.accueil-anim {
    --al-dist: var(--dist-line);
    --al-fisc: var(--fisc-line);
    --al-neutre: var(--anim-trait);
}

.alliance {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.alliance :is(path, rect, circle, polygon, polyline) {
    fill: none;
    stroke: var(--anim-trait);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.alliance .al-fond {
    fill: var(--surface);
}

.alliance .al-route--pointilles {
    stroke-dasharray: 22 23;
    stroke-linecap: butt;
}

.alliance .al-ligne {
    stroke-opacity: .7;
}

.alliance :is(.al-plein, .al-barre, .al-point) {
    stroke: none;
}

.alliance .al-plein {
    fill: var(--anim-trait);
}

.alliance .al-barre--dist {
    fill: var(--al-dist);
}

.alliance .al-barre--fisc {
    fill: var(--al-fisc);
}

.alliance .al-etape {
    transform-box: fill-box;
    transform-origin: center;
}

.alliance .al-halo {
    stroke-width: 2;
    opacity: 0;
}

.alliance .al-dossier {
    display: none;
}

.js .alliance .al-dossier {
    display: inline;
}

.alliance .al-trainee {
    stroke-width: 2.5;
    stroke-linecap: butt;
    stroke-dasharray: 0 2;
    opacity: var(--o);
}

.alliance .al-point {
    opacity: 0;
}

.alliance .al-dossier--dist .al-trainee {
    stroke: var(--al-dist);
}

.alliance .al-dossier--dist .al-point {
    fill: var(--al-dist);
}

.alliance .al-dossier--fisc .al-trainee {
    stroke: var(--al-fisc);
}

.alliance .al-dossier--fisc .al-point {
    fill: var(--al-fisc);
}

.alliance .al-dossier--neutre .al-trainee {
    stroke: var(--al-neutre);
}

.alliance .al-dossier--neutre .al-point {
    fill: var(--al-neutre);
}

.alliance .al-onde {
    stroke-width: 1.5;
    opacity: 0;
}

.alliance .al-onde[data-ton="dist"] {
    stroke: var(--al-dist);
}

.alliance .al-onde[data-ton="fisc"] {
    stroke: var(--al-fisc);
}

@media (prefers-reduced-motion: no-preference) {
    .js .alliance .al-route--plein {
        stroke-dasharray: 1 1;
        stroke-dashoffset: 1;
        transition: stroke-dashoffset 1.2s ease-in-out var(--d, 0ms);
    }

    .js .alliance.is-arrive .al-route--plein {
        stroke-dashoffset: 0;
    }

    .js .alliance :is(.al-route--pointilles, .al-etape) {
        opacity: 0;
        transition: opacity .7s ease var(--d, 0ms);
    }

    .js .alliance.is-arrive :is(.al-route--pointilles, .al-etape) {
        opacity: 1;
    }
}

/* ---------- Diagnostic ---------- */

#formulaire.section .section-content > p:first-child {
    max-width: 60ch;
}

.actus--diagnostic .actus-anim {
    min-height: 18rem;
    max-height: 24rem;
    margin-left: -2.5rem;
}

.actus--diagnostic .actus-corps {
    padding: 0;
}

.actus--diagnostic .split {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
    gap: 1px;
    background: var(--line-soft);
    overflow: hidden;
}

.actus--diagnostic .split > div {
    background: var(--surface);
}

.actus--diagnostic .split > div + div {
    border-left: 0;
}

/* ---------- Diagnostic : illustration ---------- */

.diag {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.diag :is(path, rect, circle) {
    fill: none;
    stroke: var(--anim-trait);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.diag :is(.diag-feuille, .diag-fiche, .diag-monture, .diag-verre, .diag-manche, .diag-crayon-corps, .diag-point) {
    fill: var(--surface);
}

.diag .diag-feuille--dessous {
    stroke-opacity: .45;
}

.diag :is(.diag-ligne, .diag-pli, .diag-crayon-trait) {
    stroke-width: 1;
    stroke-opacity: .45;
}

.diag .diag-trace {
    stroke-linecap: butt;
}

.diag .diag-titre {
    stroke-width: 2.4;
}

.diag .diag-piste {
    stroke-width: 1;
    stroke-opacity: .15;
}

.diag :is(.diag-souligne, .diag-courbe, .diag-pouls) {
    stroke-width: 1.4;
}

.diag .diag-barre {
    stroke-width: 3;
}

.diag :is(.diag-souligne, .diag-barre, .diag-courbe) {
    stroke-dasharray: 1 1;
}

.diag :is(.diag-marque, .diag-crayon-mine) {
    fill: var(--anim-trait);
    stroke: none;
}

.diag :is(.diag-flux, .diag-flux-pointe) {
    stroke-opacity: .6;
}

.diag .diag-flux {
    stroke-dasharray: 2 4;
}

.js .diag :is(.diag-souligne, .diag-barre, .diag-courbe) {
    stroke-dashoffset: 1;
}

.js .diag :is(.diag-marque, .diag-point) {
    opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .js .diag .diag-trace {
        stroke-dasharray: 1 1;
        stroke-dashoffset: 1;
        fill-opacity: 0;
        transition: stroke-dashoffset .9s ease-in-out var(--d, 0ms), fill-opacity .5s ease calc(var(--d, 0ms) + .4s);
    }

    .js .diag.is-arrive .diag-trace {
        stroke-dashoffset: 0;
        fill-opacity: 1;
    }

    .js .diag .diag-outil {
        opacity: 0;
        transition: opacity .6s ease var(--d, 0ms);
    }

    .js .diag.is-arrive .diag-outil {
        opacity: 1;
    }
}

/* ---------- Expertises et secteurs ---------- */

.actus--expertises .actus-anim {
    min-height: 24rem;
    max-height: 34rem;
    margin-top: 11rem;
}

.actus--expertises .actus-corps {
    padding: 0;
}

/* ---------- Expertises et secteurs : réseau ---------- */

.reseau {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.reseau-lien {
    fill: none;
    stroke: var(--anim-trait);
    stroke-width: 1;
    stroke-opacity: .35;
    transition: stroke-opacity .3s ease;
}

.reseau-disque,
.reseau-jonction .is-plein {
    fill: var(--surface);
}

.reseau-jonction .is-creux {
    fill: var(--surface);
    stroke: var(--ink);
    stroke-width: 1.2;
}

.reseau-picto {
	fill: none;
	stroke-width: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke: var(--ink);
}

.reseau-pop.is-plein {
    fill: var(--surface);
    stroke: var(--ink);
    stroke-width: 1.2;
}

.reseau-anneau {
	fill: none;
	stroke: var(--anim-trait);
	stroke-width: 1.2;
	stroke-linecap: round;
	transform-box: fill-box;
	transform-origin: center;
}

.reseau-plan {
    transition: opacity .3s ease;
}

.reseau-plan-2 {
    opacity: .35;
}

.reseau-plan-3 {
    opacity: .18;
}

.reseau-plan-2 .reseau-point {
    fill: var(--surface);
    stroke: var(--ink);
    stroke-width: 1.2;
}

.reseau-plan-3 .reseau-point {
    fill: var(--anim-trait);
}

.reseau.a-un-actif .reseau-plan {
    opacity: .1;
}

.reseau-noeud {
    transition: opacity .3s ease;
}

.reseau.a-un-actif .reseau-noeud:not(.is-actif, .is-relie) {
    opacity: .25;
}

.reseau.a-un-actif .reseau-lien {
    stroke-opacity: .12;
}

.reseau.a-un-actif .reseau-lien.is-relie {
    stroke-opacity: .9;
}

@media (prefers-reduced-motion: no-preference) {
    .reseau-anneau {
        animation: ngt-tourne var(--tour, 30s) linear infinite paused;
    }

    .reseau-anneau.is-inverse {
        animation-direction: reverse;
    }

    .reseau.is-visible .reseau-anneau {
        animation-play-state: running;
    }

    .js .reseau-pop {
        transform-box: fill-box;
        transform-origin: center;
        transform: scale(.4);
        opacity: 0;
        transition: transform .7s cubic-bezier(.2, .8, .2, 1.15) var(--d, 0ms), opacity .4s ease var(--d, 0ms);
    }

    .js .reseau.is-arrive .reseau-pop {
        transform: none;
        opacity: 1;
    }

    .js .reseau-lien {
        stroke-dasharray: 1 1;
        stroke-dashoffset: 1;
        transition: stroke-dashoffset var(--t, 600ms) ease-in-out var(--d, 0ms), stroke-opacity .3s ease;
    }

    .js .reseau.is-arrive .reseau-lien {
        stroke-dashoffset: 0;
    }
}

@keyframes ngt-tourne {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Pages de domaine ---------- */

.actus--domaine .actus-corps {
    padding: 0;
}

/* ---------- Les associés ---------- */

.page-template-associes .lede {
	max-width: 60ch;
}

.actus--associes .actus-corps {
    padding: 0;
}

.associe {
    --volet: var(--fisc-line);
    padding: var(--section-space) var(--gutter);
}

.associe.dist {
    --volet: var(--dist-line);
}

.associe + .associe {
    border-top: 1px solid var(--line-soft);
}

.associe-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: clamp(2.4rem, 1rem + 2vw, 4.8rem);
    margin-bottom: clamp(3.6rem, 2rem + 2vw, 6.4rem);
}

.associe-photo {
    position: relative;
    flex: 0 0 clamp(16rem, 36%, 40rem);
    aspect-ratio: 4 / 5;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--surface);
}

.associe-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.associe-identite {
    flex: 1 1 24rem;
    min-width: 0;
}

.associe-identite h2 {
    margin-bottom: 1rem;
}

.associe-titre {
    font-size: var(--fs-md);
    color: var(--ink-2);
    margin: 0;
}

.associe-accroche {
    font-size: var(--fs-lg);
    line-height: 1.5;
    max-width: 46ch;
    margin: 2.4rem 0 0;
}

.associe-contact {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    list-style: none;
    margin: 2.4rem 0 0;
    padding: 0;
    font-size: var(--fs-md);
}

.associe-contact a {
    color: var(--ink-2);
}

.associe-linkedin {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.associe-linkedin svg {
    width: 2rem;
    height: 2rem;
}

.associe-bio p {
    max-width: 70ch;
}

.associe-plus {
    display: none;
}

.js .associe-plus {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem 2.4rem;
    margin-top: 3.2rem;
}

.associe-plus-bouton {
    display: inline-flex;
    align-items: center;
    gap: 1.4rem;
}

.associe-plus-picto {
    position: relative;
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.associe-plus-picto::before,
.associe-plus-picto::after {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - .75px);
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.associe-plus-picto::after {
    transform: rotate(90deg);
}

.associe.is-ouvert .associe-plus-picto {
    transform: rotate(180deg);
}

.associe.is-ouvert .associe-plus-picto::after {
    transform: rotate(0deg);
}

.associe-plus-sommaire {
    margin: 0;
    font-size: var(--fs-2xs);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.associe-details-corps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 36rem), 1fr));
    column-gap: clamp(3.2rem, 1rem + 3vw, 6.4rem);
}

.js .associe-details {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
}

.js .associe.is-ouvert .associe-details {
    grid-template-rows: 1fr;
    visibility: visible;
}

.js .associe-details-corps {
    min-height: 0;
    overflow: hidden;
}

.associe-rubrique {
    position: relative;
    margin-top: 3.2rem;
    padding-top: 3.2rem;
}

.associe-rubrique::before,
.associe-rubrique::after {
    content: "";
    position: absolute;
    left: 0;
    transform-origin: left;
}

.associe-rubrique::before {
    top: 0;
    right: 0;
    height: 1px;
    background: var(--line-soft);
}

.associe-rubrique::after {
    top: -1px;
    width: 3.2rem;
    height: 3px;
    background: var(--volet);
}

.associe-rubrique ul.marks {
    margin-bottom: 0;
}

.associe-rubrique ul.marks li::before {
    background: var(--volet);
}

@media (prefers-reduced-motion: no-preference) {
    .js .associe-details {
        transition: grid-template-rows .55s cubic-bezier(.4, 0, .2, 1) .12s, visibility 0s linear .67s;
    }

    .js .associe.is-ouvert .associe-details {
        transition: grid-template-rows .75s cubic-bezier(.2, .7, .2, 1), visibility 0s;
    }

    .js .associe-rubrique {
        --pas: calc(var(--i, 0) * 110ms);
    }

    .js .associe-rubrique::before,
    .js .associe-rubrique::after {
        transform: scaleX(0);
        transition: transform .25s ease;
    }

    .js .associe-rubrique .label,
    .js .associe-rubrique li {
        opacity: 0;
        transform: translateY(1.2rem);
        transition: opacity .2s ease, transform .25s ease;
    }

    .js .associe-rubrique li::before {
        transform: scale(0);
        transition: transform .2s ease;
    }

    .js .associe.is-ouvert .associe-rubrique::before {
        transform: none;
        transition: transform 1s cubic-bezier(.2, .7, .2, 1) calc(.15s + var(--pas));
    }

    .js .associe.is-ouvert .associe-rubrique::after {
        transform: none;
        transition: transform .5s cubic-bezier(.2, .7, .2, 1) calc(.45s + var(--pas));
    }

    .js .associe.is-ouvert .associe-rubrique .label {
        opacity: 1;
        transform: none;
        transition: opacity .5s ease calc(.3s + var(--pas)), transform .7s cubic-bezier(.2, .7, .2, 1) calc(.3s + var(--pas));
    }

    .js .associe.is-ouvert .associe-rubrique li {
        --apres: calc(.4s + var(--pas) + var(--j, 0) * 55ms);
        opacity: 1;
        transform: none;
        transition: opacity .5s ease var(--apres), transform .7s cubic-bezier(.2, .7, .2, 1) var(--apres);
    }

    .js .associe.is-ouvert .associe-rubrique li::before {
        transform: none;
        transition: transform .45s cubic-bezier(.3, 1.6, .5, 1) calc(var(--apres) + .2s);
    }
}

/* ---------- Contact ---------- */

.page-template-contact .lede {
    max-width: 80ch;
}

.page-template-contact .actus-anim {
	max-height: 48rem;
}

.contact-carte {
    --carte-couleur: var(--ink);
    --carte-accent: var(--fisc);
}

.contact-title {
    margin-bottom: 2.4rem;
}

.contact-bloc {
	padding-inline: var(--gutter);
	display: grid;
	grid-template-columns: clamp(20rem, 13vw, 28rem) minmax(0, 1fr);
	gap: clamp(3.6rem, 2.34375vw, 6rem);
	padding-block: var(--section-space);
}

.contact-bloc + .contact-bloc {
    border-top: 1px solid var(--line-soft);
}

.contact-cards .contact-card:last-child {
    grid-column: 1 / -1;
}

.contact-card .label {
    margin-bottom: 1rem;
}

.contact-card p + p {
    margin-top: 1.2rem;
}

.contact-associe {
    display: flex;
    align-items: center;
    gap: 2.4rem 3.2rem;
}

.contact-photo {
	display: block;
	flex: none;
	width: 12rem;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 50%;
	background: var(--surface-2);
	outline: 1px solid var(--line-surface);
	outline-offset: 5px;
}

.contact-identite {
    flex: 1 1 24rem;
    min-width: 0;
}

/* ---------- Actualités ---------- */

.actus-filtres ul {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    list-style: none;
    margin: 0 0 clamp(3.6rem, 2rem + 2vw, 5.6rem);
    padding: 0;
}

.actus-filtres a {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem 1.6rem;
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink-2);
    white-space: nowrap;
    border: 1px solid var(--line);
    border-radius: var(--btn-radius);
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.actus-filtres a:not(.tous)::before {
    content: "";
    flex: none;
    width: .6rem;
    height: .6rem;
    background: var(--fisc-line);
}

.actus-filtres a.dist::before {
    background: var(--dist-line);
}

.actus-filtres .n {
    font-family: var(--font-mono);
    font-size: var(--fs-3xs);
    color: var(--ink-3);
}

.actus-filtres a[aria-current] {
    color: var(--btn-ink);
    background: var(--btn-bg);
    border-color: var(--btn-bg);
}

.actus-filtres a[aria-current] .n {
    color: inherit;
    opacity: .7;
}

@media (hover: hover) and (pointer: fine) {
    .actus-filtres a:not([aria-current]):hover {
        color: var(--ink);
        border-color: var(--ink);
    }
}

.actus-titre-liste {
    margin: 0 0 1.6rem;
}

.actus-titre-liste:focus {
    outline: none;
}

.actus-resultats {
    transition: opacity .2s ease;
}

.actus-resultats.is-loading {
    opacity: .4;
}

.actus-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line-soft);
}

.actus-liste > li {
    border-bottom: 1px solid var(--line-soft);
}

.actu {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(2.4rem, 1rem + 2vw, 4.8rem);
    align-items: center;
    padding: clamp(2.4rem, 1.6rem + 1vw, 3.2rem) 0;
}

.actu > :not(.actu-fleche) {
    grid-column: 1;
}

.actu-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 2rem;
	margin: 0 0 1.2rem;
	font-size: var(--fs-3xs);
	letter-spacing: .25rem;
	text-transform: uppercase;
	color: var(--ink-3);
}

.actu-cat {
    color: var(--fisc);
}

.actu.dist .actu-cat {
    color: var(--dist);
}

.actu-titre {
    font-family: var(--font-title);
    font-size: clamp(2.4rem, 1.6rem + .8vw, 3.2rem);
    font-weight: var(--title-weight);
    line-height: 1.15;
    letter-spacing: var(--title-tracking);
    margin: 0 0 1rem;
    text-wrap: balance;
}

.actu-extrait {
    font-size: var(--fs-md);
    color: var(--ink-2);
    max-width: 70ch;
    margin: 0;
}

.actu-fleche {
    grid-column: 2;
    grid-row: 1 / span 3;
    width: 2.6rem;
    height: auto;
    fill: none;
    stroke: var(--ink-3);
    stroke-width: 1.2;
    stroke-miterlimit: 10;
    transition: transform .2s ease, stroke .2s ease;
}

.actu:focus-within {
    outline: none
}

.actu:focus-within .actu-titre {
    color: var(--jaune);
}

@media (hover: hover) and (pointer: fine) {
    .actu:hover .actu-fleche {
        stroke: var(--ink);
        transform: translateX(.6rem);
    }
}

.actus-resultats .empty a {
    text-decoration: underline;
}

.empty {
    color: var(--ink-2);
}

/* ---------- Articles ---------- */

.actus--article .actus-tete {
    gap: 4rem;
}

.actus--article h1 {
    font-size: clamp(3.4rem, 1.8rem + 2vw, 5.6rem);
    line-height: 1.1;
}

.actu-appel {
    margin-top: auto;
    padding: clamp(2.4rem, 1.6rem + 1vw, 3.6rem);
    background: var(--surface);
    border: 1px solid var(--line-surface);
    border-radius: var(--radius);
}

.actu-appel-domaine {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	margin: 0 0 1.6rem;
	font-size: var(--fs-3xs);
	letter-spacing: .2rem;
	text-transform: uppercase;
	color: var(--ink-3);
}

.actu-appel-domaine a {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    color: inherit;
    text-decoration: none;
    text-underline-offset: .4rem;
}

@media (hover: hover) and (pointer: fine) {
    .actu-appel-domaine a:hover {
        color: var(--ink);
        text-decoration: underline;
    }
}

.actu-appel-domaine .num {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    color: var(--fisc);
}

.actu-appel-domaine .num::before {
    content: "";
    width: .6rem;
    height: .6rem;
    background: var(--fisc-line);
}

.actu-appel.dist .actu-appel-domaine .num {
    color: var(--dist);
}

.actu-appel.dist .actu-appel-domaine .num::before {
    background: var(--dist-line);
}

.actu-appel h2 {
    font-size: clamp(2.6rem, 1.8rem + .8vw, 3.4rem);
    margin: 0 0 1.2rem;
}

.actu-appel p {
    color: var(--ink-2);
}

.actu-appel .btnrow {
    margin-top: 2.4rem;
}

.actu-appel .actu-appel-note {
    margin-top: 1.6rem;
    font-size: var(--fs-2xs);
    color: var(--ink-3);
}

.actus-suite {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line-soft);
}

.actus-suite-tete,
.actus-suite-liste {
    min-width: 0;
    padding: var(--section-space) var(--gutter);
}

.actus-suite-tete > p:not(.eyebrow) {
    color: var(--ink-2);
    margin: 0 0 2.8rem;
}

.actus-suite-tete .actus-filtres ul {
    margin-block: 0;
}

.actus-suite-tete .btnrow {
    margin-top: 3.2rem;
}

.actus-suite-liste {
    border-left: 1px solid var(--line-soft);
}

.article-image {
    max-width: 96rem;
    margin: 0 0 4rem;
}

.article-image img {
    display: block;
    border-radius: var(--radius);
}

.entry {
    max-width: 100ch;
}

/* ---------- Articles : contenu ---------- */

@media (prefers-reduced-motion: no-preference) {
    .js .actus--article .entry > :not(h2) {
        opacity: 0;
        transform: translateY(.8rem);
        transition: opacity .5s ease, transform .5s ease;
        transition-delay: var(--delai, 0ms);
    }

    .js .actus--article .entry > .is-visible {
        opacity: 1;
        transform: none;
    }
}

@media print {
    .js .actus--article .entry > :not(h2) {
        opacity: 1 !important;
        transform: none !important;
    }
}

.entry > *:first-child {
    margin-top: 0;
}

.entry h2 {
    margin: 4.8rem 0 1.4rem;
}

.entry h3 {
    font-size: var(--fs-xl);
    margin: 3.6rem 0 1rem;
}

.entry h4 {
    margin: 3.2rem 0 1rem;
}

.entry p,
.entry li {
    color: var(--ink-2);
}

.entry strong {
    color: var(--ink);
    font-weight: 600;
}

.entry a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--dist);
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .entry a:hover {
        color: var(--dist);
    }
}

.entry ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.4rem;
}

.entry ul li {
    position: relative;
    padding-left: 2.2rem;
    margin-bottom: 1rem;
}

.entry ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .65em;
    width: .6rem;
    height: .6rem;
    background: var(--ink);
}

.entry ol {
    padding-left: 2.4rem;
    margin: 0 0 1.4rem;
}

.entry ol li {
    margin-bottom: 1rem;
    padding-left: .4rem;
}

.entry ol li::marker {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fisc);
}

.entry blockquote {
    margin: 3.2rem 0;
    padding: 2px 0 2px 2.2rem;
    border-left: 3px solid var(--fisc-line);
    font-family: var(--font-title);
    font-size: 2.9rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--ink);
}

.entry blockquote p {
    color: inherit;
}

.entry .lede {
    margin: 0 0 2.8rem;
}

.entry .note {
    margin: 2.8rem 0;
    padding: 1.8rem 2.2rem;
    background: var(--surface);
    border-left: 3px solid var(--ink-3);
    font-size: var(--fs-md);
}

.entry .note p:last-child,
.entry .qbox p:last-child {
    margin-bottom: 0;
}

.entry .tablewrap {
    margin: 2.8rem 0;
}

.entry figure {
    margin: 2.8rem 0;
}

.entry figcaption,
.entry .wp-caption-text {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    color: var(--ink-3);
    margin-top: .8rem;
}

/* ---------- Mentions légales ---------- */

.page-template-mentions-legales .pagehead .shell {
    max-width: 50%;
}

.page-template-mentions-legales .lede {
    max-width: 100ch;
}

.legal-toc .label {
    margin-bottom: 2rem;
    font-family: var(--font-body);
    margin-top: 0;
}

.legal-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(28rem, 50rem);
    align-items: start;
}

.legal-content {
    grid-column: 1;
    grid-row: 1;
    border-right: 1px solid var(--line-soft);
}

.legal-page .legal-toc {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    padding: var(--section-space) clamp(2.4rem, 2.5vw, 6.4rem);
    border-bottom: 0;
    gap: 0;
}

.toc {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 96rem;
    columns: 2 26rem;
    column-gap: var(--gap);
    counter-reset: toc;
}

.toc li {
    counter-increment: toc;
    break-inside: avoid;
    display: flex;
    gap: 1.4rem;
    align-items: baseline;
    padding: 1rem 0;
    border-top: 1px solid var(--line-soft);
    font-size: var(--fs-md);
}

.toc li::before {
	content: counter(toc, decimal-leading-zero);
	font-family: var(--font-mono);
	font-size: var(--fs-3xs);
	letter-spacing: .12em;
	color: var(--jaune);
}

.toc a {
    text-decoration: none;
}

.toc a.active {
    color: var(--cyan);
}

@media (hover: hover) and (pointer: fine) {
    .toc a:hover {
        text-decoration: none;
        color: var(--cyan);
    }
}

.legal-page h3 {
    margin-top: 3.6rem;
}

.legal-page .legal-after-table {
    margin-top: 1.8rem;
}

@media (prefers-reduced-motion: no-preference) {
    .js .legal-content .section-content > * {
        opacity: 0;
        transform: translateY(.8rem);
        transition: opacity .5s ease, transform .5s ease;
        transition-delay: var(--delai, 0ms);
    }

    .js .legal-content .section-content.is-visible > * {
        opacity: 1;
        transform: none;
    }
}

@media print {
    .js .legal-content .section-content > * {
        opacity: 1 !important;
        transform: none !important;
    }
}

.nowrap {
    white-space: nowrap;
}

.legal-update {
	font-size: var(--fs-xs);
	color: var(--ink-inactive);
	margin: 0;
	padding: 3rem var(--gutter);
	width: 100%;
	border-top: 1px solid var(--line-soft);
	max-width: none;
	border-right: 1px solid var(--line-soft);
	text-transform: uppercase;
	font-weight: 500;
}

.legal-content .tablewrap {
    max-width: 130ch;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* ---------- Écrans peu hauts ---------- */

@media (min-width: 1025px) and (max-height: 820px) {
    .actus-anim {
        min-height: 16rem;
        margin-top: 2.4rem;
    }
}

/* ---------- 1999 px ---------- */

@media (max-width: 1999px) {
    .page-template-contact .section-intro h2 {
        position: relative;
        top: initial;
    }

    .contact-bloc {
        display: flex;
        gap: 2rem;
        flex-direction: column;
    }

    .actus.actus--diagnostic .actus-corps .section,
    .actus.actus--domaine .actus-corps .section,
    .actus.actus--expertises .actus-corps .section,
    .actus.actus--accueil .actus-corps .section {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .page-template-contact .actus-anim {
        max-height: 42rem;
    }

    .actus--accueil .actus-anim {
        max-width: 80%;
    }

    .actus--domaine .actus-anim {
        max-width: 70%;
    }

    .legal-page {
        grid-template-columns: minmax(0, 1fr) minmax(28rem, 40rem);
    }

    .associe-photo {
        aspect-ratio: 4 / 6;
    }

    .associe-accroche {
        font-size: var(--fs-base);
        margin: 1.4rem 0 0;
    }

    .associe-identite h2 {
        margin-bottom: 0;
    }

    .eyebrow {
        font-size: var(--fs-3xs);
    }

    .associe-contact {
        gap: .4rem;
        font-size: var(--fs-sm);
    }

    .btn {
        font-size: var(--fs-sm);
    }

    .associe-plus-sommaire {
        font-size: var(--fs-3xs);
    }

    .footer-label {
        font-size: var(--fs-lg);
    }

    .actus-filtres a {
        font-size: var(--fs-xs);
    }
}

/* ---------- 1536 px ---------- */

@media (max-width: 1536px) {
    :root {
        --gutter: 4rem;
    }

    body {
        font-size: var(--fs-md);
    }

    .mainnav ul {
        gap: 1.2rem;
    }

    .brand {
        --logo-h: 3.6rem;
    }

    .brand-base {
        font-size: 1rem;
    }

    .mainnav a {
        font-size: var(--fs-md);
    }

    h4, 
    .label {
        font-size: var(--fs-3xs);
    }

    ul.marks li {
        font-size: var(--fs-md);
    }

    .qbox .q {
        font-size: 2.2rem;
    }

    h3 {
        font-size: var(--fs-base);
    }

    .card p {
        font-size: var(--fs-sm);
    }

    .card-cta {
        font-size: var(--fs-xs);
    }

    .card-num {
        font-size: var(--fs-3xs);
    }

    .card-cta svg {
        width: 2.1rem;
    }

    .actus-tete .lede {
        font-size: var(--fs-base);
    }

    .actus--domaine .actus-anim {
        max-height: 20rem;
    }

    .site-footer {
        font-size: var(--fs-sm);
    }

    .footer-logo {
        height: 3.8rem;
    }

    .footer-linkedin svg {
        width: 2rem;
        height: 2rem;
    }

    .footer-linkedin {
        font-size: var(--fs-xs);
    }

    .footer-label {
        font-size: var(--fs-base);
    }

    th {
        font-size: 1rem;
        letter-spacing: .1rem;
    }

    th, 
    td {
        padding: 1.4rem;
    }

    table {
        font-size: var(--fs-sm);
    }

    .qbox p {
        font-size: var(--fs-sm);
    }

    .actus--diagnostic .actus-anim {
        max-height: 20rem;
        max-width: 80%;
    }

    .steps .n {
        font-size: 2.5rem;
    }

    .steps li {
        grid-template-columns: 4rem 1fr;
    }

    .field:not(.field-consent) > label {
        font-size: var(--fs-xs);
    }

    .actus-anim {
        max-height: 22rem;
        margin-top: 6rem;
    }

    .actus-anim-legende {
        font-size: var(--fs-3xs);
    }

    .actu-extrait {
        font-size: var(--fs-sm);
    }

    .pagination .page-numbers {
        font-size: var(--fs-xs);
        padding: .6rem 1.3rem;
    }

    .actu-meta {
        font-size: 1rem;
        letter-spacing: .2rem;
        font-weight: 500;
    }

    .actu-appel-domaine {
        font-size: 1rem;
    }

    .actu-appel h2 + p {
        font-size: var(--fs-sm);
    }

    .page-template-contact .actus-anim {
        max-height: 32rem;
    }

    .card .label {
        font-size: 1rem;
    }

    .associe-accroche {
        font-size: var(--fs-md);
    }

    .associe-contact {
        font-size: var(--fs-xs);
    }

    .associe-linkedin {
        gap: 0.6rem;
    }

    .associe-photo {
        aspect-ratio: 4 / 6.5;
    }

    .associe-plus-sommaire {
        font-size: 1rem;
    }

    .lede {
        font-size: var(--fs-base);
    }

    .toc li::before {
        font-size: 1rem;
    }

    .toc li {
        font-size: var(--fs-xs);
    }

    .legal-update {
        font-size: var(--fs-3xs);
    }

    .legal-line {
        font-size: var(--fs-3xs);
    }

    .legal-page {
        grid-template-columns: minmax(0, 1fr) minmax(28rem, 32rem);
    }

    .actus--accueil .actus-anim {
        min-height: 20rem;
        max-height: 26rem;
    }

    .person h3 {
        font-size: 3rem;
    }

    .contact-title {
        margin-bottom: 0;
    }
}

/* ---------- 1280 px ---------- */

@media (max-width: 1280px) {
    :root {
        --gutter: 3rem;
        --fs-h1: 4rem;
    }

    .actus {
        grid-template-columns: 1fr;
    }

    .actus-tete {
        position: static;
        display: flex;
        flex-direction: row;
        min-height: auto;
        gap: 10rem;
        border-bottom: 1px solid var(--line-soft);
        padding: var(--section-space) var(--gutter);
    }

    .actus-tete .actus-anim {
        min-width: 40%;
        min-height: 0;
        max-height: none;
        margin: 0;
        align-self: center;
    }

    .alliance,
    .diag,
    .reseau {
        position: static;
        display: block;
        width: 100%;
        height: auto;
    }

    .domaine-anim,
    .contact-carte,
    .blog .actus-anim-scene {
        flex: none;
        aspect-ratio: 2 / 1;
    }

    .contact-carte {
        width: 32rem;
        max-width: 100%;
        margin-left: auto;
        aspect-ratio: 20 / 19;
    }

    .actus-anim {
        margin-top: 0;
        min-height: auto;
        max-height: none;
    }

    .eyebrow {
        font-size: 1rem;
    }

    .btn {
        font-size: var(--fs-xs);
        padding: 1rem 2rem;
    }

    .brand::after {
        display: none;
    }

    .mainnav {
        padding-inline: 0 var(--gutter);
        border-left: none;
    }

    .mainnav ul {
        gap: 1rem;
    }

    .mainnav a {
        font-size: var(--fs-sm);
    }

    .brand {
        gap: 1.8rem;
    }

    .brand-base {
        font-size: .9rem;
    }

    .actus.actus--diagnostic .actus-corps .section, 
    .actus.actus--domaine .actus-corps .section, 
    .actus.actus--expertises .actus-corps .section, 
    .actus.actus--accueil .actus-corps .section {
        display: grid;
        gap: 0;
        grid-template-columns: 30rem 1fr;
    }

    .entry h2::before, 
    .contact-bloc h2::before, 
    .section h2::before {
        width: calc(var(--gutter) - 1rem);
    }

    .site-footer {
        font-size: var(--fs-xs);
    }

    .footer-label {
        font-size: var(--fs-md);
    }

    .site-footer li {
        margin-bottom: .3rem;
    }

    .card-picto {
        width: 4.6rem;
        height: 4.6rem;
        margin-bottom: 2rem;
    }

    .card-picto svg {
        width: 2.2rem;
        height: 2.2rem;
    }

    h3 {
        font-size: var(--fs-md);
    }

    .page-template-contact .section-intro h2 {
        position: sticky;
        top: 12rem;
    }

    .card p {
        font-size: var(--fs-xs);
    }

    .person .role {
        font-size: 1rem;
    }

    .person p {
        font-size: var(--fs-sm);
    }

    .actus.actus--associes {
        grid-template-columns: 1fr 1fr;
    }

    .actus.actus--associes .actus-tete {
        position: sticky;
        border-bottom: none;
    }

    .associe-linkedin svg {
        width: 1.8rem;
        height: 1.8rem;
    }

    .associe-contact {
        font-size: var(--fs-2xs);
        gap: .2rem;
        margin-top: 1.4rem;
    }

    .associe-accroche {
        font-size: var(--fs-xs);
        margin-top: 1rem;
    }

    .associe-titre {
        font-size: var(--fs-xs);
    }

    .associe-identite h2 {
        font-size: 2.8rem;
    }

    .associe-tete .eyebrow {
        margin-bottom: 1rem;
    }

    .associe-photo {
        aspect-ratio: 4 / 6;
    }

    .associe-identite {
        flex: 1 1 20rem;
    }

    ul.marks li {
        font-size: var(--fs-sm);
    }

    .entry .note {
        margin: 2.8rem 0 0;
        font-size: var(--fs-sm);
    }

    .legal-page {
        grid-template-columns: minmax(0, 1fr) minmax(24rem, 28rem);
    }

    .legal-content h2 {
        font-size: 2.6rem;
    }

    .legal-content .section {
        grid-template-columns: 14rem 1fr;
        font-size: var(--fs-sm);
    }

    .legal-content table {
        font-size: var(--fs-xs);
    }

    .contact-bloc {
        display: grid;
        gap: 2rem;
    }
}

/* ---------- 1025 à 1280 px ---------- */

@media (min-width: 1025px) and (max-width: 1280px) {
    .actus--article {
        grid-template-columns: minmax(0, 1fr) 36rem;
    }

    .actus--article .actus-tete {
        display: contents;
    }

    .actus--article .actus-tete-texte {
        grid-column: 1 / -1;
        padding: var(--section-space) var(--gutter);
        border-bottom: 1px solid var(--line-soft);
    }

    .actus--article .actus-corps {
        grid-column: 1;
        grid-row: 2;
        border-left: 0;
    }

    .actus--article .actu-appel {
        grid-column: 2;
        grid-row: 2;
        position: sticky;
        top: calc(var(--header-h, 8rem) + 3.2rem);
        align-self: start;
        margin: var(--section-space) var(--gutter);
    }
}

/* ---------- 1024 px ---------- */

@media (max-width: 1024px) {
    :root {
        --fs-h1: 3rem;
        --fs-h2: 2.6rem;
    }

    body {
        font-size: var(--fs-sm);
    }

    .actus-tete .lede {
        font-size: var(--fs-md);
        margin: 1.8rem 0 0;
    }

    .btn-fleche svg {
        width: 2.2rem;
    }

    th {
        font-size: .9rem;
        font-weight: 600;
    }

    table {
        font-size: var(--fs-2xs);
        line-height: 1.45;
    }

    .person h3 {
        font-size: 2.8rem;
    }

    .steps .n {
        font-size: 2.2rem;
    }

    .actus.actus--diagnostic .actus-corps .section, 
    .actus.actus--domaine .actus-corps .section, 
    .actus.actus--expertises .actus-corps .section, 
    .actus.actus--accueil .actus-corps .section {
        grid-template-columns: 20rem 1fr;
        gap: 4rem;
    }

    .actus-anim-legende {
        font-size: 1rem;
    }

    .single .actus .actus-corps {
        border-top: 1px solid var(--line-soft);
        margin-top: var(--section-space);
    }

    .actus-filtres a {
        font-size: var(--fs-3xs);
    }

    .footer-logo {
        height: 3.2rem;
    }

    .footer-wrapper > .footer-about + .footer-col {
        display: none;
    }

    .actus {
        display: block;
    }

    .actus-tete {
        position: static;
        min-height: 0;
    }

    .actus.actus--associes .actus-tete {
        position: static;
        border-bottom: 1px solid var(--line-soft);
    }

    .associe-photo {
        aspect-ratio: 4 / 5;
    }

    .actus-corps {
        min-height: 0;
        border-left: 0;
        padding-top: clamp(4rem, 2rem + 3vw, 6.4rem);
    }

    .actus--article {
        display: flex;
        flex-direction: column;
    }

    .actus--article .actus-tete {
        display: contents;
    }

    .actus--article .actus-tete-texte {
        padding: var(--section-space) var(--gutter) 0;
    }

    .actus--article .actu-appel {
        order: 1;
        max-width: none;
        margin: 5rem var(--gutter) var(--section-space);
    }

    .actus--article .actus-corps {
        padding-bottom: clamp(4rem, 2rem + 3vw, 6.4rem);
    }

    .actus-suite {
        display: block;
    }

    .actus-suite-liste {
        border-left: 0;
        padding-top: 0;
    }

    .legal-page {
        display: block;
    }

    .legal-content {
        border-right: 0;
    }

    .legal-page .legal-toc {
        position: static;
        max-height: none;
        overflow: visible;
        padding: var(--section-space) var(--gutter);
        border-bottom: 1px solid var(--line-soft);
    }

    .js .menu-toggle {
        display: inline-flex;
        margin-right: var(--gutter);
    }

    .js .mainnav {
        display: none;
    }

    .js .menu-plein {
        display: block;
    }

    .actus-tete {
        gap: 6rem;
    }

    .header-wrapper {
        flex-wrap: wrap;
    }

    .brand,
    .mainnav {
        align-self: auto;
        margin-block: 0;
    }

    .brand {
        padding-block: 0;
        padding-right: 0;
    }

    .brand::after {
        display: none;
    }

    .mainnav ul {
        height: auto;
    }

    .mainnav a {
        display: block;
        height: auto;
        padding: var(--nav-pad-y) 1.3rem;
    }
}

/* ---------- 768 px ---------- */

@media (max-width: 768px) {
    .g2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .actus.actus--diagnostic .actus-corps .section,
    .actus.actus--domaine .actus-corps .section,
    .actus.actus--expertises .actus-corps .section,
    .actus.actus--accueil .actus-corps .section,
    .contact-bloc {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .actus-tete {
        flex-direction: column;
        gap: 4.8rem;
    }

    .page-template-domaine .actus-tete {
        gap: 4rem;
    }

    .page-template-domaine .actus-tete .actus-anim,
    .blog .actus-tete .actus-anim {
        max-width: 26rem;
    }

    .pagination .page-numbers {
        font-size: var(--fs-3xs);
        font-weight: 500;
    }

    .pagehead-meta {
        font-size: var(--fs-2xs);
    }

    .entry h3 {
        font-size: var(--fs-md);
    }

    .page-template-contact .actus-tete .actus-anim {
        max-width: 20rem;
    }

    .associe-photo {
        aspect-ratio: 4 / 6;
    }

    .legal-content .section {
        grid-template-columns: 1fr;
        font-size: var(--fs-xs);
        gap: 1rem;
    }

    .lede {
        font-size: var(--fs-sm);
    }

    .entry .note {
        font-size: var(--fs-xs);
    }

    .actus-tete .actus-anim {
        min-width: 0;
        align-self: stretch;
    }

    .contact-carte {
        margin-left: 0;
    }

    .split {
        grid-template-columns: 1fr;
    }

    .split > div + div {
        border-left: 0;
        border-top: 1px solid var(--line-soft);
    }

    .menu-plein-signature {
        font-size: 1rem;
    }

    .menu-plein-legal {
        font-size: var(--fs-2xs);
    }

    .menu-plein-linkedin {
        gap: .6rem;
        font-size: var(--fs-2xs);
        font-weight: 500;
    }

    .btn {
        font-size: var(--fs-2xs);
        padding: .8rem 1.6rem;
    }

    .section-intro h2 {
        position: relative;
        top: initial;
    }

    .strip-foot {
        font-size: var(--fs-2xs);
        line-height: 1.35;
    }

    .strip-foot span::before {
        width: .3rem;
        height: .3rem;
    }

    .page-template-contact .section-intro h2 {
        position: relative;
        top: initial;
    }

    .person p {
        font-size: var(--fs-xs);
    }

    .people .tag {
        font-size: 0.9rem;
    }

    .btn-fleche svg {
        width: 2rem;
        stroke-width: 1.3;
    }

    h3 {
        font-size: var(--fs-sm);
    }

    .steps .n {
        font-size: 2rem;
    }

    .steps p {
        font-size: var(--fs-sm);
    }

    .footer-wrapper > .footer-col[aria-label="Informations"] {
        display: none;
    }

    .footer-label {
        font-size: var(--fs-sm);
    }

    .site-footer {
        font-size: var(--fs-2xs);
    }

    .actus--diagnostic .actus-anim {
        max-width: 24rem;
    }

    .card-num {
        font-size: 1rem;
    }

    .qbox {
        margin: 3rem 0;
    }

    .qbox .q {
        font-size: 1.8rem;
    }

    .qbox p {
        font-size: var(--fs-xs);
    }

    ul.marks li {
        margin-bottom: .5rem;
        font-size: var(--fs-xs);
    }

    h4, 
    .label {
        font-size: 1rem;
    }

    ul.marks li::before {
        top: 9px;
        width: .5rem;
        height: .5rem;
    }

    .steps p {
        font-size: var(--fs-xs);
    }

    .actus-tete .lede {
        font-size: var(--fs-sm);
    }

    .field:not(.field-consent) > label {
        font-size: var(--fs-2xs);
    }

    .field-consent label {
        font-size: var(--fs-2xs);
    }

    .form-required {
        font-size: var(--fs-3xs);
    }

    .footer-linkedin {
        font-size: var(--fs-2xs);
        font-weight: 500;
    }

    .field:not(.field-consent) {
        padding-top: 1.6rem;
    }

    .admin-bar .site-header {
        top: 46px;
    }

}

/* ---------- 599 px ---------- */

@media (max-width: 599px) {
    :root {
        --gutter: 2rem;
        --fs-h3: 2rem;
    }

    body {
        font-size: var(--fs-xs);
    }

    .brand {
        --logo-h: 2.8rem;
    }

    .menu-toggle {
        font-size: 1rem;
    }

    .menu-plein-titre {
        font-size: 2.2rem;
    }

    .menu-plein-rubriques a[aria-current] .menu-plein-titre > span::after {
        width: .4rem;
        height: .4rem;
    }

    .menu-plein-label {
        font-size: 1rem;
    }

    .menu-plein-associes-titre svg {
        width: 2rem;
    }

    .menu-plein-legal {
        font-size: var(--fs-3xs);
    }

    .menu-plein-puce {
        width: .4rem;
        height: .4rem;
        transform: translateY(-.3rem);
    }

    .menu-plein-signature {
        font-size: .9rem;
    }

    .header-wrapper {
        width: 100%;
    }

    .brand-base {
        font-size: .8rem;
    }

    .menu-plein-linkedin {
        font-size: var(--fs-3xs);
    }

    .btn-fleche {
        gap: .6rem;
    }

    .btn-fleche svg {
        width: 1.8rem;
    }

    .brand {
        gap: 1.2rem;
    }

    .site-main {
        border-left: none;
        border-right: none;
        width: 100%;
    }

    .menu-plein-nav {
        --menu-ecart: 1.6rem;
    }

    .menu-plein-pied {
        grid-template-columns: minmax(0, 1fr);
    }

    .menu-plein-pied > * {
        grid-area: auto;
        justify-self: start;
    }

    .steps li {
        grid-template-columns: 4.4rem 1fr;
        gap: 1.4rem;
    }

    .btn {
        white-space: normal;
        text-align: center;
    }

    .admin-bar .site-header {
        top: 0;
    }

    .actus-tete-texte .btn {
        white-space: nowrap;
    }

    .actus--article .actu-appel {
        margin-inline: 1.2rem;
    }

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

    .actu-fleche {
        display: none;
    }

    .actus-filtres ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: calc(-1 * var(--gutter));
        padding-inline: var(--gutter);
    }

    .actus-filtres ul::-webkit-scrollbar {
        display: none;
    }

    .is-stackable thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .is-stackable,
    .is-stackable tbody,
    .is-stackable tr,
    .is-stackable td {
        display: block;
        width: 100%;
    }

    .is-stackable tr {
        padding: 1.6rem;
        border-bottom: 1px solid var(--line-soft);
    }

    .person .role {
        font-size: .9rem;
        letter-spacing: .1rem;
    }

    .footer-wrapper > .footer-col[aria-label="Le cabinet"] {
        display: none;
    }

    .footer-wrapper {
        width: 100%;
    }

    .is-stackable tr:last-child {
        border-bottom: 0;
    }

    .is-stackable td {
        padding: 0;
        border: 0;
        margin-bottom: 1rem;
    }

    .footer-wrapper {
        display: none;
    }

    .is-stackable td:last-child {
        margin-bottom: 0;
    }

    .legal-line {
        padding-block: 2rem;
        font-size: 1rem;
        border-right: none;
        border-left: none;
        width: 100%;
    }

    .pagehead-points {
        display: none;
    }

    .is-stackable td::before {
        content: attr(data-label);
        display: block;
        font-family: var(--font-mono);
        font-size: 1rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--ink-3);
        margin-bottom: .2rem;
    }

    .card p {
        font-size: var(--fs-2xs);
    }

    .page-template-mentions-legales .pagehead .shell {
        max-width: 100%;
    }

    .contact-associe {
        gap: 2.2rem;
    }

    .is-stackable td:first-child {
        color: var(--ink);
        margin-bottom: 1.2rem;
    }

    .legal-update {
        font-size: 1rem;
    }

    .is-stackable td:first-child::before {
        content: none;
    }
}