/* ===================================================================== rencontre-transgenre.be — habillage unique (gabarit annoncesastro-v2, skin-5 / compo-1 / fiche-1). Belgique francophone, ton féminin. REGISTRE : « LILAS & ARDOISE, CARTOUCHES » Le gabarit skin-5 pose des PILULES (999 px) partout : sur mobile un titre de section long devient une grosse bulle de cinq lignes. Ici tout le vocabulaire de forme change : des CARTOUCHES — plaques gravées à deux coins coupés (haut-gauche / bas-droite) — pour les bandeaux, les vignettes, les boutons, la pagination et les blocs. Rien de rond. PALETTE (accent du favicon #6d4aa0) lilas #6d4aa0 accent, liens, titres d'annonce, boutons lilas clr #9b7ac8 voiles, filets, losanges ardoise #2b2735 encre, en-tête, bandeaux, pied lin #f8f2ea neutre CHAUD : surfaces secondaires, cartouches page #ece4e1 lin grisé chaud, voile lilas en haut de page Contrastes : blanc/ardoise 14:1 · blanc/lilas 6,7:1 · lilas/blanc 6,7:1 · lilas/lin 6,0:1 · muet #5f5769 /blanc 6,6:1 · vert #2f6b46 /blanc 6,3:1 · bouton (degrade #7a54ad->#5b3a8c) /blanc 5,6:1 — mesure sur la page servie ===================================================================== */ body.aa { /* teintes du gabarit, redéfinies en littéral (le color-mix de :root ne voit pas la teinte de skin-5, posée sur ) */ --aa-primaire: #6d4aa0; --aa-primaire-fonce: #4b2f77; --aa-primaire-txt: #fff; --aa-teinte: #6d4aa0; --aa-page: #ece4e1; --aa-fond: #fffdfa; --aa-surface: #fffdfa; --aa-surface-2: #f8f2ea; --aa-texte: #241f2c; --aa-muet: #5f5769; --aa-bord: #e2d7cd; --aa-lien: #5b3a8c; --aa-tete: #2b2735; --aa-tete-txt: #fbf7f2; --aa-barre: #3a3348; --aa-bande: #2b2735; --aa-bande-txt: #fbf7f2; --aa-bande-bord: #6d4aa0; --aa-secondaire: #2b2735; --aa-secondaire-txt: #fff; --aa-pied: #2b2735; --aa-pied-txt: #d6cdd8; --aa-ok: #2f6b46; --aa-rayon: 4px; --aa-rayon-s: 3px; --aa-ombre: 0 1px 0 rgba(43, 39, 53, .05), 0 14px 30px -20px rgba(78, 49, 120, .55); --aa-police: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --aa-police-titre: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; /* formes signature */ --be-cart: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px); --be-cart-s: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); --be-lilas-c: #9b7ac8; --be-lin: #f8f2ea; --be-coeur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.2S3.6 16.3 2.2 11.4A5.4 5.4 0 0 1 12 6.6a5.4 5.4 0 0 1 9.8 4.8c-1.4 4.9-9.8 9.8-9.8 9.8z' fill='%236d4aa0' fill-opacity='.09'/%3E%3C/svg%3E"); font-size: 15px; background: #ece4e1; background-image: radial-gradient(1100px 380px at 50% -160px, rgba(109, 74, 160, .16), transparent 70%), linear-gradient(180deg, rgba(155, 122, 200, .07), transparent 340px); background-attachment: fixed, scroll; } @media (min-width: 640px) { body.aa { font-size: 16px; } } /* ---- en-tête : bandeau ardoise, filet lilas, onglet actif en cartouche --- */ body.aa .aa-header { background: linear-gradient(180deg, #332d41, #2b2735 62%); box-shadow: 0 2px 0 #6d4aa0, 0 3px 0 rgba(155, 122, 200, .45); } body.aa .aa-logo__mark { border-radius: 0; clip-path: var(--be-cart-s); background: linear-gradient(140deg, #9b7ac8, #6d4aa0 55%, #4b2f77); box-shadow: none; } body.aa .aa-logo__txt { font-weight: 800; letter-spacing: -.015em; } body.aa .aa-logo__sous { opacity: 1; color: #c9bcd8; letter-spacing: .03em; font-size: .7rem; text-transform: uppercase; } body.aa .aa-nav { background: #3a3348; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); } body.aa .aa-nav a { letter-spacing: .015em; border-bottom: 0; position: relative; } body.aa .aa-nav a::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .35rem; height: 2px; background: var(--be-lilas-c); transform: scaleX(0); transform-origin: left; transition: transform .18s ease; } body.aa .aa-nav a:hover::after { transform: scaleX(1); } body.aa .aa-nav a.is-actif { background: var(--be-lin); color: #2b2735; clip-path: var(--be-cart-s); font-weight: 800; } body.aa .aa-nav a.is-actif::after { display: none; } body.aa .aa-header__cta, body.aa .aa-nav__cta a { background: linear-gradient(140deg, #7a54ad, #6d4aa0); border-color: #4b2f77; clip-path: var(--be-cart-s); border-radius: 0; } /* ---- conteneur : feuille chaude posée sur la page, coin coupé ------------ */ body.aa .aa-main > .aa-wrap { background: var(--aa-fond); border: 1px solid #e6dbd1; border-top: 3px solid #6d4aa0; border-radius: 0; clip-path: var(--be-cart); box-shadow: var(--aa-ombre); } /* ---- CARTOUCHES : bandeaux de section, légendes de dépôt ---------------- */ body.aa .aa-h2, body.aa .aa-bande, body.aa .aa-depot__bloc legend { background: linear-gradient(100deg, #2b2735 0 60%, #3a3348); color: var(--aa-bande-txt); border-left: 0; border-radius: 0; clip-path: var(--be-cart-s); padding: .55rem .95rem .55rem 1.05rem; letter-spacing: .09em; font-size: .82rem; font-weight: 700; box-shadow: inset 4px 0 0 #6d4aa0, inset 0 -2px 0 rgba(155, 122, 200, .5); text-wrap: balance; } body.aa .aa-h2 .aa-ico, body.aa .aa-bande .aa-ico, body.aa .aa-side__h .aa-ico { opacity: 1; color: var(--be-lilas-c); } body.aa .aa-bande__droite { opacity: 1; color: #cfc3dd; letter-spacing: .02em; } /* le titre de bloc ne se fait plus écraser par le lien « voir la liste » */ body.aa .aa-bloc__tete { align-items: stretch; gap: .6rem 1rem; } body.aa .aa-bloc__tete .aa-lien { color: #5b3a8c; align-self: center; white-space: nowrap; } @media (max-width: 680px) { body.aa .aa-bloc__tete { flex-wrap: wrap; } body.aa .aa-bloc__tete .aa-h2 { flex: 1 1 100%; } body.aa .aa-bloc__tete .aa-lien { margin-left: auto; } } /* ---- accueil : cartouche d'ouverture, voile lilas ----------------------- */ body.aa .aa-hero { position: relative; background: var(--be-coeur) no-repeat right -18px top -22px / 168px 168px, radial-gradient(420px 230px at 88% 0%, rgba(155, 122, 200, .20), transparent 72%), linear-gradient(135deg, #f6eee1, #fffdfa 68%); border: 1px solid #e6dbd1; border-left: 0; border-radius: 0; clip-path: var(--be-cart); box-shadow: inset 5px 0 0 #6d4aa0; padding: 1.3rem 1.3rem 1.2rem 1.5rem; } body.aa .aa-hero .aa-h1 { letter-spacing: -.02em; text-wrap: balance; } body.aa .aa-hero__chiffres span { background: #fffdfa; border: 1px solid #ddd0e6; border-radius: 0; clip-path: var(--be-cart-s); color: #4b2f77; padding: .3rem .85rem; box-shadow: inset 3px 0 0 #9b7ac8; } body.aa .aa-hero__chiffres span::before { border-radius: 1px; transform: rotate(45deg); width: 6px; height: 6px; } /* ---- lignes d'annonce : vignette en cartouche, étiquette gravée --------- */ body.aa .aa-liste { border-top: 2px solid #2b2735; } body.aa .aa-ligne { border-bottom: 1px solid #ece2d8; } body.aa .aa-ligne:nth-child(even) { background: linear-gradient(90deg, #fbf6ee, rgba(251, 246, 238, 0) 72%); } body.aa .aa-ligne:hover { background: linear-gradient(90deg, rgba(109, 74, 160, .07), rgba(109, 74, 160, 0) 60%); } body.aa .aa-ligne__img { border: 0; border-radius: 0; clip-path: var(--be-cart-s); padding: 3px; background: linear-gradient(140deg, #9b7ac8, #e2d7cd 55%, #6d4aa0); } body.aa .aa-ligne__img img { border-radius: 0; clip-path: var(--be-cart-s); } body.aa .aa-ligne__nb { border-radius: 0; background: rgba(43, 39, 53, .82); } body.aa .aa-ligne__cat { background: var(--be-lin); color: #4b2f77; border-radius: 0; clip-path: var(--be-cart-s); padding: .16rem .5rem .16rem .55rem; letter-spacing: .07em; font-size: .68rem; box-shadow: inset 3px 0 0 #9b7ac8; } body.aa .aa-ligne__new { background: #2f6b46; border-radius: 0; clip-path: var(--be-cart-s); letter-spacing: .07em; padding: .16rem .5rem; } body.aa .aa-ligne__titre a { color: #4b2f77; letter-spacing: -.01em; } body.aa .aa-ligne:hover .aa-ligne__titre a { color: #6d4aa0; } body.aa .aa-ligne__meta { color: #5f5769; } body.aa .aa-ligne__extrait { opacity: 1; color: #4a4356; } body.aa .aa-ligne__lire { border-radius: 0; clip-path: var(--be-cart-s); background: #fffdfa; color: #4b2f77; border: 2px solid #6d4aa0; } body.aa .aa-ligne__lire:hover { background: #6d4aa0; color: #fff; } /* ---- colonne latérale : bloc en cartouche, losanges lilas --------------- */ body.aa .aa-side { background: linear-gradient(180deg, #fffdfa, #f8f2ea 120px); border: 1px solid #e6dbd1; border-radius: 0; clip-path: var(--be-cart); box-shadow: 0 10px 24px -22px rgba(78, 49, 120, .7); } body.aa .aa-side__h { background: linear-gradient(100deg, #2b2735 0 62%, #3a3348); color: #fbf7f2; border-radius: 0; clip-path: none; border-left: 0; border-bottom: 2px solid #6d4aa0; letter-spacing: .08em; padding: .55rem .9rem; box-shadow: none; } body.aa .aa-side--deposer { background: none; border: 0; clip-path: none; box-shadow: none; } body.aa .aa-side__liste li::before { border-radius: 1px; width: 7px; height: 7px; transform: rotate(45deg); background: #9b7ac8; top: .72em; } body.aa .aa-side__liste li.is-actif::before { background: #6d4aa0; } body.aa .aa-side__liste li a { color: #353041; } body.aa .aa-side__liste li a:hover, body.aa .aa-side__liste li.is-actif a { color: #5b3a8c; } body.aa .aa-side__nb { border-radius: 0; clip-path: var(--be-cart-s); background: var(--be-lin); border: 1px solid #e6dbd1; color: #5f5769; } body.aa .aa-side__liste--inline li { border-radius: 0; clip-path: var(--be-cart-s); border: 1px solid #e6dbd1; background: #fffdfa; } body.aa .aa-side__liste--inline li::before { transform: rotate(45deg) translateY(-1px); } /* ---- « Rejoins-nous » : la carte chaude au cœur discret ----------------- */ body.aa .aa-side:first-of-type .aa-side__p { color: #4a4356; } /* ---- moteur, formulaires, cases ---------------------------------------- */ body.aa .aa-filtres { background: var(--be-lin); border: 1px solid #e6dbd1; border-radius: 0; clip-path: var(--be-cart); box-shadow: inset 0 3px 0 rgba(109, 74, 160, .18); } body.aa .aa-filtres__champ { color: #4b2f77; letter-spacing: .06em; } /* dans la colonne latérale le moteur reste nu (le gabarit le veut sans cadre) */ body.aa .aa-side .aa-filtres { background: none; border: 0; clip-path: none; box-shadow: none; padding: 0; } body.aa select, body.aa input[type="text"], body.aa input[type="email"], body.aa input[type="tel"], body.aa input[type="number"], body.aa textarea { border-radius: 0; clip-path: var(--be-cart-s); border: 1px solid #ddd0c4; background-color: #fffdfa; } body.aa .aa-chips li, body.aa .aa-chip { border-radius: 0; clip-path: var(--be-cart-s); border: 1px solid #e0d5cb; background: #fffdfa; } body.aa .aa-chips--lecture li { background: var(--be-lin); color: #3b3547; } body.aa .aa-chip:has(input:checked) { background: #efe7f6; border-color: #6d4aa0; color: #4b2f77; } /* ---- boutons : plaques gravées ----------------------------------------- */ body.aa .aa-btn { border-radius: 0; clip-path: var(--be-cart-s); letter-spacing: .01em; } body.aa .aa-btn--primaire { background: linear-gradient(140deg, #7a54ad, #6d4aa0 60%, #5b3a8c); border-color: #4b2f77; box-shadow: inset 0 -3px 0 rgba(43, 39, 53, .28); } body.aa .aa-btn--primaire:hover { box-shadow: inset 0 -3px 0 rgba(43, 39, 53, .28), 0 8px 18px -10px rgba(78, 49, 120, .8); } body.aa .aa-btn--secondaire { background: #fffdfa; color: #2b2735; border-color: #2b2735; } body.aa .aa-btn--secondaire:hover { background: var(--be-lin); } /* ---- pagination en cartouches ------------------------------------------ */ body.aa .aa-pagination a, body.aa .aa-pagination span { border-radius: 0; clip-path: var(--be-cart-s); background: var(--be-lin); border-color: #e0d5cb; color: #353041; } body.aa .aa-pagination .is-actif { background: #6d4aa0; color: #fff; border-color: #4b2f77; } body.aa .aa-pagination a:hover { background: #fffdfa; border-color: #6d4aa0; color: #5b3a8c; } body.aa .aa-pagination__mot { letter-spacing: .08em; } /* ---- fiche d'annonce ---------------------------------------------------- */ body.aa .aa-crumbs a:hover { color: #5b3a8c; } body.aa .aa-fiche__titre { border-bottom: 0; box-shadow: 0 3px 0 #6d4aa0, 0 5px 0 rgba(155, 122, 200, .45); letter-spacing: -.015em; } body.aa .aa-fiche__cat a { color: #5b3a8c; } body.aa .aa-fiche__new { background: #2f6b46; border-radius: 0; clip-path: var(--be-cart-s); } body.aa .aa-fiche__photo { border: 0; border-radius: 0; clip-path: var(--be-cart); padding: 4px; background: linear-gradient(140deg, #9b7ac8, #f8f2ea 50%, #6d4aa0); } body.aa .aa-fiche__miniatures img { border-radius: 0; clip-path: var(--be-cart-s); border-color: #e0d5cb; } body.aa .aa-fiche__miniatures img:hover { border-color: #6d4aa0; } body.aa .aa-fiche__infos { border: 1px solid #e6dbd1; border-radius: 0; clip-path: var(--be-cart-s); } body.aa .aa-fiche__infos > div:nth-child(odd) { background: var(--be-lin); } body.aa .aa-fiche__infos > div + div { border-top: 1px solid #ece2d8; } body.aa .aa-fiche__infos dt { color: #4b2f77; } body.aa .aa-fiche__infos dd { border-left: 1px solid #ece2d8; } /* les deux appels : carte centrée, de l'air, cœur en filigrane — jamais déplacés */ body.aa .aa-fiche__cta--haut { background: var(--be-coeur) no-repeat right -10px bottom -14px / 104px 104px, linear-gradient(135deg, #f5ecdf, #fffdfa 72%); border: 1px solid #e6dbd1; border-radius: 0; clip-path: var(--be-cart); padding: 1.05rem 1rem; gap: .6rem; box-shadow: inset 0 3px 0 #6d4aa0; } body.aa .aa-fiche__cta--bas { background: var(--be-coeur) no-repeat left -16px top -18px / 124px 124px, linear-gradient(135deg, #fffdfa, #f5ecdf 78%); border: 1px solid #e6dbd1; border-style: solid; border-radius: 0; clip-path: var(--be-cart); padding: 1.3rem 1.2rem; max-width: 620px; margin-inline: auto; box-shadow: inset 0 3px 0 #6d4aa0; } body.aa .aa-fiche__cta-sous { color: #5f5769; } body.aa .aa-fiche__plage { background: var(--be-lin); border-radius: 0; clip-path: var(--be-cart-s); color: #4b2f77; box-shadow: inset 3px 0 0 #9b7ac8; padding: .45rem .9rem; } body.aa .aa-fiche__phy { background: var(--be-lin); border: 1px solid #e6dbd1; border-radius: 0; clip-path: var(--be-cart-s); box-shadow: inset 0 -2px 0 rgba(155, 122, 200, .45); } body.aa .aa-fiche__physique dt { color: #4b2f77; letter-spacing: .05em; } body.aa .aa-fiche__physique dd { color: #241f2c; } body.aa .aa-repondre { background: linear-gradient(180deg, #fffdfa, #f8f2ea); border: 1px solid #e6dbd1; border-radius: 0; clip-path: var(--be-cart); } body.aa .aa-repondre__intro { color: #4a4356; } /* ---- accueil : étapes, atouts, listes, appel au dépôt -------------------- */ body.aa .aa-etapes li { background: var(--be-lin); border: 1px solid #e6dbd1; border-radius: 0; clip-path: var(--be-cart-s); box-shadow: inset 0 -2px 0 rgba(155, 122, 200, .45); } body.aa .aa-etapes li::before { border-radius: 0; clip-path: var(--be-cart-s); background: #6d4aa0; } body.aa .aa-etapes p { color: #4a4356; } body.aa .aa-atouts li { border: 1px solid #e6dbd1; border-left: 0; border-radius: 0; clip-path: var(--be-cart-s); box-shadow: inset 4px 0 0 #6d4aa0; background: #fffdfa; } body.aa .aa-atouts .aa-atouts__ico { border-radius: 0; clip-path: var(--be-cart-s); background: #efe7f6; color: #5b3a8c; } body.aa .aa-liens li { background: var(--be-lin); border: 1px solid #e6dbd1; border-radius: 0; clip-path: var(--be-cart-s); padding-left: 1rem; } body.aa .aa-liens li::before { background: linear-gradient(180deg, #9b7ac8, #6d4aa0); border-radius: 0; width: 4px; } body.aa .aa-liens li a { color: #353041; } body.aa .aa-liens li a:hover { color: #5b3a8c; } body.aa .aa-deposer-cta { background: var(--be-coeur) no-repeat right -12px center / 108px 108px, linear-gradient(135deg, #f5ecdf, #fffdfa 72%); border: 1px solid #e6dbd1; border-style: solid; border-radius: 0; clip-path: var(--be-cart); box-shadow: inset 0 3px 0 #6d4aa0; padding: 1.1rem; } body.aa .aa-deposer-cta__h { color: #2b2735; } body.aa .aa-deposer-cta__txt { color: #4a4356; } body.aa .aa-vide { background: var(--be-lin); border-radius: 0; clip-path: var(--be-cart-s); border-style: solid; border-color: #e0d5cb; } /* ---- dépôt : sections numérotées --------------------------------------- */ body.aa .aa-depot__bloc { background: #fffdfa; border: 1px solid #e6dbd1; border-radius: 0; clip-path: var(--be-cart); box-shadow: 0 10px 22px -22px rgba(78, 49, 120, .7); } body.aa .aa-depot__bloc legend::before { border-radius: 0; clip-path: var(--be-cart-s); background: #fbf7f2; color: #2b2735; font-weight: 800; } body.aa .aa-regles { color: #4a4356; } body.aa .aa-form__compteur { border-radius: 0; clip-path: var(--be-cart-s); background: var(--be-lin); border-color: #e0d5cb; } body.aa .aa-form__lbl { color: #353041; } /* ---- pied : plaque ardoise, en-têtes gravés ----------------------------- */ body.aa .aa-footer { background: linear-gradient(180deg, #332d41, #2b2735 55%); border-top: 4px solid #6d4aa0; box-shadow: inset 0 -1px 0 rgba(155, 122, 200, .3); color: #d6cdd8; } body.aa .aa-footer__h { color: #fbf7f2; letter-spacing: .1em; border-bottom: 0; box-shadow: 0 1px 0 rgba(155, 122, 200, .45); padding-bottom: .4rem; } body.aa .aa-footer__fictif { opacity: 1; color: #b3a8bd; } body.aa .aa-footer a:hover { color: #d9c7f0; } body.aa .aa-footer__bas { background: rgba(0, 0, 0, .28); } body.aa .aa-footer__bas-in { opacity: 1; color: #bdb2c6; } /* ---- barres basses mobiles : styles seulement, jamais déplacées --------- */ body.aa .aa-mobar, body.aa .aa-fiche__barre { background: rgba(255, 253, 250, .96); border-top: 2px solid #6d4aa0; box-shadow: 0 -8px 22px -14px rgba(43, 39, 53, .55); } /* à 390 px « Lui parler maintenant » tenait en « Lui parler mainte… » */ body.aa .aa-mobar .aa-btn, body.aa .aa-fiche__barre .aa-btn { font-size: .8rem; padding-inline: .35em; letter-spacing: -.005em; } /* ---- porte d'âge & pop-up : plaques, pas de bulles ---------------------- */ body.aa .aa-gate__box, body.aa .aa-popup__box { border-radius: 0; clip-path: var(--be-cart); border-top: 5px solid #6d4aa0; background: #fffdfa; } body.aa .aa-gate__mark { border-radius: 0; clip-path: var(--be-cart-s); background: linear-gradient(140deg, #7a54ad, #6d4aa0 60%, #4b2f77); } body.aa .aa-popup__ico { border-radius: 0; clip-path: var(--be-cart-s); background: #efe7f6; color: #5b3a8c; } body.aa .aa-popup__fermer { color: #5f5769; } body.aa .aa-popup__texte { color: #4a4356; } /* ---- divers ------------------------------------------------------------- */ body.aa .aa-intro, body.aa .aa-compte, body.aa .aa-side__aide, body.aa .aa-form__aide { color: #4a4356; } body.aa :focus-visible { outline: 3px solid #4b2f77; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { body.aa .aa-nav a::after { transition: none; } body.aa .aa-hero { animation: none; } }