/** * Green2web — styles dédiés à la landing « Numérique Responsable » * * Ce fichier ne contient que ce qui n'est pas exprimable en utilitaires Tailwind : * formes découpées, dégradés complexes, états d'accordéon et animations. * Les couleurs et familles de police sont déclarées dans le @theme Tailwind * (assets/css/tailwindcss/input.css) sous le préfixe --color-g2w-* / --font-g2w-*. * * Chargé uniquement sur le template templates/green2web.php (voir inc/green2web.php). * * @package Mak2com */ /* ================================================ 1. Réglages de page ================================================ */ .g2w { /** * Encoche en trapèze (maquette) : plus large à la base, sur la bordure du * bouton, que sur son bout tourné vers l'intérieur. --g2w-notch-w donne la * largeur à la base, --g2w-notch-taper le retrait de chaque côté au bout * (largeur au bout = w − 2 × taper), --g2w-notch-h la profondeur, * --g2w-notch-x la distance depuis le bord. Le tracé est défini une seule * fois ici (deux orientations) puis réutilisé partout via var(). */ --g2w-notch-w: 8px; --g2w-notch-h: 8px; --g2w-notch-taper: 2px; --g2w-notch-x: 22px; /* Encoche sur le bord haut, vers la droite (base sur le bord, bout étroit en bas). */ --g2w-clip-notch-tr: polygon( 0 0, calc(100% - var(--g2w-notch-x) - var(--g2w-notch-w)) 0, calc(100% - var(--g2w-notch-x) - var(--g2w-notch-w) + var(--g2w-notch-taper)) var(--g2w-notch-h), calc(100% - var(--g2w-notch-x) - var(--g2w-notch-taper)) var(--g2w-notch-h), calc(100% - var(--g2w-notch-x)) 0, 100% 0, 100% 100%, 0 100% ); /* Encoche sur le bord bas, vers la gauche (base sur le bord, bout étroit en haut). */ --g2w-clip-notch-bl: polygon( 0 0, 100% 0, 100% 100%, calc(var(--g2w-notch-x) + var(--g2w-notch-w)) 100%, calc(var(--g2w-notch-x) + var(--g2w-notch-w) - var(--g2w-notch-taper)) calc(100% - var(--g2w-notch-h)), calc(var(--g2w-notch-x) + var(--g2w-notch-taper)) calc(100% - var(--g2w-notch-h)), var(--g2w-notch-x) 100%, 0 100% ); /** * Mêmes tracés, encoche repliée (profondeur nulle : les deux points du bout * remontent sur le bord). Même nombre de sommets que les tracés pleins, si * bien que `clip-path` interpole de l'un à l'autre — c'est ce qui anime le * repli au survol des boutons. (On ne peut pas animer --g2w-notch-h ici : * imbriquée dans un autre custom property, elle se résout sur .g2w, pas sur * l'élément survolé.) */ --g2w-clip-notch-tr-flat: polygon( 0 0, calc(100% - var(--g2w-notch-x) - var(--g2w-notch-w)) 0, calc(100% - var(--g2w-notch-x) - var(--g2w-notch-w) + var(--g2w-notch-taper)) 0, calc(100% - var(--g2w-notch-x) - var(--g2w-notch-taper)) 0, calc(100% - var(--g2w-notch-x)) 0, 100% 0, 100% 100%, 0 100% ); --g2w-clip-notch-bl-flat: polygon( 0 0, 100% 0, 100% 100%, calc(var(--g2w-notch-x) + var(--g2w-notch-w)) 100%, calc(var(--g2w-notch-x) + var(--g2w-notch-w) - var(--g2w-notch-taper)) 100%, calc(var(--g2w-notch-x) + var(--g2w-notch-taper)) 100%, var(--g2w-notch-x) 100%, 0 100% ); background-color: #FFFFFF; color: var(--color-g2w-deep); font-family: var(--font-g2w-text); /* Lissage en niveaux de gris, comme le moteur de rendu de Figma : sur macOS le navigateur passe sinon en lissage sous-pixel (LCD), plus gras que la maquette. Sans effet sous Windows (le système impose son propre rendu). */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Confort de lecture : le défilement des ancres est amorti, sauf si l'utilisateur a demandé la réduction des animations. La propriété doit vivre sur : posée sur , elle est ignorée pour le défilement de la page. */ @media (prefers-reduced-motion: no-preference) { html:has(> body.g2w) { scroll-behavior: smooth; } } /* Le titre de section reste dégagé sous l'en-tête après un saut d'ancre. */ .g2w [id] { scroll-margin-top: 2rem; } /* ================================================ 2. Accessibilité — focus et lien d'évitement ================================================ */ /* RGAA 10.7 : la prise de focus reste visible partout, y compris sur les éléments dont la forme est découpée (le contour est porté par l'élément parent, jamais par la couche clippée). */ .g2w :focus-visible { outline: 3px solid var(--color-g2w-green-dark); outline-offset: 3px; border-radius: 2px; } .g2w-dark :focus-visible, .g2w [data-theme="dark"] :focus-visible { outline-color: var(--color-g2w-lime); } /* RGAA 12.7 : lien d'évitement, visible uniquement à la prise de focus. */ .g2w-skip-link { position: absolute; top: 0; left: 50%; z-index: 100; transform: translate(-50%, -150%); padding: 0.75rem 1.5rem; background-color: var(--color-g2w-deep); color: var(--color-g2w-lime); font-family: var(--font-g2w-text); font-size: 0.875rem; text-decoration: underline; transition: transform 0.2s ease; } .g2w-skip-link:focus { transform: translate(-50%, 0); } /* ================================================ 2 bis. Grille décorative de la maquette ================================================ */ /** * Colonnes verticales de 1 px calées sur la trame du webdesign (x 62, 286, * 519, 753, 987 et 1221 dans un cadre de 1272). Posées en arrière-plan d'un * calque de 1272 px : les traits horizontaux, eux, filent d'un bord à l'autre * du viewport et sont posés par des pleine largeur. * * --g2w-grid-line permet d'adapter la teinte au fond (ex. footer sage). */ @media (min-width: 1280px) { .g2w-gridcols { --g2w-grid-stroke: linear-gradient(var(--g2w-grid-line, var(--color-g2w-line)), var(--g2w-grid-line, var(--color-g2w-line))); background-image: var(--g2w-grid-stroke), var(--g2w-grid-stroke), var(--g2w-grid-stroke), var(--g2w-grid-stroke), var(--g2w-grid-stroke), var(--g2w-grid-stroke); background-repeat: no-repeat; background-size: 1px 100%; background-position: 62px 0, 286px 0, 519px 0, 753px 0, 987px 0, 1221px 0; } /* Traits horizontaux au pas de 120 px du hero, répétés sur toute la hauteur : pour les blocs dont la hauteur n'est pas fixe (footer). */ .g2w-gridrows { background-image: linear-gradient(to bottom, transparent 119px, var(--g2w-grid-line, var(--color-g2w-line)) 119px); background-size: 100% 120px; } } /* ================================================ 3. Boutons — rectangle à encoche ================================================ */ /** * La maquette dessine les boutons comme un rectangle entaillé d'une petite * encoche. La forme est portée par une couche décorative en position absolue * plutôt que par le bouton lui-même : le contour de focus reste ainsi entier * et le libellé n'est jamais rogné. */ .g2w-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; padding: 0.5rem 1rem; font-family: var(--font-g2w-display); font-size: 0.725rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease; } .g2w-btn__shape { position: absolute; inset: 0; z-index: -1; transition: background-color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), clip-path 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .g2w-btn__shape::after { transition: background-color 0.25s ease, clip-path 0.3s cubic-bezier(0.22, 1, 0.36, 1); } /* Encoche en haut à droite */ .g2w-btn--notch-tr .g2w-btn__shape { clip-path: var(--g2w-clip-notch-tr); } /* Encoche en bas à gauche */ .g2w-btn--notch-bl .g2w-btn__shape { clip-path: var(--g2w-clip-notch-bl); } /* Micro-interaction : au survol (ou focus clavier), l'encoche se replie vers le bord auquel elle est accrochée — le clip-path passe à sa variante « plate ». La couche interne des boutons contour (::after) suit la même bascule. Décoratif : neutralisé sous prefers-reduced-motion. */ @media (prefers-reduced-motion: no-preference) { .g2w-btn--notch-tr:hover .g2w-btn__shape, .g2w-btn--notch-tr:focus-visible .g2w-btn__shape, .g2w-btn--notch-tr:hover .g2w-btn__shape::after, .g2w-btn--notch-tr:focus-visible .g2w-btn__shape::after { clip-path: var(--g2w-clip-notch-tr-flat); } .g2w-btn--notch-bl:hover .g2w-btn__shape, .g2w-btn--notch-bl:focus-visible .g2w-btn__shape, .g2w-btn--notch-bl:hover .g2w-btn__shape::after, .g2w-btn--notch-bl:focus-visible .g2w-btn__shape::after { clip-path: var(--g2w-clip-notch-bl-flat); } } /* Variante pleine */ .g2w-btn--solid { color: var(--color-g2w-deep); } .g2w-btn--solid .g2w-btn__shape { background-color: var(--color-g2w-lime); } .g2w-btn--solid:hover .g2w-btn__shape { background-color: var(--color-g2w-green); } /* Variante contour : la bordure est simulée par une couche de fond et une couche interne, seule façon de faire suivre le tracé de l'encoche. Maquette : filet vert sur fond blanc (le libellé sombre porte l'affordance, le filet n'est que décoratif). */ .g2w-btn--outline { color: var(--color-g2w-deep); } .g2w-btn--outline .g2w-btn__shape { background-color: var(--color-g2w-green); } .g2w-btn--outline .g2w-btn__shape::after { content: ""; position: absolute; inset: 1px; background-color: var(--g2w-btn-bg, #FFFFFF); clip-path: inherit; /* transition (fond + clip-path) fournie par la règle générale .g2w-btn__shape::after */ } .g2w-btn--outline:hover { color: #FFFFFF; } .g2w-btn--outline:hover .g2w-btn__shape::after { background-color: var(--color-g2w-green-dark); } /* Variante contour sombre (cartes des packs) : filet vert nuit sur blanc. */ .g2w-btn--outline-deep { color: var(--color-g2w-deep); } .g2w-btn--outline-deep .g2w-btn__shape { background-color: var(--color-g2w-deep); } .g2w-btn--outline-deep .g2w-btn__shape::after { content: ""; position: absolute; inset: 1px; background-color: #FFFFFF; clip-path: inherit; /* transition (fond + clip-path) fournie par la règle générale .g2w-btn__shape::after */ } .g2w-btn--outline-deep:hover { color: #FFFFFF; } .g2w-btn--outline-deep:hover .g2w-btn__shape::after { background-color: var(--color-g2w-deep); } /* Variante mise en avant (pack « Essentiel ») : vert nuit, libellé lime. */ .g2w-btn--featured { color: var(--color-g2w-lime); } .g2w-btn--featured .g2w-btn__shape { background-color: var(--color-g2w-deep); } .g2w-btn--featured:hover { color: #FFFFFF; } /* Variante sombre (sections vert nuit) */ .g2w-btn--ghost { color: var(--color-g2w-lime); } .g2w-btn--ghost .g2w-btn__shape { background-color: var(--color-g2w-lime); } .g2w-btn--ghost .g2w-btn__shape::after { content: ""; position: absolute; inset: 1px; background-color: var(--color-g2w-deep); clip-path: inherit; /* transition (fond + clip-path) fournie par la règle générale .g2w-btn__shape::after */ } .g2w-btn--ghost:hover { color: var(--color-g2w-deep); } .g2w-btn--ghost:hover .g2w-btn__shape::after { background-color: var(--color-g2w-lime); } /* Variante verte (formulaire) : le #00A63E de la maquette est assombri au vert AA pour tenir 4,5:1 avec le libellé blanc en corps 10. */ .g2w-btn--green { color: #FFFFFF; } .g2w-btn--green .g2w-btn__shape { background-color: var(--color-g2w-green-dark); } .g2w-btn--green:hover .g2w-btn__shape { background-color: var(--color-g2w-deep); } /* Micro-interaction commune : le bouton se soulève légèrement. */ @media (prefers-reduced-motion: no-preference) { .g2w-btn:hover, .g2w-btn:focus-visible { transform: translateY(-2px); } } /* ================================================ 4. Surlignage typographique ================================================ */ /** * Le graphiste surligne certains segments de titre par un aplat vert pâle. * Le tracé est légèrement plus large que le texte et passe derrière lui. */ .g2w-highlight { position: relative; display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; background-image: linear-gradient(var(--color-g2w-lime), var(--color-g2w-lime)); background-repeat: no-repeat; background-size: 100% 60%; background-position: left 65%; padding: 0 0.15em; margin: 0 -0.15em; } /* Même principe que .g2w-reveal : le tracé n'est rétracté que si le script prend la main, sans quoi le surlignage est simplement là dès le départ. */ @media (prefers-reduced-motion: no-preference) { .g2w-highlight.is-armed { background-size: 0 100%; transition: background-size 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .g2w-highlight.is-armed.is-revealed { background-size: 100% 60%; background-position: left 65%; } } /** * Surlignage des tarifs (packs) : un aplat de 17 px cale sa base sur la moitié * basse du chiffre et déborde de 8 px de part et d'autre, comme dans la * maquette. La teinte varie par carte via --g2w-mark. */ .g2w-price-mark { padding: 0 8px; margin: 0 -8px; background-image: linear-gradient(var(--g2w-mark, var(--color-g2w-lime)), var(--g2w-mark, var(--color-g2w-lime))); background-repeat: no-repeat; background-size: 100% 17px; background-position: 0 68%; } /* ================================================ 5. Fonds et matières ================================================ */ /* Grille technique du panneau de démonstration (maquette : trame claire de 59 px, premier trait vertical à 36 px du bord, premier horizontal à 17 px). */ .g2w-grid-lines { background-image: linear-gradient(to right, #D8DED0 1px, transparent 1px), linear-gradient(to bottom, #D8DED0 1px, transparent 1px); background-size: 59px 59px; background-position: 36px 17px; } /* Dégradé de la section « Les bénéfices » (reproduit le fond exporté par Figma). */ .g2w-gradient-deep { background-color: var(--color-g2w-deep); background-image: radial-gradient(80% 55% at 8% 4%, rgba(158, 232, 112, 0.22) 0%, rgba(158, 232, 112, 0) 60%), radial-gradient(60% 45% at 100% 100%, rgba(0, 166, 62, 0.18) 0%, rgba(0, 166, 62, 0) 70%); } /* Halo vert diffus utilisé derrière plusieurs blocs. */ .g2w-halo::before { content: ""; position: absolute; z-index: 0; width: var(--g2w-halo-size, 460px); height: var(--g2w-halo-size, 460px); border-radius: 9999px; background: radial-gradient(circle, rgba(158, 232, 112, 0.55) 0%, rgba(158, 232, 112, 0) 70%); pointer-events: none; } /* Halos mobiles (suivi de la souris, cf. initHaloZones) : calque GPU dédié. */ .g2w-halo[data-g2w-halo-pull] { will-change: transform; } /* Cartes « bénéfices » : verre dépoli sur fond sombre. */ .g2w-card-glass { background-image: linear-gradient( 151deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.03) 55%, rgba(158, 232, 112, 0.06) 100% ); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.4s ease; } @media (prefers-reduced-motion: no-preference) { .g2w-card-glass:hover, .g2w-card-glass:focus-within { transform: translateY(-6px); border-color: rgba(158, 232, 112, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 40px -24px rgba(0, 0, 0, 0.9); } } /* ================================================ 6. Accordéon « Ce que vous y gagnez » ================================================ */ /** * Séparateurs des piliers : la maquette les fait déborder du cadre à gauche * (de x = −34 à x = 737 dans le repère 1272). À l'écran, le trait part donc * du bord gauche du viewport et dépasse la colonne de 44 px à droite. * En dessous de « lg », un simple border-t (posé par les utilitaires) suffit. */ @media (min-width: 1280px) { .g2w-pillar { position: relative; } .g2w-pillar::before { content: ""; position: absolute; top: 0; left: calc(537px - 50vw); right: -44px; height: 1px; background-color: #99B29D; } .g2w-pillar:first-child::before { display: none; } .g2w-pillars { position: relative; } /* Trait de clôture sous le dernier pilier, même débord. */ .g2w-pillars::after { content: ""; position: absolute; bottom: 0; left: calc(537px - 50vw); right: -44px; height: 1px; background-color: #99B29D; } } .g2w-pillar__panel { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .g2w-pillar__panel > div { min-height: 0; } .g2w-pillar[data-open="true"] .g2w-pillar__panel { grid-template-rows: 1fr; } .g2w-pillar__title { color: var(--color-g2w-moss); opacity: 0.65; transition: color 0.3s ease, opacity 0.3s ease; } .g2w-pillar[data-open="true"] .g2w-pillar__title { color: var(--color-g2w-deep); opacity: 1; } /* Jauge de progression du pilier ouvert */ .g2w-pillar__gauge { position: relative; height: 2px; background-color: rgba(26, 40, 31, 0.18); } .g2w-pillar__gauge span { position: absolute; inset: 0 auto 0 0; width: var(--g2w-gauge, 25%); background-color: var(--color-g2w-green); transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); } /** * Pile de progression (panneau de droite). * * Le contenant est le rendu 3D fourni (pile-verre.webp, verre transparent) posé * au premier plan ; derrière lui, une matière verte lumineuse monte de bas en * haut jusqu'au niveau courant. Le vert est confiné à la silhouette du verre par * un masque (pile-verre-mask.png, généré depuis l'alpha du rendu) : sur fond * clair, rien ne déborde. Niveau piloté par le script via --g2w-fill (0 → 1) ; * les cotes --pile-* sont les fractions du corps mesurées sur l'image. */ .g2w-pile { position: relative; width: 260px; margin: 0 auto; aspect-ratio: 650 / 969; --pile-bottom: 0.8896; /* bas de la pile (fraction depuis le haut) */ --pile-body-top: 0.1734; /* haut du corps, sous la borne */ } /* Halo vert derrière, plus intense à mesure que la pile se remplit. */ .g2w-pile__glow { position: absolute; z-index: 0; inset: 6% 4% 3%; border-radius: 50%; background: radial-gradient(46% 42% at 50% 70%, rgba(53, 208, 122, calc(0.05 + 0.30 * var(--g2w-fill, 0.25))) 0%, rgba(0, 166, 62, 0) 70%); filter: blur(14px); transition: background 0.6s ease; pointer-events: none; } /* Couche de remplissage, masquée à la silhouette du verre. */ .g2w-pile__fill { position: absolute; inset: 0; z-index: 1; pointer-events: none; -webkit-mask: url(../img/green2web/pile-verre-mask.png) center / 100% 100% no-repeat; mask: url(../img/green2web/pile-verre-mask.png) center / 100% 100% no-repeat; } /* La matière verte : ancrée au bas du corps, sa hauteur suit --g2w-fill. */ .g2w-pile__liquid { position: absolute; left: 0; right: 0; bottom: calc((1 - var(--pile-bottom)) * 100%); height: calc(var(--g2w-fill, 0.25) * (var(--pile-bottom) - var(--pile-body-top)) * 100%); background: linear-gradient(180deg, #7bf6a6 0%, #40e589 32%, #17c164 72%, #08a457 100%); box-shadow: 0 0 22px 2px rgba(58, 226, 136, 0.55); transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1); } /* Ligne de crête (surface du liquide), plus claire. */ .g2w-pile__meniscus { position: absolute; left: 0; right: 0; top: -4px; height: 10px; background: linear-gradient(180deg, rgba(214, 255, 224, 0.95) 0%, rgba(126, 244, 168, 0.35) 60%, rgba(126, 244, 168, 0) 100%); } /* Le verre au premier plan : ses arêtes, anneaux et reflets font le réalisme. */ .g2w-pile__glass { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .g2w-pile__liquid, .g2w-pile__glow { transition: none; } } /* ================================================ 7. FAQ ================================================ */ .g2w-faq__panel { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .g2w-faq__panel > div { min-height: 0; } .g2w-faq__item[data-open="true"] .g2w-faq__panel { grid-template-rows: 1fr; } /* L'indicateur +/− : aplat vert à encoche de la maquette, barres blanches (3:1 requis pour un composant non textuel — #FFFFFF sur #00A63E : 3,2:1). */ .g2w-faq__icon { position: relative; flex: none; width: 2.875rem; height: 2rem; background-color: var(--color-g2w-green); clip-path: var(--g2w-clip-notch-tr); transition: background-color 0.3s ease; } .g2w-faq__item:hover .g2w-faq__icon, .g2w-faq__item:focus-within .g2w-faq__icon { background-color: var(--color-g2w-green-dark); } .g2w-faq__icon::before, .g2w-faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0.875rem; height: 2px; background-color: #FFFFFF; transform: translate(-50%, -50%); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .g2w-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); } /* La barre verticale disparaît : le « + » devient « − ». */ .g2w-faq__item[data-open="true"] .g2w-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleX(0); } /* Contenu rédactionnel des réponses de la FAQ */ .g2w-prose p + p, .g2w-prose ul { margin-top: 0.75rem; } .g2w-prose ul { padding-left: 1.25rem; list-style: disc; } .g2w-prose li + li { margin-top: 0.25rem; } .g2w-prose strong { font-weight: 700; } /* ================================================ 8. Formulaire ================================================ */ .g2w-field { width: 100%; padding: 0.375rem 0 0.5rem; border: 0; border-bottom: 1px solid rgba(26, 40, 31, 0.35); border-radius: 0; background-color: transparent; color: var(--color-g2w-deep); font-family: var(--font-g2w-text); font-size: 0.9375rem; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .g2w-field::placeholder { color: rgba(26, 40, 31, 0.45); } .g2w-field:hover { border-color: rgba(26, 40, 31, 0.6); } .g2w-field:focus { border-color: var(--color-g2w-green-dark); box-shadow: 0 1px 0 0 var(--color-g2w-green-dark); outline-offset: 4px; } /* RGAA 8.9 / 11.10 : l'erreur est portée par la couleur ET par un pictogramme et un message texte associés au champ via aria-describedby. */ .g2w-field[aria-invalid="true"] { border-color: #B3261E; box-shadow: 0 1px 0 0 #B3261E; } .g2w-field-error { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.375rem; color: #8C1D18; font-size: 0.8125rem; } .g2w-field-error::before { content: "⚠"; font-size: 0.9375rem; line-height: 1; } select.g2w-field { /* Maquette : boîte bordée, contrairement aux champs soulignés. */ border: 1px solid rgba(26, 40, 31, 0.45); padding: 0.375rem 1.75rem 0.375rem 0.625rem; /* Chevron dessiné en CSS plutôt qu'en image, pour une requête de moins. */ appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-g2w-deep) 50%), linear-gradient(135deg, var(--color-g2w-deep) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } textarea.g2w-field { min-height: 3.5rem; resize: vertical; } /* Puces « Type de projet » : cases à cocher stylées en pastilles. La case native reste dans le flux, masquée visuellement mais focusable. */ .g2w-chip { position: relative; display: inline-flex; } .g2w-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } /* Les pastilles reprennent le rectangle à encoche de la maquette : la bordure est simulée par deux couches clipées, comme pour les boutons. */ .g2w-chip__label { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 0.375rem; min-height: 33px; padding: 0.375rem 0.875rem; color: var(--color-g2w-deep); font-size: 0.8125rem; transition: color 0.2s ease; } .g2w-chip__label::before, .g2w-chip__label::after { content: ""; position: absolute; z-index: -1; clip-path: var(--g2w-clip-notch-tr); transition: background-color 0.2s ease; } .g2w-chip__label::before { inset: 0; background-color: rgba(26, 40, 31, 0.45); } .g2w-chip__label::after { inset: 1px; background-color: #F5F5F5; } .g2w-chip input:hover + .g2w-chip__label::before { background-color: var(--color-g2w-deep); } .g2w-chip input:checked + .g2w-chip__label { color: var(--color-g2w-lime); } .g2w-chip input:checked + .g2w-chip__label::before, .g2w-chip input:checked + .g2w-chip__label::after { background-color: var(--color-g2w-deep); } /* L'état coché est aussi signalé par une coche, pas seulement par la couleur. */ .g2w-chip input:checked + .g2w-chip__label::before { content: "✓"; font-size: 0.75rem; line-height: 1; } .g2w-chip input:focus-visible + .g2w-chip__label { outline: 3px solid var(--color-g2w-green-dark); outline-offset: 3px; } /* ================================================ 9. Comparatif ================================================ */ .g2w-compare { border-collapse: separate; border-spacing: 0; } .g2w-compare th, .g2w-compare td { height: 72px; padding: 0.75rem 1.5rem 0.75rem 1.25rem; text-align: left; vertical-align: middle; } .g2w-compare tbody tr + tr th, .g2w-compare tbody tr + tr td { border-top: 1px solid rgba(26, 40, 31, 0.12); } .g2w-compare .is-green2web { background-color: #DCEDC6; } .g2w-compare thead .is-green2web { background-color: #D3F6B9; border-radius: 10px 10px 0 0; } .g2w-compare .is-legacy { background-color: #F4E2D1; /* Fine coulisse de fond entre les deux colonnes, comme dans la maquette. */ border-left: 8px solid var(--color-g2w-cream); } .g2w-compare thead .is-legacy { background-color: #F1C6BA; border-radius: 10px 10px 0 0; } .g2w-compare tbody tr:last-child .is-green2web, .g2w-compare tbody tr:last-child .is-legacy { border-radius: 0 0 10px 10px; } /* ================================================ 10. Apparition au défilement ================================================ */ /** * Le contenu n'est jamais masqué par défaut : c'est le script qui « arme » * chaque bloc (classe .is-armed) juste avant de l'observer, puis le révèle. * Si le fichier JavaScript ne se charge pas, ou s'il échoue, la page reste * intégralement lisible — ce que l'ordre inverse ne garantirait pas. */ @media (prefers-reduced-motion: no-preference) { .g2w-reveal.is-armed { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--g2w-delay, 0ms); } .g2w-reveal.is-armed.is-inview { opacity: 1; transform: none; } } /** * Éclats de verre 3D : mouvement lent et continu sur eux-mêmes. * * Pas d'aller-retour (qui marque un temps mort à chaque extrémité) : le * flottement décrit une boucle parcourue à vitesse constante (points d'une * ellipse ou d'un huit, interpolés en linéaire), et la bascule suit un * autre rythme, de sorte que les deux ne ralentissent jamais ensemble. * * Anime `translate`, `rotate` et `scale`, propriétés indépendantes de * `transform` : le mouvement se cumule avec l'apparition de .g2w-reveal. * Réglages par éclat : --g2w-float-duration (boucle), --g2w-float-tilt * (bascule ou rotation), --g2w-float-delay (départ, négatif pour désynchroniser). * En pause hors écran (initFloats) : RGESN. */ /* Ellipse de 4 × 9 px, 12 points. */ @keyframes g2w-float-drift { 0%, 100% { translate: 0 -9px; } 8.333% { translate: 2px -7.79px; } 16.667% { translate: 3.46px -4.5px; } 25% { translate: 4px 0; } 33.333% { translate: 3.46px 4.5px; } 41.667% { translate: 2px 7.79px; } 50% { translate: 0 9px; } 58.333% { translate: -2px 7.79px; } 66.667% { translate: -3.46px 4.5px; } 75% { translate: -4px 0; } 83.333% { translate: -3.46px -4.5px; } 91.667% { translate: -2px -7.79px; } } /* Huit couché de 10 × 5 px, 16 points (éclat des packs). */ @keyframes g2w-float-eight { 0%, 50%, 100% { translate: 0 0; } 6.25% { translate: 3.83px 3.54px; } 12.5% { translate: 7.07px 5px; } 18.75% { translate: 9.24px 3.54px; } 25% { translate: 10px 0; } 31.25% { translate: 9.24px -3.54px; } 37.5% { translate: 7.07px -5px; } 43.75% { translate: 3.83px -3.54px; } 56.25% { translate: -3.83px 3.54px; } 62.5% { translate: -7.07px 5px; } 68.75% { translate: -9.24px 3.54px; } 75% { translate: -10px 0; } 81.25% { translate: -9.24px -3.54px; } 87.5% { translate: -7.07px -5px; } 93.75% { translate: -3.83px -3.54px; } } @keyframes g2w-float-tilt { from { rotate: -5deg; } to { rotate: 5deg; } } @keyframes g2w-float-breathe { from { scale: 0.96; } to { scale: 1.05; } } @keyframes g2w-float-spin { to { rotate: 360deg; } } @media (prefers-reduced-motion: no-preference) { .g2w-float { animation: g2w-float-drift var(--g2w-float-duration, 7s) linear var(--g2w-float-delay, 0s) infinite, g2w-float-tilt var(--g2w-float-tilt, 4.6s) cubic-bezier(0.37, 0, 0.63, 1) var(--g2w-float-delay, 0s) infinite alternate; } /* Packs : huit couché + respiration, bascule plus discrète. */ .g2w-float--eight { animation: g2w-float-eight var(--g2w-float-duration, 9s) linear var(--g2w-float-delay, 0s) infinite, g2w-float-breathe var(--g2w-float-tilt, 3.8s) cubic-bezier(0.37, 0, 0.63, 1) var(--g2w-float-delay, 0s) infinite alternate; } /* Équipe : rotation complète et lente sur lui-même, en plus du flottement. */ .g2w-float--spin { animation: g2w-float-drift var(--g2w-float-duration, 7s) linear var(--g2w-float-delay, 0s) infinite, g2w-float-spin var(--g2w-float-tilt, 22s) linear var(--g2w-float-delay, 0s) infinite; } /* Après les variantes : leur raccourci `animation` remettrait la lecture en route. */ .g2w-float:not(.is-floating) { animation-play-state: paused; } } /* ================================================ 11. Carrousel équipe ================================================ */ /** * Badge de qualification (maquette : aplat vert à encoche, libellé blanc). * Le #00A63E du webdesign est ramené au vert AA : corps 11, seuil 4,5:1. */ .g2w-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; background-color: var(--color-g2w-green-dark); color: #FFFFFF; font-family: var(--font-g2w-display); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; clip-path: var(--g2w-clip-notch-bl); } @media (min-width: 1280px) { /* Séparateurs des prénoms : ils filent jusqu'au bord droit du viewport (la maquette les fait sortir du cadre à droite). */ .g2w-member-row::before { content: ""; position: absolute; top: 0; left: 0; right: calc(636px - 50vw); height: 1px; background-color: rgba(26, 40, 31, 0.14); } /* La maquette ne liste que les membres non affichés : la ligne du membre actif est retirée (le JS replace alors le focus sur le panneau). */ .g2w-member-row:has(> [aria-current="true"]) { display: none; } } /** * Jeu de cartes des portraits. * * Chaque membre est une carte : fond dégradé vert nuit avec un halo vert au * centre-bas (la maquette baigne le buste dans cette lueur), sur lequel repose * le buste détouré (WebP à canal alpha). La carte active occupe le devant ; * les autres s'étalent en biais derrière, comme une main de cartes. * * Le classement en éventail est porté par [data-slot] : il fonctionne donc * sans JavaScript (les cartes sont d'emblée étalées, la première au-dessus). * Le script ne fait qu'« armer » l'entrée et faire tourner le paquet. */ .g2w-teamcard { position: absolute; inset: 0; --tc-dim: 0; border-radius: 14px; overflow: hidden; opacity: 1; transform-origin: bottom center; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.85); transition: opacity 0.45s ease; } .g2w-teamcard__bg { position: absolute; inset: 0; background: radial-gradient(115% 82% at 50% 78%, rgba(158, 232, 112, 0.55) 0%, rgba(58, 165, 82, 0.28) 30%, rgba(12, 24, 17, 0) 66%), linear-gradient(180deg, #16261C 0%, #0C1610 60%, #070C09 100%); } .g2w-teamcard > img { position: relative; z-index: 1; } /** * Assombrissement des cartes du fond : un voile en `opacity` plutôt qu'un * `filter: brightness()`. L'opacité est composée sur le GPU, alors qu'un * filtre force un repaint à chaque frame de l'animation — c'est ce qui * rendait les cartes de derrière saccadées pendant qu'elles montaient. */ .g2w-teamcard::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-color: #060B08; opacity: var(--tc-dim, 0); transition: opacity 0.6s ease; } /* Sous « xl », composition simplifiée : seule la carte active est visible, les autres se fondent derrière (fondu enchaîné, aucun débordement mobile). */ .g2w-teamcard[data-slot="0"] { z-index: 40; opacity: 1; } .g2w-teamcard:not([data-slot="0"]) { opacity: 0; pointer-events: none; } @media (min-width: 1280px) { /* Éventail : quatre positions en biais, de l'avant vers l'arrière. Les cartes du fond sont décalées, pivotées et assombries (via --tc-dim). will-change + translateZ promeuvent chaque carte en couche GPU : le mouvement (transform + ombre) est alors composé, sans repaint. */ .g2w-teamcard { --tc-x: 0px; --tc-y: 0px; --tc-rot: 0deg; --tc-scale: 1; opacity: 1; pointer-events: auto; transform: translate3d(var(--tc-x), var(--tc-y), 0) rotate(var(--tc-rot)) scale(var(--tc-scale)); transition: transform 0.66s cubic-bezier(0.34, 1.08, 0.4, 1); will-change: transform; backface-visibility: hidden; } .g2w-teamcard[data-slot="0"] { z-index: 40; --tc-dim: 0; } .g2w-teamcard[data-slot="1"] { z-index: 30; --tc-x: 52px; --tc-y: -16px; --tc-rot: 6deg; --tc-scale: 0.95; --tc-dim: 0.18; } .g2w-teamcard[data-slot="2"] { z-index: 20; --tc-x: 90px; --tc-y: 22px; --tc-rot: -5deg; --tc-scale: 0.90; --tc-dim: 0.34; } .g2w-teamcard[data-slot="3"] { z-index: 10; --tc-x: 34px; --tc-y: 46px; --tc-rot: 4deg; --tc-scale: 0.87; --tc-dim: 0.46; } /* Retard de distribution : le fond est posé en premier, la carte de tête arrive en dernier par-dessus — d'où l'effet de cartes qui se croisent. */ .g2w-teamcard[data-slot="0"] { --tc-deal-delay: 300ms; } .g2w-teamcard[data-slot="1"] { --tc-deal-delay: 190ms; } .g2w-teamcard[data-slot="2"] { --tc-deal-delay: 95ms; } .g2w-teamcard[data-slot="3"] { --tc-deal-delay: 0ms; } } /* Entrée « distribution » : les cartes partent empilées au centre, puis se déploient en éventail en passant les unes devant/derrière les autres. N'est armée que par le script — sans lui, l'éventail est déjà en place. */ @media (min-width: 1280px) and (prefers-reduced-motion: no-preference) { .g2w-portraits.is-armed .g2w-teamcard { opacity: 0; } .g2w-portraits.is-armed.is-inview .g2w-teamcard { opacity: 1; /* Léger rebond : la carte monte, dépasse un peu sa place vers le haut, puis se repose — jamais vers le bas, donc pas de replongée sous le vert. */ animation: g2w-deal 0.9s cubic-bezier(0.34, 1.08, 0.4, 1) backwards; animation-delay: var(--tc-deal-delay, 0ms); } } /** * Chaque carte monte depuis tout en bas : elle démarre 135 % de sa hauteur * plus bas, sous le bord inférieur de la section (coupé par overflow-hidden, * bord qui touche le haut de la section verte suivante), puis glisse jusqu'à * sa place dans l'éventail. Pas de fondu : la carte émerge de sous la section * verte au lieu d'apparaître sur place. */ @keyframes g2w-deal { from { transform: translate3d(0, 135%, 0) rotate(0) scale(0.96); } to { transform: translate3d(var(--tc-x), var(--tc-y), 0) rotate(var(--tc-rot)) scale(var(--tc-scale)); } } @media (prefers-reduced-motion: reduce) { .g2w-teamcard { transition: none; } } .g2w-member[aria-current="true"] { color: var(--color-g2w-deep); } .g2w-member { color: var(--color-g2w-green-dark); transition: color 0.25s ease, transform 0.25s ease; } @media (prefers-reduced-motion: no-preference) { .g2w-member:hover { transform: translateX(4px); } } /* ================================================ 12. Bulle de conversation ================================================ */ .g2w-chat__panel { transform-origin: bottom right; transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.3s; opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.96); } .g2w-chat[data-open="true"] .g2w-chat__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } @media (prefers-reduced-motion: reduce) { .g2w-chat__panel { transition: none; } }