/* ===========================================================================
   Page Studio — /studio-ux-ui-applications-metier

   Règles transposées de ressources/css/style_general.css
   (sélecteurs form[name="PGESTUDIO"] -> body.page-studio).
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Hero — titre à gauche, illustration animée à droite, sur fond vert clair
   --------------------------------------------------------------------------- */

.page-studio .hero-studio {
    background: var(--c-vert-clair);
    min-height: 650px;
    display: flex;
    flex-direction: column;
    /* La lampe est posée sur le bord : ce qui dépasserait de son cadre SVG sous
       la ligne du pied (le bas du halo) est coupé net à la limite du hero. */
    overflow: hidden;
}

/* Le contenu est calé à gauche dans la bande de 1420, sur une largeur de
   calc(100vw - 60px) — soit 1380 px à 1440, avec 30 px de retrait. */
.page-studio .hero-studio-inner {
    width: 100%;
    max-width: var(--largeur-contenu);
    margin: 0 auto;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Le bloc descend jusqu'au bas du hero (demande du client du 2026-10-01) : il
   s'arrêtait 20 px au-dessus, sur la hauteur de son illustration. */
.page-studio .hero-studio-contenu {
    width: 100%;
    max-width: calc(100vw - 60px);
    padding: 0 30px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex: 1;
}

.page-studio .hero-studio-texte {
    flex: 1;
    min-width: 0;
    padding-top: 195px;
}

/* Calée en bas du bloc, le pied de la lampe pile sur le bord du hero. Le dessin
   ne touche pas le bas de son cadre : 2,25 px de marge de cadrage (le cadre est
   un peu plus haut que le rapport du viewBox 516 x 458) plus 1 px sous le pied
   dans le viewBox lui-même, soit 3,3 px, rattrapés par la marge négative. */
.page-studio .hero-studio-illustration {
    width: 396px;
    height: 356px;
    flex: 0 0 396px;
    margin-top: 274px;
    align-self: flex-end;
    margin-bottom: -3.3px;
}

/* --- Titre ---------------------------------------------------------------- */

.page-studio .TitreH1 {
    font-family: var(--font-titres);
    font-size: clamp(26px, 6.8vw, 118px);
    font-weight: 400;
    line-height: 83%;
    text-transform: uppercase;
    color: #2d2d2d;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
}

/* Pas de flex ici, contrairement à l'accueil : le site laisse ces deux morceaux
   en ligne, séparés par l'espace du balisage. */
.page-studio .TitreH1 .SousTitreH1 {
    font-size: clamp(20px, 2.15vw, 38px);
    line-height: 110%;
}

/* Ici le cartouche est inversé par rapport à l'accueil : blanc sur vert */
/* inline-block pour que le line-height fasse la hauteur de la boîte (38 px) :
   en simple inline, le padding s'applique mais la hauteur suit la police. */
.page-studio .TitreH1 .SousTitreH1 .highlight {
    display: inline-block;
    color: var(--c-blanc);
    background: var(--c-vert);
    padding: 4px 10px 8px;
    line-height: 85%;
}

/* --- Accroche ------------------------------------------------------------- */

.page-studio .Baseline {
    font-family: var(--font-alt);
    font-size: clamp(18px, 1.7vw, 30px);
    font-weight: 500;
    line-height: 120%;
    color: var(--c-sombre);
    margin: 60px 0 0;
}

.page-studio .Baseline p {
    margin: 0;
}

/* ---------------------------------------------------------------------------
   « Faire du design un moteur de progrès… »
   --------------------------------------------------------------------------- */

.page-studio .bloc-mission {
    padding: 100px 0;
}

/* Ce titre-ci est à 60 px, pas aux 70 px des autres titres de section */
.page-studio .titre-mission {
    font-size: 60px;
    line-height: 60px;
    margin-bottom: 114px;
}

.page-studio .titre-parenthese {
    font-size: 0.65em;
}

.page-studio .mission-grille {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.page-studio .mission-photo {
    width: 491px;
    flex: 0 0 491px;
    height: 618px;
    object-fit: scale-down;
}

.page-studio .mission-texte {
    flex: 1;
    min-width: 0;
    font-family: var(--font-alt);
    font-size: clamp(18px, 1.7vw, 30px);
    font-weight: 400;
    line-height: 120%;
    color: var(--c-gris-texte);
}

.page-studio .mission-texte p {
    margin: 0 0 20px;
}


/* ---------------------------------------------------------------------------
   « Boostez vos applications métier » — les trois cartes de prestation
   --------------------------------------------------------------------------- */

.page-studio .bloc-boostez {
    padding: 100px 0;
    background-color: var(--c-vert-clair);
    background-image: url(../img/motif-fleches.svg);
    background-repeat: no-repeat;
}

/* Bande plus large que sur l'accueil : 1300 px, cartes de 373 px */
.page-studio .conteneur-boostez {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

.page-studio .titre-boostez {
    line-height: 77px;
    margin-bottom: 80px;
}

.page-studio .grille-offres {
    display: grid;
    grid-template-columns: repeat(3, 373px);
    justify-content: space-between;
    padding: 0 30px;
}

/* ---------------------------------------------------------------------------
   « Leurs défis, nos solutions. » — témoignages empilés, sans carrousel
   --------------------------------------------------------------------------- */

.page-studio .bloc-defis {
    padding: 100px 0;
    background: var(--c-vert);
}

.page-studio .titre-defis {
    line-height: 70px;
}

/* Ici les 40 px de retrait s'ajoutent aux 70vw au lieu d'être pris dedans :
   1088 px de boîte pour 1008 px de contenu. */
.page-studio .liste_temoignage {
    max-width: calc(70vw + 80px);
}

/* ---------------------------------------------------------------------------
   « Vous avez un défi à relever ? »
   --------------------------------------------------------------------------- */

.page-studio .bloc-contact {
    padding: 100px 0;
    background: var(--c-vert-pale);
}

.page-studio .titre-contact {
    line-height: 80%;
}

.page-studio .pitch-contact {
    font-family: var(--font-alt);
    font-size: clamp(18px, 1.7vw, 30px);
    font-weight: 400;
    line-height: 120%;
    color: var(--c-gris-texte);
    text-align: center;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 980px) {
    .page-studio .hero-studio-contenu {
        flex-direction: column;
        padding: 50px 30px 0;
    }

    .page-studio .hero-studio-texte {
        padding-top: 45px;
    }

    .page-studio .hero-studio-illustration {
        margin-top: 0;
        margin-bottom: 0;
        max-width: 70vw;
        height: auto;
        flex: none;
        /* Centrée sous le texte (demande du client du 2026-10-01) ; le pied
           de la lampe reste sur le bord bas, l'illustration fermant le bloc. */
        align-self: center;
    }

    .page-studio .TitreH1 {
        font-size: clamp(24px, 12vw, 100px);
    }

    .page-studio .TitreH1 .SousTitreH1 {
        font-size: clamp(18px, 3vw, 40px);
        align-items: center;
    }

    .page-studio .mission-grille {
        flex-direction: column;
        gap: 40px;
    }

    /* En colonne, la photo n'a plus à garder la cellule de 491 x 618 du bureau :
       l'image étant carrée, elle s'y centrait entre deux bandes vides de 150 px.
       Elle prend désormais sa propre hauteur, sans dépasser sa taille de bureau. */
    .page-studio .mission-photo {
        width: 100%;
        max-width: 491px;
        height: auto;
        flex: none;
        align-self: center;
    }

    .page-studio .grille-offres {
        grid-template-columns: 1fr;
        gap: 30px;
        justify-content: stretch;
    }
}

@media (max-width: 600px) {
    /* Conteneur propre à cette bande (1300 px) : la gouttière de téléphone posée
       sur .conteneur-interne ne l'atteint pas. */
    .page-studio .conteneur-boostez {
        padding-left: 30px;
        padding-right: 30px;
    }

    /* Interlignes et écarts des titres de hero des autres pages (voir
       prestation.css), demandés aussi ici par le client le 2026-10-01 : 33 px
       séparaient « UX/UI » du sous-titre, 18 ce dernier du cartouche, contre ~11
       ailleurs. Le sous-titre passe en colonne, cartouche sous « au service de
       vos ». */
    .page-studio .TitreH1 {
        font-size: clamp(24px, 20vw, 100px);
        line-height: 0.83;
        gap: 1.3vw;
    }

    .page-studio .TitreH1 .SousTitreH1 {
        font-size: clamp(28px, 8vw, 50px);
        line-height: 0.83;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3vw;
    }

    .page-studio .TitreH1 .SousTitreH1 .highlight {
        font-size: clamp(24px, 6.5vw, 46px);
    }

    /* Les 114 px du bureau séparaient le titre de la photo d'un écran presque
       vide ; supprimés le 2026-10-01, ils laissaient la parenthèse à 6 px de la
       photo. 37 px donnent autant de vide au-dessus de la photo qu'en dessous,
       jusqu'aux capitales du texte (43 px à 375 px), comme demandé le
       2026-10-02. */
    .page-studio .titre-mission {
        margin-bottom: 37px;
    }

    /* Réduite à la demande du client (2026-10-01) : à 0.65em du titre, la
       parenthèse se coupait avant « vôtres) ». À 5vw elle tient sur une ligne
       de 320 à 600 px (94 % de la largeur utile à 375). */
    .page-studio .titre-parenthese {
        font-size: 5vw;
    }
}