/* ========================================================================== PAGES INTÉRIEURES — DÉFILEMENT « ACCUEIL » (mode A, 09/10/2026) Va avec assets/js/modules/pagescroll-a.js, qui pose sur : .ps-a le mode est actif (tout ce fichier en dépend : sans cette classe, les pages restent exactement comme avant) ; .ps-a-engine souris / pavé tactile : le moteur pilote le défilement natif ; (écran tactile : le mode ne démarre plus depuis le 10/10/2026, aucune classe posée, la page reste exactement comme avant ; voir en bas) ; .ps-a-moving pendant un glissé du moteur ; --ps-ftr hauteur du pied de page (mesurée). Comme à l'accueil : chaque étape (en-tête de page, sections, Page suivante, bloc de fin + pied de page) occupe au moins un écran, calée en haut de l'écran ; l'en-tête fixe du site passe par-dessus la marge haute de la section et le contenu se centre dans ce qui reste visible dessous. Une section plus haute que l'écran garde sa hauteur (elle se lit en plusieurs écrans). Rien ici ne touche l'accueil (main.home), les pages légales ni la 404 : le module ne s'y lance pas. ========================================================================== */ /* écran seulement : à l'impression, les pages gardent leur mise en page d'origine (sinon blocs d'un écran de haut, pages presque vides) */ @media screen{ /* le haut d'une section est calé en haut de l'écran : pas de marge de défilement (les ancres natives tombent donc pile sur la section) ; le moteur glisse lui-même, sans le défilement doux du navigateur */ html.ps-a{scroll-padding-top:0} html.ps-a.ps-a-engine{scroll-behavior:auto} /* ---------- en-tête de page : un écran entier (plafond 4:3 levé) ---------- sa mise en page reste la sienne (colonne centrée, ou grille de l'en-tête animé .phero--show) */ html.ps-a main:not(.home) > .phero{min-height:100vh;min-height:100svh} /* ---------- sections : un écran au moins, contenu centré sous l'en-tête --- */ html.ps-a main:not(.home) > .sec:not(.cta){min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:var(--hdr)} html.ps-a main:not(.home) > .sec:not(.cta) > .sec__rail{top:calc(var(--hdr) + 22 * var(--m))} /* ---------- Page suivante : un écran, l'aperçu centré ---------------------- */ html.ps-a main:not(.home) > a.nextpage{min-height:100vh;min-height:100svh} @media (min-width:1024px){ /* grille d'origine (rangées 1fr auto auto auto 1fr) : le texte se centre déjà ; l'écran animé, de hauteur fixe, se centre aussi */ html.ps-a main:not(.home) > a.nextpage.np{padding-top:calc(var(--hdr) + 16 * var(--m))} html.ps-a main:not(.home) > a.nextpage.np > .np-vis{align-self:center} } /* ---------- bloc de fin + pied de page = un écran -------------------------- */ html.ps-a main:not(.home) > .sec.cta{min-height:calc(100vh - var(--ps-ftr,0px));min-height:calc(100svh - var(--ps-ftr,0px))} /* page sans bloc de fin (contact) : sa dernière section + pied de page = un écran aussi (sinon un dernier petit pas qui ne montre que le pied) */ html.ps-a main:not(.home) > .sec:not(.cta):last-child{min-height:calc(100vh - var(--ps-ftr,0px));min-height:calc(100svh - var(--ps-ftr,0px))} /* ---------- sections à peine plus hautes que l'écran : resserrées ---------- Un écran au lieu de deux arrêts presque identiques (le second coupait le titre sous l'en-tête). Ordinateur seulement. */ @media (min-width:1024px){ /* exemple cuisiniste, 02 « L'identité » : 100 à 210 px de trop */ html.ps-a body[data-page="exemple-cuisiniste"] #identite > .blk--split{padding-bottom:calc(10 * var(--m))} html.ps-a body[data-page="exemple-cuisiniste"] #identite .xc-id-blk{padding-bottom:calc(12 * var(--m))} html.ps-a body[data-page="exemple-cuisiniste"] #identite .xc-logo__tile{min-height:0} html.ps-a body[data-page="exemple-cuisiniste"] #identite .xc-swatches .swatch{aspect-ratio:1/.8} html.ps-a body[data-page="exemple-cuisiniste"] #identite .xc-sup{margin-top:calc(12 * var(--m))} html.ps-a body[data-page="exemple-cuisiniste"] #identite .xc-sup__art{aspect-ratio:2.4/1} html.ps-a body[data-page="exemple-cuisiniste"] #identite .xc-sup__cap{margin-top:8px} } @media (min-width:1024px) and (max-height:820px){ html.ps-a body[data-page="exemple-cuisiniste"] #identite .xc-swatches .swatch{aspect-ratio:1/.62} html.ps-a body[data-page="exemple-cuisiniste"] #identite .xc-id__block + .xc-id__block{margin-top:calc(14 * var(--m))} html.ps-a body[data-page="exemple-cuisiniste"] #identite .xc-sup__art{aspect-ratio:3/1} html.ps-a body[data-page="exemple-cuisiniste"] #identite .xc-logo__tile{padding-top:11%;padding-bottom:10%} } /* expertises en 1366 × 768 et 1280 × 720 : « Comment ça s'emboîte » et « Par où commencer ? » dépassaient de 3 à 10 px une fois leurs marges calées */ @media (min-width:1024px) and (max-height:800px){ html.ps-a body[data-page="expertises"] main > .sec:not(.cta) > .blk--split:not(:last-child){padding-bottom:calc(16 * var(--m))} html.ps-a body[data-page="expertises"] .xroutes{margin-top:calc(14 * var(--m))} html.ps-a body[data-page="expertises"] .xr{padding-top:calc(12 * var(--m));padding-bottom:calc(12 * var(--m))} html.ps-a body[data-page="expertises"] .xfil__foot{margin-top:calc(10 * var(--m))} } @media (max-width:1023px){ html.ps-a main:not(.home) > a.nextpage{display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--hdr) + 44px)} html.ps-a main:not(.home) > .sec.cta{display:flex;flex-direction:column;justify-content:center;padding-top:var(--hdr)} html.ps-a main:not(.home) > .sec.cta > .sec__rail{top:calc(var(--hdr) + 24px)} /* sections : la marge haute de la section réserve déjà l'en-tête ; les marges des blocs se resserrent (comme à l'accueil au téléphone : numéro à 14 px sous l'en-tête). Sinon une section qui tenait dans l'écran en défilement normal le dépassait de quelques dizaines de px, et chaque geste qui en sortait s'arrêtait « entre deux » */ html.ps-a main:not(.home) > .sec:not(.cta) > .sec__rail{top:calc(var(--hdr) + 14px)} html.ps-a main:not(.home) > .sec:not(.cta) > .sec__rail + .blk{padding-top:44px} html.ps-a main:not(.home) > .sec:not(.cta) > .blk{padding-bottom:32px} html.ps-a main:not(.home) > .sec:not(.cta) > .blk:last-child{padding-bottom:24px} /* en-tête de page animé (.phero__show : réalisations, sites internet, identité visuelle, logiciels métier) resserré : il tient dans l'écran sur réalisations et sites internet (le bouton du bas était coupé) */ html.ps-a main:not(.home) > .phero:has(.phero__show){padding-top:calc(var(--hdr) + 16px);padding-bottom:12px} html.ps-a main:not(.home) > .phero:has(.phero__show) .phero__lede{margin-top:12px} html.ps-a main:not(.home) > .phero:has(.phero__show) .hero__ctas{margin-top:16px} html.ps-a main:not(.home) > .phero:has(.phero__show) .cf__nav{margin-top:6px} /* méthode 03 « Nos engagements » et 04 « Premier échange » : à peine plus hauts que l'écran */ html.ps-a body[data-page="methode"] #engagements .mt-pledges{margin-top:16px} html.ps-a body[data-page="methode"] #engagements .mt-pledges li{padding-block:9px} html.ps-a body[data-page="methode"] #engagements .mt-yes{max-width:230px;margin-top:8px} html.ps-a body[data-page="methode"] #premier-echange .mt-mail__fields p{padding-block:8px} html.ps-a body[data-page="methode"] #premier-echange .mt-mail__list li{padding-block:9px} } /* bloc de fin + pied de page = un écran au téléphone, comme le bloc 07 de l'accueil : le texte au centre, la lune et les rochers posés sur le pied de page (la scène se tasse, 96 px au moins). Écrans de 700 px de haut au moins : plus bas, le bloc garde sa hauteur (rien n'est coupé) */ @media (max-width:1023px) and (min-height:700px){ html.ps-a main:not(.home) > .sec.cta{padding-bottom:0;height:calc(100vh - var(--ps-ftr,0px));height:calc(100svh - var(--ps-ftr,0px))} html.ps-a main:not(.home) > .sec.cta > .sec__rail{top:calc(var(--hdr) + 14px)} html.ps-a main:not(.home) > .sec.cta > .cta__grid{flex:none;padding:44px 24px 0;margin-block:auto} html.ps-a main:not(.home) > .sec.cta > .cta__scene{order:2;flex:0 1 auto;min-height:96px} } /* ---------- au doigt : défilement 100 % natif, AUCUN calage (10/10/2026) ---- Essayé et écarté, l'un après l'autre, sur iPhone : - calage par pagescroll-a.js après l'élan : arrêt puis relance, saccadé ; - scroll-snap « proximity » : Safari freine l'élan dès que la page porte un scroll-snap (Yann : « on a l'impression qu'on a un frein ») ; - scroll-snap « mandatory » : en plus, une section plus haute que l'écran y perd son élan (WebKit, bug 253195), la page revient en arrière. L'accueil fait de même (home.css). Ne pas remettre de scroll-snap sur la page au doigt. Puis, la mise en page plein écran gardée au doigt avec un défilement 100 % natif : « ça bug encore », « enlève le scroll automatique sur les smartphones ». Depuis, le mode ne démarre plus du tout au doigt (pages, pagescroll.js, pagescroll-a.js, main.js) : ce fichier ne sert qu'à la souris. */ }