/* ═══ Flèches latérales PÔLE PRÉCÉDENT / SUIVANT (circuler entre les 6 pôles sans ressortir) ═══ */ .pole-nav-arrow { position: fixed; top: 50%; transform: translateY(-50%); z-index: 300; width: 56px; height: 56px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: rgba(11,4,25,.5); color: #FFFEF7; text-decoration: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 22px rgba(11,4,25,.22); transition: background .25s ease, transform .25s ease; will-change: transform; } .pole-nav-arrow:hover { background: #0B0419; transform: translateY(-50%) scale(1.08); } .pole-nav-arrow.prev { left: 24px; } .pole-nav-arrow.next { right: 24px; } .pole-nav-arrow svg { width: 24px; height: 24px; } @media (max-width: 720px){ .pole-nav-arrow { width: 44px; height: 44px; } .pole-nav-arrow.prev { left: 10px; } .pole-nav-arrow.next { right: 10px; } .pole-nav-arrow svg { width: 20px; height: 20px; } } /* ═══ Bouton PÔLE au-dessus du titre : affiche le pôle courant (bordure dégradé), ouvre le choix des autres ═══ */ /* Le selecteur de pole vit DANS la barre du haut, au niveau du logo / Menu (alex 23/07/2026) : position fixed, centre horizontalement entre le logo (gauche) et Menu (droite), cale verticalement au milieu de la nav (~22px desktop). z-index 90 : sous le menu overlay (100+). */ .pole-switch { position: fixed; top: 22px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; justify-content: center; margin: 0; } @media (max-width: 720px) { .pole-switch { top: 16px; } } /* La nav (fixed, z100) se superpose au bouton pole (fixed, z90) place dans sa bande : elle CAPTAIT les clics (bouton « pas cliquable »). On rend la nav traversante SAUF ses enfants (logo, liens, bouton Menu) -> le clic au centre atteint le bouton pole dessous. Regle sans risque hors pole : ce fichier n'est charge QUE sur les 6 pages pole. */ nav { pointer-events: none; } nav > * { pointer-events: auto; } .pole-switch-btn { position: relative; /* repere pour le liseré ::before */ display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; cursor: pointer; line-height: 1; font-family: var(--font-body, 'Inter', sans-serif); font-size: 15px; font-weight: 600; /* FOND VERRE DEPOLI OPAQUE (alex 24/07/2026) : au lieu du transparent total, une pastille en verre depoli sombre (backdrop-blur) — le fond de page transparait mais flouté/assombri, texte clair lisible. Le liseré dégradé reste en ANNEAU (::before). */ color: #FFFEF7; background: linear-gradient(180deg, rgba(60,50,77,.68) 0%, rgba(20,15,29,.62) 100%); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); border: 0; transition: transform .2s ease, box-shadow .2s ease; } /* liseré dégradé en anneau : un dégradé plein, masqué de facon a ne garder que le contour (padding), le centre (content-box) etant evide par `mask-composite: exclude`. */ .pole-switch-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, #FF7262, #A259FF, #1ABCFE); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .pole-switch-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(11,4,25,.12); } .pole-switch-caret svg { width: 15px; height: 15px; display: block; transition: transform .2s ease; } .pole-switch.is-open .pole-switch-caret svg { transform: rotate(180deg); } /* menu déroulant des pôles */ .pole-switch-menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-6px); z-index: 400; display: flex; flex-direction: column; gap: 2px; min-width: 190px; padding: 8px; background: #FFFEF7; border-radius: 14px; box-shadow: 0 12px 34px rgba(11,4,25,.16), 0 0 0 1px rgba(11,4,25,.06); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .pole-switch.is-open .pole-switch-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .pole-switch-item { padding: 11px 14px; border-radius: 9px; text-decoration: none; text-align: left; font-family: var(--font-body, 'Inter', sans-serif); font-size: 15px; font-weight: 500; color: #3c324d; transition: background .15s ease, color .15s ease; } .pole-switch-item:hover { background: #f3ede0; color: #0B0419; } .pole-switch-item.is-active { color: #0B0419; font-weight: 700; } /* dégradé madly sur les mots marqués (titres, intros, disciplines) + le du titre */ .pole-page .grad, .pole-page .pole-title em { background: linear-gradient(135deg, #FF7262 0%, #A259FF 50%, #1ABCFE 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-style: normal; } /* ═══ Bas de page pôle : projets, boutons et FAQ étaient stylés FOND SOMBRE (texte/bordures blancs = invisibles sur champagne). On repasse tout en encre. ═══ */ /* + d'air entre le carrousel de disciplines et les cards projet (même espace qu'au-dessus du carrousel, ~112px) */ .pole-page .svc-detail-projects { margin-top: 92px; } /* projets + FAQ AU-DESSUS du coverflow (jamais recouverts par les cards) */ .pole-page .svc-detail-projects, .pole-page .svc-detail-faq { position: relative !important; z-index: 1 !important; } /* boutons du bas */ .pole-page .svc-detail-cta { border-top: none; padding-top: 4px; } /* PLUS de ligne grise sous les cards */ .pole-page .svc-btn-primary { background: #0B0419; color: #FFFEF7; } /* plein encre + texte crème */ .pole-page .svc-btn-primary:hover { color: #FFFEF7; } /* le dégradé (::before) monte au survol */ .pole-page .svc-btn-ghost { background: transparent; color: #0B0419; border: 1.5px solid #d9cdbb; } .pole-page .svc-btn-ghost:hover { background: rgba(11,4,25,.05); border-color: #0B0419; color: #0B0419; } /* FAQ « Vos questions » : tout était blanc (invisible). On rend visible sur champagne. */ .pole-page .svc-detail-faq { border-top: 1px solid #e6dfd0; } /* pilule liseré dégradé + fond = fond de page (demande alex) — comme nos autres boutons */ .pole-page .svc-detail-faq-toggle { color: #0B0419; background: linear-gradient(var(--champagne, #FFFEF7), var(--champagne, #FFFEF7)) padding-box, linear-gradient(135deg, #FF7262 0%, #A259FF 50%, #1ABCFE 100%) border-box; border: 1.5px solid transparent; } .pole-page .svc-detail-faq-toggle:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(162,89,255,0.18); } .pole-page .svc-detail-faq-item, .pole-page .svc-detail-faq-item:first-child { border-color: #e6dfd0; } .pole-page .svc-detail-faq-q { color: #0B0419; } .pole-page .svc-detail-faq-plus::before, .pole-page .svc-detail-faq-plus::after { background: #0B0419; } .pole-page .svc-detail-faq-a p { color: #3c324d; } /* ═══ En-tête pôle CENTRÉ (comme la page services) : eyebrow + titre + intro ═══ */ .pole-page .pole-eyebrow { text-align: center !important; } /* le titre : on RETIRE le max-width 900px (qui forçait un 3e retour ligne sur grand écran) et on CENTRE le bloc */ .pole-page .pole-title { text-align: center !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; } .pole-page .pole-intro { text-align: center !important; max-width: 60ch; margin-left: auto !important; margin-right: auto !important; } /* sections « projets » / « process » : titres centrés aussi */ .pole-page .pole-section-eyebrow, .pole-page .pole-section-title { text-align: center; } .pole-page .pole-section-title { margin-left: auto; margin-right: auto; } /* ═══ Infinite card slider pour les cards disciplines des pages pôle (façon demo GSAP) ═══ */ .pole-slider-vp { overflow: hidden; position: relative; z-index: 0; /* le coverflow reste SOUS les projets + la FAQ (demande alex : cards projets qui passaient sous les questions) */ width: 100vw; margin-left: calc(50% - 50vw); /* déborde le conteneur .pole-modal-inner -> pleine largeur */ padding: 40px 0 20px; /* marge verticale : card centrale (×1.1) non rognée ; moitié moins de blanc en bas */ /* les cards ne « sortent » plus des bords : elles se FONDENT (masque) -> côtés moins opaques */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%); /* PERSPECTIVE sur le VIEWPORT (alex 24/07/2026) : le point de fuite est au centre de la zone VISIBLE (donc sur la card de devant). Avant, la perspective etait sur la piste `.pole-grid` large (max-content) -> point de fuite au centre de la piste geante, tres a cote des cards visibles -> vue oblique = CISAILLEMENT (l'image paraissait deformee). */ perspective: 1600px; perspective-origin: 50% 48%; } .pole-grid.is-slider { display: flex !important; flex-wrap: nowrap; grid-template-columns: none !important; gap: 18px; width: max-content; margin: 0; padding-left: 50vw; /* la 1re card démarre au CENTRE (carrousel circulaire) */ cursor: grab; /* la perspective est desormais portee par `.pole-slider-vp` (point de fuite centre). preserve-3d : la piste ne DOIT PAS aplatir la 3D des cards, sinon le pivot rotationY retombe a plat sous la perspective du viewport. */ transform-style: preserve-3d; } .pole-grid.is-slider.is-dragging { cursor: grabbing; } .pole-grid.is-slider .pole-sub { flex: 0 0 auto; width: clamp(230px, 19vw, 300px); /* moins large */ height: clamp(330px, 40vh, 410px); /* moins haute */ box-sizing: border-box; overflow: hidden; box-shadow: none; /* pas de contour/ombre (demande alex) */ border: 0; will-change: transform; } /* pas de NUMÉRO sur les cards du carrousel -> aucun ordre visible */ .pole-grid.is-slider .pole-sub-num { display: none !important; } @media (max-width: 720px) { .pole-grid.is-slider .pole-sub { width: 74vw; height: 66vh; } } /* ═══ TITRE au-dessus des projets + SEPARATION avec le footer (alex 24/07/2026) ═══ */ /* petit titre d'invitation avant les cards projets */ .pole-page .pole-projets-titre { text-align: center; font-family: 'Champ', 'Manrope', sans-serif; font-size: clamp(26px, 3.2vw, 44px); font-weight: 600; letter-spacing: -.02em; line-height: 1.05; color: #FFFEF7; margin: 72px auto 34px; /* descendu : plus d'air entre la FAQ et le titre (alex 24/07/2026) */ } /* ═══ BLOC OUTRO (alex 24/07/2026) : les QUESTIONS + les CARDS partagent UN MÊME fond animé (un seul panneau violet). Le FOOTER (plus sombre) reste la 3e partie, distincte. Pleine largeur ; le contenu est re-centré à 1080px par le padding horizontal. ═══ */ .pole-outro { position: relative; /* PLEINE LARGEUR SANS DEBORDEMENT : 100vw inclut la barre de defilement (mesure : 768 vs 753 visibles = 15px de trop). On applique la convention maison --barre (mesuree en JS dans les pages pole), comme le bloc visuel .pole-bg-wrap. */ left: 50%; width: calc(100vw - var(--barre, 0px)); margin-left: calc((100vw - var(--barre, 0px)) / -2); padding: 52px max(24px, calc(50vw - 540px)) 60px; /* espace violet sous les cards, avant le footer */ /* FOND DEGRADE VIOLET (demande alex 27/07/2026) : la zone questions+cards reste nettement plus CLAIRE que le footer (#0B0419), qui redevient ainsi une 3e partie sombre bien distincte — au lieu de se fondre dans le noir comme avant. Halos violets animes pour l'ambiance. */ background: /* halos violets DISCRETS (assombris - demande alex 27/07/2026 : trop violet). Alpha reduits pour une ambiance sombre, tout en gardant un fond DISTINCT du footer noir. */ radial-gradient(64% 50% at 22% 8%, rgba(140,95,225,.16), transparent 66%), radial-gradient(70% 55% at 62% 88%, rgba(110,75,195,.16), transparent 72%), /* base : violet TRES sombre (2e assombrissement - alex 27/07/2026), juste assez au-dessus du footer #0B0419 pour rester distinct. */ linear-gradient(180deg, #1a1330 0%, #171029 50%, #140d24 100%); background-size: 170% 170%, 160% 160%, 100% 100%; background-position: 12% 18%, 88% 66%, 0 0; animation: pole-outro-drift 22s ease-in-out infinite; } @keyframes pole-outro-drift { 0%, 100% { background-position: 12% 18%, 88% 66%, 0 0; } 50% { background-position: 38% 42%, 58% 40%, 0 0; } } @media (prefers-reduced-motion: reduce) { .pole-outro { animation: none; } } /* le titre "Continuez le voyage" garde sa marge, la FAQ/projets remplissent la largeur re-centrée */ .pole-outro .svc-detail-faq { margin-top: 0; } /* SUPPRIME LA BANDE BLEUE sous les cards (alex 24/07/2026) : le footer avait 88px de padding-haut vide (#0B0419) -> on le reduit sur les pages pole (ce fichier n'est charge que la), les cards collent au footer. */ footer { padding-top: 28px !important; } /* ===== CORRECTIFS MOBILE POLE (audit 27/07/2026) — desktop non touche ===== */ @media (max-width: 768px){ /* coverflow : plus de 3D, carrousel plat en swipe (Draggable garde le geste) */ .pole-slider-vp{ perspective: none !important; } .pole-grid.is-slider .pole-sub{ height: auto !important; aspect-ratio: 3 / 4 !important; } /* switcher : evite la collision avec le bouton Menu sur libelles longs */ .pole-switch-btn{ font-size: 14px !important; padding: 8px 14px !important; max-width: 46vw; } .pole-switch-btn > span:first-child{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* cibles tactiles >= 44px dans le menu pole */ .pole-switch-item{ padding: 14px 16px !important; } /* scroll vertical garanti pendant le swipe + filet anti-debordement latent */ .pole-grid.is-slider{ touch-action: pan-y; } html, body{ overflow-x: clip; } } /* ===== CARDS PLUS PETITES SUR TABLETTE (alex 21/09/2026 : « trop grosses sur iPad, plus de marge ») Tablettes seulement : ecran TACTILE (pointer: coarse) entre 721 et 1366 px de large. Desktop (souris) et mobile (<= 720) ne sont pas touches. Environ -35 % par rapport a avant (2e reduction demandee le 21/09). Specificite renforcee + !important : les pages pole surchargent la taille des cards dans leur propre