@charset "UTF-8";

/* ==========================================================================
   ATICORP GROUP — feuille unique (site volontairement plus simple)
   Mêmes codes visuels que culture-controle.com : vert #7bba2d, noir profond,
   typographie Arial généreuse, conteneur 1180px.
   ========================================================================== */

:root {
    --black: #000;
    --ink: #151515;
    --white: #fff;
    --green: #7bba2d;
    --green-dark: #4a7518;
    --green-soft: #edf6df;
    --surface: #f6f7f4;
    --border: #dce1d7;
    --muted: #5f655b;
    --container: 1180px;
    --radius: 14px;
    --shadow: 0 16px 40px rgb(0 0 0 / .07);
    /* Mouvement : un seul jeu de courbes et de durees pour tout le site.
       Tout ce qui bouge reste sur transform / opacity / couleurs : aucune
       propriete ne declenche de recalcul de mise en page, et rien ne passe
       par une librairie externe. */
    --ease-out: cubic-bezier(.2, .75, .2, 1);
    --ease-soft: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: .18s;
    --dur: .32s;
    --dur-slow: .6s
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    /* Les ancres ne disparaissent plus sous l'en-tete colle. */
    scroll-padding-top: 96px
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto
    }

    /* Neutralise aussi les delais : un element ne doit jamais attendre son
       apparition quand l'utilisateur a demande moins de mouvement. */
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important
    }
}

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6
}

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

a {
    color: inherit
}

h1,
h2,
h3,
p {
    margin-top: 0
}

h1,
h2,
h3 {
    line-height: 1.08;
    letter-spacing: -.035em
}

h1 {
    font-size: clamp(2.4rem, 5.4vw, 4.6rem);
    max-width: 930px
}

h2 {
    font-size: clamp(1.9rem, 3.8vw, 3.2rem);
    max-width: 760px
}

h3 {
    font-size: 1.3rem
}

.container {
    width: min(var(--container), calc(100% - 40px));
    margin: auto
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--green);
    padding: 12px;
    z-index: 99
}

.skip-link:focus {
    left: 12px
}

.eyebrow {
    color: var(--green-dark);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .74rem
}

.lead {
    font-size: clamp(1.05rem, 2.1vw, 1.35rem);
    max-width: 730px;
    opacity: .9
}

/* ================================= LOGOS ================================= */

.brand-logo {
    display: block;
    height: 44px;
    width: auto
}

/* <picture> (WebP + repli PNG) n'est qu'un emballage : display: contents le
   retire de la mise en page et, sans boite a mesurer, le prechargeur ne
   reclame plus la source d'un logo masque — il restait telecharge sur chaque
   page alors que le logo n'est visible qu'en mode sombre. */
.brand picture,
.site-footer picture {
    display: contents
}

/* Variante blanche reservee au mode sombre / contraste (voir accessibility.css) */
.brand-logo--light {
    display: none !important
}

.footer-logo {
    display: block;
    width: 210px;
    height: auto;
    margin-bottom: 18px
}

.entity-logo--is-wide {
    max-height: 52px;
    width: auto
}

.entity-logo--is-round {
    max-height: 96px;
    width: auto
}

/* ================================ HEADER ================================= */

.site-header {
    position: sticky;
    top: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    z-index: 10
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 78px;
    gap: 22px
}

.brand {
    text-decoration: none
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 25px;
    font-size: .94rem;
    font-weight: 700
}

.site-nav>a:not(.button) {
    text-decoration: none;
    position: relative
}

/* Soulignement du menu : il se deploie au lieu d'apparaitre d'un coup. */
.site-nav>a:not(.button)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    background: var(--green);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur) var(--ease-out)
}

.site-nav>a:not(.button):hover::after,
.site-nav>a:not(.button):focus-visible::after {
    transform: scaleX(1)
}

.menu-toggle {
    display: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 7px;
    cursor: pointer
}

.menu-toggle span:not(.sr-only) {
    display: block;
    width: 27px;
    height: 2px;
    background: #000;
    margin: 5px;
    transition: transform .2s ease, opacity .2s ease
}

.menu-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(1) {
    transform: translateY(7px) rotate(45deg)
}

.menu-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(2) {
    opacity: 0
}

.menu-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(3) {
    transform: translateY(-7px) rotate(-45deg)
}

/* ================================ BOUTONS ================================ */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 22px;
    border: 1px solid #000;
    text-decoration: none;
    font-weight: 800;
    transition: .18s ease;
    border-radius: 5px;
    cursor: pointer
}

.button--primary {
    background: var(--green);
    color: #000;
    border-color: var(--green)
}

.button--primary:hover {
    background: #91ce42;
    transform: translateY(-2px)
}

.button--ghost {
    color: #fff;
    border-color: #fff
}

.button--ghost:hover {
    background: #fff;
    color: #000
}

.button--outline {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink)
}

.button--outline:hover {
    background: var(--ink);
    color: #fff
}

.button--small {
    min-height: 42px;
    padding: 0 16px
}

.button:focus-visible,
.text-link:focus-visible,
.site-nav a:focus-visible {
    outline: 3px solid var(--green-dark);
    outline-offset: 3px;
    border-radius: 3px
}

/* ================================= HERO ================================== */

.hero {
    position: relative;
    background: #050505;
    color: #fff;
    overflow: hidden;
    isolation: isolate
}

.hero--home {
    min-height: min(660px, 82vh);
    display: grid;
    align-items: center;
    padding: 90px 0 70px;
    background:
        radial-gradient(1000px 520px at 78% -10%, rgb(123 186 45 / .22), transparent 60%),
        radial-gradient(700px 420px at 8% 110%, rgb(123 186 45 / .12), transparent 65%),
        #050505
}

/* Le logo du groupe en filigrane, a la place du quadrillage : il signe
   l'accueil sans ajouter de bruit, et le texte reste lisible par-dessus
   (blanc sur un fond qui ne depasse pas #333).

   Le centrage passe par « translate », le deplacement de la parallaxe par
   « transform » : deux proprietes distinctes, qui s'additionnent, donc aucune
   chaine de caractere a recopier ici dans le JavaScript. Position absolue et
   translate laissent la mise en page intacte. */
.hero__watermark {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: min(64%, 880px);
    height: auto;
    translate: -50% -50%;
    opacity: .14;
    pointer-events: none;
    user-select: none;
    will-change: transform
}

.hero .eyebrow {
    color: var(--green)
}

.hero .lead {
    opacity: .85
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 30px
}

.trust-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 42px 0 0
}

.trust-list li {
    border: 1px solid rgb(255 255 255 / .3);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #e6e8e3
}

/* =============================== SECTIONS ================================ */

.section {
    padding: 100px 0
}

.section--tight {
    padding: 60px 0
}

.section--dark {
    background: #050505;
    color: #fff
}

.section--dark .eyebrow {
    color: var(--green)
}

.section--dark h2 {
    margin-bottom: 40px
}

.section--faq {
    background: var(--surface)
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    margin-bottom: 45px
}

.section-heading h2 {
    margin-bottom: 0
}

.editorial-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 60px;
    align-items: start
}

.editorial-content p:not(.eyebrow) {
    color: var(--muted)
}

.stats-panel {
    border: 1px solid var(--border);
    background: var(--surface);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background-image: none
}

.stat {
    padding: 26px 24px;
    background: #fff
}

.stat strong {
    display: block;
    font-size: 1.6rem;
    letter-spacing: -.03em;
    color: var(--ink);
    line-height: 1.15;
    margin-bottom: 6px
}

.stat span {
    color: var(--muted);
    font-size: .88rem
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px
}

.split--gap {
    gap: 70px
}

.split p {
    color: inherit
}

.section--dark .split p {
    color: #cfd3ca
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 22px 0;
    border-top: 1px solid rgb(255 255 255 / .18)
}

.check-list li {
    padding: 13px 0 13px 30px;
    border-bottom: 1px solid rgb(255 255 255 / .18);
    position: relative;
    font-weight: 600
}

.check-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 20px;
    width: 8px;
    height: 8px;
    background: var(--green);
    transform: rotate(45deg)
}

/* ============================ CARTES ENTITES ============================= */

.entity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.entity-card {
    border: 1px solid var(--border);
    background: #fff;
    padding: 30px;
    display: flex;
    flex-direction: column;
    transition: .2s ease
}

.entity-card:hover {
    border-color: var(--green);
    transform: translateY(-4px);
    box-shadow: var(--shadow)
}

.entity-card__identity {
    min-height: 104px;
    display: flex;
    align-items: center;
    margin-bottom: 18px
}

.entity-card__identity img {
    width: auto
}

.entity-card__role {
    color: var(--green-dark);
    font-weight: 800;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 12px
}

.entity-card p:not(.entity-card__role) {
    color: var(--muted);
    margin-bottom: 22px
}

.entity-card .text-link {
    margin-top: auto
}

/* ========================= CARTES SERVICES/METIERS ======================== */

.service-grid {
    margin-top: 45px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.service-grid--five {
    grid-template-columns: repeat(5, 1fr)
}

.service-card {
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 26px;
    min-height: 230px;
    display: flex;
    flex-direction: column;
    background: rgb(255 255 255 / .03);
    transition: .2s ease
}

.service-card:hover {
    border-color: var(--green);
    transform: translateY(-4px)
}

.service-card span {
    color: var(--green);
    font-weight: 900;
    font-size: .84rem;
    margin-bottom: 16px
}

.service-card h3 {
    margin: auto 0 0;
    font-size: 1.12rem
}

.service-card p {
    color: #000000;
    font-size: .92rem;
    margin-bottom: 18px
}

.service-card2 {
    border: 1px solid rgb(255 255 255 / .2);
    padding: 26px;
    min-height: 230px;
    display: flex;
    flex-direction: column;
    background: rgb(255 255 255 / .03);
    transition: .2s ease
}

.service-card2:hover {
    border-color: var(--green);
    transform: translateY(-4px)
}

.service-card2 span {
    color: var(--green);
    font-weight: 900;
    font-size: .84rem;
    margin-bottom: 16px
}

.service-card2 h3 {
    margin: auto 0 0;
    font-size: 1.12rem
}

.service-card2 p {
    color: #ffffff;
    font-size: .92rem;
    margin-bottom: 18px
}

/* ================================= FAQ =================================== */

.faq-list {
    max-width: 820px;
    margin: 40px 0 0;
    border-top: 1px solid var(--border)
}

.faq-item {
    border-bottom: 1px solid var(--border);
    padding: 6px 0
}

.faq-item__title {
    cursor: pointer;
    font-weight: 800;
    font-size: 1.06rem;
    line-height: 1.5;
    padding: 16px 40px 16px 0;
    position: relative;
    list-style: none
}

.faq-item__title::-webkit-details-marker {
    display: none
}

/* Repere dessine (et non plus un caractere) : il peut donc s'animer.
   La barre verticale se retracte, le « + » devient « - ». */
.faq-item__title::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    background:
        linear-gradient(var(--green-dark), var(--green-dark)) center / 100% 2px no-repeat,
        linear-gradient(var(--green-dark), var(--green-dark)) center / 2px 100% no-repeat;
    transition: background-size var(--dur) var(--ease-out)
}

.faq-item[open] .faq-item__title::after {
    background-size: 100% 2px, 2px 0
}

.faq-item__title:focus-visible {
    outline: 2px solid var(--green-dark);
    outline-offset: 3px;
    border-radius: 2px
}

.faq-item p {
    margin: 0 0 18px;
    color: var(--muted);
    max-width: 720px
}

/* ================================= CTA =================================== */

.cta {
    background: var(--green-soft);
    padding: 72px 0
}

.cta-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 35px
}

.cta h2 {
    font-size: clamp(1.7rem, 3.4vw, 2.8rem);
    margin-bottom: 15px
}

.cta p:not(.eyebrow) {
    max-width: 700px;
    margin-bottom: 0
}

/* ============================== PAGES LEGALES ============================ */

.page {
    min-height: 60vh
}

.page-intro {
    padding: 100px 0 40px
}

.page-intro .lead {
    color: var(--muted)
}

.page-intro .button {
    margin-top: 10px
}

.prose {
    max-width: 800px;
    font-size: 1.06rem
}

.prose h2 {
    margin-top: 38px;
    margin-bottom: 14px;
    font-size: 2rem
}

.prose h2:first-child {
    margin-top: 0
}

.prose p {
    margin-bottom: 18px
}

.prose h3 {
    margin: 26px 0 10px;
    font-size: 1.3rem
}

.prose ul {
    margin: 0 0 18px;
    padding-left: 22px
}

.prose li {
    margin-bottom: 8px
}

.prose a {
    color: var(--green-dark);
    font-weight: 700
}

.sitemap-list {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
    border-top: 1px solid var(--border)
}

.sitemap-list li {
    border-bottom: 1px solid var(--border)
}

.sitemap-list a {
    display: block;
    padding: 13px 0;
    text-decoration: none;
    font-weight: 700
}

.sitemap-list a:hover {
    color: var(--green-dark)
}

.not-found {
    padding: 130px 0
}

/* ================================ CONTACT ================================ */

.section--locations-contact {
    padding-top: 40px
}

.contact-locations {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.contact-location {
    font-style: normal;
    line-height: 1.6;
    border: 1px solid var(--border);
    padding: 28px;
    background: #fff
}

.contact-location__tag {
    display: inline-block;
    background: var(--green-soft);
    color: var(--green-dark);
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 5px 10px;
    margin-bottom: 14px
}

.contact-location strong {
    display: block;
    font-size: 1.15rem;
    margin-bottom: 6px
}

.contact-location a {
    display: inline-block;
    margin-top: 12px;
    font-weight: 800;
    color: var(--green-dark);
    text-decoration: none
}

.section--maps {
    padding-top: 40px
}

.maps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.map-card h2 {
    margin: 0 0 14px;
    font-size: 1.2rem
}

.map-card iframe {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface)
}

/* Carte non consentie : message de repli a la place de l'iframe (Klaro vide
 * et masque l'iframe tant que le service n'est pas accepte). */
.map-card__blocked:not([hidden]) + iframe {
    display: none
}

.map-card__blocked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 24px;
    aspect-ratio: 3 / 2;
    border: 1px dashed var(--border);
    border-radius: 3px;
    background: var(--surface);
    color: var(--muted);
    text-align: center;
    font-size: .95rem
}

.map-card__blocked[hidden] {
    display: none
}

.map-card__blocked .link-cookies {
    font-weight: 800;
    color: var(--green-dark);
    text-decoration: underline
}

.map-card__caption {
    margin: 12px 0 0;
    font-size: .92rem;
    color: var(--muted)
}

.method-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: start
}

.method-intro p:not(.eyebrow) {
    color: var(--muted)
}

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

.method-list li {
    display: flex;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--border)
}

.method-list>li>span {
    color: var(--green-dark);
    font-weight: 900;
    font-size: .9rem
}

.method-list h3 {
    margin-bottom: 6px
}

.method-list p {
    margin-bottom: 0;
    color: var(--muted)
}

/* =============================== FORMULAIRE ============================== */

.form-panel {
    background: var(--surface);
    padding: 34px;
    border: 1px solid var(--border)
}

.form-panel--wide {
    max-width: 980px;
    margin: 0 auto;
    padding: 56px
}

.form-panel__intro {
    max-width: 640px;
    margin-bottom: 40px
}

.form-panel__intro p:not(.eyebrow) {
    color: var(--muted)
}

.contact-form label {
    display: block;
    font-size: .88rem;
    font-weight: 800;
    margin-bottom: 18px
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 16px
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    display: block;
    width: 100%;
    margin-top: 7px;
    padding: 13px;
    border: 1px solid #bfc6b8;
    border-radius: 3px;
    background: #fff;
    font: inherit
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: 3px solid rgb(123 186 45 / .28);
    border-color: var(--green-dark)
}

.contact-form input[type=checkbox] {
    width: auto
}

.checkbox-field {
    display: flex !important;
    align-items: flex-start;
    gap: 9px;
    font-size: .82rem !important;
    font-weight: 400 !important;
    line-height: 1.5;
    margin: 4px 0 20px
}

.checkbox-field input {
    width: auto !important;
    margin-top: 3px !important
}

.form-required-note {
    margin: -8px 0 16px;
    color: var(--muted);
    font-size: .78rem
}

.form-status {
    padding: 14px 16px;
    border-radius: 3px;
    font-weight: 700;
    font-size: .92rem;
    margin-bottom: 20px;
    scroll-margin-top: 110px
}

.form-status--success {
    background: var(--green-soft);
    color: var(--green-dark);
    border: 1px solid var(--green)
}

.form-status--error {
    background: #fdecea;
    color: #9b2226;
    border: 1px solid #f3b4ae
}

.form-note {
    color: var(--muted);
    font-size: .78rem;
    margin-top: 15px
}

.form-note a {
    color: var(--muted)
}

.hp {
    position: absolute !important;
    left: -9999px !important
}

/* ================================ LIENS ================================== */

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    text-decoration: none;
    color: var(--ink)
}

.text-link:hover {
    color: var(--green-dark)
}

.text-link .icon-arrow {
    transition: transform .18s ease
}

.text-link:hover .icon-arrow {
    transform: translateX(4px)
}

.text-link--light {
    color: #fff
}

.text-link--light:hover {
    color: var(--green)
}

/* ================================ FOOTER ================================= */

.site-footer {
    background: #050505;
    color: #f2f2f2;
    padding: 70px 0 18px
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px
}

.site-footer p {
    color: #b9bdb4;
    font-size: .92rem
}

.footer-address {
    margin-top: 14px
}

.site-footer h2 {
    font-size: 1rem;
    letter-spacing: 0;
    margin-bottom: 18px;
    max-width: none
}

.site-footer a {
    display: block;
    text-decoration: none;
    margin: 8px 0
}

.site-footer a:hover {
    color: var(--green)
}

.site-footer .footer-inline {
    display: inline;
    margin: 0
}

.footer-bottom {
    margin-top: 55px;
    padding-top: 18px;
    border-top: 1px solid rgb(255 255 255 / .18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    color: #aaa;
    font-size: .84rem
}

.footer-bottom span {
    display: flex;
    gap: 18px;
    flex-wrap: wrap
}

.footer-bottom a {
    display: inline;
    color: #aaa;
    text-decoration: underline;
    margin: 0
}

.site-footer strong {
    color: var(--green)
}

/* Bouton « Gérer mes cookies » (bandeau Klaro) */
.link-cookies {
    display: inline-block;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    color: #aaa;
    font-size: .84rem;
    font-family: inherit;
    line-height: inherit;
    text-decoration: underline;
    cursor: pointer
}

.link-cookies:hover {
    color: var(--green)
}

/* ============================ RETOUR EN HAUT ============================= */
/* En bas a gauche : le coin bas-droite est reserve au widget d'accessibilite. */

.back-to-top {
    position: fixed;
    left: 20px;
    bottom: 20px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: .2s ease;
    z-index: 9999
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none
}

.back-to-top:hover {
    background: #91ce42
}

/* ============================== ANIMATIONS =============================== */
/* Tout ce qui suit ne coute rien au rendu : uniquement transform / opacity /
   couleurs, aucun script par frame, aucune ressource a telecharger. */

/* --- Apparitions au defilement ------------------------------------------- */

/* Les elements .reveal ne sont masques que si JavaScript est actif : sans JS,
   le contenu reste visible (accessibilite + SEO). */
.js .reveal {
    --reveal-y: 22px;
    --reveal-scale: 1;
    opacity: 0;
    transform: translate3d(0, var(--reveal-y), 0) scale(var(--reveal-scale));
    transition:
        opacity var(--dur-slow) var(--ease-soft),
        transform var(--dur-slow) var(--ease-out)
}

.js .reveal.is-visible {
    opacity: 1;
    transform: none
}

/* Les variantes ne touchent que des variables : aucune guerre de specificite. */
.js .reveal--zoom {
    --reveal-y: 0px;
    --reveal-scale: .965
}

.js .reveal--fade {
    --reveal-y: 0px
}

/* Cascade : dans une grille, les elements n'arrivent plus tous ensemble. */
:where(.entity-grid, .service-grid, .service-grid--five, .contact-locations,
    .method-list, .editorial-grid, .split, .maps-grid)> :is(.reveal):nth-child(2) {
    transition-delay: 70ms
}

:where(.entity-grid, .service-grid, .service-grid--five, .contact-locations,
    .method-list, .editorial-grid, .split, .maps-grid)> :is(.reveal):nth-child(3) {
    transition-delay: 140ms
}

:where(.entity-grid, .service-grid, .service-grid--five, .contact-locations,
    .method-list, .editorial-grid, .split, .maps-grid)> :is(.reveal):nth-child(4) {
    transition-delay: 210ms
}

:where(.entity-grid, .service-grid, .service-grid--five, .contact-locations,
    .method-list, .editorial-grid, .split, .maps-grid)> :is(.reveal):nth-child(5) {
    transition-delay: 280ms
}

@media (prefers-reduced-motion: reduce) {
    .js .reveal {
        opacity: 1;
        transform: none;
        transition: none
    }
}

/* --- Entree du hero ----------------------------------------------------- */
/* Le titre, le chapô et les boutons montent en cascade a l'arrivee sur la page.
   Duree courte : le premier affichage ne doit pas etre retarde. */
@media (prefers-reduced-motion: no-preference) {
    .hero__content>* {
        animation: hero-in .5s var(--ease-out) both
    }

    .hero__content>*:nth-child(2) {
        animation-delay: 60ms
    }

    .hero__content>*:nth-child(3) {
        animation-delay: 120ms
    }

    .hero__content>*:nth-child(4) {
        animation-delay: 180ms
    }

    .hero__content>*:nth-child(5) {
        animation-delay: 240ms
    }
}

/* Volontairement SANS opacite : un texte qui apparait en fondu n'est retenu
   comme « plus grand element peint » (LCP) qu'a la fin du fondu, ce qui
   repousse le LCP de toute la duree de l'animation (mesure : +618 ms).
   Seul le mouvement joue, donc le texte est peint des la premiere image. */
@keyframes hero-in {
    from {
        transform: translate3d(0, 14px, 0)
    }

    to {
        transform: none
    }
}

/* --- En-tete : etat « page defilee » ------------------------------------- */

.site-header {
    transition:
        box-shadow var(--dur) var(--ease-out),
        border-color var(--dur) var(--ease-out)
}

.is-scrolled .site-header {
    box-shadow: 0 14px 34px rgb(0 0 0 / .08);
    border-color: transparent
}

/* Toute la barre se condense au defilement — logo, liens, bouton et ecarts se
   resserrent ensemble. Le logo seul donnait l'impression d'un element qui se
   decroche, pas d'un en-tete qui se resserre. */
.brand-logo {
    transition: transform var(--dur) var(--ease-out);
    transform-origin: left center
}

.is-scrolled .brand-logo {
    transform: scale(.9)
}

/* La barre raccourcit pour de bon : c'est l'en-tete lui-meme qui perd de la
   hauteur, pas un decor qui se retracte a l'interieur.

   Pour que le contenu de la page ne bouge pas pour autant, la hauteur perdue
   est rendue au document par la marge haute de l'element qui suit l'en-tete.
   La somme « barre + haut du contenu » reste donc identique a tout instant :
   ni saut a la bascule, ni derive pendant la transition, puisque les deux
   durees et les deux courbes sont les memes.

   Une marge plutot qu'une marge interne ou qu'une bordure transparente : ces
   deux dernieres vivent a l'interieur de la boite et se font donc absorber par
   le min-height des pages courtes, qui remonterait alors tout ce qui suit.
   Pour la meme raison, la marge ne doit pas fusionner avec celle du premier
   enfant : d'ou le flow-root, qui ne change rien d'autre a la mise en page. */
:root {
    --retrait-entete: 17px
}

.header-inner {
    transition:
        gap var(--dur) var(--ease-out),
        min-height var(--dur) var(--ease-out)
}

/* La hauteur au repos de la barre (78 px) est tenue par ce min-height : la
   baisser de --retrait-entete raccourcit l'en-tete d'autant. */
.is-scrolled .header-inner {
    gap: 16px;
    min-height: calc(78px - var(--retrait-entete))
}

.site-header + main {
    display: flow-root;
    transition: margin-top var(--dur) var(--ease-out)
}

.is-scrolled .site-header + main {
    margin-top: var(--retrait-entete)
}

/* Sous 900 px la navigation est un panneau qui se deroule : le resserrement
   ne concerne que la barre horizontale, jamais le panneau ouvert. */
@media (min-width: 901px) {
    .site-nav {
        transition:
            gap var(--dur) var(--ease-out),
            font-size var(--dur) var(--ease-out)
    }

    .is-scrolled .site-nav {
        gap: 17px;
        font-size: .86rem
    }

    /* Le bouton de l'en-tete est en variante « small » (42 px / 16 px) : il
       se resserre dans la meme proportion, il ne grossit pas. */
    .is-scrolled .site-nav .button {
        min-height: 38px;
        padding: 0 14px
    }
}

/* --- Barre de progression de lecture ------------------------------------- */

.scroll-progress {
    position: fixed;
    inset: 0 0 auto;
    height: 3px;
    z-index: 20;
    pointer-events: none;
    background: rgb(0 0 0 / .05)
}

.scroll-progress__bar {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--green-dark), var(--green));
    transform: scaleX(var(--scroll-progress, 0));
    transform-origin: left center
}

/* Navigateurs a animations pilotees par le defilement : la barre suit la
   page entierement en CSS, sans une seule ligne de JavaScript par frame.
   L'animation prend le pas sur la declaration transform ci-dessus ;
   ailleurs, c'est le script qui alimente --scroll-progress. */
@supports (animation-timeline: scroll()) {
    .scroll-progress__bar {
        animation: barre-progression linear both;
        animation-timeline: scroll(root block)
    }
}

@keyframes barre-progression {
    from {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

/* --- Micro-interactions ------------------------------------------------- */

/* Boutons : levee au survol, enfoncement au clic. */
.button:hover {
    transform: translateY(-2px)
}

.button:active {
    transform: translateY(0) scale(.98)
}

.button--primary:hover {
    box-shadow: 0 10px 22px rgb(74 117 24 / .3)
}

/* Liens texte : le soulignement se deploie sous le libelle. */
.text-link {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 2px;
    transition:
        background-size var(--dur) var(--ease-out),
        color var(--dur-fast) ease
}

.text-link:hover,
.text-link:focus-visible {
    background-size: 100% 2px
}

/* Cartes de services : meme reaction que les cartes d'entites. */
.service-card:hover,
.service-card2:hover {
    box-shadow: var(--shadow);
    background-color: rgb(255 255 255 / .07)
}

.contact-location {
    transition:
        transform var(--dur) var(--ease-out),
        box-shadow var(--dur) var(--ease-out),
        border-color var(--dur) var(--ease-out)
}

.contact-location:hover {
    border-color: var(--green);
    transform: translateY(-3px);
    box-shadow: var(--shadow)
}

/* Chiffres cles : la valeur passe au vert avec la cellule. */
.stat strong {
    transition: color var(--dur) var(--ease-out)
}

.stat:hover strong {
    color: var(--green-dark)
}

/* Liste a reperes losange : le repere grossit avec la ligne. */
.check-list li::before {
    transition: transform var(--dur) var(--ease-out)
}

.check-list li:hover::before {
    transform: rotate(45deg) scale(1.35)
}

/* Badges du hero. */
.trust-list li {
    transition:
        border-color var(--dur) var(--ease-out),
        background-color var(--dur) var(--ease-out)
}

.trust-list li:hover {
    border-color: var(--green);
    background: rgb(123 186 45 / .14)
}

/* Question frequente : le titre reagit, la reponse arrive en fondu. */
.faq-item__title {
    transition: color var(--dur-fast) ease
}

.faq-item__title:hover {
    color: var(--green-dark)
}

.faq-item[open] p {
    animation: reponse-in var(--dur) var(--ease-out) both
}

@keyframes reponse-in {
    from {
        opacity: 0;
        transform: translate3d(0, -6px, 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

/* Plan du site et pied de page : petit decalage au survol. */
.sitemap-list a {
    transition:
        transform var(--dur-fast) var(--ease-out),
        color var(--dur-fast) ease
}

.sitemap-list a:hover {
    transform: translateX(4px)
}

.site-footer a {
    transition:
        color var(--dur-fast) ease,
        transform var(--dur-fast) var(--ease-out)
}

.site-footer a:hover {
    transform: translateX(3px)
}

/* Retour en haut. */
.back-to-top.is-visible:hover {
    transform: translateY(-3px) scale(1.06)
}

/* --- Anneau de focus lisible sur fond sombre ----------------------------- */
/* Le vert fonce est lisible sur blanc mais pas sur noir : sur les sections
   sombres, le focus passe au vert clair. */
.hero :focus-visible,
.section--dark :focus-visible,
.site-footer :focus-visible {
    outline-color: var(--green)
}

/* ============================== RESPONSIVE =============================== */

@media (max-width: 1080px) {
    .service-grid--five {
        grid-template-columns: repeat(3, 1fr)
    }

    .entity-grid,
    .service-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width: 900px) {
    .menu-toggle {
        display: block
    }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid var(--border);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 10px 20px 22px;
        display: none
    }

    .site-nav.is-open {
        display: flex
    }

    .site-nav>a:not(.button) {
        padding: 13px 0;
        width: 100%;
        border-bottom: 1px solid var(--border)
    }

    .site-nav>a:not(.button)::after {
        display: none
    }

    .site-nav .button {
        margin-top: 16px
    }

    .editorial-grid,
    .split,
    .maps-grid,
    .method-grid {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .cta-inner {
        flex-direction: column;
        align-items: flex-start
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr
    }

    .contact-locations {
        grid-template-columns: 1fr
    }

    .form-grid {
        grid-template-columns: 1fr 1fr
    }

    .form-panel--wide {
        padding: 34px
    }
}

@media (max-width: 620px) {
    .section {
        padding: 70px 0
    }

    .hero--home {
        min-height: 0;
        padding: 70px 0 60px
    }

    /* Cadre plus serre et filigrane plus discret : sur mobile le texte
       occupe toute la largeur et passe devant. */
    .hero__watermark {
        width: 92%;
        opacity: .1
    }

    .entity-grid,
    .service-grid,
    .service-grid--five,
    .form-grid,
    .footer-grid,
    .stats-panel {
        grid-template-columns: 1fr
    }

    .page-intro {
        padding: 70px 0 30px
    }

    .trust-list li {
        font-size: .72rem
    }
}