.optimal-pre-audit-root { --opa-primaire: #0c2f57;
--opa-accent: #85cad9;
--opa-texte: #232325;
--opa-texte-doux: #6b7280;
--opa-fond: #ffffff;
--opa-fond-bleu: #f7f9fc;
--opa-carte: #eef4fa;
--opa-carte-survol: #e6eef7;
--opa-carte-bordure: #d6e2ee;
--opa-champ: #f4f5f7;
--opa-bordure: #e3e6ea;
--opa-gris-logo-fonce: #5f6164; --opa-resultat-fond: #eeeff0; --opa-alerte-texte: #a15c00;
--opa-positif-texte: #26704f;
--opa-police: Lato, "Helvetica Neue", Arial, sans-serif;
width: 100%;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
container-type: inline-size;
box-sizing: border-box;
border: 1px solid var(--opa-bordure);
background: var(--opa-fond);
color: var(--opa-texte);
font-family: var(--opa-police);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
}
.optimal-pre-audit-root *,
.optimal-pre-audit-root *::before,
.optimal-pre-audit-root *::after {
box-sizing: border-box;
}
.optimal-pre-audit-root [hidden] {
display: none !important;
} .optimal-pre-audit-root h2,
.optimal-pre-audit-root h3,
.optimal-pre-audit-root p {
margin: 0;
padding: 0;
font-family: var(--opa-police);
letter-spacing: 0;
text-transform: none;
}
.optimal-pre-audit-root button,
.optimal-pre-audit-root input {
font-family: var(--opa-police);
}
.optimal-pre-audit-root button {
height: auto;
min-height: 0;
margin: 0;
box-shadow: none;
line-height: 1.4;
white-space: normal;
cursor: pointer;
} .optimal-pre-audit-root ul,
.optimal-pre-audit-root li {
margin: 0;
padding: 0;
line-height: 1.4;
}
.optimal-pre-audit-root.optimal-pre-audit-root ul,
.optimal-pre-audit-root.optimal-pre-audit-root li {
list-style: none;
}
.optimal-pre-audit-root.optimal-pre-audit-root li::before,
.optimal-pre-audit-root.optimal-pre-audit-root li::after {
content: none !important;
display: none !important;
}
.optimal-pre-audit-root :focus-visible {
outline: 2px solid var(--opa-accent);
outline-offset: 2px;
} .optimal-pre-audit-root [tabindex="-1"]:focus {
outline: none;
} .optimal-pre-audit-root .opa-intro {
padding: 32px 40px;
border-bottom: 1px solid var(--opa-bordure);
background: var(--opa-fond-bleu);
color: var(--opa-texte-doux);
}
.optimal-pre-audit-root .opa-eyebrow {
display: block;
margin-bottom: 12px;
color: var(--opa-gris-logo-fonce);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
line-height: 1.6;
text-transform: uppercase;
}
.optimal-pre-audit-root .opa-intro h2 {
margin-bottom: 12px;
color: var(--opa-primaire);
font-size: clamp(26px, 4vw, 34px);
font-weight: 300;
line-height: 1.2;
}
.optimal-pre-audit-root .opa-intro-result {
margin-top: 12px;
}
.optimal-pre-audit-root .opa-intro-result strong {
color: var(--opa-primaire);
font-weight: 700;
} .optimal-pre-audit-root .opa-progress {
padding: 24px 40px 0;
color: var(--opa-texte-doux);
font-size: 13px;
}
.optimal-pre-audit-root .opa-progress > div {
display: flex;
justify-content: space-between;
gap: 16px;
margin-bottom: 10px;
}
.optimal-pre-audit-root progress {
-webkit-appearance: none;
appearance: none;
display: block;
width: 100%;
height: 3px;
border: 0;
background: var(--opa-bordure);
color: var(--opa-primaire);
}
.optimal-pre-audit-root progress::-webkit-progress-bar {
background: var(--opa-bordure);
}
.optimal-pre-audit-root progress::-webkit-progress-value {
background: var(--opa-primaire);
}
.optimal-pre-audit-root progress::-moz-progress-bar {
background: var(--opa-primaire);
} .optimal-pre-audit-root .opa-form {
padding: 28px 40px 36px;
}
.optimal-pre-audit-root .opa-form h3 {
color: var(--opa-primaire);
font-size: 22px;
font-weight: 400;
line-height: 1.25;
}
.optimal-pre-audit-root .opa-description {
margin: 8px 0 24px;
color: var(--opa-texte-doux);
font-size: 14px;
}
.optimal-pre-audit-root .opa-question-card {
position: relative;
margin: 0 0 16px;
padding: 22px 24px;
border: 1px solid var(--opa-carte-bordure);
border-radius: 8px;
background: var(--opa-fond-bleu);
} .optimal-pre-audit-root .opa-question-card:hover,
.optimal-pre-audit-root .opa-question-card:focus-within {
z-index: 2;
}
.optimal-pre-audit-root .opa-question {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.optimal-pre-audit-root .opa-question legend {
display: block;
width: 100%;
margin: 0 0 16px;
padding: 0 30px 0 0;
}
.optimal-pre-audit-root .opa-question-heading {
display: block;
color: var(--opa-primaire);
font-size: 15px;
font-weight: 400;
line-height: 1.5;
}
.optimal-pre-audit-root div.opa-question-heading {
margin-bottom: 16px;
padding-right: 30px;
} .optimal-pre-audit-root .opa-help-wrap {
position: absolute;
top: 24px;
right: 24px;
display: inline-flex;
}
.optimal-pre-audit-root .opa-info {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
padding: 0;
border: 1px solid var(--opa-texte-doux);
border-radius: 50%;
background: transparent;
color: var(--opa-texte-doux);
font-size: 10px;
font-style: italic;
font-weight: 700;
line-height: 1;
cursor: help;
}
.optimal-pre-audit-root .opa-help {
position: absolute;
z-index: 10;
top: calc(100% + 8px);
right: 0;
width: min(320px, calc(100vw - 80px));
padding: 10px 12px;
background: var(--opa-primaire);
color: #fff;
font-size: 12px;
font-weight: 400;
line-height: 1.45;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.15s;
}
.optimal-pre-audit-root .opa-help strong {
font-weight: 700;
}
.optimal-pre-audit-root .opa-help-wrap:hover .opa-help,
.optimal-pre-audit-root .opa-help-wrap:focus-within .opa-help {
opacity: 1;
visibility: visible;
} .optimal-pre-audit-root .opa-options {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.optimal-pre-audit-root .opa-options label {
display: flex;
align-items: center;
min-height: 44px;
padding: 10px 16px;
border: 1px solid var(--opa-carte-bordure);
border-radius: 8px;
background: var(--opa-carte);
color: var(--opa-primaire);
font-size: 14px;
font-weight: 400;
line-height: 1.4;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.optimal-pre-audit-root .opa-options label:hover {
border-color: var(--opa-primaire);
background: var(--opa-carte-survol);
}
.optimal-pre-audit-root .opa-options input[type="radio"] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.optimal-pre-audit-root .opa-options label:has(input:checked) {
border-color: var(--opa-primaire);
background: var(--opa-primaire);
color: #fff;
}
.optimal-pre-audit-root .opa-options label:has(input:focus-visible) {
outline: 2px solid var(--opa-accent);
outline-offset: 2px;
} .optimal-pre-audit-root .opa-year {
width: 140px;
margin: 0;
padding: 8px 12px;
border: 0;
border-radius: 0;
background: var(--opa-champ);
color: var(--opa-texte);
font-size: 16px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.optimal-pre-audit-root .opa-year:focus {
outline: 2px solid var(--opa-accent);
outline-offset: 0;
}
.optimal-pre-audit-root .opa-error {
margin: 16px 0 0;
padding-left: 12px;
border-left: 2px solid var(--opa-alerte-texte);
color: var(--opa-alerte-texte);
font-size: 13px;
} .optimal-pre-audit-root .opa-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 24px;
}
.optimal-pre-audit-root .opa-primary,
.optimal-pre-audit-root .opa-primary:visited,
.optimal-pre-audit-root .opa-secondary,
.optimal-pre-audit-root .opa-secondary:visited {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 16px 20px;
border: 1px solid var(--opa-primaire);
border-radius: 0;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.14em;
line-height: 1.4;
text-decoration: none;
text-transform: uppercase;
transition: background 0.2s, color 0.2s;
}
.optimal-pre-audit-root .opa-primary,
.optimal-pre-audit-root .opa-primary:visited,
.optimal-pre-audit-root .opa-secondary:hover,
.optimal-pre-audit-root .opa-secondary:focus-visible {
background: var(--opa-primaire);
color: #fff;
}
.optimal-pre-audit-root .opa-secondary,
.optimal-pre-audit-root .opa-secondary:visited,
.optimal-pre-audit-root .opa-primary:hover,
.optimal-pre-audit-root .opa-primary:focus-visible {
background: #fff;
color: var(--opa-primaire);
}
.optimal-pre-audit-root .opa-primary span {
font-size: 18px;
font-weight: 300;
letter-spacing: 0;
line-height: 1;
}
.optimal-pre-audit-root .opa-actions button:disabled {
opacity: 0.4;
cursor: default;
pointer-events: none;
} .optimal-pre-audit-root .opa-results {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
padding: 32px 40px;
}
.optimal-pre-audit-root .opa-card {
padding: 24px;
border: 1px solid var(--opa-carte-bordure);
border-radius: 8px;
background: var(--opa-fond);
font-size: 14px;
}
.optimal-pre-audit-root .opa-card h3 {
margin: 14px 0 4px;
color: var(--opa-primaire);
font-size: 22px;
font-weight: 900;
letter-spacing: 0.02em;
line-height: 1.3;
text-transform: uppercase;
}
.optimal-pre-audit-root .opa-subtitle {
margin-bottom: 16px;
color: var(--opa-texte-doux);
}
.optimal-pre-audit-root .opa-status {
display: inline-block;
padding: 4px 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
line-height: 1.5;
text-transform: uppercase;
}
.optimal-pre-audit-root .opa-potential {
--opa-statut: var(--opa-positif-texte);
}
.optimal-pre-audit-root .opa-clarify {
--opa-statut: var(--opa-alerte-texte);
}
.optimal-pre-audit-root .opa-negative {
--opa-statut: var(--opa-gris-logo-fonce);
}
.optimal-pre-audit-root .opa-potential .opa-status {
background: #e5f4ed;
}
.optimal-pre-audit-root .opa-clarify .opa-status {
background: #fbf1e3;
}
.optimal-pre-audit-root .opa-negative .opa-status {
background: var(--opa-resultat-fond);
}
.optimal-pre-audit-root .opa-status,
.optimal-pre-audit-root .opa-positive {
color: var(--opa-statut);
} .optimal-pre-audit-root .opa-card > ul li,
.optimal-pre-audit-root .opa-positive {
margin-bottom: 8px;
padding-left: 12px;
border-left: 2px solid var(--opa-statut);
line-height: 1.5;
}
.optimal-pre-audit-root .opa-jei-dates {
margin: 0 0 16px;
padding: 14px 16px;
background: var(--opa-fond-bleu);
}
.optimal-pre-audit-root .opa-jei-dates p {
margin-bottom: 8px;
}
.optimal-pre-audit-root .opa-jei-dates strong {
color: var(--opa-primaire);
font-weight: 700;
}
.optimal-pre-audit-root .opa-jei-dates small {
display: block;
color: var(--opa-texte-doux);
font-size: 12px;
line-height: 1.5;
} .optimal-pre-audit-root .opa-card details {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--opa-bordure);
color: var(--opa-gris-logo-fonce);
font-size: 13px;
}
.optimal-pre-audit-root .opa-card summary {
cursor: pointer;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.optimal-pre-audit-root .opa-card details p,
.optimal-pre-audit-root .opa-card details li {
margin-top: 8px;
line-height: 1.5;
} .optimal-pre-audit-root .opa-dossier {
margin: 0 40px 16px;
padding: 20px 24px;
background: var(--opa-fond-bleu);
font-size: 14px;
}
.optimal-pre-audit-root .opa-dossier strong {
color: var(--opa-primaire);
font-weight: 700;
}
.optimal-pre-audit-root .opa-dossier p {
margin-top: 6px;
color: var(--opa-texte-doux);
font-size: 13px;
}
.optimal-pre-audit-root .opa-contact {
margin: 0 40px 28px;
padding: 28px 32px;
background: var(--opa-resultat-fond);
color: var(--opa-primaire);
}
.optimal-pre-audit-root .opa-contact h3 {
font-size: 22px;
font-weight: 300;
line-height: 1.25;
}
.optimal-pre-audit-root .opa-contact p {
margin-top: 10px;
font-size: 14px;
}
.optimal-pre-audit-root .opa-end {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 24px;
padding: 0 40px 28px;
}
.optimal-pre-audit-root .opa-end button {
padding: 0;
border: 0;
background: transparent;
color: var(--opa-texte-doux);
font-size: 13px;
text-decoration: underline;
text-transform: none;
letter-spacing: 0;
}
.optimal-pre-audit-root .opa-end button:hover {
color: var(--opa-primaire);
}
.optimal-pre-audit-root .opa-foot {
padding: 16px 40px;
border-top: 1px solid var(--opa-bordure);
background: var(--opa-fond-bleu);
color: var(--opa-gris-logo-fonce);
font-size: 12px;
line-height: 1.5;
} @container (max-width: 760px) {
.optimal-pre-audit-root .opa-intro,
.optimal-pre-audit-root .opa-form,
.optimal-pre-audit-root .opa-results {
padding: 24px 20px;
}
.optimal-pre-audit-root .opa-progress {
padding: 20px 20px 0;
}
.optimal-pre-audit-root .opa-progress > div span:last-child {
max-width: 60%;
text-align: right;
}
.optimal-pre-audit-root .opa-question-card {
padding: 18px 16px;
}
.optimal-pre-audit-root .opa-help-wrap {
top: 20px;
right: 16px;
}
.optimal-pre-audit-root .opa-results {
grid-template-columns: 1fr;
}
.optimal-pre-audit-root .opa-dossier,
.optimal-pre-audit-root .opa-contact {
margin-left: 20px;
margin-right: 20px;
padding: 20px;
}
.optimal-pre-audit-root .opa-end,
.optimal-pre-audit-root .opa-foot {
padding-left: 20px;
padding-right: 20px;
}
.optimal-pre-audit-root .opa-actions > * {
flex: 1 1 auto;
}
}
@media print {
.optimal-pre-audit-root .opa-progress,
.optimal-pre-audit-root .opa-contact,
.optimal-pre-audit-root .opa-end,
.optimal-pre-audit-root .opa-actions {
display: none;
}
.optimal-pre-audit-root .opa-results {
display: block;
}
.optimal-pre-audit-root .opa-card {
margin: 12px 0;
break-inside: avoid;
}
}