/* ==========================================================================
   AMS FOCUS — RESPONSIVE
   ========================================================================== */

@media (max-width: 1180px) {

    .ams-header__nav {
        gap: 24px;
        margin-left: 18px;
    }

    .ams-hero__content {
        max-width: 500px;
    }

    .ams-hero__title {
        font-size: clamp(40px, 4vw, 48px);
    }

    .ams-hero__visual {
        width: 66%;
    }

    .ams-hero__visual::before {
        width: 34%;
    }

}

@media (max-width: 980px) {

    .ams-hero {
        min-height: auto;
    }

    .ams-hero__grid {
        min-height: auto;
        display: block;
    }

    .ams-hero__content {
        width: 100%;
        max-width: 540px;
        padding:
            120px 0
            38px;
    }

    
    /*
     * Hero visuel responsive :
     * continuité du blanc vers l'image.
     */
    .ams-hero__visual {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        height:
            clamp(
                410px,
                55vw,
                520px
            );
        margin-top: -1px;
        overflow: hidden;
        aspect-ratio: auto;
        transform: none;
        isolation: isolate;
    }

    /*
     * Même principe visuel que desktop,
     * mais le fondu devient vertical puisque
     * l'image est placée sous le contenu.
     */
    .ams-hero__visual::before {
        content: "";
        position: absolute;
        z-index: 2;
        inset: 0 0 auto 0;
        display: block;
        width: 100%;
        height: 36%;
        pointer-events: none;
        background:
            linear-gradient(
                180deg,
                #ffffff 0%,
                rgba(255,255,255,.98) 12%,
                rgba(255,255,255,.88) 32%,
                rgba(255,255,255,.54) 58%,
                rgba(255,255,255,.18) 80%,
                rgba(255,255,255,0) 100%
            );
    }

    /*
     * Toute la scène est agrandie.
     * L'écran dynamique reste attaché au laptop
     * puisque ses coordonnées sont relatives
     * à .ams-hero__scene.
     */
    .ams-hero__scene {
        position: absolute;
        top: 0;
        left: 50%;
        right: auto;
        bottom: auto;
        width: auto;
        height: 100%;
        aspect-ratio: 1914 / 822;
        transform: translateX(-60%);
    }
}

@media (max-width: 820px) {

    .ams-shell {
        width:
            min(
                calc(100% - 32px),
                var(--ams-shell)
            );
    }

    .ams-header__inner {
        min-height: 72px;
    }

    .ams-header__nav {
        display: none;
    }

    .ams-button--header {
        min-height: 38px;
        display: none;
        width: auto;
        margin-left: auto;
        padding: 0 14px;
        gap: 8px;
        font-size: 11px;
        white-space: nowrap;
    }

    .ams-header.has-hero-passed .ams-button--header {
        display: inline-flex;
        flex: 0 0 auto;
    }

    .ams-header__toggle {
        width: 42px;
        height: 42px;
        display: grid;
        place-content: center;
        gap: 5px;
        margin-left: 0;
        border: 0;
        border-radius: 8px;
        background:
            rgba(255,255,255,.88);
    }

    .ams-header__toggle span {
        width: 20px;
        height: 2px;
        display: block;
        background: #07182d;
    }

    .ams-header.menu-open .ams-header__nav {
        position: absolute;
        top: 72px;
        left: 16px;
        right: 16px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-left: 0;
        padding: 12px;
        border:
            1px solid
            rgba(8,120,255,.12);
        border-radius: 12px;
        background:
            rgba(255,255,255,.96);
        box-shadow:
            0 20px 50px
            rgba(5,26,52,.15);
    }

    .ams-header.menu-open .ams-header__nav a {
        padding: 14px;
    }
}

@media (max-width: 620px) {

    .ams-button--header {
        min-height: 36px;
        width: auto;
        padding: 0 10px;
        gap: 6px;
        font-size: 10px;
    }

    .ams-hero__content {
        padding:
            108px 0
            32px;
    }

    .ams-hero__title {
        font-size: clamp(24px, 8.1vw, 38px);
        line-height: 1.05;
        letter-spacing: -1.5px;
    }

    .ams-hero__title > .ams-hero__title-line:not(.ams-hero__title-line--accent) {
        white-space: nowrap;
    }

    .ams-hero__title > .ams-hero__title-line--accent {
        max-width: 9.2em;
    }

    .ams-hero__description {
        font-size: 15px;
    }

    .ams-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ams-hero__actions .ams-button {
        width: 100%;
    }

    .ams-button--header {
        width: auto;
    }




    /*
     * Mobile :
     * le visuel prend davantage de hauteur afin
     * que le laptop devienne le sujet principal.
     */
    .ams-hero__visual {
        height:
            clamp(
                330px,
                70vw,
                390px
            );
        margin-top: -1px;
    }

    /*
     * Fondu blanc -> photographie.
     */
    .ams-hero__visual::before {
        display: block;
        width: 100%;
        height: 34%;
        background:
            linear-gradient(
                180deg,
                #ffffff 0%,
                rgba(255,255,255,.98) 12%,
                rgba(255,255,255,.84) 34%,
                rgba(255,255,255,.44) 62%,
                rgba(255,255,255,.12) 82%,
                rgba(255,255,255,0) 100%
            );
    }

    /*
     * Zoom mobile centré sur le laptop.
     *
     * La scène conserve son ratio natif.
     * En utilisant sa hauteur comme référence,
     * le PC devient nettement plus grand.
     */
    .ams-hero__scene {
        top: 0;
        left: 50%;
        right: auto;
        width: auto;
        height: 100%;
        aspect-ratio: 1914 / 822;
        transform: translateX(-64%);
    }

    /*
     * Le code reste visible en mobile.
     * Son placement et sa perspective sont ceux
     * du système desktop déjà validé.
     */
    .ams-hero__screen {
        display: block;
    }

    /* AMSF C3-D5 MOBILE SVG START */

    /*
     * MOBILE :
     * le plan HTML n'est plus transformé.
     *
     * La perspective est calculée directement
     * dans le SVG vectoriel généré par home.js.
     */
    .ams-live-code {
        transform: none;
        transform-origin: initial;
        will-change: auto;
        backface-visibility: visible;
    }

    /*
     * Le SVG occupe l'intégralité de la dalle.
     * Les coordonnées du quadrilatère sont ensuite
     * calculées dans son viewBox 1000 × 600.
     */
    .ams-live-code__viewport {
        position: absolute;
        inset: 0;
        overflow: visible;
        padding: 0;
        background: none;
    }

    .ams-live-code__lines {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
    }

    /*
     * La toolbar HTML desktop est remplacée
     * par sa version vectorielle dans le SVG.
     */
    .ams-live-code__toolbar {
        display: none;
    }

    /*
     * Le curseur HTML desktop n'est pas utilisé
     * dans le renderer vectoriel mobile.
     */
    .ams-live-code__cursor {
        display: none;
    }

    .ams-mobile-code-svg {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
    }

    .ams-mobile-code-svg text {
        font-family:
            "SFMono-Regular",
            Consolas,
            "Liberation Mono",
            Menlo,
            monospace;

        text-rendering: geometricPrecision;
        -webkit-font-smoothing: antialiased;
    }

    .ams-mobile-code-line {
        opacity: 0;
        transition: opacity .18s linear;
    }

    .ams-mobile-code-line.is-visible {
        opacity: 1;
    }

/* AMSF C3-D5 MOBILE SVG END */
}

/* ==========================================================================
   GRAND ECRAN — HERO FLUIDE
   ========================================================================== */

@media (min-width: 1440px) {


    /*
     * Le bloc éditorial évolue avec la largeur disponible
     * sans devenir excessivement large.
     */
    .ams-hero__content {
        max-width:
            clamp(
                520px,
                31vw,
                760px
            );
    }

    .ams-hero__eyebrow {
        font-size:
            clamp(
                12px,
                .7vw,
                14px
            );

        letter-spacing:
            clamp(
                1.6px,
                .11vw,
                2.2px
            );
    }

    .ams-hero__title {
        max-width:
            clamp(
                520px,
                31vw,
                760px
            );

        font-size:
            clamp(
                50px,
                3.1vw,
                86px
            );

        letter-spacing:
            clamp(
                -3px,
                -.11vw,
                -1.8px
            );
    }

    .ams-hero__description {
        max-width:
            clamp(
                500px,
                29vw,
                700px
            );

        margin-top:
            clamp(
                24px,
                1.5vw,
                32px
            );

        font-size:
            clamp(
                16px,
                .95vw,
                20px
            );
    }

    .ams-hero__actions {
        gap:
            clamp(
                14px,
                1vw,
                20px
            );

        margin-top:
            clamp(
                31px,
                2vw,
                42px
            );
    }

    .ams-hero__actions .ams-button {
        min-height:
            clamp(
                48px,
                3vw,
                58px
            );

        padding-inline:
            clamp(
                22px,
                1.5vw,
                30px
            );

        font-size:
            clamp(
                14px,
                .8vw,
                16px
            );
    }

    /*
     * Sur les écrans ultralarges, la scène photographique
     * peut grandir au-delà de la hauteur du viewport.
     *
     * Le ratio 1914 / 822 reste conservé et le débordement
     * vertical est masqué par le conteneur du hero.
     *
     * L'écran dynamique reste donc attaché au laptop.
     */
    .ams-hero__scene {
        height:
            max(
                100%,
                29.2vw
            );
    }
}

/* ==========================================================================
   GRAND ECRAN AVEC FAIBLE HAUTEUR DISPONIBLE
   ========================================================================== */

@media (min-width: 1440px) and (max-height: 820px) {

    /*
     * La largeur continue de bénéficier du mode grand écran,
     * mais la typographie tient également compte
     * de la hauteur disponible.
     */
    .ams-hero__content {
        padding:
            clamp(
                96px,
                13vh,
                118px
            )
            0
            clamp(
                44px,
                7vh,
                64px
            );
    }

    .ams-hero__title {
        font-size:
            clamp(
                48px,
                min(
                    3.1vw,
                    7.4vh
                ),
                72px
            );
    }

    .ams-hero__description {
        margin-top:
            clamp(
                18px,
                3vh,
                24px
            );

        font-size:
            clamp(
                16px,
                min(
                    .95vw,
                    2.4vh
                ),
                18px
            );
    }

    .ams-hero__actions {
        margin-top:
            clamp(
                22px,
                4vh,
                31px
            );
    }

    .ams-hero__actions .ams-button {
        min-height:
            clamp(
                46px,
                7vh,
                52px
            );
    }
}

/* ==========================================================================
   SERVICES V2 — RESPONSIVE
   ========================================================================== */

@media (min-width: 1440px) {

    .ams-expertise-card {
        min-height:
            clamp(
                190px,
                11vw,
                224px
            );
    }

    .ams-expertise-card h3 {
        font-size:
            clamp(
                18px,
                1.05vw,
                21px
            );
    }

    .ams-expertise-card p {
        font-size:
            clamp(
                13px,
                .78vw,
                15px
            );
    }
}

@media (max-width: 1100px) {

    .ams-services__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .ams-method {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(340px, .9fr);
        gap: 44px;
    }
}

@media (max-width: 900px) {

    .ams-method {
        grid-template-columns: 1fr;
    }


    .ams-method__content {
        max-width: 720px;
    }
}

@media (max-width: 760px) {

    .ams-services {
        padding:
            64px
            0
            78px;
    }

    .ams-services__intro h2 {
        font-size:
            clamp(
                31px,
                9vw,
                40px
            );
        letter-spacing: -1.2px;
    }

    .ams-services__intro p {
        margin-top: 18px;
        font-size: 14px;
    }

    .ams-services__grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 34px;
    }

    .ams-expertise-card {
        min-height: 0;
        padding: 22px;
    }

    .ams-expertise-card__icon {
        width: 44px;
        height: 44px;
    }

    .ams-expertise-card__icon svg {
        width: 21px;
        height: 21px;
    }

    .ams-expertise-card h3 {
        margin-top: 20px;
        font-size: 17px;
    }

    .ams-expertise-card p {
        font-size: 13px;
    }

    .ams-method {
        gap: 38px;
        margin-top: 76px;
    }



    .ams-method__content h2 {
        font-size:
            clamp(
                30px,
                8.5vw,
                39px
            );
        letter-spacing: -1.2px;
    }

    .ams-method__description {
        font-size: 14px;
    }

    .ams-method__steps {
        margin-top: 26px;
    }

    .ams-method-step {
        grid-template-columns:
            44px
            minmax(0, 1fr);
        gap: 14px;
        padding: 17px 0;
    }

    .ams-method-step__content h3 {
        font-size: 16px;
    }

    .ams-method-step__content p {
        font-size: 12px;
    }
}

@media (max-width: 460px) {

}

/* ==========================================================================
   NOTRE FAÇON DE TRAVAILLER — RESPONSIVE
   ========================================================================== */

@media (max-width: 980px) {

    .ams-approach-steps {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        row-gap: 38px;
    }

    .ams-approach-step::after {
        display: none;
    }
}

@media (max-width: 760px) {

    .ams-realizations-approach {
        margin-bottom: 64px;
    }

    .ams-realizations-approach__intro h2 {
        font-size:
            clamp(
                32px,
                9vw,
                42px
            );
        letter-spacing: -1.3px;
    }

    .ams-realizations-approach__intro p {
        margin-top: 18px;
        font-size: 14px;
    }

    .ams-approach-steps {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 40px;
    }

    .ams-approach-step {
        display: grid;
        grid-template-columns:
            50px
            minmax(0, 1fr);
        column-gap: 16px;
        min-height: 92px;
        padding-bottom: 26px;
    }

    .ams-approach-step:not(:last-child)::after {
        display: block;
        top: 49px;
        left: 24px;
        right: auto;
        width: 1px;
        height:
            calc(
                100% - 38px
            );
    }

    .ams-approach-step__number {
        grid-row:
            1
            / span 2;
        width: 50px;
        height: 50px;
    }

    .ams-approach-step__content h3 {
        margin: 2px 0 0;
        font-size: 17px;
    }

    .ams-approach-step__content p {
        max-width: 100%;
        margin-top: 7px;
        font-size: 13px;
    }
}

/* ==========================================================================
   REALISATIONS — RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {

    .ams-featured-work {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(300px, .8fr);
        gap: 38px;
    }
}

@media (max-width: 980px) {

    .ams-featured-work {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .ams-featured-work__content {
        max-width: 680px;
    }


    .ams-web-projects {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {

    .ams-realizations {
        padding:
            0 0
            72px;
    }

    .ams-realizations__projects {
        margin-top: 0;
    }

    .ams-featured-work {
        gap: 24px;
    }

    .ams-featured-work__visual {
        border-radius: 11px;
    }


    .ams-featured-work__content h3 {
        font-size:
            clamp(
                34px,
                10vw,
                46px
            );
    }

    .ams-featured-work__description {
        font-size: 14px;
    }

    .ams-web-projects {
        grid-template-columns: 1fr;
        gap: 34px;
        margin-top: 48px;
    }

    .ams-web-project__visual {
        border-radius: 9px;
    }

}

/* ==========================================================================
   A PROPOS — RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {

    .ams-about__grid {
        grid-template-columns:
            minmax(0, .95fr)
            minmax(430px, 1.05fr);
        gap: 48px;
    }
}

@media (max-width: 900px) {

    .ams-about__grid {
        grid-template-columns: 1fr;
    }

    .ams-about__content {
        max-width: 720px;
    }


}

@media (max-width: 620px) {

    .ams-about {
        padding:
            72px
            0
            84px;
    }

    .ams-about__content h2 {
        margin-top: 20px;
        font-size:
            clamp(
                36px,
                10vw,
                48px
            );
        letter-spacing: -1.4px;
    }

    .ams-about__description {
        font-size: 14px;
    }

    .ams-about-item {
        grid-template-columns:
            50px
            minmax(0, 1fr);
        gap: 14px;
        padding: 17px 0;
    }

    .ams-about-item__icon {
        width: 42px;
        height: 42px;
    }

    .ams-about-item__icon svg {
        width: 22px;
        height: 22px;
    }

    .ams-about-item__content h3 {
        font-size: 16px;
    }

    .ams-about-item__content p {
        font-size: 12px;
    }



}

/* ==========================================================================
   CONTACT — RESPONSIVE
   ========================================================================== */

@media (max-width: 980px) {

    .ams-contact__grid {
        grid-template-columns: 1fr;
        gap: 54px;
    }

    .ams-contact__content {
        max-width: 680px;
    }

    .ams-contact-card {
        max-width: 760px;
    }
}

@media (max-width: 620px) {

    .ams-contact {
        padding:
            72px
            0
            82px;
    }

    .ams-contact__content h2 {
        margin-top: 22px;
        font-size:
            clamp(
                38px,
                11vw,
                50px
            );
        letter-spacing: -1.7px;
    }

    .ams-contact__description {
        font-size: 14px;
    }

    .ams-contact-card {
        padding: 22px;
        border-radius: 14px;
    }

    .ams-contact-card__row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ams-contact-field {
        margin-bottom: 17px;
    }

    .ams-contact-field textarea {
        min-height: 140px;
    }

    .ams-contact-card__submit {
        width: 100%;
    }
}

/* ==========================================================================
   FOOTER — RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {

    .ams-footer-main {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
        gap:
            38px
            48px;
    }

    .ams-footer-brand {
        grid-column:
            1
            /
            -1;
    }
}

@media (max-width: 620px) {

    .ams-footer-main {
        grid-template-columns: 1fr;
        gap: 32px;
        padding:
            42px
            0
            36px;
    }

    .ams-footer-brand {
        grid-column: auto;
    }

    .ams-footer-brand__name {
        font-size: 17px;
    }

    .ams-footer-brand p {
        font-size: 13px;
    }

    .ams-footer-column h2 {
        font-size: 13px;
    }

    .ams-footer-column a,
    .ams-footer-column__pending {
        font-size: 12px;
    }

    .ams-footer-bottom p {
        padding:
            16px
            0;
        font-size: 10px;
    }
}


/* ==========================================================================
   IMAGES REELLES — RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {

    .ams-about-visual {
        margin-top: 18px;
    }
}

@media (max-width: 760px) {

    .ams-method__visual,
    .ams-featured-work__visual {
        border-radius: 11px;
    }

    .ams-web-project__visual {
        border-radius: 9px;
    }

    .ams-about-visual {
        border-radius: 12px;
    }
}

/* HEADER-9B — LOGIN + AUTOMATION / RESPONSIVE
   ========================================================================== */

@media (max-width: 1180px) {

    .ams-header__actions {
        gap: 14px;
    }

    .ams-header__login {
        font-size: 12px;
    }
}

@media (max-width: 820px) {

    .ams-header__actions {
        display: flex;
        gap: 10px;
        margin-left: auto;
    }

    .ams-header__actions .ams-button--header,
    .ams-header.has-hero-passed
    .ams-header__actions
    .ams-button--header {
        display: inline-flex;
        width: auto;
        flex: 0 0 auto;
        margin-left: 0;
    }

    .ams-header__login {
        min-height: 38px;
        font-size: 11px;
    }

    .ams-header__toggle {
        margin-left: 10px;
    }
}

@media (max-width: 620px) {

    /*
     * Petit écran :
     * on conserve le CTA principal dans la barre.
     * La connexion sera intégrée au menu mobile
     * lors de sa normalisation dédiée.
     */

    .ams-header__login {
        display: none;
    }

    .ams-header__actions {
        gap: 0;
    }

    .ams-header__actions .ams-button--header {
        min-height: 36px;
        width: auto;
        padding: 0 10px;
        gap: 6px;
        font-size: 10px;
    }
}


/* HEADER-9C — MOBILE LOGIN
   ========================================================================== */

@media (max-width: 820px) {

    /*
     * La barre mobile conserve :
     * Logo + CTA Automation + Menu.
     *
     * La connexion passe dans le menu.
     */

    .ams-header__login {
        display: none;
    }

    .ams-header.menu-open
    .ams-header__login-mobile {
        display: flex;
        min-height: 48px;
        align-items: center;
        margin-top: 4px;
        padding: 14px;
        border-top:
            1px solid rgba(8, 120, 255, .12);
        color: var(--ams-blue, #0878ff);
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
    }
}


/* HEADER CTA SIGNATURE — RESPONSIVE
   ========================================================================== */

@media (max-width: 820px) {

    .ams-header__actions
    .ams-button--header {
        min-height: 46px;

        padding:
            0 9px
            0 15px;

        gap: 10px;

        border-radius: 11px;

        font-size: 11px;

        box-shadow:
            0 10px 24px
            rgba(0, 112, 255, .24),
            inset 0 1px 0
            rgba(255,255,255,.28);
    }

    .ams-header__actions
    .ams-button--header
    > span:last-child {
        width: 28px;
        height: 28px;

        flex-basis: 28px;

        border-radius: 8px;

        font-size: 13px;
    }
}

@media (max-width: 620px) {

    .ams-header__actions
    .ams-button--header {
        min-height: 42px;

        padding:
            0 8px
            0 12px;

        gap: 8px;

        font-size: 10px;

        border-radius: 10px;
    }

    .ams-header__actions
    .ams-button--header
    > span:last-child {
        width: 26px;
        height: 26px;

        flex-basis: 26px;

        font-size: 12px;
    }

    /*
     * Sur mobile, le reflet est volontairement
     * plus discret pour éviter un effet trop chargé.
     */

    .ams-header__actions
    .ams-button--header::before {
        opacity: 0;
        animation: none;
    }
}


/* AMS-FOCUS-HOME-CTA-ALIGN-R1
   Uniquement les quatre cartes Services sur ordinateur.
*/
@media (min-width: 761px) {
    #services .ams-services__grid > article.ams-expertise-card {
        display: flex;
        flex-direction: column;
    }

    #services .ams-services__grid
    > article.ams-expertise-card
    > .ams-expertise-card__cta {
        margin-top: auto;
        padding-top: 18px;
        align-self: flex-start;
    }
}

/* AMS-FOCUS-SERVICES-CTA-BLUE-R1 */
#services .ams-services__grid > article.ams-expertise-card > a.ams-expertise-card__cta,
#services .ams-services__grid > article.ams-expertise-card > a.ams-expertise-card__cta:visited {
    color: #0875ef !important;
}