/* ========================================================================= BOLAMA — Moteur d'effets (intensité sobre) Trois couches activables via (classes fx-chore / fx-carnet / fx-lama posées par js/effets.js). Tout est neutralisé si prefers-reduced-motion: reduce. ========================================================================= */ @media (prefers-reduced-motion: reduce) { .sera-revele { opacity: 1 !important; transform: none !important; } } /* ========================================================================= COUCHE B — CHORÉGRAPHIE DE SCROLL (fx-chore) ========================================================================= */ /* États initiaux (posés par JS uniquement : sans JS, rien n'est caché) */ .fx-chore .sera-revele { opacity: 0; transform: translateY(18px); transition: opacity 420ms cubic-bezier(.22, .9, .3, 1), transform 420ms cubic-bezier(.22, .9, .3, 1); transition-delay: var(--retard, 0ms); } .fx-chore .sera-revele.revele { opacity: 1; transform: none; } /* Les cartes se distribuent avec une micro-rotation qui se redresse */ .fx-chore .carte.sera-revele { transform: translateY(22px) rotate(-1.2deg); } .fx-chore .carte.sera-revele.revele { transform: none; } /* Les prix se tamponnent une fois la carte révélée */ .fx-chore .sera-revele .prix { opacity: 0; transform: scale(1.25) rotate(-4deg); } .fx-chore .sera-revele.revele .prix { opacity: 1; transform: none; transition: opacity 300ms ease-out, transform 340ms cubic-bezier(.2, 1.4, .4, 1); transition-delay: calc(var(--retard, 0ms) + 220ms); } /* Les pointillés de l'afterwork se tracent de gauche à droite */ .fx-chore .item-ligne.sera-revele .points { transform: scaleX(0); transform-origin: left center; } .fx-chore .item-ligne.sera-revele.revele .points { transform: scaleX(1); transition: transform 520ms ease-out; transition-delay: calc(var(--retard, 0ms) + 180ms); } /* Hovers tactiles */ .fx-chore .carte { transition: transform 220ms ease, box-shadow 220ms ease; } .fx-chore .carte:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(11, 61, 39, 0.10); } .fx-chore .membre .plaque-photo { transition: transform 240ms ease; } .fx-chore .membre:hover .plaque-photo { transform: translateY(-3px) rotate(-0.6deg); } /* Balayage de scène au changement de moment */ .balayage { position: fixed; inset: 0; z-index: 4; /* sous le sélecteur (5) et le header (50) */ pointer-events: none; transform: translateX(-102%); background: linear-gradient(100deg, transparent 0%, var(--couleur-balayage, rgba(246, 146, 29, 0.16)) 35%, var(--couleur-balayage, rgba(246, 146, 29, 0.16)) 65%, transparent 100%); } .balayage.passe { transition: transform 520ms cubic-bezier(.6, .1, .3, .9); transform: translateX(102%); } /* Entrée du sélecteur persistant : petit glissement en plus du fondu */ .fx-chore .selecteur-sticky-wrap { transition: opacity 220ms ease, margin-top 220ms ease; } /* ========================================================================= COUCHE GRILLE — le quadrillage se dessine au scroll (fx-grille) La grille d'origine (background de la section) n'est pas touchée. Un voile couleur papier (::after, sous le contenu grâce au contexte d'empilement z-index:0 de la section) la recouvre sous le front --stylo. Dégradation sûre : sans JS ou sans support, la grille est visible. ========================================================================= */ .fx-grille .grille-claire, .fx-grille .grille-foncee { position: relative; z-index: 0; /* contexte d'empilement : le voile passe au-dessus du fond, sous le contenu */ } .fx-grille .grille-claire::after, .fx-grille .grille-foncee::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(253, 253, 251, 0) calc(var(--stylo, 99999) * 1px), var(--papier) calc(var(--stylo, 99999) * 1px + 260px)); } .fx-grille .grille-claire { --papier: #FDFDFB; } .fx-grille .grille-foncee { --papier: var(--vert); } /* ========================================================================= COUCHE A — LE CARNET VIVANT (fx-carnet) ========================================================================= */ /* Parallaxe du quadrillage : le motif passe sur un ::before déplacé légèrement moins vite que le contenu (période 100 px → modulo en JS). */ .fx-carnet .grille-claire, .fx-carnet .grille-foncee { position: relative; background-image: none; } .fx-carnet .grille-claire::before, .fx-carnet .grille-foncee::before { content: ''; position: absolute; left: 0; right: 0; top: -120px; bottom: -120px; z-index: -1; transform: translate3d(0, var(--defil-grille, 0px), 0); will-change: transform; background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; } .fx-carnet .grille-claire::before { background-image: linear-gradient(rgba(11, 61, 39, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 61, 39, 0.07) 1px, transparent 1px), linear-gradient(rgba(11, 61, 39, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 61, 39, 0.035) 1px, transparent 1px); } .fx-carnet .grille-foncee::before { background-image: linear-gradient(rgba(244, 245, 240, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 245, 240, 0.07) 1px, transparent 1px), linear-gradient(rgba(244, 245, 240, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 245, 240, 0.035) 1px, transparent 1px); } /* Griffonnages auto-dessinés */ .doodle { display: block; overflow: visible; pointer-events: none; } .doodle path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--longueur, 400); stroke-dashoffset: var(--longueur, 400); } .doodle.dessine path { animation: doodle-dessiner 750ms ease-out forwards; animation-delay: var(--retard-doodle, 150ms); } @keyframes doodle-dessiner { to { stroke-dashoffset: 0; } } /* Soulignage sous les titres de section */ .doodle-souligne { width: 150px; height: 12px; margin: 8px auto 0; color: var(--orange-fonce); } .sur-fonce .doodle-souligne, .grille-foncee .doodle-souligne, .contact .doodle-souligne { color: var(--orange); } /* Cercle griffonné autour d'une accroche */ .doodle-cercle-wrap { position: relative; display: inline-block; } .doodle-cercle { position: absolute; inset: -12px -22px; width: calc(100% + 44px); height: calc(100% + 24px); color: var(--orange-fonce); } /* Flèche griffonnée vers un bouton */ .doodle-fleche { width: 54px; height: 44px; color: var(--orange-fonce); margin: 0 0 -6px 8px; } .grille-foncee .doodle-fleche { color: var(--orange); } /* Canvas d'ambiance dans le hero (vapeur / braises / bulles) */ .ambiance-hero { position: absolute; inset: 0; pointer-events: none; z-index: 0; } /* Les panneaux de texte passent au-dessus du canvas ; le sélecteur, déjà positionné en absolu par styles.css, n'est pas touché. */ .fx-carnet .hero .hero-panneau { position: relative; z-index: 1; } /* ========================================================================= COUCHE C — LE LAMA A DU CARACTÈRE (fx-lama) ========================================================================= */ /* Le logo penche vers le curseur */ .fx-lama .site-header .logo img { transition: transform 260ms ease-out; transform: rotate(var(--inclinaison-lama, 0deg)); } /* Le lama vient jeter un œil dans la section équipe */ .fx-lama .equipe { position: relative; overflow: hidden; } .lama-peek { position: absolute; bottom: 0; right: 4%; width: 120px; opacity: 0.5; transform: translateY(105%) rotate(-8deg); transition: transform 700ms cubic-bezier(.3, 1.2, .4, 1); pointer-events: none; } .lama-peek.visible { transform: translateY(42%) rotate(-8deg); } /* Clin d'œil du formulaire : la confirmation frétille */ .fx-lama .form-confirmation.visible { animation: lama-fretille 600ms ease 200ms; } @keyframes lama-fretille { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } 75% { transform: rotate(-1deg); } } /* Confettis (easter egg logo) */ .confettis-lama { position: fixed; inset: 0; z-index: 99; pointer-events: none; }