/* ==========================================================================
   Page d'accueil (home.view.php) — chargée par l'accueil seul via $page_css.
   Valeurs reprises de la maquette « Accueil – etsitso.bi » ; points de rupture 900 px et 560 px.
   Chaque variante @media est écrite juste sous la règle qu'elle modifie.
   Les apparitions (.rv, .rvt, .rvi) sont communes au site (style.css, script.js) :
   sans JavaScript ou avec « moins d'animations », tout reste visible.
   ========================================================================== */

.hm {
    font-family: Montserrat, system-ui, sans-serif;
    color: #1A1A2E;
    background: #FFFFFF;
}

/* Le titre en Instrument Serif : partout où la maquette met un mot en italique */
.hm em {
    font-family: var(--font-display);
    color: var(--hm-green);
    font-style: italic;
    font-weight: 400;
}

/* ---------- Conteneurs ---------- */

.hm-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

.hm-wide {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Typographie commune des sections ---------- */

.hm-eyebrow {
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--hm-green-dark);
}

.hm-eyebrow--mint {
    color: var(--hm-mint);
}

.hm-h2 {
    margin: 0 0 18px;
    font-family: Montserrat, system-ui, sans-serif;
    font-size: 52px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--hm-ink);
}

@media (max-width: 560px) {
    .hm-h2 {
        font-size: 36px;
    }
}

.hm-h2--about {
    margin-bottom: 22px;
    font-size: 46px;
    line-height: 1.08;
}

@media (max-width: 560px) {
    .hm-h2--about {
        font-size: 34px;
    }
}

.hm-h2--48 {
    margin-bottom: 16px;
    font-size: 48px;
    line-height: 1.08;
}

@media (max-width: 560px) {
    .hm-h2--48 {
        font-size: 34px;
    }
}

.hm-h2--flush {
    margin-bottom: 0;
}

/* Titres sur fond encre : blanc, mot en italique vert menthe */
.hm-h2--dark {
    color: #FFFFFF;
}

.hm-h2--dark em {
    color: var(--hm-mint);
}

.hm-text {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--hm-text);
}

.hm-text--soft {
    margin: 0;
    line-height: 1.65;
    color: var(--hm-soft);
}

.hm-text--flush {
    margin: 0;
    line-height: 1.65;
}

/* En-tête de section : texte à gauche, bouton ou commandes à droite */
.hm-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 28px;
    margin-bottom: 56px;
}

.hm-head--tips {
    margin-bottom: 44px;
}

.hm-head-text {
    max-width: 640px;
}

/* ---------- Boutons en pilule : mesure du bouton « Contact us » de la barre (.nav-cta), seules les couleurs varient ---------- */

.hm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 13px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background-color .3s ease, color .3s ease;
}

/* Bouton en apparition (.rv, style.css) : la transition de .rv remplacerait celle du survol */
.hm .hm-btn.rv {
    transition: opacity 1s cubic-bezier(.2, .7, .2, 1), transform 1.15s cubic-bezier(.2, .7, .2, 1), filter 1s ease, background-color .3s ease, color .3s ease, border-color .3s ease;
    transition-delay: var(--d, 0s), var(--d, 0s), var(--d, 0s), 0s, 0s, 0s;
}

.hm-btn:focus-visible {
    outline: 2px solid var(--hm-green);
    outline-offset: 3px;
}

/* Vert foncé : texte blanc à 4,5 de contraste (3,1 sur --hm-green) ; survol plus foncé encore */
.hm-btn--green {
    background: var(--hm-green-dark);
    color: #FFFFFF;
}

.hm-btn--green:hover {
    background: #00704A;
    color: #FFFFFF;
}

.hm-btn--white {
    background: #FFFFFF;
    color: var(--hm-ink);
}

.hm-btn--white:hover {
    background: var(--hm-mist);
    color: var(--hm-ink);
}

.hm-btn--outline {
    border: 1.5px solid var(--hm-ink);
    color: var(--hm-ink);
}

.hm-btn--outline:hover {
    background: var(--hm-ink);
    color: #FFFFFF;
}

.hm-btn--ink {
    background: var(--hm-ink);
    color: #FFFFFF;
}

.hm-btn--ink:hover {
    background: var(--hm-ink-2);
    color: #FFFFFF;
}

/* ---------- Animations ---------- */

@keyframes hm-kb {
    from { transform: scale(1); }
    to { transform: scale(1.09); }
}

@keyframes hm-tabfill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes hm-fadeup {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes hm-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, .6); }
    50% { box-shadow: 0 0 0 8px rgba(61, 220, 151, 0); }
}

/* Point vert qui pulse (pastille « Event ») */
.hm-live {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hm-mint);
    animation: hm-pulse 2s infinite;
}

/* Apparitions (.rv, .rvt, .rvi) : règles communes à toutes les pages publiques, dans style.css */

/* « Moins d'animations » : rien ne bouge, tout est visible */
@media (prefers-reduced-motion: reduce) {
    .hm-kb,
    .hm-live,
    .hm-tab.is-active::after,
    .hm-hero-panel:not([hidden]) {
        animation: none;
    }

    .hm-svc,
    .hm-dot {
        transition: none;
    }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hm-hero {
    padding: 64px 0 0;
    background: #FFFFFF;
}

.hm-hero-head {
    text-align: center;
}

/* Pastille de l'événement, au-dessus du titre */
.hm-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 6px 16px 6px 6px;
    border: 1px solid #DCDDEB;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--hm-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
}

/* Téléphone : petite carte sur trois lignes (étiquette, nom, dates), flèche à droite, au lieu d'une phrase coupée au hasard */
@media (max-width: 600px) {
    .hm-pill {
        display: inline-grid;
        grid-template-columns: auto auto;
        column-gap: 14px;
        row-gap: 4px;
        padding: 12px 16px;
        border-radius: 16px;
    }
}

.hm-pill-text {
    min-width: 0;
}

@media (max-width: 600px) {
    .hm-pill-text {
        grid-column: 1;
        display: flex;
        flex-direction: column;
        color: var(--hm-muted);
        font-size: 12.5px;
        font-weight: 500;
    }
}

@media (max-width: 600px) {
    .hm-pill-name {
        color: var(--hm-ink);
        font-size: 14px;
        font-weight: 700;
    }
}

@media (max-width: 600px) {
    .hm-pill-sep,
    .hm-pill-cta {
        display: none;
    }
}

.hm-pill:hover {
    color: var(--hm-green);
}

.hm-pill svg {
    flex: none;
}

@media (max-width: 600px) {
    .hm-pill svg {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }
}

.hm-pill-tag {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--hm-ink);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Téléphone : l'étiquette devient la première ligne de la carte, sans fond */
@media (max-width: 600px) {
    .hm-pill-tag {
        grid-column: 1;
        justify-self: start;
        padding: 0;
        background: none;
        color: var(--hm-green-dark);
    }
}

.hm-hero-title {
    max-width: 1100px;
    margin: 28px auto 0;
    /* Toute la phrase en serif, comme la maquette ; les autres titres de l'accueil restent en Montserrat */
    font-family: var(--font-display);
    font-size: 104px;
    font-weight: 400;
    line-height: .98;
    letter-spacing: -0.025em;
    color: var(--hm-ink);
}

@media (max-width: 900px) {
    .hm-hero-title {
        font-size: 54px;
    }
}

.hm-hero-title > span {
    display: block;
}

.hm-hero-lead {
    max-width: 640px;
    margin: 26px auto 0;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--hm-text);
}

/* Image et carte : la carte se pose sur l'image, puis passe dessous sous 900 px */
.hm-hero-media {
    position: relative;
}

.hm-hero-img {
    position: relative;
    height: 600px;
    border-radius: 28px;
    overflow: hidden;
    background: #E9EFF1;
}

@media (max-width: 900px) {
    .hm-hero-img {
        height: 440px;
    }
}

/* Dégradé blanc en haut de l'image : le titre se fond dans la photo */
.hm-hero-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, .7) 10%, rgba(255, 255, 255, 0) 30%);
}

.hm-kb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
    transform-origin: 40% 70%;
    animation: hm-kb 26s ease-in-out infinite alternate;
}

/* Image étroite : cadrage décalé vers l'équipe, à gauche de la photo */
@media (max-width: 900px) {
    .hm-kb {
        object-position: 22% 60%;
    }
}

.hm-hero-card {
    position: absolute;
    right: 40px;
    bottom: 40px;
    z-index: 1;
    width: 400px;
    padding: 26px 28px;
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: 0 24px 60px rgba(26, 22, 96, .18);
    text-align: left;
}

@media (max-width: 900px) {
    .hm-hero-card {
        position: static;
        width: auto;
        margin: 16px 0 0;
    }
}

/* Le contenu de la carte change avec l'onglet : petite montée en fondu */
.hm-hero-panel:not([hidden]) {
    animation: hm-fadeup .6s cubic-bezier(.2, .7, .2, 1);
}

.hm-hero-quote {
    margin: 0 0 18px;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--hm-ink);
}

.hm-hero-sign {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 400;
    color: var(--hm-muted);
}

.hm-hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--hm-ink);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 800;
}

.hm-hero-more {
    font-size: 14px;
    font-weight: 700;
    color: var(--hm-ink);
    text-decoration: none;
}

.hm-hero-more:hover {
    color: var(--hm-green);
}

/* Onglets : barre de progression de 5 s sous l'onglet actif */
.hm-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-bottom: 1px solid var(--hm-line);
}

@media (max-width: 900px) {
    .hm-tabs {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
    }
}

.hm-tab {
    position: relative;
    min-height: 64px;
    padding: 22px 16px;
    border: none;
    background: transparent;
    /* #686A8A : contraste 5,2 sur blanc (le #8A8CA8 d'origine, 3,3, était sous le minimum de 4,5) */
    color: #686A8A;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color .3s;
}

.hm-tab:hover {
    color: var(--hm-ink);
}

.hm-tab.is-active {
    color: var(--hm-ink);
    font-weight: 800;
}

.hm-tab:focus-visible {
    outline: 2px solid var(--hm-green);
    outline-offset: -2px;
}

.hm-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--hm-ink);
    transform-origin: left center;
    animation: hm-tabfill 5s linear forwards;
}

/* ==========================================================================
   Partenaires : libellé à gauche, logos en défilement continu à droite (Embla + AutoScroll, home.js)
   Sans Embla, la fenêtre est une rangée qui défile à la main.
   ========================================================================== */

.hm-partners {
    padding: 44px 0;
}

.hm-partners-in {
    display: flex;
    align-items: center;
    gap: 40px;
}

@media (max-width: 900px) {
    .hm-partners-in {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }
}

.hm-partners-label {
    flex: 0 0 220px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--hm-muted);
}

@media (max-width: 900px) {
    .hm-partners-label {
        flex: none;
        text-align: center;
    }
}

/* Fenêtre du défilement : les logos s'effacent sur ses deux bords */
.hm-partners-vp {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}

/* Sous 900 px : la rangée prend toute la largeur de l'écran */
@media (max-width: 900px) {
    .hm-partners-vp {
        margin: 0 -24px;
    }
}

.hm-partners-vp::-webkit-scrollbar {
    display: none;
}

/* Embla actif (classe posée par home.js) : la fenêtre masque, la rangée se tire */
.hm-partners-vp.is-embla {
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y pinch-zoom;
}

.hm-partners-vp.is-embla:active {
    cursor: grabbing;
}

.hm-partners-logos {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Une diapositive par logo ; l'écart est une marge intérieure (Embla mesure la diapositive entière) */
.hm-partner {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    min-width: 0;
    padding-right: 56px;
}

@media (max-width: 560px) {
    .hm-partner {
        padding-right: 36px;
    }
}

/* Logos en gris, en couleur au survol ; hauteur commune */
.hm-partner img {
    display: block;
    width: auto;
    max-width: none;
    height: 48px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .6;
    user-select: none;
    -webkit-user-drag: none;
    transition: filter .3s ease, opacity .3s ease;
}

@media (max-width: 560px) {
    .hm-partner img {
        height: 38px;
    }
}

.hm-partner img:hover {
    filter: none;
    opacity: 1;
}

/* Logo carré entouré de blanc : plus haut, pour que le dessin ait la taille des autres */
.hm-partner .hm-logo--lg {
    height: 68px;
}

@media (max-width: 560px) {
    .hm-partner .hm-logo--lg {
        height: 54px;
    }
}

/* Logo très large au milieu d'un grand fond blanc : on garde la bande centrale */
.hm-partner .hm-logo--crop {
    width: 150px;
    object-fit: cover;
}

@media (max-width: 560px) {
    .hm-partner .hm-logo--crop {
        width: 118px;
    }
}

/* ==========================================================================
   About (collant) — Services glisse par-dessus
   ========================================================================== */

.hm-about {
    position: sticky;
    top: var(--nav-height);
    z-index: 0;
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--nav-height));
    padding: 0;
    background: #FFFFFF;
}

@media (max-width: 900px) {
    .hm-about {
        position: relative;
        top: 0;
        min-height: 0;
    }
}

.hm-about-in {
    width: 100%;
    padding: 64px 0;
    transform-origin: center top;
    will-change: transform, opacity;
}

.hm-cols2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
    align-items: center;
}

@media (max-width: 900px) {
    .hm-cols2 {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.hm-mission {
    margin: 2px 0 0;
    padding: 18px 22px;
    border-radius: 20px;
    background: var(--hm-mist);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--hm-ink);
}

/* Photos : une haute à gauche, deux empilées à droite */
.hm-about-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.hm-about-photo {
    min-height: 202px;
    height: 202px;
    border-radius: 28px;
    overflow: hidden;
    background: var(--hm-mist);
}

.hm-about-photo--tall {
    grid-row: span 2;
    min-height: 420px;
    height: auto;
    background: var(--hm-ink);
}

.hm-about-photo--green {
    background: #E6F7EE;
}

.hm-about-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   Services (bento) et méthode — fond encre
   ========================================================================== */

.hm-svc-sec {
    position: relative;
    z-index: 2;
    background: var(--hm-ink);
    color: #FFFFFF;
    box-shadow: 0 -40px 90px rgba(26, 22, 96, .22);
}

.hm-services {
    padding: 110px 0 40px;
}

.hm-bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(230px, auto);
    gap: 16px;
}

@media (max-width: 900px) {
    .hm-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .hm-bento {
        grid-template-columns: 1fr;
    }
}

/* Carte de service : se soulève au survol ; les cartes bleues s'éclaircissent */
.hm-svc {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 28px;
    border-radius: 28px;
    background: var(--hm-ink-2);
    color: #FFFFFF;
    text-decoration: none;
    transition: transform .3s ease, background-color .3s ease;
}

.hm-svc:hover {
    transform: translateY(-6px);
    color: #FFFFFF;
}

.hm-svc:focus-visible {
    outline: 2px solid var(--hm-mint);
    outline-offset: 3px;
}

.hm-svc--feature:hover,
.hm-svc--ink:hover,
.hm-svc--wide:hover {
    background: #332D96;
}

.hm-svc-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.hm-svc-num {
    font-size: 14px;
    font-weight: 700;
    color: var(--hm-mint);
}

.hm-svc-icon {
    color: var(--hm-mint);
}

.hm-svc-title {
    margin: 0 0 8px;
    font-family: Montserrat, system-ui, sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    color: inherit;
}

.hm-svc-text {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--hm-soft);
}

/* 01 — grande carte avec le visuel du studio */
.hm-svc--feature {
    grid-column: span 2;
    grid-row: span 2;
    gap: 28px;
    padding: 36px;
}

@media (max-width: 560px) {
    .hm-svc--feature {
        grid-column: span 1;
        grid-row: span 1;
        padding: 28px;
    }
}

.hm-svc--feature .hm-svc-title {
    margin-bottom: 12px;
    font-size: 34px;
    letter-spacing: -0.02em;
}

.hm-svc--feature .hm-svc-text {
    max-width: 480px;
    font-size: 16px;
    line-height: 1.65;
}

.hm-svc-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--hm-ink);
    transition: background-color .3s, color .3s;
}

.hm-svc:hover .hm-svc-arrow {
    background: var(--hm-green);
    color: #FFFFFF;
}

.hm-svc-visual {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    border-radius: 20px;
    background: var(--hm-ink);
    overflow: hidden;
}

.hm-svc-visual img {
    width: auto;
    max-width: 70%;
    max-height: 220px;
    object-fit: contain;
}

/* 02 — carte verte */
.hm-svc--green {
    background: var(--hm-green);
}

.hm-svc--green .hm-svc-num,
.hm-svc--green .hm-svc-icon,
.hm-svc--green .hm-svc-text {
    color: #FFFFFF;
}

/* 05 — carte blanche */
.hm-svc--white {
    background: #FFFFFF;
    color: var(--hm-ink);
}

.hm-svc--white:hover {
    color: var(--hm-ink);
}

.hm-svc--white .hm-svc-num {
    color: var(--hm-green-dark);
}

.hm-svc--white .hm-svc-icon {
    color: var(--hm-green);
}

.hm-svc--white .hm-svc-text {
    color: var(--hm-text);
}

/* 06, 07 — cartes larges avec une tuile d'icône */
.hm-svc--wide {
    grid-column: span 2;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    padding: 28px 32px;
}

@media (max-width: 560px) {
    .hm-svc--wide {
        grid-column: span 1;
    }
}

.hm-svc--wide .hm-svc-title {
    font-size: 24px;
}

.hm-svc--wide .hm-svc-num {
    display: block;
    margin-bottom: 6px;
}

.hm-svc-tile {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: var(--hm-ink);
    color: var(--hm-mint);
}

.hm-svc-body {
    flex: 1;
    min-width: 220px;
}

/* Méthode : titre collant à gauche, étapes et barre de progression à droite */
.hm-proc {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 72px;
    padding-top: 130px;
    padding-bottom: 90px;
}

@media (max-width: 900px) {
    .hm-proc {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.hm-proc-l {
    position: sticky;
    top: 140px;
    align-self: start;
}

@media (max-width: 900px) {
    .hm-proc-l {
        position: static;
    }
}

.hm-proc-lead {
    margin-bottom: 28px;
}

.hm-proc-list {
    position: relative;
    padding-left: 56px;
}

/* Rail de la méthode, puis la barre verte posée dessus */
.hm-proc-track {
    position: absolute;
    left: 15px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: #3C3794;
}

/* Remplie au défilement par home.js (scaleY) */
.hm-proc-bar {
    position: absolute;
    left: 15px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--hm-mint);
    transform: scaleY(0);
    transform-origin: top;
}

/* Sans JavaScript : la barre reste pleine plutôt que vide */
:root:not(.rv-on) .hm-proc-bar {
    transform: none;
}

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

.hm-step {
    position: relative;
    min-height: 240px;
}

.hm-step:last-child {
    min-height: 160px;
}

.hm-step-dot {
    position: absolute;
    left: -48px;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--hm-mint);
    box-shadow: 0 0 0 6px var(--hm-ink);
}

.hm-step-num {
    display: block;
    font-family: var(--font-display);
    font-size: 64px;
    font-style: italic;
    line-height: 1;
    color: var(--hm-mint);
}

.hm-step-title {
    margin: 14px 0 10px;
    font-family: Montserrat, system-ui, sans-serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    color: #FFFFFF;
}

.hm-step-text {
    max-width: 460px;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--hm-soft);
}

/* ==========================================================================
   Projets : cartes collantes empilées
   ========================================================================== */

.hm-projects {
    position: relative;
    z-index: 3;
    padding: 120px 0 80px;
    background: #FFFFFF;
}

.hm-stk-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Chaque carte se colle un peu plus bas que la précédente */
.hm-stk {
    position: sticky;
    top: 110px;
}

/* Sur mobile une carte dépasse la hauteur de l'écran : l'empilement cacherait son image */
@media (max-width: 900px) {
    .hm-stk {
        /* static : les décalages top des cartes suivantes sont ignorés */
        position: static;
    }
}

.hm-stk:nth-child(2) {
    top: 134px;
}

.hm-stk:nth-child(3) {
    top: 158px;
}

.hm-stk:nth-child(4) {
    top: 182px;
}

.hm-stk-card {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    height: 540px;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 -10px 40px rgba(26, 22, 96, .12);
    transform-origin: center top;
    will-change: transform;
}

@media (max-width: 900px) {
    .hm-stk-card {
        grid-template-columns: 1fr;
        height: auto;
    }
}

.hm-stk-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 48px;
}

@media (max-width: 560px) {
    .hm-stk-text {
        padding: 32px 24px;
    }
}

.hm-stk-text--center {
    justify-content: center;
    gap: 22px;
}

.hm-stk-text--center .hm-btn {
    align-self: flex-start;
}

.hm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-chip {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.hm-chip--ink {
    background: var(--hm-ink);
    color: #FFFFFF;
}

.hm-chip--green {
    background: var(--hm-green-dark);
    color: #FFFFFF;
}

.hm-stk-meta {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 400;
}

.hm-stk-title {
    margin: 0 0 14px;
    font-family: Montserrat, system-ui, sans-serif;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: inherit;
}

@media (max-width: 560px) {
    .hm-stk-title {
        font-size: 34px;
    }
}

.hm-stk-desc {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
}

.hm-stk-desc--17 {
    font-size: 17px;
    color: var(--hm-soft);
}

.hm-stk-link {
    align-self: flex-start;
    font-weight: 700;
    text-decoration: none;
}

.hm-stk-link:hover {
    text-decoration: underline;
}

.hm-stk-media {
    min-height: 260px;
    overflow: hidden;
}

.hm-stk-media img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
}

/* Thèmes des cartes, dans l'ordre de la maquette : encre, brume, vert, encre */
.hm-stk-card--ink {
    background: var(--hm-ink);
    color: #FFFFFF;
}

.hm-stk-card--ink .hm-chip:nth-child(1) { background: #FFFFFF; color: var(--hm-ink); }
.hm-stk-card--ink .hm-chip:nth-child(2) { background: var(--hm-green-dark); color: #FFFFFF; }
.hm-stk-card--ink .hm-stk-meta,
.hm-stk-card--ink .hm-stk-desc { color: var(--hm-soft); }
.hm-stk-card--ink .hm-stk-link { color: var(--hm-mint); }
.hm-stk-card--ink .hm-stk-media { background: var(--hm-ink-2); }

.hm-stk-card--mist {
    background: var(--hm-mist);
    color: var(--hm-ink);
}

.hm-stk-card--mist .hm-chip:nth-child(1) { background: var(--hm-ink); color: #FFFFFF; }
.hm-stk-card--mist .hm-chip:nth-child(2) { background: #FFFFFF; color: var(--hm-ink); }
.hm-stk-card--mist .hm-stk-meta { color: var(--hm-muted); }
.hm-stk-card--mist .hm-stk-desc { color: var(--hm-text); }
.hm-stk-card--mist .hm-stk-link { color: var(--hm-ink); }
.hm-stk-card--mist .hm-stk-media { background: #DFE1F0; }

/* Vert foncé : le texte blanc y atteint 4,5 de contraste (3,1 sur --hm-green) */
.hm-stk-card--green {
    background: var(--hm-green-dark);
    color: #FFFFFF;
}

.hm-stk-card--green .hm-chip:nth-child(1) { background: #FFFFFF; color: #00704A; }
.hm-stk-card--green .hm-chip:nth-child(2) { background: var(--hm-ink); color: #FFFFFF; }
.hm-stk-card--green .hm-stk-meta,
.hm-stk-card--green .hm-stk-desc,
.hm-stk-card--green .hm-stk-link { color: #FFFFFF; }
.hm-stk-card--green .hm-stk-media { background: #00874A; }

/* Carte « Your project could be next. » */
.hm-stk-next {
    margin: 0;
    font-family: var(--font-display);
    font-size: 64px;
    font-weight: 400;
    line-height: 1;
    color: #FFFFFF;
}

@media (max-width: 560px) {
    .hm-stk-next {
        font-size: 48px;
    }
}

.hm-stk-next em {
    color: var(--hm-mint);
}

.hm-stk-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    background: var(--hm-ink-2);
    color: var(--hm-mint);
}

/* ==========================================================================
   Tips & trends : défilement horizontal épinglé (classe hs-on posée par home.js au-delà de 900 px)
   ========================================================================== */

.hm-hs {
    position: relative;
    padding: 0;
    background: var(--hm-paper);
}

/* Sur le fond --hm-paper, le vert de .hm em n'atteint pas 3 de contraste (2,9) : vert foncé (4,2) */
.hm-hs em {
    color: var(--hm-green-dark);
}

.hs-pin {
    padding: 100px 0;
}

.hm-hs.hs-on .hs-pin {
    position: sticky;
    top: var(--nav-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100vh - var(--nav-height));
    /* clip et non hidden : le focus clavier ne peut pas faire défiler la rangée et la décaler */
    overflow: clip;
}

.hm-hs .hm-head {
    width: 100%;
}

.hm-hs-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--hm-muted);
}

.hs-vp {
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
}

.hs-vp::-webkit-scrollbar {
    display: none;
}

.hm-hs.hs-on .hs-vp {
    overflow: visible;
}

.hs-track {
    display: flex;
    gap: 20px;
    width: max-content;
    padding: 0 24px;
    padding-left: max(24px, calc((100vw - 1240px) / 2 + 24px));
    will-change: transform;
}

.hs-end {
    flex: none;
    width: 24px;
}

/* Carte d'article : toute la carte mène à l'article (lien étendu du titre) */
.hm-tip {
    position: relative;
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 16px;
    width: 400px;
    min-height: 400px;
    padding: 32px;
    border: 1px solid #E6E7F2;
    border-radius: 28px;
    background: #FFFFFF;
}

@media (max-width: 560px) {
    .hm-tip {
        width: 300px;
        min-height: 360px;
        padding: 24px;
    }
}

.hm-tip:focus-within {
    outline: 2px solid var(--hm-green);
    outline-offset: 3px;
}

.hm-tip-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hm-tip-time {
    font-size: 13px;
    color: var(--hm-muted);
}

.hm-tip-visual {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    border-radius: 18px;
    background: var(--hm-mist);
    color: #6B6D99;
    overflow: hidden;
}

.hm-tip-visual--green {
    background: #E6F7EE;
    color: var(--hm-green-dark);
}

.hm-tip-visual img {
    width: 100%;
    height: 100%;
    max-height: 180px;
    object-fit: cover;
}

.hm-tip-title {
    margin: 0;
    font-family: Montserrat, system-ui, sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--hm-ink);
}

.hm-tip-link {
    color: inherit;
    text-decoration: none;
}

.hm-tip-link:focus-visible {
    outline: none;
}

.hm-tip-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 28px;
}

.hm-tip:hover .hm-tip-link {
    color: var(--hm-green-dark);
}

.hm-tip-text {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--hm-text);
}

/* « Tip of the month » : carte encre */
.hm-tip--month {
    justify-content: space-between;
    border: none;
    background: var(--hm-ink);
    color: #FFFFFF;
}

.hm-tip-bulb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--hm-green);
    color: #FFFFFF;
}

.hm-tip-label {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hm-mint);
}

.hm-tip-quote {
    margin: 0;
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    color: #FFFFFF;
}

/* « Read more on our blog » : carte verte */
.hm-tip--blog {
    justify-content: space-between;
    width: 320px;
    border: none;
    background: var(--hm-green);
    color: #FFFFFF;
    text-decoration: none;
    transition: background-color .3s ease;
}

.hm-tip--blog:hover {
    background: var(--hm-green-dark);
    color: #FFFFFF;
}

.hm-tip-blog {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
}

/* ==========================================================================
   Témoignages : carrousel Embla en boucle (home.js)
   ========================================================================== */

.hm-testi {
    padding: 120px 0;
}

.hm-testi-nav {
    display: flex;
    gap: 12px;
}

.hm-round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: var(--hm-ink);
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
}

.hm-round:hover {
    background: var(--hm-ink-2);
}

.hm-round:focus-visible {
    outline: 2px solid var(--hm-green);
    outline-offset: 3px;
}

.hm-round--outline {
    border: 1.5px solid var(--hm-ink);
    background: #FFFFFF;
    color: var(--hm-ink);
}

.hm-round--outline:hover {
    background: var(--hm-mist);
}

/* Flèches et points ne servent qu'avec Embla : place gardée, mais invisibles sans lui */
.hm-testi:not(.is-embla) .hm-testi-nav,
.hm-testi:not(.is-embla) .hm-dots {
    visibility: hidden;
}

/* Fenêtre : sans Embla, les cartes défilent à la main (accrochage) ; avec Embla, elle masque */
.hm-testi-vp {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.hm-testi-vp::-webkit-scrollbar {
    display: none;
}

.hm-testi-vp.is-embla {
    overflow: hidden;
    scroll-snap-type: none;
    touch-action: pan-y pinch-zoom;
}

/* Rangée : la marge négative compense l'écart porté par chaque diapositive */
.hm-testi-track {
    display: flex;
    margin-left: -24px;
}

.hm-testi-slide {
    display: flex;
    flex: 0 0 100%;
    min-width: 0;
    padding-left: 24px;
    scroll-snap-align: start;
}

.hm-testi-item {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    margin: 0;
    padding: 56px;
    border-radius: 32px;
    background: var(--hm-paper);
}

@media (max-width: 560px) {
    .hm-testi-item {
        gap: 24px;
        padding: 32px 24px;
    }
}

/* Initiales du client à la place de la photo ou du logo */
.hm-testi-initials {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    border-radius: 28px;
    background: var(--hm-ink);
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: 72px;
    line-height: 1;
}

@media (max-width: 560px) {
    .hm-testi-initials {
        width: 96px;
        height: 96px;
        border-radius: 22px;
        font-size: 40px;
    }
}

.hm-testi-body {
    flex: 1;
    min-width: 260px;
    color: var(--hm-green);
}

@media (max-width: 560px) {
    .hm-testi-body {
        min-width: 0;
    }
}

.hm-testi-quote {
    margin: 18px 0 28px;
    font-family: var(--font-display);
    font-size: 32px;
    line-height: 1.3;
    color: var(--hm-ink);
}

@media (max-width: 560px) {
    .hm-testi-quote {
        font-size: 26px;
    }
}

.hm-testi-who {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hm-testi-name {
    font-size: 17px;
    font-weight: 800;
    color: var(--hm-ink);
}

.hm-testi-role {
    font-size: 14px;
    color: var(--hm-muted);
}

/* Points du carrousel : pastille visible de 12 px dans une zone cliquable de 24 px (minimum WCAG 2.2),
   faite d'une marge intérieure transparente (background-clip) ; le vide de 12 px entre les pastilles reste le même */
.hm-dots {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 22px;
}

.hm-dot {
    box-sizing: content-box;
    width: 12px;
    height: 12px;
    padding: 6px;
    border: none;
    border-radius: 999px;
    background: #CFD1E6;
    background-clip: content-box;
    cursor: pointer;
    transition: width .3s ease, background-color .3s ease;
}

.hm-dot.is-active {
    width: 36px;
    background: var(--hm-green);
}

.hm-dot:focus-visible {
    outline: 2px solid var(--hm-ink);
    outline-offset: -3px;
}

/* ==========================================================================
   Appel à l'action
   ========================================================================== */

.hm-cta {
    padding: 0 0 110px;
}

.hm-cta-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    padding: 72px 56px;
    border-radius: 40px;
    background: var(--hm-green);
    color: #FFFFFF;
}

@media (max-width: 560px) {
    .hm-cta-box {
        padding: 48px 24px;
        border-radius: 32px;
    }
}

.hm-cta-text {
    max-width: 680px;
}

.hm-cta-title {
    margin: 0 0 16px;
    font-family: Montserrat, system-ui, sans-serif;
    font-size: 52px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #FFFFFF;
}

@media (max-width: 560px) {
    .hm-cta-title {
        font-size: 36px;
    }
}

/* Sur le fond vert, le mot en italique reste blanc (la règle commune .hm em le met en vert) */
.hm-cta-title em {
    color: #FFFFFF;
}

.hm-cta-lead {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: #FFFFFF;
}