@font-face { font-family: 'Andika'; font-style: normal; font-weight: 700; font-display: swap; src: url("/medias/polices/andika-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Andika'; font-style: normal; font-weight: 700; font-display: swap; src: url("/medias/polices/andika-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0300-030F, U+1D00-1DBF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; } :root { --bleu: #0a6ee0; --bleu-clair: #e6f0fb; --indigo: #123a63; --nuit: #0c2340; --or: #f2b705; --or-fonce: #815c07; --rouge: #ce1126; --rouge-fonce: #a50d1e; --terre: #bd5833; --terre-texte: #9f4a2b; --bleu-texte: #0961c5; --rouge-texte: #a50d1e; --vert-nzela: #2f7d4f; --vert-nzela-texte: #2f7d4f; --pilier: #5b86b5; --pilier-haut: #7aa3cd; --ocre: #e0973f; --raffia: #f5ead7; --sable: #ecdfc6; --blanc-chaud: #fffdf8; --encre: #2c2117; --encre-doux: #6d5d49; --titre: #14304f; --bord: #e6d8bd; --carte-vive: #fff; --carte-halo: #fff8e8; --entete-fond: rgba(245, 234, 215, .9); --entete-fond-compact: rgba(245, 234, 215, .97); --r-s: 10px; --r-m: 18px; --r-l: 28px; --ombre-s: 0 1px 2px rgba(44, 33, 23, .07), 0 4px 14px rgba(44, 33, 23, .08); --ombre-m: 0 6px 14px rgba(44, 33, 23, .10), 0 24px 48px rgba(44, 33, 23, .17); --largeur: 1120px; --entete-h: 70px; --entete-h-totale: calc(var(--entete-h) + 5px); --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --police-titres: 'Andika', var(--police); --transi: .25s cubic-bezier(.4, 0, .2, 1); --rebond: cubic-bezier(.22, .9, .35, 1.08); --kt-t1: #14559b; --kt-t2: #a8452a; --kt-t3: #1f6b4a; --kt-t4: #6b3a7a; --kt-t5: #8a5a09; --kt-t6: #3f4d5c; --kt-case-fond: rgba(44, 33, 23, .05); --kt-pleine: #6d5d49; --kt-encre: #fff; --vert-fiche: #276a43; --clavier-pied: #cbd8e6; --clavier-voyelle-fond: #fdf3d7; --clavier-paire-fond: #f8e9de; --juste-fond: #e5f4ea; --juste-bord: #2a9d5c; --juste-texte: #10683a; --rate-fond: #fdecee; --ambre-texte: #a05f14; --brq-mille-fond: #fde8eb; --brq-diz-fond: #f8e2d7; --brq-unite-fond: #fcf0cd; --vert: #2a7d4e; --frise: url("/medias/frise.svg"); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) { --raffia: #0e1c30; --sable: #22344f; --blanc-chaud: #16283f; --carte-vive: #1d3251; --carte-halo: #1e344f; --entete-fond: rgba(12, 26, 45, .88); --entete-fond-compact: rgba(12, 26, 45, .97); --bleu-clair: #163150; --or-fonce: #f7c73e; --terre-texte: #d7886b; --bleu-texte: #519ff7; --rouge-texte: #f2908f; --vert-nzela: #79c99a; --vert-nzela-texte: #79c99a; --pilier: #4a6f99; --pilier-haut: #6a90ba; --ndako-bord: rgba(255, 255, 255, .30); --encre: #e7ecf6; --encre-doux: #a9b6cc; --titre: #ecf1fb; --bord: #30455f; --ombre-s: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .35); --ombre-m: 0 6px 14px rgba(0, 0, 0, .42), 0 24px 48px rgba(0, 0, 0, .5); --kt-t1: #8fc0f2; --kt-t2: #efa88e; --kt-t3: #86d3ae; --kt-t4: #cfa6dd; --kt-t5: #e6bd63; --kt-t6: #b8c6d6; --kt-case-fond: rgba(255, 255, 255, .06); --kt-pleine: #7d8ea3; --kt-encre: #0e1c30; --vert-fiche: #79c99a; --clavier-pied: #3f5878; --clavier-voyelle-fond: #3c3316; --clavier-paire-fond: #3d2b1e; --juste-fond: #17321f; --juste-bord: #46a86d; --juste-texte: #86d3ae; --rate-fond: #3a1e21; --ambre-texte: #eeb256; --brq-mille-fond: #3a1e21; --brq-diz-fond: #3d2b1e; --brq-unite-fond: #3c3316; } } :root[data-theme="dark"] { --raffia: #0e1c30; --sable: #22344f; --blanc-chaud: #16283f; --carte-vive: #1d3251; --carte-halo: #1e344f; --entete-fond: rgba(12, 26, 45, .88); --entete-fond-compact: rgba(12, 26, 45, .97); --bleu-clair: #163150; --or-fonce: #f7c73e; --terre-texte: #d7886b; --bleu-texte: #519ff7; --rouge-texte: #f2908f; --vert-nzela: #79c99a; --vert-nzela-texte: #79c99a; --pilier: #4a6f99; --pilier-haut: #6a90ba; --ndako-bord: rgba(255, 255, 255, .30); --encre: #e7ecf6; --encre-doux: #a9b6cc; --titre: #ecf1fb; --bord: #30455f; --ombre-s: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .35); --ombre-m: 0 6px 14px rgba(0, 0, 0, .42), 0 24px 48px rgba(0, 0, 0, .5); --kt-t1: #8fc0f2; --kt-t2: #efa88e; --kt-t3: #86d3ae; --kt-t4: #cfa6dd; --kt-t5: #e6bd63; --kt-t6: #b8c6d6; --kt-case-fond: rgba(255, 255, 255, .06); --kt-pleine: #7d8ea3; --kt-encre: #0e1c30; --vert-fiche: #79c99a; --clavier-pied: #3f5878; --clavier-voyelle-fond: #3c3316; --clavier-paire-fond: #3d2b1e; --juste-fond: #17321f; --juste-bord: #46a86d; --juste-texte: #86d3ae; --rate-fond: #3a1e21; --ambre-texte: #eeb256; --brq-mille-fond: #3a1e21; --brq-diz-fond: #3d2b1e; --brq-unite-fond: #3c3316; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 106.25%; overflow-x: clip; } @media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { margin: 0; font-family: var(--police); color: var(--encre); background: var(--raffia); line-height: 1.7; overflow-x: clip; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; display: block; } [hidden] { display: none !important; } a { color: var(--bleu-texte); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { line-height: 1.14; font-weight: 700; color: var(--titre); font-family: var(--police-titres); text-wrap: balance; letter-spacing: -.01em; } p { text-wrap: pretty; } ::selection { background: var(--or); color: var(--nuit); } .enveloppe { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); } .sr-uniquement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .lien-evitement { position: absolute; left: 8px; top: -60px; z-index: 200; background: var(--nuit); color: #fff; padding: .6rem 1rem; border-radius: var(--r-s); transition: top var(--transi); } .lien-evitement:focus { top: 8px; } :focus-visible { outline: 3px solid var(--terre); outline-offset: 2px; border-radius: 4px; } .i { width: 1.4em; height: 1.4em; fill: currentColor; } .entete { position: sticky; top: 0; z-index: 100; background: var(--entete-fond); backdrop-filter: blur(10px); border-bottom: 1px solid var(--bord); transition: box-shadow var(--transi), background var(--transi); } .entete.est-compact { box-shadow: var(--ombre-s); background: var(--entete-fond-compact); } .entete-contenu { max-width: var(--largeur); margin-inline: auto; padding: 0 clamp(1rem, 4vw, 2rem); min-height: var(--entete-h); display: flex; align-items: center; gap: 1rem; } .entete-liseret { display: block; height: 4px; background: linear-gradient(90deg, var(--bleu) 0 34%, var(--or) 34% 66%, var(--rouge) 66% 100%); } .marque { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--titre); } .marque:hover { text-decoration: none; } .marque-drapeau { border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.28); flex: none; } .marque-nom { font-size: 1.3rem; letter-spacing: -.01em; white-space: nowrap; font-family: var(--police-titres); font-weight: 700; } .marque-accent { color: var(--terre-texte); } .nav { display: flex; align-items: center; gap: .85rem; } .nav-tete { display: none; } .langues { margin-left: auto; } .nav-liste { display: flex; gap: .1rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } @media (min-width: 1025px){ .entete-contenu { position: relative; } .nav-liste { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); flex-wrap: nowrap; } } .nav-liste a { display: inline-block; padding: .42rem .5rem; border-radius: var(--r-s); color: var(--encre); font-weight: 600; font-size: .9rem; position: relative; white-space: nowrap; } .nav-liste a:hover { background: var(--bleu-clair); text-decoration: none; } .nav-liste a[aria-current="page"] { color: var(--bleu-texte); } .nav-liste a::after { content: ""; position: absolute; left: .6rem; right: .6rem; bottom: .12rem; height: 3px; background: var(--or); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform var(--transi); } .nav-liste a:hover::after, .nav-liste a[aria-current="page"]::after { transform: scaleX(1); } .nav-groupe { position: relative; } .nav-hub { display: inline-flex; align-items: center; gap: .3rem; position: relative; border: 0; background: transparent; cursor: pointer; font: inherit; padding: .42rem .5rem; border-radius: var(--r-s); color: var(--encre); font-weight: 600; font-size: .9rem; white-space: nowrap; } .nav-hub:hover { background: var(--bleu-clair); } .nav-hub .nav-chevron { width: .95em; height: .95em; flex: none; transition: transform var(--transi); } .nav-groupe.est-ouvert > .nav-hub .nav-chevron { transform: rotate(180deg); } .nav-hub::after { content: ""; position: absolute; left: .6rem; right: .6rem; bottom: .12rem; height: 3px; background: var(--or); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform var(--transi); } .nav-hub:hover::after, .nav-hub.est-actif::after { transform: scaleX(1); } .nav-hub.est-actif { color: var(--bleu-texte); } @media (min-width: 1025px){ .nav-sous { position: absolute; top: calc(100% + .45rem); left: 0; z-index: 110; min-width: 200px; margin: 0; padding: .45rem; list-style: none; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); box-shadow: var(--ombre-m); display: none; } .nav-sous::before { content: ""; position: absolute; left: 0; right: 0; top: -.55rem; height: .55rem; } .nav-groupe.est-ouvert .nav-sous, .nav-groupe:hover .nav-sous { display: block; animation: monterCourt .22s ease both; } .nav-sous a { display: block; padding: .5rem .7rem; } .nav-sous a::after { display: none; } .nav-sous a[aria-current="page"] { background: var(--bleu-clair); } } .langues { position: relative; display: inline-flex; gap: .2rem; padding: .22rem; background: var(--sable); border-radius: 999px; } .langue { border: 0; background: transparent; cursor: pointer; font: inherit; font-weight: 700; font-size: .8rem; color: var(--encre-doux); padding: .32rem .58rem; border-radius: 999px; transition: var(--transi); } .langue:hover { color: var(--titre); } .langue.est-actif { background: var(--blanc-chaud); color: var(--terre-texte); box-shadow: var(--ombre-s); animation: pop .3s var(--rebond); } .theme-btn { display: inline-flex; align-items: center; gap: .32rem; margin-left: .4rem; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: .8rem; color: var(--encre-doux); padding: .34rem .62rem; border-radius: 999px; background: var(--sable); transition: var(--transi); } .theme-btn:hover { color: var(--titre); } .theme-btn .i { width: 1.02em; height: 1.02em; } .theme-btn[hidden] { display: none; } .theme-btn[data-mode="light"], .theme-btn[data-mode="dark"] { background: var(--blanc-chaud); color: var(--terre-texte); box-shadow: var(--ombre-s); } .theme-btn--tiroir { display: none; } @media (max-width: 1024px){ .theme-btn--entete { display: inline-flex; order: -1; margin-left: .3rem; margin-right: auto; padding: .34rem .42rem; flex: none; min-width: 24px; min-height: 24px; justify-content: center; } .theme-btn--entete .theme-mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .entete a.marque { order: -2; } .entete .langues { margin-left: 0; } } @media (min-width: 1025px){ .theme-btn--entete .theme-mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .theme-btn--entete { padding: .34rem .45rem; } a.marque { order: -2; } .theme-btn--entete { order: -1; margin-left: 0; } } @media (min-width: 1025px) and (max-width: 1140px){ .nav-liste a, .nav-hub { padding-left: .32rem; padding-right: .32rem; } .nav-liste a::after, .nav-hub::after { left: .42rem; right: .42rem; } } .langue-bulle { position: absolute; top: 100%; left: 50%; margin-top: .5rem; transform: translate(-50%, -.3rem); padding: .35rem .7rem; background: var(--nuit); color: #fff; font-size: .78rem; font-weight: 700; border-radius: 999px; white-space: nowrap; box-shadow: var(--ombre-m); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .langue-bulle.est-visible { opacity: 1; transform: translate(-50%, 0); } @media (prefers-reduced-motion: reduce){ .langue-bulle { transition: opacity .2s ease; } } .burger { display: none; flex: none; border: 1px solid var(--bord); background: var(--blanc-chaud); border-radius: var(--r-s); padding: .38rem; cursor: pointer; color: var(--titre); } .burger .i-fermer { display: none; } .burger[aria-expanded="true"] .i-menu { display: none; } .burger[aria-expanded="true"] .i-fermer { display: block; } .nav-voile { position: fixed; inset: 0; z-index: 90; background: rgba(12, 35, 64, .45); backdrop-filter: blur(2px); animation: fondu .3s ease both; } .btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.5rem; border-radius: 999px; font-weight: 700; font-family: var(--police-titres); border: 2px solid transparent; cursor: pointer; font-size: 1.02rem; transition: transform var(--transi), box-shadow var(--transi), background var(--transi); } .btn:hover { text-decoration: none; transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(.97); transition-duration: .08s; } .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform: translateX(-180%) skewX(-18deg); transition: transform .7s ease; } .btn:hover::after { transform: translateX(320%) skewX(-18deg); } .btn-primaire { background: var(--rouge); color: #fff; box-shadow: 0 8px 20px rgba(206, 17, 38, .3); } .btn-primaire:hover { background: var(--rouge-fonce); color: #fff; } .btn-or { background: var(--or); color: var(--nuit); box-shadow: 0 8px 20px rgba(242, 183, 5, .32); } .btn-or:hover { background: #ffc721; color: var(--nuit); } .btn-fantome { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.55); } .btn-fantome:hover { background: rgba(255,255,255,.16); color: #fff; } .btn .i { width: 1.15em; height: 1.15em; } .hero { position: relative; overflow: hidden; color: #fff; background-color: var(--nuit); background-image: radial-gradient(820px 480px at 92% -15%, rgba(242,183,5,.20), transparent 62%), linear-gradient(102deg, rgba(10,30,56,.97) 40%, rgba(16,52,92,.74) 70%, rgba(16,52,92,.55) 100%), url("/medias/drapeau-rdc.svg"); background-repeat: no-repeat, no-repeat, no-repeat; background-position: center, center, right -30px center; background-size: auto, cover, auto 128%; } .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("/medias/motif-kuba.svg") 0 0/48px repeat; opacity: .1; animation: deriveMotif 60s linear infinite; } .hero-grille { position: relative; display: grid; gap: clamp(1.8rem, 4vw, 3rem); padding-block: clamp(2.6rem, 8vw, 5.5rem) clamp(3rem, 8vw, 5rem); align-items: center; } .hero-contenu { position: relative; max-width: 730px; } .hero-video { position: relative; display: grid; gap: .55rem; animation: monter .6s .25s both; } .hero-video-facade { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-l); overflow: hidden; cursor: pointer; background: var(--nuit); box-shadow: 0 18px 42px rgba(6, 20, 40, .45); outline: 2px solid rgba(255, 255, 255, .22); outline-offset: 0; transition: transform var(--transi), outline-color var(--transi), box-shadow var(--transi); } .hero-video-facade:hover, .hero-video-facade:focus-visible { transform: translateY(-3px); outline-color: var(--or); box-shadow: 0 22px 50px rgba(6, 20, 40, .55); } .hero-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: var(--or); box-shadow: 0 6px 22px rgba(6, 20, 40, .5); transition: transform var(--transi), background var(--transi); } .hero-video-legende { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem .9rem .7rem; font-weight: 700; font-size: .95rem; color: #fff; text-align: left; background: linear-gradient(to top, rgba(6, 20, 40, .88), transparent); } @media (prefers-reduced-motion: reduce){ .hero-video-facade:hover, .hero-video-facade:focus-visible { transform: none; } } .acc-suite { display: none; } @media (max-width: 979px) and (max-height: 1100px){ .acc-suite { position: fixed; left: 50%; z-index: 80; bottom: calc(clamp(.9rem, 3vw, 1.6rem) + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: .45rem; padding: .52rem 1.05rem; border-radius: 999px; text-decoration: none; border: 1px solid rgba(242, 183, 5, .55); background: rgba(10, 30, 56, .9); color: #fff; font-weight: 700; font-size: .92rem; white-space: nowrap; box-shadow: var(--ombre-m); backdrop-filter: blur(6px); transform: translateX(-50%); transition: opacity var(--transi), transform var(--transi); } } .acc-suite .i { width: 1.15em; height: 1.15em; color: var(--or); animation: acc-suite-bond 1.9s ease-in-out infinite; } @keyframes acc-suite-bond { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } .acc-suite.est-partie, body.menu-ouvert .acc-suite { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(12px); } @media (prefers-reduced-motion: reduce){ .acc-suite { transition: none; } .acc-suite .i { animation: none; } } #acc-vivant { scroll-margin-top: calc(var(--entete-h) + .8rem); } .hero-sous-titre { font-size: clamp(1.08rem, 2.4vw, 1.32rem); color: #e7eef7; margin: 0 0 2rem; animation: monter .7s .3s both; } .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: var(--frise) repeat-x; background-size: auto 16px; animation: deriveFrise 26s linear infinite; } @media (prefers-reduced-motion: no-preference){ @supports (animation-timeline: scroll()) { .hero-contenu { animation: heroRecul linear both; animation-timeline: scroll(); animation-range: 0 90vh; } } } .section { padding: clamp(3rem, 8vw, 5rem) 0; position: relative; } .section-alt { background: var(--blanc-chaud); } .section h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0 0 .6rem; } .section-tete p { color: var(--encre-doux); font-size: 1.1rem; margin: 0; } .vision { background: linear-gradient(180deg, #fbf3e3, var(--raffia)); } .grille-cartes { display: grid; gap: 1.4rem; grid-template-columns: 1fr; } .carte { background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-l); border-top: 5px solid var(--ocre); padding: 1.7rem; box-shadow: var(--ombre-s); transition: transform var(--transi), box-shadow var(--transi), border-color var(--transi); will-change: transform; } .carte:hover { transform: translateY(-5px); box-shadow: var(--ombre-m); } .grille-cartes .carte:nth-child(1) { border-top-color: var(--terre); } .grille-cartes .carte:nth-child(2) { border-top-color: var(--ocre); } .grille-cartes .carte:nth-child(3) { border-top-color: var(--bleu); } .carte-num { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; font-weight: 700; font-size: 1.3rem; font-family: var(--police-titres); color: #fff; background: var(--ocre); margin-bottom: 1rem; box-shadow: inset 0 0 0 4px rgba(255,255,255,.35), 0 6px 14px rgba(44,33,23,.18); } .grille-cartes .carte:nth-child(1) .carte-num { background: var(--terre); } .grille-cartes .carte:nth-child(2) .carte-num { color: var(--nuit); } .grille-cartes .carte:nth-child(3) .carte-num { background: var(--bleu); } .carte h3, .carte h2 { font-size: 1.3rem; margin: 0 0 .5rem; } .carte p { margin: 0; color: var(--encre-doux); } .cta-final { text-align: center; } .cta-carte { background: url("/medias/motif-kuba.svg") 0 0/48px repeat, linear-gradient(150deg, #17456f, var(--nuit)); color: #fff; border-radius: var(--r-l); padding: clamp(2.2rem, 6vw, 3.6rem); position: relative; overflow: hidden; box-shadow: var(--ombre-m); } .cta-carte::before { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(23,69,111,.86), rgba(12,35,64,.92)); } .cta-carte > * { position: relative; } .cta-carte h2 { color: #fff; } .cta-carte p { color: #e7eef7; max-width: 490px; margin: .6rem auto 1.7rem; } .pied { position: relative; background: var(--nuit); color: #c9d6e8; margin-top: 2rem; } .pied::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 16px; background: var(--frise) repeat-x; background-size: auto 16px; transform: scaleY(-1); } .pied-contenu { max-width: 680px; margin-inline: auto; padding: 2.7rem clamp(1rem, 4vw, 2rem) 1.4rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem; } .pied .marque-nom { color: #fff; } .pied .marque-accent { color: var(--ocre); } .pied-slogan { color: #aebfd6; margin: 0; max-width: 44ch; } .pied-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; margin-top: .4rem; } .pied-nav a, .pied-nav .pied-lien { color: #c9d6e8; font-weight: 600; font-size: .95rem; } .pied-nav a:hover, .pied-nav .pied-lien:hover { color: #fff; } .pied-lien { background: none; border: 0; margin: 0; padding: 0; font-family: inherit; cursor: pointer; } .pied-bas { border-top: 1px solid rgba(255,255,255,.12); max-width: 680px; margin-inline: auto; padding: 1.1rem clamp(1rem, 4vw, 2rem); display: flex; flex-wrap: wrap; gap: .6rem 1.3rem; align-items: center; justify-content: space-between; } @media (max-width: 560px){ .pied-bas { justify-content: center; } } .pied-copyright { margin: 0; font-size: .86rem; color: #9fb1cb; } .pied-bas-liens { list-style: none; display: flex; gap: 1.2rem; margin: 0; padding: 0; } .pied-bas-liens a { display: inline-flex; align-items: center; gap: .35rem; font-size: .86rem; color: #c9d6e8; } .pied-bas-liens a:hover { color: #fff; } [data-apparait] { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; } [data-apparait].est-visible { opacity: 1; transform: none; } .js [data-apparait] { will-change: opacity, transform; } @media (min-width: 760px){ .grille-cartes { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1024px){ .burger { display: inline-flex; } .nav { position: fixed; top: var(--entete-h-totale); right: 0; z-index: 95; height: calc(100dvh - var(--entete-h-totale)); width: min(84vw, 340px); margin: 0; padding: 0 0 2rem; flex-direction: column; align-items: stretch; gap: 0; color: #eaf1fb; background-color: var(--nuit); background-image: radial-gradient(560px 300px at 118% -8%, rgba(242,183,5,.20), transparent 60%), linear-gradient(158deg, rgba(10,30,56,.98) 40%, rgba(13,38,68,.94) 100%); background-repeat: no-repeat, no-repeat; background-position: center, center; background-size: auto, cover; border-left: 1px solid rgba(242,183,5,.28); box-shadow: -16px 0 42px rgba(6,20,40,.42); transform: translateX(105%); transition: transform var(--transi); overflow-y: auto; overscroll-behavior: contain; } .nav::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("/medias/motif-kuba.svg") 0 0/46px repeat; opacity: .06; } .menu-ouvert .nav { transform: translateX(0); } html:has(body.menu-ouvert) { overflow: hidden; } .nav-tete { display: none; } .nav-tete::after { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; bottom: 0; height: 12px; background: var(--frise) repeat-x; background-size: auto 12px; opacity: .85; } .nav-liste { position: relative; flex-direction: column; gap: .12rem; padding: 1rem .8rem; } .nav-liste a { display: flex; align-items: center; justify-content: space-between; padding: .8rem .9rem; font-size: 1.06rem; font-weight: 600; color: #eaf1fb; border-radius: var(--r-s); transition: background .18s, color .18s; } .nav-liste a:hover { background: rgba(255,255,255,.08); text-decoration: none; } .nav-liste a::after { content: "›"; position: static; transform: none; width: auto; height: auto; background: none; color: rgba(255,255,255,.38); font-size: 1.25rem; line-height: 1; font-weight: 400; } .nav-liste a[aria-current="page"] { background: rgba(242,183,5,.15); color: var(--or); font-weight: 800; } .nav-liste a[aria-current="page"]::after { color: var(--or); } .nav-groupe { position: static; } .nav-hub { pointer-events: none; width: 100%; background: transparent; padding: 1.15rem .9rem .35rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .13em; color: var(--or); font-weight: 800; } .nav-hub .nav-chevron { display: none; } .nav-hub::after { display: none; } .nav-hub.est-actif { color: var(--or); } .nav-sous { list-style: none; margin: 0 0 0 1.3rem; padding: 0 0 0 .35rem; border-left: 2px solid rgba(242,183,5,.25); } .nav-sous a { font-size: 1.04rem; } .entete-contenu { gap: .5rem; } .langues { gap: .1rem; padding: .18rem; } .langue { padding: .3rem .42rem; font-size: .74rem; } .marque-nom { font-size: 1.15rem; } .menu-ouvert .nav-tete { animation: monterCourt .34s ease backwards; } .menu-ouvert .nav-liste > li { animation: monterCourt .34s ease backwards; } .menu-ouvert .nav-liste > li:nth-child(1) { animation-delay: .06s; } .menu-ouvert .nav-liste > li:nth-child(2) { animation-delay: .10s; } .menu-ouvert .nav-liste > li:nth-child(3) { animation-delay: .14s; } .menu-ouvert .nav-liste > li:nth-child(4) { animation-delay: .18s; } .menu-ouvert .nav-liste > li:nth-child(5) { animation-delay: .22s; } } @media (max-width: 560px){ .entete-contenu { gap: .3rem; padding-inline: .7rem; } .marque { gap: .4rem; } .entete a.marque .marque-drapeau { width: 28px; height: 21px; } .entete a.marque .marque-nom { font-size: .98rem; } .langues { gap: .08rem; padding: .16rem; } .langue { padding: .34rem .26rem; font-size: .72rem; min-width: 24px; } } @media (max-width: 1024px){ .entete-contenu { position: relative; } } .theme-bulle { position: absolute; top: calc(100% - .25rem); left: clamp(1rem, 4vw, 2rem); z-index: 3; pointer-events: none; padding: .3rem .6rem; border-radius: 999px; background: var(--nuit); color: #f4f7fb; font-size: .74rem; font-weight: 700; white-space: nowrap; box-shadow: var(--ombre-s); opacity: 0; transform: translate(-50%, -.25rem); transition: opacity var(--transi), transform var(--transi); } .theme-bulle.est-visible { opacity: 1; transform: translate(-50%, 0); } @media (prefers-reduced-motion: reduce){ .theme-bulle { transition: none; transform: translate(-50%, 0); } } @media (min-width: 1025px){ .theme-bulle { display: none; } } @media (max-width: 400px){ .entete-contenu { gap: .25rem; padding-inline: .5rem; } .entete a.marque .marque-drapeau { width: 24px; height: 18px; } .entete a.marque .marque-nom { font-size: .84rem; } } @media (max-width: 359px){ .theme-btn--entete { display: none; } .nav-tete { position: relative; display: flex; align-items: center; padding: 1rem 1.4rem 1.25rem; } .theme-btn--tiroir { display: inline-flex; margin-left: auto; background: rgba(255, 255, 255, .12); color: #e7ecf6; } .theme-btn--tiroir:hover { background: rgba(255, 255, 255, .2); color: #fff; } .theme-btn--tiroir[data-mode="light"], .theme-btn--tiroir[data-mode="dark"] { background: var(--or); color: #3a2a05; box-shadow: none; } } @media (min-width: 1025px){ .nav-voile { display: none !important; } } @media (max-width: 640px){ .hero-actions .btn { flex: 1 1 auto; justify-content: center; } } .banniere-page { position: relative; overflow: hidden; color: #fff; background-color: var(--nuit); background-image: radial-gradient(640px 320px at 88% -30%, rgba(242,183,5,.16), transparent 62%), linear-gradient(102deg, rgba(10,30,56,.97) 40%, rgba(16,52,92,.74) 70%, rgba(16,52,92,.55) 100%), url("/medias/drapeau-rdc.svg"); background-repeat: no-repeat, no-repeat, no-repeat; background-position: center, center, right -30px top -50px; background-size: auto, cover, calc(66% + 30px) auto; } .banniere-page::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("/medias/motif-kuba.svg") 0 0/48px repeat; opacity: .09; animation: deriveMotif 60s linear infinite; } .banniere-page::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--frise) repeat-x; background-size: auto 14px; animation: deriveFrise 26s linear infinite; } @media (max-width: 640px){ .banniere-page { background-image: radial-gradient(640px 320px at 88% -30%, rgba(242,183,5,.16), transparent 62%), linear-gradient(90deg, rgba(10,30,56,.97) 30%, rgba(16,52,92,.72) 64%, rgba(16,52,92,.52) 100%), url("/medias/drapeau-rdc.svg"); background-position: center, center, right center; background-size: auto, cover, cover; } } .banniere-contenu { position: relative; padding-block: clamp(2rem, 5vw, 3.2rem) clamp(2.2rem, 5vw, 3.4rem); max-width: 730px; } .banniere-page h1 { color: #fff; font-size: clamp(1.9rem, 5vw, 2.8rem); margin: 0 0 .6rem; text-shadow: 0 2px 18px rgba(6, 20, 40, .45); animation: monter .6s .05s both; } .banniere-intro { font-size: clamp(1.02rem, 2.2vw, 1.18rem); color: #e7eef7; margin: 0; max-width: 620px; animation: monter .6s .18s both; } .dico-champ, .faq-champ { position: relative; flex: 1 1 260px; max-width: 520px; } .dico-tri-label { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; color: var(--encre-doux); white-space: nowrap; } .dico-select { font: inherit; font-weight: 600; padding: .7rem 2.4rem .7rem 1rem; border: 2px solid var(--bord); border-radius: 999px; background: var(--blanc-chaud); color: var(--encre); cursor: pointer; appearance: none; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236d5d49' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; } .dico-select:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(10,110,224,.15); } .dico-loupe, .faq-loupe { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); width: 1.2em; height: 1.2em; color: var(--encre-doux); pointer-events: none; } #dico-recherche, #bible-recherche, #phr-recherche, #faq-recherche { width: 100%; font: inherit; padding: .8rem 1rem .8rem 2.7rem; border: 2px solid var(--bord); border-radius: 999px; background: var(--blanc-chaud); color: var(--encre); transition: border-color var(--transi), box-shadow var(--transi); } #dico-recherche:focus, #bible-recherche:focus, #phr-recherche:focus, #faq-recherche:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(10,110,224,.15); } #faq-recherche { padding-right: 2.8rem; } .dico-note { margin: 0; font-size: .88rem; color: var(--encre-doux); font-style: italic; } .mot { background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); box-shadow: var(--ombre-s); overflow: hidden; transition: border-color var(--transi), box-shadow var(--transi); animation: monterCourt .3s ease backwards; } .mot:nth-child(1) { animation-delay: .02s; } .mot:nth-child(2) { animation-delay: .05s; } .mot:nth-child(3) { animation-delay: .08s; } .mot:nth-child(4) { animation-delay: .11s; } .mot:nth-child(5) { animation-delay: .14s; } .mot:nth-child(6) { animation-delay: .17s; } .mot:nth-child(7) { animation-delay: .20s; } .mot:nth-child(8) { animation-delay: .23s; } .mot:hover { border-color: var(--ocre); box-shadow: var(--ombre-m); } .mot.est-ouvert { border-color: var(--ocre); } .mot-toggle[aria-expanded="true"] .mot-chevron { transform: rotate(180deg); } .mot-niveau { flex: none; width: .58rem; height: .58rem; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); } .mot-niveau--1 { background: #1f8a4c; } .mot-niveau--2 { background: var(--or); } .mot-niveau--3 { background: var(--terre); } .dico-legende { display: flex; flex-wrap: wrap; gap: 1.1rem; justify-content: center; margin: .1rem 0 0; font-size: .82rem; color: var(--encre-doux); } .dico-legende-item { display: inline-flex; align-items: center; gap: .4rem; } .dico-legende .mot-niveau { box-shadow: none; } .dico-astuce-ico .i { width: 1.1em; height: 1.1em; animation: nudgeBas 1.8s ease-in-out infinite; } .dico-son { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; flex: none; background: var(--bleu-clair); color: var(--bleu-texte); transition: var(--transi); } .dico-son:hover { background: var(--or); color: var(--nuit); transform: scale(1.12); box-shadow: 0 4px 12px rgba(242,183,5,.4); } .dico-son:active { transform: scale(.92); transition-duration: .08s; } .dico-son .i { width: 1.15em; height: 1.15em; } .meth-section h3 { font-size: 1.3rem; margin: 2.2rem 0 .9rem; } .meth-note { max-width: 640px; margin: 1rem 0 0; font-size: .92rem; font-style: italic; color: var(--encre-doux); } .ton-syllabe.est-haut { color: var(--terre-texte); transform: translateY(-.14em); } .paire { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; padding: .4rem 0; border-top: 1px dashed var(--bord); } .volets-nav { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.6rem; } .volet-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.15rem; border-radius: 999px; cursor: pointer; border: 1px solid var(--bord); background: var(--blanc-chaud); font-family: var(--police-titres); font-weight: 700; font-size: 1rem; color: var(--titre); box-shadow: var(--ombre-s); transition: transform var(--transi), background var(--transi), color var(--transi); } .volet-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform: translateX(-180%) skewX(-18deg); transition: transform .7s ease; pointer-events: none; } .volet-btn:hover::after { transform: translateX(320%) skewX(-18deg); } .volet-btn:hover { transform: translateY(-2px); } .volet-btn.est-actif { background: var(--terre); border-color: transparent; color: #fff; animation: pop .3s var(--rebond); } .volet-num { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--sable); color: var(--titre); font-size: .85rem; } .volet-btn.est-actif .volet-num { background: rgba(0, 0, 0, .22); color: #fff; } .volet { animation: monterCourt .35s var(--rebond) both; } .volet[hidden] { display: none; } .section .nb-titre-bloc { font-size: 1.35rem; margin: 3.2rem 0 .9rem; } .section .nb-titre-bloc:first-of-type { margin-top: 2.2rem; } .nb-carte { display: grid; gap: .15rem; justify-items: center; text-align: center; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); border-top: 4px solid var(--bleu); padding: .85rem .5rem .7rem; box-shadow: var(--ombre-s); } .nb-carte:nth-child(3n+2) { border-top-color: var(--or); } .nb-carte:nth-child(3n) { border-top-color: var(--rouge); } .nb-chiffre { font-family: var(--police-titres); font-weight: 700; font-size: 2.1rem; line-height: 1.1; color: var(--titre); } .nb-mot { font-weight: 800; color: var(--terre-texte); } .brq { display: inline-block; padding: .22rem .6rem; border-radius: 999px; font-weight: 800; font-size: .95rem; } .brq--mille { background: var(--brq-mille-fond); color: var(--rouge-texte); } .brq--cent { background: var(--bleu-clair); color: var(--bleu-texte); } .brq--diz { background: var(--brq-diz-fond); color: var(--terre-texte); } .brq--unite { background: var(--brq-unite-fond); color: var(--or-fonce); } .brq--et { background: var(--sable); color: var(--encre-doux); font-weight: 600; } .nb-exemples { display: grid; gap: .6rem; max-width: 760px; } .nb-exemple { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .7rem; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); padding: .6rem .8rem; box-shadow: var(--ombre-s); } .nb-exemple-chiffre { font-family: var(--police-titres); font-weight: 700; font-size: 1.35rem; color: var(--titre); min-width: 3.1rem; text-align: right; } .nb-exemple-egal { color: var(--encre-doux); } .nb-exemple-mots { flex: 1; display: flex; flex-wrap: wrap; gap: .35rem; } .nb-exemple-son { margin-left: auto; } .palier { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); padding: .5rem .7rem; box-shadow: var(--ombre-s); } .palier-chiffre { font-family: var(--police-titres); font-weight: 700; color: var(--bleu-texte); min-width: 3.6rem; } .palier-mot { flex: 0 1 auto; min-width: 0; font-weight: 800; color: var(--terre-texte); } .palier-gloss { flex: 1 1 auto; min-width: 0; font-size: .9rem; color: var(--encre-doux); } .palier .dico-son { margin-left: auto; } .palier--jour .palier-corps { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .palier--jour .palier-gloss { font-size: .85rem; } .compteur { max-width: 680px; margin: 0 auto; display: grid; gap: 1.1rem; justify-items: center; background: var(--blanc-chaud); border: 1px solid var(--bord); border-top: 5px solid var(--or); border-radius: var(--r-l); padding: 1.5rem 1.2rem; box-shadow: var(--ombre-m); } @media (max-width: 560px){ .nb-chiffre { font-size: 1.7rem; } .volet-btn { padding: .45rem .85rem; font-size: .92rem; } .nb-exemple-chiffre { min-width: 2.3rem; font-size: 1.15rem; } } .vis-mot-corps p { margin: 0 0 1rem; color: var(--encre-doux); line-height: 1.75; } .vis-bandeau::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("/medias/motif-kuba.svg") 0 0/48px repeat; opacity: .1; animation: deriveMotif 60s linear infinite; } .vis-bandeau::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: var(--frise) repeat-x; background-size: auto 16px; animation: deriveFrise 26s linear infinite; } .vis-citation span { background: linear-gradient(110deg, #fff 38%, var(--or) 50%, #fff 62%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: brillance 5.5s linear infinite; } .vis-citation::before, .vis-citation::after { color: var(--or); font-size: 1.35em; line-height: 0; vertical-align: -0.32em; display: inline-block; animation: pouls 3.2s ease-in-out infinite; } .mission-texte::before, .mission-texte::after { content: ""; position: absolute; left: 12%; right: 12%; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--bleu), var(--or), var(--rouge), var(--bleu)); background-size: 200% 100%; animation: couler 9s linear infinite; } .nb-titre-bloc.centre { text-align: center; } .valeurs { display: grid; gap: 1rem; grid-template-columns: 1fr; } .valeur { position: relative; overflow: hidden; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-l); border-top: 5px solid var(--terre); padding: 1.4rem 1.5rem 1.2rem; box-shadow: var(--ombre-s); will-change: transform; transition: box-shadow var(--transi); } .valeur:hover { box-shadow: var(--ombre-m); } .valeurs .valeur:nth-child(2) { border-top-color: var(--or); } .valeurs .valeur:nth-child(3) { border-top-color: var(--bleu); } .valeurs .valeur:nth-child(4) { border-top-color: var(--rouge); } .valeur h3 { margin: 0 0 .45rem; color: var(--titre); transition: color var(--transi); } .valeur:hover h3 { color: var(--terre-texte); } .valeur p { margin: 0; color: var(--encre-doux); } @media (min-width: 640px){ .valeurs { grid-template-columns: repeat(2, 1fr); } } .promesses { list-style: none; margin: 0 auto; padding: 0; max-width: 680px; display: grid; gap: .7rem; } .promesses li { position: relative; padding: .8rem 1rem .8rem 2.9rem; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); box-shadow: var(--ombre-s); transition: transform var(--transi), box-shadow var(--transi); } .promesses li:hover { transform: translateX(6px); box-shadow: var(--ombre-m); } .promesses li::before { content: '★'; position: absolute; left: 1rem; top: .72rem; color: var(--or); font-size: 1.15rem; animation: scintille 2.8s ease-in-out infinite; } .promesses li:nth-child(2)::before { animation-delay: .7s; } .promesses li:nth-child(3)::before { animation-delay: 1.4s; } .promesses li:nth-child(4)::before { animation-delay: 2.1s; } .frise { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; position: relative; } .frise::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 9px; width: 4px; border-radius: 2px; background: linear-gradient(180deg, var(--bleu), var(--or), var(--rouge)); } .vinyle { transform-box: fill-box; transform-origin: center; animation: tourner 7s linear infinite; } .note { animation: flotter 3.6s ease-in-out infinite; } .carte-legende li { display: flex; align-items: center; gap: .6rem; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: 999px; padding: .45rem 1rem; box-shadow: var(--ombre-s); } #his-chiffres { list-style: none; margin: 0 auto; padding: 0; justify-content: center; grid-template-columns: repeat(2, minmax(118px, 150px)); } @media (min-width: 560px){ #his-chiffres { grid-template-columns: repeat(4, minmax(112px, 148px)); } } @media (max-width: 699.98px){ .bible-outils .dico-tri-label > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } } .bible-suggestions button:hover, .bible-suggestions button:focus-visible { background: var(--raffia); } @keyframes bibleTourne { from { opacity: 0; transform: perspective(1600px) rotateY(-9deg) translateY(6px); } to { opacity: 1; transform: perspective(1600px) rotateY(0) translateY(0); } } .verset { display: grid; grid-template-columns: 1.9rem 1fr; gap: .35rem .9rem; align-items: start; padding: .8rem 0; border-bottom: 1px solid var(--bord); } .verset-ln p { margin: 0; color: var(--encre); font-weight: 500; flex: 1; } @media (prefers-reduced-motion: no-preference){ @keyframes versetApparait { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } } @media (min-width: 760px){ .verset { grid-template-columns: 2.2rem 1fr 1fr; } } .bible-mention p { margin: 0 0 .35rem; } .btn-page { background: var(--blanc-chaud); color: var(--encre); border-color: var(--bord); box-shadow: var(--ombre-s); font-size: .95rem; padding: .7rem 1.2rem; } .btn-page:hover { background: var(--raffia); color: var(--encre); } .btn-page:disabled { opacity: .4; pointer-events: none; } .btn-page .i--retour { transform: scaleX(-1); } @keyframes phareEntre { from { opacity: 0; transform: rotateY(-42deg) translateZ(-60px); } to { opacity: 1; transform: rotateY(0) translateZ(0); } } .phares-fiabilite p { margin: 0 0 .6rem; color: var(--encre-doux); font-size: .95rem; } .chant { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; padding: 1.1rem 1.3rem; border-radius: var(--r-l); background: linear-gradient(160deg, var(--carte-halo), var(--blanc-chaud)); border: 1px solid var(--bord); box-shadow: var(--ombre-s); } @media (max-width: 600px){ .chant { flex-direction: column; text-align: center; } } .haut-page { position: fixed; right: clamp(.9rem, 3vw, 1.6rem); bottom: clamp(.9rem, 3vw, 1.6rem); z-index: 80; width: 52px; height: 52px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--or); color: var(--nuit); box-shadow: var(--ombre-m); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity var(--transi), transform var(--transi), background var(--transi); } .haut-page.est-visible { opacity: 1; transform: none; pointer-events: auto; } .haut-page:hover { background: #ffc721; transform: translateY(-3px); } .haut-page:active { transform: translateY(0) scale(.94); transition-duration: .08s; } .haut-page .i { width: 1.35rem; height: 1.35rem; transform: rotate(180deg); } .vitrine { display: grid; gap: 1.4rem; grid-template-columns: 1fr; max-width: 920px; margin: 0 auto; } @media (min-width: 680px){ .vitrine { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px){ .vitrine { grid-template-columns: repeat(3, 1fr); } } a.vitrine-tuile:hover { box-shadow: var(--ombre-m); border-color: var(--ocre); } .vitrine-embleme svg, .vitrine-embleme .i { width: 1.9rem; height: 1.9rem; } .vitrine-pied .i { width: 1.1em; height: 1.1em; transition: transform var(--transi); } .ex-piliers::after { content: ''; position: absolute; left: -.4rem; right: -.4rem; bottom: 2.6rem; height: 3px; border-radius: 3px; background: var(--bord); } .ex-pilier-corps::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 11px; border-radius: 5px; background: var(--pilier-haut); transform: rotateX(72deg); transform-origin: top center; filter: brightness(1.12); } .ex-bilan-pied .i { width: 1.1em; height: 1.1em; transition: transform var(--transi); } .ex-bilan:hover .ex-bilan-pied .i { transform: translateX(4px); } .jx-porte-pied .i { width: 1.1em; height: 1.1em; transition: transform var(--transi); } .jx-porte:hover .jx-porte-pied .i { transform: translateX(4px); } .vitrine-fiche li { font-size: .74rem; font-weight: 700; letter-spacing: .01em; padding: .18rem .5rem; border-radius: 999px; background: var(--sable); color: var(--encre-doux); border: 1px solid transparent; } .vitrine-fiche .vf-niveau--1 { background: color-mix(in srgb, var(--vert-nzela) 14%, transparent); color: var(--vert-fiche); border-color: color-mix(in srgb, var(--vert-nzela) 30%, transparent); } .vitrine-fiche .vf-niveau--2 { background: color-mix(in srgb, var(--or) 18%, transparent); color: var(--or-fonce); border-color: color-mix(in srgb, var(--or) 42%, transparent); } .vitrine-fiche .vf-niveau--3 { background: color-mix(in srgb, var(--terre) 14%, transparent); color: var(--terre-texte); border-color: color-mix(in srgb, var(--terre) 32%, transparent); } .jeu-retour-pastille .i { width: 1.05em; height: 1.05em; transform: scaleX(-1); transition: transform var(--transi); } .jeu-retour:hover .jeu-retour-pastille .i { transform: scaleX(-1) translateX(3px); } .jeu-etat .est-battu, .jeu-etat .est-battu b { color: var(--juste-texte); } .volet-btn:disabled, .dico-select:disabled { opacity: .55; cursor: default; } .volet-btn:disabled.est-actif { opacity: 1; } .jeu-joueur.est-actif { transform: translateY(-2px) scale(1.06); box-shadow: var(--ombre-m); color: #fff; } .recap-item.jeu-classe { color: #fff; } #dv-reste.est-sur { color: var(--terre-texte); transform: scale(1.15); transition: transform .2s; } .dv-consigne.est-resultat { color: var(--terre-texte); font-size: 1.08rem; } .dv-q:hover, .dv-q:focus-visible { transform: translateY(-2px); box-shadow: var(--ombre-m); } .dv-q.est-pose { background: var(--gris-doux); color: var(--encre-doux); cursor: default; transform: none; box-shadow: none; } @keyframes dvTrouve { 0% { transform: rotateY(180deg) scale(.9); } 100% { transform: rotateY(0) scale(1.04); } } .jeu-face--ln .jeu-mot { color: var(--terre-texte); } .jeu-bravo { max-width: 520px; margin: 1.8rem auto 0; padding: 1.8rem 1.4rem; text-align: center; background: var(--blanc-chaud); border: 1px solid var(--or); border-top: 5px solid var(--or); border-radius: var(--r-l); box-shadow: var(--ombre-m); animation: pop .45s var(--rebond); } .jeu-bravo[hidden] { display: none; } .jeu-bravo h2 { margin: .4rem 0 .5rem; } .jeu-bravo p { color: var(--encre-doux); margin: 0 0 1.3rem; } .recap-item.est-juste { color: var(--juste-texte); background: rgba(31, 138, 76, .13); } .recap-item.est-faux { color: var(--rouge-texte); background: rgba(206, 17, 38, .10); } .recap-item.est-temps { color: var(--ambre-texte); background: rgba(224, 151, 63, .18); } .recap-item.est-neutre { color: var(--encre-doux); background: var(--sable); } .recap-marque .i { width: .92rem; height: .92rem; } .jeu-note { max-width: 640px; margin: 2rem auto 0; text-align: center; font-size: .9rem; font-style: italic; color: var(--encre-doux); } .quiz-demande { margin: 0 0 .7rem; color: var(--encre-doux); font-weight: 600; font-size: .98rem; } .quiz-mot { margin: 0; font-family: var(--police-titres); font-weight: 800; color: var(--titre); line-height: 1.15; font-size: clamp(1.7rem, 6vw, 2.8rem); overflow-wrap: anywhere; } .quiz-ecouter:hover { background: var(--bleu); color: #fff; transform: scale(1.08); } .quiz-ecouter .i { width: 1.3rem; height: 1.3rem; } .quiz-verdict.est-juste { color: var(--juste-texte); } .quiz-verdict.est-faux, .quiz-verdict.est-temps { color: var(--rouge-texte); } .quiz-choix { display: grid; gap: .7rem; grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; } @media (min-width: 560px){ .quiz-choix { grid-template-columns: 1fr 1fr; } } .quiz-opt { padding: .95rem 1.1rem; text-align: center; cursor: pointer; background: var(--blanc-chaud); color: var(--titre); font-weight: 600; font-size: 1.05rem; line-height: 1.2; overflow-wrap: anywhere; border: 1px solid var(--bord); border-radius: var(--r-m); box-shadow: var(--ombre-s); transition: transform var(--transi), box-shadow var(--transi), border-color var(--transi); animation: monterCourt .35s var(--rebond) backwards; } .quiz-opt:nth-child(2) { animation-delay: .05s; } .quiz-opt:nth-child(3) { animation-delay: .1s; } .quiz-opt:nth-child(4) { animation-delay: .15s; } .quiz-opt:not(:disabled):hover { transform: translateY(-2px); border-color: var(--ocre); box-shadow: var(--ombre-m); } .quiz-opt:disabled { cursor: default; } .quiz-opt.est-juste { border-color: var(--juste-bord); color: var(--juste-texte); box-shadow: 0 0 0 3px rgba(31, 138, 76, .22), var(--ombre-s); animation: pop .45s var(--rebond); } .quiz-opt.est-faux { border-color: var(--rouge); color: var(--rouge-texte); box-shadow: 0 0 0 3px rgba(206, 17, 38, .18), var(--ombre-s); animation: secouer .4s ease; } .quiz-opt.est-estompe { opacity: .5; } .recap-joueur.est-j1 { background: var(--bleu); } .recap-joueur.est-j2 { background: var(--rouge); } .recap-joueur.est-j3 { background: var(--or); color: var(--nuit); } .exo-carte { position: relative; min-height: 23.5rem; transform-style: preserve-3d; transition: transform .65s var(--rebond); } .exo-carte.est-corrigee { transform: rotateY(180deg); } .exo-carte.est-entrante { animation: quizEntre .55s var(--rebond) backwards; } .exo-champ { flex: 1; min-width: 0; padding: .68rem .9rem; font: inherit; font-size: 1.05rem; color: var(--encre); background: var(--carte-vive); border: 2px solid var(--bord); border-radius: var(--r-m); transition: border-color var(--transi), box-shadow var(--transi); } .exo-champ:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(10, 110, 224, .14); } .exo-passer:hover { color: var(--terre-texte); } .exo-verdict.est-juste { color: var(--juste-texte); } .exo-verdict.est-presque { color: var(--ambre-texte); } .exo-verdict.est-faux { color: var(--rouge-texte); } .exo-verdict.est-passe { color: var(--encre-doux); } .exo-rappel { margin: 0; color: var(--encre-doux); font-weight: 600; overflow-wrap: anywhere; } .exo-bravo { max-width: 640px; scroll-margin-top: 5.5rem; } .bilan-groupe h3 { margin: 0 0 .5rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--encre-doux); } .bilan-ligne { display: grid; grid-template-columns: minmax(6.5rem, auto) 1fr auto; align-items: center; gap: .55rem; padding: .2rem 0; font-size: .85rem; } .bilan-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--encre); } .bilan-barre { height: 8px; border-radius: 999px; background: var(--sable); overflow: hidden; } .bilan-jauge { display: block; height: 100%; border-radius: 999px; transition: width .8s ease; } .bilan-jauge.est-bien { background: #2a9d5c; } .bilan-jauge.est-moyen { background: var(--ocre); } .bilan-jauge.est-faible { background: var(--rouge); } .bilan-note { font-weight: 700; color: var(--encre-doux); font-variant-numeric: tabular-nums; } .recap-item.est-presque { color: var(--ambre-texte); background: rgba(224, 151, 63, .18); } @media (prefers-reduced-motion: reduce){ .exo-carte { transition: none; animation: none; } .bilan-jauge { transition: none; } } @media (max-width: 420px){ .exo-carte { min-height: 25rem; } } .exo-bonne .exv-seg--racine { color: var(--terre-texte); } .fenetre { position: fixed; inset: 0; z-index: 120; display: grid; justify-items: center; padding: 1rem; overflow-y: auto; overscroll-behavior: contain; } .fenetre-fond { position: fixed; inset: 0; background: rgba(12, 35, 64, .55); } .fenetre-boite { position: relative; margin: auto; width: min(30rem, 100%); background: var(--blanc-chaud); color: var(--encre); border: 1px solid var(--bord); border-radius: var(--r-m); box-shadow: var(--ombre-m); padding: 1.5rem 1.6rem 1.4rem; } .fenetre-titre { margin: 0 2rem .4rem 0; font-size: 1.3rem; } .fenetre-boite p { margin: .55rem 0 0; color: var(--encre-doux); font-size: .98rem; } .pwa-etapes { margin: .9rem 0 0; padding: 0 0 0 1.9rem; display: grid; gap: .5rem; color: var(--encre); font-size: 1rem; line-height: 1.55; } .pwa-etapes li { padding-left: .2rem; } .pwa-etapes li::marker { color: var(--or-fonce); font-weight: 700; } .fenetre-boite .pwa-repli { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--bord); font-size: .9rem; } .fenetre-fermer { position: absolute; top: .55rem; right: .6rem; width: 2.3rem; height: 2.3rem; border: 0; border-radius: 50%; background: transparent; color: var(--encre-doux); font-size: 1.5rem; line-height: 1; cursor: pointer; } .fenetre-fermer:hover { background: var(--carte-vive); color: var(--encre); } .fenetre-actions { display: flex; justify-content: flex-end; margin-top: 1.15rem; position: sticky; bottom: -1.4rem; margin-left: -1.6rem; margin-right: -1.6rem; padding: .8rem 1.6rem 1.4rem; background: var(--blanc-chaud); border-radius: 0 0 var(--r-m) var(--r-m); } .avis-notes { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 1.2rem 0 .2rem; } .avis-emoji { font-size: 1.5rem; line-height: 1; padding: .45rem .6rem; } @media (max-width: 440px){ .fenetre-boite { min-width: 0; } .avis-notes { flex-wrap: nowrap; gap: .3rem; min-width: 0; } .avis-emoji { flex: 1 1 0; min-width: 0; padding: .45rem .2rem; text-align: center; } } .avis-emoji.est-actif { background: var(--terre); border-color: transparent; transform: scale(1.08); } .avis-suite { margin-top: .3rem; } .avis-merci { font-weight: 700; color: var(--terre-texte); } .avis-fenetre .fenetre-actions { justify-content: space-between; align-items: center; gap: 1rem; } .avis-plus { font-size: .86rem; color: var(--encre-doux); text-decoration: underline; } .avis-plus:hover { color: var(--encre); } .avis-consent-bloc { text-align: left; margin: .1rem 0 .3rem; padding: .75rem .9rem; background: var(--sable); border-left: 4px solid var(--or); border-radius: var(--r-m); } .avis-consent-bloc[hidden] { display: none; } .avis-consent { display: flex; align-items: flex-start; gap: .55rem; text-align: left; font-size: .95rem; color: var(--titre); font-weight: 600; cursor: pointer; } .avis-consent input { margin-top: .2rem; width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--terre); } .avis-consent-aide { margin: .35rem 0 0 1.7rem; font-size: .82rem; line-height: 1.35; color: var(--encre-doux); } .tn-boussole { flex: none; width: 3.6rem; height: 3.6rem; perspective: 500px; } .tn-boussole-cadran { position: relative; width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 32% 28%, var(--carte-vive), var(--sable)); border: 2px solid var(--or); box-shadow: var(--ombre-s), inset 0 0 0 3px rgba(255, 255, 255, .35); transform-style: preserve-3d; transform: rotateX(18deg); animation: tnBoussoleFlotte 5s ease-in-out infinite; } .tn-boussole-aiguille { width: 1.5rem; height: 1.5rem; clip-path: polygon(50% 0%, 68% 50%, 50% 100%, 32% 50%); background: linear-gradient(to bottom, var(--or) 50%, var(--terre) 50%); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); animation: tnAiguilleCherche 4s ease-in-out infinite; } @keyframes tnBoussoleFlotte { 0%, 100% { transform: rotateX(18deg) translateY(0); } 50% { transform: rotateX(11deg) translateY(-3px); } } @keyframes tnAiguilleCherche { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(20deg); } } @media (prefers-reduced-motion: reduce){ .tn-boussole-cadran, .tn-boussole-aiguille { animation: none; } } .temoin-grille { display: grid; gap: 1.2rem; grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; text-align: left; } @media (min-width: 720px){ .temoin-grille { grid-template-columns: repeat(3, 1fr); } } .temoin-carte { margin: 0; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); box-shadow: var(--ombre-s); padding: 1.3rem 1.4rem; display: grid; gap: .6rem; align-content: start; } .temoin-note { font-size: 1.5rem; line-height: 1; } .temoin-texte { margin: 0; padding: 0; border: 0; color: var(--encre); font-style: italic; line-height: 1.55; white-space: pre-line; } .temoin-texte::before { content: '\201C'; } .temoin-texte::after { content: '\201D'; } .temoin-auteur { margin: 0; font-size: .85rem; font-weight: 700; color: var(--encre-doux); } .acc-temoignages-lien a { display: inline-block; padding-block: .12rem; font-weight: 700; color: var(--terre-texte); text-decoration: underline; } .temoignages-relance { text-align: center; margin: 2rem 0 0; } .mas-bulle [lang="ln"] { font-weight: 600; color: var(--titre); } .mas-bulle--b [lang="ln"] { color: var(--terre-texte); } @keyframes masTombe { from { opacity: 0; transform: perspective(500px) rotateX(-90deg); } to { opacity: 1; transform: perspective(500px) rotateX(0); } } .exv-fenetre::before, .exv-fenetre::after { content: ""; position: absolute; left: 0; right: 0; height: 22px; z-index: 2; pointer-events: none; } .exv-fenetre::before { top: 0; background: linear-gradient(#fff, transparent); } .exv-fenetre::after { bottom: 0; background: linear-gradient(transparent, #fff); } .exv-btn .i { width: 1rem; height: 1rem; } .exv-btn .i.est-haut { transform: rotate(180deg); } .exn-palettes--mini .exn-palette { min-width: 1.35rem; height: 1.8rem; font-size: 1.05rem; border-radius: .3rem; } @keyframes paletteTombe { 0% { transform: rotateX(-85deg); opacity: 0; } 60% { transform: rotateX(14deg); opacity: 1; } 100% { transform: rotateX(0); opacity: 1; } } @keyframes jpFlotte { 0%, 100% { margin-top: 0; } 50% { margin-top: -5px; } } @keyframes jpRevele { from { opacity: 0; transform: rotateY(-80deg); } to { opacity: 1; transform: none; } } .bw-touche:not(:disabled):hover { transform: translateY(-2px); border-color: var(--or); } .bw-touche:not(:disabled):active { transform: translateY(1px); border-bottom-width: 1px; } @keyframes bwCourant { to { background-position-x: -56px, 0; } } @keyframes bwTangue { 0%, 100% { rotate: -2.2deg; } 50% { rotate: 2.2deg; } } @keyframes bwPlonge { 30% { rotate: -7deg; margin-top: 7px; } 65% { rotate: 4deg; } } .mc-def-son .i { width: 1.15rem; height: 1.15rem; } @keyframes mcShake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-6px);} 40%{transform:translateX(5px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(3px);} } @keyframes mbDe { 0% { transform: rotate(0) scale(1); } 45% { transform: rotate(200deg) scale(1.25); } 100% { transform: rotate(360deg) scale(1); } } @keyframes mbPouls { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 183, 5, .55); } 50% { box-shadow: 0 0 0 5px rgba(242, 183, 5, 0); } } @keyframes part-volet3d { from { opacity: 0; transform: perspective(1100px) rotateX(-16deg) translateY(16px); } to { opacity: 1; transform: perspective(1100px) rotateX(0) translateY(0); } } .part-chip { border: 2px solid var(--bord); background: var(--blanc-chaud); color: var(--encre); border-radius: 999px; padding: .4rem .95rem; font-weight: 700; font-size: .9rem; font-family: var(--police-titres); cursor: pointer; transition: transform var(--transi), background var(--transi), border-color var(--transi), color var(--transi); } .part-chip:hover { transform: translateY(-2px); } .part-chip.est-actif { background: var(--terre); border-color: transparent; color: #fff; animation: pop .3s var(--rebond); } .part-label { display: grid; gap: .35rem; text-align: left; } .part-label > span { font-weight: 700; color: var(--titre); font-size: .92rem; } .part-consent input { margin-top: .15rem; width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--terre); } @keyframes battement { 0%, 34%, 100% { transform: scale(1); } 12% { transform: scale(1.18); } 24% { transform: scale(1.06); } } .faq-badge .i { width: 1.15rem; height: 1.15rem; color: var(--terre-texte); flex: none; } .faq-badge-pic { flex: none; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--or); color: var(--nuit); font-weight: 800; font-size: .76rem; } @keyframes faqJeton { from { transform: rotateY(-88deg) translateZ(-16px); opacity: 0; } to { transform: none; opacity: 1; } } #faq-recherche::-webkit-search-cancel-button { display: none; } .faq-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--or), var(--ocre)); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--rebond); } .faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); } .faq-lien .i { width: 1rem; height: 1rem; transition: transform var(--transi); } .faq-lien:hover .i { transform: translateX(4px); } .faq-copier:hover { color: var(--terre-texte); border-color: var(--ocre); transform: translateY(-2px); } .faq-copier .i { width: 1.05rem; height: 1.05rem; } @media (max-width: 700px){ .faq-badge .i, .faq-badge-pic { width: 1.25rem; height: 1.25rem; } } .acc-afrique { width: min(130vw, 860px); height: auto; fill: var(--terre); opacity: .07; filter: drop-shadow(0 20px 60px rgba(193, 90, 52, .25)); animation: accFlotte 16s ease-in-out infinite; } @keyframes accFlotte { 0%, 100% { transform: translateY(-1.4%) rotate(-1deg); } 50% { transform: translateY(1.4%) rotate(1deg); } } .action-installer[hidden] { display: none; } .acc [data-apparait]:not(.est-visible) { transform: perspective(1000px) rotateX(10deg) translateY(34px); } .acc-ruban-file { display: flex; width: max-content; animation: accDefile 36s linear infinite; } .acc-mot3d { position: relative; height: 150px; padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; perspective: 800px; animation: accLevite 5.5s ease-in-out infinite; } .acc-mot3d-face { position: absolute; inset: 0; backface-visibility: hidden; display: grid; place-items: center; align-content: center; gap: .3rem; border-radius: var(--r-m); font-family: var(--police-titres); font-weight: 700; font-size: 1.25rem; } .acc-mot3d-avers { color: var(--or); background: url("/medias/motif-kuba.svg") 0 0/48px repeat, linear-gradient(155deg, #17456f, var(--nuit)); background-blend-mode: soft-light, normal; border: 1px solid rgba(242, 183, 5, .4); box-shadow: 0 10px 24px rgba(12, 35, 64, .3); } .acc-mot3d-son { width: 1.05rem; height: 1.05rem; opacity: .65; } @media (min-width: 640px){ .acc-portes-2 { grid-template-columns: 1fr 1fr; } } .acc-porte-liens .i { width: .95em; height: .95em; } .btn-fantome-sombre { background: transparent; color: var(--terre-texte); border-color: var(--terre); padding: .5rem 1rem; font-size: .92rem; } .btn-fantome-sombre:hover { background: var(--terre); color: #fff; } .acc-pile-flip { position: absolute; inset: 0; transform-style: preserve-3d; animation: accFlipLoop 6s ease-in-out infinite; } .acc-bulle { width: max-content; max-width: 100%; padding: .42rem .8rem; border-radius: 14px; font-family: var(--police-titres); font-weight: 700; font-size: 1.02rem; background: rgba(6, 18, 36, .55); color: #e7eef7; box-shadow: 0 8px 18px rgba(0, 0, 0, .3); opacity: 0; animation: accBulle 6s ease-in-out infinite; } .acc-bulle-2 { justify-self: end; border-bottom-right-radius: 4px; background: linear-gradient(160deg, #ffd75e, var(--or)); color: var(--nuit); animation-delay: 1.2s; } .acc-bulle-3 { border-bottom-left-radius: 4px; animation-delay: 2.4s; } .acc-etape { position: absolute; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; font-family: var(--police-titres); font-weight: 700; font-size: 1.05rem; background: rgba(6, 18, 36, .55); color: #9fb4cc; box-shadow: 0 8px 18px rgba(0, 0, 0, .3); animation: accEtape 6s ease-in-out infinite; } .acc-etape-2 { left: 28%; bottom: 34%; animation-delay: .9s; } .acc-etape-3 { left: 54%; bottom: 12%; animation-delay: 1.8s; } .acc-etape-4 { left: 78%; bottom: 44%; font-size: 1.25rem; animation-delay: 2.7s; } .acc-de { position: relative; width: 58px; height: 58px; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(32deg) rotateZ(-8deg); animation: accDeRoule 12s linear infinite; } .acc-livre-page { position: absolute; top: 0; bottom: 0; left: 50%; right: 0; background: linear-gradient(100deg, #fffdf8, #efe6cf); border-radius: 0 4px 4px 0; transform-origin: left center; animation: accPageTourne 5.4s ease-in-out infinite; } .acc-livre-p2 { animation-delay: .35s; opacity: .92; } .acc-livre-p3 { animation-delay: .7s; opacity: .85; } .acc-lettre { position: absolute; font-family: var(--police-titres); font-weight: 700; line-height: 1; text-shadow: 0 8px 22px rgba(0, 0, 0, .45); animation: accLettreFlotte 6s ease-in-out infinite; } .acc-lettre-2 { left: 56%; top: 14%; font-size: 2.3rem; color: var(--ocre); animation-delay: -2s; } .acc-lettre-3 { left: 68%; top: 48%; font-size: 2.8rem; color: #9cc4ef; animation-delay: -3.6s; } .acc-lettre-4 { left: 38%; top: 54%; font-size: 1.9rem; color: #e98b63; animation-delay: -4.8s; } .acc-rouleau-liste { display: grid; animation: accRouleau 6.5s ease-in-out infinite; } .acc-pastille { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #fff; background: linear-gradient(160deg, #27a55d, #1f8a4c); box-shadow: 0 12px 26px rgba(31, 138, 76, .45); animation: pouls 3.6s ease-in-out infinite; } .acc-coche path { stroke-dasharray: 24; animation: accCoche 3.6s ease-in-out infinite; } .acc-etoile { position: absolute; color: var(--or); animation: scintille 2.4s ease-in-out infinite; } .acc-etoile-2 { right: 26%; bottom: 22%; font-size: 1rem; animation-delay: -1.2s; } .acc-vinyle { position: relative; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; background: repeating-radial-gradient(circle, #10131a 0 2px, #232a36 2px 4px); box-shadow: 0 16px 30px rgba(0, 0, 0, .5), 0 0 0 2px rgba(255, 255, 255, .06); animation: tourner 5s linear infinite; } .acc-vinyle::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(transparent 0 40deg, rgba(255, 255, 255, .14) 60deg, transparent 90deg 220deg, rgba(255, 255, 255, .08) 240deg, transparent 270deg); } .acc-pas { position: absolute; left: 16px; top: 58px; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #ffd75e, var(--or) 72%); box-shadow: 0 8px 16px rgba(242, 183, 5, .55); animation: accMonte 6s ease-in-out infinite; } @keyframes accMonte { 0%, 14% { transform: translate3d(0, 0, 8px); } 24%, 38% { transform: translate3d(16px, -34px, 24px); } 48%, 62% { transform: translate3d(32px, -68px, 40px); } 76%, 100% { transform: translate3d(0, 0, 8px); } } .acc-coeur { position: relative; width: 44px; height: 44px; background: linear-gradient(160deg, var(--rouge), var(--terre)); transform: rotate(45deg); border-radius: 0 8px 0 8px; animation: pouls 1.7s ease-in-out infinite; filter: drop-shadow(0 10px 18px rgba(206, 17, 38, .5)); } .acc-coeur::before, .acc-coeur::after { content: ""; position: absolute; width: 44px; height: 44px; border-radius: 50%; background: inherit; } .acc-onde { position: absolute; width: 76px; height: 76px; border-radius: 50%; border: 2px solid rgba(242, 183, 5, .8); animation: accOnde 1.7s ease-out infinite; } .acc-vivant-carte::before { content: ""; position: absolute; top: -46%; left: 50%; width: 460px; height: 420px; transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(242, 183, 5, .22), transparent 70%); } @keyframes acc-chiffre-pose { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } } .acc-prog-lien .i { width: 1em; height: 1em; } .acc-mdj-ecouter .i { width: 1.05em; height: 1.05em; color: var(--or); } .acc-mdj-partager .i { width: 1em; height: 1em; } .profils-zone { text-align: center; } .profils-titre { margin: 0 0 .55rem; font-weight: 800; color: var(--titre); font-family: var(--police-titres, inherit); } .profils-chips { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin-bottom: .65rem; } .profils-chip { display: inline-flex; align-items: center; border: 1px solid var(--bord); border-radius: 999px; background: var(--blanc-chaud); } .profils-chip.est-actif { border-color: var(--or); box-shadow: 0 0 0 2px rgba(242, 183, 5, .22); } .profils-choix { border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700; color: var(--encre); padding: .28rem .25rem .28rem .85rem; } .profils-chip.est-actif .profils-choix { color: var(--or-fonce); } .profils-suppr { border: 0; background: none; cursor: pointer; color: var(--encre-doux); font: inherit; padding: .28rem .6rem .28rem .25rem; } .profils-suppr:hover { color: var(--rouge-texte); } .profils-form { display: inline-flex; gap: .45rem; align-items: center; } .profils-form input { border: 1px solid var(--bord); border-radius: 999px; padding: .3rem .95rem; font: inherit; background: var(--carte-vive); color: var(--encre); width: 150px; } .profils-form input:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(10, 110, 224, .15); } .profils-ajout { border: 1px solid rgba(242, 183, 5, .55); border-radius: 999px; background: none; cursor: pointer; font: inherit; font-weight: 700; color: var(--or-fonce); padding: .3rem .95rem; transition: background var(--transi), transform var(--transi); } .profils-ajout:hover { background: rgba(242, 183, 5, .14); transform: translateY(-2px); } .profils-note { margin: .6rem 0 0; font-size: .85rem; color: var(--encre-doux); } .acc-vivant-carte .profils-form input { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .3); } @keyframes pc-flash { 0%, 100% { box-shadow: var(--ombre-s); } 30% { box-shadow: 0 0 0 3px var(--or); } } @keyframes accDefile { to { transform: translateX(-50%); } } @keyframes accLevite { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes accEtape { 0%, 4% { background: rgba(6, 18, 36, .55); color: #9fb4cc; transform: translateZ(0) scale(1); } 12%, 70% { background: linear-gradient(160deg, #ffd75e, var(--or)); color: var(--nuit); transform: translateZ(10px) scale(1.08); box-shadow: 0 10px 22px rgba(0, 0, 0, .35); } 82%, 100% { background: rgba(6, 18, 36, .55); color: #9fb4cc; transform: translateZ(0) scale(1); } } @keyframes accBulle { 0% { opacity: 0; transform: translateY(8px) translateZ(-10px); } 12%, 78% { opacity: 1; transform: translateY(0) translateZ(0); } 92%, 100% { opacity: 0; transform: translateY(-6px) translateZ(6px); } } @keyframes accFlipLoop { 0%, 38% { transform: rotateY(0); } 50%, 88% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } } @keyframes accDeRoule { from { transform: rotateX(-18deg) rotateY(0) rotateZ(-8deg); } to { transform: rotateX(342deg) rotateY(360deg) rotateZ(-8deg); } } @keyframes accPageTourne { 0%, 12% { transform: rotateY(0); } 48%, 62% { transform: rotateY(-178deg); } 98%, 100%{ transform: rotateY(0); } } @keyframes accLettreFlotte { 0%, 100% { transform: translateY(0) rotate(-4deg) scale(1); } 50% { transform: translateY(-10px) rotate(5deg) scale(1.06); } } @keyframes accRouleau { 0%, 22% { transform: translateY(0); } 33%, 55% { transform: translateY(-25%); } 66%, 88% { transform: translateY(-50%); } 100% { transform: translateY(-75%); } } @keyframes accCoche { 0%, 8% { stroke-dashoffset: 24; } 38%, 82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 24; } } @keyframes accOnde { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.6); opacity: 0; } } @media (prefers-reduced-motion: reduce){ .acc-afrique, .acc-ruban-file, .acc-mot3d, .acc-pile-flip, .acc-de, .acc-livre-page, .acc-lettre, .acc-rouleau-liste, .acc-pastille, .acc-coche path, .acc-etoile, .acc-vinyle, .acc-coeur, .acc-onde, .acc-bulle, .acc-etape, .acc-pas { animation: none; } } .page-doc-titre-i .i { width: 1.15rem; height: 1.15rem; color: var(--ocre); } .ml-serment::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: url('/medias/motif-kuba.svg'); opacity: .07; } .ml-carte::before { content: ''; position: absolute; top: 0; left: 1.2rem; width: 34px; height: 5px; border-radius: 0 0 5px 5px; background: var(--bleu); } @media (min-width: 900px){ .ml-sommaire { position: sticky; top: calc(var(--entete-h) + 1rem); } } .ml-sommaire ol { margin: 0; padding: 0; list-style: none; display: grid; gap: .2rem; } .ml-sommaire a { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem; border-radius: var(--r-s); border-left: 3px solid transparent; color: var(--encre-doux); font-size: .93rem; font-weight: 700; transition: background var(--transi), color var(--transi), border-color var(--transi); } .ml-sommaire a:hover { background: var(--carte-halo); color: var(--encre); } .ml-sommaire a.est-lu { border-left-color: var(--terre); color: var(--terre-texte); background: var(--carte-halo); } .ml-bloc { scroll-margin-top: calc(var(--entete-h) + 1.2rem); } .ml-cle-plus { display: inline-flex; align-items: center; gap: .4rem; margin-top: .2rem; padding: .35rem 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 700; color: var(--bleu-texte); } .ml-cle-plus:hover { text-decoration: underline; } .ml-cle-plus .i { width: 1em; height: 1em; transition: transform var(--transi); } .ml-cle-plus[aria-expanded="true"] .i { transform: rotate(180deg); } .ml-cles-tout button:hover { border-color: var(--or); background: var(--carte-halo); } @media print{ .ml-cle-plus, .ml-cles-tout { display: none; } } .nzela { --ecart: 3.4rem; position: relative; margin: 0 0 1.6rem; display: grid; gap: 1.5rem var(--ecart); align-items: center; grid-template-columns: minmax(190px, 230px) 1fr; perspective: 1100px; perspective-origin: 20% 50%; } .ndako { position: relative; justify-self: center; width: 100%; max-width: 210px; aspect-ratio: 9/16; border-radius: 26px; padding: 14px 12px; background: linear-gradient(160deg, var(--indigo), var(--nuit)); border: 1px solid var(--ndako-bord, rgba(255, 255, 255, .14)); box-shadow: var(--ombre-m); transform: rotateY(-16deg) rotateX(7deg); transform-style: preserve-3d; transition: transform .7s var(--rebond); } .nzela:hover .ndako { transform: rotateY(-9deg) rotateX(4deg) translateZ(26px); } .ndako::before { content: ''; position: absolute; top: 7px; left: 50%; translate: -50% 0; width: 58px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .28); } .ndako::after { content: ''; position: absolute; inset: 14px 12px; border-radius: 16px; background: radial-gradient(120% 70% at 50% 0%, rgba(242, 183, 5, .16), transparent 70%); } .nzela-voie { --teinte: var(--bleu); position: relative; display: grid; gap: .15rem .9rem; grid-template-columns: 1fr auto; align-items: center; padding: .95rem 1.1rem 1.05rem; border-radius: var(--r-m); background: var(--blanc-chaud); border: 1px solid var(--bord); box-shadow: var(--ombre-s); transform: rotateY(3deg); transition: transform .45s var(--rebond), box-shadow var(--transi), border-color var(--transi); } .nzela-voie--reste { --teinte: var(--vert-nzela); --teinte-texte: var(--vert-nzela-texte); } .nzela-voie--sort { --teinte: var(--bleu); --teinte-texte: var(--bleu-texte); } .nzela-voie--barree { --teinte: var(--rouge); --teinte-texte: var(--rouge-texte); } @media (max-width: 760px){ .nzela { grid-template-columns: 1fr; perspective-origin: 50% 0%; } .ndako { max-width: 170px; transform: rotateX(6deg); } .nzela:hover .ndako { transform: rotateX(3deg) translateZ(18px); } .nzela-voie { transform: none; } } @media (prefers-reduced-motion: no-preference){ .ndako::after { animation: respirer 5s ease-in-out infinite; } } @media print{ .ml-sommaire { display: none; } .nzela { display: block; perspective: none; } .ndako, .nzela-voie { transform: none !important; box-shadow: none; } } @keyframes monter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @keyframes brillance { from { background-position: 180% 0; } to { background-position: -80% 0; } } @keyframes nfTourne { from { transform: rotateY(0); } to { transform: rotateY(360deg); } } @keyframes mlVeille { 0%, 100% { transform: rotateY(-14deg) translateY(0); } 50% { transform: rotateY(14deg) translateY(-6px); } } @keyframes mlAnse { 0% { stroke-dashoffset: 100; opacity: .25; } 70% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } } @keyframes pouls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } } @keyframes couler { to { background-position: 200% 0; } } @keyframes couleFleuve { to { stroke-dashoffset: -130; } } @keyframes tourner { to { transform: rotate(360deg); } } @keyframes ecrire { 0% { stroke-dashoffset: 70; opacity: 0; } 12% { opacity: 1; } 55% { stroke-dashoffset: 0; opacity: 1; } 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes respirer { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } @keyframes nzelaRemplir { 0%, 70%, 100% { scale: 1 1; } 78% { scale: .82 1; } } @keyframes nzelaFiler { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 11px); opacity: 0; } } @keyframes nzelaBoucler { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 45% { left: calc(78% - 11px); } 55% { left: calc(78% - 11px); } 90% { left: 0; opacity: 1; } 100% { left: 0; opacity: 0; } } @keyframes nzelaTracer { from { scale: 1 0; } to { scale: 1 1; } } @keyframes exPousse { from { transform: rotateX(6deg) scaleY(.02); opacity: .4; } to { transform: rotateX(6deg) scaleY(1); opacity: 1; } } @keyframes mlDeplier { from { opacity: 0; transform: perspective(700px) rotateX(-12deg); } to { opacity: 1; transform: perspective(700px) rotateX(0); } } @keyframes emRetourne { 0%, 12% { transform: rotateY(0); } 45%, 62% { transform: rotateY(180deg); } 95%, 100% { transform: rotateY(0); } } @keyframes emBascule { 0%, 100% { transform: rotate(0) translateY(0); } 30% { transform: rotate(-14deg) translateY(-1px); } 60% { transform: rotate(12deg) translateY(0); } } @keyframes emPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } @keyframes emRange1 { 0%, 15% { transform: rotate(-8deg); } 55%, 85% { transform: rotate(0); } 100% { transform: rotate(-8deg); } } @keyframes emRange2 { 0%, 15% { transform: rotate(7deg); } 55%, 85% { transform: rotate(0); } 100% { transform: rotate(7deg); } } @keyframes emRange3 { 0%, 15% { transform: rotate(-3deg); } 55%, 85% { transform: rotate(0); } 100% { transform: rotate(-3deg); } } @keyframes emTangue { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-1px); } } @keyframes emVague { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(2px); } } @keyframes emDemasque { 0%, 100% { opacity: .35; transform: scale(.88); } 45%, 70% { opacity: 1; transform: scale(1); } } @keyframes emTourne { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(180deg); } } @keyframes emRoule { 0% { transform: rotate(0) scale(1); } 35% { transform: rotate(-100deg) scale(.9); } 70%, 100% { transform: rotate(-180deg) scale(1); } } @keyframes emPoint { 0%, 34% { opacity: 1; } 35%, 69% { opacity: 0; } 70%, 100% { opacity: 1; } } @keyframes emAvance { 0%, 20% { transform: translate(0, 0); } 70%, 100% { transform: translate(9px, -7px); } } @keyframes emRemplit { 0%, 10% { opacity: 0; transform: scale(.5); } 35%, 75% { opacity: .85; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(.5); } } @keyframes emTombe { 0% { transform: translateY(-13px); opacity: 0; } 15% { opacity: 1; } 55%, 100% { transform: translateY(0); opacity: 1; } } @keyframes emEfface { 0%, 55% { opacity: 1; } 70% { opacity: .15; } 85%, 100% { opacity: 1; } } @keyframes flotter { 0% { transform: translateY(10px); opacity: 0; } 25% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(-16px); opacity: 0; } } @keyframes scintille { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3) rotate(12deg); opacity: .72; } } @keyframes secouer { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } } @keyframes monterCourt { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes fondu { from { opacity: 0; } to { opacity: 1; } } @keyframes pop { 0% { transform: scale(.85); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } } @keyframes heroRecul { to { transform: translateY(90px); opacity: .25; } } @keyframes deriveMotif { to { background-position: 48px 48px; } } @keyframes deriveFrise { to { background-position-x: 32px; } } @keyframes quizEntre { from { opacity: 0; transform: rotateX(-82deg); } to { opacity: 1; transform: rotateX(0); } } @keyframes nudgeBas { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } } .mots-bandeau { margin: 0 auto 1.2rem; max-width: var(--large, 1100px); padding: .65rem 1rem; border-left: 3px solid var(--or); background: var(--carte-halo); border-radius: 0 var(--r-s) var(--r-s) 0; font-size: .9rem; color: var(--encre-doux); } .mots-bandeau-lien { font-weight: 600; white-space: nowrap; } .dico-select:disabled, select:disabled { opacity: .55; cursor: not-allowed; } @keyframes cmFlotteA { 0%, 100% { transform: rotateY(17deg) rotateX(8deg) translate3d(-16%, -12%, 40px); } 50% { transform: rotateY(12deg) rotateX(5deg) translate3d(-16%, -18%, 62px); } } @keyframes cmFlotteB { 0%, 100% { transform: rotateY(17deg) rotateX(8deg) translate3d(20%, 22%, -30px); } 50% { transform: rotateY(21deg) rotateX(10deg) translate3d(20%, 27%, -46px); } } .cm-principe { position: relative; padding: 1.5rem 1.2rem 1.2rem; border-radius: var(--r-m); background: var(--carte-vive); border: 1px solid var(--bord); box-shadow: var(--ombre-s); opacity: 0; transform: translateY(16px) rotateX(10deg); transform-origin: top center; transition: opacity .5s ease, transform .6s var(--transi); } .cm-encart { margin-top: 2rem; padding: 1.4rem 1.5rem; border-radius: var(--r-m); background: var(--blanc-chaud); border: 1px solid var(--bord); border-left: 4px solid var(--bleu); opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s var(--transi); } .cm-mini { padding: 1.2rem; border-radius: var(--r-m); background: var(--carte-vive); border: 1px solid var(--bord); box-shadow: var(--ombre-s); opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s var(--transi); } .cm-boite { display: grid; place-items: center; gap: .1rem; min-width: 74px; padding: .7rem .6rem; border-radius: var(--r-s); background: var(--carte-vive); border: 1px solid var(--bord); box-shadow: var(--ombre-s); opacity: 0; transform: rotateX(38deg) translateY(10px); transition: opacity .45s ease, transform .55s var(--transi); } .cm-preuve { padding: 1.3rem 1.35rem; border-radius: var(--r-m); background: var(--carte-vive); border: 1px solid var(--bord); box-shadow: var(--ombre-s); border-top: 3px solid var(--vert-nzela); opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .55s var(--transi); } .cm-marche { padding: 1.4rem 1.2rem; border-radius: var(--r-m); background: var(--carte-vive); border: 1px solid var(--bord); box-shadow: var(--ombre-m); text-align: center; opacity: 0; transform: rotateX(26deg) translateY(24px); transform-origin: bottom center; transition: opacity .55s ease, transform .7s var(--transi); } .cta-carte[data-cm-apparait] { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s var(--transi); } .cta-carte[data-cm-apparait].vu { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce){ .cm-principe, .cm-mini, .cm-preuve, .cm-marche, .cm-boite, .cm-encart, .cta-carte[data-cm-apparait] { opacity: 1; transform: none; transition: none; } }