:root {
--lagon: #0a5c66;
--lagon-fonce: #07454d;
--lagon-pale: #e4f0f1;
--encre: #14232b;
--texte: #1c2a31;
--texte-doux: #4b5960;
--sable: #f6f1e8;
--trait: #ddd4c4;
--lave: #a63a14;
--blanc: #fff;
--pied-texte: #cfdade;
--rayon: 12px;
--rayon-grand: 20px;
--e1: 8px;
--e2: 16px;
--e3: 24px;
--e4: 32px;
--e5: 48px;
--section: 96px;
--police-texte: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--police-titre: "Nunito", "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--conteneur: 1200px;
--texte-max: 760px;
--marge: clamp(16px, 4vw, 32px);
--entete-h: 72px;
}
@media (max-width: 767px) {
:root {
--section: 64px;
}
} html:lang(hi) {
--police-texte: "Figtree", "Nirmala UI", "Noto Sans Devanagari", "Mangal", sans-serif;
--police-titre: "Nunito", "Nirmala UI", "Noto Sans Devanagari", "Mangal", sans-serif;
}
html:lang(ta) {
--police-texte: "Figtree", "Nirmala UI", "Noto Sans Tamil", "Latha", sans-serif;
--police-titre: "Nunito", "Nirmala UI", "Noto Sans Tamil", "Latha", sans-serif;
}
html:lang(zh) {
--police-texte: "Figtree", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
--police-titre: "Nunito", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
html:lang(hi) body,
html:lang(ta) body {
line-height: 1.75;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--entete-h) + var(--e2));
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
body {
margin: 0;
background: var(--blanc);
color: var(--texte);
font-family: var(--police-texte);
font-size: 1.125rem;
line-height: 1.6;
text-rendering: optimizeLegibility;
}
body.menu-ouvert {
overflow: hidden;
}
img,
svg,
video,
iframe {
display: block;
max-width: 100%;
}
img {
height: auto;
}
h1,
h2,
h3,
h4 {
margin: 0 0 var(--e2);
color: var(--encre);
font-family: var(--police-titre);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.01em;
}
p,
ul,
ol,
dl,
figure,
blockquote,
table {
margin: 0 0 var(--e2);
}
a {
color: var(--lagon);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
a:hover {
color: var(--lagon-fonce);
text-decoration-thickness: 2px;
}
:focus-visible {
outline: 3px solid var(--lave);
outline-offset: 2px;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
.ecran-lecteur {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.lien-evitement {
position: absolute;
top: var(--e1);
left: var(--e1);
z-index: 100;
padding: var(--e1) var(--e2);
background: var(--encre);
color: var(--blanc);
transform: translateY(-200%);
}
.lien-evitement:focus {
transform: none;
}
.conteneur {
width: 100%;
max-width: calc(var(--conteneur) + 2 * var(--marge));
margin-inline: auto;
padding-inline: var(--marge);
}
.conteneur--texte {
max-width: calc(var(--texte-max) + 2 * var(--marge));
}
.icone {
flex: none;
width: 1.25em;
height: 1.25em;
} .bouton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--e1);
min-height: 48px;
padding: 12px var(--e3);
border: 2px solid var(--lagon);
border-radius: 999px;
background: var(--lagon);
color: var(--blanc);
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.bouton:hover {
border-color: var(--lagon-fonce);
background: var(--lagon-fonce);
color: var(--blanc);
}
.bouton--contour {
background: transparent;
color: var(--lagon);
}
.bouton--contour:hover {
background: var(--lagon-pale);
color: var(--lagon-fonce);
}
.bouton--clair {
border-color: var(--blanc);
background: var(--blanc);
color: var(--lagon-fonce);
}
.bouton--clair:hover {
border-color: var(--sable);
background: var(--sable);
color: var(--lagon-fonce);
}
.bouton--contour-clair {
border-color: var(--blanc);
background: transparent;
color: var(--blanc);
}
.bouton--contour-clair:hover {
background: rgb(255 255 255 / 0.12);
color: var(--blanc);
}
.boutons {
display: flex;
flex-wrap: wrap;
gap: var(--e2);
margin-top: var(--e3);
}
.lien-fleche {
display: inline-flex;
align-items: center;
gap: var(--e1);
font-weight: 600;
}
.lien-fleche .icone {
width: 1.1em;
height: 1.1em;
}
.lien-sortant::after {
content: "";
display: inline-block;
width: 0.8em;
height: 0.8em;
margin-left: 0.2em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
} .entete {
position: sticky;
top: 0;
z-index: 50;
border-bottom: 1px solid var(--trait);
background: var(--blanc);
}
.admin-bar .entete {
top: 32px;
}
@media (max-width: 782px) {
.admin-bar .entete {
top: 0;
}
}
.entete__barre {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e3);
min-height: var(--entete-h);
}
.logo {
display: flex;
flex-direction: column;
color: var(--encre);
text-decoration: none;
}
.logo:hover {
color: var(--encre);
}
.logo__image {
display: block;
width: auto;
height: 40px;
}
.logo__slogan {
margin-top: 4px;
color: var(--texte-doux);
font-size: 0.8125rem;
line-height: 1.2;
} @media (max-width: 479px) {
html:lang(ta) .logo__slogan {
display: none;
}
}
.nav {
display: none;
}
.nav__liste {
display: flex;
gap: var(--e1);
margin: 0;
padding: 0;
list-style: none;
}
.nav__liste a {
display: block;
white-space: nowrap;
padding: var(--e1) 12px;
border-radius: var(--rayon);
color: var(--encre);
font-size: 1rem;
font-weight: 600;
text-decoration: none;
}
.nav__liste a:hover {
background: var(--lagon-pale);
color: var(--lagon-fonce);
}
.nav__liste a[aria-current] {
background: var(--lagon-pale);
color: var(--lagon-fonce);
}
.entete__burger {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 48px;
height: 48px;
padding: 0;
border: 1px solid var(--trait);
border-radius: var(--rayon);
background: var(--blanc);
color: var(--encre);
cursor: pointer;
}
.entete__burger-fermer,
.entete__burger[aria-expanded="true"] .entete__burger-ouvrir {
display: none;
}
.entete__burger[aria-expanded="true"] .entete__burger-fermer {
display: block;
}
.menu-mobile {
max-height: calc(100vh - var(--entete-h));
overflow-y: auto;
border-top: 1px solid var(--trait);
background: var(--blanc);
}
.menu-mobile__liste {
margin: 0;
padding: var(--e2) var(--marge) var(--e4);
list-style: none;
}
.menu-mobile__liste a {
display: block;
padding: var(--e2) 0;
border-bottom: 1px solid var(--trait);
color: var(--encre);
font-size: 1.25rem;
font-weight: 600;
text-decoration: none;
}
.menu-mobile__liste a[aria-current] {
color: var(--lagon);
} .langues {
position: relative;
margin-left: auto;
}
.langues__bouton {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 6px 14px;
border: 1px solid var(--trait);
border-radius: 999px;
background: var(--blanc);
color: var(--encre);
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
}
.langues__bouton .icone {
width: 1em;
height: 1em;
transform: rotate(90deg);
transition: transform 0.15s;
}
.langues__bouton[aria-expanded="true"] .icone {
transform: rotate(-90deg);
}
.langues__liste {
position: absolute;
top: calc(100% + var(--e1));
right: 0;
z-index: 60;
min-width: 180px;
margin: 0;
padding: var(--e1);
border: 1px solid var(--trait);
border-radius: var(--rayon);
background: var(--blanc);
box-shadow: 0 12px 32px rgb(20 35 43 / 0.15);
list-style: none;
}
.langues__liste a {
display: block;
padding: var(--e1) 12px;
border-radius: 8px;
color: var(--encre);
text-decoration: none;
}
.langues__liste a:hover {
background: var(--lagon-pale);
}
.langues__liste a[aria-current] {
color: var(--lagon);
font-weight: 700;
}
@media (min-width: 1024px) {
.nav {
display: block;
margin-left: auto;
}
.langues {
margin-left: 0;
}
.entete__burger,
.menu-mobile {
display: none !important;
}
} .page-entete {
padding-block: var(--e5) var(--e4);
border-bottom: 1px solid var(--trait);
background: var(--sable);
}
.page-entete__texte {
max-width: calc(var(--texte-max) + 2 * var(--marge));
}
.page-entete__grille {
display: grid;
align-items: center;
gap: var(--e4);
}
.page-entete__grille .page-entete__texte {
max-width: var(--texte-max);
}
.page-entete__illustration {
display: none;
width: 100%;
max-width: 340px;
height: auto;
justify-self: end;
}
@media (min-width: 900px) {
.page-entete--illustree .page-entete__grille {
grid-template-columns: minmax(0, 1fr) 340px;
}
.page-entete__illustration {
display: block;
}
}
.page-entete__titre {
font-size: clamp(2rem, 4.5vw, 3rem);
}
.page-entete__accroche {
color: var(--texte);
font-size: 1.25rem;
}
.fil-ariane ol {
display: flex;
flex-wrap: wrap;
gap: 4px var(--e1);
margin: 0 0 var(--e3);
padding: 0;
list-style: none;
font-size: 0.9375rem;
}
.fil-ariane li + li::before {
content: "/" / "";
margin-right: var(--e1);
color: var(--texte-doux);
}
.fil-ariane a {
color: var(--texte-doux);
}
.fil-ariane a[aria-current] {
color: var(--encre);
text-decoration: none;
}
.signature {
display: flex;
flex-wrap: wrap;
gap: 4px var(--e3);
margin: var(--e3) 0 0;
color: var(--texte-doux);
font-size: 0.9375rem;
} .section {
padding-block: var(--section);
}
.section--sable {
background: var(--sable);
}
.section--lagon {
background: var(--lagon);
color: var(--blanc);
}
.section--lagon .section__titre,
.section--lagon a:not(.bouton) {
color: var(--blanc);
}
.section--lagon :focus-visible {
outline-color: var(--blanc);
} .section--photo {
position: relative;
overflow: hidden;
isolation: isolate;
}
.section__fond {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
}
.section--photo::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: rgb(7 69 77 / 0.74);
} .prose .photo-contexte {
margin-block: var(--e4);
}
.prose .photo-contexte img {
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
border-radius: var(--rayon-grand);
object-fit: cover;
}
.prose .photo-contexte figcaption {
margin-top: var(--e1);
color: var(--texte-doux);
font-size: 0.8125rem;
}
.section__entete {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--e2);
margin-bottom: var(--e4);
}
.section__entete .section__titre {
margin: 0;
}
.section__titre {
margin-bottom: var(--e4);
font-size: clamp(1.75rem, 3.5vw, 2.25rem);
}
.cartes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--e3);
}
@media (min-width: 900px) {
.cartes--3 {
grid-template-columns: repeat(3, 1fr);
}
}
.carte {
position: relative;
display: flex;
flex-direction: column;
gap: var(--e2);
padding: var(--e3);
border: 1px solid var(--trait);
border-radius: var(--rayon-grand);
background: var(--blanc);
transition: border-color 0.15s, box-shadow 0.15s;
}
.carte:hover,
.carte:focus-within {
border-color: var(--lagon);
box-shadow: 0 6px 20px rgb(20 35 43 / 0.08);
}
.carte__icone {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--lagon-pale);
color: var(--lagon);
}
.carte__illustration {
display: block;
width: 100%;
max-height: 200px;
height: auto;
object-fit: contain;
}
.carte__titre {
margin: 0;
font-size: 1.375rem;
}
.carte__lien {
color: var(--encre);
text-decoration: none;
}
.carte__lien::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--rayon-grand);
}
.carte__lien:hover {
color: var(--lagon);
}
.carte__texte {
margin: 0;
color: var(--texte-doux);
font-size: 1rem;
} .accueil-haut {
padding-block: var(--e5) var(--section);
background: var(--sable);
}
.accueil-haut__grille {
display: grid;
gap: var(--e5);
}
@media (min-width: 1024px) {
.accueil-haut__grille {
grid-template-columns: 5fr 6fr;
align-items: start;
padding-top: var(--e5);
}
}
.accueil-haut__titre {
font-size: clamp(2.5rem, 6vw, 4rem);
line-height: 1.05;
}
.accueil-haut__accroche {
max-width: 32ch;
font-size: 1.375rem;
}
.accueil-haut__illustration {
display: block;
width: 100%;
max-width: 480px;
height: auto;
margin-top: var(--e4);
}
@media (max-width: 599px) {
.accueil-haut__illustration {
max-width: 260px;
margin-top: var(--e3);
}
} .prose .encadre-resume {
margin-top: var(--e5);
padding: var(--e3) var(--e3) var(--e2);
border-left: 6px solid var(--lagon);
border-radius: var(--rayon-grand);
background: var(--lagon-pale);
}
.prose .encadre-resume > h2 {
margin-top: 0;
font-size: 1.375rem;
}
@media (min-width: 768px) {
.prose .encadre-resume {
padding: var(--e4) var(--e4) var(--e3);
}
} .accueil-haut__photo {
margin: var(--e4) 0 0;
}
.accueil-haut__photo img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: var(--rayon-grand);
box-shadow: 0 16px 40px rgb(20 35 43 / 0.16);
}
.accueil-haut__photo figcaption {
margin-top: var(--e1);
color: var(--texte-doux);
font-size: 0.8125rem;
}
.etapes {
padding: var(--e3);
border: 1px solid var(--trait);
border-radius: var(--rayon-grand);
background: var(--blanc);
}
@media (min-width: 768px) {
.etapes {
padding: var(--e4);
}
}
.etapes__titre {
font-size: 1.5rem;
}
.etapes__liste {
margin: 0;
padding: 0;
list-style: none;
counter-reset: etape;
}
.etapes__element {
position: relative;
padding: var(--e2) 0 var(--e2) 56px;
border-top: 1px solid var(--trait);
counter-increment: etape;
}
.etapes__element::before {
content: counter(etape);
position: absolute;
top: var(--e2);
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--lagon);
color: var(--blanc);
font-family: var(--police-titre);
font-weight: 800;
}
.etapes__element p {
margin-bottom: var(--e1);
}
.chiffres {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--e3);
margin: 0;
padding: 0;
list-style: none;
}
.chiffres__element {
padding-top: var(--e2);
border-top: 3px solid var(--lagon);
}
.chiffres__valeur {
margin-bottom: var(--e1);
color: var(--lagon);
font-family: var(--police-titre);
font-size: 2.5rem;
font-weight: 800;
line-height: 1.1;
}
.chiffres__texte {
margin-bottom: var(--e1);
}
.chiffres__source {
margin: 0;
font-size: 0.875rem;
}
.chiffres__source a {
color: var(--texte-doux);
} .prose > :first-child {
margin-top: 0;
}
.prose h2 {
margin-top: var(--e5);
font-size: clamp(1.625rem, 3vw, 2rem);
}
.prose h3 {
margin-top: var(--e4);
font-size: 1.375rem;
}
.prose ul,
.prose ol {
padding-left: 1.25em;
}
.prose li + li {
margin-top: var(--e1);
}
.prose li::marker {
color: var(--lagon);
}
.prose blockquote {
margin-inline: 0;
padding: var(--e2) var(--e3);
border-left: 4px solid var(--lagon);
background: var(--sable);
}
.prose blockquote p {
margin-bottom: var(--e1);
font-style: italic;
}
.prose cite {
color: var(--texte-doux);
font-size: 0.9375rem;
font-style: normal;
} .prose .wp-block-table {
overflow-x: auto;
margin-inline: 0;
border: 1px solid var(--trait);
border-radius: var(--rayon-grand);
background: var(--blanc);
}
.prose table {
width: 100%;
margin: 0;
border-collapse: collapse;
font-size: 1rem;
}
.prose th,
.prose td {
padding: 12px var(--e2);
border-bottom: 1px solid var(--trait);
text-align: left;
vertical-align: top;
}
.prose tbody tr:last-child th,
.prose tbody tr:last-child td {
border-bottom: 0;
}
.prose table:not(.mois) thead th {
border-bottom: 0;
background: var(--lagon);
color: var(--blanc);
font-weight: 700;
}
.prose tbody th {
color: var(--encre);
font-weight: 700;
}
.prose table:not(.mois) tbody tr:nth-child(even) th,
.prose table:not(.mois) tbody tr:nth-child(even) td {
background: var(--sable);
}
.prose table:not(.mois) tbody tr:hover th,
.prose table:not(.mois) tbody tr:hover td {
background: var(--lagon-pale);
} .valeur { position: relative;
display: inline;
padding: 2px 10px;
border-radius: 999px;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1.9;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.valeur__fleche {
margin-right: 4px;
font-family: system-ui, sans-serif;
}
.valeur--defavorable {
background: #fbe4dc;
color: #8f2a0c;
}
.valeur--avantageux {
background: #e2f0d9;
color: #285219;
}
.valeur--neutre {
background: var(--lagon-pale);
color: var(--encre);
}
@media print {
.valeur {
border: 1px solid currentColor;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
} .sortie {
width: min(480px, calc(100vw - 2 * var(--marge)));
padding: var(--e4);
border: 0;
border-radius: var(--rayon-grand);
box-shadow: 0 24px 64px rgb(20 35 43 / 0.25);
color: var(--texte);
}
.sortie::backdrop {
background: rgb(20 35 43 / 0.55);
}
.sortie__titre {
font-size: 1.5rem;
}
.sortie strong {
overflow-wrap: anywhere;
}
.encadre,
.prose .encadre {
margin-block: var(--e4);
padding: var(--e3);
border-radius: var(--rayon-grand);
background: var(--lagon-pale);
}
.sommaire {
margin-bottom: var(--e5);
padding: var(--e3);
border-left: 4px solid var(--lagon);
background: var(--sable);
}
.sommaire__titre {
margin-bottom: var(--e1);
font-weight: 700;
}
.sommaire ol {
margin: 0;
padding-left: 1.25em;
}
.sommaire li + li {
margin-top: 4px;
} .pied {
background: var(--encre);
color: var(--pied-texte);
font-size: 1rem;
}
.pied a {
color: var(--blanc);
}
.pied :focus-visible {
outline-color: var(--blanc);
}
.pied__grille {
display: grid;
gap: var(--e5) var(--e4);
padding-block: var(--e5);
}
@media (min-width: 768px) {
.pied__grille {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.pied__grille {
grid-template-columns: 2fr 1.4fr 1.4fr 1fr;
}
}
.pied__logo {
margin: 0 0 var(--e2);
}
.pied__logo-image {
display: block;
width: auto;
height: 48px;
}
.pied__texte {
max-width: 40ch;
}
.pied__titre {
margin-bottom: var(--e2);
color: var(--blanc);
font-family: var(--police-texte);
font-size: 1rem;
font-weight: 700;
}
.pied ul {
margin: 0;
padding: 0;
list-style: none;
}
.pied li + li {
margin-top: var(--e1);
}
.pied__bas {
border-top: 1px solid rgb(255 255 255 / 0.15);
font-size: 0.9375rem;
}
.pied__bas-contenu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--e1) var(--e3);
padding-block: var(--e3);
}
.pied__bas p {
margin: 0;
}
.pied__credit,
.pied__credit a {
color: var(--pied-texte);
font-size: 0.875rem;
} .impression-entete {
display: none;
} .cookies {
position: fixed;
right: var(--marge);
bottom: var(--marge);
left: var(--marge);
z-index: 80;
display: grid;
gap: var(--e2);
max-width: 720px;
margin-inline: auto;
padding: var(--e3);
border: 1px solid var(--trait);
border-radius: var(--rayon-grand);
background: var(--blanc);
box-shadow: 0 16px 48px rgb(20 35 43 / 0.22);
color: var(--texte);
font-size: 0.9375rem;
}
.cookies[hidden] {
display: none;
}
.cookies__titre {
margin: 0 0 var(--e1);
color: var(--encre);
font-family: var(--police-titre);
font-size: 1.0625rem;
font-weight: 800;
}
.cookies__texte p:last-child {
margin: 0;
}
.cookies__boutons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--e1);
}
.cookies__boutons .bouton {
justify-content: center;
width: 100%;
}
@media (min-width: 768px) {
.cookies {
grid-template-columns: 1fr auto;
align-items: center;
}
.cookies__boutons {
grid-template-columns: auto auto;
}
}
.pied__cookies {
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
text-decoration: underline;
cursor: pointer;
} .accessibilite {
position: static;
}
.accessibilite__bouton {
display: none;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--trait);
border-radius: 50%;
background: var(--blanc);
color: var(--encre);
cursor: pointer;
}
.accessibilite__bouton[aria-expanded="true"],
.accessibilite__bouton:hover {
border-color: var(--lagon);
color: var(--lagon);
}
.accessibilite__panneau {
position: absolute;
top: calc(100% + var(--e1));
right: var(--marge);
left: var(--marge);
z-index: 70;
padding: var(--e3);
border: 1px solid var(--trait);
border-radius: var(--rayon-grand);
background: var(--blanc);
box-shadow: 0 16px 40px rgb(20 35 43 / 0.18);
}
.accessibilite__titre {
margin: 0 0 var(--e2);
color: var(--encre);
font-family: var(--police-titre);
font-size: 1.125rem;
font-weight: 800;
}
.accessibilite__libelle {
margin: 0 0 var(--e1);
color: var(--texte-doux);
font-size: 0.875rem;
font-weight: 700;
}
.accessibilite__groupe + .accessibilite__groupe {
margin-top: var(--e2);
padding-top: var(--e2);
border-top: 1px solid var(--trait);
}
.accessibilite__choix {
display: flex;
flex-wrap: wrap;
gap: var(--e1);
}
.accessibilite__groupe:not([role="group"]) {
display: grid;
gap: var(--e1);
}
.accessibilite__option {
min-height: 44px;
padding: 8px 16px;
border: 2px solid var(--lagon);
border-radius: 999px;
background: var(--blanc);
color: var(--lagon);
font: inherit;
font-size: 0.9375rem;
font-weight: 600;
text-align: left;
cursor: pointer;
}
.accessibilite__option--bascule::before {
display: inline-block;
width: 1.1em;
margin-right: 8px;
content: "○";
}
.accessibilite__option[aria-pressed="true"] {
background: var(--lagon);
color: var(--blanc);
}
.accessibilite__option--bascule[aria-pressed="true"]::before {
content: "✓";
}
.accessibilite__pied {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--e1) var(--e2);
margin: var(--e3) 0 0;
font-size: 0.9375rem;
}
.accessibilite__reinitialiser {
padding: 0;
border: 0;
background: none;
color: var(--lagon);
font: inherit;
text-decoration: underline;
cursor: pointer;
}
.menu-mobile__accessibilite {
display: flex;
align-items: center;
gap: var(--e1);
width: calc(100% - 2 * var(--marge));
min-height: 48px;
margin: 0 var(--marge) var(--e4);
padding: 10px 16px;
border: 1px solid var(--trait);
border-radius: 999px;
background: var(--blanc);
color: var(--encre);
font: inherit;
font-weight: 600;
cursor: pointer;
}
@media (min-width: 1024px) {
.accessibilite {
position: relative;
}
.accessibilite__bouton {
display: grid;
}
.accessibilite__panneau {
right: 0;
left: auto;
width: 340px;
}
} html[data-taille="1"] {
font-size: 112.5%;
}
html[data-taille="2"] {
font-size: 125%;
} @media (min-width: 1024px) and (max-width: 1439px) {
html[data-taille] .nav {
display: none;
}
html[data-taille] .entete__burger {
display: inline-flex !important;
}
html[data-taille] .menu-mobile:not([hidden]) {
display: block !important;
}
html[data-taille] .entete__barre {
justify-content: flex-start;
}
html[data-taille] .langues {
margin-left: auto;
}
}
@media (min-width: 1440px) and (max-width: 1679px) {
html[data-taille="2"] .nav {
display: none;
}
html[data-taille="2"] .entete__burger {
display: inline-flex !important;
}
html[data-taille="2"] .menu-mobile:not([hidden]) {
display: block !important;
}
html[data-taille="2"] .entete__barre {
justify-content: flex-start;
}
html[data-taille="2"] .langues {
margin-left: auto;
}
} html.a11y-contraste {
--texte: #000;
--texte-doux: #1c2a31;
--encre: #000;
--lagon: #03333a;
--lagon-fonce: #022227;
--trait: #4b5960;
--sable: #fff;
--lagon-pale: #fff;
}
html.a11y-contraste :is(main, .pied) a {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
html.a11y-contraste :focus-visible {
outline-width: 4px;
} html.a11y-espacement body {
letter-spacing: 0.12em;
word-spacing: 0.16em;
}
html.a11y-espacement :is(p, li, dd, td, th) {
line-height: 1.9;
}
html.a11y-espacement .prose p {
margin-bottom: 2em;
} html.a11y-police {
--police-texte: Verdana, Tahoma, "Nirmala UI", "Microsoft YaHei", sans-serif;
--police-titre: Verdana, Tahoma, "Nirmala UI", "Microsoft YaHei", sans-serif;
} html.a11y-animations {
scroll-behavior: auto;
}
html.a11y-animations *,
html.a11y-animations *::before,
html.a11y-animations *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
@media print {
.accessibilite,
.menu-mobile__accessibilite {
display: none !important;
}
}
@media print {
@page {
margin: 14mm 12mm 16mm;
}
body {
background: #fff;
color: #000;
font-size: 11pt;
}
.entete,
.pied,
.lien-evitement,
.sommaire,
.fil-ariane,
.signature,
.page-entete__illustration,
.photo-contexte,
.section--sable,
.sortie,
[data-impression-masquer] {
display: none !important;
}
.impression-entete {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 2px solid var(--lagon);
font-size: 9pt;
}
.impression-entete__logo {
width: auto;
height: 36px;
}
.page-entete,
.section {
padding: 0;
border: 0;
background: none;
}
.page-entete__titre {
font-size: 20pt;
}
.page-entete__accroche {
font-size: 12pt;
}
a {
color: #000;
text-decoration: none;
}
.lien-sortant::after {
display: none;
}
h2,
h3 {
break-after: avoid;
}
.cases__element,
.phase,
.prose li,
.prose table tr {
break-inside: avoid;
}
.cases__case {
width: 16px;
height: 16px;
}
.phase {
padding: 10px 14px;
}
.outil__source {
font-size: 8pt;
}
}