/* ===========================================================================
   Page Réalisations — /realisations-ux-ui

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

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */

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

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

.page-realisations .hero-realisations-contenu {
    width: 100%;
    max-width: calc(100vw - 60px);
    padding: 30px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

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

.page-realisations .hero-realisations-illustration {
    width: 408px;
    height: 413px;
    flex: 0 0 408px;
    margin-top: 129px;
}

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

.page-realisations .TitreH1 .SousTitreH1 {
    font-size: clamp(30px, 4vw, 69px);
    line-height: 80%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Le cartouche ne suit pas la taille du sous-titre : le site le pose à 60 % de
   celle-ci (36,84 px pour 61,4 px relevés à 1520 px). Sans cela la ligne
   « WINDEV - WEBDEV - WINDEV Mobile » déborde du hero. */
.page-realisations .TitreH1 .highlight {
    display: inline-block;
    width: max-content;
    max-width: 100%;
    color: var(--c-blanc);
    background: var(--c-vert);
    font-size: 60%;
    padding: 8px 10px 6px;
    line-height: 85%;
}

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

/* ---------------------------------------------------------------------------
   Frise de logos clients — trois rangées qui défilent en continu
   --------------------------------------------------------------------------- */

.page-realisations .bloc-frise {
    padding: 80px 0 60px;
}

.page-realisations .titre-frise {
    line-height: 70px;
    margin-bottom: 134px;
}

/* Les trois carrés verts ne paraissent ici que sur téléphone (demande du client
   du 2026-10-01) : à l'écran large, le site laisse ce titre seul au-dessus de la
   frise. */
.page-realisations .separateur-frise {
    display: none;
}

/* Le dégradé d'opacité sur les bords évite que les logos apparaissent
   brutalement (repris tel quel du site). */
.page-realisations .frise-logos {
    overflow: hidden;
    width: 100%;
    max-width: 80vw;
    margin: 0 auto;
    padding: 20px 0;
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* Relevé sur le site : les rangées 1 et 3 défilent vers la gauche en 20 s, celle
   du milieu vers la droite en 25 s. */
.page-realisations .frise-piste {
    display: flex;
    flex-direction: row;
    width: max-content;
    gap: 20px;
    animation: marquee-gauche 20s linear infinite;
}

.page-realisations .frise-piste-inverse {
    animation-name: marquee-droite;
    animation-duration: 25s;
}

/* Après le raccourci `animation`, jamais avant : il le réinitialiserait. */
.page-realisations .frise-logos:hover .frise-piste {
    animation-play-state: paused;
}

.page-realisations .frise-logo {
    height: 80px;
    width: 230px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.4s ease;
}

.page-realisations .frise-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* ---------------------------------------------------------------------------
   « Une expertise PC SOFT® reconnue depuis N ans » — bande sombre
   --------------------------------------------------------------------------- */

.page-realisations .bloc-expertise-annees {
    padding: 100px 0;
    background: var(--c-sombre);
}

.page-realisations .titre-annees {
    line-height: 70px;
    color: var(--c-vert-clair);
}

/* Le nombre d'années ressort en blanc sur le vert clair du titre (demande du
   client du 2026-10-01). */
.page-realisations #compteurAnnees {
    color: var(--c-blanc);
}

.page-realisations .pitch-annees {
    font-family: var(--font-alt);
    font-size: clamp(18px, 2.1vw, 30px);
    font-weight: 400;
    line-height: 120%;
    color: var(--c-blanc);
    text-align: center;
    /* 114 px relevés sur le site, réduits à 40 à la demande du client
       (2026-10-01). */
    margin: 40px 0 0;
}

/* ---------------------------------------------------------------------------
   Portfolio — 12 vignettes, 4 colonnes au-delà de 1400 px
   --------------------------------------------------------------------------- */

.page-realisations .bloc-portfolio {
    padding: 100px 0;
}

/* Ici la grille occupe toute la bande de contenu, pas la bande interne */
.page-realisations .bloc-portfolio .conteneur-interne {
    max-width: var(--largeur-contenu);
}

.page-realisations .titre-portfolio {
    line-height: 56px;
    margin-bottom: 100px;
}

/* ---------------------------------------------------------------------------
   Témoignages (carrousel) puis appel au contact
   --------------------------------------------------------------------------- */

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

.page-realisations .titre-temoignages {
    line-height: 56px;
}

.page-realisations .bloc-contact {
    padding: 100px 0;
}

.page-realisations .titre-contact {
    line-height: 56px;
}

/* Les 114 px au-dessus du texte sont désormais ceux du séparateur à trois
   carrés, que le site porte ici comme sur les autres pages et qui manquait
   (signalé par le client le 2026-10-01) : la hauteur de la page ne bouge pas. */
.page-realisations .pitch-contact {
    font-family: var(--font-alt);
    font-size: clamp(18px, 2.1vw, 30px);
    font-weight: 400;
    line-height: 120%;
    color: var(--c-gris-texte);
    text-align: center;
    margin: 0;
}

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

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

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

    /* Empilée sous le texte, l'illustration se centre (demande du client du
       2026-10-01). */
    .page-realisations .hero-realisations-illustration {
        margin-top: 0;
        max-width: 70vw;
        height: auto;
        flex: none;
        align-self: center;
    }

    .page-realisations .frise-logos {
        max-width: 100%;
    }
}

/* Le titre de la frise est posé directement dans sa section, sans conteneur :
   la gouttière de téléphone doit lui être donnée à part. La frise elle-même
   garde toute la largeur, c'est son principe. */
@media (max-width: 600px) {
    .page-realisations .titre-frise {
        padding-left: 30px;
        padding-right: 30px;
        margin-bottom: 0;
    }

    /* 134 px de vide sous le titre ramenés à une bande de 80 px portant les
       trois carrés — plus serrée que les 114 px des autres sections, la frise
       ayant elle-même du blanc au-dessus de sa première rangée. */
    .page-realisations .separateur-frise {
        display: flex;
        height: 80px;
    }

    /* Titre du hero agrandi (demandes du client des 2026-10-01 et 02) : les
       minimums des clamp le laissaient à 25 px, plus petit que son sous-titre.
       « Réalisations » et « UI/UX Design » occupent chacun ~95 % des 335 px
       disponibles à 375 px, le cartouche aussi. Interlignes et écarts comme sur
       les pages prestation (voir prestation.css). */
    .page-realisations .TitreH1 {
        font-size: 12vw;
        line-height: 0.83;
        gap: 1.3vw;
    }

    .page-realisations .TitreH1 .SousTitreH1 {
        font-size: 12.5vw;
        line-height: 0.83;
        align-items: center;
        gap: 3vw;
    }

    .page-realisations .TitreH1 .highlight {
        font-size: 6.5vw;
    }

    /* La taille d'accroche des pages prestation */
    .page-realisations .Baseline {
        font-size: 22px;
    }
}