/* ===========================================================================
   Pages prestation — refonte, intégration de maquette, gabarit/ambiance

   Ces trois pages partagent la même ossature (voir Models/PagePrestation.cs et
   le partial _PagePrestation). Règles transposées de
   ressources/css/style_general.css, sélecteurs form[name="PGEREFONTE"] /
   ["PGEINTEGRATION"] / ["PGEGABARIT"] -> body.page-prestation.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Hero — titre à gauche, illustration animée à droite
   --------------------------------------------------------------------------- */

.page-prestation .hero-prestation {
    background: var(--c-vert-clair);
    min-height: 650px;
}

.page-prestation .hero-prestation-inner {
    width: 100%;
    max-width: var(--largeur-contenu);
    margin: 0 auto;
}

/* Ici le conteneur est centré, contrairement à la page Studio où il est calé à gauche */
.page-prestation .hero-prestation-contenu {
    width: 100%;
    max-width: calc(100vw - 60px);
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

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

.page-prestation .hero-prestation-illustration {
    width: 396px;
    height: 401px;
    flex: 0 0 396px;
    margin-top: 165px;
}

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

.page-prestation .TitreH1 .SousTitreH1 {
    line-height: 110%;
}

.page-prestation .TitreH1 .SousTitreH1 .highlight {
    display: inline-block;
    color: var(--c-blanc);
    background: var(--c-vert);
    padding: 4px 10px 8px;
    line-height: 85%;
}

/* Tailles propres à chaque page (clamp repris du site) */
.page-refonte .TitreH1      { font-size: clamp(24px, 6vw, 100px); }
.page-refonte .TitreH1 .big { font-size: clamp(30px, 8vw, 130px); }
.page-refonte .TitreH1 .SousTitreH1 { font-size: clamp(28px, 2.2vw, 38px); }

/* Sur téléphone, les minimums des clamp laissaient ce titre sur un tiers à
   peine de la largeur, et inversaient la hiérarchie (le sous-titre plus gros que
   « d'application »). Chaque ligne est ici calibrée pour occuper ~95 % des
   335 px disponibles à 375 px, en vw pour suivre l'écran : à 320 px, la plus
   longue reste sous 98 %. Demande du client du 2026-10-01. */
@media (max-width: 600px) {
    .page-refonte .TitreH1      { font-size: 11.3vw; }
    .page-refonte .TitreH1 .big { font-size: 14.5vw; }
    .page-refonte .TitreH1 .SousTitreH1 { font-size: 9.5vw; }
}

/* Interlignes des titres de hero sur téléphone, pour les trois pages (demande
   du client du 2026-10-01 : lignes collées sur Intégration, chevauchées sur
   Gabarit). Un `line-height` en % se transmet en px, calculé sur la taille du
   parent : les mots agrandis ci-dessus gardaient l'interligne d'un titre à
   26 px, et se chevauchaient jusqu'à 19 px. Sans unité, 0,83 se rapporte à la
   taille de chaque ligne — le rapport de l'écran large. La ligne de base tombe
   alors au bas de la boîte : 1,3vw d'écart entre deux boîtes laisse ~10 px de
   vide sous les capitales, 3vw en laissent 11 au-dessus du cartouche. Le
   sous-titre passe en colonne pour que ce dernier écart ne dépende plus de la
   ligne qui porte le cartouche. */
@media (max-width: 600px) {
    .page-prestation .TitreH1 {
        line-height: 0.83;
        gap: 1.3vw;
    }

    .page-prestation .TitreH1 .SousTitreH1 {
        line-height: 0.83;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3vw;
    }
}

/* `line-eight` est la coquille du CSS source (pour `line-height`) : propriété
   invalide, donc sans effet. Reproduite telle quelle — la corriger changerait
   le rendu. Voir AGLPIXEL_DIRECTIVES.md §5. */
.page-integration .TitreH1 { font-size: clamp(24px, 7.4vw, 115px); line-eight: 60%; }
.page-integration .TitreH1 .SousTitreH1 { font-size: clamp(20px, 2.15vw, 38px); }

/* Les 0,76 em de « de maquette » étaient un style en ligne du site : reportés ici
   pour que le téléphone puisse les remplacer. */
.page-integration .TitreH1 .de-maquette { font-size: 0.76em; }

/* Sur téléphone, chaque ligne du titre est calibrée pour occuper ~95 % de la
   largeur (demande du client du 2026-10-01) — les tailles diffèrent donc d'une
   ligne à l'autre. Le sous-titre se scinde en deux lignes, « Figma / Adobe XD »
   puis « dans vos projets », pour ne pas tomber trop petit sur une seule. */
@media (max-width: 600px) {
    .page-integration .TitreH1 .big           { font-size: 12.6vw; }
    .page-integration .TitreH1 .de-maquette   { font-size: 12.2vw; }
    .page-integration .TitreH1 .ligne-outils  { font-size: 9.2vw; }
    .page-integration .TitreH1 .ligne-projets { font-size: 9vw; }
    .page-integration .TitreH1 .SousTitreH1 .highlight { font-size: 6.5vw; }

    .page-integration .TitreH1 .sous-texte {
        display: flex;
        flex-direction: column;
        gap: 1.3vw;
    }
}

.page-gabarit .TitreH1 { font-size: clamp(26px, 6.8vw, 118px); }
.page-gabarit .TitreH1 .SousTitreH1 { font-size: clamp(20px, 2.15vw, 38px); }

/* « Template » a rejoint ce titre (demande du client du 2026-10-01) : à 6,8vw il
   passait sur trois lignes. Il va désormais seul à la seconde ligne, et sur
   l'écran large la taille suit la largeur de la colonne de texte (488 px à 1024,
   904 à 1440, 944 au-delà) pour que « Gabarit / Ambiance / » tienne toujours sur
   la première : 95 % de la colonne, d'où cette formule affine plafonnée à 80 px. */
.page-gabarit .TitreH1 .l-template { display: block; }

@media (min-width: 981px) {
    .page-gabarit .TitreH1 { font-size: clamp(26px, calc(8.5vw - 46px), 80px); }
}

/* Sur téléphone, chaque mot occupe sa ligne, calibrée à ~95 % des 335 px
   disponibles à 375 px — les tailles diffèrent donc d'un mot à l'autre. */
@media (max-width: 600px) {
    .page-gabarit .TitreH1 .l-gabarit,
    .page-gabarit .TitreH1 .l-ambiance { display: block; }

    .page-gabarit .TitreH1 .l-gabarit  { font-size: 16.6vw; }
    .page-gabarit .TitreH1 .l-ambiance { font-size: 14.1vw; }
    .page-gabarit .TitreH1 .l-template { font-size: 16.8vw; }
    .page-gabarit .TitreH1 .SousTitreH1 .partie-a  { font-size: 9.9vw; }
    .page-gabarit .TitreH1 .SousTitreH1 .highlight { font-size: 8.6vw; }

    /* Les trois mots s'empilent avec le même écart que les autres lignes. */
    .page-gabarit .TitreH1 .big {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.3vw;
    }
}

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

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

/* ---------------------------------------------------------------------------
   Bloc clair puis bloc sombre : même gabarit, fonds opposés
   --------------------------------------------------------------------------- */

.page-prestation .bloc-intro,
.page-prestation .bloc-sombre {
    padding: 100px 0;
}

.page-prestation .bloc-sombre {
    background: var(--c-sombre);
}

/* Les hauteurs de ligne des titres de section varient d'une page à l'autre et
   d'un bloc à l'autre : valeurs relevées une par une sur le site. */
.page-prestation .titre-intro,
.page-prestation .titre-sombre,
.page-prestation .titre-methode,
.page-prestation .titre-temoignages,
.page-prestation .titre-contact {
    line-height: 70px;
}

.page-refonte .titre-intro   { line-height: 77px; }
.page-refonte .titre-contact { line-height: 56px; }

.page-integration .titre-intro,
.page-integration .titre-sombre,
.page-integration .titre-temoignages,
.page-integration .titre-contact { line-height: 84px; }

/* Titre du bloc contact : 84 px sur Intégration et Gabarit, 56 sur Refonte
   (relevé). Une règle générique à 80 %, posée plus bas dans cette feuille,
   les ramenait toutes à 56 px : sur Intégration, où le titre tient sur deux
   lignes, les accents de la seconde (É, È) venaient alors buter contre la
   première. */
.page-gabarit .titre-contact { line-height: 84px; }

.page-prestation .titre-sombre {
    color: var(--c-vert-clair);
}

.page-prestation .texte-intro,
.page-prestation .texte-sombre {
    font-family: var(--font-alt);
    font-size: clamp(22px, 2.25vw, 30px);
    font-weight: 400;
    line-height: 120%;
    color: var(--c-gris-texte);
    text-align: center;
    margin-top: 114px;
}


.page-prestation .texte-sombre {
    color: var(--c-blanc);
}
/* --- Gabarit : un bloc sombre sur deux colonnes -------------------------- */
/* Relevé sur le site : deux colonnes de 535 px séparées de 150 px, titres à
   60/72 px et pitchs à 24/28,8 px alignés à gauche, en vert pâle. Refonte et
   Intégration gardent leur colonne unique pleine largeur, d'où le cantonnement. */

.page-gabarit .sombre-deux-colonnes {
    display: grid;
    /* `minmax(0, 535px)` et non `535px` : figées, les deux colonnes imposaient
       1070 px de large au document, bien au-delà d'un écran de téléphone. */
    grid-template-columns: repeat(2, minmax(0, 535px));
    justify-content: space-between;
    column-gap: 40px;
}

/* Sous 980 px les deux volets s'empilent, comme le reste des blocs prestation. */
@media (max-width: 980px) {
    .page-gabarit .sombre-deux-colonnes {
        grid-template-columns: 1fr;
        row-gap: 60px;
    }
}

.page-gabarit .titre-sombre {
    font-size: 60px;
    line-height: 72px;
}

.page-gabarit .texte-intro,
.page-gabarit .texte-sombre {
    font-size: 24px;
    line-height: 28.8px;
}

.page-gabarit .texte-sombre {
    color: var(--c-vert-pale);
    text-align: left;
}

/* Le titre du bloc clair respire davantage ici (84 px relevés, contre 70 ailleurs) */
.page-gabarit .titre-intro {
    line-height: 84px;
}

/* Pas de marge : le site sépare ses paragraphes par des <br>, reproduits dans
   le contenu — c'est ce qui donne les hauteurs exactes de ces blocs. */
.page-prestation .texte-intro p,
.page-prestation .texte-sombre p {
    margin: 0;
}

.page-prestation .texte-intro ul,
.page-prestation .texte-sombre ul {
    margin: 24px 0;
    padding-left: 40px;
}

/* Les puces se suivent d'une ligne, sans marge : relevé sur le site, où elles
   sont à 28,8 px l'une de l'autre pour une hauteur de ligne identique. Une
   marge de 36 px avait été posée ici sur une lecture erronée du bloc. */
.page-prestation .texte-intro li,
.page-prestation .texte-sombre li {
    margin: 0;
}

/* ---------------------------------------------------------------------------
   « Une méthode affûtée » — étapes avec animation Lottie
   --------------------------------------------------------------------------- */

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

/* Ce titre-ci porte 30 px de retrait haut et bas (130 px de haut au total) */
.page-prestation .titre-methode {
    padding: 30px 0;
}

.page-prestation .liste-etapes {
    max-width: 950px;
    margin: 0 auto;
}

/* Chaque étape est une carte blanche arrondie : relevé sur le site à 950 px de
   large — nos 890 px de contenu plus 2 x 30 px de retrait —, rayon 40 px, et
   90 px entre deux cartes. Le curseur reste une flèche : rien n'y est cliquable,
   c'est le survol qui met l'animation en marche (voir etapes-lottie.js). */
.page-prestation .bloc-etape {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 90px;
    padding: 30px;
    background: var(--c-blanc);
    border-radius: 40px;
    cursor: default;
}

.page-prestation .bloc-etape:first-child {
    margin-top: 10px;
}

.page-prestation .etape-animation {
    width: 150px;
    height: 150px;
    flex: 0 0 150px;
}

.page-prestation .etape-texte {
    flex: 1;
    min-width: 0;
}

.page-prestation .etape-titre {
    font-family: var(--font-titres);
    font-size: 32px;
    font-weight: 400;
    line-height: 45px;
    color: var(--c-sombre);
    text-transform: uppercase;
    margin: 0;
}

.page-prestation .etape-description {
    font-family: var(--font-texte);
    font-size: 20px;
    font-weight: 400;
    line-height: 22px;
    color: var(--c-gris-texte);
    margin: 10px 0 0;
}

.page-prestation .methode-cta {
    margin: 84px 0 0;
    text-align: center;
}

/* 239 px relevés sur le site, mais « Je suis intéressé » en Montserrat 24 px
   n'y tient pas : le libellé passait sur deux lignes. Le bouton garde cette
   largeur comme minimum et s'élargit à son texte (demande du 2026-10-01). */
.BoutonCTA.interesse {
    width: auto;
    min-width: 239px;
    white-space: nowrap;
    padding: 10px 20px;
    font-size: 24px;
    font-weight: 400;
    line-height: 29px;
}

/* ---------------------------------------------------------------------------
   Témoignages (empilés, sans carrousel) puis appel au contact
   --------------------------------------------------------------------------- */

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

.page-prestation .liste_temoignage {
    max-width: calc(70vw + 80px);
}

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

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

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

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

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

    /* Le conteneur n'a pas de hauteur propre et le SVG est en height: 100% : laisser
       les deux en `auto` les rendrait circulaires, et l'illustration disparaîtrait.
       On fixe la largeur, le viewBox donne le reste. */
    /* Empilée sous le texte, l'illustration se centre (demande du client du
       2026-10-01). */
    .page-prestation .hero-prestation-illustration {
        margin-top: 0;
        width: 70vw;
        max-width: 396px;
        height: auto;
        flex: none;
        align-self: center;
    }

    .page-prestation .hero-prestation-illustration .svg-illustration {
        height: auto;
    }

    /* Empilées, les cartes centrent leur contenu (demande du client du
       2026-10-01) : l'animation au-dessus, le texte en dessous, sur un même axe. */
    .page-prestation .bloc-etape {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 60px;
    }

    .page-prestation .texte-intro,
    .page-prestation .texte-sombre {
        margin-top: 60px;
    }
}

/* Sur téléphone, les textes des cartes d'étape réduisent (demande du client du
   2026-10-01) : à 20 px sur 258 px de colonne, la description courait sur sept
   lignes. Interlignes gardés dans le même rapport qu'à l'écran large. */
@media (max-width: 600px) {
    .page-prestation .etape-titre {
        font-size: 26px;
        line-height: 36px;
    }

    .page-prestation .etape-description {
        font-size: 16px;
        line-height: 19px;
    }
}