.scw,
.scw *,
.scw__rappel {
box-sizing: border-box;
}
.scw[hidden],
.scw__panneau[hidden],
.scw__voile[hidden],
.scw__rappel[hidden] {
display: none !important;
}
.scw {
--scw-encre: #334155;
--scw-encre-douce: #5b6b7f;
--scw-fond: #ffffff;
--scw-bord: #d8e0e8;
--scw-accent: #046bd2;
--scw-accent-fonce: #0355a6;
--scw-ombre: 0 -2px 24px rgba(16, 33, 51, .14);
font-family: inherit;
color: var(--scw-encre);
line-height: 1.55;
} .scw__bandeau {
position: fixed;
inset: auto 0 0 0;
z-index: 99998;
background: var(--scw-fond);
border-top: 3px solid var(--scw-accent);
box-shadow: var(--scw-ombre);
padding: 20px 22px;
transform: translateY(100%);
transition: transform .28s ease;
}
.scw__bandeau.est-visible {
transform: translateY(0);
}
.scw__contenu {
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 28px;
}
.scw__titre {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
flex: 0 0 100%;
color: var(--scw-encre);
}
.scw__texte {
margin: 0;
font-size: .93rem;
color: var(--scw-encre-douce);
flex: 1 1 380px;
min-width: 260px;
}
.scw__lien {
color: var(--scw-accent);
text-underline-offset: 2px;
}
.scw__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
flex: 0 0 auto;
} .scw__btn {
font: inherit;
font-size: .92rem;
line-height: 1.2;
padding: 11px 20px;
border-radius: 6px;
cursor: pointer;
border: 1px solid transparent;
transition: background-color .15s ease, border-color .15s ease;
white-space: nowrap;
} .scw__btn--principal {
background: var(--scw-fond);
border-color: var(--scw-accent);
color: var(--scw-accent);
font-weight: 600;
min-width: 140px;
}
.scw__btn--principal:hover {
background: #eef5fd;
}
.scw__btn--secondaire {
background: transparent;
border-color: var(--scw-bord);
color: var(--scw-encre-douce);
font-weight: 500;
}
.scw__btn--secondaire:hover {
border-color: var(--scw-encre-douce);
}
.scw__btn--valider {
background: var(--scw-accent);
color: #fff;
font-weight: 600;
min-width: 140px;
}
.scw__btn--valider:hover {
background: var(--scw-accent-fonce);
}
.scw__btn:focus-visible,
.scw__fermer:focus-visible,
.scw__interrupteur:focus-visible,
.scw__rappel:focus-visible {
outline: 3px solid var(--scw-accent);
outline-offset: 2px;
} .scw__voile {
position: fixed;
inset: 0;
z-index: 99998;
background: rgba(16, 33, 51, .55);
}
.scw__panneau {
position: fixed;
z-index: 99999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(680px, calc(100vw - 32px));
max-height: min(84vh, 760px);
display: flex;
flex-direction: column;
background: var(--scw-fond);
border-radius: 10px;
box-shadow: 0 18px 60px rgba(16, 33, 51, .3);
}
.scw__panneau-entete {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid var(--scw-bord);
}
.scw__panneau-entete h2 {
margin: 0;
font-size: 1.15rem;
font-weight: 700;
}
.scw__fermer {
background: none;
border: 0;
font-size: 1.7rem;
line-height: 1;
cursor: pointer;
color: var(--scw-encre-douce);
padding: 0 4px;
}
.scw__panneau-corps {
padding: 20px 24px;
overflow-y: auto;
}
.scw__intro {
margin: 0 0 18px;
font-size: .9rem;
color: var(--scw-encre-douce);
}
.scw__finalite {
padding: 16px 0;
border-top: 1px solid var(--scw-bord);
}
.scw__finalite-entete {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.scw__label {
font-weight: 700;
font-size: .98rem;
cursor: pointer;
}
.scw__toujours {
margin-left: auto;
font-size: .8rem;
color: var(--scw-encre-douce);
font-style: italic;
}
.scw__interrupteur {
width: 20px;
height: 20px;
accent-color: var(--scw-accent);
cursor: pointer;
flex: 0 0 auto;
}
.scw__interrupteur:disabled {
cursor: not-allowed;
opacity: .6;
}
.scw__finalite-desc {
margin: 8px 0 0;
font-size: .88rem;
color: var(--scw-encre-douce);
}
.scw__services {
margin: 12px 0 0;
padding: 12px 14px;
list-style: none;
background: #f5f8fb;
border-radius: 6px;
font-size: .85rem;
}
.scw__services li + li {
margin-top: 10px;
}
.scw__editeur {
color: var(--scw-encre-douce);
}
.scw__service-desc {
color: var(--scw-encre-douce);
}
.scw__panneau-pied {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 18px 24px;
border-top: 1px solid var(--scw-bord);
background: #fbfcfe;
border-radius: 0 0 10px 10px;
}
.scw__panneau-pied .scw__btn--valider {
margin-left: auto;
} .scw__rappel {
position: fixed;
left: 16px;
bottom: 16px;
z-index: 99997;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 14px;
font: inherit;
font-size: .82rem;
background: var(--scw-fond);
color: #334155;
border: 1px solid #d8e0e8;
border-radius: 100px;
box-shadow: 0 3px 14px rgba(16, 33, 51, .14);
cursor: pointer;
opacity: .82;
transition: opacity .15s ease;
}
.scw__rappel:hover {
opacity: 1;
}
body.scw-verrou {
overflow: hidden;
} @media (max-width: 720px) {
.scw__bandeau {
padding: 16px;
max-height: 82vh;
overflow-y: auto;
}
.scw__actions {
width: 100%;
}
.scw__btn {
flex: 1 1 100%;
min-width: 0;
}
.scw__panneau-pied {
flex-direction: column;
}
.scw__panneau-pied .scw__btn--valider {
margin-left: 0;
}
.scw__rappel .scw__rappel-texte {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.scw__bandeau,
.scw__btn,
.scw__rappel {
transition: none;
}
}
@media (prefers-contrast: more) {
.scw__btn--principal {
border-width: 2px;
}
}   .scw-substitut {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 240px;
padding: 28px 22px;
text-align: center;
border: 1px dashed rgba(0, 0, 0, 0.22);
border-radius: 10px;
background: #f4f6f9;
color: #333;
}
.scw-substitut__titre {
margin: 0;
font-weight: 700;
font-size: 0.98rem;
}
.scw-substitut__texte {
margin: 0;
max-width: 42ch;
font-size: 0.88rem;
line-height: 1.55;
opacity: 0.85;
}
.scw-substitut__finalite {
margin: 0;
font-size: 0.78rem;
opacity: 0.65;
}