:root {
color-scheme: light dark;
--couleur-fond: #FFFFFF;
--couleur-fond-doux: #F5F3FF;
--couleur-surface: #EDE9FE;
--couleur-titre: #1F1B4D;
--couleur-texte: #2B2840;
--couleur-texte-discret: #5B5675;
--couleur-lien: #6D28D9;
--couleur-lien-survol: #3730A3;
--couleur-accent: #6D28D9;
--couleur-sur-accent: #FFFFFF;
--couleur-bordure: #DDD6FE;
--couleur-bordure-ui: #7C7799;
--couleur-decor: #C4B5FD;
--couleur-focus: #6D28D9;
--couleur-pied: #1F1B4D;
--couleur-sur-pied: #EDE9FE;
--couleur-focus-pied: #C4B5FD;
--ruban-bleu: #3A7DE2;
--ruban-indigo: #635ADE;
--ruban-violet: #945CE7;
--degrade-ruban: linear-gradient(90deg, var(--ruban-bleu), var(--ruban-indigo) 50%, var(--ruban-violet));
--offre-fort: #1D57B5;
--offre-ruban: var(--ruban-bleu);
--offre-pale: #E8F0FD;
--visibilite-fort: #3730A3;
--visibilite-ruban: var(--ruban-indigo);
--visibilite-pale: #ECEBFC;
--decision-fort: #6D28D9;
--decision-ruban: var(--ruban-violet);
--decision-pale: #F1EAFD;
--rubrique-fort: var(--couleur-accent);
--rubrique-ruban: var(--ruban-violet);
--rubrique-pale: var(--couleur-surface);
--police-titre: "Newsreader", "Newsreader repli", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
--police-texte: "Inter", "Inter repli", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--taille-xs: 0.875rem;
--taille-s: clamp(0.9375rem, 0.913rem + 0.1087vw, 1rem);
--taille-corps: clamp(1.0625rem, 1.038rem + 0.1087vw, 1.125rem);
--taille-chapeau: clamp(1.1875rem, 1.1386rem + 0.2174vw, 1.3125rem);
--taille-h3: clamp(1.1875rem, 1.1141rem + 0.3261vw, 1.375rem);
--taille-h2: clamp(1.5rem, 1.3043rem + 0.8696vw, 2rem);
--taille-h1: clamp(1.875rem, 1.5326rem + 1.5217vw, 2.75rem);
--taille-display: clamp(2.375rem, 1.6413rem + 3.2609vw, 4.25rem);
--interligne-texte: 1.6;
--interligne-chapeau: 1.5;
--interligne-titre: 1.15;
--interligne-display: 1.05;
--approche-titre: -0.01em;
--approche-display: -0.02em;
--graisse-texte: 400;
--graisse-forte: 600;
--graisse-titre: 700;
--largeur-lecture: 42rem;
--largeur-large: 72rem;
--largeur-max: 80rem;
--gouttiere: clamp(1rem, 4vw, 2.5rem);
--espace-1: 0.25rem;
--espace-2: 0.5rem;
--espace-3: 0.75rem;
--espace-4: 1rem;
--espace-5: 1.5rem;
--espace-6: 2rem;
--espace-7: 3rem;
--espace-8: 4rem;
--espace-9: 6rem;
--espace-section: clamp(3rem, 1.8261rem + 5.2174vw, 6rem);
--rayon-s: 6px;
--rayon-m: 12px;
--rayon-l: 20px;
--rayon-pilule: 999px;
--ombre-douce: 0 1px 2px rgb(31 27 77 / 0.06), 0 8px 24px -8px rgb(55 48 163 / 0.16);
--ombre-survol: 0 2px 4px rgb(31 27 77 / 0.08), 0 16px 32px -12px rgb(55 48 163 / 0.24);
--focus-epaisseur: 3px;
--focus-decalage: 2px;
--duree-courte: 150ms;
--duree-moyenne: 300ms;
--courbe: cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-rubrique="offre"] {
--rubrique-fort: var(--offre-fort);
--rubrique-ruban: var(--offre-ruban);
--rubrique-pale: var(--offre-pale);
}
[data-rubrique="visibilite"] {
--rubrique-fort: var(--visibilite-fort);
--rubrique-ruban: var(--visibilite-ruban);
--rubrique-pale: var(--visibilite-pale);
}
[data-rubrique="decision"] {
--rubrique-fort: var(--decision-fort);
--rubrique-ruban: var(--decision-ruban);
--rubrique-pale: var(--decision-pale);
}
@media (prefers-color-scheme: dark) {
:root {
--couleur-fond: #13112E;
--couleur-fond-doux: #1C1A3D;
--couleur-surface: #262350;
--couleur-titre: #F5F3FF;
--couleur-texte: #E4E0F5;
--couleur-texte-discret: #A9A3C7;
--couleur-lien: #C4B5FD;
--couleur-lien-survol: #DDD6FE;
--couleur-accent: #C4B5FD;
--couleur-sur-accent: #13112E;
--couleur-bordure: #2E2A5A;
--couleur-bordure-ui: #8A85A8;
--couleur-decor: #4C4690;
--couleur-focus: #C4B5FD;
--couleur-pied: #0D0B24;
--offre-fort: #93C5FD;       --offre-pale: #172246;
--visibilite-fort: #A5B4FC;  --visibilite-pale: #1E1C47;
--decision-fort: #C4B5FD;    --decision-pale: #251C4A;
--ombre-douce: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -8px rgb(0 0 0 / 0.5);
--ombre-survol: 0 2px 4px rgb(0 0 0 / 0.35), 0 16px 32px -12px rgb(0 0 0 / 0.6);
}
}
@media (prefers-reduced-motion: reduce) {
:root {
--duree-courte: 0ms;
--duree-moyenne: 0ms;
}
}
@font-face {
font-family: "Newsreader";
src: url("/polices/newsreader-700.d742bb5289.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Newsreader";
src: url("/polices/newsreader-italique-500.e060ecc095.woff2") format("woff2");
font-weight: 500;
font-style: italic;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
src: url("/polices/inter-variable.3100e775e8.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
src: url("/polices/inter-italique-400.7ea9d2f127.woff2") format("woff2");
font-weight: 400;
font-style: italic;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "Newsreader repli"; src: local("Georgia Bold"), local("Georgia-Bold"), local("Georgia"); font-weight: 700; font-style: normal; size-adjust: 93.93%; ascent-override: 78.25%; descent-override: 28.21%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader repli"; src: local("Georgia Italic"), local("Georgia-Italic"); font-weight: 500; font-style: italic; size-adjust: 94.59%; ascent-override: 77.70%; descent-override: 28.01%; line-gap-override: 0%; }
@font-face { font-family: "Inter repli"; src: local("Arial"), local("ArialMT"); font-style: normal; size-adjust: 106.89%; ascent-override: 90.63%; descent-override: 22.57%; line-gap-override: 0%; }
@font-face { font-family: "Inter repli"; src: local("Arial Italic"), local("Arial-ItalicMT"); font-style: italic; size-adjust: 107.52%; ascent-override: 90.10%; descent-override: 22.43%; line-gap-override: 0%; }
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: var(--espace-5);
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
margin: 0;
background: var(--couleur-fond);
color: var(--couleur-texte);
font-family: var(--police-texte);
font-size: var(--taille-corps);
font-weight: var(--graisse-texte);
line-height: var(--interligne-texte);
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { color: var(--couleur-titre); text-wrap: balance; }
p, li { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
h1, .titre-1 {
font-family: var(--police-titre);
font-weight: var(--graisse-titre);
font-size: var(--taille-h1);
line-height: var(--interligne-titre);
letter-spacing: var(--approche-titre);
}
h2, .titre-2 {
font-family: var(--police-titre);
font-weight: var(--graisse-titre);
font-size: var(--taille-h2);
line-height: var(--interligne-titre);
letter-spacing: var(--approche-titre);
}
h3, .titre-3 {
font-family: var(--police-texte);
font-weight: var(--graisse-forte);
font-size: var(--taille-h3);
line-height: 1.3;
}
h4 {
font-size: var(--taille-corps);
font-weight: var(--graisse-forte);
line-height: 1.4;
}
.display {
font-family: var(--police-titre);
font-weight: var(--graisse-titre);
font-size: var(--taille-display);
line-height: var(--interligne-display);
letter-spacing: var(--approche-display);
color: var(--couleur-titre);
}
h1 em, .display em {
font-style: italic;
font-weight: 500;
color: var(--couleur-accent);
}
.chapeau {
font-size: var(--taille-chapeau);
line-height: var(--interligne-chapeau);
color: var(--couleur-texte);
}
a {
color: var(--couleur-lien);
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
a:hover {
color: var(--couleur-lien-survol);
text-decoration-thickness: 2px;
}
strong, b { font-weight: var(--graisse-forte); }
abbr[title] { text-decoration: underline dotted; text-underline-offset: 0.2em; }
small { font-size: var(--taille-xs); }
::selection { background: var(--couleur-surface); color: var(--couleur-titre); }
:focus-visible {
outline: var(--focus-epaisseur) solid var(--couleur-focus);
outline-offset: var(--focus-decalage);
border-radius: 2px;
}
.visuellement-masque {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.avis-fichier { display: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.picto {
width: 1.25em; height: 1.25em;
flex-shrink: 0;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: -0.2em;
}
.pastille {
display: inline-grid; place-items: center;
width: 3rem; height: 3rem;
border-radius: 50%;
background: var(--couleur-fond);
color: var(--rubrique-fort);
box-shadow: 0 0 0 5px color-mix(in srgb, var(--rubrique-ruban) 16%, transparent);
}
.pastille .picto { width: 1.5rem; height: 1.5rem; }
.pastille--grande { width: 4rem; height: 4rem; }
.pastille--grande .picto { width: 2rem; height: 2rem; }
.conteneur {
width: min(100% - 2 * var(--gouttiere), var(--largeur-large));
margin-inline: auto;
}
.flux {
--marge-large: calc((var(--largeur-large) - var(--largeur-lecture)) / 2);
display: grid;
grid-template-columns:
[plein-start] minmax(var(--gouttiere), 1fr)
[large-start] minmax(0, var(--marge-large))
[lecture-start] min(var(--largeur-lecture), 100% - 2 * var(--gouttiere))
[lecture-end] minmax(0, var(--marge-large))
[large-end] minmax(var(--gouttiere), 1fr)
[plein-end];
}
.flux > * { grid-column: lecture; }
.flux > .large { grid-column: large; }
.flux > .plein { grid-column: plein; }
.flux > * + * { margin-top: var(--espace-5); }
.flux > h2 { margin-top: var(--espace-8); }
.flux > h3 { margin-top: var(--espace-6); }
.flux > h2 + *, .flux > h3 + * { margin-top: var(--espace-4); }
.flux > .large, .flux > .plein { margin-top: var(--espace-7); }
.flux > .large + *, .flux > .plein + * { margin-top: var(--espace-7); }
.flux ul, .flux ol { padding-left: 1.25em; }
.flux li + li { margin-top: var(--espace-2); }
.flux li::marker { color: var(--rubrique-fort); }
.pile > * + * { margin-top: var(--espace-4); }
.lien-evitement {
position: absolute; left: var(--espace-4); top: var(--espace-4); z-index: 100;
padding: var(--espace-3) var(--espace-5);
border-radius: var(--rayon-pilule);
background: var(--couleur-titre);
color: var(--couleur-fond);
font-weight: var(--graisse-forte);
text-decoration: none;
transform: translateY(-200%);
}
.lien-evitement:focus { transform: none; }
.entete {
border-bottom: 1px solid var(--couleur-bordure);
background: var(--couleur-fond);
}
.entete-barre {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: var(--espace-3) var(--espace-6);
min-height: 4.5rem;
padding-block: var(--espace-3);
}
.logotype {
font-family: var(--police-titre);
font-weight: var(--graisse-titre);
font-size: clamp(1.0625rem, 0.95rem + 0.9vw, 1.375rem);
line-height: 1;
letter-spacing: var(--approche-titre);
color: var(--couleur-titre);
text-decoration: none;
white-space: nowrap;
}
.logotype:hover { color: var(--couleur-titre); }
.logotype-accent { font-style: italic; font-weight: 500; color: var(--couleur-accent); }
.logotype-tld { color: var(--couleur-texte-discret); font-weight: 500; }
.menu ul {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: var(--espace-1) var(--espace-5);
}
.menu a {
display: inline-flex; align-items: center; gap: var(--espace-2);
min-height: 2.75rem;
font-size: var(--taille-s);
font-weight: var(--graisse-forte);
color: var(--couleur-titre);
text-decoration: none;
border-bottom: 3px solid transparent;
padding-top: 3px;
}
.menu a::before {
content: "";
width: 0.5rem; height: 0.5rem; border-radius: 50%;
background: var(--rubrique-ruban);
}
.menu a:hover { border-bottom-color: color-mix(in srgb, var(--rubrique-ruban) 45%, transparent); color: var(--rubrique-fort); }
.menu a[aria-current] { border-bottom-color: var(--rubrique-ruban); }
.menu-bouton {
display: none;
align-items: center; gap: var(--espace-2);
min-height: 2.75rem;
padding: 0 var(--espace-3);
border: 1px solid var(--couleur-bordure-ui);
border-radius: var(--rayon-pilule);
background: var(--couleur-fond);
color: var(--couleur-titre);
font: inherit;
font-size: var(--taille-s);
font-weight: var(--graisse-forte);
cursor: pointer;
}
.menu-bouton .picto-fermer { display: none; }
.menu-bouton[aria-expanded="true"] .picto-ouvrir { display: none; }
.menu-bouton[aria-expanded="true"] .picto-fermer { display: inline; }
@media (max-width: 60rem) {
.menu { flex-basis: 100%; }
.menu ul { flex-direction: column; gap: 0; }
.menu li + li { border-top: 1px solid var(--couleur-bordure); }
.menu a { width: 100%; min-height: 3rem; border-bottom: 0; padding-top: 0; font-size: var(--taille-corps); }
.menu a[aria-current] { color: var(--rubrique-fort); }
}
@media (max-width: 60rem) and (scripting: enabled) {
.menu-bouton { display: inline-flex; }
.menu:not(.est-ouvert) { display: none; }
.menu.est-ouvert { padding-bottom: var(--espace-2); }
}
.fil-ariane { font-size: var(--taille-s); color: var(--couleur-texte-discret); }
.fil-ariane ol {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--espace-1) var(--espace-2);
}
.fil-ariane li { display: inline-flex; align-items: baseline; gap: var(--espace-2); }
.fil-ariane li + li::before { content: "›" / ""; color: var(--couleur-texte-discret); }
.fil-ariane a { color: var(--couleur-texte-discret); }
.fil-ariane a:hover { color: var(--couleur-lien-survol); }
.fil-ariane [aria-current="page"] { color: var(--couleur-texte); }
.tete-page { padding-block: var(--espace-6) var(--espace-2); }
.tete-page :is(h1, .titre-1) { margin-top: var(--espace-5); }
.tete-page :is(h1, .titre-1)::before {
content: "";
display: block;
width: 3rem; height: 4px;
margin-bottom: var(--espace-4);
border-radius: var(--rayon-pilule);
background: var(--rubrique-ruban);
}
.tete-page .chapeau { margin-top: var(--espace-5); }
.tete-page .meta { margin-top: var(--espace-4); }
.bandeau-rubrique + .flux { margin-top: var(--espace-7); }
.bandeau-rubrique {
background:
radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--rubrique-ruban) 18%, transparent), transparent 70%),
var(--rubrique-pale);
padding-block: var(--espace-6) var(--espace-8);
}
.meta, .mise-a-jour { font-size: var(--taille-s); color: var(--couleur-texte-discret); }
.sommaire {
border: 1px solid var(--couleur-bordure);
border-radius: var(--rayon-m);
background: var(--couleur-fond);
}
.sommaire summary {
display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3);
padding: var(--espace-3) var(--espace-4);
font-size: var(--taille-s); font-weight: var(--graisse-forte);
color: var(--couleur-titre);
cursor: pointer;
list-style: none;
}
.sommaire summary::-webkit-details-marker { display: none; }
.sommaire ol {
margin: 0; padding: 0 var(--espace-4) var(--espace-4) 2.5em;
font-size: var(--taille-s);
}
.sommaire li + li { margin-top: var(--espace-2); }
.chevron {
width: 0.75rem; height: 0.75rem; flex-shrink: 0;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: translateY(-25%) rotate(45deg);
transition: transform var(--duree-courte) var(--courbe);
}
details[open] > summary .chevron { transform: translateY(25%) rotate(-135deg); }
.exemple {
padding: var(--espace-5) var(--espace-5) var(--espace-6);
border-radius: var(--rayon-m);
background: var(--couleur-fond-doux);
border-left: 4px solid var(--rubrique-ruban);
}
.exemple > * + * { margin-top: var(--espace-4); }
.etiquette-exemple {
display: inline-flex; align-items: center; gap: var(--espace-2);
font-size: var(--taille-xs); font-weight: var(--graisse-forte);
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--rubrique-fort);
}
.exemple h2 { font-size: calc(var(--taille-h2) * 0.85); }
.grille-cartes {
list-style: none; margin: 0; padding: 0;
display: grid; gap: var(--espace-5);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.flux .grille-cartes { padding: 0; }
.flux .grille-cartes li + li { margin-top: 0; }
.carte {
position: relative;
display: flex; flex-direction: column; gap: var(--espace-3);
height: 100%;
padding: var(--espace-6) var(--espace-5) var(--espace-5);
border: 1px solid var(--couleur-bordure);
border-radius: var(--rayon-m);
background: var(--couleur-fond);
overflow: hidden;
transition: box-shadow var(--duree-courte) var(--courbe), transform var(--duree-courte) var(--courbe), border-color var(--duree-courte) var(--courbe);
}
.carte::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
background: var(--rubrique-ruban);
}
.carte:hover { box-shadow: var(--ombre-survol); transform: translateY(-2px); border-color: transparent; }
.carte:focus-within { box-shadow: var(--ombre-survol); }
.carte-surtitre {
font-size: var(--taille-xs); font-weight: var(--graisse-forte);
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--rubrique-fort);
}
.carte-accroche {
font-family: var(--police-titre);
font-style: italic; font-weight: 500;
font-size: 1.25rem; line-height: 1.3;
color: var(--couleur-titre);
}
.carte-titre { font-size: 1.125rem; line-height: 1.35; }
.carte-titre a { color: var(--couleur-titre); text-decoration: none; }
.carte-titre a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rayon-m); }
.carte-titre a:focus-visible { outline: none; }
.carte:has(.carte-titre a:focus-visible) { outline: var(--focus-epaisseur) solid var(--couleur-focus); outline-offset: var(--focus-decalage); }
.carte-texte { font-size: var(--taille-s); color: var(--couleur-texte); }
.carte-suite {
margin-top: auto; padding-top: var(--espace-2);
display: inline-flex; align-items: center; gap: var(--espace-2);
font-size: var(--taille-s); font-weight: var(--graisse-forte);
color: var(--rubrique-fort);
}
.carte:hover .carte-suite .picto { transform: translateX(3px); }
.carte-suite .picto { transition: transform var(--duree-courte) var(--courbe); }
.grille-cartes--trois { grid-template-columns: 1fr; }
@media (min-width: 46rem) {
.grille-cartes--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-4); }
.grille-cartes--trois .carte { padding-inline: var(--espace-4); }
}
.carte--rubrique { background: var(--rubrique-pale); border-color: transparent; padding-top: var(--espace-6); }
.carte--rubrique .carte-titre { font-family: var(--police-titre); font-size: 1.625rem; line-height: 1.15; }
.encadre-dia {
padding: var(--espace-6) clamp(var(--espace-4), 3vw, var(--espace-6));
border-radius: var(--rayon-l);
background: var(--couleur-surface);
}
.encadre-dia-titre {
display: flex; align-items: center; gap: var(--espace-4);
font-size: 1.5rem;
}
.encadre-dia-titre::after {
content: ""; flex: 1; height: 3px; max-width: 8rem;
border-radius: var(--rayon-pilule);
background: var(--degrade-ruban);
}
.encadre-dia-parties {
margin-top: var(--espace-5);
display: grid; gap: var(--espace-4);
grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
.encadre-dia-parties { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--espace-6); }
.dia-partie--decision { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
.encadre-dia-parties { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--espace-5); }
.dia-partie--decision { grid-column: auto; }
}
.dia-partie {
padding: var(--espace-4) 0;
border-radius: var(--rayon-m);
}
.dia-partie > * + * { margin-top: var(--espace-3); }
.dia-partie h3 { font-size: 1.0625rem; display: flex; align-items: center; gap: var(--espace-3); }
.dia-partie p { font-size: var(--taille-s); }
.dia-partie .pastille { width: 2.5rem; height: 2.5rem; box-shadow: none; }
.dia-partie .pastille .picto { width: 1.25rem; height: 1.25rem; }
.dia-partie--decision { padding: var(--espace-5) var(--espace-4); background: var(--couleur-fond); box-shadow: var(--ombre-douce); }
.dia-partie--decision .pastille { background: var(--couleur-titre); color: var(--couleur-fond); }
.tableau {
border: 1px solid var(--couleur-bordure);
border-radius: var(--rayon-m);
background: var(--couleur-fond);
overflow: hidden;
}
.tableau table { width: 100%; border-collapse: collapse; font-size: var(--taille-s); line-height: 1.5; }
.tableau caption, .tableau-titre {
caption-side: top;
margin: 0;
text-align: left;
padding: var(--espace-4) var(--espace-4) var(--espace-3);
font-weight: var(--graisse-forte);
color: var(--couleur-titre);
}
.tableau th, .tableau td {
text-align: left; vertical-align: top;
padding: var(--espace-3) var(--espace-4);
border-top: 1px solid var(--couleur-bordure);
}
.tableau thead th {
background: var(--couleur-surface);
color: var(--couleur-titre);
font-weight: var(--graisse-forte);
}
.tableau tbody th { font-weight: var(--graisse-forte); color: var(--couleur-titre); }
.tableau td + td, .tableau th + td, .tableau th + th { border-left: 1px solid var(--couleur-bordure); }
.tableau .nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau tr.total th, .tableau tr.total td { background: var(--couleur-fond-doux); font-weight: var(--graisse-forte); }
.tableau-note { padding: var(--espace-3) var(--espace-4); border-top: 1px solid var(--couleur-bordure); font-size: var(--taille-xs); color: var(--couleur-texte-discret); }
.tableau--defilant .tableau-cadre {
overflow-x: auto;
background:
linear-gradient(to right, var(--couleur-fond) 30%, transparent) left / 2.5rem 100% no-repeat local,
linear-gradient(to left, var(--couleur-fond) 30%, transparent) right / 2.5rem 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, rgb(31 27 77 / 0.18), transparent) left / 0.9rem 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgb(31 27 77 / 0.18), transparent) right / 0.9rem 100% no-repeat scroll;
}
.tableau--defilant table { min-width: 44rem; }
.tableau--defilant thead th, .tableau--defilant tr.total th, .tableau--defilant tr.total td { background-color: var(--couleur-surface); }
.tableau--defilant tbody th { position: sticky; left: 0; background: var(--couleur-fond); min-width: 11rem; }
.tableau--defilant thead th:first-child { position: sticky; left: 0; z-index: 1; }
.indication-defilement { display: none; }
@media (max-width: 48rem) {
.indication-defilement { display: block; padding: 0 var(--espace-4) var(--espace-3); font-size: var(--taille-xs); color: var(--couleur-texte-discret); }
}
@media (max-width: 40rem) {
.tableau--empile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tableau--empile tr, .tableau--empile th, .tableau--empile td { display: block; }
.tableau--empile tbody tr { border-top: 1px solid var(--couleur-bordure); padding-block: var(--espace-2); }
.tableau--empile tbody th, .tableau--empile td { border: 0; padding-block: var(--espace-2); }
.tableau--empile td + td, .tableau--empile th + td { border-left: 0; }
.tableau--empile tbody th { font-size: var(--taille-corps); }
.tableau--empile td[data-intitule]::before {
content: attr(data-intitule);
display: block;
font-size: var(--taille-xs); font-weight: var(--graisse-forte);
letter-spacing: 0.04em; text-transform: uppercase;
color: var(--rubrique-fort);
margin-bottom: var(--espace-1);
}
}
.ref {
display: inline-block;
padding: 0 0.3em;
border-radius: var(--rayon-s);
font-size: 0.8em; font-weight: var(--graisse-forte);
font-variant-numeric: tabular-nums;
line-height: 1.4;
text-decoration: none;
white-space: nowrap;
}
.ref:hover { background: var(--couleur-surface); }
.sources { padding-top: var(--espace-6); border-top: 1px solid var(--couleur-bordure); }
.sources h2 { font-size: 1.5rem; }
.sources-intro { margin-top: var(--espace-3); font-size: var(--taille-s); color: var(--couleur-texte-discret); }
.sources-liste {
list-style: none; margin: var(--espace-5) 0 0; padding: 0;
counter-reset: source;
font-size: var(--taille-xs);
line-height: 1.55;
}
.flux .sources-liste { padding: 0; }
.sources-liste li {
counter-increment: source;
position: relative;
padding: var(--espace-2) var(--espace-3) var(--espace-2) 3rem;
border-radius: var(--rayon-s);
scroll-margin-top: var(--espace-6);
}
.flux .sources-liste li + li { margin-top: var(--espace-1); }
.sources-liste li::before {
content: "[" counter(source) "]";
position: absolute; left: var(--espace-2);
font-weight: var(--graisse-forte);
font-variant-numeric: tabular-nums;
color: var(--couleur-texte-discret);
}
.sources-liste li:target { background: var(--couleur-surface); }
.sources-liste cite { font-style: italic; }
.retour-ref {
display: inline-block;
margin-left: var(--espace-1);
padding: 0 0.3em;
border-radius: var(--rayon-s);
font-weight: var(--graisse-forte);
line-height: 1.4;
text-decoration: none;
}
.retour-ref:hover { background: var(--couleur-surface); }
.bouton {
display: inline-flex; align-items: center; gap: var(--espace-2);
min-height: 3rem;
padding: 0 var(--espace-5);
border: 0;
border-radius: var(--rayon-pilule);
background: var(--couleur-titre);
color: var(--couleur-fond);
font: inherit; font-size: var(--taille-s); font-weight: var(--graisse-forte);
text-decoration: none;
cursor: pointer;
transition: background-color var(--duree-courte) var(--courbe);
}
.bouton:hover { background: var(--couleur-lien-survol); color: var(--couleur-fond); }
.bouton--secondaire { background: transparent; color: var(--couleur-titre); border: 1px solid var(--couleur-bordure-ui); }
.bouton--secondaire:hover { background: var(--couleur-fond-doux); color: var(--couleur-titre); }
.renvoi {
position: relative;
display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--espace-2) var(--espace-5);
padding: var(--espace-5);
border: 1px solid var(--couleur-bordure);
border-radius: var(--rayon-m);
background: var(--couleur-fond);
color: var(--couleur-texte);
text-decoration: none;
transition: box-shadow var(--duree-courte) var(--courbe), border-color var(--duree-courte) var(--courbe);
}
.renvoi:hover { color: var(--couleur-texte); box-shadow: var(--ombre-survol); border-color: transparent; }
.renvoi-surtitre { grid-column: 1; font-size: var(--taille-xs); font-weight: var(--graisse-forte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--rubrique-fort); }
.renvoi-titre { grid-column: 1; font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: 1.375rem; line-height: 1.2; color: var(--couleur-titre); }
.renvoi-texte { grid-column: 1; font-size: var(--taille-s); }
.renvoi > .picto { grid-column: 2; grid-row: 1 / span 3; width: 1.75rem; height: 1.75rem; color: var(--rubrique-fort); transition: transform var(--duree-courte) var(--courbe); }
.renvoi:hover > .picto { transform: translateX(4px); }
.appel {
position: relative;
padding: var(--espace-6) var(--espace-5);
border-radius: var(--rayon-l);
background: var(--couleur-fond-doux);
overflow: hidden;
}
.appel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--degrade-ruban); }
.appel > * + * { margin-top: var(--espace-4); }
.appel h2 { font-size: 1.5rem; }
.appel .bouton { margin-top: var(--espace-5); }
.depliable {
border: 1px solid var(--couleur-bordure);
border-radius: var(--rayon-m);
background: var(--couleur-fond);
}
.depliable > summary {
display: flex; align-items: center; justify-content: space-between; gap: var(--espace-4);
min-height: 3.25rem;
padding: var(--espace-3) var(--espace-5);
font-weight: var(--graisse-forte);
color: var(--couleur-titre);
cursor: pointer;
list-style: none;
border-radius: var(--rayon-m);
}
.depliable > summary::-webkit-details-marker { display: none; }
.depliable > summary:hover { background: var(--couleur-fond-doux); }
.depliable[open] > summary { border-bottom: 1px solid var(--couleur-bordure); border-radius: var(--rayon-m) var(--rayon-m) 0 0; }
.depliable-contenu { padding: var(--espace-5); }
.depliable-contenu > * + * { margin-top: var(--espace-4); }
.pied {
margin-top: var(--espace-section);
padding-block: var(--espace-8) var(--espace-6);
background: var(--couleur-pied);
color: var(--couleur-sur-pied);
font-size: var(--taille-s);
}
.pied a { color: var(--couleur-sur-pied); text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.pied a:hover { color: #FFFFFF; text-decoration-color: currentColor; }
.pied :focus-visible { outline-color: var(--couleur-focus-pied); }
.pied .logotype { color: #FFFFFF; font-size: 1.5rem; }
.pied .logotype-accent { color: var(--couleur-focus-pied); }
.pied .logotype-tld { color: var(--couleur-sur-pied); }
.pied-plan {
margin-top: var(--espace-7);
display: grid; gap: var(--espace-6);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.pied-plan h2 { font-family: var(--police-texte); font-size: var(--taille-s); font-weight: var(--graisse-forte); line-height: 1.4; }
.pied-plan h2 a { color: #FFFFFF; text-decoration: none; display: inline-flex; align-items: center; gap: var(--espace-2); }
.pied-plan h2 a::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--rubrique-ruban); }
.pied-plan h2 a:hover { text-decoration: underline; }
.pied-plan ul { list-style: none; margin: var(--espace-3) 0 0; padding: 0; }
.pied-plan li + li { margin-top: var(--espace-2); }
.pied-plan ul a { text-decoration: none; }
.pied-plan ul a:hover { text-decoration: underline; }
.pied-bas {
margin-top: var(--espace-7); padding-top: var(--espace-5);
border-top: 1px solid color-mix(in srgb, var(--couleur-sur-pied) 20%, transparent);
display: flex; flex-wrap: wrap; gap: var(--espace-3) var(--espace-6); justify-content: space-between;
color: color-mix(in srgb, var(--couleur-sur-pied) 85%, transparent);
}
.accroche {
font-family: var(--police-titre);
font-style: italic;
font-weight: 500;
font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
line-height: 1.3;
color: var(--couleur-titre);
}
.lien-fleche {
display: inline-flex; align-items: center; gap: var(--espace-2);
font-weight: var(--graisse-forte);
color: var(--rubrique-fort);
text-decoration: none;
}
.lien-fleche:hover { color: var(--rubrique-fort); text-decoration: underline; }
.lien-fleche .picto { transition: transform var(--duree-courte) var(--courbe); }
.lien-fleche:hover .picto { transform: translateX(3px); }
.accueil-hero {
padding-block: var(--espace-8) var(--espace-6);
background:
radial-gradient(55% 80% at 90% 0%, color-mix(in srgb, var(--ruban-violet) 14%, transparent), transparent 70%),
radial-gradient(45% 70% at 0% 100%, color-mix(in srgb, var(--ruban-bleu) 10%, transparent), transparent 70%);
}
.accueil-hero .display { max-width: 15ch; }
.signature {
margin-top: var(--espace-5);
max-width: 34rem;
font-size: var(--taille-chapeau);
font-weight: var(--graisse-forte);
line-height: 1.45;
color: var(--couleur-titre);
}
.accueil-hero .chapeau { margin-top: var(--espace-5); max-width: var(--largeur-lecture); }
.entrees { margin-top: var(--espace-6); }
.ruban-accueil { display: block; width: 100%; height: auto; overflow: visible; }
.ruban-trace { fill: none; stroke-linecap: round; }
.ruban-trace--corps { stroke: url(#degrade-ruban-accueil); stroke-width: 18; }
.ruban-trace--reflet { stroke: #FFFFFF; stroke-opacity: 0.35; stroke-width: 4; }
.arret-bleu { stop-color: var(--ruban-bleu); }
.arret-indigo { stop-color: var(--ruban-indigo); }
.arret-violet { stop-color: var(--ruban-violet); }
.ruban-noeud circle { fill: var(--couleur-fond); stroke: var(--couleur-decor); stroke-width: 2; }
.ruban-noeud { color: var(--couleur-titre); }
.ruban-noeud--ia circle { fill: var(--ruban-indigo); stroke: var(--couleur-fond); stroke-width: 3; }
.ruban-noeud--ia { color: #FFFFFF; }
.ruban-picto { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.entrees .grille-cartes { margin-top: var(--espace-4); }
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.ruban-trace {
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: ruban-dessin linear both;
animation-timeline: view();
animation-range: entry 0% cover 45%;
}
.ruban-noeud {
animation: ruban-noeud linear both;
animation-timeline: view();
}
.ruban-noeud--donnees { animation-range: entry 20% cover 30%; }
.ruban-noeud--ia { animation-range: entry 35% cover 38%; }
.ruban-noeud--base { animation-range: entry 50% cover 45%; }
}
}
@keyframes ruban-dessin { to { stroke-dashoffset: 0; } }
@keyframes ruban-noeud { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.ruban-noeud { transform-box: fill-box; transform-origin: center; }
.boucle { margin-top: var(--espace-6); }
.boucle-schema {
display: grid; gap: var(--espace-3);
grid-template-columns: 1fr;
grid-template-areas: "promesse" "f1" "comprehension" "f2" "experience" "f3" "f4";
padding: var(--espace-5);
border-radius: var(--rayon-l);
background: var(--couleur-fond-doux);
}
.boucle-station {
position: relative;
display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--espace-1) var(--espace-4);
padding: var(--espace-4) var(--espace-5);
border-radius: var(--rayon-m);
background: var(--couleur-fond);
box-shadow: var(--ombre-douce);
color: var(--couleur-texte);
text-decoration: none;
transition: box-shadow var(--duree-courte) var(--courbe), transform var(--duree-courte) var(--courbe);
}
.boucle-station:hover { color: var(--couleur-texte); box-shadow: var(--ombre-survol); transform: translateY(-2px); }
.boucle-station::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: var(--rayon-m) 0 0 var(--rayon-m); background: var(--rubrique-ruban); }
.boucle-station .pastille { grid-row: 1 / span 2; }
.boucle-titre { font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: 1.25rem; line-height: 1.2; color: var(--couleur-titre); }
.boucle-detail { font-size: var(--taille-s); color: var(--couleur-texte-discret); }
.boucle-station--promesse { grid-area: promesse; }
.boucle-station--comprehension { grid-area: comprehension; }
.boucle-station--experience { grid-area: experience; }
.boucle-fleche {
display: flex; align-items: center; gap: var(--espace-3);
font-size: var(--taille-s); font-weight: var(--graisse-forte);
color: var(--couleur-texte-discret);
}
.boucle-fleche svg { flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.boucle-fleche--1 { grid-area: f1; }
.boucle-fleche--2 { grid-area: f2; }
.boucle-fleche--3 { grid-area: f3; color: var(--decision-fort); }
.boucle-fleche--4 { grid-area: f4; color: var(--decision-fort); }
.boucle-fleche--4 svg { stroke-dasharray: 6 6; stroke-width: 2; }
.boucle-fleche--4 .tete, .boucle-fleche--4 .vue-etroite { stroke-dasharray: none; }
.boucle-fleche .vue-large { display: none; }
.boucle-fleche .vue-etroite { width: 2rem; height: 2.5rem; }
.boucle-fleche--3 .vue-etroite, .boucle-fleche--4 .vue-etroite { width: 2rem; height: 2rem; }
.boucle-fleche--1, .boucle-fleche--2 { padding-left: var(--espace-5); }
.boucle-cible { font-weight: var(--graisse-texte); }
.boucle figcaption { margin-top: var(--espace-4); font-size: var(--taille-s); color: var(--couleur-texte-discret); }
.boucle-mention { display: block; margin-top: var(--espace-2); font-weight: var(--graisse-forte); color: var(--couleur-titre); }
@media (min-width: 60rem) {
.boucle-schema {
grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr);
grid-template-areas:
"promesse f1 comprehension"
"f3 . f2"
". experience f4";
row-gap: 0; column-gap: var(--espace-4);
padding: var(--espace-6);
}
.boucle-fleche .vue-large { display: block; }
.boucle-fleche .vue-etroite { display: none; }
.boucle-fleche--1 { flex-direction: column; justify-content: center; gap: var(--espace-1); padding: 0; text-align: center; }
.boucle-fleche--1 .vue-large { width: 100%; height: 1.5rem; }
.boucle-fleche--2, .boucle-fleche--3, .boucle-fleche--4 { min-height: 8.5rem; padding: 0; }
.boucle-fleche--2 { flex-direction: row-reverse; justify-content: flex-end; }
.boucle-fleche--2 .vue-large { width: 6rem; height: 8.5rem; }
.boucle-fleche--3 { justify-content: flex-end; flex-direction: row-reverse; }
.boucle-fleche--3 .vue-large { width: 9rem; height: 8.5rem; margin-left: 15%; }
.boucle-fleche--3 span { text-align: right; }
.boucle-fleche--4 .vue-large { width: 9rem; height: 8.5rem; }
.boucle-fleche--4 { align-self: start; }
.boucle-cible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.entree {
display: grid; gap: var(--espace-4);
padding: var(--espace-5) 0 var(--espace-5) var(--espace-5);
border-left: 4px solid var(--rubrique-ruban);
}
.entree > * { margin: 0; }
.entree h3 { font-family: var(--police-titre); font-size: 1.5rem; line-height: 1.2; }
.entree .pastille { width: 2.75rem; height: 2.75rem; }
.flux > .entree + .entree { margin-top: var(--espace-6); }
.diagnostic {
display: grid; gap: var(--espace-6);
padding: var(--espace-6) clamp(var(--espace-4), 3vw, var(--espace-6));
border-radius: var(--rayon-l);
background: var(--couleur-fond-doux);
}
.diagnostic-questions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace-5); counter-reset: question; }
.flux .diagnostic-questions { padding: 0; }
.flux .diagnostic-questions li + li, .flux .reponses li + li { margin-top: 0; }
.diagnostic-questions > li { counter-increment: question; }
.question { margin: 0; padding: 0; border: 0; min-width: 0; }
.question legend {
display: flex; gap: var(--espace-3); align-items: baseline;
padding: 0;
font-weight: var(--graisse-forte);
color: var(--couleur-titre);
line-height: 1.4;
}
.question legend::before {
content: counter(question);
flex-shrink: 0;
display: inline-grid; place-items: center;
width: 1.75rem; height: 1.75rem; border-radius: 50%;
background: var(--couleur-titre); color: var(--couleur-fond);
font-size: var(--taille-xs); font-variant-numeric: tabular-nums;
transform: translateY(-0.1em);
}
.question-aide { margin: var(--espace-2) 0 0 2.5rem; font-size: var(--taille-s); color: var(--couleur-texte-discret); }
.reponses { list-style: none; margin: var(--espace-3) 0 0; padding: 0 0 0 2.5rem; display: grid; gap: var(--espace-2); }
.flux .reponses { padding-left: 2.5rem; }
.reponse {
display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3);
padding: var(--espace-2) var(--espace-3);
border: 1px solid var(--couleur-bordure);
border-radius: var(--rayon-m);
background: var(--couleur-fond);
}
.reponse:has(input:checked) { border-color: var(--rubrique-fort); box-shadow: inset 0 0 0 1px var(--rubrique-fort); }
.reponse label { flex: 1; display: flex; align-items: center; gap: var(--espace-3); min-height: 2.25rem; cursor: pointer; font-size: var(--taille-s); }
.reponse input { width: 1.125rem; height: 1.125rem; margin: 0; flex-shrink: 0; accent-color: var(--rubrique-fort); }
.orientation {
flex-shrink: 0;
display: inline-grid; place-items: center;
min-width: 2.5rem; min-height: 1.75rem; padding: 0 var(--espace-2);
border-radius: var(--rayon-pilule);
background: var(--rubrique-pale);
color: var(--rubrique-fort);
font-size: var(--taille-xs); font-weight: var(--graisse-forte);
font-variant-numeric: tabular-nums;
text-decoration: none;
}
a.orientation:hover { background: var(--rubrique-fort); color: var(--couleur-fond); }
.orientation--aucune { background: transparent; color: var(--couleur-texte-discret); font-weight: var(--graisse-texte); min-width: 0; }
.diagnostic-resultat {
align-self: start;
padding: var(--espace-5);
border-radius: var(--rayon-m);
background: var(--couleur-fond);
box-shadow: var(--ombre-douce);
}
.diagnostic-resultat > * + * { margin-top: var(--espace-3); }
.resultat-etiquette { font-size: var(--taille-xs); font-weight: var(--graisse-forte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--rubrique-fort); }
.resultat-texte { font-size: var(--taille-corps); }
.resultat-texte strong { color: var(--couleur-titre); }
.resultat-actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); padding-top: var(--espace-2); }
.resultat-confidentialite { font-size: var(--taille-xs); color: var(--couleur-texte-discret); }
@media (min-width: 60rem) {
.diagnostic { grid-template-columns: minmax(0, 1fr) 19rem; }
.diagnostic-resultat { position: sticky; top: var(--espace-5); }
}
@media (scripting: none) {
.reponse input { display: none; }
.reponse label { cursor: default; }
}
.grille-situations {
display: grid; gap: var(--espace-5);
padding: var(--espace-6) clamp(var(--espace-4), 3vw, var(--espace-6));
border-radius: var(--rayon-l);
background: var(--couleur-fond-doux);
}
.grille-situations > * { margin: 0; }
.grille-tableau { width: 100%; border-collapse: collapse; font-size: var(--taille-s); }
.grille-tableau caption { text-align: left; padding-bottom: var(--espace-3); font-weight: var(--graisse-forte); color: var(--couleur-titre); }
.grille-tableau th, .grille-tableau td { padding: var(--espace-2); text-align: left; vertical-align: top; font-weight: var(--graisse-texte); }
.grille-tableau thead th { font-weight: var(--graisse-forte); color: var(--couleur-titre); line-height: 1.3; border-bottom: 1px solid var(--couleur-bordure-ui); }
.grille-tableau tbody tr + tr { border-top: 1px solid var(--couleur-bordure); }
.grille-tableau tbody tr[hidden] { display: none; }
.grille-page { display: block; margin-bottom: var(--espace-1); font-size: var(--taille-xs); font-variant-numeric: tabular-nums; color: var(--rubrique-fort); }
.grille-intitule { display: block; margin-bottom: var(--espace-1); font-size: var(--taille-xs); font-weight: var(--graisse-forte); color: var(--couleur-texte-discret); }
.grille-tableau input, .grille-tableau select {
width: 100%; min-height: 2.75rem;
padding: var(--espace-2) var(--espace-3);
border: 1px solid var(--couleur-bordure-ui); border-radius: var(--rayon-s);
background: var(--couleur-fond); color: var(--couleur-texte);
font: inherit;
}
.grille-tableau input::placeholder { color: var(--couleur-texte-discret); opacity: 1; }
.grille-tableau select:has(option[value="travail"]:checked),
.grille-tableau select:has(option[value="inconnu"]:checked) { border-color: var(--rubrique-fort); background: var(--rubrique-pale); color: var(--couleur-titre); }
.grille-actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); }
.grille-resultat {
padding: var(--espace-5);
border-radius: var(--rayon-m);
background: var(--couleur-fond);
box-shadow: var(--ombre-douce);
}
.grille-resultat > * + * { margin-top: var(--espace-3); }
.grille-resultat-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace-2); }
.flux .grille-resultat-liste { padding: 0; }
.flux .grille-resultat-liste li + li { margin-top: 0; }
.grille-resultat-liste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--espace-2); }
.grille-resultat-liste a { font-weight: var(--graisse-forte); }
.grille-resultat-detail { font-size: var(--taille-s); color: var(--couleur-texte-discret); }
@media (min-width: 60rem) {
.grille-intitule {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.grille-tableau tbody th { width: 26%; }
.grille-sources .grille-intitule { position: static; width: auto; height: auto; margin: 0 0 var(--espace-1); overflow: visible; clip: auto; white-space: normal; }
}
.grille-sources { display: block; margin-top: var(--espace-2); }
@media (width < 60rem) {
.grille-tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.grille-tableau tbody tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--espace-3); padding-block: var(--espace-4); }
.grille-tableau tbody th, .grille-tableau td { display: block; padding: 0; }
.grille-tableau tbody th { grid-column: 1 / -1; }
.grille-tableau tbody tr:first-child { padding-top: 0; }
}
@media (scripting: none) {
.grille-actions, .grille-resultat { display: none; }
}
.frise { position: relative; }
.frise-etapes {
position: relative;
list-style: none; margin: 0; padding: 0;
display: grid; gap: var(--espace-5);
}
.flux .frise-etapes { padding: 0; }
.flux .frise-etapes li + li { margin-top: 0; }
.frise-etape:not(:last-child)::after {
content: "";
position: absolute; left: 1.25rem; top: 1.25rem; bottom: calc(-1 * (var(--espace-5) + 1.25rem));
width: 4px; margin-left: -2px;
border-radius: var(--rayon-pilule);
background: linear-gradient(to bottom, var(--teinte), var(--teinte-suivante));
}
.frise-etape:nth-child(2)::after { bottom: calc(-1 * (var(--espace-5) + 2.75rem + 1.25rem)); }
.frise-etape { position: relative; display: grid; gap: var(--espace-2); align-content: start; padding-left: 3.75rem; }
.frise-etape:nth-child(1) { --teinte: var(--ruban-bleu); --teinte-suivante: color-mix(in srgb, var(--ruban-bleu), var(--ruban-indigo)); }
.frise-etape:nth-child(2) { --teinte: color-mix(in srgb, var(--ruban-bleu), var(--ruban-indigo)); --teinte-suivante: var(--ruban-indigo); }
.frise-etape:nth-child(3) { --teinte: var(--ruban-indigo); --teinte-suivante: color-mix(in srgb, var(--ruban-indigo), var(--ruban-violet)); }
.frise-etape:nth-child(4) { --teinte: color-mix(in srgb, var(--ruban-indigo), var(--ruban-violet)); --teinte-suivante: var(--ruban-violet); }
.frise-etape:nth-child(5) { --teinte: var(--ruban-violet); }
.frise-numero {
position: absolute; left: 0; top: 0; z-index: 1;
display: grid; place-items: center;
width: 2.5rem; height: 2.5rem; border-radius: 50%;
background: var(--couleur-fond);
border: 3px solid var(--teinte);
font-weight: var(--graisse-titre);
font-variant-numeric: tabular-nums;
color: var(--couleur-titre);
}
.frise-titre { font-family: var(--police-titre); font-weight: var(--graisse-titre); font-size: 1.1875rem; line-height: 1.25; }
.frise-titre a { color: var(--couleur-titre); text-decoration: none; }
.frise-titre a:hover { text-decoration: underline; }
.frise-fait { font-size: var(--taille-s); color: var(--couleur-texte-discret); }
.frise-outils { display: flex; flex-wrap: wrap; gap: var(--espace-2); }
.frise-etape--signature { padding-top: 2.75rem; }
.frise-etape--signature .frise-numero { top: 2.75rem; }
.frise-signature {
position: absolute; top: 0.25rem; left: 3.75rem; right: 0;
display: flex; align-items: center; gap: var(--espace-3);
margin: 0;
font-size: var(--taille-xs); font-weight: var(--graisse-forte);
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--couleur-titre);
}
.frise-signature::after { content: ""; flex: 1; border-top: 2px dashed var(--couleur-bordure-ui); }
@media (min-width: 60rem) {
.frise { padding-top: var(--espace-7); }
.frise-etapes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--espace-5); }
.frise-etape:not(:last-child)::after,
.frise-etape:nth-child(2)::after {
left: 1.25rem; right: calc(-1 * (var(--espace-5) + 1.25rem)); top: 1.25rem; bottom: auto;
width: auto; height: 4px; margin: -2px 0 0;
background: linear-gradient(to right, var(--teinte), var(--teinte-suivante));
}
.frise-etape { padding-left: 0; padding-top: 3.75rem; }
.frise-etape--signature { padding-top: 3.75rem; }
.frise-etape--signature .frise-numero { top: 0; }
.frise-signature {
top: calc(-1 * var(--espace-7)); bottom: 0; left: calc(var(--espace-5) / -2); right: auto;
width: 0;
border-left: 2px dashed var(--couleur-bordure-ui);
}
.frise-signature::after { display: none; }
.frise-signature span {
position: absolute; top: 0; left: 0; transform: translate(-50%, -10%);
padding: 0.15rem 0.6rem;
border-radius: var(--rayon-pilule);
background: var(--couleur-titre); color: var(--couleur-fond);
white-space: nowrap;
}
}
.page-erreur { padding-block: var(--espace-8) var(--espace-6); }
.page-erreur .display { max-width: 14ch; }
.page-erreur .chapeau { margin-top: var(--espace-5); max-width: var(--largeur-lecture); }
.page-erreur .grille-cartes { margin-top: var(--espace-7); }
.page-erreur .lien-fleche { margin-top: var(--espace-6); }
@media print {
.entete .menu, .menu-bouton, .sommaire, .pied-plan, .lien-evitement { display: none; }
body { font-size: 11pt; }
a { color: inherit; }
.flux > * { grid-column: 1 / -1; }
}