.oai-form {
--oai-ink: var(--sr-encre, #0f2e3f);
--oai-accent: var(--sr-bleu, #2b67a6);
--oai-focus: var(--sr-mag, #d60f6e);
--oai-muted: var(--sr-gris, #4a5f6c);
--oai-line: var(--sr-trait, #d6e2ea);
--oai-line-strong: var(--sr-trait-fort, #76899a);
--oai-surface: var(--sr-blancgris, #f4f6f8);
--oai-danger: #b3261e;
--oai-radius: var(--sr-radius-s, 12px);
--oai-ease: var(--sr-ease, cubic-bezier(.22, .61, .36, 1));
}
.oai-honeypot-field {
position: absolute;
left: -9999px;
top: -9999px;
height: 0;
overflow: hidden;
}
.oai-form .uk-form-controls {
position: relative;
}
.oai-form :is(.uk-input, .uk-textarea):focus {
border-color: var(--oai-focus);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--oai-focus) 18%, transparent);
outline: none;
}
.oai-form :is(.uk-input, .uk-textarea):user-invalid {
border-color: var(--oai-danger);
}
.oai-form :is(.uk-radio, .uk-checkbox):focus-visible {
outline: 3px solid var(--oai-focus);
outline-offset: 2px;
}
.oai-type-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
gap: 12px;
}
.oai-type-option {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border: 1px solid var(--oai-line-strong);
border-radius: var(--oai-radius);
background: #fff;
color: var(--oai-ink);
font-size: 16px;
line-height: 1.35;
cursor: pointer;
transition: border-color .2s var(--oai-ease), background-color .2s var(--oai-ease), box-shadow .2s var(--oai-ease), transform .2s var(--oai-ease);
}
.oai-type-option .uk-radio {
flex: none;
margin: 0;
}
.oai-type-option:hover {
border-color: var(--oai-accent);
transform: translateY(-1px);
}
.oai-type-option:has(input:checked) {
border-color: var(--oai-accent);
background: color-mix(in srgb, var(--oai-accent) 8%, #fff);
box-shadow: 0 0 0 1px var(--oai-accent);
font-weight: 600;
}
.oai-type-option:has(input:focus-visible) {
outline: 3px solid var(--oai-focus);
outline-offset: 2px;
}
.oai-address-suggestions {
position: relative;
z-index: 1100;
margin-top: 4px;
border: 1px solid var(--oai-line-strong);
border-radius: var(--oai-radius);
background: #fff;
box-shadow: 0 12px 28px -12px rgba(15, 46, 63, .35);
max-height: 260px;
overflow-y: auto;
}
.oai-address-suggestion {
display: block;
width: 100%;
padding: 12px 18px;
border: 0;
border-bottom: 1px solid var(--oai-line);
background: none;
color: var(--oai-ink);
font: inherit;
font-size: 16px;
text-align: left;
cursor: pointer;
}
.oai-address-suggestion:last-child {
border-bottom: 0;
}
.oai-address-suggestion:hover,
.oai-address-suggestion:focus-visible {
background: var(--oai-surface);
outline: none;
}
.oai-map {
width: 100%;
height: 400px;
margin-top: 12px;
border: 1px solid var(--oai-line-strong);
border-radius: var(--oai-radius);
overflow: hidden;
z-index: 0;
}
.oai-map .leaflet-bar {
border: 0;
box-shadow: 0 4px 14px rgba(15, 46, 63, .25);
border-radius: 10px;
overflow: hidden;
}
.oai-map .leaflet-bar a {
color: var(--oai-ink);
}
.oai-map .leaflet-control-attribution {
font-size: 11px;
}
.oai-map-help,
.oai-help {
margin: 8px 0 0;
font-size: 14px;
line-height: 1.4;
color: var(--oai-muted);
}
.oai-dropzone {
padding: 28px 20px;
border: 2px dashed var(--oai-line-strong);
border-radius: var(--oai-radius);
background: var(--oai-surface);
text-align: center;
transition: border-color .2s var(--oai-ease), background-color .2s var(--oai-ease);
}
.oai-dropzone p {
margin: 0;
font-size: 16px;
color: var(--oai-ink);
}
.oai-dropzone-active {
border-color: var(--oai-accent);
background: color-mix(in srgb, var(--oai-accent) 8%, #fff);
}
.oai-dropzone .uk-button {
margin-left: 6px;
}
.oai-photo-previews {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
}
.oai-photo-previews:not(:empty) {
margin-top: 20px;
}
.oai-photo-preview {
position: relative;
width: 96px;
height: 96px;
}
.oai-photo-preview img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(15, 46, 63, .2);
}
.oai-photo-preview-remove {
position: absolute;
top: -9px;
right: -9px;
display: grid;
place-items: center;
width: 28px;
height: 28px;
padding: 0;
border: 2px solid #fff;
border-radius: 50%;
background: var(--oai-danger);
color: #fff;
font-size: 16px;
line-height: 1;
cursor: pointer;
transition: transform .2s var(--oai-ease);
}
.oai-photo-preview-remove:hover {
transform: scale(1.1);
}
.oai-photo-preview-remove:focus-visible {
outline: 3px solid var(--oai-focus);
outline-offset: 2px;
}
.oai-consent-option {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 16px;
line-height: 1.4;
cursor: pointer;
}
.oai-consent-option .uk-checkbox {
flex: none;
margin-top: 3px;
}
.oai-rgpd-text {
margin: 10px 0 0;
font-size: 14px;
line-height: 1.5;
color: var(--oai-muted);
}
.oai-rgpd-text a {
color: var(--oai-accent);
}
.oai-rgpd-text a:hover {
color: var(--oai-focus);
}
.oai-form-submit .uk-button {
min-width: 220px;
}
.oai-form .oai-form-message {
margin-top: 20px;
padding: 16px 20px;
border-radius: var(--oai-radius);
font-size: 16px;
}
.oai-form button[type="submit"].oai-loading {
position: relative;
opacity: .7;
pointer-events: none;
}
.oai-form button[type="submit"].oai-loading::after {
content: "";
display: inline-block;
width: 14px;
height: 14px;
margin-left: 10px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
vertical-align: -2px;
animation: oai-spin .7s linear infinite;
}
@keyframes oai-spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 639px) {
.oai-map {
height: 320px;
}
.oai-dropzone .uk-button {
display: block;
margin: 12px auto 0;
}
.oai-form-submit .uk-button {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.oai-type-option,
.oai-dropzone,
.oai-photo-preview-remove {
transition: none;
}
.oai-type-option:hover {
transform: none;
}
.oai-form button[type="submit"].oai-loading::after {
animation: none;
}
}