@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: #000000;
    border-color: #000000
}

.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 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 decalage de defilement 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;
    /* Couleur opaque equivalente a rgb(255 255 255 / .03) sur fond #050505 :
     * les outils d'audit ne composent pas les fonds semi-transparents et
     * calculaient des contrastes faux (3.2) sur un fond virtuel blanc. */
    background: #0d0d0d;
    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;
    /* Same opaque equivalent (voir .service-card). */
    background: #0d0d0d;
    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
}

/* Sections sous le tableau : pleine largeur (meme chasse que le tableau)
 * et corps de texte plus compact. */
.prose--wide {
    max-width: none;
    font-size: .95rem
}

.prose--wide h2 {
    font-size: 1.35rem;
    margin-top: 30px;
    margin-bottom: 10px
}

.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
}

/* Bloc « fait partie de » + logo du groupe (meme rendu que culture-controle). */
.footer-group {
    margin-top: 16px;
    margin-bottom: 6px;
    font-size: .8rem;
    color: #999
}

.footer-group__logo {
    display: inline-block;
    opacity: .85;
    transition: opacity .2s ease
}

.footer-group__logo:hover {
    opacity: 1
}

.footer-group__logo img {
    display: block;
    width: auto
}

.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, .product-grid,
    .method-list, .editorial-grid, .split, .maps-grid)> :is(.reveal):nth-child(2) {
    transition-delay: 70ms
}

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

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

:where(.entity-grid, .service-grid, .service-grid--five, .product-grid,
    .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)
}

/* Le bouton fantome est noir par defaut (pages claires : mon compte,
   fiche prestation). Sur les fonds sombres il passe en blanc : en noir sur
   noir, il etait illisible. */
.hero .button--ghost,
.section--dark .button--ghost {
    color: #fff;
    border-color: #fff
}

.hero .button--ghost:hover,
.section--dark .button--ghost:hover {
    background: #fff;
    color: #000
}

/* 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)
}

/* Fiches produit du catalogue : l'appareil grossit tres legerement, sans
   jamais depasser la vignette (le parent est deja en overflow: hidden). */
.product-card__media img {
    transition: transform var(--dur-slow) var(--ease-out)
}

.product-card:hover .product-card__media img,
.product-card:focus-within .product-card__media img {
    transform: scale(1.05)
}

/* Filtres du catalogue. */
.filter-chip {
    transition:
        border-color var(--dur-fast) var(--ease-out),
        background-color var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out)
}

.filter-chip:hover,
.filter-chip:focus-visible {
    transform: translateY(-1px)
}

.filter-chip:active {
    transform: translateY(0) scale(.97)
}

/* Lignes du panier de devis : le cadre se teinte au survol. */
.cart-line {
    transition:
        border-color var(--dur) var(--ease-out),
        box-shadow var(--dur) var(--ease-out)
}

.cart-line:hover,
.cart-line:focus-within {
    border-color: var(--green);
    box-shadow: 0 10px 26px rgb(0 0 0 / .06)
}

/* La pastille du panier attire l'oeil quand une prestation vient d'y entrer. */
.cart-badge {
    animation: pastille-in var(--dur) var(--ease-out) both
}

@keyframes pastille-in {
    from {
        opacity: 0;
        transform: scale(.5)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.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 ----------------------------- */
.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
    }
}

/* ==========================================================================
   NORMAVERIF — styles spécifiques : boutique, panier de devis, tableau
   tarifaire, filtres. Mêmes variables que la feuille principale.
   ========================================================================== */

.section--intro {
    padding-top: clamp(48px, 7vw, 90px)
}

/* Badge de quantité dans le header */
.cart-badge {
    display: inline-block;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--green);
    color: #10240a;
    font-size: .74rem;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
    vertical-align: middle
}

/* ---------------------------------------------- filtres de la boutique */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px
}

.filter-chip {
    padding: 7px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink);
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease
}

.filter-chip:hover,
.filter-chip:focus-visible {
    border-color: var(--green);
    background: var(--green-soft)
}

.filter-chip.is-active {
    border-color: var(--green-dark);
    background: var(--green);
    color: #10240a
}

/* ---------------------------------------------- grille produits */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px
}

.product-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow);
    transition: transform .18s ease, box-shadow .18s ease
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgb(0 0 0 / .1)
}

.product-card__media {
    display: block;
    padding: 18px;
    background: var(--surface)
}

.product-card__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain
}

.product-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 18px
}

.product-card__body h3 {
    margin: 0;
    font-size: 1.12rem
}

.product-card__body h3 a {
    text-decoration: none
}

.product-card__body h3 a:hover,
.product-card__body h3 a:focus-visible {
    color: var(--green-dark)
}

.product-card__meta {
    margin: 0;
    color: var(--muted);
    font-size: .86rem;
    overflow-wrap: break-word;
    hyphens: auto
}

.product-card__actions {
    margin-top: auto
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none
}

.tag {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--green-soft);
    color: var(--green-dark);
    font-size: .63rem;
    line-height: 1.5;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em
}

/* ---------------------------------------------- tableau tarifaire */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white)
}

.tarif-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    font-size: .9rem
}

.tarif-table th,
.tarif-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    text-align: left;
    vertical-align: top
}

.tarif-table th:last-child,
.tarif-table td:last-child {
    border-right: 0
}

.tarif-table thead th {
    position: sticky;
    top: 0;
    background: var(--ink);
    color: var(--white);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em
}

/* Pas d'alternance de couleurs et pas de surlignement au survol :
 * fond uniforme, comme le tableau d'origine. */

.tarif-table__appareil {
    background: inherit;
    font-weight: 800;
    white-space: nowrap
}

.tarif-table__prix {
    font-weight: 800;
    white-space: nowrap
}

.tarif-table--compact {
    min-width: 520px
}

.notes-list {
    padding-left: 20px
}

.notes-list li {
    margin-bottom: 8px;
    color: var(--muted);
    font-size: .92rem
}

/* ---------------------------------------------- fiche produit */
.produit-layout {
    align-items: flex-start
}

.produit-visual {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface)
}

.produit-visual img {
    display: block;
    width: 100%;
    height: auto;
    margin: auto;
    aspect-ratio: 1;
    object-fit: contain
}

/* ---------------------------------------------- panier de devis */
.cart-lines {
    display: flex;
    flex-direction: column;
    gap: 18px
}

.cart-line {
    margin: 0;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    /* fieldset en flex : le <legend> est rendu comme un titre normal DANS la
     * case (sinon il perce la bordure superieure et semble en dehors). */
    display: flex;
    flex-direction: column;
    gap: 12px
}

/* Page panier pleine largeur : plafonds des panneaux levés, champs repartis
 * sur plus de colonnes (bloc coordonnees beaucoup moins haut). */
.shop-container .form-panel--wide {
    max-width: none;
    padding: 34px
}

.shop-container .form-panel__intro {
    max-width: none
}

.shop-container .form-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
}

.shop-container textarea[name="message"] {
    max-width: 900px
}

.cart-line__title {
    padding: 0;
    font-size: 1.05rem;
    font-weight: 800
}

.cart-line__grid {
    display: grid;
    /* 96px image + Quantité + Type + zone de gravure qui occupe tout le reste
     * de la LIGNE (colonne 4 à la fin). */
    grid-template-columns: 96px auto auto minmax(240px, 1fr);
    gap: 16px;
    align-items: start
}

/* Presence d'un champ « points » (select ou valeur fixe) : colonne 4 bornee,
 * la zone de gravure prend la colonne 5 et reste la plus large. */
.cart-line__grid:has(> .cart-line__field > select[name^="points"]),
.cart-line__grid:has(> .cart-line__field > input[name^="points"]) {
    grid-template-columns: 96px auto auto minmax(160px, 220px) minmax(300px, 1fr)
}

/* Le libellé des radios est large : on le borne pour que la zone de gravure
 * garde le reste de la ligne. */
.cart-line__grid > .cart-line__field:has(> .radio-group) {
    max-width: 240px
}

.cart-line__media {
    grid-row: 1 / 2;
    align-self: start
}

.cart-line__media img {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface)
}

.cart-line__label {
    display: block;
    margin-bottom: 6px;
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted)
}

.cart-line__value {
    margin: 0;
    font-weight: 700
}

.cart-line__field select,
.cart-line__field input[type="text"],
.cart-line__field input[type="number"] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit
}

/* Zone de gravure : meme LIGNE que les radios de type, a droite, jusqu'au
 * bord droit du cart (et non plus sous l'image). Les textes a graver
 * n'apparaissent que si la gravure est cochée, a DROITE de la case. */
.cart-line__field--gravure {
    grid-column: 4 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px
}

/* Si le champ « points » occupe la colonne 4, la gravure prend la 5. */
.cart-line__grid:has(> .cart-line__field > select[name^="points"]) > .cart-line__field--gravure,
.cart-line__grid:has(> .cart-line__field > input[name^="points"]) > .cart-line__field--gravure {
    grid-column: 5 / -1
}

/* La case doit pouvoir se retrecir (texte qui passe a la ligne) plutot que
 * deborder de la carte sur mobile. */
.cart-line__field--gravure .checkbox-field {
    flex: 0 1 auto;
    min-width: 0
}

.cart-line__gravure-texte {
    display: none;
    flex: 1 1 160px;
    min-width: 0
}

.cart-line:has(input[name^="gravure"]:checked) .cart-line__gravure-texte {
    display: block
}

.cart-line__field {
    min-width: 0
}

.cart-line__remove {
    grid-column: 1 / -1;
    text-align: right
}

.qty-stepper {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.qty-stepper input {
    width: 64px;
    text-align: center
}

/* Flèches du champ numérique retirées : la quantité ne change qu'après
 * validation (« Mettre à jour »), les flèches laisseraient croire le contraire. */
.qty-stepper input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield
}

.qty-stepper input[type="number"]::-webkit-outer-spin-button,
.qty-stepper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.qty-stepper__btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer
}

.qty-stepper__btn:hover,
.qty-stepper__btn:focus-visible {
    border-color: var(--green);
    background: var(--green-soft)
}

.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 14px
}

.radio-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600
}

.link-supprimer {
    border: 0;
    background: none;
    color: #b3261e;
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer
}

.link-supprimer:hover,
.link-supprimer:focus-visible {
    color: #7f1d1d
}

.devis-form .form-panel + .form-panel {
    margin-top: 28px
}

/* Bloc coordonnées : mêmes soins que le formulaire de contact de référence
 * (libellés au-dessus des champs, champs pleine largeur, grille regulière). */
#coordonnees label {
    display: block;
    font-size: .88rem;
    font-weight: 800;
    margin-bottom: 18px
}

#coordonnees .form-grid {
    gap: 0 16px
}

#coordonnees input:not([type="checkbox"]):not([type="hidden"]):not(.hp),
#coordonnees textarea {
    display: block;
    width: 100%;
    margin-top: 7px;
    padding: 13px;
    border: 1px solid #bfc6b8;
    border-radius: 3px;
    background: #fff;
    font: inherit;
    font-weight: 400
}

#coordonnees ::placeholder {
    color: #8a9183;
    font-weight: 400;
    opacity: 1
}

#coordonnees input:not([type="checkbox"]):focus,
#coordonnees textarea:focus {
    outline: 3px solid rgb(123 186 45 / .28);
    border-color: var(--green-dark)
}

#coordonnees textarea {
    resize: vertical;
    min-height: 120px
}

#coordonnees input[type="checkbox"] {
    width: auto
}

#coordonnees .button {
    margin-right: 10px
}

/* ---------------------------------------------- plan du site */
.sitemap-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 36px
}

.sitemap-list--two {
    columns: 2;
    column-gap: 24px
}

/* Palier intermediaire (tablette / fenetre etroite) : les colonnes
 * « image + quantite + type + points + gravure » ne tiennent plus sur une
 * ligne sans chevauchement. La zone de gravure passe alors sur une deuxieme
 * ligne, a droite de l'image, sur toute la largeur restante. */
@media (min-width: 641px) and (max-width: 1150px) {
    .cart-line__grid {
        gap: 12px;
        grid-template-columns: 96px auto minmax(140px, 1fr)
    }

    .cart-line__grid:has(> .cart-line__field > select[name^="points"]),
    .cart-line__grid:has(> .cart-line__field > input[name^="points"]) {
        grid-template-columns: 96px auto minmax(140px, 1fr) minmax(120px, 180px)
    }

    .cart-line__field--gravure,
    .cart-line__grid:has(> .cart-line__field > select[name^="points"]) > .cart-line__field--gravure,
    .cart-line__grid:has(> .cart-line__field > input[name^="points"]) > .cart-line__field--gravure {
        grid-column: 2 / -1;
        grid-row: 2
    }

    .cart-line__media {
        grid-row: 1
    }

    .cart-line__remove {
        grid-row: 3
    }
}

@media (max-width: 640px) {
    .cart-line__grid,
    .cart-line__grid:has(> .cart-line__field > select[name^="points"]),
    .cart-line__grid:has(> .cart-line__field > input[name^="points"]) {
        grid-template-columns: 1fr
    }

    .cart-line__media {
        grid-row: auto;
        justify-self: center
    }

    .cart-line__field--gravure,
    .cart-line__grid:has(> .cart-line__field > select[name^="points"]) > .cart-line__field--gravure,
    .cart-line__grid:has(> .cart-line__field > input[name^="points"]) > .cart-line__field--gravure {
        grid-column: auto
    }

    .cart-line__media img {
        margin: auto
    }

    .sitemap-list--two {
        columns: 1
    }
}

/* =============================== BOUTIQUE =============================== */
/* Colonne de filtres à gauche + grille pleine largeur (mise en page
   WordPress de normaverif.com). */
.shop-container {
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 40px)
}

.shop-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: clamp(24px, 3vw, 56px);
    align-items: start
}

.shop-sidebar {
    position: sticky;
    top: 100px
}

.shop-search {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px
}

.shop-search input[type="search"] {
    width: 100%;
    padding: 12px 18px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    font: inherit
}

.shop-search input[type="search"]:focus {
    outline: 3px solid rgb(123 186 45 / .28);
    border-color: var(--green-dark)
}

.shop-search .button {
    align-self: center;
    padding-inline: 34px
}

.shop-all {
    display: block;
    text-align: center;
    padding: 8px 14px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: inherit;
    font-weight: 800;
    text-decoration: none
}

.shop-all:hover,
.shop-all:focus-visible {
    border-color: var(--green);
    color: var(--green-dark)
}

.shop-cats h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: .84rem;
    font-weight: 800
}

.shop-cats h2::before {
    content: "";
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--green)
}

.shop-cats__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px
}

.shop-cat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 7px;
    border-radius: 6px;
    color: inherit;
    font-size: .88rem;
    text-decoration: none
}

.shop-cat:hover,
.shop-cat:focus-visible {
    background: var(--green-soft)
}

.shop-cat__bullet {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    border: 2px solid #bfc6b8;
    border-radius: 50%;
    background: var(--white)
}

.shop-cat.is-active .shop-cat__bullet {
    border-color: var(--green-dark);
    background: var(--green-dark);
    box-shadow: inset 0 0 0 2px var(--white)
}

.shop-cat.is-active .shop-cat__name {
    font-weight: 800;
    color: var(--green-dark)
}

.shop-cat__name {
    flex: 1;
    min-width: 0
}

.shop-cat__count {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--surface);
    font-size: .7rem;
    font-weight: 700;
    text-align: center
}

.shop-intro {
    margin-bottom: 30px;
    padding: 16px 22px;
    border-left: 4px solid var(--green);
    border-radius: 0 8px 8px 0;
    background: var(--surface);
    color: var(--muted)
}

@media (max-width: 900px) {
    .shop-layout {
        grid-template-columns: 1fr
    }

    .shop-sidebar {
        position: static
    }

    .shop-cats__list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
    }
}

/* =============================== TITRES ================================ */
/* Un titre ne déborde jamais de son cadre (mots longs, grilles, cartes). */
.page h1,
.page h2,
.page h3,
.cart-line__title,
.product-card__body h3,
.tarif-card__titre {
    max-width: 100%;
    overflow-wrap: break-word;
    hyphens: auto
}

.product-card,
.product-card__body {
    min-width: 0
}

/* ======================= TABLEAU EN CARTES (MOBILE) ==================== */
.tarif-cards {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0
}

.tarif-card {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white)
}

.tarif-card__titre {
    margin: 0 0 12px;
    font-size: 1.02rem;
    font-weight: 800
}

.tarif-card__champs {
    margin: 0;
    display: grid;
    gap: 7px
}

.tarif-card__champs > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--border)
}

.tarif-card__champs > div:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.tarif-card__champs dt {
    flex: 0 1 auto;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted)
}

.tarif-card__champs dd {
    flex: 1 1 auto;
    margin: 0;
    text-align: right;
    font-size: .9rem;
    font-weight: 600;
    overflow-wrap: break-word
}

.tarif-card__prix {
    font-weight: 800;
    white-space: nowrap
}

@media (max-width: 768px) {
    .table-wrap {
        display: none
    }

    .tarif-cards {
        display: grid;
        gap: 14px
    }
}

/* ==================== SECTION EN IFRAME (FRAGMENT) ==================== */
/* La page parente (boutique, panier) n héberge que l'iframe : le fragment
 * ?embed=1 rend la section section--tight seule. Le script du fragment
 * ajuste la hauteur ici ; sans JS, la hauteur fixe fait défaut (l'iframe
 * devient alors scrollable en interne). */
.nv-embed-host {
    width: 100%
}

.nv-embed-frame {
    display: block;
    width: 100%;
    height: 1400px;
    border: 0;
    background: var(--white)
}

/* Le fragment reprend exactement le rendu de la section dans la page. */
body.nv-embed {
    background: var(--white)
}