.co-sc {
--co-orange: #ff8a04;
--co-noir: #272727;
--co-blanc: #ffffff;
--co-creme: #fff7f0;
--co-ok: #1a7f37;
--co-attention: #9a6700;
--co-critique: #cf222e;
--co-neutre: #57606a;
max-width: 780px;
margin: 0 auto;
color: var(--co-noir);
font-size: 16px;
line-height: 1.55;
} .co-sc__label {
display: block;
font-weight: 600;
margin-bottom: 0.4rem;
}
.co-sc__ligne {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.co-sc__champ {
flex: 1 1 260px;
padding: 0.75rem 0.9rem;
border: 2px solid #d8d8d8;
border-radius: 6px;
font-size: 1rem;
min-width: 0;
}
.co-sc__champ:focus {
outline: none;
border-color: var(--co-orange);
}
.co-sc__bouton {
padding: 0.75rem 1.6rem;
border: 0;
border-radius: 6px;
background: var(--co-orange);
color: var(--co-blanc);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
}
.co-sc__bouton:disabled {
opacity: 0.55;
cursor: progress;
} .co-sc__piege {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.co-sc__mention {
margin-top: 0.75rem;
font-size: 0.85rem;
color: var(--co-neutre);
} .co-sc__admin {
display: block;
margin-top: 0.75rem;
padding: 0.5rem 0.75rem;
background: var(--co-creme);
border-radius: 6px;
font-size: 0.85rem;
cursor: pointer;
}
.co-sc__admin span {
color: var(--co-neutre);
} .co-sc__etat {
margin-top: 1.25rem;
padding: 0.75rem 1rem;
border-radius: 6px;
background: var(--co-creme);
border-left: 4px solid var(--co-orange);
}
.co-sc__etat--erreur {
background: #fff0f0;
border-left-color: var(--co-critique);
} .co-sc__resultats {
margin-top: 1.5rem;
}
.co-sc__entete h2 {
font-size: 1.15rem;
margin: 0;
word-break: break-all;
}
.co-sc__techno {
margin: 0.2rem 0 1rem;
color: var(--co-neutre);
font-size: 0.9rem;
}
.co-sc__score {
display: flex;
align-items: baseline;
gap: 1rem;
flex-wrap: wrap;
padding: 1rem 1.25rem;
background: var(--co-creme);
border-radius: 8px;
}
.co-sc__note strong {
font-size: 2.6rem;
line-height: 1;
color: var(--co-orange);
}
.co-sc__note span {
color: var(--co-neutre);
}
.co-sc__palier {
margin: 0;
font-weight: 600;
}
.co-sc__sous-scores {
list-style: none;
margin: 0.75rem 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 0.5rem;
}
.co-sc__sous-scores li {
display: flex;
justify-content: space-between;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border: 1px solid #eee;
border-radius: 6px;
}
.co-sc__provisoire {
font-size: 0.85rem;
color: var(--co-neutre);
font-style: italic;
}
.co-sc__section {
margin-top: 2rem;
}
.co-sc__section h3 {
font-size: 1.05rem;
border-bottom: 2px solid var(--co-creme);
padding-bottom: 0.4rem;
}
.co-sc__point {
padding: 0.75rem 0 0.75rem 0.9rem;
border-left: 4px solid var(--co-neutre);
margin-bottom: 1rem;
}
.co-sc__point--ok { border-left-color: var(--co-ok); }
.co-sc__point--attention { border-left-color: var(--co-attention); }
.co-sc__point--critique { border-left-color: var(--co-critique); }
.co-sc__point--non_verifiable { border-left-color: #c9c9c9; }
.co-sc__point h4 {
margin: 0 0 0.35rem;
font-size: 1rem;
}
.co-sc__point p {
margin: 0 0 0.4rem;
}
.co-sc__impact {
color: var(--co-neutre);
font-size: 0.92rem;
}
.co-sc__point details {
margin-top: 0.4rem;
font-size: 0.85rem;
}
.co-sc__point pre {
overflow-x: auto;
background: #fafafa;
padding: 0.6rem;
border-radius: 4px;
font-size: 0.78rem;
}
.co-sc__limites {
margin-top: 2rem;
padding: 1rem 1.25rem;
background: var(--co-creme);
border-radius: 8px;
}
.co-sc__limites h3 {
margin-top: 0;
font-size: 1rem;
}
.co-sc__limites ul {
margin: 0;
padding-left: 1.2rem;
font-size: 0.92rem;
}