/* er-sucht-ihn-anzeigen.de — « marine & lin, cartouches » (annoncesastro, skin 4 / compo 1 / fiche 1) Palette (favicon #1a3a6b) : marine #1a3a6b · marine profond #12294d · marine clair #2c5aa0 (5,6:1 sur lin) · lin #efe9dc (fond tissé) · ivoire #fbf8f1 (surfaces) · sable #d8cfbc (filets) · encre #1a2033 (13:1) · encre douce #4f5a76 (5,7:1). Formes signature : CARTOUCHE (rectangle doux à double filet marine : badges, cartes de contact, fieldsets, chips), ARCHE (vignettes et photo de fiche au sommet arrondi), COUTURE (pointillé sous les titres), RUBAN marine en tête. */ /* variables (body.aa bat .skin-4 ; l'accent est inline sur → un seul !important) */ body.aa { --aa-accent: #1a3a6b !important; --m: #1a3a6b; --m-deep: #12294d; --m-light: #2c5aa0; --lin: #efe9dc; --ivoire: #fbf8f1; --sable: #d8cfbc; --encre: #1a2033; --encre-2: #4f5a76; --aa-primaire: var(--m); --aa-primaire-txt: var(--ivoire); --aa-fond: var(--lin); --aa-surface: var(--ivoire); --aa-texte: var(--encre); --aa-muet: var(--encre-2); --aa-bord: var(--sable); --aa-secondaire: var(--m); --aa-secondaire-txt: var(--ivoire); --aa-rayon: 12px; --aa-rayon-s: 8px; --aa-ombre: 0 1px 0 rgba(26, 58, 107, .08), 0 14px 30px -18px rgba(26, 58, 107, .35); --aa-police: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --aa-police-titre: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; --aa-tete: var(--lin); --aa-tete-txt: var(--encre); --aa-pied: var(--m-deep); --aa-pied-txt: #e6e0d2; --cartouche: inset 0 0 0 3px var(--ivoire), inset 0 0 0 4px color-mix(in srgb, var(--m) 45%, var(--ivoire)); font-size: 16px; background-color: var(--lin); background-image: repeating-linear-gradient(0deg, rgba(26, 58, 107, .045) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(26, 58, 107, .035) 0 1px, transparent 1px 4px); } body.aa a { color: var(--m-light); } body.aa .aa-h1, body.aa .aa-h2, body.aa .aa-fiche__titre { font-weight: 700; letter-spacing: -.01em; color: var(--encre); } body.aa .aa-h2 { position: relative; padding-bottom: .45rem; margin-top: 1.6em; } body.aa .aa-h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; border-bottom: 2px dashed color-mix(in srgb, var(--m) 55%, transparent); } body.aa .aa-bloc__tete .aa-h2 { margin-top: 1.6em; } /* boutons : cartouches marine */ body.aa .aa-btn { border-radius: 8px; font-family: var(--aa-police); letter-spacing: .01em; } body.aa .aa-btn--primaire { background: var(--m); color: var(--ivoire); border-color: var(--m); box-shadow: 0 8px 18px -10px rgba(26, 58, 107, .6); } body.aa .aa-btn--primaire:hover { background: var(--m-light); border-color: var(--m-light); filter: none; } body.aa .aa-btn--secondaire { background: var(--ivoire); color: var(--m); border: 1.5px solid var(--m); box-shadow: inset 0 0 0 2px var(--ivoire), inset 0 0 0 3px color-mix(in srgb, var(--m) 30%, var(--ivoire)); } body.aa .aa-btn--secondaire:hover { background: color-mix(in srgb, var(--m) 8%, var(--ivoire)); filter: none; } /* en-tête : ruban marine, logo cartouche, nav en texte souligné */ body.aa .aa-header { background: var(--lin); border-top: 4px solid var(--m); border-bottom: 1px solid var(--sable); box-shadow: 0 1px 0 var(--ivoire) inset, 0 6px 20px -16px rgba(26, 58, 107, .5); } body.aa .aa-header__in { min-height: 66px; } body.aa .aa-logo { font-family: var(--aa-police-titre); font-weight: 700; font-size: clamp(1rem, .6rem + 1.6vw, 1.25rem); letter-spacing: 0; color: var(--m-deep); } body.aa .aa-logo__txt { max-width: calc(100vw - 130px); } body.aa .aa-logo__mark { width: 30px; height: 22px; border-radius: 6px; background: var(--m); box-shadow: inset 0 0 0 2px var(--lin), inset 0 0 0 3px var(--m); } body.aa .aa-nav ul { background: none; box-shadow: none; padding: 0; gap: .15rem; border-radius: 0; } body.aa .aa-nav a { border-radius: 6px; font-weight: 600; font-size: .92rem; color: var(--encre); padding: .5rem .8rem; position: relative; } body.aa .aa-nav a:hover, body.aa .aa-nav a.is-actif { background: none; color: var(--m); } body.aa .aa-nav li:not(.aa-nav__cta) a::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .3rem; height: 2px; background: var(--m); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; } body.aa .aa-nav li:not(.aa-nav__cta) a:hover::after, body.aa .aa-nav li:not(.aa-nav__cta) a.is-actif::after { transform: scaleX(1); } body.aa .aa-nav__cta a { background: var(--m); color: var(--ivoire) !important; border-radius: 8px; padding: .55rem 1.05rem; box-shadow: 0 8px 18px -10px rgba(26, 58, 107, .6); } body.aa .aa-nav__cta a:hover { background: var(--m-light); } @media (max-width: 800px) { body.aa .aa-nav { background: var(--lin); border-bottom: 1px solid var(--sable); border-top: 1px solid var(--sable); box-shadow: 0 20px 30px -20px rgba(18, 41, 77, .5); } body.aa .aa-nav a { border-left: 3px solid transparent; border-radius: 0; padding: .85rem .8rem; } body.aa .aa-nav a:hover, body.aa .aa-nav a.is-actif { border-left-color: var(--m); background: color-mix(in srgb, var(--m) 6%, var(--lin)); } body.aa .aa-nav li:not(.aa-nav__cta) a::after { display: none; } body.aa .aa-nav__cta a { border-left: 0; border-radius: 8px; margin-top: .6rem; } body.aa .aa-burger { color: var(--m); } } /* hero : panneau marine profond, formulaire ivoire en cartouche */ body.aa .aa-hero { background: var(--m-deep); background-image: linear-gradient(160deg, #173563 0%, #12294d 55%, #0e2140 100%), repeating-linear-gradient(135deg, rgba(239, 233, 220, .05) 0 2px, transparent 2px 14px); border-bottom: 4px solid var(--m); margin: -1.2rem 0 1.5rem; padding-block: 2rem 2.4rem; } body.aa .aa-hero__in { background: none; border-radius: 0; padding: 0 var(--aa-gout); --aa-texte: var(--lin); --aa-muet: #c9d3e6; } body.aa .aa-hero__txt .aa-h1 { color: var(--ivoire); font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.7rem); line-height: 1.15; } body.aa .aa-hero__txt .aa-intro { color: #d6dced; font-size: 1.08rem; } body.aa .aa-hero__chiffres { display: inline-block; color: var(--ivoire); font-family: var(--aa-police-titre); font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; padding: .4rem .9rem; border: 1px solid rgba(239, 233, 220, .55); border-radius: 8px; box-shadow: inset 0 0 0 3px var(--m-deep), inset 0 0 0 4px rgba(239, 233, 220, .35); } body.aa .aa-hero__form { --aa-texte: var(--encre); --aa-muet: var(--encre-2); background: var(--ivoire); color: var(--encre); border: 1px solid var(--sable); border-radius: 14px; box-shadow: var(--cartouche), 0 24px 50px -24px rgba(0, 0, 0, .55); padding: 1.5rem 1.4rem; } body.aa .aa-hero__form-h { font-family: var(--aa-police-titre); font-size: 1.35rem; color: var(--m-deep); } @media (min-width: 900px) { body.aa .aa-hero__in { padding: 0 var(--aa-gout); gap: 3.5rem; } } /* champs */ 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 input[type="file"] { border-radius: 8px; border: 1px solid var(--sable); background: #fff; padding-inline: .8rem; } body.aa textarea { border-radius: 10px; border: 1px solid var(--sable); background: #fff; } body.aa .aa-chips li, body.aa .aa-chip { border-radius: 8px; border: 1px solid var(--sable); background: #fff; } body.aa .aa-chip:has(input:checked) { border-color: var(--m); background: color-mix(in srgb, var(--m) 10%, #fff); color: var(--m-deep); box-shadow: inset 0 0 0 1px var(--m); } /* lignes d'annonce : cartouches ivoire, vignette en arche */ body.aa .aa-liste { gap: .75rem; } body.aa .aa-ligne { background: var(--ivoire); border: 1px solid var(--sable); border-radius: 12px; padding: .75rem; box-shadow: var(--aa-ombre); } body.aa .aa-ligne:hover { background: #fff; border-color: var(--m); box-shadow: inset 0 0 0 2px var(--ivoire), inset 0 0 0 3px color-mix(in srgb, var(--m) 35%, var(--ivoire)), 0 18px 34px -20px rgba(26, 58, 107, .5); } body.aa .aa-ligne__img { border-radius: 40px 40px 8px 8px; background: color-mix(in srgb, var(--m) 10%, var(--lin)); box-shadow: 0 0 0 1px var(--sable); } body.aa .aa-ligne__cat { background: none; color: var(--m); border: 1px solid color-mix(in srgb, var(--m) 40%, var(--ivoire)); border-radius: 5px; padding: .15rem .55rem; font-size: .66rem; letter-spacing: .1em; box-shadow: none; font-family: var(--aa-police-titre); } body.aa .aa-ligne__new { background: var(--m); color: var(--ivoire); border-radius: 5px; } body.aa .aa-ligne__titre { font-family: var(--aa-police-titre); font-size: 1.08rem; font-weight: 700; } body.aa .aa-ligne__titre a:hover { color: var(--m-light); } body.aa .aa-ligne__meta { color: var(--encre-2); } body.aa .aa-ligne__meta a { color: var(--m); font-weight: 600; } body.aa .aa-ligne__nb { background: var(--m-deep); color: var(--ivoire); border-radius: 5px; } body.aa .aa-ligne__lire { border-radius: 8px; } @media (min-width: 720px) { body.aa .aa-ligne { padding: .8rem 1rem .8rem .8rem; } body.aa .aa-ligne__titre { font-size: 1.15rem; } } /* colonne latérale, blocs de liens, filtres, pagination */ body.aa .aa-side { background: var(--ivoire); border: 1px solid var(--sable); border-radius: 12px; box-shadow: var(--aa-ombre); padding: 1rem 1.1rem 1.1rem; } body.aa .aa-side__h { font-family: var(--aa-police-titre); color: var(--m-deep); font-size: 1.05rem; letter-spacing: 0; text-transform: none; padding-bottom: .4rem; border-bottom: 2px dashed color-mix(in srgb, var(--m) 40%, transparent); margin-bottom: .75rem; } body.aa .aa-side__liste li { border-radius: 7px; border: 1px solid var(--sable); background: #fff; } body.aa .aa-side__liste li:hover { border-color: var(--m); } body.aa .aa-side__liste li a { color: var(--encre); } body.aa .aa-side__liste li.is-actif { background: var(--m); border-color: var(--m); } body.aa .aa-side__liste li.is-actif a, body.aa .aa-side__liste li.is-actif .aa-side__nb { color: var(--ivoire); } body.aa .aa-liens li { border-radius: 7px; border: 1px solid var(--sable); background: var(--ivoire); box-shadow: none; padding: .45rem .85rem; } body.aa .aa-liens li:hover { border-color: var(--m); background: #fff; } body.aa .aa-liens li a { color: var(--encre); font-weight: 600; } body.aa .aa-liens li a:hover { color: var(--m); } body.aa .aa-filtres { background: var(--ivoire); border: 1px solid var(--sable); border-radius: 12px; box-shadow: var(--cartouche); padding: 1.1rem 1.1rem 1.1rem; } body.aa .aa-filtres__champ { color: var(--m-deep); } body.aa .aa-pagination a, body.aa .aa-pagination span { border-radius: 7px; border: 1px solid var(--sable); background: var(--ivoire); box-shadow: none; } body.aa .aa-pagination a:hover { border-color: var(--m); text-decoration: none; } body.aa .aa-pagination .is-actif { background: var(--m); color: var(--ivoire); border-color: var(--m); } body.aa .aa-crumbs ol { color: var(--encre-2); } body.aa .aa-vide { background: var(--ivoire); border: 1px dashed var(--sable); border-radius: 12px; } body.aa .aa-compo-4 .aa-bloc--deposer .aa-deposer-cta, body.aa.aa-compo-4 .aa-bloc--deposer .aa-deposer-cta { background: var(--ivoire); border: 1px solid var(--sable); border-radius: 12px; box-shadow: var(--cartouche); } /* fiche d'annonce : photo en arche, carte de contact en cartouche */ body.aa .aa-fiche__cat a { display: inline-block; color: var(--m); border: 1px solid color-mix(in srgb, var(--m) 40%, var(--ivoire)); border-radius: 5px; padding: .15rem .6rem; letter-spacing: .1em; font-family: var(--aa-police-titre); } body.aa .aa-fiche__sous { color: var(--encre-2); } body.aa .aa-fiche__sous strong { color: var(--m-deep); } body.aa .aa-fiche__photo { border-radius: 150px 150px 14px 14px; box-shadow: 0 0 0 1px var(--sable), 0 0 0 5px var(--ivoire), 0 0 0 6px color-mix(in srgb, var(--m) 40%, var(--ivoire)), 0 24px 40px -22px rgba(26, 58, 107, .55); background: color-mix(in srgb, var(--m) 12%, var(--lin)); } body.aa .aa-fiche__photo--vide { border-radius: 14px; } body.aa .aa-fiche__new { background: var(--m); color: var(--ivoire); border-radius: 5px; top: auto; bottom: .7rem; right: .7rem; } body.aa .aa-fiche__miniatures { margin-top: .9rem; } body.aa .aa-fiche__miniatures img { border-radius: 24px 24px 6px 6px; border: 2px solid var(--ivoire); box-shadow: 0 0 0 1px var(--sable); } body.aa .aa-fiche__miniatures img:hover { border-color: var(--m); } body.aa .aa-fiche__meta { color: var(--encre-2); } body.aa .aa-fiche__infos { background: var(--ivoire); border: 1px solid var(--sable); border-radius: 12px; box-shadow: var(--cartouche); padding: 1rem 1.1rem; } body.aa .aa-fiche__infos dt { color: var(--encre-2); } body.aa .aa-fiche__cta--haut { background: var(--ivoire); border: 1px solid var(--m); border-radius: 14px; box-shadow: var(--cartouche), 0 18px 36px -22px rgba(26, 58, 107, .55); padding: 1.1rem; } body.aa .aa-fiche__cta--haut .aa-btn { border-radius: 8px; } body.aa .aa-fiche__texte p { color: var(--encre); } body.aa .aa-fiche__plage { background: none; color: var(--m-deep); border: 1px solid color-mix(in srgb, var(--m) 40%, var(--ivoire)); border-radius: 8px; padding: .45rem .95rem; box-shadow: inset 0 0 0 3px var(--lin), inset 0 0 0 4px color-mix(in srgb, var(--m) 25%, var(--lin)); font-family: var(--aa-police-titre); } body.aa .aa-fiche__physique { align-items: start; } body.aa .aa-fiche__phy { background: var(--ivoire); border: 1px solid var(--sable); border-radius: 10px; padding: .55rem .8rem; box-shadow: inset 0 0 0 2px var(--ivoire), inset 0 0 0 3px color-mix(in srgb, var(--m) 20%, var(--ivoire)); } body.aa .aa-fiche__physique dt { color: var(--encre-2); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; } body.aa .aa-fiche__physique dd { color: var(--m-deep); font-family: var(--aa-police-titre); font-size: 1.05rem; margin-bottom: 0; } body.aa .aa-chips--lecture li { background: #fff; color: var(--encre); border-color: var(--sable); } body.aa .aa-repondre { background: var(--ivoire); border: 1px solid var(--sable); border-radius: 14px; box-shadow: var(--cartouche); padding: 1.4rem; } body.aa .aa-fiche__signaler a, body.aa .aa-retour a { color: var(--m-light); } body.aa .aa-fiche__barre { background: color-mix(in srgb, var(--lin) 94%, transparent); border-top: 2px solid var(--m); box-shadow: 0 -12px 30px -16px rgba(18, 41, 77, .5); } body.aa .aa-fiche__barre .aa-btn { border-radius: 8px; } /* dépôt : fieldsets en cartouche, légende en onglet marine */ body.aa .aa-depot__bloc { background: var(--ivoire); border: 1px solid var(--sable); border-radius: 12px; box-shadow: var(--cartouche); padding: 1.2rem 1.2rem 1.4rem; } body.aa .aa-depot__bloc legend { background: var(--m); color: var(--ivoire); font-family: var(--aa-police-titre); font-size: 1rem; font-weight: 700; letter-spacing: .03em; padding: .3rem .9rem; border-radius: 6px; } body.aa .aa-form__lbl { color: var(--m-deep); } body.aa .aa-depot__apercu img { border-radius: 20px 20px 6px 6px; border: 1px solid var(--sable); } body.aa .aa-regles { color: var(--encre-2); } /* pied de page : marine profond, cartouches lin */ body.aa .aa-footer { background: var(--m-deep); background-image: repeating-linear-gradient(135deg, rgba(239, 233, 220, .04) 0 2px, transparent 2px 14px); color: #e6e0d2; border-radius: 0; border-top: 4px solid var(--m); box-shadow: inset 0 6px 0 var(--m-deep), inset 0 7px 0 rgba(239, 233, 220, .35); margin-top: 3.5rem; padding-block: 2.6rem 1.2rem; } body.aa .aa-footer__brand { font-family: var(--aa-police-titre); font-size: 1.35rem; color: var(--ivoire); } body.aa .aa-footer__h { font-family: var(--aa-police-titre); color: var(--ivoire); font-size: 1.02rem; padding-bottom: .35rem; border-bottom: 2px dashed rgba(239, 233, 220, .35); margin-bottom: .7rem; } body.aa .aa-footer__membres, body.aa .aa-footer__fictif { color: #d6dced; opacity: 1; } body.aa .aa-footer ul { gap: .4rem; } body.aa .aa-footer ul li a { display: inline-block; background: none; color: #e6e0d2; border: 1px solid rgba(239, 233, 220, .4); border-radius: 6px; padding: .3rem .75rem; font-size: .86rem; box-shadow: none; transition: background-color .15s ease, border-color .15s ease; } body.aa .aa-footer ul li a:hover { background: rgba(239, 233, 220, .12); border-color: var(--ivoire); color: var(--ivoire); text-decoration: none; } body.aa .aa-footer__bas { border-top: 1px solid rgba(239, 233, 220, .25); color: #d6dced; opacity: 1; } body.aa .aa-footer__bas a { color: var(--ivoire); } /* porte d'âge et pop-up : boîte ivoire en cartouche */ body.aa .aa-gate, body.aa .aa-popup { background: rgba(14, 29, 56, .86); } body.aa .aa-gate__box, body.aa .aa-popup__box { background: var(--ivoire); border-radius: 14px; box-shadow: var(--cartouche), 0 30px 60px -20px rgba(0, 0, 0, .6); } body.aa .aa-gate__mark { border-radius: 8px; background: var(--m); color: var(--ivoire); font-family: var(--aa-police-titre); box-shadow: inset 0 0 0 3px var(--m), inset 0 0 0 4px rgba(239, 233, 220, .5); } body.aa .aa-popup__titre, body.aa .aa-gate__box h2 { font-family: var(--aa-police-titre); color: var(--m-deep); } body.aa .aa-popup__pour { color: var(--m); } body.aa .aa-popup__fermer { color: var(--encre-2); } body.aa .aa-spin { border-color: var(--sable); border-top-color: var(--m); } /* mouvement réduit : le gabarit coupe déjà toute transition/animation (site.css, !important) */