/* =========================================================================
   Prodecta — Section « Nos clients » : carte de France des réalisations.
   Réutilise les variables de index.html (--green, --dark-green, --bg,
   --border, --text, --radius…). Aucune couleur nouvelle hors palette.

   Parti pris de mise en page : la section reste courte. La recherche est
   posée SUR la carte, le tri vit dans l'en-tête de la liste, les filtres
   tiennent sur une seule ligne — aucune de ces commandes ne consomme de
   hauteur de page.
   ========================================================================= */

#nos-clients {
    position: relative;
    overflow: hidden;
    /* La règle globale `section { content-visibility: auto }` empêche Leaflet
       de mesurer son conteneur au moment de l'initialisation : le cadrage et
       les tuiles restent décalés. Cette section est donc toujours mise en page. */
    content-visibility: visible;
    contain-intrinsic-size: none;
    /* Teinte de fond + halos verts + quadrillage géographique très discret.
       Les deux extrémités sont dissoutes par ::before / ::after ci-dessous. */
    background:
        linear-gradient(rgba(27, 107, 68, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 107, 68, .045) 1px, transparent 1px),
        radial-gradient(720px 320px at 14% 26%, rgba(43, 222, 115, .13), transparent 62%),
        radial-gradient(660px 360px at 90% 32%, rgba(27, 107, 68, .10), transparent 60%),
        #EFEBE1;
    background-size: 56px 56px, 56px 56px, auto, auto, auto;
    padding: 46px 0 60px;
    /* Le menu est fixe : l'ancre #nos-clients doit s'arrêter en dessous. */
    scroll-margin-top: 92px;
}

/* Fondu haut : la teinte naît progressivement dans le crème du site.
   Deux dégradés de bord plutôt qu'un masque plein cadre — même rendu,
   sans surcoût de composition. */
#nos-clients::before,
#nos-clients::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 170px;
    pointer-events: none;
}

#nos-clients::before {
    top: 0;
    background: linear-gradient(180deg, var(--bg) 0%, rgba(244, 241, 234, 0) 100%);
}

/* Fondu bas : symétrique, la section se dissout avant la suivante. */
#nos-clients::after {
    bottom: 0;
    background: linear-gradient(0deg, var(--bg) 0%, rgba(244, 241, 234, 0) 100%);
}

#nos-clients>.container {
    position: relative;
    z-index: 1;
}

/* Les éléments de cette section déclarent des `display` explicites :
   sans cette règle, l'attribut [hidden] ne les masquerait pas. */
#nos-clients [hidden] {
    display: none !important;
}

/* Le menu accueille un lien « Nos clients » de plus : entre 1201 px (seuil où
   les liens réapparaissent) et 1360 px, on resserre légèrement la barre pour
   qu'elle ne déborde jamais. */
@media (min-width: 1201px) and (max-width: 1360px) {

    /* Sélecteurs volontairement plus spécifiques : cette feuille est chargée
       avant le <style> principal de index.html. */
    nav .nav-links {
        gap: 17px;
    }

    nav .nav-links a {
        font-size: 13.5px;
    }
}

/* ------------------------------------------------------- en-tête minimal */
.cm-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 6px;
}

.cm-head .section-title {
    font-size: clamp(26px, 3.4vw, 41px);
    letter-spacing: -.9px;
    margin-bottom: 0;
}

/* Les chiffres tiennent lieu de sous-titre : lus d'un trait, ils disent
   l'échelle du travail. En pastilles, ils ajoutaient une rangée de bruit
   entre le titre et la carte. */
.cm-stats {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 10px 26px;
    margin: 18px auto 22px;
    padding: 0;
}

.cm-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    position: relative;
}

/* Séparateur discret entre deux chiffres, jamais après le dernier. */
.cm-stat + .cm-stat::before {
    content: '';
    position: absolute;
    left: -13px;
    top: 50%;
    width: 4px;
    height: 4px;
    margin-top: -2px;
    border-radius: 50%;
    background: rgba(8, 26, 17, .2);
}

.cm-stat-num {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--dark-green);
}

.cm-stat-lbl {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-mid);
}

/* ------------------------------------------- filtres : une seule ligne */
.cm-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.cm-filters::-webkit-scrollbar {
    display: none;
}

.cm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-mid);
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(8, 26, 17, .1);
    border-radius: 100px;
    padding: 8px 13px;
    min-height: 36px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color .2s, border-color .2s, background .2s;
}

.cm-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c, var(--dark-green));
    flex-shrink: 0;
}

.cm-chip-n {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-dim);
    background: rgba(0, 0, 0, .05);
    border-radius: 100px;
    padding: 1px 6px;
}

.cm-chip:hover {
    border-color: rgba(27, 107, 68, .4);
    color: var(--text);
}

.cm-chip[aria-pressed="true"] {
    background: var(--dark-green);
    border-color: var(--dark-green);
    color: #fff;
}

.cm-chip[aria-pressed="true"] .cm-chip-n {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.cm-chip:focus-visible,
.cm-reset:focus-visible {
    outline: 2px solid var(--dark-green);
    outline-offset: 2px;
}

/* Réinitialisation : pastille ronde en fin de ligne, pour que la barre de
   filtres tienne toujours sur une seule ligne, filtre actif ou non. */
.cm-reset {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    font-family: inherit;
    color: var(--dark-green);
    background: rgba(27, 107, 68, .09);
    border: 1.5px dashed rgba(27, 107, 68, .34);
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.cm-reset svg {
    width: 15px;
    height: 15px;
}

.cm-reset:hover {
    background: rgba(27, 107, 68, .16);
}

/* -------------------------------------------------------------- layout */
.cm-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* ------------------------------------------------------------- la carte */
.cm-map-shell {
    position: relative;
    height: 620px;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .7);
    background: #EDEAE2;
    /* Ombre en deux temps : un contact net, puis une portée large. La carte
       se pose sur la page au lieu d'y être découpée. */
    box-shadow:
        0 1px 2px rgba(20, 30, 24, .06),
        0 2px 8px rgba(20, 30, 24, .04),
        0 30px 70px -24px rgba(20, 30, 24, .36);
}

/* Vignettage : les bords du fond de carte se fondent dans le cadre plutôt
   que de s'arrêter au couteau. */
.cm-map-shell::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 500;
    pointer-events: none;
    border-radius: inherit;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .55),
        inset 0 0 60px 12px rgba(237, 234, 226, .55);
}

.cm-map {
    position: absolute;
    inset: 0;
    background: #EDEAE2;
}

/* Fond de carte adouci pour coller à la charte crème/verte */
.cm-map .leaflet-tile-pane {
    transition: filter .35s ease;
    filter: saturate(.72) contrast(.96) brightness(1.03) sepia(.12);
}

.cm-map .leaflet-container {
    background: #EDEAE2;
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
}

.cm-map .leaflet-control-attribution {
    background: rgba(255, 255, 255, .78);
    font-size: 10px;
    color: var(--text-dim);
    padding: 2px 7px;
    border-radius: 8px 0 0 0;
}

.cm-map .leaflet-control-attribution a {
    color: var(--dark-green);
}

/* ------------------------------- recherche, posée sur la carte */
.cm-search {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 650;
    width: min(320px, calc(100% - 24px));
}

.cm-search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: var(--text-dim);
    pointer-events: none;
}

.cm-search input {
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    background: rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 11px 40px 11px 41px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .10);
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none;
    appearance: none;
}

.cm-search input::-webkit-search-cancel-button {
    display: none;
}

.cm-search input::placeholder {
    color: var(--text-dim);
}

.cm-search input:focus {
    outline: none;
    border-color: var(--dark-green);
    box-shadow: 0 0 0 3px rgba(27, 107, 68, .16), 0 4px 18px rgba(0, 0, 0, .10);
}

.cm-search-clear {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .06);
    color: var(--text-mid);
    cursor: pointer;
    transition: background .2s, color .2s;
}

.cm-search-clear:hover {
    background: rgba(27, 107, 68, .14);
    color: var(--dark-green);
}

.cm-search-clear:focus-visible {
    outline: 2px solid var(--dark-green);
    outline-offset: 2px;
}

/* squelette de chargement */
.cm-map-skeleton {
    position: absolute;
    inset: 0;
    z-index: 500;
    display: grid;
    place-items: center;
    background:
        radial-gradient(520px 320px at 50% 45%, rgba(43, 222, 115, .10), transparent 70%),
        linear-gradient(180deg, #F1EEE6, #E7E3D9);
}

.cm-map-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
    background-size: 220% 100%;
    animation: cm-shimmer 1.6s linear infinite;
}

@keyframes cm-shimmer {
    from {
        background-position: 140% 0;
    }

    to {
        background-position: -40% 0;
    }
}

.cm-skel-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-dim);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .4px;
}

.cm-skel-ring {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid rgba(27, 107, 68, .18);
    border-top-color: var(--dark-green);
    animation: cm-spin .9s linear infinite;
}

@keyframes cm-spin {
    to {
        transform: rotate(360deg);
    }
}

/* état d'erreur */
.cm-map-error {
    position: absolute;
    inset: 0;
    z-index: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 32px;
    background: linear-gradient(180deg, #F1EEE6, #E7E3D9);
    color: var(--text-mid);
    font-size: 14.5px;
    line-height: 1.6;
}

.cm-map-error strong {
    color: var(--text);
    font-size: 16px;
}

/* garde-fou tactile : la carte ne capte le doigt qu'après un appui */
.cm-map-gesture {
    position: absolute;
    inset: 0;
    z-index: 620;
    display: grid;
    place-items: center;
    background: rgba(26, 26, 26, .28);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    cursor: pointer;
    border: none;
    width: 100%;
    font-family: inherit;
}

.cm-map-gesture span {
    background: rgba(255, 255, 255, .95);
    color: var(--text);
    font-size: 13.5px;
    font-weight: 600;
    padding: 11px 20px;
    border-radius: 100px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .18);
}

/* contrôles personnalisés */
.cm-map-ctrls {
    position: absolute;
    right: 12px;
    bottom: 22px;
    z-index: 610;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cm-ctrl {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--dark-green);
    cursor: pointer;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .10);
    transition: transform .18s, background .18s, box-shadow .18s;
}

.cm-ctrl:hover {
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(27, 107, 68, .18);
}

.cm-ctrl:focus-visible {
    outline: 2px solid var(--dark-green);
    outline-offset: 2px;
}

.cm-ctrl svg {
    width: 18px;
    height: 18px;
}

/* ------------------------------------------ variantes de visuel client */

/* Photo d'établissement (pas de logo disponible) : elle remplit la pastille
   au lieu d'y flotter avec des marges. */
.cm-card-logo img.is-photo,
.cm-detail-logo img.is-photo {
    object-fit: cover;
    padding: 0;
}

/* Logo fourni en blanc : le fond sombre est porté par l'image elle-même,
   ce qui évite d'avoir à styler son conteneur. */
.cm-pin-body img.is-dark,
.cm-card-logo img.is-dark,
.cm-detail-logo img.is-dark {
    background: #1c1c1c;
    padding: 7px;
}

.cm-card-logo img.is-dark,
.cm-detail-logo img.is-dark {
    padding: 6px;
}

/* ------------------------------------------------------------- marqueurs */
.cm-pin {
    background: none !important;
    border: none !important;
}

.cm-pin-btn {
    position: relative;
    display: block;
    width: 60px;
    height: 71px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    transform-origin: 50% 100%;
    transition: transform .3s cubic-bezier(.23, 1, .32, 1);
}

@media (hover: hover) and (pointer: fine) {
    .cm-pin-btn:hover {
        transform: translateY(-6px) scale(1.1);
        z-index: 5;
    }

    /* Le nom du lieu n'apparaît qu'au survol : trente-quatre étiquettes
       permanentes rendraient la carte illisible. */
    .cm-pin-btn:hover .cm-pin-name {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.cm-pin-btn:focus-visible {
    outline: none;
}

.cm-pin-btn:focus-visible .cm-pin-body {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--dark-green);
}

.cm-pin-btn:focus-visible .cm-pin-name {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Anneau aux couleurs du secteur, liseré blanc, puis la photo. */
.cm-pin-body {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 3px;
    background: var(--c, var(--dark-green));
    box-shadow:
        0 0 0 2px #fff,
        0 6px 18px rgba(12, 20, 15, .3);
    transition: box-shadow .3s cubic-bezier(.23, 1, .32, 1);
}

.cm-pin-face {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #EDEAE2;
}

/* !important : leaflet.css impose `width: auto` aux images de marqueur. */
.cm-pin-face img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    padding: 0 !important;
    display: block;
}

.cm-pin-face.is-brandfill {
    display: grid;
    place-items: center;
    background:
        radial-gradient(120% 100% at 30% 0%, color-mix(in srgb, var(--c, #1B6B44) 55%, #fff), transparent 65%),
        linear-gradient(150deg, var(--c, #1B6B44), color-mix(in srgb, var(--c, #1B6B44) 45%, #000));
}

.cm-pin-initials {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -.4px;
    color: #fff;
}

/* La marque signe la pastille, sans manger la photo. */
.cm-pin-mark {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.cm-pin-mark.is-dark {
    background: #1c1c1c;
}

.cm-pin-mark img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain;
    padding: 3px !important;
    display: block;
}

.cm-pin-mark img.is-photo {
    object-fit: cover;
    padding: 0 !important;
}

/* Pointe fine sous la pastille : elle ancre le lieu sans alourdir. */
.cm-pin-tail {
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background: var(--c, var(--dark-green));
    transform: rotate(45deg);
    border-radius: 0 0 3px 0;
    box-shadow: 2px 2px 6px rgba(12, 20, 15, .2);
}

.cm-pin-name {
    position: absolute;
    left: 50%;
    top: calc(100% + 2px);
    transform: translateX(-50%) translateY(-4px);
    max-width: 148px;
    padding: 4px 10px;
    border-radius: 100px;
    background: rgba(12, 20, 15, .82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease, transform .24s cubic-bezier(.23, 1, .32, 1);
}

/* Pose de la pastille à l'arrivée de la carte : elle tombe de quelques
   pixels et se stabilise, sans rebond. */
.cm-pin-btn.is-landing {
    animation: cmPinLand .55s cubic-bezier(.23, 1, .32, 1) both;
}

@keyframes cmPinLand {
    from {
        opacity: 0;
        transform: translateY(-14px) scale(.82);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cm-pin-btn.is-landing {
        animation: none;
    }
}

/* Visée depuis la liste : la pastille se lève et se nomme, sans devenir
   la sélection — le clic reste le seul geste qui engage. */
.cm-pin-btn.is-hovered {
    transform: translateY(-6px) scale(1.1);
    z-index: 6;
}

.cm-pin-btn.is-hovered .cm-pin-body {
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 6px color-mix(in srgb, var(--c, #1B6B44) 26%, transparent),
        0 12px 26px rgba(12, 20, 15, .3);
}

.cm-pin-btn.is-hovered .cm-pin-name {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Les autres reculent : une seule pastille compte à la fois. */
.cm-pin-btn.is-dimmed {
    opacity: .38;
    filter: saturate(.5);
}

.cm-map.is-focused .leaflet-tile-pane {
    filter: saturate(.82) brightness(1.02);
}

.cm-pin-btn,
.cm-pin-btn.is-dimmed {
    transition:
        transform .3s cubic-bezier(.23, 1, .32, 1),
        opacity .28s ease,
        filter .28s ease;
}

.cm-pin-btn.is-active {
    transform: translateY(-7px) scale(1.16);
    z-index: 10;
}

.cm-pin-btn.is-active .cm-pin-body {
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 7px color-mix(in srgb, var(--c, #1B6B44) 32%, transparent),
        0 12px 28px rgba(12, 20, 15, .34);
}

.cm-pin-btn.is-active .cm-pin-name {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.cm-pin-btn.is-active::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 30px;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border-radius: 50%;
    border: 2px solid var(--c, var(--dark-green));
    opacity: .5;
    animation: cm-pulse 2.1s cubic-bezier(.23, 1, .32, 1) infinite;
    pointer-events: none;
}

@keyframes cm-pulse {
    0% {
        transform: scale(1);
        opacity: .45;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Les pastilles se recouvrent quand les adresses sont proches : celle qui est
   survolée ou sélectionnée passe devant la pile. */
.leaflet-marker-icon.cm-pin.is-front {
    z-index: 1000 !important;
}

/* Carte étroite : mêmes pastilles, réduites pour tenir dans le cadre. */
.cm-map.is-compact .cm-pin-btn {
    width: 46px;
    height: 55px;
}

.cm-map.is-compact .cm-pin-body {
    width: 46px;
    height: 46px;
    padding: 2.5px;
}

.cm-map.is-compact .cm-pin-mark {
    width: 19px;
    height: 19px;
}

.cm-map.is-compact .cm-pin-initials {
    font-size: 14px;
}

.cm-map.is-compact .cm-pin-tail {
    width: 10px;
    height: 10px;
    margin-left: -5px;
}

.cm-map.is-compact .cm-pin-btn.is-active::before {
    top: 23px;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
}

@media (prefers-reduced-motion: reduce) {
    .cm-pin-btn,
    .cm-pin-body,
    .cm-pin-name {
        transition-duration: .01ms;
    }

    .cm-pin-btn.is-active::before {
        animation: none;
    }
}

/* ------------------------------------------------------- fiche détaillée */
.cm-detail {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 640;
    width: min(344px, calc(100% - 28px));
    /* La fiche ne doit jamais dépasser du cadre de la carte : elle vit
       dedans, elle ne flotte pas par-dessus la page. */
    max-height: calc(100% - 28px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 22px;
    box-shadow:
        0 2px 6px rgba(20, 30, 24, .06),
        0 24px 60px -12px rgba(20, 30, 24, .32);
    transform: translateY(18px) scale(.97);
    opacity: 0;
    pointer-events: none;
    transition: transform .38s cubic-bezier(.22, 1, .36, 1), opacity .28s ease-out;
}

.cm-detail.is-open {
    /* Ouverte, elle prend la main sur la recherche et les contrôles. */
    z-index: 660;
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* ---- visuel de couverture : encadré dans la fiche, comme une photo posée
   sur une carte de lieu, plutôt que collé bord à bord. */
.cm-detail-media {
    position: relative;
    margin: 9px 9px 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 16px;
    background: color-mix(in srgb, var(--c, #1B6B44) 14%, #f3f1ec);
}

.cm-detail-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    animation: cmCoverIn .9s cubic-bezier(.22, 1, .36, 1) both;
}

.cm-detail-photo.is-brandfill {
    background:
        radial-gradient(120% 100% at 20% 0%, color-mix(in srgb, var(--c, #1B6B44) 55%, #fff) 0%, transparent 60%),
        linear-gradient(140deg, var(--c, #1B6B44), color-mix(in srgb, var(--ink, #12452c) 82%, #000));
}

@keyframes cmCoverIn {
    from { transform: scale(1.14); opacity: .4; }
    to   { transform: scale(1.04); opacity: 1; }
}

.cm-detail-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(12, 20, 15, .72) 0%,
        rgba(12, 20, 15, .28) 42%,
        rgba(12, 20, 15, 0) 72%);
}

/* Le logo client repose sur la photo : la marque est le premier repère. */
.cm-detail-brand {
    position: absolute;
    left: 13px;
    bottom: 11px;
    width: 62px;
    height: 62px;
    border-radius: 16px;
    background: #fff;
    border: 2px solid rgba(255, 255, 255, .9);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
    display: grid;
    place-items: center;
    overflow: hidden;
    animation: cmBrandIn .5s cubic-bezier(.23, 1, .32, 1) .12s both;
}

@keyframes cmBrandIn {
    from { transform: translateY(10px) scale(.8); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.cm-detail-brand img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 7px;
}

.cm-detail-brand img.is-photo {
    object-fit: cover;
    padding: 0;
}

.cm-detail-brand .cm-mono {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    background: var(--c, var(--dark-green));
}

/* Signal « c'est en ligne, vous pouvez entrer tout de suite ». */
.cm-detail-live {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px 5px 9px;
    border-radius: 100px;
    background: rgba(12, 20, 15, .62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .3px;
}

.cm-detail-live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green, #2BDE73);
    box-shadow: 0 0 0 0 rgba(43, 222, 115, .7);
}


.cm-detail-body {
    padding: 12px 13px 13px;
}

/* Le nom lit à gauche, l'action se prend à droite : l'œil n'a qu'un
   aller-retour à faire, et la fiche reste courte. */
.cm-detail-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cm-detail-txt {
    min-width: 0;
    flex: 1;
}

.cm-detail-cat {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .9px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 100px;
    color: var(--ink, var(--dark-green));
    background: color-mix(in srgb, var(--c, #1B6B44) 14%, transparent);
}

.cm-detail-name {
    margin: 5px 0 0;
    font-size: 16.5px;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.2px;
    color: var(--text);
}

.cm-detail-addr {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-mid);
}

.cm-detail-addr svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--dark-green);
}



/* Action principale : entrer dans l'expérience, aux couleurs de la marque. */
/* Vert Prodecta plutôt que la couleur du client : entrer dans une visite est
   une action Prodecta, et surtout, dégrader trente teintes de marque vers du
   noir donnait autant de boutons ternes. Même dégradé que les boutons de la
   landing fitness, avec le reflet qui le balaie au survol. */
.cm-btn-enter {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 12px 20px;
    border-radius: 100px;
    white-space: nowrap;
    background: linear-gradient(165deg, #0EA765, #078046 55%, #05623A);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.1px;
    text-decoration: none;
    box-shadow:
        inset 0 1px rgba(255, 255, 255, .22),
        0 1px 2px rgba(8, 26, 17, .14),
        0 12px 28px -10px rgba(6, 122, 67, .55);
    /* Courbe plus franche que les easings natifs : l'action doit paraître
       instantanée au premier tiers du mouvement. */
    transition:
        transform .2s cubic-bezier(.23, 1, .32, 1),
        box-shadow .24s cubic-bezier(.23, 1, .32, 1),
        filter .24s ease;
}

.cm-btn-enter::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
    transform: translateX(-130%);
    transition: transform .55s;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .cm-btn-enter:hover {
        transform: translateY(-2px);
        filter: brightness(1.06);
        box-shadow:
            inset 0 1px rgba(255, 255, 255, .22),
            0 2px 4px rgba(8, 26, 17, .14),
            0 18px 38px -10px rgba(6, 122, 67, .6);
    }

    .cm-btn-enter:hover::after {
        transform: translateX(130%);
    }
}

/* Le bouton répond à la pression : sans ça, il paraît inerte. */
.cm-btn-enter:active {
    transform: scale(.975);
}

.cm-btn-second:active {
    transform: scale(.98);
}

.cm-btn-enter.is-quiet {
    background: linear-gradient(165deg, #2E7D5B, #1B6B44 55%, #145238);
}

.cm-btn-enter svg {
    flex-shrink: 0;
}

.cm-btn-second {
    display: block;
    margin-top: 10px;
    padding: 10px 16px;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-mid);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: border-color .2s, color .2s, background .2s;
}

@media (hover: hover) and (pointer: fine) {
    .cm-btn-second:hover {
        border-color: var(--dark-green);
        color: var(--dark-green);
        background: rgba(27, 107, 68, .05);
    }
}

.cm-btn-enter:focus-visible,
.cm-btn-second:focus-visible {
    outline: 2px solid var(--dark-green);
    outline-offset: 3px;
}

.cm-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(165deg, #0EA765, #078046 55%, #05623A);
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: 13.5px;
    padding: 11px 18px;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 1px rgba(255, 255, 255, .22), 0 8px 20px -12px rgba(6, 122, 67, .5);
    transition: transform .25s, box-shadow .25s, filter .25s;
}

@media (hover: hover) and (pointer: fine) {
    .cm-btn-primary:hover {
        transform: translateY(-1px);
        opacity: 1;
        filter: brightness(1.06);
        box-shadow: inset 0 1px rgba(255, 255, 255, .22), 0 10px 24px -12px rgba(6, 122, 67, .55);
    }
}

.cm-btn-primary:active,
.cm-btn-ghost:active,
.cm-btn-second:active {
    transform: scale(.97);
}

.cm-btn-primary:focus-visible,
.cm-btn-ghost:focus-visible {
    outline: 2px solid var(--dark-green);
    outline-offset: 2px;
}

.cm-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--text-mid);
    font-family: inherit;
    font-weight: 600;
    font-size: 13px;
    padding: 11px 16px;
    border: 1px solid var(--border);
    border-radius: 100px;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}

.cm-btn-ghost:hover {
    border-color: var(--dark-green);
    color: var(--dark-green);
}

/* Posé sur la photo de couverture : il lui faut son propre contraste. */
.cm-detail-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: rgba(12, 20, 15, .5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.cm-detail-close:hover {
    background: rgba(12, 20, 15, .78);
    transform: scale(1.08);
}

.cm-detail-close:focus-visible {
    outline: 2px solid var(--dark-green);
    outline-offset: 2px;
}

/* -------------------------------------------------------------- la liste */
.cm-list-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cm-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px 9px;
}

.cm-count {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}

/* tri : logé dans l'en-tête de la liste, pas de ligne dédiée */
.cm-sort {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.cm-sort label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
}

.cm-sort select {
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    background-color: rgba(255, 255, 255, .82);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 7px 26px 7px 12px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 12px;
}

.cm-sort select:focus-visible {
    outline: 2px solid var(--dark-green);
    outline-offset: 2px;
}

.cm-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* La dernière carte visible se dissout au lieu d'être tranchée net :
       on voit qu'il reste des réalisations en dessous. */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 46px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 46px), transparent 100%);
    /* Alignée sur la hauteur de la carte : les deux colonnes se terminent
       au même trait. */
    height: 620px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px 8px 2px 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(27, 107, 68, .3) transparent;
}

.cm-list::-webkit-scrollbar {
    width: 6px;
}

.cm-list::-webkit-scrollbar-thumb {
    background: rgba(27, 107, 68, .28);
    border-radius: 100px;
}

.cm-item[hidden] {
    display: none;
}

.cm-card {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    transition:
        border-color .3s cubic-bezier(.23, 1, .32, 1),
        box-shadow .3s cubic-bezier(.23, 1, .32, 1),
        transform .3s cubic-bezier(.23, 1, .32, 1);
}

@media (hover: hover) and (pointer: fine) {
    .cm-card:hover {
        border-color: rgba(27, 107, 68, .28);
        box-shadow:
            0 1px 2px rgba(20, 30, 24, .05),
            0 18px 38px -16px rgba(20, 30, 24, .32);
        transform: translateY(-3px);
    }

    .cm-card:hover .cm-card-photo {
        transform: scale(1.06);
    }
}

.cm-card-main:active {
    transform: scale(.99);
}

.cm-item.is-selected .cm-card {
    border-color: var(--dark-green);
    box-shadow: 0 0 0 3px rgba(43, 222, 115, .22), 0 14px 32px -14px rgba(27, 107, 68, .4);
}

.cm-card-main {
    display: block;
    width: 100%;
    padding: 0;
    text-align: left;
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    transition: transform .18s cubic-bezier(.23, 1, .32, 1);
}

.cm-card-main:focus-visible {
    outline: 2px solid var(--dark-green);
    outline-offset: -3px;
    border-radius: 18px;
}

/* Format panoramique : la photo reste généreuse, mais trois réalisations
   tiennent maintenant dans la hauteur de la carte au lieu de deux. */
.cm-card-media {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    background: color-mix(in srgb, var(--c, #1B6B44) 14%, #f2f0eb);
}

.cm-card-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.23, 1, .32, 1);
}

.cm-card-photo.is-brandfill {
    display: block;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(120% 100% at 25% 0%, color-mix(in srgb, var(--c, #1B6B44) 50%, #fff) 0%, transparent 62%),
        linear-gradient(140deg, var(--c, #1B6B44), color-mix(in srgb, var(--ink, #12452c) 85%, #000));
}

.cm-card-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(10, 17, 13, .9) 0%,
        rgba(10, 17, 13, .55) 32%,
        rgba(10, 17, 13, .08) 62%,
        rgba(10, 17, 13, .3) 100%);
    pointer-events: none;
    transition: opacity .3s ease;
}

.cm-card-logo {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.cm-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.cm-card-logo img.is-photo {
    object-fit: cover;
    padding: 0;
}

.cm-mono {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    background: var(--c, var(--dark-green));
}

.cm-card-badge {
    position: absolute;
    right: 10px;
    top: 11px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 68px);
    padding: 4px 10px;
    border-radius: 100px;
    background: rgba(12, 20, 15, .5);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cm-card-badge i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--c, var(--green));
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .22);
    flex-shrink: 0;
}

/* Pied de visuel : identité à gauche, l'entrée dans la visite à droite. */
.cm-card-over {
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 11px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.cm-card-txt {
    min-width: 0;
    flex: 1;
}

.cm-card-name {
    display: block;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.3px;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}

.cm-card-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .86);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}

.cm-card-meta svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

/* Le lien vit hors du bouton — un lien dans un bouton est invalide — mais se
   pose par-dessus le visuel. */
.cm-card-link {
    position: absolute;
    right: 13px;
    bottom: 11px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--ink, var(--dark-green));
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -.1px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(8, 14, 11, .34);
    transition:
        background .22s ease,
        color .22s ease,
        transform .16s cubic-bezier(.23, 1, .32, 1);
}

@media (hover: hover) and (pointer: fine) {
    .cm-card-link:hover {
        /* Même vert que le bouton de la fiche : l'entrée dans une visite a une
           seule couleur sur tout le site. */
        background: linear-gradient(165deg, #0EA765, #078046 55%, #05623A);
        color: #fff;
        opacity: 1;
    }
}

.cm-card-link:active {
    transform: scale(.96);
}

.cm-card-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.cm-card-link svg {
    width: 12px;
    height: 12px;
    transition: transform .24s cubic-bezier(.23, 1, .32, 1);
}

@media (hover: hover) and (pointer: fine) {
    .cm-card-link:hover svg {
        transform: translate(2px, -2px);
    }
}

/* Le nom cède la place au bouton quand les deux cohabitent. */
.cm-card-link ~ .cm-card-main .cm-card-over,
.cm-card-main:has(+ .cm-card-link) .cm-card-over {
    padding-right: 84px;
}

/* Entrée en cascade des premières réalisations. */
.cm-list.is-in > .cm-item:nth-child(-n+6) {
    animation: cmItemIn .5s cubic-bezier(.23, 1, .32, 1) both;
}

.cm-list.is-in > .cm-item:nth-child(1) { animation-delay: 0ms; }
.cm-list.is-in > .cm-item:nth-child(2) { animation-delay: 60ms; }
.cm-list.is-in > .cm-item:nth-child(3) { animation-delay: 120ms; }
.cm-list.is-in > .cm-item:nth-child(4) { animation-delay: 180ms; }
.cm-list.is-in > .cm-item:nth-child(5) { animation-delay: 240ms; }
.cm-list.is-in > .cm-item:nth-child(6) { animation-delay: 300ms; }

@keyframes cmItemIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Survolée depuis la carte : la réalisation se signale dans la liste. */
.cm-item.is-hovered .cm-card {
    border-color: rgba(27, 107, 68, .34);
    box-shadow:
        0 1px 2px rgba(20, 30, 24, .05),
        0 18px 38px -16px rgba(20, 30, 24, .32);
    transform: translateY(-3px);
}

.cm-item.is-hovered .cm-card-photo {
    transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
    .cm-card,
    .cm-card-main,
    .cm-card-photo,
    .cm-card-veil,
    .cm-card-link,
    .cm-card-link svg {
        transition-duration: .01ms;
    }

    .cm-list.is-in > .cm-item:nth-child(-n+6) {
        animation: none;
    }
}

/* état vide */
.cm-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-align: center;
    padding: 38px 20px;
    color: var(--text-mid);
    font-size: 13.5px;
    line-height: 1.55;
    background: #fff;
    border: 1.5px dashed var(--border);
    border-radius: 15px;
}

.cm-empty.is-visible {
    display: flex;
}

.cm-empty strong {
    color: var(--text);
    font-size: 14.5px;
}

.cm-empty svg {
    width: 28px;
    height: 28px;
    color: var(--text-dim);
}

/* ------------------------------------------ CTA final : bandeau compact */
.cm-cta {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    padding: 20px 26px;
    border-radius: var(--radius);
    background:
        radial-gradient(520px 180px at 18% 0%, rgba(43, 222, 115, .15), transparent 72%),
        var(--bg-glass);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(27, 107, 68, .2);
    box-shadow: 0 6px 26px rgba(27, 107, 68, .07);
}

.cm-cta-txt {
    min-width: 0;
}

.cm-cta h3 {
    font-size: clamp(17px, 2.1vw, 21px);
    font-weight: 800;
    line-height: 1.25;
}

.cm-cta p {
    font-size: 13.5px;
    color: var(--text-mid);
    line-height: 1.5;
    margin-top: 5px;
    max-width: 560px;
}

.cm-cta-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cm-cta-actions .cm-btn-ghost {
    background: rgba(255, 255, 255, .7);
}

.cm-seo-note {
    margin: 16px auto 0;
    max-width: 860px;
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-dim);
}

/* ==================================================== TABLETTE ≤ 1024 px */
@media (max-width: 1024px) {
    .cm-layout {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .cm-map-shell {
        height: 420px;
    }

    .cm-list {
        height: auto;
        max-height: 372px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        align-content: start;
    }

    .cm-cta {
        gap: 18px;
    }
}

/* ====================================================== MOBILE ≤ 720 px */
/* ---------------------------------------------------- plein écran carte */

/* Bouton d'ouverture, posé sur la carte. Sur grand écran la carte est déjà
   lisible : il ne sert qu'au doigt. */
.cm-expand {
    position: absolute;
    left: 12px;
    bottom: 14px;
    z-index: 620;
    display: none;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 100px;
    background: rgba(12, 20, 15, .62);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px -6px rgba(8, 14, 11, .5);
    transition: background .22s ease, transform .16s cubic-bezier(.23, 1, .32, 1);
}

.cm-expand svg {
    width: 16px;
    height: 16px;
}

.cm-expand:active {
    transform: scale(.96);
}

.cm-expand:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* La page ne défile plus derrière la carte ouverte. */
body.cm-full-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

@media (max-width: 720px) {
    .cm-expand {
        display: inline-flex;
        /* Au doigt, une cible se vise à 44 px de haut, pas moins. */
        min-height: 44px;
        padding: 12px 18px;
    }

    .cm-chip {
        min-height: 44px;
        padding: 10px 15px;
    }

    .cm-reset {
        width: 44px;
        height: 44px;
    }

    /* Ouverte, la section devient l'écran entier. `100dvh` suit la barre
       d'adresse mobile, que `100vh` ignore. */
    #nos-clients.cm-full {
        position: fixed;
        inset: 0;
        z-index: 1200;
        padding: 0;
        margin: 0;
        background: var(--bg);
        overflow: hidden;
        /* Fondu seul, sans transform : un élément transformé devient le
           conteneur de référence de ses descendants en position fixed, et la
           carte comme le panneau bas se recaleraient sur la section au lieu
           de l'écran. */
        animation: cmFullIn .28s ease-out both;
    }

    @keyframes cmFullIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    #nos-clients.cm-full::before,
    #nos-clients.cm-full::after {
        display: none;
    }

    #nos-clients.cm-full > .container {
        max-width: none;
        height: 100%;
        padding: 0;
    }

    /* Seule la carte reste : titre, chiffres, filtres et liste s'effacent. */
    #nos-clients.cm-full .cm-head,
    #nos-clients.cm-full .cm-stats,
    #nos-clients.cm-full .cm-filters,
    #nos-clients.cm-full .cm-list-col,
    #nos-clients.cm-full .cm-cta,
    #nos-clients.cm-full .cm-seo-note {
        display: none;
    }

    #nos-clients.cm-full .cm-layout {
        display: block;
        height: 100%;
        gap: 0;
    }

    /* Calé sur l'écran lui-même plutôt que sur la chaîne de conteneurs.
       `transform: none` est indispensable : la révélation au scroll (.mrv)
       laisse un translateY sur ce conteneur, qui décalait toute la carte et
       faisait passer le panneau bas sous le bord de l'écran. */
    #nos-clients.cm-full .cm-map-shell,
    #nos-clients.cm-full .cm-map-shell.mrv {
        position: fixed;
        inset: 0;
        height: auto;
        transform: none;
        opacity: 1;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    /* La recherche descend sous l'encoche. */
    #nos-clients.cm-full .cm-search {
        top: max(14px, env(safe-area-inset-top));
    }

    #nos-clients.cm-full .cm-expand {
        bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px));
    }

    #nos-clients.cm-full .cm-map-ctrls {
        bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px));
    }

    /* La fiche devient un panneau qui monte du bas, pouce en bas d'écran. */
    #nos-clients.cm-full .cm-detail {
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-height: 62dvh;
        border-radius: 24px 24px 0 0;
        border-bottom: none;
        padding-bottom: env(safe-area-inset-bottom);
        transform: translateY(100%);
        transition: transform .34s cubic-bezier(.32, .72, 0, 1), opacity .2s ease;
    }

    #nos-clients.cm-full .cm-detail.is-open {
        transform: translateY(0);
    }

    /* Poignée de préhension, comme sur un panneau natif. */
    #nos-clients.cm-full .cm-detail::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 8px;
        width: 40px;
        height: 4px;
        margin-left: -20px;
        border-radius: 100px;
        background: rgba(255, 255, 255, .55);
        z-index: 3;
        pointer-events: none;
    }
}

@media (max-width: 720px) {
    #nos-clients {
        padding: 40px 0 52px;
    }

    #nos-clients::before,
    #nos-clients::after {
        height: 110px;
    }

    .cm-head {
        margin-bottom: 12px;
    }

    .cm-stat {
        padding: 6px 12px;
    }

    .cm-stat-num {
        font-size: 15.5px;
    }

    .cm-stat-lbl {
        font-size: 11.5px;
    }

    /* filtres : défilement horizontal jusqu'aux bords de l'écran */
    .cm-filters {
        width: auto;
        max-width: none;
        margin-left: -24px;
        margin-right: -24px;
        padding: 2px 24px 6px;
    }

    .cm-map-shell {
        height: clamp(320px, 54vh, 460px);
        border-radius: 20px;
    }

    .cm-search {
        top: 10px;
        left: 10px;
        width: calc(100% - 20px);
    }

    .cm-map-ctrls {
        right: 10px;
        bottom: 14px;
    }

    .cm-ctrl {
        width: 42px;
        height: 42px;
    }

    /* fiche = panneau bas, toujours dans l'écran */
    .cm-detail {
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
        border-radius: 18px;
    }

    /* liste = carrousel horizontal à une main */
    .cm-list {
        display: flex;
        flex-direction: row;
        max-height: none;
        height: auto;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding: 4px 24px 12px;
        margin-left: -24px;
        margin-right: -24px;
        scrollbar-width: none;
    }

    .cm-list::-webkit-scrollbar {
        display: none;
    }

    .cm-item {
        /* La carte suivante dépasse volontairement : c'est ce qui indique
           qu'on peut faire défiler. */
        flex: 0 0 86%;
        max-width: 330px;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .cm-card {
        height: 100%;
    }

    .cm-card-media {
        aspect-ratio: 16 / 10;
    }

    .cm-card-name {
        font-size: 16.5px;
    }

    .cm-card-meta {
        font-size: 12.5px;
    }

    /* Cibles au doigt : 44 px au minimum. */
    .cm-card-link {
        min-height: 44px;
        padding: 12px 18px;
        font-size: 13px;
    }

    .cm-ctrl {
        width: 44px;
        height: 44px;
    }

    .cm-card-logo {
        width: 40px;
        height: 40px;
    }

    /* Le fondu de fin de liste devient horizontal. */
    .cm-list {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px,
            #000 calc(100% - 34px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 24px,
            #000 calc(100% - 34px), transparent 100%);
    }

    .cm-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 16px;
        padding: 22px 18px;
    }

    .cm-cta p {
        margin-left: auto;
        margin-right: auto;
    }

    .cm-cta-actions {
        flex-direction: column;
    }

    .cm-cta-actions .cm-btn-primary,
    .cm-cta-actions .cm-btn-ghost {
        width: 100%;
        justify-content: center;
        min-height: 46px;
    }

    /* Cibles tactiles : tout ce qui se touche fait au moins 44 px. */
    .cm-btn-second {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cm-detail-close {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 380px) {
    .cm-item {
        flex-basis: 88%;
    }

    .cm-list-head {
        flex-wrap: wrap;
    }
}

/* ============================================== accessibilité / mouvement */
@media (prefers-reduced-motion: reduce) {

    .cm-pin-btn,
    .cm-card,
    .cm-detail,
    .cm-card-arrow {
        transition: none !important;
    }

    .cm-pin-btn.is-active::before,
    .cm-map-skeleton::after {
        animation: none !important;
    }

    .cm-skel-ring {
        animation-duration: 2.4s;
    }

    .cm-list {
        scroll-behavior: auto;
    }
}

/* Sans JavaScript : la carte et les commandes disparaissent, la liste
   complète des réalisations reste lisible et cliquable. */
#nos-clients.cm-nojs .cm-map-col,
#nos-clients.cm-nojs .cm-filters,
#nos-clients.cm-nojs .cm-sort {
    display: none;
}

#nos-clients.cm-nojs .cm-layout {
    grid-template-columns: 1fr;
}

#nos-clients.cm-nojs .cm-list {
    height: auto;
    max-height: none;
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

#nos-clients.cm-nojs .cm-card-arrow {
    display: none;
}