/* Socle C10 — lot A du 06.09.2026. Un seul fichier, commun aux sites de niche de la Broye. Il ne connaît pas les classes du site : ses couleurs viennent des deux variables --c10-accent / --c10-accent-ink déclarées ci-dessous, et sa police est celle du (font: inherit). */ :root { color-scheme: light only; } /* Ligne NAP dans le pied de page */ .c10-nap { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(127, 127, 127, .25); font-size: .95rem; line-height: 1.6; color: inherit; } .c10-nap a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .15em; } .c10-nap a:hover { text-decoration-thickness: 2px; } /* Popup de devis */ .c10-pum { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(20, 24, 28, .58); opacity: 0; transition: opacity .25s ease; font: inherit; } .c10-pum.vue { opacity: 1; } .c10-pum-carte { position: relative; width: min(500px, 100%); max-height: calc(100dvh - 2rem); overflow-y: auto; background: #fff; color: #1c1f22; border-radius: 14px; padding: 1.75rem 1.5rem 1.5rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 28px 60px -24px rgba(0, 0, 0, .55); transform: translateY(14px); transition: transform .3s cubic-bezier(.2, .9, .3, 1); font-family: inherit; text-align: left; } .c10-pum.vue .c10-pum-carte { transform: none; } .c10-pum-x { position: absolute; top: .7rem; right: .7rem; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid #d9dde2; border-radius: 50%; background: #f5f6f7; color: #3a4048; font-size: 1.25rem; line-height: 1; cursor: pointer; } .c10-pum-x:hover, .c10-pum-x:focus-visible { background: #1c1f22; color: #fff; border-color: transparent; outline: none; } .c10-pum-eti { margin: 0 0 .35rem; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #5b6570; } .c10-pum-carte h2 { margin: 0 0 .5rem; padding-right: 2.5rem; font-size: 1.4rem; line-height: 1.25; color: #1c1f22; font-weight: 700; } .c10-pum-p { margin: 0 0 1.1rem; font-size: .97rem; line-height: 1.55; color: #3a4048; } .c10-pum-grille { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem .9rem; } .c10-pum-plein { grid-column: 1 / -1; } .c10-pum-champ { display: flex; flex-direction: column; gap: .3rem; } .c10-pum-champ label { font-size: .85rem; font-weight: 600; color: #2b3138; } .c10-pum-champ input, .c10-pum-champ textarea { width: 100%; box-sizing: border-box; padding: .7rem .8rem; border: 1px solid #c9cfd6; border-radius: 8px; background: #fff; color: #1c1f22; font: inherit; font-size: 1rem; } .c10-pum-champ input:focus, .c10-pum-champ textarea:focus { outline: 2px solid var(--c10-accent, #1c1f22); outline-offset: 1px; border-color: var(--c10-accent, #1c1f22); } .c10-pum-btn { display: block; width: 100%; margin-top: 1rem; padding: .9rem 1rem; border: 0; border-radius: 8px; background: var(--c10-accent, #1c1f22); color: var(--c10-accent-ink, #fff); font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer; } .c10-pum-btn:hover { filter: brightness(1.08); } .c10-pum-btn:focus-visible { outline: 3px solid #1c1f22; outline-offset: 2px; } .c10-pum-btn[disabled] { opacity: .6; cursor: wait; } .c10-pum-etat { min-height: 1.4em; margin: .7rem 0 0; font-size: .95rem; line-height: 1.45; color: #1c1f22; } .c10-pum-tel { margin: .8rem 0 0; font-size: .95rem; color: #3a4048; } .c10-pum-tel a { color: #1c1f22; font-weight: 700; text-decoration: underline; text-underline-offset: .15em; } .c10-pum-mention { margin: .8rem 0 0; font-size: .8rem; line-height: 1.45; color: #6b7480; } @media (max-width: 560px) { .c10-pum { align-items: flex-end; padding: 0; } .c10-pum-carte { width: 100%; max-height: 92dvh; border-radius: 14px 14px 0 0; padding: 1.5rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom)); transform: translateY(100%); } .c10-pum-grille { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .c10-pum, .c10-pum-carte { transition: none !important; } }