/* ==========================================================================
   Damien Thouvenin — feuille de style
   Design system « Damien Thouvenin » : jetons, typographie, espacements.
   Le contenu vit dans index.html ; toute la mise en forme est ici.
   ========================================================================== */

/* ---------- Polices (auto-hébergées, sous-ensemble latin) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-500-600-latin.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-400-600-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Jetons ---------- */
:root {
  --sable-100: #f4ede0;
  --sable-050: #fbf6ec;
  --sable-200: #e8dece;
  --ink: #241f1b;
  --ink-muted: #5a5048;
  --vermillon: #d13a24;
  --vermillon-ink: #b0301c;
  --on-vermillon: #fdf8f3;
  --sienne: #8c5a36;
  --sienne-wash: #efe3d4;
  --filet: #d6c7b0;
  --focus: #b0301c;

  --titre: "Fraunces", "Iowan Old Style", Georgia, serif;
  --texte: "IBM Plex Sans", system-ui, -apple-system, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --page: 1080px;
  --lecture: 680px;
  --chapo: 880px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--sable-100);
  color: var(--ink);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 28px;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a {
  color: var(--vermillon-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: var(--space-1); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--space-4); top: var(--space-4); background: var(--sable-050); padding: var(--space-2) var(--space-3); z-index: 10; }

/* ---------- Typographie ---------- */
.display {
  font-family: var(--titre);
  font-size: clamp(44px, 9vw, 64px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.titre-1 { font-family: var(--titre); font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -0.01em; }
.titre-2 { font-family: var(--titre); font-size: 28px; line-height: 34px; font-weight: 600; }
.titre-3 { font-family: var(--titre); font-size: 20px; line-height: 26px; font-weight: 600; }
.chapo { font-size: 20px; line-height: 32px; }
.corps-petit { font-size: 15px; line-height: 24px; }
.surtitre {
  font-family: var(--titre);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sienne);
}
.surtitre--muted { color: var(--ink-muted); }
.nom { font-family: var(--titre); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
strong { font-weight: 600; }
.lien { font-size: 15px; line-height: 24px; font-weight: 500; }
.a-completer { color: var(--ink-muted); font-style: italic; }

@media (max-width: 480px) {
  .titre-1 { font-size: 32px; line-height: 36px; }
}

/* ---------- Mise en page ---------- */
.conteneur { max-width: var(--page); margin: 0 auto; padding: 0 var(--space-6); }
.section { padding-block: var(--space-24); }
.section--sans-haut { padding-top: 0; }
.section--sombre { background: var(--sable-200); }
.pile { display: flex; flex-direction: column; }
.pile-2 { gap: var(--space-2); }
.pile-3 { gap: var(--space-3); }
.pile-4 { gap: var(--space-4); }
.pile-6 { gap: var(--space-6); }
.pile-8 { gap: var(--space-8); }
.pile-12 { gap: var(--space-12); }
.pile-16 { gap: var(--space-16); }
.largeur-lecture { max-width: var(--lecture); }
.largeur-chapo { max-width: var(--chapo); }
.filet-haut { border-top: 1px solid var(--filet); padding-top: var(--space-12); }

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-24); }
.hero .monogramme { width: 96px; height: 96px; }
.hero .surtitre { margin-top: var(--space-6); }
.hero .chapo { max-width: 640px; }

/* ---------- Entrepreneur : les boîtes ---------- */
.grille-boites { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-8); }
.boite {
  background: var(--sable-050);
  border: 1px solid var(--filet);
  border-top: 2px solid var(--sienne);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.boite .promesse { font-weight: 600; }
.boite .description { font-size: 15px; line-height: 24px; flex-grow: 1; }

/* ---------- Compagnon de route ---------- */
.grille-compagnon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 336px);
  gap: var(--space-12);
  align-items: start;
}
.grille-compagnon .texte { max-width: 560px; }
@media (max-width: 760px) {
  .grille-compagnon { grid-template-columns: minmax(0, 1fr); }
}
.grille-essentiels { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-8); }
.etape {
  border-top: 2px solid var(--sienne);
  padding-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ---------- Tête chercheuse ---------- */
.fig-d, .fig-m { width: 100%; }
.fig-d svg, .fig-m svg { display: block; width: 100%; height: auto; }
.fig-m { display: none; }
.etapes-m { display: none; flex-direction: column; gap: var(--space-4); }
@media (max-width: 640px) {
  .fig-d { display: none; }
  .fig-m { display: block; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .etapes-m { display: flex; }
  .fig-m { aspect-ratio: 720 / 320; overflow: hidden; }
  .loopm .pan, .loopm .rule { display: none; }
}
.grille-recherche { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-12); margin-top: var(--space-12); }
.liste-filet > li {
  border-top: 1px solid var(--filet);
  padding: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ---------- Citoyen ---------- */
.conviction {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: var(--space-2) var(--space-8);
  align-items: baseline;
  border-top: 1px solid var(--filet);
  padding: var(--space-6) 0;
}
.conviction:last-child { border-bottom: 1px solid var(--filet); }
.conviction .affirmation { font-family: var(--titre); font-size: 28px; line-height: 34px; font-weight: 500; }
@media (max-width: 640px) {
  .conviction { grid-template-columns: minmax(0, 1fr); }
}
.grille-causes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); column-gap: var(--space-8); }
.cause {
  border-top: 1px solid var(--filet);
  padding: var(--space-6) 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cause .logo { display: flex; align-items: center; height: 56px; }
.cause img {
  max-height: 56px;
  max-width: 180px;
  width: auto;
  filter: grayscale(1);
  mix-blend-mode: multiply;
  opacity: 0.8;
  transition: filter 0.2s, opacity 0.2s;
}
.cause:hover img, .cause:focus-within img { filter: none; opacity: 1; }
.cause p { font-size: 15px; line-height: 24px; }

/* ---------- Contact ---------- */
.contact-liens { display: flex; flex-direction: column; gap: var(--space-3); font-size: 20px; line-height: 32px; }

/* ---------- Pied de page ---------- */
.pied { background: var(--sienne-wash); }
.pied .conteneur {
  padding-block: var(--space-12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.pied .signature { display: flex; align-items: center; gap: var(--space-4); }
.pied .monogramme { width: 28px; height: 28px; }
.pied .nom { font-size: 15px; line-height: 20px; }
.pied .legende { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.pied nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: 15px; line-height: 24px; }

/* ==========================================================================
   Boucle d'apprentissage animée (deux versions : large et mobile)
   ========================================================================== */
.loop{--step:3s;--cycle:calc(var(--step) * 6)}
.light{--ink:#241f1b;--ink-muted:#5a5048;--vermillon:#d13a24;--on:#fdf8f3;--sienne:#8c5a36;--paper:#f4ede0}
.dark{--ink:#f2eade;--ink-muted:#b9aea1;--vermillon:#e9573c;--on:#1a1714;--sienne:#c08a5e;--paper:#1a1714}
.loop .track{fill:none;stroke:var(--sienne);stroke-width:2;opacity:.55}
.loop .seg{fill:none;stroke:var(--vermillon);stroke-width:4;stroke-dasharray:1 1;stroke-dashoffset:1;animation-duration:var(--cycle);animation-iteration-count:infinite;animation-timing-function:linear}
.loop .leader{stroke:var(--sienne);stroke-width:1;opacity:.5}
.loop .base{fill:var(--paper);stroke:var(--sienne);stroke-width:2}
.loop .fill{fill:var(--vermillon);opacity:0}
.loop .ring{fill:none;stroke:var(--vermillon);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.loop .num{font:600 18px "Fraunces",Georgia,serif;text-anchor:middle;fill:var(--ink-muted)}
.loop .ttl{font:600 26px "Fraunces","Iowan Old Style",Georgia,serif;fill:var(--ink)}
.loop .dsc{font:400 15px "IBM Plex Sans",system-ui,sans-serif;fill:var(--ink-muted)}
.loop .lbl{opacity:.5}
.loop .cap{font:600 12px "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.16em;text-anchor:middle;fill:var(--sienne)}
.loop .fill,.loop .ring,.loop .num,.loop .lbl{animation-duration:var(--cycle);animation-iteration-count:infinite}
.loop .n1 .fill{animation-name:fill1}
.loop .n1 .ring{animation-name:ring1}
.loop .n1 .num{animation-name:num1}
.loop .n1 .lbl{animation-name:lbl1}
@keyframes fill1{
0% {opacity:1}
16.657% {opacity:1}
16.667% {opacity:0}
100% {opacity:0}
}
@keyframes num1{
0% {fill:var(--on)}
16.657% {fill:var(--on)}
16.667% {fill:var(--ink-muted)}
100% {fill:var(--ink-muted)}
}
@keyframes lbl1{
0% {opacity:1}
16.657% {opacity:1}
16.667% {opacity:.5}
100% {opacity:.5}
}
@keyframes ring1{
0% {opacity:.9;transform:scale(1)}
5% {opacity:0;transform:scale(2.6)}
100% {opacity:0;transform:scale(2.6)}
}
.loop .n2 .fill{animation-name:fill2}
.loop .n2 .ring{animation-name:ring2}
.loop .n2 .num{animation-name:num2}
.loop .n2 .lbl{animation-name:lbl2}
@keyframes fill2{
0% {opacity:0}
16.657% {opacity:0}
16.667% {opacity:1}
33.323% {opacity:1}
33.333% {opacity:0}
100% {opacity:0}
}
@keyframes num2{
0% {fill:var(--ink-muted)}
16.657% {fill:var(--ink-muted)}
16.667% {fill:var(--on)}
33.323% {fill:var(--on)}
33.333% {fill:var(--ink-muted)}
100% {fill:var(--ink-muted)}
}
@keyframes lbl2{
0% {opacity:.5}
16.657% {opacity:.5}
16.667% {opacity:1}
33.323% {opacity:1}
33.333% {opacity:.5}
100% {opacity:.5}
}
@keyframes ring2{
0% {opacity:0;transform:scale(1)}
16.657% {opacity:0;transform:scale(1)}
16.667% {opacity:.9;transform:scale(1)}
21.667% {opacity:0;transform:scale(2.6)}
100% {opacity:0;transform:scale(2.6)}
}
.loop .n3 .fill{animation-name:fill3}
.loop .n3 .ring{animation-name:ring3}
.loop .n3 .num{animation-name:num3}
.loop .n3 .lbl{animation-name:lbl3}
@keyframes fill3{
0% {opacity:0}
33.323% {opacity:0}
33.333% {opacity:1}
49.99% {opacity:1}
50% {opacity:0}
100% {opacity:0}
}
@keyframes num3{
0% {fill:var(--ink-muted)}
33.323% {fill:var(--ink-muted)}
33.333% {fill:var(--on)}
49.99% {fill:var(--on)}
50% {fill:var(--ink-muted)}
100% {fill:var(--ink-muted)}
}
@keyframes lbl3{
0% {opacity:.5}
33.323% {opacity:.5}
33.333% {opacity:1}
49.99% {opacity:1}
50% {opacity:.5}
100% {opacity:.5}
}
@keyframes ring3{
0% {opacity:0;transform:scale(1)}
33.323% {opacity:0;transform:scale(1)}
33.333% {opacity:.9;transform:scale(1)}
38.333% {opacity:0;transform:scale(2.6)}
100% {opacity:0;transform:scale(2.6)}
}
.loop .n4 .fill{animation-name:fill4}
.loop .n4 .ring{animation-name:ring4}
.loop .n4 .num{animation-name:num4}
.loop .n4 .lbl{animation-name:lbl4}
@keyframes fill4{
0% {opacity:0}
49.99% {opacity:0}
50% {opacity:1}
66.657% {opacity:1}
66.667% {opacity:0}
100% {opacity:0}
}
@keyframes num4{
0% {fill:var(--ink-muted)}
49.99% {fill:var(--ink-muted)}
50% {fill:var(--on)}
66.657% {fill:var(--on)}
66.667% {fill:var(--ink-muted)}
100% {fill:var(--ink-muted)}
}
@keyframes lbl4{
0% {opacity:.5}
49.99% {opacity:.5}
50% {opacity:1}
66.657% {opacity:1}
66.667% {opacity:.5}
100% {opacity:.5}
}
@keyframes ring4{
0% {opacity:0;transform:scale(1)}
49.99% {opacity:0;transform:scale(1)}
50% {opacity:.9;transform:scale(1)}
55% {opacity:0;transform:scale(2.6)}
100% {opacity:0;transform:scale(2.6)}
}
.loop .n5 .fill{animation-name:fill5}
.loop .n5 .ring{animation-name:ring5}
.loop .n5 .num{animation-name:num5}
.loop .n5 .lbl{animation-name:lbl5}
@keyframes fill5{
0% {opacity:0}
66.657% {opacity:0}
66.667% {opacity:1}
83.323% {opacity:1}
83.333% {opacity:0}
100% {opacity:0}
}
@keyframes num5{
0% {fill:var(--ink-muted)}
66.657% {fill:var(--ink-muted)}
66.667% {fill:var(--on)}
83.323% {fill:var(--on)}
83.333% {fill:var(--ink-muted)}
100% {fill:var(--ink-muted)}
}
@keyframes lbl5{
0% {opacity:.5}
66.657% {opacity:.5}
66.667% {opacity:1}
83.323% {opacity:1}
83.333% {opacity:.5}
100% {opacity:.5}
}
@keyframes ring5{
0% {opacity:0;transform:scale(1)}
66.657% {opacity:0;transform:scale(1)}
66.667% {opacity:.9;transform:scale(1)}
71.667% {opacity:0;transform:scale(2.6)}
100% {opacity:0;transform:scale(2.6)}
}
.loop .n6 .fill{animation-name:fill6}
.loop .n6 .ring{animation-name:ring6}
.loop .n6 .num{animation-name:num6}
.loop .n6 .lbl{animation-name:lbl6}
@keyframes fill6{
0% {opacity:0}
83.323% {opacity:0}
83.333% {opacity:1}
99.99% {opacity:1}
100% {opacity:0}
}
@keyframes num6{
0% {fill:var(--ink-muted)}
83.323% {fill:var(--ink-muted)}
83.333% {fill:var(--on)}
99.99% {fill:var(--on)}
100% {fill:var(--ink-muted)}
}
@keyframes lbl6{
0% {opacity:.5}
83.323% {opacity:.5}
83.333% {opacity:1}
99.99% {opacity:1}
100% {opacity:.5}
}
@keyframes ring6{
0% {opacity:0;transform:scale(1)}
83.323% {opacity:0;transform:scale(1)}
83.333% {opacity:.9;transform:scale(1)}
88.333% {opacity:0;transform:scale(2.6)}
100% {opacity:0;transform:scale(2.6)}
}
.loop .seg1{animation-name:seg1}
@keyframes seg1{
0% {stroke-dashoffset:1;opacity:1}
0% {stroke-dashoffset:1;animation-timing-function:ease-in-out}
14.167% {stroke-dashoffset:0;animation-timing-function:linear}
95% {stroke-dashoffset:0;opacity:1}
99.5% {stroke-dashoffset:0;opacity:0}
100% {stroke-dashoffset:1;opacity:0}
}
.loop .seg2{animation-name:seg2}
@keyframes seg2{
0% {stroke-dashoffset:1;opacity:1}
16.667% {stroke-dashoffset:1;animation-timing-function:ease-in-out}
30.833% {stroke-dashoffset:0;animation-timing-function:linear}
95% {stroke-dashoffset:0;opacity:1}
99.5% {stroke-dashoffset:0;opacity:0}
100% {stroke-dashoffset:1;opacity:0}
}
.loop .seg3{animation-name:seg3}
@keyframes seg3{
0% {stroke-dashoffset:1;opacity:1}
33.333% {stroke-dashoffset:1;animation-timing-function:ease-in-out}
47.5% {stroke-dashoffset:0;animation-timing-function:linear}
95% {stroke-dashoffset:0;opacity:1}
99.5% {stroke-dashoffset:0;opacity:0}
100% {stroke-dashoffset:1;opacity:0}
}
.loop .seg4{animation-name:seg4}
@keyframes seg4{
0% {stroke-dashoffset:1;opacity:1}
50% {stroke-dashoffset:1;animation-timing-function:ease-in-out}
64.167% {stroke-dashoffset:0;animation-timing-function:linear}
95% {stroke-dashoffset:0;opacity:1}
99.5% {stroke-dashoffset:0;opacity:0}
100% {stroke-dashoffset:1;opacity:0}
}
.loop .seg5{animation-name:seg5}
@keyframes seg5{
0% {stroke-dashoffset:1;opacity:1}
66.667% {stroke-dashoffset:1;animation-timing-function:ease-in-out}
80.833% {stroke-dashoffset:0;animation-timing-function:linear}
95% {stroke-dashoffset:0;opacity:1}
99.5% {stroke-dashoffset:0;opacity:0}
100% {stroke-dashoffset:1;opacity:0}
}
.loop .seg6{animation-name:seg6}
@keyframes seg6{
0% {stroke-dashoffset:1;opacity:1}
83.333% {stroke-dashoffset:1;animation-timing-function:ease-in-out}
97.5% {stroke-dashoffset:0;animation-timing-function:linear}
95% {stroke-dashoffset:0;opacity:1}
99.5% {stroke-dashoffset:0;opacity:0}
100% {stroke-dashoffset:1;opacity:0}
}
@media (prefers-reduced-motion:reduce){
.loop .seg{animation:none;stroke-dashoffset:0}
.loop .fill,.loop .ring,.loop .num,.loop .lbl{animation:none}
.loop .lbl{opacity:1}
}
.loopm{--step:4s;--cycle:calc(var(--step) * 6)}
.loopm.light{--ink:#241f1b;--ink-muted:#5a5048;--vermillon:#d13a24;--on:#fdf8f3;--sienne:#8c5a36;--paper:#f4ede0}
.loopm.dark{--ink:#f2eade;--ink-muted:#b9aea1;--vermillon:#e9573c;--on:#1a1714;--sienne:#c08a5e;--paper:#1a1714}
.loopm .track{fill:none;stroke:var(--sienne);stroke-width:4;opacity:.55}
.loopm .seg{fill:none;stroke:var(--vermillon);stroke-width:9;stroke-dasharray:1 1;stroke-dashoffset:1;animation-duration:var(--cycle);animation-iteration-count:infinite;animation-timing-function:linear}
.loopm .base{fill:var(--paper);stroke:var(--sienne);stroke-width:4}
.loopm .fill{fill:var(--vermillon);opacity:0}
.loopm .ring{fill:none;stroke:var(--vermillon);stroke-width:4;opacity:0;transform-box:fill-box;transform-origin:center}
.loopm .num{font:600 30px "Fraunces",Georgia,serif;text-anchor:middle;fill:var(--ink-muted)}
.loopm .cap{font:600 17px "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.14em;text-anchor:middle;fill:var(--sienne)}
.loopm .sur{font:600 20px "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.16em;fill:var(--sienne)}
.loopm .ttl{font:600 52px "Fraunces","Iowan Old Style",Georgia,serif;fill:var(--ink)}
.loopm .dsc{font:400 27px "IBM Plex Sans",system-ui,sans-serif;fill:var(--ink)}
.loopm .rule{stroke:var(--sienne);stroke-width:2;opacity:.5}
.loopm .pan{opacity:0}
.loopm .fill,.loopm .ring,.loopm .num,.loopm .pan{animation-duration:var(--cycle);animation-iteration-count:infinite}
.loopm .n1 .fill{animation-name:mfill1}
.loopm .n1 .ring{animation-name:mring1}
.loopm .n1 .num{animation-name:mnum1}
.loopm .p1{animation-name:mpan1}
.loopm .seg1{animation-name:mseg1}
@keyframes mfill1{
0% {opacity:1}
16.657% {opacity:1}
16.667% {opacity:0}
100% {opacity:0}
}
@keyframes mnum1{
0% {fill:var(--on)}
16.657% {fill:var(--on)}
16.667% {fill:var(--ink-muted)}
100% {fill:var(--ink-muted)}
}
@keyframes mpan1{
0% {opacity:0}
1.5% {opacity:1}
15.167% {opacity:1}
16.667% {opacity:0}
100% {opacity:0}
}
@keyframes mring1{
0% {opacity:.9;transform:scale(1)}
5% {opacity:0;transform:scale(2.2)}
100% {opacity:0;transform:scale(2.2)}
}
@keyframes mseg1{
0% {stroke-dashoffset:1;opacity:1}
0% {stroke-dashoffset:1;animation-timing-function:ease-in-out}
14.167% {stroke-dashoffset:0;animation-timing-function:linear}
95% {stroke-dashoffset:0;opacity:1}
99.5% {stroke-dashoffset:0;opacity:0}
100% {stroke-dashoffset:1;opacity:0}
}
.loopm .n2 .fill{animation-name:mfill2}
.loopm .n2 .ring{animation-name:mring2}
.loopm .n2 .num{animation-name:mnum2}
.loopm .p2{animation-name:mpan2}
.loopm .seg2{animation-name:mseg2}
@keyframes mfill2{
0% {opacity:0}
16.657% {opacity:0}
16.667% {opacity:1}
33.323% {opacity:1}
33.333% {opacity:0}
100% {opacity:0}
}
@keyframes mnum2{
0% {fill:var(--ink-muted)}
16.657% {fill:var(--ink-muted)}
16.667% {fill:var(--on)}
33.323% {fill:var(--on)}
33.333% {fill:var(--ink-muted)}
100% {fill:var(--ink-muted)}
}
@keyframes mpan2{
0% {opacity:0}
16.657% {opacity:0}
18.167% {opacity:1}
31.833% {opacity:1}
33.333% {opacity:0}
100% {opacity:0}
}
@keyframes mring2{
0% {opacity:0;transform:scale(1)}
16.657% {opacity:0;transform:scale(1)}
16.667% {opacity:.9;transform:scale(1)}
21.667% {opacity:0;transform:scale(2.2)}
100% {opacity:0;transform:scale(2.2)}
}
@keyframes mseg2{
0% {stroke-dashoffset:1;opacity:1}
16.667% {stroke-dashoffset:1;animation-timing-function:ease-in-out}
30.833% {stroke-dashoffset:0;animation-timing-function:linear}
95% {stroke-dashoffset:0;opacity:1}
99.5% {stroke-dashoffset:0;opacity:0}
100% {stroke-dashoffset:1;opacity:0}
}
.loopm .n3 .fill{animation-name:mfill3}
.loopm .n3 .ring{animation-name:mring3}
.loopm .n3 .num{animation-name:mnum3}
.loopm .p3{animation-name:mpan3}
.loopm .seg3{animation-name:mseg3}
@keyframes mfill3{
0% {opacity:0}
33.323% {opacity:0}
33.333% {opacity:1}
49.99% {opacity:1}
50% {opacity:0}
100% {opacity:0}
}
@keyframes mnum3{
0% {fill:var(--ink-muted)}
33.323% {fill:var(--ink-muted)}
33.333% {fill:var(--on)}
49.99% {fill:var(--on)}
50% {fill:var(--ink-muted)}
100% {fill:var(--ink-muted)}
}
@keyframes mpan3{
0% {opacity:0}
33.323% {opacity:0}
34.833% {opacity:1}
48.5% {opacity:1}
50% {opacity:0}
100% {opacity:0}
}
@keyframes mring3{
0% {opacity:0;transform:scale(1)}
33.323% {opacity:0;transform:scale(1)}
33.333% {opacity:.9;transform:scale(1)}
38.333% {opacity:0;transform:scale(2.2)}
100% {opacity:0;transform:scale(2.2)}
}
@keyframes mseg3{
0% {stroke-dashoffset:1;opacity:1}
33.333% {stroke-dashoffset:1;animation-timing-function:ease-in-out}
47.5% {stroke-dashoffset:0;animation-timing-function:linear}
95% {stroke-dashoffset:0;opacity:1}
99.5% {stroke-dashoffset:0;opacity:0}
100% {stroke-dashoffset:1;opacity:0}
}
.loopm .n4 .fill{animation-name:mfill4}
.loopm .n4 .ring{animation-name:mring4}
.loopm .n4 .num{animation-name:mnum4}
.loopm .p4{animation-name:mpan4}
.loopm .seg4{animation-name:mseg4}
@keyframes mfill4{
0% {opacity:0}
49.99% {opacity:0}
50% {opacity:1}
66.657% {opacity:1}
66.667% {opacity:0}
100% {opacity:0}
}
@keyframes mnum4{
0% {fill:var(--ink-muted)}
49.99% {fill:var(--ink-muted)}
50% {fill:var(--on)}
66.657% {fill:var(--on)}
66.667% {fill:var(--ink-muted)}
100% {fill:var(--ink-muted)}
}
@keyframes mpan4{
0% {opacity:0}
49.99% {opacity:0}
51.5% {opacity:1}
65.167% {opacity:1}
66.667% {opacity:0}
100% {opacity:0}
}
@keyframes mring4{
0% {opacity:0;transform:scale(1)}
49.99% {opacity:0;transform:scale(1)}
50% {opacity:.9;transform:scale(1)}
55% {opacity:0;transform:scale(2.2)}
100% {opacity:0;transform:scale(2.2)}
}
@keyframes mseg4{
0% {stroke-dashoffset:1;opacity:1}
50% {stroke-dashoffset:1;animation-timing-function:ease-in-out}
64.167% {stroke-dashoffset:0;animation-timing-function:linear}
95% {stroke-dashoffset:0;opacity:1}
99.5% {stroke-dashoffset:0;opacity:0}
100% {stroke-dashoffset:1;opacity:0}
}
.loopm .n5 .fill{animation-name:mfill5}
.loopm .n5 .ring{animation-name:mring5}
.loopm .n5 .num{animation-name:mnum5}
.loopm .p5{animation-name:mpan5}
.loopm .seg5{animation-name:mseg5}
@keyframes mfill5{
0% {opacity:0}
66.657% {opacity:0}
66.667% {opacity:1}
83.323% {opacity:1}
83.333% {opacity:0}
100% {opacity:0}
}
@keyframes mnum5{
0% {fill:var(--ink-muted)}
66.657% {fill:var(--ink-muted)}
66.667% {fill:var(--on)}
83.323% {fill:var(--on)}
83.333% {fill:var(--ink-muted)}
100% {fill:var(--ink-muted)}
}
@keyframes mpan5{
0% {opacity:0}
66.657% {opacity:0}
68.167% {opacity:1}
81.833% {opacity:1}
83.333% {opacity:0}
100% {opacity:0}
}
@keyframes mring5{
0% {opacity:0;transform:scale(1)}
66.657% {opacity:0;transform:scale(1)}
66.667% {opacity:.9;transform:scale(1)}
71.667% {opacity:0;transform:scale(2.2)}
100% {opacity:0;transform:scale(2.2)}
}
@keyframes mseg5{
0% {stroke-dashoffset:1;opacity:1}
66.667% {stroke-dashoffset:1;animation-timing-function:ease-in-out}
80.833% {stroke-dashoffset:0;animation-timing-function:linear}
95% {stroke-dashoffset:0;opacity:1}
99.5% {stroke-dashoffset:0;opacity:0}
100% {stroke-dashoffset:1;opacity:0}
}
.loopm .n6 .fill{animation-name:mfill6}
.loopm .n6 .ring{animation-name:mring6}
.loopm .n6 .num{animation-name:mnum6}
.loopm .p6{animation-name:mpan6}
.loopm .seg6{animation-name:mseg6}
@keyframes mfill6{
0% {opacity:0}
83.323% {opacity:0}
83.333% {opacity:1}
99.99% {opacity:1}
100% {opacity:0}
}
@keyframes mnum6{
0% {fill:var(--ink-muted)}
83.323% {fill:var(--ink-muted)}
83.333% {fill:var(--on)}
99.99% {fill:var(--on)}
100% {fill:var(--ink-muted)}
}
@keyframes mpan6{
0% {opacity:0}
83.323% {opacity:0}
84.833% {opacity:1}
98.5% {opacity:1}
100% {opacity:0}
100% {opacity:0}
}
@keyframes mring6{
0% {opacity:0;transform:scale(1)}
83.323% {opacity:0;transform:scale(1)}
83.333% {opacity:.9;transform:scale(1)}
88.333% {opacity:0;transform:scale(2.2)}
100% {opacity:0;transform:scale(2.2)}
}
@keyframes mseg6{
0% {stroke-dashoffset:1;opacity:1}
83.333% {stroke-dashoffset:1;animation-timing-function:ease-in-out}
97.5% {stroke-dashoffset:0;animation-timing-function:linear}
95% {stroke-dashoffset:0;opacity:1}
99.5% {stroke-dashoffset:0;opacity:0}
100% {stroke-dashoffset:1;opacity:0}
}
@media (prefers-reduced-motion:reduce){
.loopm .seg{animation:none;stroke-dashoffset:0}
.loopm .fill,.loopm .ring,.loopm .num{animation:none}
.loopm .pan{animation:none;opacity:0}
.loopm .p1{opacity:1}
}

/* ---------- Utilitaires complémentaires ---------- */
.pile-1 { gap: var(--space-1); }
.section--sans-bas { padding-bottom: 0; }