/* ===================================================================== rencontre-echangiste.be — registre « BRIQUE DE LIEGE & LAITON, ARCHES » Gabarit annoncesastro, skin-3 (journal) + aa-compo-2 + aa-fiche-2. Palette (accent = couleur du favicon, posee en inline sur ) : brique #8c2f39 accent, manchette, CTA, filets forts laiton #b9914d ornements - #8a6426 texte (5,2:1 sur ivoire) - #d7b071 sur fond sombre sable #f6ede1 fond de page (neutre chaud) ivoire #fffaf3 surfaces encre #2b1f1d texte (14:1 sur ivoire) - muet #6b5a52 (6,4:1) mur #3a1f22 pied de page en appareil de brique Formes signature : (1) ARCHE — vignettes en dome, portail de l'accueil, carte de CTA, scene photo, pied de page voute ; (2) FILET DOUBLE de laiton sous chaque titre, avec sa clef de voute ; (3) APPAREIL DE BRIQUE (motif SVG en pose croisee) sur la manchette et le pied ; (4) MEDAILLON de laiton (fraicheur, nombre de photos). ===================================================================== */ body.aa.skin-3 { --aa-fond: #f6ede1; --aa-surface: #fffaf3; --aa-texte: #2b1f1d; --aa-muet: #6b5a52; --aa-bord: #e2d2bf; --aa-secondaire: #7a2a33; --aa-secondaire-txt: #fff; --aa-tete: #fffaf3; --aa-tete-txt: #2b1f1d; --aa-pied: #3a1f22; --aa-pied-txt: #f1e3d5; --aa-rayon: 12px; --aa-rayon-s: 7px; --aa-ombre: 0 2px 4px -2px rgba(90, 45, 30, .16), 0 18px 34px -24px rgba(90, 45, 30, .45); --aa-police: "Segoe UI", Corbel, Candara, "Trebuchet MS", sans-serif; --aa-police-titre: Cambria, Constantia, Georgia, "Times New Roman", serif; --rb-laiton: #b9914d; --rb-laiton-txt: #7d5a21; --rb-laiton-clair: #d7b071; --rb-appareil-clair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M0 .5h64M0 16.5h64'/%3E%3Cpath d='M16.5 0v16M48.5 0v16M.5 16v16M32.5 16v16'/%3E%3C/g%3E%3C/svg%3E"); --rb-appareil-fonce: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M0 .5h64M0 16.5h64'/%3E%3Cpath d='M16.5 0v16M48.5 0v16M.5 16v16M32.5 16v16'/%3E%3C/g%3E%3C/svg%3E"); } body.aa.skin-3 { background-color: var(--aa-fond); color: var(--aa-texte); } /* --- 1. MANCHETTE : bandeau de brique appareillee + bandeau de nav creme -- */ body.aa.skin-3 .aa-header { background: var(--rb-appareil-fonce), linear-gradient(176deg, #9a3640, #7d2831) #8c2f39; color: #fff8f2; border-bottom: 3px solid var(--rb-laiton); } body.aa.skin-3 .aa-header__in { position: relative; } body.aa.skin-3 .aa-logo { position: relative; /* la clef de voute s'ancre au titre, pas au bloc d'en-tete */ color: #fff8f2; font-family: var(--aa-police-titre); font-weight: 700; letter-spacing: .12em; padding: 1.15rem 0 1.15rem; max-width: 100%; text-shadow: 0 2px 6px rgba(40, 12, 14, .45); } /* clef de voute de laiton sous le titre de la manchette */ body.aa.skin-3 .aa-logo::after { content: ""; position: absolute; left: 50%; bottom: .3rem; transform: translateX(-50%); width: 78px; height: 8px; background: var(--rb-laiton-clair); border-radius: 39px 39px 2px 2px / 8px 8px 2px 2px; opacity: .92; } body.aa.skin-3 .aa-burger { color: #fff8f2; top: .95rem; } /* la nav : une plaque de laiton encastree dans la brique */ body.aa.skin-3 .aa-nav { background: var(--aa-surface); background-image: var(--rb-appareil-clair); border: 1px solid var(--rb-laiton); border-bottom-width: 1px; border-radius: 14px 14px 0 0; box-shadow: inset 0 3px 0 rgba(185, 145, 77, .28), 0 -6px 16px -10px rgba(40, 12, 14, .7); } body.aa.skin-3 .aa-nav a { color: var(--aa-texte); font-family: var(--aa-police); font-weight: 700; font-size: .78rem; letter-spacing: .11em; padding: .7rem 1.05rem; border-radius: 12px 12px 0 0; } body.aa.skin-3 .aa-nav a:hover, body.aa.skin-3 .aa-nav a.is-actif { background: var(--aa-accent); color: #fff; text-decoration: none; } body.aa.skin-3 .aa-nav__cta a { background: var(--aa-accent); color: #fff !important; border-radius: 14px 14px 4px 4px; box-shadow: inset 0 0 0 1px rgba(255, 244, 228, .38); } body.aa.skin-3 .aa-nav__cta a:hover { background: #7a2a33; } /* --- 2. TITRES : filet double de laiton + clef de voute ------------------ */ body.aa.skin-3 .aa-h1 { font-family: var(--aa-police-titre); font-weight: 700; text-transform: none; letter-spacing: -.005em; color: var(--aa-texte); border-bottom: 3px solid var(--aa-accent); position: relative; padding-bottom: .34em; } body.aa.skin-3 .aa-h1::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--rb-laiton); } body.aa.skin-3 .aa-hero .aa-h1::after { display: none; } body.aa.skin-3 .aa-h2 { font-family: var(--aa-police); font-weight: 800; font-size: .95rem; text-transform: uppercase; letter-spacing: .12em; color: var(--aa-texte); border-bottom: 1px solid var(--rb-laiton); padding-bottom: .42em; } body.aa.skin-3 .aa-h2::before { content: ""; display: inline-block; width: 15px; height: 12px; margin-right: .6rem; vertical-align: -1px; background: var(--rb-laiton); border-radius: 8px 8px 2px 2px; } /* --- 3. PORTAIL DE L'ACCUEIL : arche de brique + carte d'inscription ----- */ body.aa.skin-3 .aa-hero { background: linear-gradient(180deg, #fdf6ec 0%, #f4e8d8 100%) #f9f0e2; border-top: 0; border-bottom: 1px solid var(--aa-bord); position: relative; overflow: hidden; padding-block: 2.2rem 2.4rem; } /* le PORTAIL : une arche de brique qui monte du bas du bandeau, derriere le titre */ body.aa.skin-3 .aa-hero::before { content: ""; position: absolute; bottom: 0; left: max(var(--aa-gout), calc(50% - var(--aa-max) / 2 + var(--aa-gout))); width: min(300px, 58%); height: min(76%, 260px); background: var(--rb-appareil-clair), linear-gradient(180deg, rgba(140, 47, 57, .15), rgba(185, 145, 77, .06)); border: 1px solid rgba(140, 47, 57, .24); border-bottom: 0; border-radius: 150px 150px 0 0 / 122px 122px 0 0; pointer-events: none; } body.aa.skin-3 .aa-hero__in, body.aa.skin-3 .aa-hero .aa-wrap { position: relative; z-index: 1; } body.aa.skin-3 .aa-hero .aa-h1 { border-bottom: 0; font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem); line-height: 1.12; } body.aa.skin-3 .aa-hero__chiffres { color: var(--rb-laiton-txt); font-weight: 700; letter-spacing: .04em; border-top: 1px solid var(--aa-bord); padding-top: .7rem; display: inline-block; } body.aa.skin-3 .aa-hero__form { background: var(--aa-surface); border: 1px solid var(--rb-laiton); border-radius: 26px 26px 12px 12px; padding: 1.5rem 1.35rem 1.35rem; box-shadow: 0 3px 0 rgba(185, 145, 77, .28), 0 26px 42px -28px rgba(90, 40, 30, .55); } body.aa.skin-3 .aa-hero__form-h { font-family: var(--aa-police-titre); font-size: 1.32rem; } /* --- 4. LES ANNONCES : assises de brique a vignette en arche ------------- */ body.aa.skin-3 .aa-liste { border-top: 3px solid var(--aa-accent); border-bottom: 1px solid var(--rb-laiton); box-shadow: 0 1px 0 rgba(185, 145, 77, .45) inset; } body.aa.skin-3 .aa-ligne { background: var(--aa-surface); border-bottom: 1px solid var(--aa-bord); padding: .95rem .8rem; transition: background-color .18s ease, box-shadow .2s ease; } body.aa.skin-3 .aa-ligne:nth-child(even) { background: #fbf3e8; } body.aa.skin-3 .aa-ligne:hover { background: #fdf2e6; box-shadow: inset 4px 0 0 var(--rb-laiton); } body.aa.skin-3 .aa-ligne__img { border-radius: 50% 50% 12% 12% / 44% 44% 8% 8%; border: 1px solid var(--rb-laiton); box-shadow: 0 6px 16px -10px rgba(90, 40, 30, .8); background: #efe1d1; } body.aa.skin-3 .aa-ligne__cat { color: var(--rb-laiton-txt); font-weight: 800; font-size: .7rem; letter-spacing: .13em; font-family: var(--aa-police); } body.aa.skin-3 .aa-ligne__tete, body.aa.skin-3 .aa-ligne__meta { font-family: var(--aa-police); } body.aa.skin-3 .aa-ligne__meta strong { color: var(--aa-texte); } body.aa.skin-3 .aa-ligne__new, body.aa.skin-3 .aa-fiche__new { background: linear-gradient(180deg, #d7b071, #b9914d) #c9a45e; color: #2b1f1d; border-radius: 999px; letter-spacing: .07em; padding: .16rem .6rem; box-shadow: 0 1px 2px rgba(90, 40, 30, .35); } body.aa.skin-3 .aa-ligne__nb { background: rgba(58, 31, 34, .88); border-radius: 999px; box-shadow: 0 0 0 1px var(--rb-laiton-clair); } body.aa.skin-3 .aa-ligne__titre { font-family: var(--aa-police-titre); font-weight: 700; } body.aa.skin-3 .aa-ligne__titre a:hover { color: var(--aa-accent); } body.aa.skin-3 .aa-ligne__lire { border-radius: 13px 13px 4px 4px; border: 1px solid var(--rb-laiton); background: var(--aa-surface); color: var(--aa-secondaire); font-size: .72rem; letter-spacing: .1em; } body.aa.skin-3 .aa-ligne__lire:hover { background: var(--aa-accent); color: #fff; border-color: var(--aa-accent); } @media (min-width: 720px) { /* un seul filet, avant l'action : le texte respire (le gabarit en posait trois) */ body.aa.skin-3 .aa-ligne__corps, body.aa.skin-3 .aa-ligne__extrait { border-left: 0; padding-left: 0; } body.aa.skin-3 .aa-ligne__action { border-left: 1px solid var(--aa-bord); padding-left: 1.2rem; margin-left: 1.2rem; } body.aa.skin-3 .aa-ligne { padding: 1rem .8rem; } } /* --- 5. BOUTONS --------------------------------------------------------- */ body.aa.skin-3 .aa-btn { border-radius: 7px; letter-spacing: .09em; font-weight: 800; } body.aa.skin-3 .aa-btn--primaire { background: linear-gradient(180deg, #98333d, #822b35) #8c2f39; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 238, 214, .32), 0 8px 18px -12px rgba(90, 40, 30, .9); } body.aa.skin-3 .aa-btn--secondaire { background: var(--aa-surface); color: var(--aa-secondaire); border-color: var(--rb-laiton); } body.aa.skin-3 .aa-btn--secondaire:hover { background: #fbf1e3; } /* --- 6. TROUVER, PAGINATION, LISTES DE LIENS ---------------------------- */ body.aa.skin-3 .aa-filtres { background: var(--aa-surface); background-image: var(--rb-appareil-clair); border: 1px solid var(--aa-bord); border-top: 3px solid var(--rb-laiton); border-radius: 14px 14px 8px 8px; padding: 1.1rem; } body.aa.skin-3 .aa-pagination a, body.aa.skin-3 .aa-pagination span { border-color: var(--aa-bord); border-radius: 7px; background: var(--aa-surface); } body.aa.skin-3 .aa-pagination .is-actif { background: var(--aa-accent); border-color: var(--aa-accent); color: #fff; } body.aa.skin-3 .aa-liens li { border-bottom: 1px dotted var(--rb-laiton); } body.aa.skin-3 .aa-liens--cats li { background: var(--aa-surface); border: 1px solid var(--rb-laiton); border-radius: 999px; padding: .38rem .95rem; } body.aa.skin-3 .aa-liens--cats li:hover { background: #fbf1e3; } body.aa.skin-3 .aa-liens__nb, body.aa.skin-3 .aa-side__nb { color: var(--rb-laiton-txt); font-weight: 700; } body.aa.skin-3 .aa-layout__side { border-top: 3px solid var(--aa-accent); box-shadow: 0 1px 0 var(--rb-laiton) inset; padding-top: 1.4rem; } body.aa.skin-3 .aa-side__h { color: var(--aa-texte); border-bottom-color: var(--rb-laiton); } body.aa.skin-3 .aa-side__liste li { border-bottom: 1px dotted var(--aa-bord); } body.aa.skin-3 .aa-crumbs ol { color: var(--aa-muet); } body.aa.skin-3 .aa-lien { color: var(--aa-secondaire); border-bottom: 1px solid var(--rb-laiton); } /* --- 7. FICHE : scene en arche + CTA en carte centree ------------------- */ body.aa.skin-3 .aa-fiche__cat { color: var(--rb-laiton-txt); letter-spacing: .13em; } body.aa.skin-3 .aa-fiche__titre { font-family: var(--aa-police-titre); font-weight: 700; } /* le pool est en 146x146 : la scene reste taillee sur la photo reelle (jamais agrandie), donc PAS d'arche ici — une arche sur un cadre paysage donne un tunnel. Cartouche de laiton. */ body.aa.skin-3 .aa-fiche__photo { border: 3px solid var(--rb-laiton); border-radius: 18px 18px 10px 10px; box-shadow: 0 3px 0 rgba(185, 145, 77, .3), 0 22px 40px -26px rgba(70, 30, 26, .95); background: #efe1d1; } body.aa.skin-3 .aa-fiche__photo .aa-fiche__new { top: auto; right: auto; bottom: .7rem; left: .7rem; } body.aa.skin-3 .aa-fiche__miniatures img { border-radius: 40% 40% 6px 6px / 22% 22% 3% 3%; border-color: var(--aa-bord); } body.aa.skin-3 .aa-fiche__miniatures img:hover { border-color: var(--rb-laiton); } body.aa.skin-3 .aa-fiche__cta--haut { background: linear-gradient(180deg, #fffaf3, #fbf1e3) #fffaf3; border: 1px solid var(--rb-laiton); border-top: 3px solid var(--aa-accent); border-radius: 24px 24px 12px 12px; padding: 1.35rem 1.25rem 1.25rem; box-shadow: 0 3px 0 rgba(185, 145, 77, .25), 0 24px 40px -28px rgba(90, 40, 30, .6); max-width: 560px; margin-inline: auto; gap: .7rem; } body.aa.skin-3 .aa-fiche__cta--haut .aa-btn { min-height: 50px; } body.aa.skin-3 .aa-fiche__infos, body.aa.skin-3 .aa-repondre, body.aa.skin-3 .aa-depot__bloc { background: var(--aa-surface); border: 1px solid var(--aa-bord); border-radius: 14px 14px 10px 10px; border-top: 2px solid var(--rb-laiton); } body.aa.skin-3 .aa-fiche__infos dt { color: var(--rb-laiton-txt); font-weight: 700; } body.aa.skin-3 .aa-fiche__plage { background: linear-gradient(180deg, rgba(215, 176, 113, .30), rgba(185, 145, 77, .16)) #f7e9d3; border: 1px solid var(--rb-laiton); border-radius: 999px; color: var(--aa-texte); padding: .45rem 1rem; } body.aa.skin-3 .aa-fiche__phy { background: var(--aa-surface); border: 1px solid var(--aa-bord); border-top: 2px solid var(--rb-laiton); border-radius: 12px 12px 5px 5px; padding: .55rem .8rem; } body.aa.skin-3 .aa-chips li, body.aa.skin-3 .aa-chip { background: var(--aa-surface); border-color: var(--rb-laiton); border-radius: 999px; } body.aa.skin-3 .aa-chip:has(input:checked) { background: rgba(215, 176, 113, .26); border-color: var(--aa-accent); } body.aa.skin-3 .aa-fiche__barre { background: color-mix(in srgb, var(--aa-surface) 94%, transparent); border-top: 2px solid var(--rb-laiton); box-shadow: 0 -10px 26px -14px rgba(90, 40, 30, .55); } body.aa.skin-3 .aa-depot__bloc legend { font-family: var(--aa-police); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: var(--rb-laiton-txt); background: var(--aa-surface); border: 1px solid var(--rb-laiton); border-radius: 999px; padding: .2rem .8rem; } /* --- 8. PIED DE PAGE : mur de brique voute ------------------------------ */ body.aa.skin-3 .aa-footer { background: var(--rb-appareil-fonce), linear-gradient(180deg, #48272a, #331b1e) #3a1f22; color: var(--aa-pied-txt); border-top: 3px solid var(--rb-laiton); border-radius: 34px 34px 0 0; padding-block: 2.4rem 1.2rem; } body.aa.skin-3 .aa-footer a { color: var(--rb-laiton-clair); } body.aa.skin-3 .aa-footer a:hover { color: #fff3e4; } body.aa.skin-3 .aa-footer__brand { font-family: var(--aa-police-titre); letter-spacing: .1em; color: #fff3e4; } body.aa.skin-3 .aa-footer__h { color: #fff3e4; } body.aa.skin-3 .aa-footer__col:not(:first-child) .aa-footer__h { color: var(--rb-laiton-clair); } body.aa.skin-3 .aa-footer__bas { border-top-color: rgba(215, 176, 113, .30); } /* --- 9. PORTE D'AGE ET POP-UP (position inchangee) ---------------------- */ body.aa.skin-3 .aa-gate__box, body.aa.skin-3 .aa-popup__box { border: 1px solid var(--rb-laiton); border-top: 4px solid var(--aa-accent); border-radius: 26px 26px 14px 14px; background: var(--aa-surface); box-shadow: 0 34px 60px -26px rgba(40, 14, 16, .85); } body.aa.skin-3 .aa-gate__mark { border-radius: 50% 50% 16% 16% / 44% 44% 10% 10%; background: linear-gradient(180deg, #98333d, #7d2831) #8c2f39; color: #fff; box-shadow: 0 0 0 3px rgba(185, 145, 77, .55); } body.aa.skin-3 .aa-popup__pour { color: var(--aa-secondaire); } /* --- 10. MOBILE : la manchette ne deborde plus (425 px -> 390 px) ------- */ @media (max-width: 640px) { body.aa.skin-3 .aa-logo { font-size: 1.2rem; letter-spacing: .09em; max-width: 100%; padding: .85rem 2.9rem .95rem; } body.aa.skin-3 .aa-logo__txt { white-space: normal; max-width: 100%; line-height: 1.16; text-align: center; } body.aa.skin-3 .aa-logo::after { width: 58px; bottom: .35rem; } body.aa.skin-3 .aa-burger { top: .7rem; } body.aa.skin-3 .aa-nav a { font-size: .82rem; border-radius: 8px; } /* la photo cesse de repousser les deux CTA hors de vue */ body.aa.skin-3 .aa-fiche__photo--scene { height: min(var(--aa-ph-h, 600px), 40vh, 330px); } body.aa.skin-3 .aa-fiche__cta--haut { padding: 1.1rem 1rem; border-radius: 20px 20px 10px 10px; } body.aa.skin-3 .aa-ligne { padding: .8rem .65rem; } body.aa.skin-3 .aa-footer { border-radius: 22px 22px 0 0; } } @media (prefers-reduced-motion: reduce) { body.aa.skin-3 .aa-ligne, body.aa.skin-3 .aa-btn { transition: none !important; } }