.outil,
.infographie {
--o-lagon: var(--lagon, #0a5c66);
--o-lagon-pale: var(--lagon-pale, #e4f0f1);
--o-encre: var(--encre, #14232b);
--o-doux: var(--texte-doux, #4b5960);
--o-sable: var(--sable, #f6f1e8);
--o-trait: var(--trait, #ddd4c4);
--o-champ: #5f6c73;
--o-rayon: var(--rayon, 8px);
--o-rayon-grand: var(--rayon-grand, 14px);
}
.outil {
margin-block: var(--e4, 32px);
}
.outil__formulaire fieldset {
margin: 0 0 var(--e3, 24px);
padding: 0;
border: 0;
}
.outil__legende {
margin-bottom: var(--e1, 8px);
padding: 0;
color: var(--o-encre);
font-family: var(--police-titre, system-ui, sans-serif);
font-size: 1.25rem;
font-weight: 800;
}
.outil__aide {
color: var(--o-doux);
font-size: 0.9375rem;
}
.outil__source {
margin-top: var(--e2, 16px);
color: var(--o-doux);
font-size: 0.875rem;
} .budget {
display: grid;
gap: var(--e3, 24px);
}
@media (min-width: 700px) {
.budget {
grid-template-columns: repeat(2, 1fr);
}
}
.champ {
margin-bottom: var(--e2, 16px);
}
.budget .champ {
margin: 0;
}
.champ__libelle {
display: block;
margin-bottom: var(--e1, 8px);
color: var(--o-encre);
font-weight: 600;
}
.champ__saisie {
position: relative;
max-width: 280px;
}
.champ__saisie input {
width: 100%;
min-height: 48px;
padding: 10px 40px 10px 14px;
border: 1px solid var(--o-champ);
border-radius: var(--o-rayon);
background: #fff;
font-size: 1.125rem;
}
.champ__saisie input:focus-visible {
border-color: var(--o-lagon);
outline: 3px solid var(--lave, #a63a14);
outline-offset: 1px;
}
.champ__unite {
position: absolute;
top: 50%;
right: 14px;
color: var(--o-doux);
transform: translateY(-50%);
}
.champ__note {
margin: 4px 0 0;
color: var(--o-doux);
font-size: 0.875rem;
} .choix__options {
display: flex;
flex-wrap: wrap;
gap: var(--e1, 8px);
}
.choix__radio {
position: absolute;
opacity: 0;
pointer-events: none;
}
.choix__bouton {
display: inline-flex;
align-items: center;
min-height: 48px;
padding: 10px var(--e3, 24px);
border: 2px solid var(--o-lagon);
border-radius: 999px;
background: #fff;
color: var(--o-lagon);
font-weight: 600;
cursor: pointer;
}
.choix__radio:checked + .choix__bouton {
background: var(--o-lagon);
color: #fff;
}
.choix__radio:focus-visible + .choix__bouton {
outline: 3px solid var(--lave, #a63a14);
outline-offset: 2px;
} .outil__resultat {
margin-block: var(--e3, 24px);
padding: var(--e3, 24px);
border-radius: var(--o-rayon-grand);
background: var(--o-lagon-pale);
}
.outil__resultat-titre {
margin-bottom: var(--e2, 16px);
color: var(--o-encre);
font-family: var(--police-titre, system-ui, sans-serif);
font-size: 1.25rem;
font-weight: 800;
}
.resultats {
margin: 0;
}
.resultats > div {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 4px var(--e2, 16px);
padding-block: 12px;
border-bottom: 1px solid rgb(10 92 102 / 0.2);
}
.resultats > div:last-child {
border-bottom: 0;
}
.resultats dt {
color: var(--o-encre);
}
.resultats dd {
margin: 0;
color: var(--o-encre);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.resultats__total dt,
.resultats__total dd {
color: var(--o-lagon);
font-size: 1.25rem;
font-weight: 700;
} .outil table caption,
.prose table caption {
margin-bottom: var(--e1, 8px);
color: var(--o-doux, #4b5960);
font-size: 0.9375rem;
text-align: left;
caption-side: top;
}
.outil tbody th {
font-weight: 600;
}
.tableau__note {
display: block;
color: var(--o-doux);
font-size: 0.875rem;
}
.tableau__total th,
.tableau__total td {
border-top: 2px solid var(--o-lagon);
font-weight: 700;
}
.calendrier__rentree {
padding-left: 1.25em;
}
.ligne--marquee th,
.ligne--marquee td {
background: var(--o-lagon-pale);
}
.etiquette {
display: inline-block;
margin-left: var(--e1, 8px);
padding: 2px 10px;
border-radius: 999px;
background: var(--o-lagon);
color: #fff;
font-size: 0.8125rem;
font-weight: 700;
vertical-align: middle;
}
.etiquette[hidden] {
display: none;
}
.plein {
margin-top: var(--e4, 32px);
} .phases {
display: grid;
gap: var(--e3, 24px);
}
.phase {
padding: var(--e3, 24px);
border: 1px solid var(--o-trait);
border-left: 8px solid var(--phase, var(--o-lagon));
border-radius: var(--o-rayon-grand);
background: #fff;
}
.phase--jaune {
--phase: #e0b100;
}
.phase--orange {
--phase: #e8590c;
}
.phase--rouge {
--phase: #c92a2a;
}
.phase--violette {
--phase: #7b2cbf;
}
.phase--bleue {
--phase: #1c6dd0;
}
.phase__titre {
margin: 0 0 4px;
}
.phase__mot {
margin-bottom: var(--e2, 16px);
color: var(--o-doux);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.875rem;
}
.phase ul {
margin: 0;
padding-left: 1.25em;
} .check-list {
margin-top: var(--e4, 32px);
}
.cases {
margin: 0 0 var(--e3, 24px);
padding: 0;
list-style: none;
}
.prose .cases li + li {
margin-top: 0;
}
.cases__element {
display: flex;
gap: var(--e2, 16px);
padding-block: 14px;
border-bottom: 1px solid var(--o-trait);
}
.cases__case {
flex: none;
width: 24px;
height: 24px;
margin: 2px 0 0;
accent-color: var(--o-lagon);
cursor: pointer;
}
.cases__texte label {
cursor: pointer;
}
.cases__case:checked + .cases__texte label {
color: var(--o-doux);
text-decoration: line-through;
}
.cases__lien {
display: inline-block;
margin-top: 4px;
font-size: 0.9375rem;
}
.avancement {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--e2, 16px);
}
.avancement__texte {
margin: 0;
font-weight: 700;
} .calendrier__choix {
margin-bottom: var(--e3, 24px);
}
.choix__bouton[aria-pressed="true"] {
background: var(--o-lagon);
color: #fff;
}
.calendrier__legende {
display: flex;
flex-wrap: wrap;
gap: var(--e1, 8px) var(--e3, 24px);
margin: 0 0 var(--e3, 24px);
padding: 0;
list-style: none;
font-size: 0.9375rem;
}
.prose .calendrier__legende li {
display: flex;
align-items: center;
gap: var(--e1, 8px);
margin: 0;
}
.pastille {
display: inline-block;
flex: none;
width: 18px;
height: 18px;
border: 1px solid rgb(20 35 43 / 0.15);
border-radius: 5px;
} .pastille--we,
.mois td.jour--we {
background: #eef2f3;
color: var(--o-doux);
}
.pastille--vacances,
.mois td.jour--vacances {
background: #fbe3a6;
color: var(--o-encre);
}
.pastille--ferie,
.mois td.jour--ferie {
background: #a63a14;
color: #fff;
font-weight: 700;
}
.pastille--rentree,
.mois td.jour--rentree {
background: var(--o-lagon);
color: #fff;
font-weight: 700;
}
.pastille--aujourdhui {
background: #fff;
outline: 2px solid var(--o-encre);
outline-offset: -2px;
}
.calendrier__mois {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: var(--e2, 16px);
margin-block: var(--e3, 24px) var(--e4, 32px);
}
.prose table.mois {
width: 100%;
margin: 0;
padding: var(--e1, 8px);
border: 1px solid var(--o-trait);
border-radius: var(--o-rayon-grand);
border-collapse: separate;
border-spacing: 2px;
background: #fff;
font-size: 0.875rem;
}
.prose .mois caption {
padding: 4px 4px var(--e1, 8px);
color: var(--o-encre);
font-family: var(--police-titre, system-ui, sans-serif);
font-size: 1rem;
font-weight: 800;
}
.prose .mois th,
.prose .mois td {
padding: 0;
border: 0;
text-align: center;
}
.prose .mois th {
padding-block: 4px;
color: var(--o-doux);
font-size: 0.75rem;
font-weight: 600;
}
.mois td {
height: 30px;
border-radius: 6px;
font-variant-numeric: tabular-nums;
}
.mois td.jour--aujourdhui {
outline: 2px solid var(--o-encre);
outline-offset: -2px;
font-weight: 800;
}
.calendrier__annee[hidden] {
display: none;
} .aides__filtres {
display: flex;
flex-wrap: wrap;
gap: var(--e1, 8px);
margin-bottom: var(--e4, 32px);
}
.aides__theme + .aides__theme {
margin-top: var(--e5, 48px);
}
.aide {
margin-top: var(--e3, 24px);
padding: var(--e3, 24px);
border: 1px solid var(--o-trait);
border-radius: var(--o-rayon-grand);
background: #fff;
scroll-margin-top: 96px;
}
.aide__titre {
margin: 0;
}
.aide__organisme {
margin: 4px 0 var(--e2, 16px);
color: var(--o-doux);
font-size: 0.9375rem;
}
.aide__etiquette {
display: block;
margin: 0 0 4px;
color: var(--o-lagon);
font-size: 0.8125rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
} .aide__montant {
margin: 0 0 var(--e3, 24px);
padding: 12px 16px;
border-radius: var(--o-rayon);
background: #e2f0d9;
color: #285219;
font-weight: 700;
}
.aide__montant .aide__etiquette {
color: #285219;
}
.aide__colonnes {
display: grid;
gap: var(--e3, 24px);
}
@media (min-width: 720px) {
.aide__colonnes {
grid-template-columns: 1fr 1fr;
}
}
.aide__colonnes ul,
.aide__sources ul {
margin: 0;
padding-left: 1.25em;
}
.aide__colonnes p:not(.aide__etiquette) {
margin: 0;
}
.aide__demarche {
margin: var(--e3, 24px) 0 var(--e2, 16px);
}
.aide__lien {
margin: 0 0 var(--e3, 24px);
}
.aide__sources {
padding-top: var(--e2, 16px);
border-top: 1px solid var(--o-trait);
font-size: 0.875rem;
}
@media print {
.aides__theme[hidden] {
display: block !important;
}
.aide {
padding: 10px 14px;
break-inside: avoid;
}
.aide__lien {
display: none;
}
.aide__montant {
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
} .infographie {
margin: var(--e4, 32px) 0;
padding: var(--e3, 24px);
border: 1px solid var(--o-trait);
border-radius: var(--o-rayon-grand);
background: #fff;
}
.infographie__titre {
margin-bottom: var(--e3, 24px);
font-weight: 800;
}
.infographie__legende {
margin-top: var(--e3, 24px);
color: var(--o-doux);
font-size: 0.9375rem;
}
.prose .infographie ul,
.prose .infographie ol {
margin: 0;
padding: 0;
list-style: none;
}
.prose .infographie li + li {
margin-top: 0;
} .frise__etapes {
display: grid;
gap: var(--e3, 24px);
}
.frise__etape {
position: relative;
padding-left: 72px;
}
.frise__etape:not(:last-child)::before {
position: absolute;
top: 56px;
bottom: calc(-1 * var(--e3, 24px));
left: 27px;
width: 2px;
background: var(--o-trait);
content: "";
}
.frise__icone {
position: absolute;
top: 0;
left: 0;
display: grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--o-lagon);
color: #fff;
}
.frise__icone svg {
width: 28px;
height: 28px;
}
.frise__moment {
margin: 0;
font-weight: 800;
font-size: 1.0625rem;
}
.frise__nombre {
display: inline-block;
margin: 4px 0 var(--e1, 8px);
padding: 2px 10px;
border-radius: 999px;
background: var(--lagon-pale, #e3f0f1);
color: var(--o-lagon);
font-size: 0.8125rem;
font-weight: 700;
}
.prose .frise__taches li {
position: relative;
padding-left: 14px;
font-size: 0.875rem;
line-height: 1.45;
}
.prose .frise__taches li + li {
margin-top: 6px;
}
.frise__taches li::before {
position: absolute;
top: 0.6em;
left: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--o-lagon);
content: "";
}
@media (min-width: 960px) {
.frise__etapes {
grid-template-columns: repeat(4, 1fr);
}
.frise__etape {
padding-top: 72px;
padding-left: 0;
}
.frise__etape:not(:last-child)::before {
top: 27px;
right: calc(-1 * var(--e3, 24px));
bottom: auto;
left: 56px;
width: auto;
height: 2px;
}
} .barre {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px var(--e2, 16px);
align-items: center;
padding-block: 8px;
border-bottom: 1px solid var(--o-trait);
}
.barre__libelle {
font-size: 0.9375rem;
}
.barre__piste {
position: relative;
grid-column: 1 / -1;
grid-row: 2;
height: 14px;
border-radius: 999px;
background: #eef3f3;
}
.barre__piste::before {
position: absolute;
top: -4px;
bottom: -4px;
left: var(--zero, 0%);
width: 2px;
background: var(--encre, #14232b);
content: "";
}
.barre__valeur {
position: absolute;
top: 0;
bottom: 0;
left: var(--debut);
width: max(var(--taille), 4px);
border-radius: 999px;
}
.barre--defavorable .barre__valeur {
background: #c4441a;
}
.barre--avantageux .barre__valeur {
background: #3d7a2a;
}
@media (min-width: 720px) {
.barre {
grid-template-columns: 14rem 1fr 7rem;
}
.barre__piste {
grid-column: auto;
grid-row: auto;
}
.barre__chiffre {
text-align: right;
}
} .echelle {
display: grid;
gap: var(--e1, 8px);
}
.echelle__niveau {
display: grid;
gap: 2px;
padding: 12px 14px;
border-left: 8px solid var(--phase, var(--o-lagon));
border-radius: var(--o-rayon);
background: color-mix(in srgb, var(--phase, #0a5c66) 10%, #fff);
}
.echelle__nom {
font-weight: 800;
}
.echelle__mot {
color: var(--o-doux);
font-size: 0.875rem;
}
@media (min-width: 900px) {
.echelle {
grid-template-columns: repeat(5, 1fr);
}
.echelle__niveau {
border-top: 8px solid var(--phase, var(--o-lagon));
border-left: 0;
}
} .formule__etapes {
display: grid;
gap: var(--e1, 8px);
justify-items: center;
text-align: center;
}
.formule__case {
display: grid;
gap: 4px;
justify-items: center;
width: 100%;
max-width: 260px;
padding: var(--e2, 16px);
border: 2px solid var(--o-trait);
border-radius: var(--o-rayon-grand);
}
.formule__case--resultat {
border-color: #3d7a2a;
background: #e2f0d9;
}
.formule__montant {
font-size: 1.75rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.formule__texte {
color: var(--o-doux);
font-size: 0.875rem;
}
.formule__operation {
display: grid;
gap: 2px;
justify-items: center;
}
.formule__signe {
color: var(--o-lagon);
font-size: 1.25rem;
font-weight: 800;
}
@media (min-width: 960px) {
.formule__etapes {
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: center;
}
.formule__operation {
max-width: 120px;
}
}
@media print {
.infographie {
padding: 10px 14px;
break-inside: avoid;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
}