/* assets/styles.css */

/* Prevent Multiple Contact Form 7 Submissions */

.wpcf7-form.submitting .wpcf7-submit {
    pointer-events: none;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* container fix */

@media (min-width: 1800px) and (max-width: 1918px) {

    .e-con>.e-con-inner {
        max-width: 1710px;
    }
}

/*  Boxed Element In Fullwidth Section (with container) */

:root {
    --prosomo_padding: 15px;
    --prosomo_container: 1830px;
    --prosomo_scroll-bar-width-windows: 17px;
    --prosomo_scroll-bar-width-mac: 15px;
}

/* --prosomo_container matches the boxed content width per breakpoint (1830/1710/1310/964/718, fluid <=767). */
@media only screen and (min-width: 1800px) and (max-width: 1918px) {
    :root { --prosomo_container: 1710px; }
}

@media only screen and (max-width: 1799px) {
    :root { --prosomo_container: 1310px; }
}

@media only screen and (max-width: 1399px) {
    :root { --prosomo_container: 964px; }
}

@media only screen and (max-width: 1023px) {
    :root { --prosomo_container: 718px; }
}

@media only screen and (min-width : 768px) {

    .boxed_left {
        padding-left: calc( ( ( ( 100vw - var(--prosomo_scroll-bar-width-windows) ) - var(--prosomo_container) ) / 2 ) - var(--prosomo_padding) ) !important;
    }

    .boxed_left_no_padding {
        padding-left: calc( ( ( ( 100vw - var(--prosomo_scroll-bar-width-windows) ) - var(--prosomo_container) ) / 2 ) ) !important;
    }

    .boxed_right {
        padding-right: calc( ( ( ( 100vw - var(--prosomo_scroll-bar-width-windows)) - var(--prosomo_container) ) / 2 ) - var(--prosomo_padding) ) !important;
    }

    .boxed_right_no_padding {
        padding-right: calc( ( ( ( 100vw - var(--prosomo_scroll-bar-width-windows)) - var(--prosomo_container) ) / 2 ) ) !important;
    }

    body.mac .boxed_left {
        padding-left: calc( ( (  100vw - var(--prosomo_container) ) / 2 ) - var(--prosomo_padding) ) !important;
    }

    body.mac .boxed_left_no_padding {
        padding-left: calc( ( (  100vw - var(--prosomo_container) ) / 2 ) ) !important;
    }

    body.mac .boxed_right {
        padding-right: calc( ( ( 100vw - var(--prosomo_container) ) / 2 ) - var(--prosomo_padding) ) !important;
    }

    body.mac .boxed_right_no_padding {
        padding-right: calc( ( ( 100vw - var(--prosomo_container) ) / 2 ) ) !important;
    }

    body.mac.scrollbars-visible .boxed_left {
        padding-left: calc( ( ( ( 100vw - var(--prosomo_scroll-bar-width-mac)  ) - var(--prosomo_container) ) / 2 ) - var(--prosomo_padding) ) !important;
    }

    body.mac.scrollbars-visible .boxed_left_no_padding {
        padding-left: calc( ( ( ( 100vw - var(--prosomo_scroll-bar-width-mac)  ) - var(--prosomo_container) ) / 2 ) ) !important;
    }

    body.mac.scrollbars-visible .boxed_right {
        padding-right: calc( ( ( ( 100vw - var(--prosomo_scroll-bar-width-mac) ) - var(--prosomo_container) ) / 2 ) - var(--prosomo_padding) ) !important;
    }

    body.mac.scrollbars-visible .boxed_right_no_padding {
        padding-right: calc( ( ( ( 100vw - var(--prosomo_scroll-bar-width-mac) ) - var(--prosomo_container) ) / 2 ) ) !important;
    }
}

/* Accueil (Figma port): only what Elementor controls can't do, class-based selectors only. */

/* Cover behaviour: the image widget has no object-fit control. */
.cna-cover img,
.cna-tile img,
.cna-vie__img img,
.cna-etudes__img img,
.cna-post__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Pastille: icon widget so the SVG is inline and its <g> are targetable. */
/* Position comes from the widget's Offset controls (top 46.295% = grey band centre, right calc(100% - half size)); this only centres it on top. */
.cna-hero__badge {
    transform: translateY(-50%);
}

/* Badge fades out under the off-canvas (3 classes to beat Elementor's widget transition). */
.elementor .cna-hero .cna-hero__badge {
    transition: opacity 0.5s ease;
}

body:has(.cna-offcanvas .e-off-canvas[aria-hidden="false"]) .cna-hero .cna-hero__badge {
    opacity: 0;
}

/* Kill the icon line-height so the box matches the SVG and the centring holds. */
.cna-hero__badge .elementor-icon {
    display: block;
}

/* 23deg tilt. */
.cna-hero__badge .elementor-icon svg.pastille_locale {
    transform: rotate(23deg);
    overflow: visible;
}

/* .inner (turquoise ring) spins; .outer (dark disc + wordmark) stays put. */
.cna-hero__badge svg.pastille_locale .inner {
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: cna-pastille-spin 24s linear infinite;
    will-change: transform;
}

/* -46deg local = -23deg on screen (inherits the +23deg tilt); change both together. */
.cna-hero__badge svg.pastille_locale .outer {
    transform-box: view-box;
    transform-origin: 50% 50%;
    transform: rotate(-46deg);
}

@keyframes cna-pastille-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* No spin for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .cna-hero__badge svg.pastille_locale .inner { animation: none; }
}

/* Pastille zooms in (scale 0 to 1) once the photo and text have finished (Elementor: 1.25s + the button's 0.2s delay); on the icon wrapper, since the widget carries the translateY centring. */
@keyframes cna-badge-zoom { from { transform: scale(0); } to { transform: scale(1); } }
.cna-hero__badge .elementor-icon-wrapper { transform: scale(0); }
.cna-hero:has(.cna-cover.animated) .cna-hero__badge .elementor-icon-wrapper { animation: cna-badge-zoom 0.6s ease-out 1.45s both; }
@media (prefers-reduced-motion: reduce) { .cna-hero .cna-hero__badge .elementor-icon-wrapper { transform: none; animation: none; } }
/* Reusable pastille outside the hero (offsets from widget controls): same centring, tilt and spinning ring, no hero zoom. */
.cna-pastille { transform: translateY(-50%); }
.cna-pastille .elementor-icon { display: block; }
.cna-pastille .elementor-icon svg.pastille_locale { transform: rotate(23deg); overflow: visible; }
.cna-pastille svg.pastille_locale .inner { transform-box: view-box; transform-origin: 50% 50%; animation: cna-pastille-spin 24s linear infinite; will-change: transform; }
.cna-pastille svg.pastille_locale .outer { transform-box: view-box; transform-origin: 50% 50%; transform: rotate(-46deg); }
@media (prefers-reduced-motion: reduce) { .cna-pastille svg.pastille_locale .inner { animation: none; } }

/* Hero slideshow: the image carousel has no height or object-fit control, so the photo heights live here. */
.elementor .cna-hero__slides .swiper-slide-image { width: 100%; height: 918px; object-fit: cover; display: block; }
@media (max-width: 1799px) { .elementor .cna-hero__slides .swiper-slide-image { height: 600px; } }
@media (max-width: 1399px) { .elementor .cna-hero__slides .swiper-slide-image { height: 500px; } }
@media (max-width: 1023px) { .elementor .cna-hero__slides .swiper-slide-image { height: 389px; } }
@media (max-width: 767px) { .elementor .cna-hero__slides .swiper-slide-image { height: 294px; } }
@media (max-width: 424px) { .elementor .cna-hero__slides .swiper-slide-image { height: 235px; } }
/* Hero radius on the carousel frame, so the curve stays put while the photos slide under it. */
.elementor .cna-hero__slides .elementor-image-carousel-wrapper { border-radius: 0 0 0 200px; }
@media (max-width: 1799px) { .elementor .cna-hero__slides .elementor-image-carousel-wrapper { border-radius: 0 0 0 131px; } }
@media (max-width: 1399px) { .elementor .cna-hero__slides .elementor-image-carousel-wrapper { border-radius: 0 0 0 75px; } }
/* Hero dots 25px above the photo bottom (Elementor pins them at 5px; no control). */
.elementor .cna-hero__slides .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal,
.elementor .cna-srvprod__slides .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal,
.elementor .cna-piusine__slides .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal,
.elementor .cna-piprox__slides .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal,
.elementor .cna-pifab__slides .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal,
.elementor .cna-picat__slides .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal { bottom: 25px; }
/* Section photo slideshows: slide heights (no carousel height control) and the photo shadow outside the rounded clip. */
.elementor .cna-srvprod__slides .swiper-slide-image,
.elementor .cna-piusine__slides .swiper-slide-image { width: 100%; height: 763px; object-fit: cover; display: block; }
@media (max-width: 1799px) { .elementor .cna-srvprod__slides .swiper-slide-image, .elementor .cna-piusine__slides .swiper-slide-image { height: 560px; } }
@media (max-width: 1399px) { .elementor .cna-srvprod__slides .swiper-slide-image, .elementor .cna-piusine__slides .swiper-slide-image { height: 460px; } }
@media (max-width: 1023px) { .elementor .cna-srvprod__slides .swiper-slide-image, .elementor .cna-piusine__slides .swiper-slide-image { height: 420px; } }
@media (max-width: 767px) { .elementor .cna-srvprod__slides .swiper-slide-image, .elementor .cna-piusine__slides .swiper-slide-image { height: 340px; } }
@media (max-width: 424px) { .elementor .cna-srvprod__slides .swiper-slide-image, .elementor .cna-piusine__slides .swiper-slide-image { height: 260px; } }
.elementor .cna-piprox__slides .swiper-slide-image { width: 100%; height: 618px; object-fit: cover; display: block; }
@media (max-width: 1799px) { .elementor .cna-piprox__slides .swiper-slide-image { height: 480px; } }
@media (max-width: 1399px) { .elementor .cna-piprox__slides .swiper-slide-image { height: 420px; } }
@media (max-width: 767px) { .elementor .cna-piprox__slides .swiper-slide-image { height: 340px; } }
@media (max-width: 424px) { .elementor .cna-piprox__slides .swiper-slide-image { height: 260px; } }
.elementor .cna-pifab__slides .swiper-slide-image { width: 100%; height: 685px; object-fit: cover; display: block; }
@media (max-width: 1799px) { .elementor .cna-pifab__slides .swiper-slide-image { height: 470px; } }
@media (max-width: 1399px) { .elementor .cna-pifab__slides .swiper-slide-image { height: 400px; } }
@media (max-width: 1023px) { .elementor .cna-pifab__slides .swiper-slide-image { height: 380px; } }
@media (max-width: 767px) { .elementor .cna-pifab__slides .swiper-slide-image { height: 340px; } }
@media (max-width: 424px) { .elementor .cna-pifab__slides .swiper-slide-image { height: 240px; } }
.elementor .cna-picat__slides .swiper-slide-image { width: 100%; height: 644px; object-fit: cover; display: block; }
@media (max-width: 1799px) { .elementor .cna-picat__slides .swiper-slide-image { height: 480px; } }
@media (max-width: 1399px) { .elementor .cna-picat__slides .swiper-slide-image { height: 420px; } }
@media (max-width: 767px) { .elementor .cna-picat__slides .swiper-slide-image { height: 320px; } }
@media (max-width: 424px) { .elementor .cna-picat__slides .swiper-slide-image { height: 250px; } }
.elementor .cna-srvprod__slides,
.elementor .cna-piusine__slides,
.elementor .cna-piprox__slides,
.elementor .cna-pifab__slides,
.elementor .cna-picat__slides { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.16)); }

/* Header overlays the hero */
.cna-header {
    top: 0;
    left: 0;
    right: 0;
}

/* WPML switcher has no typography controls: shared style for the header and panel pills. */
.cna-lang-switcher .wpml-ls,
.cna-lang-switcher .wpml-ls ul,
.cna-lang-switcher .wpml-ls li,
.cna-lang-switcher .wpml-ls a {
    font-family: "Urbanist", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    list-style: none;
    display: block;
}

.cna-lang .cna-lang-switcher .wpml-ls li a,
.cna-lang .cna-lang-switcher .wpml-ls li a:link,
.cna-lang .cna-lang-switcher .wpml-ls li a:visited {
    color: #FFFFFF;
}

/* Hover/focus: white fill, dark label, on the whole pill. */
.cna-lang {
    transition: background-color 0.2s ease;
}

.cna-lang:hover,
.cna-lang:focus-within {
    background-color: #FFFFFF;
}

.cna-lang .cna-lang-switcher .wpml-ls li a {
    transition: color 0.2s ease;
}

.cna-lang:hover .cna-lang-switcher .wpml-ls li a,
.cna-lang:focus-within .cna-lang-switcher .wpml-ls li a {
    color: #454A4A;
}

/* Header pill label only; fill, border, shadow and hover are on container e2a4081. */
.cna-header__lang.cna-lang .cna-lang-switcher .wpml-ls li a,
.cna-header__lang.cna-lang .cna-lang-switcher .wpml-ls li a:link,
.cna-header__lang.cna-lang .cna-lang-switcher .wpml-ls li a:visited {
    color: #009EA1;
}
.cna-header__lang.cna-lang:hover .cna-lang-switcher .wpml-ls li a,
.cna-header__lang.cna-lang:focus-within .cna-lang-switcher .wpml-ls li a {
    color: #FFFFFF;
}
.elementor .cna-header__actions .cna-header__lang:focus-within {
    background-color: #009EA1;
    border-color: #009EA1;
}

/* Flex wrapper drops the icon's line box so the pill centres on the hamburger disc. */
.cna-header__burger .elementor-icon-wrapper {
    display: flex;
}

/* Stretch the link across the pill. */
.cna-lang-switcher,
.cna-lang-switcher .elementor-widget-container,
.cna-lang-switcher .wpml-elementor-ls {
    width: 100%;
}
.cna-lang-switcher .wpml-ls a {
    line-height: 36px;
    text-align: center;
}
/* No translation for this page: WPML renders an empty switcher, so the pill (header and off-canvas) goes too. */
.elementor .e-con.cna-lang:not(:has(.wpml-ls-item)) { display: none; }

/* Role card line: 159px even when the text column is narrower (beats Elementor's widget max-width: 100%). */
.elementor .e-con.cna-role-card__text > .cna-role-card__line.elementor-widget { max-width: none; }

/* Role card hover (whole card is the link): arrow slides right, photo zooms. */
.cna-role-card .cna-role-card__arrow img,
.cna-role-card .cna-role-card__img img { transition: transform 0.3s ease; }
/* Photo grows slightly from its bottom edge, so the cut-out top rises. */
.cna-role-card .cna-role-card__img img { transform-origin: 50% 100%; }
.cna-role-card:hover .cna-role-card__img img,
.cna-role-card:focus-visible .cna-role-card__img img { transform: scale(1.04); }
.cna-role-card:hover .cna-role-card__arrow img,
.cna-role-card:focus-visible .cna-role-card__arrow img { transform: translateX(10px); }
@media (prefers-reduced-motion: reduce) { .cna-role-card:hover .cna-role-card__arrow img, .cna-role-card:focus-visible .cna-role-card__arrow img, .cna-role-card:hover .cna-role-card__img img, .cna-role-card:focus-visible .cna-role-card__img img { transform: none; } }

/* Études preview cards (Accueil, Services): the whole card is the link; the arrow slides like the role cards. */
.cna-cases-mini .cna-case .cna-case__arrow img { transition: transform 0.3s ease; }
.cna-cases-mini .cna-case:hover .cna-case__arrow img, .cna-cases-mini .cna-case:focus-visible .cna-case__arrow img { transform: translateX(10px); }
@media (prefers-reduced-motion: reduce) { .cna-cases-mini .cna-case:hover .cna-case__arrow img, .cna-cases-mini .cna-case:focus-visible .cna-case__arrow img { transform: none; } }

/* Blog cards (Blogue, Accueil; the whole card is the link): same hover as the role cards; the photo zooms inside its frame (the photo widget, clipped with the photo's radius). */
.cna-post--archive .cna-post__img { overflow: hidden; border-radius: 0 41px 0 0; }
.cna-post--archive .cna-post__img img, .cna-post--archive .cna-post__arrow img { transition: transform 0.3s ease; }
.cna-post--archive:hover .cna-post__img img, .cna-post--archive:focus-within .cna-post__img img { transform: scale(1.04); }
.cna-post--archive:hover .cna-post__arrow img, .cna-post--archive:focus-within .cna-post__arrow img { transform: translateX(10px); }
@media (prefers-reduced-motion: reduce) { .cna-post--archive:hover .cna-post__img img, .cna-post--archive:focus-within .cna-post__img img, .cna-post--archive:hover .cna-post__arrow img, .cna-post--archive:focus-within .cna-post__arrow img { transform: none; } }

/* Vie list bullets: keep the 93x52 white-circle arrow's ratio (Elementor squares icon-list SVGs). */
.elementor .cna-vie__list .elementor-icon-list-icon svg { height: auto; }
/* Vie list text starts at the top like the icon (Elementor centres it), so one- and two-line items align alike. */
.elementor .cna-vie__list .elementor-icon-list-text { align-self: flex-start; }

/* Outline buttons + newsletter submit: the arrow turns white with the label on hover (its stroke is an inline style, hence !important). */
.cna-btn--outline .elementor-button svg path,
.cna-news__form .elementor-button svg path { transition: stroke 0.3s ease; }
.cna-btn--outline .elementor-button:hover svg path,
.cna-btn--outline .elementor-button:focus-visible svg path,
.cna-news__form .elementor-button:hover svg path,
.cna-news__form .elementor-button:focus-visible svg path { stroke: #FFFFFF !important; }
/* Newsletter submit: tablet padding like the other buttons (the form's button padding control isn't responsive). */
@media (max-width: 1023px) { .elementor .cna-news__form.elementor-element .elementor-button.elementor-button, .elementor .cna-apply.elementor-element .elementor-button.elementor-button { padding: 8px 12px; } }

/* White outline buttons (any page): the arrow follows the turquoise label on hover, otherwise it vanishes on the white fill. */
.cna-btn--outline-white .elementor-button svg path,
.cna-apply .elementor-button svg path { transition: stroke 0.3s ease; }
.cna-btn--outline-white .elementor-button:hover svg path,
.cna-btn--outline-white .elementor-button:focus-visible svg path,
.cna-apply .elementor-button:hover svg path,
.cna-apply .elementor-button:focus-visible svg path { stroke: #009EA1 !important; }
/* Solid teal button: white arrow, turquoise on hover (label turns teal on white). */
.cna-btn--solid .elementor-button svg path { transition: stroke 0.3s ease; }
.cna-btn--solid .elementor-button:hover svg path, .cna-btn--solid .elementor-button:focus-visible svg path { stroke: #009EA1 !important; }

/* Project mosaic: tile heights from the design. */
.cna-tile--401 img { height: 401px; }
.cna-tile--365 img { height: 365px; }
.cna-tile--521 img { height: 521px; }
.cna-tile--245 img { height: 245px; }
.cna-tile--332 img { height: 332px; }
.cna-tile--434 img { height: 434px; }
/* 1024-1399: each tile column matches the teal panel's height (391.3 = 2 tiles + 9 gap). */
@media (max-width: 1399px) {
    .cna-tile--401 img { height: 200.1px; }
    .cna-tile--365 img { height: 182.2px; }
    .cna-tile--521 img { height: 260px; }
    .cna-tile--245 img { height: 122.3px; }
    .cna-tile--332 img { height: 165.7px; }
    .cna-tile--434 img { height: 216.6px; }
}

.cna-vie__img--a img { height: 726px; }
.cna-vie__img--b img { height: 694px; }
.cna-etudes__img img  { height: 754px; }
.cna-post__img img    { height: 263px; }

/* Projets panel: a ::before carries its teal to the screen's left edge, 1px under the panel (body clips the overflow). */
.elementor .e-con.cna-projets__panel::before { content: ""; display: block; position: absolute; top: 0; bottom: 0; height: auto; left: auto; inset-inline-start: auto; right: calc(100% - 1px); width: 100vw; background-color: inherit; border: 0; border-radius: 0; opacity: 1; mix-blend-mode: normal; }
/* Études panel: an ::after carries its grey to the screen's right edge, 1px under the panel (the section clips the overflow). */
.elementor .e-con.cna-etudes__panel::after { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: calc(100% - 1px); width: 100vw; background-color: inherit; }
/* À propos Découvrez panel: starts at the container edge, an ::after carries its grey to the screen's right edge (the section clips the overflow). */
.elementor .e-con.cna-decouvrez__panel::after { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: calc(100% - 1px); width: 100vw; background-color: inherit; }
/* Grey bands aligned to the container on their rounded side: the pseudo carries the grey to the screen edge on the square side (body clips the overflow). */
.elementor .e-con.cna-band--bleed-left::before { content: ""; display: block; position: absolute; top: 0; bottom: 0; height: auto; left: auto; inset-inline-start: auto; right: calc(100% - 1px); width: 100vw; background-color: inherit; border: 0; border-radius: 0; opacity: 1; mix-blend-mode: normal; }
.elementor .e-con.cna-band--bleed-right::after { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: calc(100% - 1px); width: 100vw; background-color: inherit; }
/* Their sections clip only horizontally, so photos that poke above a band stay visible. */
.elementor .e-con.cna-band-clip { overflow-x: clip; }
/* Footer CTA: an ::after carries its teal to the screen's right edge (the footer clips the overflow). */
.elementor .e-con.cna-footer__cta::after { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: calc(100% - 1px); width: 100vw; background-color: inherit; }
/* Footer and off-canvas menu socials: 30x44 invisible tap zone per icon, centred (icons are 30px apart, so zones never overlap). */
/* Footer language switcher: no WPML padding, line height from the widget, like the links above it. */
.footer_wpml_lang_selector .wpml-ls { padding: 0; border: 0; }
.footer_wpml_lang_selector .wpml-ls .wpml-ls-link span { vertical-align: baseline; }
.footer_wpml_lang_selector .wpml-ls .wpml-ls-link { padding: 0; line-height: inherit; transition: color 0.3s; }
/* Footer below 638 (menu columns stacked): titles and links centred (user, 2026-10-02); no Elementor breakpoint at 638. */
@media (max-width: 637px) { .elementor .e-con.cna-footer__col { width: 100%; } .cna-footer__col .cna-footer__col-title .elementor-heading-title { text-align: center; } .cna-footer__links .elementor-icon-list-item, .cna-footer__links .elementor-icon-list-item > a { justify-content: center; text-align: center; } .footer_wpml_lang_selector .wpml-ls { text-align: center; } }
.cna-footer__social-icon a, .cna-ocm__social-icon a { position: relative; }
.cna-footer__social-icon a::after, .cna-ocm__social-icon a::after { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 44px; transform: translate(-50%, -50%); }

/* Clients logos: continuous right-to-left marquee; the track holds two identical halves, so -50% loops seamlessly. */
@keyframes cna-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cna-clients__track { animation: cna-marquee 60s linear infinite; will-change: transform; }
/* Pause on hover (and while a logo link has keyboard focus). */
.cna-clients__row:hover .cna-clients__track,
.cna-clients__row:focus-within .cna-clients__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .cna-clients__track { animation: none; } }
/* Logos from the ACF gallery (Basic Gallery widget): one nowrap row, 80px apart, each logo 72px high and at most 260px wide. */
.elementor .cna-clients__gal .gallery { display: flex; flex-wrap: nowrap; align-items: center; gap: 80px; margin: 0; }
.elementor .cna-clients__gal .gallery-item { flex: none; width: auto; max-width: none; margin: 0; padding: 0; }
.elementor .cna-clients__gal .gallery-icon { padding: 0; }
.elementor .cna-clients__gal .gallery-item img { display: block; width: auto; height: 72px; max-width: 260px; object-fit: contain; }
/* Services pages (Figma): smaller logos, 74px apart; the track's gap and end padding are 74 on those pages. */
.elementor .cna-clients__gal--sm .gallery { gap: 74px; }
.elementor .cna-clients__gal--sm .gallery-item img { height: 60px; max-width: 240px; }
/* Smaller logos below 1400, 1024 and 768 (user); the track gap and end padding match these gaps in each page. */
@media (max-width: 1399px) { .elementor .cna-clients__gal .gallery { gap: 68px; } .elementor .cna-clients__gal .gallery-item img { height: 60px; max-width: 220px; } .elementor .cna-clients__gal--sm .gallery { gap: 62px; } .elementor .cna-clients__gal--sm .gallery-item img { height: 50px; max-width: 200px; } }
@media (max-width: 1023px) { .elementor .cna-clients__gal .gallery { gap: 56px; } .elementor .cna-clients__gal .gallery-item img { height: 50px; max-width: 180px; } .elementor .cna-clients__gal--sm .gallery { gap: 52px; } .elementor .cna-clients__gal--sm .gallery-item img { height: 42px; max-width: 170px; } }
@media (max-width: 767px) { .elementor .cna-clients__gal .gallery { gap: 44px; } .elementor .cna-clients__gal .gallery-item img { height: 40px; max-width: 150px; } .elementor .cna-clients__gal--sm .gallery { gap: 42px; } .elementor .cna-clients__gal--sm .gallery-item img { height: 34px; max-width: 140px; } }

/* Blog post body: the Post Content widget has no controls for its inner headings and paragraph spacing. */
.cna-single__content p { margin: 0 0 16px; }
.cna-single__content h2 { margin: 32px 0 20px; font-family: "Urbanist", sans-serif; font-size: 40px; line-height: 50px; font-weight: 500; color: #454A4A; }
.cna-single__content > .elementor-widget-container > :first-child, .cna-single__content > :first-child { margin-top: 0; }
@media (max-width: 1023px) { .cna-single__content h2 { font-size: 30px; line-height: 38px; margin: 28px 0 16px; } }
@media (max-width: 424px) { .cna-single__content h2 { font-size: 24px; line-height: 30px; } }

/* Keeps a word with hyphens (the brand name) on one line inside a heading. */
.cna-nowrap { white-space: nowrap; }
/* Blog filter: radio-style circle before each term (the filter widget has no icon control); filled when active. */
.cna-blog__filter-items .e-filter-item::before { content: ""; display: inline-block; box-sizing: border-box; width: 15px; height: 15px; margin-right: 20px; border: 2px solid #FFFFFF; border-radius: 50%; vertical-align: -2px; transition: background-color 0.2s ease; }
.cna-blog__filter-items .e-filter-item[aria-pressed="true"]::before { background-color: #FFFFFF; }

/* Actus: the teal band stops 43.7% into the last card (Figma: 1626 of 1920), tied to the container; a boxed container ignores its width control, hence the ::before. */
.elementor .e-con.cna-actus { isolation: isolate; }
.elementor .e-con.cna-actus::before { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; height: auto; width: calc((100% + var(--prosomo_container)) / 2 - (var(--prosomo_container) - 120px) * 0.1456); background-color: #009EA1; border: 0; border-radius: 0 200px 200px 0; opacity: 1; mix-blend-mode: normal; z-index: -1; }
/* 1400+: the band ends in a half circle (user, 2026-10-02). */
@media (min-width: 1400px) { .elementor .e-con.cna-actus::before { border-radius: 0 100vw 100vw 0; } }
/* 1024-1399: 2 columns, the odd last card centred (no grid control for it); the band keeps its 43.7% overhang on the right card. */
@media (min-width: 1024px) and (max-width: 1399px) {
    .cna-actus__loop .e-loop-item:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 60px) / 2); }
    .elementor .e-con.cna-actus::before { width: calc((100% + var(--prosomo_container)) / 2 - (var(--prosomo_container) - 60px) * 0.2185); }
}
@media (max-width: 1023px) { .elementor .e-con.cna-actus::before { width: 100%; border-radius: 0; } }

/* Testimonials 1024+: author block holds 3 lines, so the growing cards stay equal whatever the author length (user, 2026-10-02). */
@media (min-width: 1024px) { .cna-temo__col > .cna-temo__author { min-height: 63px; } }
/* Testimonials: the card ends in a point toward its author (user, 2026-10-02); drop-shadow on the card so the point shares its shadow. */
.elementor .e-con.cna-temo__card { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.16)); --cna-tail-w: 56px; --cna-tail-h: 30px; }
.elementor .e-con.cna-temo__card::after { content: ""; position: absolute; left: 50%; top: calc(100% - 1px); width: var(--cna-tail-w); height: var(--cna-tail-h); transform: translateX(-50%); background: #FFFFFF; clip-path: polygon(0 0, 100% 0, 50% 100%); }
@media (max-width: 1799px) { .elementor .e-con.cna-temo__card { --cna-tail-w: 50px; --cna-tail-h: 27px; } }
@media (max-width: 1399px) { .elementor .e-con.cna-temo__card { --cna-tail-w: 44px; --cna-tail-h: 24px; } }
@media (max-width: 767px) { .elementor .e-con.cna-temo__card { --cna-tail-w: 40px; --cna-tail-h: 22px; } }
@media (max-width: 424px) { .elementor .e-con.cna-temo__card { --cna-tail-w: 36px; --cna-tail-h: 20px; } }

/* Newsletter (Figma): photo contained in a 678x554 box, set right like the design; the form has one row-gap control, so the consent (18px) and button (34px) spacings are set here. */
.cna-news__person img { width: 100%; height: auto; aspect-ratio: 678 / 554; object-fit: contain; object-position: 70% 100%; display: block; }
/* Below 1800 the photo keeps its natural portrait ratio (no empty band beside the person), so the form gets the width. */
@media (max-width: 1799px) { .cna-news__person img { aspect-ratio: auto; object-fit: fill; } }
.elementor .cna-news__form .elementor-field-textual { padding-inline: 32px; }
.cna-news__form .elementor-field-type-acceptance { margin-top: -25px; justify-content: center; }
.cna-news__form .elementor-field-type-acceptance .elementor-field-subgroup { justify-content: center; }
.cna-news__form .elementor-field-type-acceptance .elementor-field-option { display: flex; align-items: flex-start; justify-content: center; line-height: 17px; }
.elementor .cna-news__form .elementor-field-type-acceptance .elementor-field-option label { font-size: 14px; line-height: 17px; font-weight: 400; }
.cna-news__form .elementor-field-type-submit { margin-top: -9px; }
/* Form rows below 1024: Rows Gap is not responsive. */
@media (max-width: 1023px) {
  .elementor .cna-news__form.elementor-element.elementor-widget-form .elementor-field-group { margin-bottom: 22px; }
  .elementor .cna-news__form.elementor-element.elementor-widget-form .elementor-form-fields-wrapper { margin-bottom: -22px; }
  .elementor .cna-news__form.elementor-element.elementor-widget-form .elementor-field-type-acceptance { margin-top: -10px; }
  .elementor .cna-news__form.elementor-element.elementor-widget-form .elementor-field-type-submit { margin-top: 0; }
}
/* Consent box drawn as the design's 15px ring, filled when checked. */
.cna-news__form .elementor-field-type-acceptance input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 15px; height: 15px; margin: 1px 8px 0 0; border: 2px solid #009EA1; border-radius: 50%; background: transparent; cursor: pointer; }
/* Checked fill: the long selector beats the form's field background control, which also hits the checkbox. */
.elementor .cna-news__form.elementor-element .elementor-field-group.elementor-field-type-acceptance input[type="checkbox"].elementor-field:checked { background: #009EA1; box-shadow: inset 0 0 0 2px #ECEDED; }
.cna-news__form .elementor-field-type-acceptance a { color: #009EA1; text-decoration: underline; text-underline-offset: 2px; }
.cna-news__form .elementor-field-type-acceptance a:hover, .cna-news__form .elementor-field-type-acceptance a:focus-visible { color: #454A4A; }

/* Post accent bars keep their height in a flex row (case bars: widget Align Self control). */
.cna-post__bar { align-self: flex-start; }

@media (max-width: 1023px) {
    .cna-tile img,
    .cna-vie__img img,
    .cna-etudes__img img,
    .cna-post__img img { height: auto; }

    .cna-hero__media { border-radius: 0 !important; }
    .cna-news__panel { margin-left: 0 !important; margin-bottom: 0 !important; }
    .cna-actus { border-radius: 0 !important; }
}

/* 768-1023: grid stacks under the panel, so the mosaic keeps the desktop ratios at 60%. */
@media (min-width: 768px) and (max-width: 1023px) {
    .cna-tile--401 img { height: 241px; }
    .cna-tile--365 img { height: 219px; }
    .cna-tile--521 img { height: 313px; }
    .cna-tile--245 img { height: 147px; }
    .cna-tile--332 img { height: 199px; }
    .cna-tile--434 img { height: 261px; }
}
/* 425-767: same mosaic at 45% (phones below 425 stack the photos full width). */
@media (min-width: 425px) and (max-width: 767px) {
    .cna-tile--401 img { height: 180px; }
    .cna-tile--365 img { height: 164px; }
    .cna-tile--521 img { height: 234px; }
    .cna-tile--245 img { height: 110px; }
    .cna-tile--332 img { height: 149px; }
    .cna-tile--434 img { height: 195px; }
}

/* Accueil project mosaic: each photo links to its réalisation (scripts.js draws them at random); block link, no gap under the photo; 4:3 on phones below 425. */
.cna-projets__grid .cna-tile a { display: block; }
/* Hover: translucent teal over the photo, like the Réalisations cards (multiply, 0.3s), no text. */
.cna-projets__grid .cna-tile a { position: relative; isolation: isolate; }
.cna-projets__grid .cna-tile a::after { content: ""; position: absolute; inset: 0; border-radius: 15px; background-color: #009EA1; mix-blend-mode: multiply; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.cna-projets__grid .cna-tile a:hover::after, .cna-projets__grid .cna-tile a:focus-visible::after { opacity: 1; }
@media (max-width: 767px) { .cna-projets__grid .cna-tile a::after { border-radius: 7.5px; } }
@media (max-width: 424px) { .cna-projets__grid .cna-tile img { aspect-ratio: 4 / 3; } }

/* Vie photos below 768: side by side, 3:4 portrait (user, 2026-10-02); the image widget has no ratio control. */
@media (max-width: 767px) { .cna-vie__img img { aspect-ratio: 3 / 4; } }

/* No manual gutter: container_width already steps down per breakpoint. */

/* Hero: full-bleed section, text column uses .boxed_left; hand its 15px back to the widgets. */
/* Same range as .boxed_left (>=768). */
@media only screen and (min-width: 768px) {
    .cna-hero__text.boxed_left > .elementor-element,
    .cna-single-hero__text.boxed_left > .elementor-element {
        padding-left: var(--prosomo_padding);
    }
}
/* Blog post hero below 1400: the text column is stacked at the content width, so drop the boxed_left offset and its 15px hand-back. */
@media (max-width: 1399px) {
    body .elementor .cna-single-hero__text.boxed_left.boxed_left { padding-left: 0 !important; }
    .cna-single-hero__text.boxed_left > .elementor-element { padding-left: 0; }
}

/* 1800-1918 dead zone (no Elementor breakpoint): container 1710, so hero type/photo/padding are set here. */
@media only screen and (min-width: 1800px) and (max-width: 1918px) {
    /* Hero titles at 56px in this band (user); (0,4,1) beats Elementor's heading rule (0,4,0). */
    .cna-hero .cna-hero__text .cna-hero__title h1.elementor-heading-title {
        font-size: 56px;
        line-height: 1.2em;
    }
    .elementor .elementor-element.cna-page__h1 h1.elementor-heading-title,
    .elementor .elementor-element.cna-blog__h1 h1.elementor-heading-title,
    .elementor .elementor-element.cna-single-hero__title h1.elementor-heading-title {
        font-size: 56px;
    }

    /* Fixed photo height for this band. */
    .elementor .cna-hero__media > .cna-cover img {
        height: 635px;
    }

    /* Radius scaled to the height: 200 x 635/918 = 138, on the carousel frame. */
    .elementor .cna-hero__media > .cna-cover .elementor-image-carousel-wrapper,
    .elementor .cna-hero__media > .cna-cover.elementor-widget-image img {
        border-bottom-left-radius: 138px;
    }

    /* Trim the text column's vertical padding so it doesn't outgrow the 635 photo. */
    .elementor .cna-hero .cna-hero__text.e-con {
        padding-top: 150px;
        padding-bottom: 50px;
    }
}

/* Laptop 1400-1799: title size and padding are on the widgets' laptop controls. */
@media only screen and (min-width: 1400px) and (max-width: 1799px) {
    /* Pin the title width (450) so the 4-line wrap holds across the band. */
    .cna-hero .cna-hero__text .cna-hero__title.elementor-widget {
        max-width: 450px;
    }

}

/* Hero grey band: hard-stop gradient at 92.59% of the hero (850/918), full width. */
.cna-hero {
    background-image: linear-gradient(
        to bottom,
        #ECEDED 0,
        #ECEDED 92.59%,
        rgba(255, 255, 255, 0) 92.59%
    );
}

/* Off-canvas menu (Figma 1:435): only what the widget controls can't do. */

/* No shadow; cap the panel to the viewport. */
/* Panel height = --cna-panel-h + admin bar height. */
.elementor .cna-header .cna-offcanvas.elementor-widget-off-canvas {
    --cna-panel-h: 918px;
    --cna-bar-h: 0px;
}

/* Kept out of 768-1023 so the widget's Height control (Fit To Content) applies there. */
@media not all and (min-width: 768px) and (max-width: 1023px) {
    .elementor .cna-header .cna-offcanvas.elementor-widget-off-canvas {
        --e-off-canvas-height: calc(var(--cna-panel-h) + var(--cna-bar-h));
    }
}

/* 768-1023: keep the menu scrollable on short screens; grow the panel by the admin bar. */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .elementor .cna-header .cna-offcanvas.elementor-widget-off-canvas {
        --e-off-canvas-content-overflow: auto;
    }

    body.admin-bar .elementor .cna-header .cna-offcanvas.elementor-widget-off-canvas .e-off-canvas__content {
        padding-bottom: var(--wp-admin--admin-bar--height, 32px);
    }
}

.cna-offcanvas .e-off-canvas__content {
    box-shadow: none;
    max-width: 100%;
    /* 100% of the wrapper, which shrinks with the admin bar. */
    max-height: 100%;
}

/* Hide the hamburger while the panel is open. */
body:has(.cna-offcanvas .e-off-canvas[aria-hidden="false"]) .cna-header__burger {
    display: none;
}

/* Page scroll stays unlocked on purpose: locking it removes the scrollbar and shifts the layout. */
body.e-off-canvas__no-scroll,
body.e-off-canvas__no-scroll-animation {
    overflow: visible;
}

/* Linked headings: inherit the widget colour, hover dark. */
.cna-ocm__item .elementor-heading-title a,
.cna-ocm__phone .elementor-heading-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.cna-ocm__item .elementor-heading-title a:hover,
.cna-ocm__item .elementor-heading-title a:focus-visible {
    color: #454A4A;
}

/* Items with a sub-menu (scripts.js adds the classes and the toggle button): the triangle button opens or closes, pointing up while open; closed subs are hidden. */
/* Selectors carry .cna-offcanvas to beat the theme's pink button:hover / :focus. */
.cna-offcanvas .cna-ocm__toggle, .cna-offcanvas .cna-ocm__toggle:hover, .cna-offcanvas .cna-ocm__toggle:focus, .cna-offcanvas .cna-ocm__toggle:active { display: inline-block; margin: 0; padding: 0.3em; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; line-height: 1; vertical-align: middle; cursor: pointer; transition: color 0.2s ease; }
.cna-offcanvas .cna-ocm__toggle::before { content: ""; display: block; border-left: 0.17em solid transparent; border-right: 0.17em solid transparent; border-top: 0.2em solid currentColor; transition: transform 0.2s ease; }
.cna-offcanvas .cna-ocm__item--parent.is-open .cna-ocm__toggle::before { transform: rotate(180deg); }
.cna-offcanvas .cna-ocm__toggle:hover, .cna-offcanvas .cna-ocm__toggle:focus-visible { color: #454A4A; }
.cna-offcanvas .cna-ocm__toggle:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -2px; border-radius: 4px; }
.elementor .cna-header .cna-ocm__nav.is-ready > .cna-ocm__sub:not(.is-open) { display: none; }

/* Legible focus ring on the teal. */
.cna-offcanvas a:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 4px;
    border-radius: 2px;
}

/* Elementor ships no exit keyframes: without these the body stays unscrollable after closing. */
/* Written like slideInRight on purpose: Elementor plays exits in reverse. */
@keyframes slideOutRight {
    from { transform: translate3d(100%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

.slideOutRight {
    animation-name: slideOutRight;
}

/* Off-canvas width/radius per breakpoint (could move to the widget's responsive controls; until then these win). */

@media only screen and (max-width: 1399px) {

    .elementor .cna-header .cna-offcanvas.elementor-widget-off-canvas {
        --e-off-canvas-width: 860px;
    }

    .elementor .cna-header .cna-offcanvas.elementor-widget-off-canvas .e-off-canvas__content {
        border-bottom-left-radius: 100px;
    }

    /* Hide the logo while the panel is open (the panel edge cuts through it). */
    body:has(.cna-offcanvas .e-off-canvas[aria-hidden="false"]) .cna-header__logo {
        visibility: hidden;
    }
}

@media only screen and (max-width: 1023px) {

    .elementor .cna-header .cna-offcanvas.elementor-widget-off-canvas {
        --e-off-canvas-width: 660px;
    }

    .elementor .cna-header .cna-offcanvas.elementor-widget-off-canvas .e-off-canvas__content {
        border-bottom-left-radius: 80px;
    }
}

@media only screen and (max-width: 767px) {

    .elementor .cna-header .cna-offcanvas.elementor-widget-off-canvas {
        --e-off-canvas-width: 100%;
    }

    .elementor .cna-header .cna-offcanvas.elementor-widget-off-canvas .e-off-canvas__content {
        border-bottom-left-radius: 0;
    }
}

/* Panel height follows the hero photo in bands with no Elementor breakpoint. */

@media only screen and (min-width: 1800px) and (max-width: 1918px) {

    .elementor .cna-header .cna-offcanvas.elementor-widget-off-canvas {
        --cna-panel-h: 635px;
    }

    .elementor .cna-header .cna-ocm__item .elementor-heading-title {
        font-size: 36px;
        line-height: 36px;
    }

    .elementor .cna-header .cna-ocm__nav .cna-ocm__item {
        margin-top: 14px;
    }

    .elementor .cna-header .cna-ocm__nav .cna-ocm__item:first-child {
        margin-top: 0;
    }

    .elementor .cna-header .cna-ocm__nav .cna-ocm__sub {
        margin-top: 13px;
        margin-bottom: 3px;
    }

    /* Match Elementor's list typography targets (text span, link, icon size, icon spacing). */
    .elementor .cna-header .cna-ocm__sublist .elementor-icon-list-item > .elementor-icon-list-text,
    .elementor .cna-header .cna-ocm__sublist .elementor-icon-list-item > a {
        font-size: 22px;
        line-height: 28px;
    }

    .elementor .cna-header .cna-ocm__sublist {
        --e-icon-list-icon-size: 18px;
    }

    .elementor .cna-header .cna-ocm__sublist .elementor-icon-list-icon {
        padding-inline-end: 11px;
    }
}

/* 1024-1799: panel height 600. */
@media only screen and (min-width: 1024px) and (max-width: 1799px) {

    .elementor .cna-header .cna-offcanvas.elementor-widget-off-canvas {
        --cna-panel-h: 600px;
    }
}

@media only screen and (max-width: 1023px) {

    .elementor .cna-header .cna-offcanvas.elementor-widget-off-canvas {
        --cna-panel-h: 100vh;
    }

    /* Full-viewport panel already covers the admin bar. */
    body.admin-bar .elementor .cna-header .cna-offcanvas.elementor-widget-off-canvas {
        --cna-bar-h: 0px;
    }
}

/* WP admin bar: move the header under it; panel height and menu offset follow --wp-admin--admin-bar--height. */

body.admin-bar .cna-header.cna-section {
    top: var(--wp-admin--admin-bar--height, 32px);
}

/* Lift the header above the admin bar while the panel is open. */
body:has(.cna-offcanvas .e-off-canvas[aria-hidden="false"]) .cna-header.cna-section {
    z-index: 100000;
}

body.admin-bar .elementor .cna-header .cna-offcanvas.elementor-widget-off-canvas {
    --cna-bar-h: var(--wp-admin--admin-bar--height, 32px);
}

/* Offset with top, not padding, so the close button moves with the menu. */
body.admin-bar .elementor .cna-header .cna-ocm {
    top: var(--wp-admin--admin-bar--height, 32px);
}

/* Hamburger/close hover swaps colours; !important beats the SVGs' inline fill. */

.cna-header__burger svg path,
.cna-header__burger svg line,
.cna-ocm__close svg path {
    transition: fill 0.25s ease, stroke 0.25s ease;
}

.cna-header__burger a:hover svg path,
.cna-header__burger a:focus-visible svg path {
    fill: #FFFFFF !important;
}

.cna-header__burger a:hover svg line,
.cna-header__burger a:focus-visible svg line {
    stroke: #009EA1 !important;
}

.cna-ocm__close a:hover svg path:first-of-type,
.cna-ocm__close a:focus-visible svg path:first-of-type {
    fill: #009EA1 !important;
}

.cna-ocm__close a:hover svg path:last-of-type,
.cna-ocm__close a:focus-visible svg path:last-of-type {
    stroke: #FFFFFF !important;
}

/* Round focus rings: dark on the hamburger, white on the close. */
.cna-header__burger a:focus-visible {
    outline: 2px solid #454A4A;
    outline-offset: 3px;
    border-radius: 50%;
}

.cna-ocm__close a:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
    border-radius: 50%;
}

/* Fade the backdrop with the panel. */
.elementor .cna-header .cna-offcanvas .e-off-canvas__overlay {
    transition: opacity var(--e-off-canvas-animation-duration, 0.5s) ease;
}

.elementor .cna-header .cna-offcanvas .e-off-canvas[aria-hidden="true"] .e-off-canvas__overlay {
    opacity: 0;
}

/* Panel width = hero photo width (56%) from 1400 up. */

@media only screen and (min-width: 1400px) {

    .elementor .cna-header .cna-offcanvas.elementor-widget-off-canvas {
        --e-off-canvas-width: 56%;
    }
}

/* Équipe page: loop card photos keep their Figma ratio (no image ratio control) */
.elementor .cna-dir-card__img img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.elementor .cna-team-card__img img { width: 100%; height: auto; aspect-ratio: 798 / 493; object-fit: cover; display: block; }

/* Reusable rich text (Text Editor + class cna-prose): policies, legal pages */
.elementor .cna-prose { font-family: "Urbanist", sans-serif; font-size: 18px; font-weight: 500; line-height: 21px; color: #454A4A; }
.elementor .cna-prose > :first-child { margin-top: 0; }
.elementor .cna-prose > :last-child { margin-bottom: 0; }
.elementor .cna-prose p { margin: 0 0 14px; max-width: 1606px; }
.elementor .cna-prose h2 { font-family: inherit; font-size: 40px; font-weight: 500; line-height: 50px; color: inherit; margin: 50px 0 12px; }
.elementor .cna-prose h3 { font-family: inherit; font-size: inherit; font-weight: 700; line-height: inherit; color: inherit; margin: 24px 0 9px; }
.elementor .cna-prose h2 + h3 { margin-top: 0; }
.elementor .cna-prose strong { font-weight: 700; }
.elementor .cna-prose a { color: inherit; text-decoration: none; transition: color 0.3s; }
.elementor .cna-prose a:hover, .elementor .cna-prose a:focus { color: #009EA1; }
.elementor .cna-prose ul { list-style: none; margin: 0 0 14px; padding: 0; max-width: 1606px; }
.elementor .cna-prose li { position: relative; padding-left: 35px; }
.elementor .cna-prose li + li { margin-top: 8px; }
.elementor .cna-prose li:has(> p) + li { margin-top: 14px; }
.elementor .cna-prose li::before { content: ""; position: absolute; left: -1px; top: 0; width: 24px; height: 21px; background: url(/wp-content/uploads/2026/09/fleche-verte.svg) no-repeat left center / 24px auto; }
.elementor .cna-prose li p { margin: 9px 0 0; }

@media (max-width: 1799px) {
    .elementor .cna-prose h2 { font-size: 32px; line-height: 40px; margin-top: 44px; }
}
@media (max-width: 1399px) {
    .elementor .cna-prose h2 { font-size: 30px; line-height: 38px; margin-top: 40px; }
}
@media (max-width: 1023px) {
    .elementor .cna-prose h2 { font-size: 28px; line-height: 35px; margin-top: 36px; }
}
@media (max-width: 767px) {
    .elementor .cna-prose h2 { margin-top: 32px; }
    .elementor .cna-prose li { padding-left: 32px; }
}
@media (max-width: 424px) {
    .elementor .cna-prose { font-size: 16px; line-height: 19px; }
    .elementor .cna-prose h2 { font-size: 24px; line-height: 30px; margin-top: 28px; }
    .elementor .cna-prose li::before { width: 21px; height: 19px; background-size: 21px auto; }
    .elementor .cna-prose li { padding-left: 29px; }
}

/* cna-prose: first H2 right after the opening paragraph sits closer (Figma 38) */
.elementor .cna-prose > p:first-child + h2 { margin-top: 38px; }
@media (max-width: 1799px) { .elementor .cna-prose > p:first-child + h2 { margin-top: 34px; } }
@media (max-width: 1399px) { .elementor .cna-prose > p:first-child + h2 { margin-top: 30px; } }
@media (max-width: 1023px) { .elementor .cna-prose > p:first-child + h2 { margin-top: 28px; } }
@media (max-width: 767px) { .elementor .cna-prose > p:first-child + h2 { margin-top: 24px; } }
@media (max-width: 424px) { .elementor .cna-prose > p:first-child + h2 { margin-top: 22px; } }

/* Reusable long form (Pro Form + class cna-form): pill fields, circle choices, titles in HTML fields (cna-prose); field classes land on inputs, hence :has() */
.elementor .cna-form .elementor-field-group { align-content: flex-end; }
.elementor .cna-form.elementor-widget-form .elementor-field-group .elementor-field-textual { min-height: 56px; padding: 0 32px; }
.elementor .cna-form.elementor-widget-form .elementor-field-group textarea.elementor-field.elementor-field-textual:not(.elementor-select-wrapper) { height: 134px; padding: 17px 32px; border-radius: 28px; resize: vertical; }
.elementor .cna-form.elementor-widget-form .elementor-field-type-radio > .elementor-field-label,
.elementor .cna-form.elementor-widget-form .elementor-field-type-checkbox > .elementor-field-label { font-weight: 700; }
.elementor .cna-form .elementor-field-subgroup { display: flex; flex-wrap: wrap; gap: 0 29px; }
.elementor .cna-form .elementor-field-subgroup .elementor-field-option { display: flex; align-items: flex-start; margin: 0; padding: 0; }
.elementor .cna-form.elementor-widget-form .elementor-field-subgroup .elementor-field-option label { line-height: 1.3em; }
.elementor .cna-form.elementor-widget-form .elementor-field-group .elementor-field-option input[type="radio"],
.elementor .cna-form.elementor-widget-form .elementor-field-group .elementor-field-option input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 14px; height: 14px; margin: 4.7px 8px 0 0; border: 2px solid #009EA1; border-radius: 50%; background: transparent; cursor: pointer; }
.elementor .cna-form.elementor-widget-form .elementor-field-group .elementor-field-option input:checked { background: #009EA1; box-shadow: inset 0 0 0 2px #FFFFFF; }
.elementor .cna-form.elementor-widget-form .elementor-field-group .elementor-field-option input:focus-visible { outline: 2px solid #009EA1; outline-offset: 2px; }
.elementor .cna-form .elementor-field-type-acceptance a { color: inherit; text-decoration: underline; text-underline-offset: 2px; transition: color 0.3s; }
.elementor .cna-form .elementor-field-type-acceptance a:hover, .elementor .cna-form .elementor-field-type-acceptance a:focus-visible { color: #009EA1; }
.elementor .cna-form.elementor-widget-form .elementor-field-option input.cna-form__lead + label { font-size: 25px; }
.elementor .cna-form.elementor-widget-form .elementor-field-group .elementor-field-option input.cna-form__lead { margin-top: 9.25px; }
.elementor .cna-form.elementor-widget-form .elementor-field-group:has(> .cna-prose > h2) { margin-top: 30px; margin-bottom: 11px; }
.elementor .cna-form.elementor-widget-form .elementor-field-group:has(> .cna-form__btn) + .elementor-field-group:has(> .cna-prose > h2) { margin-top: 20px; }
.elementor .cna-form.elementor-widget-form .elementor-field-group:has(> .cna-prose > h3) { margin-bottom: 12px; }
.elementor .cna-form.elementor-widget-form .elementor-field-group:has(.cna-form__decl):has(+ .elementor-field-group .cna-form__decl) { margin-bottom: 0; }
.elementor .cna-form.elementor-widget-form .elementor-field-group:has(> .cna-form__note) { margin-top: 40px; margin-bottom: 37px; color: #6C6E70; line-height: 1.3em; }
.elementor .cna-form .cna-form__note p { margin: 0; }
/* Demande de don: fields start at the top of their row instead of stretching to the tallest one (user, 2026-10-02). */
.elementor .cna-don__form.elementor-widget-form .elementor-form-fields-wrapper { align-items: start; }
.elementor .cna-form .cna-form__note strong { font-weight: 900; }
.elementor .cna-form .cna-form__note a { color: inherit; }
.elementor .cna-form .cna-form__note a:hover, .elementor .cna-form .cna-form__note a:focus-visible { color: #009EA1; }
.elementor .cna-form .elementor-field-type-submit .elementor-button svg path { transition: stroke 0.3s ease; }
.elementor .cna-form .elementor-field-type-submit .elementor-button:hover svg path,
.elementor .cna-form .elementor-field-type-submit .elementor-button:focus-visible svg path { stroke: #FFFFFF !important; }
@media (max-width: 1023px) {
    .elementor .cna-form.elementor-element .elementor-button.elementor-button { padding: 8px 12px; }
    .elementor .cna-form.elementor-widget-form .elementor-field-group:has(> .cna-prose > h2) { margin-top: 20px; }
    .elementor .cna-form.elementor-widget-form .elementor-field-group:has(> .cna-form__btn) + .elementor-field-group:has(> .cna-prose > h2) { margin-top: 12px; }
    .elementor .cna-form.elementor-widget-form .elementor-field-option input.cna-form__lead + label { font-size: 22px; }
    .elementor .cna-form.elementor-widget-form .elementor-field-group .elementor-field-option input.cna-form__lead { margin-top: 7.3px; }
    .elementor .cna-form.elementor-widget-form .elementor-field-group:has(> .cna-form__note) { margin-top: 28px; margin-bottom: 30px; }
}
@media (max-width: 767px) {
    .elementor .cna-form.elementor-widget-form .elementor-field-group .elementor-field-textual { min-height: 50px; padding: 0 24px; }
    .elementor .cna-form.elementor-widget-form .elementor-field-group textarea.elementor-field.elementor-field-textual:not(.elementor-select-wrapper) { padding: 14px 24px; border-radius: 25px; }
    .elementor .cna-form .elementor-field-subgroup { gap: 0 20px; }
}
@media (max-width: 424px) {
    .elementor .cna-form.elementor-widget-form .elementor-field-group .elementor-field-option input[type="radio"],
    .elementor .cna-form.elementor-widget-form .elementor-field-group .elementor-field-option input[type="checkbox"] { margin-top: 3.4px; }
    .elementor .cna-form.elementor-widget-form .elementor-field-option input.cna-form__lead + label { font-size: 20px; }
    .elementor .cna-form.elementor-widget-form .elementor-field-group .elementor-field-option input.cna-form__lead { margin-top: 6px; }
}

/* Engagement axis cards: titles keep 3 lines while the 3 cards sit side by side (1024–1799), so the texts line up (no heading height control) */
@media (min-width: 1024px) and (max-width: 1799px) { .elementor .cna-engcard > .elementor-widget-heading:first-child .elementor-heading-title { min-height: 3lh; } }

/* Line break for desktop only: <br class="cna-br-desk"> is hidden below 1024 */
@media (max-width: 1023px) { .cna-br-desk { display: none; } }

/* ESG commitment cards: titles keep 2 lines while 3 cards sit side by side at 1024–1399, so the texts line up (no heading height control) */
@media (min-width: 1024px) and (max-width: 1399px) { .elementor .cna-esgcard > .elementor-widget-heading:first-child .elementor-heading-title { min-height: 2lh; } }

/* Promoteur anchor bar: below 1024 the links scroll sideways (bar overflow: auto); hide the scrollbar. */
.elementor .e-con.cna-subnav__bar { scrollbar-width: none; overscroll-behavior-x: contain; }
.elementor .e-con.cna-subnav__bar::-webkit-scrollbar { display: none; }
/* Anchor bar: the link of the section in view (set by scripts.js) is underlined in white. */
.elementor .cna-subnav__link .elementor-heading-title a { text-decoration: underline 2px transparent; text-underline-offset: 7px; transition: text-decoration-color .2s; }
.elementor .cna-subnav__link.is-active .elementor-heading-title a { text-decoration-color: currentColor; }
/* Links inside FAQ answers (Text Editor has no link colour control): same as the newsletter consent link. */
.elementor .cna-faq__qa .elementor-widget-text-editor a { color: #009EA1; text-decoration: underline; text-underline-offset: 2px; }
.elementor .cna-faq__qa .elementor-widget-text-editor a:hover, .elementor .cna-faq__qa .elementor-widget-text-editor a:focus-visible { color: #454A4A; }
/* Partner finder: service tiles and zone pills are toggles (scripts.js adds .is-selected): teal fill, white text. */
.elementor .e-con.cna-pfind__opt { cursor: pointer; transition: background-color .2s; }
.elementor .e-con.cna-pfind__opt:hover { background-color: rgba(0, 158, 161, .08); }
.elementor .e-con.cna-pfind__opt.is-selected { background-color: #009EA1; }
.elementor .cna-pfind__opt.is-selected .elementor-heading-title, .elementor .cna-pfind__opt.is-selected .elementor-widget-text-editor { color: #FFFFFF; }
.elementor .e-con.cna-pfind__opt:focus-visible { outline: 2px solid #009EA1; outline-offset: 3px; }
/* Partner results: hidden until a search, then the cards that don't match (scripts.js). */
.elementor .cna-is-hidden { display: none !important; }
/* Partner card: an empty ACF value renders nothing, so hide the row, mail icon or web button left empty. */
.elementor .cna-pcard__contact:not(:has(.cna-pcard__contact-name)), .elementor .cna-pcard__phone:not(:has(.cna-pcard__phone-text)), .elementor .cna-pcard__addr:not(:has(.cna-pcard__addr-text)) { display: none; }
.elementor .cna-pcard__mail:not(:has(a)), .elementor .cna-pcard__web:not(:has(.elementor-button-link)) { display: none; }
/* Partner results: link in the « no match » text, on the teal panel. */
.elementor .cna-partners__empty a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 2px; }

/* Études de cas: card meta lines and hero meta lines vanish when their ACF field is empty (the empty heading renders nothing). */
.elementor .cna-meta__row:not(:has(.elementor-widget-heading)) { display: none; }
/* Blog and Études de cas filters: « Tous » last, as in Figma (Pro puts the all-item first with order -1). */
.cna-blog__filter-items .e-filter-item[data-filter="__all"] { order: 1; }
/* Études de cas cards: same hover as the blog cards (photo zoom inside its grey frame, arrow slides). */
.cna-ecard .cna-ecard__photo img, .cna-ecard .cna-ecard__arrow img { transition: transform 0.3s ease; }
.cna-ecard:hover .cna-ecard__photo img, .cna-ecard:focus-within .cna-ecard__photo img { transform: scale(1.04); }
.cna-ecard:hover .cna-ecard__arrow img, .cna-ecard:focus-within .cna-ecard__arrow img { transform: translateX(10px); }
@media (prefers-reduced-motion: reduce) { .cna-ecard .cna-ecard__photo img, .cna-ecard .cna-ecard__arrow img { transition: none; transform: none; } }
/* Étude single gallery: 252:192 tiles, arrows outside (Figma 73 px, 36 px from the tiles), left arrow mirrored; grey placeholder row while the ACF gallery is empty. */
.elementor .cna-case__gallery .swiper-slide-image { display: block; width: 100%; aspect-ratio: 252 / 192; object-fit: cover; }
/* The slide group is rounded like the photos (7); the shadow is a drop-shadow outside the clip, so the clip sits on the photos' edges. */
.elementor .cna-case__gallery .swiper { border-radius: 7px; }
.elementor .cna-case__gallery, .elementor .cna-case__ph { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.16)); }
.elementor .elementor-element.cna-case__gallery.elementor-arrows-position-outside .swiper { width: calc(100% - 218px); }
.elementor .cna-case__gallery .elementor-swiper-button-prev svg { transform: scaleX(-1); }
@media (max-width: 1799px) { .elementor .elementor-element.cna-case__gallery.elementor-arrows-position-outside .swiper { width: calc(100% - 188px); } }
@media (max-width: 1399px) { .elementor .elementor-element.cna-case__gallery.elementor-arrows-position-outside .swiper { width: calc(100% - 160px); } }
@media (max-width: 1023px) { .elementor .elementor-element.cna-case__gallery.elementor-arrows-position-outside .swiper { width: calc(100% - 136px); } }
@media (max-width: 767px) { .elementor .elementor-element.cna-case__gallery.elementor-arrows-position-outside .swiper { width: calc(100% - 108px); } }
@media (max-width: 424px) { .elementor .elementor-element.cna-case__gallery.elementor-arrows-position-outside .swiper { width: calc(100% - 92px); } }
.elementor .cna-case__tile { aspect-ratio: 252 / 192; }
.elementor .cna-case-gallery:has(.cna-case__gallery) .cna-case__ph { display: none; }
/* Étude single body (Post Content has no inner controls): h2 25/25, arrow list 31 px lines, closing line 25/25. */
.cna-case__content h2 { margin: 31px 0 22px; font-family: "Urbanist", sans-serif; font-size: 25px; line-height: 25px; font-weight: 500; color: #454A4A; }
.cna-case__content > :first-child, .cna-case__content > .elementor-widget-container > :first-child { margin-top: 0; }
.cna-case__content p { margin: 0; }
.cna-case__content p + p { margin-top: 7px; }
.cna-case__content ul { margin: 13px 0 0; padding: 0; list-style: none; }
.cna-case__content li { position: relative; padding-left: 32px; line-height: 31px; }
.cna-case__content li::before { content: ""; position: absolute; left: 0; top: 10px; width: 20px; height: 12px; background: url("/wp-content/uploads/2026/09/fleche-verte.svg") no-repeat center / contain; }
.cna-case__content .cna-case__lead { margin-top: 25px; font-size: 25px; line-height: 25px; }
@media (max-width: 1023px) { .cna-case__content h2 { font-size: 22px; line-height: 26px; margin: 28px 0 16px; } .cna-case__content .cna-case__lead { font-size: 22px; line-height: 28px; } }
@media (max-width: 424px) { .cna-case__content h2 { font-size: 20px; line-height: 24px; } .cna-case__content li { line-height: 24px; padding-top: 3px; padding-bottom: 3px; } .cna-case__content li::before { top: 9px; } .cna-case__content .cna-case__lead { font-size: 20px; line-height: 26px; } }
/* Partner finder: service tiles on 1 column below 375, height from the content (no Elementor breakpoint there). */
@media (max-width: 374px) { .elementor .e-con.cna-pfind__opt.cna-pfind__svc { --width: 100%; --min-height: 0px; } }
/* Réalisations grid (page 78): 4:3 cards, columns and gaps from the Loop Grid controls; flex, not grid, so a short last row is centred. */
.elementor .cna-rgrid .elementor-loop-container.elementor-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--grid-row-gap) var(--grid-column-gap); }
.elementor .cna-rgrid .elementor-loop-container > .e-loop-item { flex: none; width: calc((100% - (var(--grid-columns) - 1) * var(--grid-column-gap)) / var(--grid-columns)); }
.elementor .cna-rgrid .cna-rtile { aspect-ratio: 4 / 3; }
/* Réalisation card: photo fills the card under the teal overlay (container ::before); title and terms fade in on hover. */
.cna-rtile { isolation: isolate; }
.elementor .cna-rtile::before { z-index: 1; }
.elementor .cna-rtile .cna-rtile__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.elementor .cna-rtile .cna-rtile__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.elementor .cna-rtile .cna-rtile__info { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity 0.3s ease; }
.cna-rtile:hover .cna-rtile__info, .cna-rtile:focus-visible .cna-rtile__info { opacity: 1; }
.elementor .cna-rtile:focus-visible { --overlay-opacity: 1; }
/* Touch screens and phones (no hover): card text always shown, at the bottom over a dark gradient. */
@media (hover: none), (max-width: 767px) { .elementor .cna-rtile .cna-rtile__info { opacity: 1; --justify-content: flex-end; justify-content: flex-end; background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0) 90%); } .elementor .cna-rtile .cna-rtile__info .elementor-heading-title { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } }
/* Réalisations drop-down filters: scripts.js opens the list (native Taxonomy Filter) and writes the choice in the pill. */
.cna-rfilter__pill { cursor: pointer; user-select: none; }
.cna-rfilter__pill:focus-visible { outline: 2px solid #009EA1; outline-offset: 3px; }
.cna-rfilter__value .elementor-heading-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cna-rfilter .cna-rfilter__arrow img { transition: transform 0.2s ease; }
.cna-rfilter.is-open .cna-rfilter__arrow img { transform: rotate(180deg); }
.elementor .cna-rfilter:not(.is-open) .cna-rfilter__items { display: none; }
.cna-rfilter__items .e-filter { align-items: stretch; }
.cna-rfilter__items .e-filter-item { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; }
.cna-rfilter__items--multi .e-filter-item:not([data-filter="__all"])::after { content: ""; flex: none; box-sizing: border-box; width: 14px; height: 14px; margin-left: 16px; border: 2px solid #009EA1; border-radius: 50%; transition: background-color 0.2s ease; }
.cna-rfilter__items--multi .e-filter-item[aria-pressed="true"]::after { background-color: #009EA1; }
/* Réalisation single gallery: Figma shadow on the photo itself, so it follows the widget's load-in zoom (the item keeps its final size). */
.elementor .cna-real__gallery .e-gallery-item { overflow: visible; }
.elementor .cna-real__gallery .e-gallery-image { border-radius: var(--image-border-radius); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16); }
/* Réalisation single hero: the photo links to the lightbox; a block link keeps it covering the whole media box (an inline-block link shrinks it to its own ratio). */
.elementor .cna-single-hero__img a { display: block; width: 100%; }
/* Réalisation single: no gallery section when the ACF gallery is empty (one-photo projects). */
.elementor .cna-real-gallery:not(:has(.e-gallery-item)) { display: none; }
/* Consultation (page 90) accordion: Figma shadow, white bar before each title, arrow down while closed (the same up arrow is used for both states). */
.elementor .cna-sel__acc .e-n-accordion-item { box-shadow: 0 3px 4px rgba(0, 0, 0, 0.16); }
.elementor .cna-sel__acc .e-n-accordion-item-title-text { display: flex; align-items: center; gap: 45px; }
.elementor .cna-sel__acc .e-n-accordion-item-title-text::before { content: ""; flex: none; width: 6px; height: 44px; border-radius: 3px; background: #FFFFFF; }
.elementor .cna-sel__acc .e-n-accordion-item-title-icon svg { transition: transform 0.3s ease; }
.elementor .cna-sel__acc .e-n-accordion-item-title-icon .e-closed svg { transform: rotate(180deg); }
@media (max-width: 1023px) { .elementor .cna-sel__acc .e-n-accordion-item-title-text { gap: 24px; } .elementor .cna-sel__acc .e-n-accordion-item-title-text::before { width: 5px; height: 34px; } }
@media (max-width: 767px) { .elementor .cna-sel__acc .e-n-accordion-item-title-text { gap: 16px; } .elementor .cna-sel__acc .e-n-accordion-item-title-text::before { width: 4px; height: 28px; } }
/* Consultation: a section without entries (Quartz personnalisé, Poignées personnalisées) shows only its buttons. */
.elementor .cna-sel__grid:not(:has(.e-loop-item)) { display: none; }
/* Consultation sample card: square photo whatever the source ratio. */
.elementor .cna-scard .cna-scard__img img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Carrière job card (loop item cna-pcard): photo box at the Figma 523:377 ratio, arrow slides on hover. */
.elementor .cna-pcard .cna-pcard__img { aspect-ratio: 523 / 377; }
.elementor .cna-pcard .cna-pcard__photo, .elementor .cna-pcard .cna-pcard__photo > .elementor-widget-container { width: 100%; height: 100%; }
.elementor .cna-pcard .cna-pcard__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cna-pcard .cna-pcard__arrow img { transition: transform 0.3s ease; }
.cna-pcard:hover .cna-pcard__arrow img, .cna-pcard:focus-visible .cna-pcard__arrow img { transform: translateX(10px); }
@media (prefers-reduced-motion: reduce) { .cna-pcard .cna-pcard__arrow img { transition: none; transform: none; } }
/* Job post content (cna_poste single, cna-prose--poste): Figma spacing, list lines 31 px. */
.elementor .cna-prose--poste h2 { margin-bottom: 28px; }
.elementor .cna-prose--poste p { margin-bottom: 30px; }
.elementor .cna-prose--poste p + ul { margin-top: -20px; }
.elementor .cna-prose--poste ul { margin-bottom: 38px; }
.elementor .cna-prose--poste ul + h2 { margin-top: 38px; }
.elementor .cna-prose--poste li { line-height: 31px; padding-left: 38px; }
.elementor .cna-prose--poste li + li { margin-top: 0; }
.elementor .cna-prose--poste li::before { height: 31px; }
@media (max-width: 1023px) { .elementor .cna-prose--poste h2 { margin-bottom: 22px; } .elementor .cna-prose--poste ul + h2 { margin-top: 32px; } }
@media (max-width: 767px) { .elementor .cna-prose--poste li { line-height: 26px; padding-left: 32px; } .elementor .cna-prose--poste li::before { height: 26px; } .elementor .cna-prose--poste li + li { margin-top: 4px; } }
/* Carrière application form (Pro Form cna-apply): white pills on teal, CV upload drawn as a pill, white circle consent. */
.elementor .cna-apply.elementor-widget-form .elementor-field-group .elementor-field-textual { min-height: 56px; padding: 0 32px; }
.elementor .cna-apply.elementor-widget-form .elementor-field-group.elementor-field-type-textarea textarea.elementor-field.elementor-field-textual { height: 141px; padding: 17px 32px; border-radius: 28px; resize: vertical; }
.elementor .cna-apply .elementor-field::placeholder { color: #454A4A; opacity: 1; }
.elementor .cna-apply.elementor-widget-form .elementor-field-group.elementor-field-type-upload > label.elementor-field-label.elementor-screen-only { position: relative; top: auto; z-index: 1; width: 100%; height: 56px; margin: 0 0 -56px; padding: 0 32px; clip: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 56px; font-size: 18px; color: #454A4A; pointer-events: none; }
.elementor .cna-apply.elementor-widget-form .elementor-field-group.elementor-field-type-upload input.elementor-field.elementor-upload-field { width: 100%; min-height: 56px; padding: 0 32px; border: 0; border-radius: 68px; background: #FFFFFF; color: transparent; cursor: pointer; }
.elementor .cna-apply.elementor-widget-form .elementor-field-group.elementor-field-type-upload input.elementor-upload-field::file-selector-button { display: none; }
.elementor .cna-apply.elementor-widget-form .elementor-field-group.elementor-field-type-upload input.elementor-upload-field:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.elementor .cna-apply.elementor-widget-form .elementor-field-group.elementor-field-type-acceptance .elementor-field-option { display: flex; max-width: 930px; align-items: flex-start; }
.elementor .cna-apply.elementor-widget-form .elementor-field-group.elementor-field-type-acceptance .elementor-field-option input.elementor-field.elementor-acceptance-field { appearance: none; -webkit-appearance: none; flex: none; width: 15px; height: 15px; min-height: 0; margin: 3px 10px 0 0; padding: 0; border: 2px solid #FFFFFF; border-radius: 50%; background: transparent; cursor: pointer; }
.elementor .cna-apply.elementor-widget-form .elementor-field-group.elementor-field-type-acceptance .elementor-field-option input.elementor-field.elementor-acceptance-field:checked { background: #FFFFFF; box-shadow: inset 0 0 0 2px #009EA1; }
.cna-apply .elementor-field-type-acceptance a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 2px; }
.cna-apply .elementor-field-type-acceptance a:hover, .cna-apply .elementor-field-type-acceptance a:focus-visible { color: #ECEDED; }
@media (min-width: 1400px) { .elementor .cna-apply .elementor-field-type-acceptance { margin-top: -28px; } .elementor .cna-apply .elementor-field-type-submit { margin-top: -8px; } }
@media (max-width: 767px) { .elementor .cna-apply.elementor-widget-form .elementor-field-group.elementor-md-50 { width: 100%; } .elementor .cna-apply.elementor-widget-form .elementor-field-group .elementor-field-textual, .elementor .cna-apply.elementor-widget-form .elementor-field-group.elementor-field-type-upload input.elementor-field.elementor-upload-field { min-height: 50px; } .elementor .cna-apply.elementor-widget-form .elementor-field-group.elementor-field-type-upload > label.elementor-field-label.elementor-screen-only { height: 50px; margin-bottom: -50px; line-height: 50px; font-size: 16px; } .elementor .cna-apply.elementor-widget-form .elementor-field-group.elementor-field-type-textarea textarea.elementor-field.elementor-field-textual { border-radius: 25px; } }

/* Nous joindre « Écrivez-nous! » selector (cna-cselect): a drop-down once scripts.js runs; without JS the links stay listed and every form shows. */
.cna-cselect.is-ready { position: relative; }
.cna-cselect.is-ready .cna-cselect__pill { cursor: pointer; user-select: none; }
.cna-cselect .cna-cselect__pill:focus-visible { outline: 2px solid #009EA1; outline-offset: 3px; }
.cna-cselect .cna-cselect__value .elementor-heading-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cna-cselect .cna-cselect__arrow img { transition: transform 0.2s ease; }
.cna-cselect.is-open .cna-cselect__arrow img { transform: rotate(180deg); }
@media (max-width: 767px) { .cna-cselect .cna-cselect__value .elementor-heading-title { white-space: normal; } }
.elementor .cna-cselect.is-ready .cna-cselect__items { position: absolute; top: calc(100% + 10px); left: 0; z-index: 20; }
.elementor .cna-cselect.is-ready:not(.is-open) .cna-cselect__items { display: none; }
.cna-cselect .cna-cselect__item a { display: block; color: inherit; transition: color 0.2s ease; }
.cna-cselect .cna-cselect__item a:hover, .cna-cselect .cna-cselect__item a:focus-visible, .cna-cselect .cna-cselect__item a[aria-current="true"] { color: #009EA1; }
.elementor .cna-cforms.is-ready .cna-cform:not(.is-active), .elementor .cna-cforms.is-ready:not(:has(.cna-cform.is-active)) { display: none; }
/* Nous joindre forms (cna-apply cna-apply--light, on grey): teal consent and link, files as a teal text trigger, arrow turns white on hover. */
.cna-apply--light .elementor-button:hover svg path, .cna-apply--light .elementor-button:focus-visible svg path { stroke: #FFFFFF !important; }
.elementor .cna-apply--light.cna-apply.elementor-widget-form .elementor-field-group.elementor-field-type-acceptance .elementor-field-option input.elementor-field.elementor-acceptance-field { border-color: #009EA1; }
.elementor .cna-apply--light.cna-apply.elementor-widget-form .elementor-field-group.elementor-field-type-acceptance .elementor-field-option input.elementor-field.elementor-acceptance-field:checked { background: #009EA1; box-shadow: inset 0 0 0 2px #ECEDED; }
.elementor .cna-apply--light.cna-apply.elementor-widget-form .elementor-field-group.elementor-field-type-acceptance .elementor-field-option { max-width: none; }
.cna-apply--light .elementor-field-type-acceptance a { color: #009EA1; }
.cna-apply--light .elementor-field-type-acceptance a:hover, .cna-apply--light .elementor-field-type-acceptance a:focus-visible { color: #454A4A; }
.elementor .cna-apply--light.cna-apply.elementor-widget-form .elementor-field-group.elementor-field-type-upload { position: relative; margin-top: -13px; }
@media (max-width: 1399px) { .elementor .cna-apply--light.cna-apply.elementor-widget-form .elementor-field-group.elementor-field-type-upload { margin-top: -6px; } }
.elementor .cna-apply--light.cna-apply.elementor-widget-form .elementor-field-group.elementor-field-type-upload > label.elementor-field-label.elementor-screen-only { width: auto; height: auto; margin: 0; padding: 0; line-height: 21px; color: #009EA1; pointer-events: auto; cursor: pointer; }
.elementor .cna-apply--light.cna-apply.elementor-widget-form .elementor-field-group.elementor-field-type-upload > label.elementor-field-label.elementor-screen-only:hover { text-decoration: underline; text-underline-offset: 2px; }
.elementor .cna-apply--light.cna-apply.elementor-widget-form .elementor-field-group.elementor-field-type-upload:has(input:focus-visible) > label.elementor-field-label { outline: 2px solid #009EA1; outline-offset: 3px; }
.elementor .cna-apply--light.cna-apply.elementor-widget-form .elementor-field-group.elementor-field-type-upload input.elementor-field.elementor-upload-field { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; min-height: 0; padding: 0; opacity: 0; }
@media (min-width: 1400px) { .elementor .cna-apply--light .elementor-field-type-acceptance, .elementor .cna-apply--light .elementor-field-type-submit { margin-top: 0; } }
/* Nous joindre: « Fichiers choisis » list under the files link (scripts.js). */
.cna-apply--light .cna-files { width: 100%; font-family: "Urbanist", sans-serif; font-size: 16px; font-weight: 500; line-height: 21px; color: #454A4A; }
.cna-apply--light .cna-files:not(:empty) { margin-top: 10px; }
.cna-apply--light .cna-files__title { margin: 0 0 4px; font-weight: 700; }
.cna-apply--light .cna-files__list { margin: 0; padding: 0 0 0 20px; }
.cna-apply--light .cna-files__list li { margin: 0; overflow-wrap: anywhere; }
.elementor .cna-apply--light.cna-apply.elementor-widget-form .elementor-field-group .cna-files__clear { margin-top: 6px; padding: 0; border: 0; background: none; color: #009EA1; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.elementor .cna-apply--light.cna-apply.elementor-widget-form .elementor-field-group .cna-files__clear:hover, .elementor .cna-apply--light.cna-apply.elementor-widget-form .elementor-field-group .cna-files__clear:focus-visible { color: #454A4A; background: none; }
@media (max-width: 767px) { .elementor .cna-apply--light.cna-apply.elementor-widget-form .elementor-field-group.elementor-field-type-upload > label.elementor-field-label.elementor-screen-only { height: auto; margin: 0; line-height: 21px; } }
/* Forms cna-apply (Carrière, Nous joindre): smaller gaps below 1400 (Pro 4.3's Rows / Columns Gap controls are not responsive). */
@media (max-width: 1399px) { .elementor .elementor-element.cna-apply.elementor-widget-form .elementor-field-group { margin-bottom: 22px; padding-left: 12px; padding-right: 12px; } .elementor .elementor-element.cna-apply.elementor-widget-form .elementor-form-fields-wrapper { margin: 0 -12px -22px; } }
@media (max-width: 1023px) { .elementor .elementor-element.cna-apply.elementor-widget-form .elementor-field-group { margin-bottom: 18px; padding-left: 10px; padding-right: 10px; } .elementor .elementor-element.cna-apply.elementor-widget-form .elementor-form-fields-wrapper { margin: 0 -10px -18px; } }
@media (max-width: 767px) { .elementor .elementor-element.cna-apply.elementor-widget-form .elementor-field-group { margin-bottom: 16px; } .elementor .elementor-element.cna-apply.elementor-widget-form .elementor-form-fields-wrapper { margin-bottom: -16px; } }
@media (max-width: 424px) { .elementor .elementor-element.cna-apply.elementor-widget-form .elementor-field-group { margin-bottom: 14px; } .elementor .elementor-element.cna-apply.elementor-widget-form .elementor-form-fields-wrapper { margin-bottom: -14px; } }

/* Form validation (scripts.js): every invalid field gets a red ring and a short message under it, cleared once valid; Pro's server errors (.elementor-error) look the same. */
.elementor .elementor-widget-form .elementor-field-group:is(.cna-field-invalid, .elementor-error) .elementor-field-textual,
.elementor .cna-apply.elementor-widget-form .elementor-field-group:is(.cna-field-invalid, .elementor-error) input.elementor-upload-field { box-shadow: 0 0 0 2px #B3261E !important; }
.elementor .cna-news__form.elementor-widget-form .elementor-field-group:is(.cna-field-invalid, .elementor-error) .elementor-field-textual { box-shadow: none !important; border-color: #B3261E !important; }
.elementor .elementor-widget-form .elementor-field-group:is(.cna-field-invalid, .elementor-error) input:is([type="checkbox"], [type="radio"]) { border-color: #B3261E !important; }
.elementor .elementor-widget-form .elementor-field-group > .cna-field-error,
.elementor .elementor-widget-form .elementor-field-group > .elementor-message.elementor-help-inline { flex: 0 0 100%; display: block; box-sizing: border-box; margin: 6px 0 0; padding: 0 0 0 24px; color: #B3261E; font-size: 14px; line-height: 1.3; font-weight: 500; text-align: left; }
.elementor .elementor-widget-form .elementor-field-group:is(.elementor-field-type-acceptance, .elementor-field-type-radio, .elementor-field-type-checkbox) > :is(.cna-field-error, .elementor-message.elementor-help-inline) { padding-left: 0; }
.elementor .cna-news__form.elementor-widget-form .elementor-field-type-acceptance > :is(.cna-field-error, .elementor-message.elementor-help-inline) { text-align: center; }
/* On the teal panels (Carrière, job single) the message is white: red text would not read on teal. */
.elementor .cna-apply:not(.cna-apply--light).elementor-widget-form .elementor-field-group > :is(.cna-field-error, .elementor-message.elementor-help-inline) { color: #FFFFFF; }
/* Services: no case study for the page's type (empty Loop Grid) hides the « Études de cas » section and its anchor-bar link with the separator before it. */
.elementor .e-con.cna-pietu:not(:has(.e-loop-item)) { display: none; }
.cna-subnav-zone:not(:has(.cna-pietu .e-loop-item)) .cna-subnav__link:has(a[href="#etudes-de-cas"]),
.cna-subnav-zone:not(:has(.cna-pietu .e-loop-item)) .cna-subnav__sep:has(+ .cna-subnav__link a[href="#etudes-de-cas"]) { display: none; }