/* ==========================================================================
   Section Comment ça marche - 4 étapes en cercles pastel reliés par un
   trait d'aquarelle pointillé.
   Reproduction de A_HowItWorks (design_handoff_museaux/direction-a.jsx).
   ========================================================================== */

.mdm-comment-ca-marche {
    padding: var(--m-space-xxl) var(--m-page-padding);
    position: relative;
}

.mdm-comment-ca-marche__inner {
    max-width: var(--m-container);
    margin-inline: auto;
}

.mdm-comment-ca-marche__header {
    text-align: center;
    margin-bottom: 56px;
}

.mdm-comment-ca-marche__eyebrow {
    display: block;
    font-family: var(--m-font-hand);
    font-size: 22px;
    color: var(--m-gold);
    margin-bottom: 6px;
}

.mdm-comment-ca-marche__title {
    font-family: var(--m-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.75rem, 2.5vw + 1rem, 3rem); /* 28 → 48px */
    color: var(--m-ink);
    margin: 0;
    line-height: 1.05;
}

/* - Grid 4 étapes - */
.mdm-comment-ca-marche__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
}

/* - Trait pointillé qui relie les cercles, en arrière-plan - */
.mdm-comment-ca-marche__path {
    position: absolute;
    top: 60px;
    left: 12%;
    width: 76%;
    height: 30px;
    z-index: 0;
    pointer-events: none;
}

/* - Étape (carte) - */
.mdm-step {
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Silhouette de patte tournee 90 degres antihoraire (doigts a droite,
   coussinet a gauche : sens de la marche). Le gradient pastel est
   masque par le SVG patte (data URI). Le wrap superpose une icone
   metier au centre (palette / camera / brush / envelope). */
.mdm-step__paw-wrap {
    position: relative;
    width: 130px;
    height: 110px;
    margin: 0 auto 16px;
}

.mdm-step__paw {
    position: absolute;
    inset: 0;
    /* Patte avec rotation +90° (sens horaire) appliquee directement
       dans le SVG via <g transform="rotate(90 50 50)"> : doigts a droite,
       coussinet a gauche (sens de la marche vers la droite).
       Plus fiable que rotate CSS sur l'element (qui interagirait avec
       le radial-gradient). */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g transform='rotate(90 50 50)'><ellipse cx='50' cy='68' rx='28' ry='24' fill='black'/><ellipse cx='20' cy='38' rx='11' ry='14' fill='black'/><ellipse cx='40' cy='22' rx='9' ry='13' fill='black'/><ellipse cx='60' cy='22' rx='9' ry='13' fill='black'/><ellipse cx='80' cy='38' rx='11' ry='14' fill='black'/></g></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g transform='rotate(90 50 50)'><ellipse cx='50' cy='68' rx='28' ry='24' fill='black'/><ellipse cx='20' cy='38' rx='11' ry='14' fill='black'/><ellipse cx='40' cy='22' rx='9' ry='13' fill='black'/><ellipse cx='60' cy='22' rx='9' ry='13' fill='black'/><ellipse cx='80' cy='38' rx='11' ry='14' fill='black'/></g></svg>");
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}

/* Icone metier (palette/camera/brush/envelope) superposee sur la patte.
   Decalee legerement vers le coussinet (gauche) qui est la zone la plus
   large, donc l'icone est centree visuellement sur la masse de la patte. */
.mdm-step__paw-icon {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding-right: 36px; /* compense le decalage du coussinet vers la gauche */
    color: var(--m-ink);
    pointer-events: none;
}

/* Couleurs : memes 4 pastels que les anciens cercles. */
.mdm-step:nth-child(4n+1) .mdm-step__paw { background: radial-gradient(circle at 35% 30%, var(--m-peach),    var(--m-rose)     80%); }
.mdm-step:nth-child(4n+2) .mdm-step__paw { background: radial-gradient(circle at 35% 30%, var(--m-rose),     var(--m-lavender) 80%); }
.mdm-step:nth-child(4n+3) .mdm-step__paw { background: radial-gradient(circle at 35% 30%, var(--m-lavender), var(--m-mint)     80%); }
.mdm-step:nth-child(4n+4) .mdm-step__paw { background: radial-gradient(circle at 35% 30%, var(--m-mint),     var(--m-peach)    80%); }

/* Effet « traces de pas » : pattes 1 et 3 plus basses que pattes 2 et 4,
   comme des empreintes alternees gauche/droite d'un animal qui marche.
   On joue aussi sur une legere inclinaison pour le naturel. */
.mdm-step:nth-child(4n+1) .mdm-step__paw-wrap {
    transform: translateY(22px) rotate(-4deg);
}
.mdm-step:nth-child(4n+3) .mdm-step__paw-wrap {
    transform: translateY(22px) rotate(-4deg);
}
.mdm-step:nth-child(4n+2) .mdm-step__paw-wrap {
    transform: rotate(3deg);
}
.mdm-step:nth-child(4n+4) .mdm-step__paw-wrap {
    transform: rotate(3deg);
}

.mdm-step__num {
    display: block;
    font-family: var(--m-font-hand);
    font-size: 24px;
    color: var(--m-gold);
    line-height: 1;
    margin-bottom: 8px;
}

.mdm-step__title {
    font-family: var(--m-font-display);
    font-style: italic;
    font-size: 22px;
    font-weight: 500;
    color: var(--m-ink);
    margin: 0 0 8px;
    line-height: 1.2;
}

.mdm-step__desc {
    font-family: var(--m-font-body);
    font-size: 14px;
    color: var(--m-ink-2);
    margin: 0 auto;
    line-height: 1.55;
    max-width: 200px;
}

/* - Responsive - */
@media (max-width: 900px) {
    .mdm-comment-ca-marche { padding: var(--m-space-xl) var(--m-space); }
    .mdm-comment-ca-marche__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .mdm-comment-ca-marche__path { display: none; } /* le trait ondulé n'a plus de sens en grille 2 colonnes */
}

@media (max-width: 500px) {
    .mdm-comment-ca-marche__grid { grid-template-columns: 1fr; gap: 32px; }
}