/* ===========================================================================
   Page d'accueil

   Règles transposées de ressources/css/style_general.css (sélecteurs
   form[name="PGEACCUEIL"] -> body.page-accueil). Les tailles restent en
   clamp() comme sur le site : les figer en px casserait le responsive
   (voir AGLPIXEL_DIRECTIVES.md §5).
   =========================================================================== */

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

/* Pleine largeur de page, contrairement aux autres sections : sur le site,
   #dwwFLEX_CONTENEUR_HERO est le seul bloc sans max-width (relevé à 1624 px pour
   1624 px de fenêtre). C'est son contenu, #dwwFLEX_HERO, qui est bridé à 1420 px
   et centré — d'où la vidéo qui va d'un bord à l'autre de la page.

   Hauteur réduite à la demande du client (2026-10-02) : le site lui donne 85 %
   de la fenêtre, qui laissaient 240 px de vide sous le bouton d'appel une fois
   le titre passé sur une ligne (785 px de haut à 1440 x 900). La hauteur vient
   désormais du contenu, comme sous 980 px : voir le retrait bas de .hero-content. */
.page-accueil .hero-conteneur {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    background: var(--c-vert-clair);
}

.page-accueil .hero {
    position: absolute;
    inset: 0;
}

.page-accueil .hero-bg-image,
.page-accueil .hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.page-accueil .hero-bg-image {
    z-index: 1;
}

.page-accueil .hero-video {
    z-index: 2;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.page-accueil .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 85%;
    z-index: 3;
}

/* Le contenu occupe toute la largeur : sur le site, #FLEX_CONTENU_HERO pose
   min-width:100%, ce qui annule le max-width:800px de .hero-content.
   Retrait bas de 125 px : autant sous le bouton d'appel qu'entre l'entête et le
   haut des capitales du titre (110 px jusqu'à sa boîte, plus 0,14em de jambage
   haut vide, soit ~125 px à 1440). */
.page-accueil .hero-content {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: var(--largeur-contenu);
    margin: 100px auto 0;
    padding: 60px 80px 125px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Le site limitait le texte à 80 % de la colonne (1008 px à 1440) : « Studio
   graphique » passait alors sur deux lignes et l'accroche laissait « mobiles »
   seul sur la sienne. Toute la largeur du contenu à la demande du client
   (2026-10-02) : le titre tient sur une ligne à toutes les largeurs de bureau
   (1 253 px pour 1 260 disponibles au plafond de 126 px). */
.page-accueil .hero-texte {
    flex: 1;
    min-width: 0;
}

.page-accueil .hero-texte-inner {
    padding-top: 30px;
}

/* Logo blanc et burger blanc tant que l'entête est au repos sur la vidéo */
.page-accueil .header.transparent .header-logo {
    color: var(--c-blanc);
}

.page-accueil .header.transparent .burger-btn span {
    background: var(--c-blanc);
}

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

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

.page-accueil .TitreH1 .SousTitreH1 {
    color: var(--c-vert-pale);
    font-size: clamp(24px, 2.3vw, 45px);
    line-height: 80%;
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 20px;
}

.page-accueil .TitreH1 .SousTitreH1 .highlight {
    font-size: clamp(24px, 2.3vw, 42px);
    color: var(--c-vert);
    background-color: var(--c-blanc);
    padding: 0 10px;
    line-height: 125%;
    width: max-content;
}

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

/* 20 px sous le titre, 80 px au-dessus du bouton : écarts relevés sur le site
   (titre 190 -> 460, accroche 480 -> 541, bouton 621).
   Portée limitée au hero : le site réutilise .Baseline ailleurs (pitch du bloc
   suivant), avec une couleur et des marges différentes. */
.page-accueil .hero-content .Baseline {
    font-family: var(--font-alt);
    font-size: clamp(18px, 1.6vw, 25.5px);
    font-weight: 500;
    line-height: 120%;
    color: var(--c-blanc);
    margin: 20px 0 0;
}

/* --- Bouton d'appel ------------------------------------------------------- */

.page-accueil .hero-cta {
    position: relative;
    margin: 80px 0 0;
}

/* --- Frise des technologies ------------------------------------------------ */

/* Repositionnement multi-technologies du 2026-10-01 : les trois logos PC SOFT
   laissent place à une frise qui défile en continu. Même mécanique que la frise
   clients de la page Réalisations — piste écrite deux fois, translation de 0 à
   -50 %. D'abord au bas du hero, en pastilles blanches sur la vidéo, elle passe
   le 2026-10-02 dans une bande blanche juste sous lui (demande du client), comme
   elle l'était déjà sous 980 px : les pastilles s'y fondent, restent logos et noms.
   Pas de fondu sur les bords (retiré à la demande du client le 2026-10-01, il se
   lisait comme une ombre) : la bande court sur toute la largeur de la fenêtre et
   rogne la piste, qui entre et sort par les bords de l'écran. */
.page-accueil .bloc-technos {
    padding: 30px 0;
    background: var(--c-blanc);
    overflow: hidden;
}

.page-accueil .frise-technos-piste {
    display: flex;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: defilement-technos 89s linear infinite;
}

/* La piste porte trois passages (voir Index.cshtml) : un tiers de translation
   ramène le deuxième exactement à la place du premier. Deux passages ne
   suffisaient pas dès que l'écran était plus large que l'un d'eux. L'écart entre
   pastilles est une marge à droite de chacune, pas un gap : avec un gap, la
   piste comptait un écart de moins que ses trois passages, et la boucle sautait
   de 8 px. Durée calée sur 40 px/s, la vitesse d'avant l'ajout de onze logos le
   2026-10-02 (3 559 px par passage). */
@keyframes defilement-technos {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100% / 3)); }
}

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

/* Pastilles de 45 px de haut, rayon 13 px : les cellules CELWINDEV* du site. */
.page-accueil .techno {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    height: 45px;
    margin-right: 24px;
    padding: 0 18px;
    background: var(--c-blanc);
    border-radius: 13px;
}

/* Icônes Simple Icons : noires, comme les logotypes PC SOFT */
.page-accueil .techno-logo {
    display: block;
    width: auto;
    height: 24px;
}

.page-accueil .techno-nom {
    font-family: var(--font-alt);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    white-space: nowrap;
}

/* Les logotypes PC SOFT portent leur nom, en lettres qui remplissent 92 % de
   l'image. À leurs 25 px relevés sur le site, ils écrasaient les noms des autres
   technologies ; réduits le 2026-10-02 (demande du client) dans le même rapport
   que sur téléphone : lettres à ~1,3 fois les capitales des noms (13 px à 18 px
   de police), soit 18 px d'image, et WINDEV Mobile — sur deux lignes — à la même
   échelle, pour que son « WINDEV » ait la taille des deux autres. */
.page-accueil .techno-logotype .techno-logo {
    height: 18px;
}

.page-accueil .techno-windev-mobile .techno-logo {
    height: 30px;
}

/* Sans mouvement pour qui l'a demandé à son système */
@media (prefers-reduced-motion: reduce) {
    .page-accueil .frise-technos-piste {
        animation: none;
    }
}

/* --- Indicateur de défilement -------------------------------------------- */
/* Bouton cliquable (BTNSCROLL du site) : 70 x 70 centré sur la largeur de la
   page — pas sur la colonne de texte —, à la hauteur du bouton d'appel. Il est
   posé dans la ligne de ce bouton (.hero-cta, aussi large que le contenu, donc
   même centre) : un top fixe, 512 px depuis le haut de .hero-content, ne valait
   que pour un titre sur deux lignes. */
.page-accueil .btn-scroll {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    padding: 5px;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 5;
}

.page-accueil .btn-scroll:focus-visible {
    outline: 2px solid var(--c-blanc);
    outline-offset: 4px;
    border-radius: 50%;
}

.page-accueil .scroll-down {
    display: block;
    width: 60px;
    height: 60px;
}

/* ---------------------------------------------------------------------------
   Bloc « Un design adapté à votre application métier »
   --------------------------------------------------------------------------- */

/* Retrait haut réduit de 100 à 50 px à la demande du client (2026-10-02) : sous
   la bande blanche de la frise, qui ajoute ses 30 px, le titre arrivait loin
   des logos. Même valeur qu'en téléphone. */
.page-accueil .bloc-design {
    padding: 50px 0 100px;
}

/* Le pitch reprend la classe .Baseline du site (Montserrat, gris), mais centré
   et sur toute la largeur de la bande interne. */
.page-accueil .pitch {
    font-family: var(--font-alt);
    font-size: clamp(18px, 1.6vw, 25.5px);
    font-weight: 400;
    line-height: 120%;
    color: var(--c-gris-texte);
    text-align: center;
    margin: 0;
}

.page-accueil .pitch strong {
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Bloc « Notre expertise PC SOFT® » et ses trois cartes d'offre
   --------------------------------------------------------------------------- */

.page-accueil .bloc-expertise {
    padding: 100px 0;
    background-color: var(--c-vert);
    background-image: url(../img/motif-fleches-bas.svg);
    background-repeat: no-repeat;
    background-position: 0% 30px;
}

/* Ce titre-ci suit le line-height 80 % de .TitreH2 (56 px), contrairement à celui
   du bloc précédent qui est à 100 % — les deux valeurs sont relevées sur le site. */
.page-accueil .titre-expertise {
    line-height: 80%;
    margin-bottom: 100px;
}

.page-accueil .grille-offres {
    display: grid;
    grid-template-columns: repeat(3, 367px);
    justify-content: space-between;
}

/* Sur l'accueil le bouton des cartes est plus large que sa taille naturelle */
.page-accueil .BoutonPetitCTA {
    width: 197px;
}


/* ---------------------------------------------------------------------------
   Bloc « Production graphique » — photo assombrie par un voile plein
   --------------------------------------------------------------------------- */

.page-accueil .bloc-production {
    padding: 160px 0;
    background-color: var(--c-sombre);
    background-image: linear-gradient(0deg, rgba(29, 34, 32, 0.898), rgba(29, 34, 32, 0.898)),
                      url(../img/expert-ui-ux-windev.webp);
    background-size: cover, cover;
    background-position: 50% 50%, 50% 50%;
    background-repeat: no-repeat, no-repeat;
    /* Seul effet parallaxe du site : la photo reste fixe pendant le défilement */
    background-attachment: fixed, fixed;
}

/* Bande plus étroite que les autres sections : 1100 px au lieu de 1220 */
.page-accueil .conteneur-production {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.page-accueil .titre-production {
    line-height: 80%;
    color: var(--c-vert-clair);
}

.page-accueil .pitch-production {
    font-family: var(--font-alt);
    font-size: clamp(18px, 1.6vw, 25.5px);
    font-weight: 400;
    line-height: 120%;
    color: var(--c-blanc);
    text-align: center;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Bloc « Dernières réalisations » — grille de vignettes clients
   --------------------------------------------------------------------------- */

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

.page-accueil .titre-realisations {
    line-height: 80%;
    margin-bottom: 100px;
}

.page-accueil .realisations-cta {
    margin: 100px 0 0;
    text-align: center;
}

/* Variante sombre du bouton d'appel (le hero utilise la version verte).
   Sa bordure fait 3 px et non 1 px : c'est ce qui donne les 238x50 du site. */
/* ---------------------------------------------------------------------------
   Bloc « La confiance ça se gagne » — carrousel de témoignages (Slick)
   --------------------------------------------------------------------------- */

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

.page-accueil .titre-temoignages {
    line-height: 80%;
}

/* ---------------------------------------------------------------------------
   Bloc « Qui sommes nous ? » — encart vert sur fond blanc
   --------------------------------------------------------------------------- */

.page-accueil .bloc-qui {
    padding: 100px 0;
}

.page-accueil .encart-qui {
    width: 1260px;
    max-width: calc(100% - 160px);
    margin: 0 auto;
    min-height: 549px;
    background-color: var(--c-vert);
    background-image: url(../img/points-verts.svg);
    border-radius: 40px;
    display: flex;
    padding: 124px 50px 0;
    gap: 70px;
}

.page-accueil .qui-colonne-gauche {
    width: 438px;
    flex: 0 0 438px;
    padding-left: 50px;
}

/* Le titre de ce bloc est plus gros que les autres H2 (90 px) et aligné à gauche */
.page-accueil .titre-qui {
    font-size: 90px;
    line-height: 72px;
    color: var(--c-vert-pale);
    text-align: left;
    margin-bottom: 97px;
}

.page-accueil .qui-colonne-droite {
    width: 652px;
    flex: 0 0 652px;
    margin-top: -74px;
    font-family: var(--font-texte);
    font-size: 24px;
    line-height: 26.4px;
    color: var(--c-vert-pale);
    text-align: left;
}

/* Le site sépare ses paragraphes par un <br> entre blocs ; une marge donne le
   même espacement (449 px de haut pour les trois paragraphes) sans la ligne
   fantôme que produit un <br> hors flux de texte. */
.page-accueil .qui-colonne-droite p {
    margin: 0;
}

.page-accueil .qui-colonne-droite p + p {
    margin-top: 39.5px;
}

/* Variante claire du petit bouton : vert foncé sur fond vert pâle */
.BoutonPetitCTA.clair {
    display: inline-block;
    width: auto;
    margin-top: 0;
    padding: 12.6px 16px;
    background-color: var(--c-vert-pale);
    color: #25a36c;
    font-size: 16px;
    font-weight: 700;
    line-height: 12.8px;
}

.BoutonPetitCTA.clair:hover,
.BoutonPetitCTA.clair:focus-visible {
    background-color: var(--c-blanc);
}

/* ---------------------------------------------------------------------------
   Bloc « Intéressé par nos services ? »
   --------------------------------------------------------------------------- */

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

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

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

/* La bande d'appel et sa flèche sont décrites dans site.css ; seule différence
   ici, la flèche est 12 px plus à droite que sur les autres pages (relevé). */
.page-accueil .contact-fleche {
    margin-left: 129px;
}

/* ---------------------------------------------------------------------------
   Animations d'entrée du hero
   Déclenchées par la classe .start-anim posée sur <body> après la fermeture
   du bandeau cookies (voir site.js).
   --------------------------------------------------------------------------- */

/* Le bouton d'appel s'anime seul, et non toute sa ligne : la flèche, qui y est
   logée, garde son apparition immédiate. */
.page-accueil .hero-content h1,
.page-accueil .hero-content .Baseline,
.page-accueil .hero-content .hero-cta .BoutonCTA,
.page-accueil .frise-technos {
    opacity: 0;
    transform: translateY(30px);
}

.start-anim .hero-content h1 {
    animation: fadeInUp 1s ease-out forwards;
}

.start-anim .hero-content .Baseline {
    animation: fadeInUp 1s ease-out 0.3s forwards;
}

.start-anim .hero-content .hero-cta .BoutonCTA {
    animation: fadeInUp 1s ease-out 0.6s forwards;
}

.start-anim .frise-technos {
    animation: appearUp 0.5s ease-out 0.8s forwards;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes appearUp {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

@media (max-width: 980px) {
    /* L'encart « Qui sommes nous ? » passe en colonne : ses deux colonnes fixes
       (438 + 652) débordaient largement sous 1200 px. */
    .page-accueil .encart-qui {
        flex-direction: column;
        max-width: calc(100% - 48px);
        padding: 60px 30px;
        gap: 40px;
    }

    .page-accueil .qui-colonne-gauche,
    .page-accueil .qui-colonne-droite {
        width: 100%;
        flex: none;
        padding-left: 0;
        margin-top: 0;
    }

    .page-accueil .titre-qui {
        font-size: clamp(40px, 8vw, 90px);
        line-height: 100%;
        margin-bottom: 0;
    }

    /* Empilé, le bouton « En savoir plus » passe sous le texte (demande du
       client du 2026-10-02). La colonne de gauche s'efface (`display: contents`) :
       titre et bouton deviennent des éléments de l'encart, et le bouton se range
       en dernier. Les 40 px entre éléments sont ceux de l'encart. */
    .page-accueil .qui-colonne-gauche {
        display: contents;
    }

    .page-accueil .qui-colonne-gauche .BoutonPetitCTA {
        order: 1;
        align-self: flex-start;
    }

    .page-accueil .hero-content {
        flex-direction: column;
        align-items: flex-start;
        padding: 60px 20px 0;
    }

    .page-accueil .hero-texte {
        max-width: 100%;
    }

    /* La flèche quitte son ancrage sur le bouton et revient dans le flux, centrée
       sous le bouton d'appel — comme sur le site, dont le BTNSCROLL repasse en
       position statique sur petit écran. */
    .page-accueil .btn-scroll {
        position: static;
        transform: none;
        display: block;
        margin: 15px auto 30px;
    }

    /* Bande plus serrée, collée au bas du hero comme le site le fait de ses
       logos sous 980 px. */
    .page-accueil .bloc-technos {
        padding: 10px 0;
    }
}

@media (max-width: 600px) {
    /* Gouttière de 30 px comme sur le site (qui, lui, laisse déborder son titre
       et son bouton hors de l'écran à cette largeur — voir REPRISE.md). */
    .page-accueil .hero-content {
        padding: 40px 30px 0;
    }

    .page-accueil .hero-texte-inner {
        max-width: 100%;
    }

    /* Titre, sous-titre et accroche centrés sur téléphone (demande du client —
       le site, lui, les garde alignés à gauche). Le titre et le sous-titre sont
       des conteneurs flex : il leur faut l'alignement de leurs enfants, pas
       seulement `text-align`. */
    .page-accueil .hero-texte-inner {
        text-align: center;
    }

    .page-accueil .TitreH1 {
        align-items: center;
    }

    .page-accueil .TitreH1 .SousTitreH1 {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Titre agrandi (demande du client du 2026-10-02) : chaque mot de « Studio
       graphique » occupe ~95 % des 315 px disponibles à 375 px, sur sa ligne ;
       « dédié à vos » prend la taille des sous-titres des autres pages (9,5vw) et
       le cartouche ~95 % à son tour. Interlignes sans unité et écarts comme sur
       les pages intérieures (voir prestation.css) — sauf avant « dédié à vos » :
       3vw au lieu de 1,3, pour que ses accents ne touchent pas « graphique ». */
    .page-accueil .TitreH1 {
        line-height: 0.83;
        gap: 3vw;
    }

    .page-accueil .TitreH1 .big {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.3vw;
    }

    .page-accueil .TitreH1 .l-studio    { font-size: 21.2vw; }
    .page-accueil .TitreH1 .l-graphique { font-size: 13.4vw; }

    .page-accueil .TitreH1 .SousTitreH1 {
        font-size: 9.5vw;
        line-height: 0.83;
        flex-direction: column;
        gap: 3vw;
        padding-top: 0;
    }

    .page-accueil .TitreH1 .SousTitreH1 .highlight {
        font-size: 6.8vw;
    }

    /* La marge négative du desktop fait chevaucher l'accroche et le cartouche
       vert quand le titre passe sur plusieurs lignes. */
    .page-accueil .hero-content .Baseline {
        margin-top: 24px;
    }

    /* Pastilles et logos réduits d'un cran, comme le site réduisait les siens à
       cette largeur ; écart entre pastilles ramené à 12 px. */
    .page-accueil .techno {
        height: 40px;
        margin-right: 12px;
        padding: 0 12px;
        gap: 8px;
    }

    .page-accueil .techno-logo {
        height: 20px;
    }

    .page-accueil .techno-nom {
        font-size: 15px;
    }

    /* Les lettres des logotypes PC SOFT remplissent 92 % de leur image : à 21 px,
       elles écrasaient les noms des autres technologies (19 px de capitales contre
       une dizaine). Ramenés à 15 px, et WINDEV Mobile à la même échelle (25 px),
       pour que son « WINDEV » ait la taille des deux autres (demande du
       2026-10-01). */
    .page-accueil .techno-logotype .techno-logo {
        height: 15px;
    }

    .page-accueil .techno-windev-mobile .techno-logo {
        height: 25px;
    }

    /* La flèche rétrécit elle aussi : sur le site, .animation-container.small
       vaut 60 px au-dessus de 600 px et 50 px en dessous. */
    .page-accueil .btn-scroll {
        width: 50px;
        height: 50px;
        padding: 0;
    }

    .page-accueil .scroll-down {
        width: 50px;
        height: 50px;
    }

    .BoutonCTA {
        min-width: 0;
        width: 100%;
    }

    /* Cette bande a son conteneur à elle (1100 px au lieu de 1220), qui échappe
       donc à la gouttière posée sur .conteneur-interne. */
    .page-accueil .conteneur-production {
        padding-left: 30px;
        padding-right: 30px;
    }

    /* 100 px sous le titre valent pour l'écran large ; ici c'est un trou.
       (La gouttière latérale, elle, vient de .conteneur-interne — voir site.css.) */
    .page-accueil .titre-expertise {
        margin-bottom: 40px;
    }

    /* Les pois de l'encart « Qui sommes nous ? » s'estompent : à cette largeur le
       texte occupe toute la carte, et des pastilles de 8 px juste derrière lui
       gênaient la lecture. Un voile du même vert, posé au-dessus du motif dans la
       pile de fonds, suffit — le motif reste, en retrait (rgba : var(--c-vert)). */
    .page-accueil .encart-qui {
        background-image:
            linear-gradient(rgba(15, 199, 119, 0.6), rgba(15, 199, 119, 0.6)),
            url(../img/points-verts.svg);
    }
}